Gameplay loop ok

src/components/OperationsList.vue

@@ -29,7 +29,9 @@
           </div>
 
           <!-- RESULT -->
-          <PlaquetteBox :dynamic-size="true" class="w-[3.2em] border-none">
+          <PlaquetteBox
+            :dynamic-size="true"
+            class="w-[3.2em] h-8 border-none">
             <IconSad v-if="isOperationInvalid(op)" />
             <span
               v-else-if="
@@ -37,8 +39,10 @@
               ">
               {{ operate(op.operator, op.left.value, op.right.value) }}
             </span>
-            <IconQuestion v-else />
+            <span v-else>?</span>
           </PlaquetteBox>
+
+          <!-- UNDO -->
           <button
             class="ml-8"
             @click="undoOperation(i)">
@@ -60,15 +64,13 @@ import {
   isOperationInvalid,
   isOperationResultValid,
   operate,
-  operations,
-  plaquettes,
 } from '@/algo'
+import { GameState, gameState } from '@/globals'
+import { operations, plaquettes } from '@/store'
 import { Operation } from '@/types'
-import IconQuestion from '~icons/bx/bx-question-mark'
 import IconSad from '~icons/bx/bx-sad'
 import IconUndo from '~icons/bx/bx-undo'
 
-import NumberBox from './common/NumberBox.vue'
 import PlaquetteBox from './common/PlaquetteBox.vue'
 
 const transDelay = 100
@@ -78,9 +80,9 @@ function canOperationBeDeleted(op: Operation): boolean {
 }
 
 function undoOperation(index: number): void {
+  if (gameState.value !== GameState.Playing) return
   const l = operations.length
   for (let i = operations.length - 1; i >= index; --i) {
-    console.log(i)
     let popped: Operation
     if (i === index) {
       popped = operations[index]

src/components/common/PlaquetteBox.vue

@@ -1,19 +1,21 @@
 <template>
-  <div
+  <Component
+    :is="is"
     class="flex overflow-hidden justify-center font-bold rounded border border-stone-600 transition-all"
     :class="[textSize]">
     <span
       class="self-center text-center"
       ref="content"><slot /></span>
-  </div>
+  </Component>
 </template>
 
 <script setup lang="ts">
 import { ref, watch } from 'vue'
 
 const props = withDefaults(
-  defineProps<{ dynamicSize: boolean }>(),
+  defineProps<{ dynamicSize: boolean; is?: string }>(),
   {
+    is: 'div',
     dynamicSize: false,
   },
 )