Layout

src/components/common/NumberBox.vue

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

src/views/GameView.vue

@@ -10,10 +10,10 @@
     </NumberBox>
 
     <!-- Plaquettes -->
-    <div class="grid grid-cols-6 grid-rows-2 gap-2 mx-auto max-w-sm">
+    <div class="grid grid-cols-6 grid-rows-2 gap-2 mx-auto px-2 max-w-sm justify-center">
       <TransitionGroup name="list">
         <NumberBox
-          class="text-2xl "
+          class="text-2xl col-start-auto h-[1.8em]"
           :class="{ 'text-stone-600 border-stone-600': !item.free }"
           @click="selectNumber(item)"
           v-for="(item, i) in plaquettes"
@@ -40,45 +40,45 @@
       class="mb-2 text-center"
       v-for="(operation, i) in operations"
       :key="i">
-      <div class="inline-block relative">
+      <div class="inline-block relative text-xl">
         <!-- OPERATION -->
-        <div class="flex absolute top-0 right-full whitespace-nowrap">
+        <div class="flex">
           <NumberBox class="w-[2.5em]">
             {{ operation.left?.value ?? '?' }}
           </NumberBox>
           <NumberBox class="w-[2.5em] border-none">
             {{ operation.operator ?? '' }}
           </NumberBox>
+
           <NumberBox class="w-[2.5em]">
             {{ operation.right?.value ?? '?' }}
           </NumberBox>
+
+          <!-- EQUALS -->
+          <NumberBox class="mx-4 border-none">
+            =
+          </NumberBox>
+
+          <!-- RESULT -->
+          <NumberBox class="w-[2.5em]">
+            <span
+              v-if="
+                operation.operator &&
+                  operation.left &&
+                  operation.right &&
+                  isOperationValid(operation)
+              ">
+              {{
+                operate(
+                  operation.operator,
+                  operation.left.value,
+                  operation.right.value
+                )
+              }}
+            </span>
+            <span v-else>?</span>
+          </NumberBox>
         </div>
-
-        <!-- EQUALS -->
-        <NumberBox class="mx-4 border-none">
-          =
-        </NumberBox>
-
-        <!-- RESULT -->
-        <NumberBox
-          class="absolute top-0 left-full whitespace-nowrap border-none">
-          <span
-            v-if="
-              operation.operator &&
-                operation.left &&
-                operation.right &&
-                isOperationValid(operation)
-            ">
-            {{
-              operate(
-                operation.operator,
-                operation.left.value,
-                operation.right.value
-              )
-            }}
-          </span>
-          <span v-else>?</span>
-        </NumberBox>
       </div>
     </div>
   </div>
@@ -141,10 +141,10 @@ function selectNumber(p: Plaquette): void {
 
   if (
     op.operator &&
-      op.right &&
+    op.right &&
-      op.left &&
+    op.left &&
-      isOperationValid(op) &&
+    isOperationValid(op) &&
-      !op.executed
+    !op.executed
   ) {
     op.executed = true
     plaquettes.value.push({