Practice mode

src/App.vue

@@ -22,10 +22,10 @@
 <script setup lang="ts">
 import { onMounted } from 'vue'
 
+import { plausible } from '@/analytics'
 import AppHeader from '@/components/AppHeader.vue'
 import SideMenu from '@/components/SideMenu.vue'
 import ToastMessage from '@/components/ToastMessage.vue'
-import { plausible } from '@/analytics'
 
 onMounted(() => {
   plausible.enableAutoPageviews()

src/locales/en.json

@@ -16,6 +16,7 @@
   "randomDescription": "A challenge at random, just for fun.",
   "copiedInClipboard": "Copied in clipboard",
   "soon": "Soon",
-  "dailyHard": "Hard Mode",
+  "dailyHard": "Advanced Mode",
-  "dailyNormal": "Normal Mode"
+  "dailyNormal": "Normal Mode",
+  "practiceMode": "Practice"
 }

src/locales/fr.json

@@ -17,5 +17,6 @@
   "copiedInClipboard": "Copié dans le presse-papier",
   "soon": "Bientôt",
   "dailyNormal": "Mode Normal",
-  "dailyHard": "Mode Difficile"
+  "dailyHard": "Mode Avancé",
+  "practiceMode": "Entraînement"
 }

src/router/index.ts

@@ -12,8 +12,8 @@ const router = createRouter({
       meta: { transition: '' },
     },
     {
-      path: '/hard',
+      path: '/advanced',
-      name: 'hard',
+      name: 'advanced',
       component: () => import('../views/GameView.vue'),
       meta: { transition: 'route' },
     },
@@ -23,6 +23,12 @@ const router = createRouter({
       component: () => import('../views/GameView.vue'),
       meta: { transition: 'route' },
     },
+    {
+      path: '/practice',
+      name: 'practice',
+      component: () => import('../views/GameView.vue'),
+      meta: { transition: 'route' },
+    },
   ],
 })
 

src/views/GameView.vue

@@ -12,11 +12,16 @@
         class="text-center"
         v-if="gameState <= GameStateType.Waiting">
         {{ t('dailyDescription') }}<br><br>
-        <div v-if="isHardMode">
+        <div v-if="isPracticeMode">
-          {{ t('hardModeDescription') }}
+          {{ t('practiceModeDescription') }}
         </div>
         <div v-else>
-          {{ t('normalModeDescription') }}
+          <div v-if="isHardMode">
+            {{ t('hardModeDescription') }}
+          </div>
+          <div v-else>
+            {{ t('normalModeDescription') }}
+          </div>
         </div>
 
         <button
@@ -58,11 +63,19 @@
           v-else
           v-html="t('endGame.failureLabel')" />
         <button
+          v-if="!isPracticeMode"
           @click="toClipboard"
           class="inline-flex items-center btn-border">
           <IconShare class="mr-2" />
           {{ t('share') }}
         </button>
+        <button
+          v-else
+          @click="reboot"
+          class="inline-flex items-center btn-border">
+          <!-- TODO: icon reload -->
+          {{ t('playAgain') }}
+        </button>
       </div>
     </Transition>
   </div>
@@ -122,6 +135,7 @@ const cmpPlaquettes = ref<InstanceType<typeof PlaquettesList> | null>(null)
 const isHardMode = computed(
   () => gameDifficulty.value === GameDifficultyType.Hard,
 )
+const isPracticeMode = ref(false)
 const shownPlaquettes = computed(() =>
   gameIsRunning.value ? plaquettes.value : [],
 )
@@ -188,14 +202,12 @@ function reboot(): void {
   gameState.value = GameStateType.Playing
 
   // The daily number is >= 500 to have a minimum challenge
-  const minValue = isHardMode.value ? 500 : 101
+  const minValue = isHardMode.value && !isPracticeMode.value ? 500 : 101
-  const numPlaquettes = isHardMode.value ? 6 : 5
+  const numPlaquettes = isHardMode.value || isPracticeMode.value ? 6 : 5
   do {
     // Find a problem
-    // result.value = randRange(101, 1000)
     poolType.value = randItem([1, 1, 1, 1, 1, 2, 3])
     result.value = randRange(minValue, 1000)
-    // result.value = 29
     // Reset Operations list
     clearOperationsList()
 
@@ -207,10 +219,7 @@ function reboot(): void {
       const el = poolCopy.splice(rndItem, 1)[0]
       plaquettes.value.push({ value: el, free: true })
     }
-    // plaquettes.value = [4, 8, 10, 25, 50, 100].map(value => ({
+
-    //   free: true,
-    //   value,
-    // }))
     // Solve it
   } while (
     (isHardMode.value ? !isHardEnough(result.value) : false) ||
@@ -228,11 +237,18 @@ function reboot(): void {
 
 onMounted(() => {
   gameDifficulty.value =
-    useRoute()?.name === 'hard'
+    useRoute()?.name !== 'normal'
       ? GameDifficultyType.Hard
       : GameDifficultyType.Normal
 
-  setDailyPRNG()
+  isPracticeMode.value = useRoute().name === 'practice'
+
+  if (isPracticeMode.value) {
+    setMathPRNG()
+  }
+  else {
+    setDailyPRNG()
+  }
   result.value = 0
 
   // Wait until after the page transion to generate the number

src/views/HomeView.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="flex flex-col grow p-1 w-full text-center">
-    <div class="flex flex-col grow gap-16 justify-center md:mt-16">
+    <div class="flex flex-col grow gap-8 justify-center md:mt-16">
       <div>
         {{ t('gameDescription') }}<br><br>
         <span v-html="t('dailyDescription')" />
@@ -9,7 +9,7 @@
       </div>
 
       <!-- Normal -->
-      <div class="flex flex-col gap-4 items-center">
+      <div class="flex flex-col items-center">
         <RouterLink
           to="/normal"
           class="text-2xl btn-border">
@@ -18,14 +18,22 @@
       </div>
 
       <!-- Hard -->
-      <div class="flex flex-col gap-4 items-center">
+      <div class="flex flex-col items-center">
         <RouterLink
-          to="/hard"
+          to="/advanced"
           class="text-2xl btn-border">
           {{ t('dailyHard') }}
         </RouterLink>
       </div>
 
+      <!-- Practice -->
+      <div class="flex flex-col items-center mt-4">
+        <RouterLink
+          to="/practice"
+          class="text-xl btn-border">
+          {{ t('practiceMode') }}
+        </RouterLink>
+      </div>
     </div>
   </div>
 </template>