Merge branch 'feature/predefined_game' into develop

src/components/listSelector.vue

@@ -0,0 +1,25 @@
+<template>
+  <div>
+    <div v-for="item in props.options">
+      <div :class="{ chosen: choice == item }" class="py-1" @click="choice = item">
+        {{ item }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const choice = defineModel<string>();
+interface Props {
+  options: string[];
+}
+const props = withDefaults(defineProps<Props>(), {
+  options: () => ["Wizard", "Uno"],
+});
+</script>
+
+<style scoped>
+.chosen {
+  @apply bg-blue-400 text-white font-semibold py-2;
+}
+</style>

src/components/radioBtn.vue

@@ -0,0 +1,15 @@
+<template>
+  <div class="debug" :class="{ selected: checked }" @click="checked = !checked">
+    <slot>default Label</slot>
+  </div>
+</template>
+
+<script setup lang="ts">
+const checked = defineModel<boolean>();
+</script>
+
+<style scoped>
+.selected {
+  @apply bg-red-200;
+}
+</style>

src/pages/wizard/players.vue

@@ -1,50 +1,14 @@
 <template>
   <div>
     <container>
-      <div
-        class="grid grid-cols-2 md:flex md:justify-around md:flex-wrap items-center gap-y-4"
+      <button
+        class="bg-blue-400 text-white w-32 justify-self-end"
+        @click="store.newGame()"
       >
-        <button
-          class="bg-blue-400 text-white w-32 justify-self-end"
-          @click="store.newGame()"
-        >
-          New Game
-        </button>
-        <toggleSwitch v-model="showStepsSetup" class="text-black justify-self-end"
-          >Steps Setup</toggleSwitch
-        >
-      </div>
+        New Game
+      </button>
     </container>
 
-    <div class="flex flex-wrap justify-center mt-4" v-if="showStepsSetup">
-      <container class="basis-full md:basis-1/2 pl-4">
-        <defineSteps
-          :steps="store.scoreSteps"
-          @change="
-            (ev) => {
-              store.scoreSteps = ev;
-            }
-          "
-          >ROUND STEPS</defineSteps
-        >
-      </container>
-      <container class="basis-full pl-4 md:basis-1/2">
-        <toggleSwitch v-model="store.trackBets" class="text-black justify-self-end"
-          >Bets
-        </toggleSwitch>
-        <defineSteps
-          :steps="store.betSteps"
-          @change="
-            (ev) => {
-              store.betSteps = ev;
-            }
-          "
-          :disabled="!store.trackBets"
-          >BETS STEPS</defineSteps
-        ></container
-      >
-    </div>
-
     <container class="mt-2">
       <div v-if="store.getUsers.length > 0" class="pt-8 mx-2 relative">
         <div class="absolute top-2">name</div>
@@ -82,6 +46,51 @@
         Add Player
       </button>
     </container>
+
+    <container class="shadow-md" v-if="!showStepsSetup">
+      <listSelector
+        :options="[...store.preDefinedGames, 'Custom Settings']"
+        v-model="PredefinedChoice"
+        @update:model-value="store.setGame(PredefinedChoice)"
+      ></listSelector>
+
+      <div
+        class="flex flex-wrap justify-center mt-4 scale-0 transition delay-150 duration-300 ease-out scale-x-100"
+        :class="{
+          'scale-y-100': store.targetGame == 'Custom Settings',
+          'h-0': store.targetGame != 'Custom Settings',
+        }"
+      >
+        <container class="basis-full md:basis-1/2 pl-4">
+          <defineSteps
+            :steps="store.scoreSteps"
+            :disabled="false"
+            @change="
+              (ev) => {
+                store.scoreSteps = ev;
+              }
+            "
+            >ROUND STEPS</defineSteps
+          >
+        </container>
+
+        <container class="basis-full pl-4 md:basis-1/2">
+          <toggleSwitch v-model="store.trackBets" class="text-black justify-self-end"
+            >Bets
+          </toggleSwitch>
+          <defineSteps
+            :steps="store.betSteps"
+            @change="
+              (ev) => {
+                store.betSteps = ev;
+              }
+            "
+            :disabled="!store.trackBets"
+            >BETS STEPS</defineSteps
+          ></container
+        >
+      </div>
+    </container>
   </div>
 </template>
 
@@ -91,9 +100,10 @@ import { useScoreStore } from "./store.ts";
 import toggleSwitch from "../../components/toggleswitch.vue";
 import container from "../../components/container.vue";
 import defineSteps from "./definesteps.vue";
+import listSelector from "../../components/listSelector.vue";
 
 const store = useScoreStore();
-
+const PredefinedChoice = ref(store.targetGame);
 const showStepsSetup = ref(false);
 
 const deleteU = (userId: number) => {

src/pages/wizard/score.vue

@@ -1,8 +1,17 @@
 <template>
   <div>
-    <h1>
-      Round <span>{{ scoreStore.getRoundNumber }}</span>
-    </h1>
+    <div class="flex justify-evenly items-center md:justify-center md:gap-10">
+      <h1>
+        Round <span>{{ scoreStore.getRoundNumber }}</span>
+      </h1>
+      <img
+        :src="`/public/${scoreStore.targetGame.toLowerCase()}.jpg`"
+        alt="uno"
+        class="w-16 opacity-80"
+        v-if="scoreStore.targetGame != 'Custom Settings'"
+      />
+    </div>
+
     <div class="flex flex-row justify-evenly">
       <button
         @click="

src/pages/wizard/store.ts

@@ -7,6 +7,7 @@ interface State {
     trackBets: boolean
     scoreSteps: number[]
     betSteps: number[]
+    targetGame: string
 }
 
 export type UserInfo = {
@@ -16,6 +17,7 @@ export type UserInfo = {
     betPerRound: number[]
     currentRound: number
     currentBet: number
+
 }
 const DefaultSettings = () => {
     const newUUID = uuidv4()
@@ -27,8 +29,17 @@ const DefaultSettings = () => {
         trackBets: false,
         scoreSteps: [1, 5, 10],
         betSteps: [1, 2, 5, 10],
+        targetGame: 'Uno'
     }
 }
+
+const gameSetup = [
+    { game: 'Uno', steps: [-20, -10, -5, -2, -1, 1, 2, 5, 10, 20], betSteps: [] },
+    { game: 'Wizard', steps: [-20, -10, 10, 20], betSteps: [-1, 1] },
+]
+
+const preDefinedGames = gameSetup.map(game => game.game)
+
 const updateLocalStorage = (state: State) => {
     localStorage.setItem(SETTINGS_LOCAL_STORAGE_KEY, JSON.stringify(state))
 }
@@ -74,10 +85,30 @@ export const useScoreStore = defineStore('scores', {
         },
         isGameStarted: (state) => {
             return state.userList[0].scorePerRound.length > 0
+        },
+        preDefinedGames: () => {
+            return preDefinedGames
         }
+
     },
     actions: {
-
+        setGame(gameName: string) {
+            if (preDefinedGames.includes(gameName)) {
+                const targetGame = gameSetup.filter(game => game.game == gameName)[0]
+                this.scoreSteps = targetGame.steps
+                this.betSteps = targetGame.betSteps
+                this.trackBets = targetGame.betSteps.length > 0
+                this.targetGame = gameName
+                updateLocalStorage(this.$state)
+            }
+            if (gameName == 'Custom Settings') {
+                this.scoreSteps = this.scoreSteps
+                this.betSteps = this.betSteps
+                this.trackBets = false
+                this.targetGame = gameName
+                updateLocalStorage(this.$state)
+            }
+        },
         addUser() {
             const newUUID = uuidv4()
             const username = createPlayerName(newUUID)