Huge rework

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="{ 'text-red-600': isOperationInvalid(op) }">
+            class="flex items-center border-b border-stone-600"
+            :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">
-              {{ op.operator ?? '&nbsp;' }}
+
+            <!-- OPERATOR -->
+            <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 { GameState, gameState } from '@/globals'
+import PlaquetteBox from '@/components/common/PlaquetteBox.vue'
+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 PlaquetteBox from './common/PlaquetteBox.vue'
+import IconUndo from '~icons/ph/x-circle-fill'
 
 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"