Layout and difficulty

src/utils.ts

@@ -4,6 +4,10 @@
  * @param max exclusive
  * @returns
  */
-export function randRange(min: number, max: number): number {
-  return Math.floor(Math.random() * (max - min) + min)
+export function randRange(min: number, max: number, rnd = Math.random): number {
+  return Math.floor(rnd() * (max - min) + min)
+}
+
+export function randItem<T>(items: T[], rnd = Math.random): T {
+  return items[Math.floor(rnd() * items.length)]
 }

src/views/GameView.vue

@@ -1,19 +1,26 @@
 <template>
   <div>
-    <h1 class="mb-8 text-3xl font-bold text-center">
-      Le compte est bon
+    <h1 class="mt-2 mb-4 text-3xl font-bold text-center">
+      ASMD
     </h1>
     <!-- Number to find -->
 
-    <NumberBox class="aspect-square mx-auto mb-8 w-[3em] text-4xl text-red-400">
+    <NumberBox
+      class="aspect-square mx-auto mb-8 w-[3em] text-4xl"
+      :class="{
+        'text-green-400': difficultyLevel === 1,
+        'text-amber-400': difficultyLevel === 2,
+        'text-red-400': difficultyLevel === 3,
+      }">
       {{ result }}
     </NumberBox>
 
     <!-- Plaquettes -->
-    <div class="grid grid-cols-6 grid-rows-2 gap-2 mx-auto px-2 max-w-sm justify-center">
+    <div
+      class="grid grid-cols-6 grid-rows-2 gap-2 justify-center px-2 mx-auto max-w-sm">
       <TransitionGroup name="list">
         <NumberBox
-          class="text-2xl col-start-auto h-[1.8em]"
+          class="col-start-auto h-[1.8em] text-2xl"
           :class="{ 'text-stone-600 border-stone-600': !item.free }"
           @click="selectNumber(item)"
           v-for="(item, i) in plaquettes"
@@ -42,7 +49,7 @@
       :key="i">
       <div class="inline-block relative text-xl">
         <!-- OPERATION -->
-        <div class="flex">
+        <div class="flex items-center">
           <NumberBox class="w-[2.5em]">
             {{ operation.left?.value ?? '?' }}
           </NumberBox>
@@ -78,6 +85,8 @@
             </span>
             <span v-else>?</span>
           </NumberBox>
+
+          <IconClose class="ml-8 rounded-full border" />
         </div>
       </div>
     </div>
@@ -103,7 +112,8 @@ import { isOperationValid, isSolvable, operate } from '@/algo'
 import NumberBox from '@/components/common/NumberBox.vue'
 import { pool } from '@/globals'
 import { Operation, OperatorType, Plaquette } from '@/types'
-import { randRange } from '@/utils'
+import { randItem, randRange } from '@/utils'
+import IconClose from '~icons/ph/x'
 
 const operators = ['+', '-', '*', '/'] as const
 
@@ -159,10 +169,22 @@ function selectOperator(o: OperatorType): void {
   currentOperation.value.operator = o
 }
 
+const difficultyLevel = randItem([1, 1, 1, 1, 1, 1, 2, 2, 2, 3])
+
 onMounted(() => {
   do {
     // Find a problem
-    result.value = randRange(101, 1000)
+    // result.value = randRange(101, 1000)
+    result.value = (() => {
+      switch (difficultyLevel) {
+        case 1:
+          return randRange(50, 100)
+        case 2:
+          return randRange(100, 250)
+        default:
+          return randRange(250, 1000)
+      }
+    })()
 
     plaquettes.value = []
     for (let i = 0; i < 6; ++i) {