update style for game selection

maldestor95 · Aug 2, 2024 · d26bd15 · d26bd15
1 parent 4282508
commit d26bd15
Show file tree

Hide file tree

Showing 3 changed files with 67 additions and 61 deletions.
diff --git a/src/components/listSelector.vue b/src/components/listSelector.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <div v-for="item in props.options">
-      <div :class="{ 'bg-red-200': choice == item }" @click="choice = item">
+      <div :class="{ chosen: choice == item }" class="py-1" @click="choice = item">
         {{ item }}
       </div>
     </div>
@@ -18,4 +18,8 @@ const props = withDefaults(defineProps<Props>(), {
 });
 </script>
 
-<style scoped></style>
+<style scoped>
+.chosen {
+  @apply bg-blue-400 text-white font-semibold py-2;
+}
+</style>
diff --git a/src/pages/wizard/players.vue b/src/pages/wizard/players.vue
@@ -1,66 +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"
-          @click="
-            store.targetGame = '';
-            PredefinedChoice = '';
-          "
-          >Steps Setup</toggleSwitch
-        >
-      </div>
-    </container>
-
-    <container class="shadow-md" v-if="!showStepsSetup">
-      <listSelector
-        :options="store.preDefinedGames"
-        v-model="PredefinedChoice"
-        @update:model-value="store.setGame(PredefinedChoice)"
-      ></listSelector>
+        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>
@@ -98,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>
 
@@ -110,7 +103,7 @@ import defineSteps from "./definesteps.vue";
 import listSelector from "../../components/listSelector.vue";
 
 const store = useScoreStore();
-const PredefinedChoice = ref(store.preDefinedGames[0]);
+const PredefinedChoice = ref(store.targetGame);
 const showStepsSetup = ref(false);
 
 const deleteU = (userId: number) => {

diff --git a/src/pages/wizard/store.ts b/src/pages/wizard/store.ts
@@ -7,7 +7,7 @@ interface State {
     trackBets: boolean
     scoreSteps: number[]
     betSteps: number[]
-    targetGame?: string
+    targetGame: string
 }
 
 export type UserInfo = {
@@ -29,6 +29,7 @@ const DefaultSettings = () => {
         trackBets: false,
         scoreSteps: [1, 5, 10],
         betSteps: [1, 2, 5, 10],
+        targetGame: 'Uno'
     }
 }
 
@@ -98,6 +99,14 @@ export const useScoreStore = defineStore('scores', {
                 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() {