feat: show quote and sources in play mode

client/src/components/Playground.vue

@@ -1,9 +1,66 @@
 <template>
-  <p>Playground.vue</p>
+  <div class="playground__container">
+    <div class="playground__area">
+      <div class="playground__sources">
+        <SourceCard v-for="source in round.sources" :key="source.id" :source="source" />
+      </div>
+      <div class="playground__spacer" />
+      <div class="playground__quote">
+        <QuoteCard :quote="quote" />
+      </div>
+    </div>
+    <div class="playground__players-list">
+      <PlayerList :players="players" />
+    </div>
+  </div>
 </template>
 
 <script setup lang="ts">
+import { usePlayersStore } from '@/stores/PlayersStore'
+import { useRoundStore } from '@/stores/RoundStore'
+
+const players = usePlayersStore().players
+const round = useRoundStore().round
+const quote = {
+  quote: round.quote,
+}
 </script>
 
 <style lang="scss">
+.playground {
+  &__container {
+    display: flex;
+    width: 100%;
+    height: 100%;
+  }
+
+  &__area {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+    margin: 40px;
+  }
+
+  &__sources {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-around;
+    gap: 24px 36px;
+  }
+
+  &__spacer {
+    flex-grow: 3;
+  }
+
+  &__quote {
+    display: flex;
+    justify-content: center;
+    flex-grow: 4;
+  }
+
+  &__players-list {
+    width: 200px;
+    margin: 16px 16px 0 0;
+  }
+}
 </style>

client/src/components/SourceCard.vue

@@ -0,0 +1,28 @@
+<template>
+  <div class="source-card__container">
+    {{ source.name }}
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  source: {
+    id: string
+    name: string
+  },
+}>()
+</script>
+
+<style lang="scss">
+.source-card {
+  &__container {
+    display: flex;
+    width: 180px;
+    height: 40px;
+    border: 3px solid white;
+    border-radius: 8px;
+    justify-content: center;
+    align-items: center;
+  }
+}
+</style>

client/src/composables/engine/fetchUpdate.ts

@@ -1,6 +1,7 @@
 import { useEngineStore } from "@/stores/EngineStore"
 import { useUserinfoStore } from "@/stores/UserinfoStore"
 import { useGameinfoStore } from "@/stores/GameinfoStore"
+import { useRoundStore } from "@/stores/RoundStore"
 import { usePlayersStore } from "@/stores/PlayersStore"
 
 export async function fetchUpdate() {
@@ -29,6 +30,7 @@ export async function fetchUpdate() {
         
         useEngineStore().setJson(response)
         useGameinfoStore().setGameinfo(response.game)
+        useRoundStore().setRound(response.game.round)
         usePlayersStore().setPlayers(response.game.players)
 
         // apply rate limit

client/src/stores/RoundStore.ts

@@ -0,0 +1,29 @@
+import { defineStore } from 'pinia'
+
+export type Source = {
+  id: string
+  name: string
+}
+
+export type Round = {
+  quote: string
+  sources: Array<Source>
+}
+
+export const useRoundStore = defineStore('RoundStore', {
+  state: () => {
+    return {
+      round: {
+        quote: '',
+        sources: [],
+      } as Round,
+    }
+  },
+  actions: {
+    setRound(round: Round): void {
+      round = round || {} as Round
+      this.round.quote = round.quote
+      this.round.sources = round.sources
+    },
+  },
+})