Huge rework

package.json

@@ -16,7 +16,6 @@
     "vue-router": "^4.0.12"
   },
   "devDependencies": {
-    "@iconify-json/bx": "^1.0.3",
     "@iconify-json/ph": "^1.0.4",
     "@intlify/vite-plugin-vue-i18n": "^3.3.0",
     "@rushstack/eslint-patch": "^1.1.0",

pnpm-lock.yaml

@@ -1,7 +1,6 @@
 lockfileVersion: 5.3
 
 specifiers:
-  '@iconify-json/bx': ^1.0.3
   '@iconify-json/ph': ^1.0.4
   '@intlify/vite-plugin-vue-i18n': ^3.3.0
   '@rushstack/eslint-patch': ^1.1.0
@@ -41,7 +40,6 @@ dependencies:
   vue-router: 4.0.12_vue@3.2.30
 
 devDependencies:
-  '@iconify-json/bx': 1.0.3
   '@iconify-json/ph': 1.0.4
   '@intlify/vite-plugin-vue-i18n': 3.3.0_vite@2.8.1+vue-i18n@9.1.9
   '@rushstack/eslint-patch': 1.1.0
@@ -179,12 +177,6 @@ packages:
     resolution: {integrity: sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==}
     dev: true
 
-  /@iconify-json/bx/1.0.3:
-    resolution: {integrity: sha512-nwUxwOwocTp5u+KcBUraqEXiC7VG6niL6RQIdbLsRjZwouxayyVXPIkBPwMEmxpcTk1SA8Jh52MI+Scex1wJSA==}
-    dependencies:
-      '@iconify/types': 1.0.12
-    dev: true
-
   /@iconify-json/ph/1.0.4:
     resolution: {integrity: sha512-hcxC2k25/Lh/bgXgbwAD4WvnC8BeunSqafFwIOyL1dCu3QGBgKmPFIBUv4W2kBm+rbrv7F3WHPFBAJDVrjpunA==}
     dependencies:

src/App.vue

@@ -1,5 +1,7 @@
 <script setup lang="ts"></script>
 
 <template>
-  <RouterView class="container px-2 mx-auto h-full" />
+  <div class="container px-2 mx-auto h-full">
+    <RouterView />
+  </div>
 </template>

src/components/AppHeader.vue

@@ -0,0 +1,7 @@
+<template>
+  <h1 class="pt-2 pb-4 text-3xl font-bold text-center">
+    Numbers
+  </h1>
+</template>
+
+<script setup lang="ts"></script>

src/components/OperationsList.vue

@@ -11,24 +11,30 @@
         <div class="inline-block relative text-xl">
           <!-- OPERATION -->
           <div
-            class="flex items-center"
+            class="flex items-center border-b border-stone-600"
-            :class="{ 'text-red-600': isOperationInvalid(op) }">
+            :class="{ 'text-red-400': isOperationInvalid(op) }">
             <!-- LEFT -->
-            <div class="w-[2.5em] border-b border-stone-600 transition-all">
+            <div class="w-[2.5em] transition-all">
               {{ op.left?.value ?? '&nbsp;' }}
             </div>
-            <!-- RIGHT -->
+
-            <div class="w-[2.5em] border-b border-stone-600 transition-all">
+            <!-- OPERATOR -->
-              {{ op.operator ?? '&nbsp;' }}
+            <div class="flex justify-center w-[2.5em] transition-all">
+              <Component
+                class="text-lg"
+                v-if="op.operator"
+                :is="operatorIcons[op.operator]" />
+              <span v-else>&nbsp;</span>
             </div>
 
-            <div class="w-[2.5em] border-b border-stone-600 transition-all">
+            <!-- RIGHT -->
+            <div class="w-[2.5em] transition-all">
               {{ op.right?.value ?? '&nbsp;' }}
             </div>
 
             <!-- EQUALS -->
             <div class="mx-4 border-none">
-              =
+              <IconEquals />
             </div>
 
             <!-- RESULT -->
@@ -72,13 +78,14 @@ import {
   isOperationResultValid,
   operate,
 } from '@/algo'
-import { operations, plaquettes } from '@/game-state'
+import PlaquetteBox from '@/components/common/PlaquetteBox.vue'
-import { GameState, gameState } from '@/globals'
+import { gameState, operations, plaquettes } from '@/composables/game-state'
+import { operatorIcons } from '@/composables/operators'
+import { GameState } from '@/globals'
 import { Operation } from '@/types'
-import IconUndo from '~icons/bx/bx-undo'
+import IconEquals from '~icons/ph/equals-bold'
 import IconSad from '~icons/ph/smiley-sad'
-
+import IconUndo from '~icons/ph/x-circle-fill'
-import PlaquetteBox from './common/PlaquetteBox.vue'
 
 const transDelay = 100
 

src/components/OperatorsList.vue

@@ -0,0 +1,23 @@
+<template>
+  <div class="flex gap-2 justify-center my-4">
+    <PlaquetteBox
+      is="button"
+      class="aspect-square w-[1.5em] text-2xl border hover:border-white"
+      @click="emit('click', item)"
+      v-for="(item, i) in operators"
+      :key="i">
+      <Component :is="operatorIcons[item]" />
+    </PlaquetteBox>
+  </div>
+</template>
+
+<script setup lang="ts">
+import PlaquetteBox from '@/components/common/PlaquetteBox.vue'
+import { operatorIcons } from '@/composables/operators'
+import { operators } from '@/globals'
+import { OperatorType } from '@/types'
+
+const emit = defineEmits<{
+  (e: 'click', operator: OperatorType): void
+}>()
+</script>

src/components/PlaquettesList.vue

@@ -0,0 +1,43 @@
+<template>
+  <div
+    class="grid grid-cols-6 grid-rows-2 gap-2 justify-center px-2 mx-auto max-w-sm">
+    <TransitionGroup name="slide_left">
+      <PlaquetteBox
+        v-for="(item, i) in plaquettes"
+        :key="i"
+        is="button"
+        @click="click(item)"
+        class="h-11 border"
+        :class="{
+          'text-stone-600 border-stone-600': !item.free,
+          'hover:border-white': item.free,
+        }"
+        :style="{ transitionDelay: `${initDelay * i}ms` }"
+        :dynamic-size="true">
+        {{ item.value }}
+      </PlaquetteBox>
+    </TransitionGroup>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+import PlaquetteBox from '@/components/common/PlaquetteBox.vue'
+import { Plaquette } from '@/types'
+
+defineProps<{
+  plaquettes: Plaquette[]
+}>()
+
+const emit = defineEmits<{
+  (e: 'clickNumber', item: Plaquette): void
+}>()
+
+const initDelay = ref(100)
+
+function click(item: Plaquette): void {
+  initDelay.value = 0
+  emit('clickNumber', item)
+}
+</script>

src/components/common/NumberBox.vue

@@ -1,6 +0,0 @@
-<template>
-  <div
-    class="flex overflow-hidden justify-center font-bold rounded border border-stone-600 transition-all">
-    <span class="self-center text-center"><slot /></span>
-  </div>
-</template>

src/components/common/PlaquetteBox.vue

@@ -1,7 +1,7 @@
 <template>
   <Component
     :is="is"
-    class="flex overflow-hidden justify-center font-bold rounded border border-stone-600 transition-all"
+    class="flex overflow-hidden justify-center font-bold rounded border-stone-600 transition-opacity"
     :class="[textSize]">
     <span
       class="self-center text-center"

src/composables/game-state.ts

@@ -1,7 +1,10 @@
 import { computed, reactive, ref } from 'vue'
 
-import { getEmptyOperation, isOperationReady } from './algo'
+import { getEmptyOperation, isOperationReady } from '../algo'
-import { Operation, Plaquette } from './types'
+import { GameState } from '../globals'
+import { Operation, Plaquette } from '../types'
+
+export const gameState = ref(GameState.Undefined)
 
 export const operations = reactive<Operation[]>([getEmptyOperation()])
 export const plaquettes = ref<Plaquette[]>([])
@@ -12,6 +15,7 @@ export const currentOperation = computed(
   () => operations[operations.length - 1],
 )
 
+export const gameIsRunning = computed(() => gameState.value > GameState.Loading)
 export const isEndGame = computed(
   () =>
     (operations.length === 5 && isOperationReady(currentOperation.value)) ||

src/composables/operators.ts

@@ -0,0 +1,11 @@
+import IconDivide from '~icons/ph/divide-bold'
+import IconMinus from '~icons/ph/minus-bold'
+import IconPlus from '~icons/ph/plus-bold'
+import IconMultiply from '~icons/ph/x-bold'
+
+export const operatorIcons = {
+  '+': IconPlus,
+  '-': IconMinus,
+  x: IconMultiply,
+  '/': IconDivide,
+} as const

src/globals.ts

@@ -1,15 +1,8 @@
-import { ref } from 'vue'
-
 export const operators = ['+', '-', 'x', '/'] as const
 
 export const pools = {
   1: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 25],
-  2: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 25, 50, 75],
+  2: [2, 2, 3, 3, 5, 5, 7, 11, 13, 17, 19, 23],
-  3: [
-    1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 25, 50, 75,
-    100,
-  ],
-  4: [2, 2, 3, 3, 5, 5, 7, 11, 13, 17, 19, 23],
 } as const
 
 export enum GameState {
@@ -18,5 +11,3 @@ export enum GameState {
   Loading = 2,
   Playing = 3,
 }
-
-export const gameState = ref(GameState.Undefined)

src/index.css

@@ -75,4 +75,11 @@
 .zero_height-leave-to {
   height: 0;
   opacity: 0;
+}
+
+@layer components {
+  .btn {
+    @apply w-fit p-2;
+    @apply rounded border border-stone-600 transition-opacity;
+  }
 }

src/locales/fr.json

@@ -6,5 +6,7 @@
   "easy": "facile",
   "medium": "moyen",
   "hard": "difficile",
-  "impossible": "☠"
+  "impossible": "☠",
+  "dailyGame": "Défi quotidien",
+  "randomGame": "Nombre au hasard"
 }

src/router/index.ts

@@ -1,14 +1,24 @@
 import { createRouter, createWebHistory } from 'vue-router'
 
-import GameView from '../views/GameView.vue'
+import HomeView from '../views/HomeView.vue'
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
   routes: [
     {
       path: '/',
-      name: 'game',
+      name: 'home',
-      component: GameView,
+      component: HomeView,
+    },
+    {
+      path: '/daily',
+      name: 'daily',
+      component: () => import('../views/GameView.vue'),
+    },
+    {
+      path: '/random',
+      name: 'random',
+      component: () => import('../views/GameView.vue'),
     },
   ],
 })

src/views/GameView.vue

@@ -1,120 +1,78 @@
 <template>
-  <div class="">
+  <AppHeader />
-    <h1 class="pt-2 pb-4 text-3xl font-bold text-center">
-      Le compte est bon
-    </h1>
 
-    <!-- Number to find -->
+  <!-- Number to find -->
-    <NumberBox
+  <PlaquetteBox
-      class="aspect-square mx-auto mb-8 w-[3em] text-4xl"
+    class="p-1 mx-auto mb-4 w-fit"
-      :class="{
+    :class="{
-        'text-green-400': difficultyLevel === 1,
+      'text-blue-400': difficultyLevel === 1,
-        'text-amber-400': difficultyLevel === 2,
+      'text-purple-500': difficultyLevel === 2,
-        'text-orange-400': difficultyLevel === 3,
+    }">
-        'text-red-500': difficultyLevel === 4,
+    <span class="text-4xl">{{ result }}</span>
-      }">
+  </PlaquetteBox>
-      {{ result }}
-    </NumberBox>
 
-    <!-- Start button -->
+  <!-- Start button -->
-    <!-- TODO: fix animation -->
+  <!-- TODO: fix animation -->
-    <Transition name="zero_height">
+  <Transition name="zero_height">
-      <div
-        class="text-center"
-        v-if="gameState === GameState.Waiting">
-        <div>
-          Combinez les nombres imposés afin de trouver le résultat ci-dessus, ou
-          de vous en approcher le plus possible.<br>
-          Le compteur démarre quand vous cliquez sur le bouton.<br>Partagez
-          vos meilleurs temps !
-        </div>
-
-        <div
-          class="my-4 font-bold"
-          :class="{
-            'text-green-400': difficultyLevel === 1,
-            'text-amber-400': difficultyLevel === 2,
-            'text-orange-400': difficultyLevel === 3,
-            'text-red-500': difficultyLevel === 4,
-          }">
-          Niveau de difficulté :
-          <span v-if="difficultyLevel < 4">{{ difficultyLabel }}</span>
-          <IconSkull
-            class="inline"
-            v-else />
-        </div>
-
-        <button
-          @click="startGame"
-          class="py-2 px-4 mt-4 bg-stone-800 rounded border">
-          {{ t('startGame') }}
-        </button>
-      </div>
-    </Transition>
-
-    <!-- PLAQUETTES -->
     <div
-      class="grid grid-cols-6 grid-rows-2 gap-2 justify-center px-2 mx-auto max-w-sm">
+      class="text-center"
-      <TransitionGroup name="slide_left">
+      v-if="gameState === GameState.Waiting">
-        <PlaquetteBox
+      <div>
-          v-for="(item, i) in shownPlaquettes"
+        Combinez les nombres imposés afin de trouver le résultat ci-dessus, ou
-          :key="i"
+        de vous en approcher le plus possible.<br>
-          is="button"
+        Le compteur démarre quand vous cliquez sur le bouton.<br>Partagez vos
-          @click="selectNumber(item)"
+        meilleurs temps !
-          class="h-11"
+      </div>
-          :class="{ 'text-stone-600 border-stone-600': !item.free }"
+
-          :style="{ transitionDelay: `${initDelay * i}ms` }"
+      <button
-          :dynamic-size="true">
+        @click="startGame"
-          {{ item.value }}
+        class="py-2 px-4 mt-4 btn">
-        </PlaquetteBox>
+        {{ t('startGame') }}
-      </TransitionGroup>
+      </button>
     </div>
+  </Transition>
 
-    <!-- OPERATORS -->
+  <!-- PLAQUETTES -->
-    <Transition name="slide_up">
+  <PlaquettesList
-      <div v-if="gameIsRunning">
+    :plaquettes="shownPlaquettes"
-        <div class="flex gap-2 justify-center my-4">
+    @click-number="selectNumber" />
-          <PlaquetteBox
-            is="button"
-            class="aspect-square w-[1.5em] text-2xl"
-            @click="selectOperator(item)"
-            v-for="(item, i) in operators"
-            :key="i">
-            {{ item }}
-          </PlaquetteBox>
-        </div>
 
-        <!-- Divider -->
+  <Transition name="slide_up">
-        <div class="my-4 mx-auto max-w-sm border-b" />
+    <div v-if="gameIsRunning">
+      <!-- OPERATORS -->
+      <OperatorsList @click="selectOperator" />
 
-        <!-- List of Operations -->
+      <!-- Divider -->
-        <OperationsList v-show="gameIsRunning" />
+      <div class="my-4 mx-auto max-w-sm border-b" />
-      </div>
-    </Transition>
 
-    <Transition name="slide_up">
+      <!-- List of Operations -->
-      <div
+      <OperationsList v-show="gameIsRunning" />
-        v-if="isEndGame"
+    </div>
-        class="flex flex-row justify-evenly items-center mx-auto mt-8 max-w-sm">
+  </Transition>
-        <span
+
-          v-if="isResultPerfect"
+  <Transition name="slide_up">
-          v-html="t('endGame.victoryLabel')" />
+    <div
-        <span
+      v-if="isEndGame"
-          v-else
+      class="flex flex-row justify-evenly items-center mx-auto mt-8 max-w-sm">
-          v-html="t('endGame.failureLabel')" />
+      <span
-        <button
+        v-if="isResultPerfect"
-          class="p-2 rounded border"
+        v-html="t('endGame.victoryLabel')" />
-          @click="reboot">
+      <span
-          {{ t('playAgain') }}
+        v-else
-        </button>
+        v-html="t('endGame.failureLabel')" />
-      </div>
+      <button
-    </Transition>
+        class="p-2 rounded border"
-  </div>
+        @click="reboot">
+        {{ t('playAgain') }}
+      </button>
+    </div>
+  </Transition>
 </template>
 
 <script setup lang="ts">
-import { computed, onMounted, ref, watch } from 'vue'
+import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
+import { useRoute } from 'vue-router'
 
 import {
   getEmptyOperation,
@@ -123,39 +81,41 @@ import {
   isSolvable,
   operate,
 } from '@/algo'
-import NumberBox from '@/components/common/NumberBox.vue'
+import AppHeader from '@/components/AppHeader.vue'
 import PlaquetteBox from '@/components/common/PlaquetteBox.vue'
 import OperationsList from '@/components/OperationsList.vue'
+import OperatorsList from '@/components/OperatorsList.vue'
+import PlaquettesList from '@/components/PlaquettesList.vue'
 import {
   currentOperation,
+  gameIsRunning,
+  gameState,
   isEndGame,
   isResultPerfect,
   operations,
   plaquettes,
   result,
-} from '@/game-state'
+} from '@/composables/game-state'
-import { GameState, gameState, operators, pools } from '@/globals'
+import { GameState, pools } from '@/globals'
 import { OperatorType, Plaquette } from '@/types'
 import { randItem, randRange } from '@/utils'
-import IconSkull from '~icons/ph/skull'
 
 const { t } = useI18n() // call `useI18n`, and spread `t` from  `useI18n` returning
 
-const initDelay = ref(100)
-
 /*
- * Computed
+ * Computed & refs
  */
 
-const gameIsRunning = computed(() => gameState.value > GameState.Loading)
+const difficultyLevel = ref<1 | 2>(1)
+
+const isDaily = computed(() => useRoute().name === 'daily')
 const shownPlaquettes = computed(() =>
   gameIsRunning.value ? plaquettes.value : [],
 )
 
-onMounted(() => {
+/*
-  reboot()
+ * Watchers
-  gameState.value = GameState.Waiting
+ */
-})
 
 watch(
   currentOperation,
@@ -181,7 +141,6 @@ function startGame(): void {
 
 function selectNumber(p: Plaquette): void {
   if (isEndGame.value) return
-  initDelay.value = 0
 
   const op = currentOperation.value
   if (!p.free) return
@@ -196,42 +155,27 @@ function selectNumber(p: Plaquette): void {
   }
 }
 
+/*
+ * Functions
+ */
+
 function selectOperator(o: OperatorType): void {
   if (isEndGame.value) return
   currentOperation.value.operator = o
 }
 
-const difficultyLevel = ref<1 | 2 | 3 | 4>(1)
-
-const difficultyLabel = computed(() => {
-  switch (difficultyLevel.value) {
-    case 1:
-      return t('easy')
-    case 2:
-      return t('medium')
-    case 3:
-      return t('hard')
-    default:
-      return t('impossible')
-  }
-})
-
 function reboot(): void {
   gameState.value = GameState.Playing
   do {
     // Find a problem
     // result.value = randRange(101, 1000)
-    difficultyLevel.value = randItem([1, 1, 1, 1, 2, 2, 2, 2, 3, 3, 4])
+    difficultyLevel.value = randItem([1, 1, 1, 1, 2])
     result.value = (() => {
       switch (difficultyLevel.value) {
         case 1:
-          return randRange(80, 200)
+          return randRange(101, 1000)
         case 2:
-          return randRange(201, 400)
+          return randRange(101, 1000)
-        case 3:
-          return randRange(401, 1000)
-        case 4:
-          return randRange(50, 1000)
       }
     })()
     // result.value = 29
@@ -260,4 +204,17 @@ function reboot(): void {
   )
   plaquettes.value.sort((a, b) => a.value - b.value)
 }
+
+/*
+ * Hooks
+ */
+
+onMounted(() => {
+  reboot()
+  gameState.value = GameState.Waiting
+})
+
+onUnmounted(() => {
+  gameState.value = GameState.Waiting
+})
 </script>

src/views/HomeView.vue

@@ -0,0 +1,42 @@
+<template>
+  <div class="flex flex-col h-full text-center">
+    <AppHeader />
+    <div>
+      Combinez les nombres imposés afin d'atteindre le résultat, ou de vous en
+      approcher le plus possible.<br>
+      <br>
+    </div>
+    <div class="flex flex-col grow gap-16 justify-center md:flex-row md:mt-16">
+      <!-- Daily -->
+      <div class="flex flex-col gap-4 items-center">
+        <RouterLink
+          to="/daily"
+          class="text-3xl btn">
+          {{ t('dailyGame') }}
+        </RouterLink>
+        <span>
+          Un nombre à atteindre, unique pour la journée,<br>commun à tous les
+          joueurs
+        </span>
+      </div>
+
+      <!-- Random -->
+      <div class="flex flex-col gap-4 items-center">
+        <RouterLink
+          to="/random"
+          class="text-3xl btn">
+          {{ t('randomGame') }}
+        </RouterLink>
+        Un nombre au hasard, pour le plaisir
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n'
+
+import AppHeader from '@/components/AppHeader.vue'
+
+const { t } = useI18n()
+</script>