From 4b85bdd196b5068fe73eddc1c2577ca8b2af0e67 Mon Sep 17 00:00:00 2001
From: Settel <settel@localhost>
Date: Tue, 30 Aug 2022 18:26:40 +0200
Subject: [PATCH] feat: save selection in play mode

---
 client/src/components/Playground.vue          | 23 ++++++++++++++-----
 client/src/components/SourceCard.vue          | 23 ++++++++++---------
 client/src/composables/engine.d.ts            |  7 ++++++
 .../engine/{game.ts => gamemaster.ts}         |  0
 client/src/composables/engine/play.ts         | 10 ++++++++
 client/src/composables/useEngine.ts           |  5 +++-
 6 files changed, 50 insertions(+), 18 deletions(-)
 rename client/src/composables/engine/{game.ts => gamemaster.ts} (100%)
 create mode 100644 client/src/composables/engine/play.ts

diff --git a/client/src/components/Playground.vue b/client/src/components/Playground.vue
index 4aae135..d06c092 100644
--- a/client/src/components/Playground.vue
+++ b/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>
\ No newline at end of file
diff --git a/client/src/components/SourceCard.vue b/client/src/components/SourceCard.vue
index c98bd41..0652dec 100644
--- a/client/src/components/SourceCard.vue
+++ b/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 {
-        background-color: $sourcecard-selected-background-color;
-        border: $sourcecard-selected-border;
-        color: $sourcecard-selected-text-color;
-        box-shadow: $sourcecard-selected-box-shadow;
-        cursor: default;
-      }
     }
 
+    &__selected {
+      background-color: $sourcecard-selected-background-color;
+      border: $sourcecard-selected-border;
+      color: $sourcecard-selected-text-color;
+      box-shadow: $sourcecard-selected-box-shadow;
+      cursor: not-allowed;
+    }
   }
 }
 </style>
\ No newline at end of file
diff --git a/client/src/composables/engine.d.ts b/client/src/composables/engine.d.ts
index ef8784c..92628db 100644
--- a/client/src/composables/engine.d.ts
+++ b/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>
diff --git a/client/src/composables/engine/game.ts b/client/src/composables/engine/gamemaster.ts
similarity index 100%
rename from client/src/composables/engine/game.ts
rename to client/src/composables/engine/gamemaster.ts
diff --git a/client/src/composables/engine/play.ts b/client/src/composables/engine/play.ts
new file mode 100644
index 0000000..9e7f477
--- /dev/null
+++ b/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,
+  })
+}
+
diff --git a/client/src/composables/useEngine.ts b/client/src/composables/useEngine.ts
index 20cd3e9..96547e1 100644
--- a/client/src/composables/useEngine.ts
+++ b/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]),
     }
 }
\ No newline at end of file