From cb5895d8d8a80cb3eabb095b3f3b1a06db6d49d6 Mon Sep 17 00:00:00 2001
From: Settel <settel@localhost>
Date: Wed, 31 Aug 2022 10:57:25 +0200
Subject: [PATCH] feat: show who has voted in play mode refactor: move all
 types to engine.d.ts

---
 client/src/components/Lobby.vue      |  5 +---
 client/src/components/Player.vue     | 15 +++++-------
 client/src/components/PlayerList.vue | 12 ++++++----
 client/src/components/Playground.vue | 11 +++++----
 client/src/composables/engine.d.ts   | 35 ++++++++++++++++++++++++++++
 client/src/stores/PlayersStore.ts    | 10 +-------
 client/src/stores/RoundStore.ts      | 23 +++++++++---------
 7 files changed, 68 insertions(+), 43 deletions(-)

diff --git a/client/src/components/Lobby.vue b/client/src/components/Lobby.vue
index 1bf9d32..434117b 100644
--- a/client/src/components/Lobby.vue
+++ b/client/src/components/Lobby.vue
@@ -4,20 +4,17 @@
       {{ $t('waiting-for-gamemaster') }}
     </div>
     <div class="lobby__players-list">
-      <PlayerList :players="players" :hide-scores="true" />
+      <PlayerList :show-score="false" :show-checkbox="false" />
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
 import useI18n from '@/composables/useI18n'
-import { usePlayersStore } from '@/stores/PlayersStore'
 
 const { $t } = useI18n({
   'waiting-for-gamemaster': { en: 'waiting for gamemaster to start the game ...', de: 'warten, bis der/die Gamemaster:in das Spiel startet ...'},
 })
-
-const players = usePlayersStore().players
 </script>
 
 <style lang="scss">
diff --git a/client/src/components/Player.vue b/client/src/components/Player.vue
index f1b2fa5..113ac95 100644
--- a/client/src/components/Player.vue
+++ b/client/src/components/Player.vue
@@ -1,30 +1,27 @@
 <template>
   <div :class="['player__row', { 'player__row__idle': player.isIdle }]">
     <div class="player__status">
-      <span v-if="isPhaseSelectQuote">{{ hasSelected ? '☑' : '☐' }}</span>
+      <span v-if="showCheckbox">{{ checked ? '☑' : '☐' }}</span>
     </div>
     <div class="player__name">
       {{ player.name }}
     </div>
-    <div v-if="!hideScore" class="player__score">
+    <div v-if="showScore" class="player__score">
       {{ player.score || 0 }}
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue'
-import { Player } from '@/stores/PlayersStore';
-import { useGameinfoStore } from "@/stores/GameinfoStore"
+import { Player } from '@/composables/engine.d';
 
 defineProps<{
   player: Player,
-  hideScore?: boolean,
+  showScore?: boolean,
+  showCheckbox?: boolean,
+  checked?: boolean,
 }>()
 
-const game = useGameinfoStore()
-const isPhaseSelectQuote = computed(() => game.state === 'play' && game.phase === 'select-quote')
-const hasSelected = computed(() => false) // return this.$store.state.round.selections[this.player.id]
 </script>
 
 <style lang="scss">
diff --git a/client/src/components/PlayerList.vue b/client/src/components/PlayerList.vue
index 65a0250..3200516 100644
--- a/client/src/components/PlayerList.vue
+++ b/client/src/components/PlayerList.vue
@@ -1,18 +1,22 @@
 <template>
   <div class="player-list">
     <div v-for="player in players" :key="player.id">
-      <Player :player="player" :hide-score="hideScores" />
+      <Player :player="player" :show-score="showScore" :show-checkbox="showCheckbox" :checked="round.selections[player.id]" />
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import type { Players } from '@/stores/PlayersStore'
+import { usePlayersStore } from '@/stores/PlayersStore'
+import { useRoundStore } from '@/stores/RoundStore'
 
 defineProps<{
-  players: Players,
-  hideScores?: boolean,
+  showScore?: boolean,
+  showCheckbox?: boolean,
 }>()
+
+const players = usePlayersStore().players
+const round = useRoundStore().round
 </script>
 
 <style lang="scss">
diff --git a/client/src/components/Playground.vue b/client/src/components/Playground.vue
index d06c092..4cacebf 100644
--- a/client/src/components/Playground.vue
+++ b/client/src/components/Playground.vue
@@ -11,19 +11,17 @@
       </div>
     </div>
     <div class="playground__players-list">
-      <PlayerList :players="players" />
+      <PlayerList :show-score="true" :show-checkbox="playerListShowCheckbox" />
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
+import { ref, computed } from 'vue'
 import type { Quote, Source } from '@/composables/engine.d'
-import { usePlayersStore } from '@/stores/PlayersStore'
 import { useRoundStore } from '@/stores/RoundStore'
 import useEngine from '@/composables/useEngine'
-
-const players = usePlayersStore().players
+import { useGameinfoStore } from "@/stores/GameinfoStore"
 
 const round = useRoundStore().round
 const quote = { quote: round.quote } as Quote
@@ -38,6 +36,9 @@ const selectSource = async (source: Source): Promise<void> => {
     selection.value = source.id
   }
 }
+
+const game = useGameinfoStore()
+const playerListShowCheckbox = computed(() => game.state === 'play' && game.phase === 'select-quote')
 </script>
 
 <style lang="scss">
diff --git a/client/src/composables/engine.d.ts b/client/src/composables/engine.d.ts
index 92628db..8fc5006 100644
--- a/client/src/composables/engine.d.ts
+++ b/client/src/composables/engine.d.ts
@@ -1,3 +1,12 @@
+export type Player = {
+  id: string
+  name: string
+  isIdle: boolean
+  score: number
+}
+
+export type Players = Array<Player>
+
 export type Quote = {
   id: string
   quote: string
@@ -11,3 +20,29 @@ export type Source = {
 }
 
 export type Sources = Array<Sources>
+
+export type Selection = {
+  id: string
+}
+
+export type Selections = Array<Selection>
+
+export type RevelationVotes = {
+  [key: string]: Array<string>
+}
+
+export type RevelationSources = {
+  [key: string]: boolean
+}
+
+export type Revelations = {
+  votes: RevelationVotes
+  sources: RevelationSources
+}
+
+export type Round = {
+  quote: string
+  sources: Sources
+  selections: Selections
+  revelations: Revelations
+}
diff --git a/client/src/stores/PlayersStore.ts b/client/src/stores/PlayersStore.ts
index 38205a9..c931d34 100644
--- a/client/src/stores/PlayersStore.ts
+++ b/client/src/stores/PlayersStore.ts
@@ -1,13 +1,5 @@
 import { defineStore } from 'pinia'
-
-export type Player = {
-  id: string
-  name: string
-  isIdle: boolean
-  score: number
-}
-
-export type Players = Array<Player>
+import { Players } from '@/composables/engine.d';
 
 export const usePlayersStore = defineStore('PlayersStore', {
   state: () => {
diff --git a/client/src/stores/RoundStore.ts b/client/src/stores/RoundStore.ts
index 50b33a0..e7a8079 100644
--- a/client/src/stores/RoundStore.ts
+++ b/client/src/stores/RoundStore.ts
@@ -1,14 +1,5 @@
 import { defineStore } from 'pinia'
-
-export type Source = {
-  id: string
-  name: string
-}
-
-export type Round = {
-  quote: string
-  sources: Array<Source>
-}
+import type { Round, Sources, Selections, RevelationVotes, RevelationSources } from '@/composables/engine.d'
 
 export const useRoundStore = defineStore('RoundStore', {
   state: () => {
@@ -16,14 +7,22 @@ export const useRoundStore = defineStore('RoundStore', {
       round: {
         quote: '',
         sources: [],
+        selections: [],
+        revelations: {
+          votes: {},
+          sources: {},
+        },
       } as Round,
     }
   },
   actions: {
     setRound(round: Round): void {
       round = round || {} as Round
-      this.round.quote = round.quote
-      this.round.sources = round.sources
+      this.round.quote = round.quote || ''
+      this.round.sources = round.sources || [] as Sources
+      this.round.selections = round.selections || [] as Selections
+      this.round.revelations.votes = round.revelations?.votes || {} as RevelationVotes
+      this.round.revelations.sources = round.revelations?.sources || {} as RevelationSources
     },
   },
 })