Plaquettes size

src/components/OperationsList.vue

@@ -29,7 +29,7 @@
           </div>
 
           <!-- RESULT -->
-          <NumberBox class="w-[2.5em] border-none">
+          <PlaquetteBox :dynamic-size="true" class="w-[3.2em] border-none">
             <IconSad v-if="isOperationInvalid(op)" />
             <span
               v-else-if="
@@ -38,7 +38,7 @@
               {{ operate(op.operator, op.left.value, op.right.value) }}
             </span>
             <IconQuestion v-else />
-          </NumberBox>
+          </PlaquetteBox>
           <button
             class="ml-8"
             @click="undoOperation(i)">
@@ -69,6 +69,7 @@ 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
 

src/components/common/PlaquetteBox.vue

@@ -0,0 +1,38 @@
+<template>
+  <div
+    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>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+
+const props = withDefaults(
+  defineProps<{ dynamicSize: boolean }>(),
+  {
+    dynamicSize: false,
+  },
+)
+const textSize = ref('text-2xl')
+
+const content = ref<HTMLSpanElement>()
+watch(
+  content,
+  () => {
+    if (props.dynamicSize && content.value?.innerHTML) {
+      const val = content.value.innerHTML.trim()
+      if (parseInt(val).toString() === val) {
+        textSize.value = 'text-2xl'
+        if (val.length === 4) textSize.value = 'text-lg'
+        else if (val.length === 5) textSize.value = 'text-sm'
+        else if (val.length >= 6) textSize.value = 'text-xs'
+      }
+    }
+  },
+  { deep: true },
+)
+</script>