feat: save selection in play mode

client/src/components/Playground.vue

@@ -2,8 +2,8 @@
   <div class="playground__container">
     <div class="playground__area">
       <div class="playground__sources">
-        <SourceCard v-for="source in round.sources" :key="source.id" :source="source" :selectable="true"
-          :selected="selection == source.id" @click="selection=source.id"/>
+        <SourceCard v-for="source in round.sources" :key="source.id" :source="source" :selectable="selectable"
+          :selected="selection == source.id" @click="selectSource(source)" />
       </div>
       <div class="playground__spacer" />
       <div class="playground__quote">
@@ -18,15 +18,26 @@
 
 <script setup lang="ts">
 import { ref } 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
+
 const round = useRoundStore().round
-const quote = {
-  quote: round.quote,
-}
+const quote = { quote: round.quote } as Quote
+
+const { saveSelection } = useEngine()
+const selectable = ref(true)
 const selection = ref('')
+const selectSource = async (source: Source): Promise<void> => {
+  if (selectable.value) {
+    selectable.value = false
+    await saveSelection(source.id)
+    selection.value = source.id
+  }
+}
 </script>
 
 <style lang="scss">
@@ -63,7 +74,7 @@ const selection = ref('')
 
   &__players-list {
     width: 200px;
-    margin: 16px 16px 0 0;
+    margin: 16px 16px 0 64px;
   }
 }
 </style>

client/src/components/SourceCard.vue

@@ -6,11 +6,10 @@
 </template>
 
 <script setup lang="ts">
+import type { Source } from '@/composables/engine.d'
+
 defineProps<{
-  source: {
-    id: string
-    name: string
-  },
+  source: Source,
   selectable?: boolean,
   selected?: boolean,
 }>()
@@ -30,23 +29,25 @@ defineProps<{
     align-items: center;
     background-color: $sourcecard-background-color;
     color: $sourcecard-text-color;
+    cursor: not-allowed;
 
     &__selectable {
       cursor: pointer;
+
       &:hover {
         background-color: $sourcecard-hover-background-color;
         border: $sourcecard-hover-border;
         color: $sourcecard-hover-text-color;
       }
-      &.source-card__container__selected {
+    }
+
+    &__selected {
       background-color: $sourcecard-selected-background-color;
       border: $sourcecard-selected-border;
       color: $sourcecard-selected-text-color;
       box-shadow: $sourcecard-selected-box-shadow;
-        cursor: default;
+      cursor: not-allowed;
     }
   }
-
-  }
 }
 </style>

client/src/composables/engine.d.ts

@@ -4,3 +4,10 @@ export type Quote = {
 }
 
 export type Quotes = Array<Quote>
+
+export type Source = {
+  id: string
+  name: string
+}
+
+export type Sources = Array<Sources>

client/src/composables/engine/play.ts

@@ -0,0 +1,10 @@
+import { useUserinfoStore } from "@/stores/UserinfoStore"
+
+export async function saveSelection(selection: string): Promise<void> {
+  const userInfoStore = useUserinfoStore()
+  await this.callApi('/api/saveSelection', {
+    g: userInfoStore.gameId,
+    selection: selection,
+  })
+}
+

client/src/composables/useEngine.ts

@@ -3,7 +3,8 @@ import { callApi, QueryParams } from '@/composables/engine/callApi'
 import { start, stop } from '@/composables/engine/startStop'
 import { fetchUpdate } from '@/composables/engine/fetchUpdate'
 import { loadQuotes, getQuotesRef, deleteQuote, saveQuote } from '@/composables/engine/quotes'
-import { collectQuotes, startGame, continueGame, resetGame, finishGame } from '@/composables/engine/game'
+import { collectQuotes, startGame, continueGame, resetGame, finishGame } from '@/composables/engine/gamemaster'
+import { saveSelection } from '@/composables/engine/play'
 import type { Quotes } from '@/composables/engine.d'
 
 interface EngineContext {
@@ -34,6 +35,7 @@ export interface useEngine {
     continueGame: () => Promise<void>
     resetGame: () => Promise<void>
     finishGame: () => Promise<void>
+    saveSelection: (selection: string) => Promise<void>
 }
 
 export default (): useEngine => {
@@ -66,5 +68,6 @@ export default (): useEngine => {
         continueGame: () => continueGame.apply(context),
         resetGame: () => resetGame.apply(context),
         finishGame: () => finishGame.apply(context),
+        saveSelection: (selection: string) => saveSelection.apply(context, [selection]),
     }
 }