feat: add Quote component

client/src/assets/css/colors.scss

@@ -46,3 +46,8 @@ $alert-border: 2px solid #F0A0A0;
 $debug-background-color: lighten($background-primary-color, 10%);
 $debug-border: none;
 $debug-text-color: $text-primary-color;
+
+// Quote
+$quote-background-color: #ffff88;
+$quote-border: none;
+$quote-text-color: #384048;

client/src/components/CollectQuotes.vue

@@ -0,0 +1,26 @@
+<template>
+  <div class="collect-quotes__container">
+    <h1>collect quotes</h1>
+    <Quote v-for="quote in quotes" :key="quote.id" :quote="quote" :editable="true" />
+  </div>
+</template>
+
+<script setup lang="ts">
+const quotes = [
+  {
+    id: 1,
+    quote: 'Somna imanus it vorgenstra exa al termanum.',
+  },
+]
+</script>
+
+<style lang="scss">
+.collect-quotes {
+  &__container {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    height: 100%;
+  }
+}
+</style>

client/src/components/Quote.vue

@@ -0,0 +1,43 @@
+<template>
+  <div class="quote__container">
+    <div class="quote__quote">
+      {{ quote.quote }}
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+type Quote = {
+  id: string,
+  quote: string,
+}
+
+defineProps<{
+  quote: Quote,
+  editable?: boolean,
+}>()
+</script>
+
+<style lang="scss">
+@import '~/assets/css/components';
+
+.quote {
+  &__container {
+    display: flex;
+    align-items: center;
+    width: 460px;
+    height: 210px;
+    margin: 32px;
+    padding: 32px;
+    background-color: $quote-background-color;
+    border: $quote-border;
+    color: $quote-text-color;
+  }
+
+  &__quote {
+    font-size: 24px;
+    border-radius: 0 16px 0 0;
+    text-align: center;
+  }
+}
+</style>

client/src/pages/play.vue

@@ -7,7 +7,11 @@
     </AlertBox>
     <div class="page-play__playfield-container">
       <div class="page-play__playfield-content">
-        <Lobby v-if="game.state === 'idle'"/>
+        <Lobby v-if="game.state === 'idle'" />
+        <CollectQuotes v-if="game.state === 'collect'" />
+        <!-- <ReadySet v-if="game.state === 'ready-set'" :text="game.phase" /> -->
+        <!-- <Play v-if="game.state === 'play'" /> -->
+        <!-- <Final v-if="game.state === 'final'" /> -->
       </div>
       <EngineDebug v-if="showEngineDebug" class="page-play__playfield-debug" />
     </div>