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>

src/views/GameView.vue

@@ -15,19 +15,20 @@
       {{ result }}
     </NumberBox>
 
-    <!-- Plaquettes -->
+    <!-- PLAQUETTES -->
     <div
       class="grid grid-cols-6 grid-rows-2 gap-2 justify-center px-2 mx-auto max-w-sm">
       <TransitionGroup name="slide_left">
-        <NumberBox
+        <PlaquetteBox
-          class="col-start-auto h-[1.8em] text-2xl"
+          :dynamic-size="true"
+          class="col-start-auto h-11"
           :class="{ 'text-stone-600 border-stone-600': !item.free }"
           :style="{ transitionDelay: `${initDelay * i}ms` }"
           @click="selectNumber(item)"
           v-for="(item, i) in plaquettes"
           :key="i">
           {{ item.value }}
-        </NumberBox>
+        </PlaquetteBox>
       </TransitionGroup>
     </div>
 
@@ -58,9 +59,10 @@ import {
   isSolvable,
   operate,
   operations,
-plaquettes,
+  plaquettes,
 } from '@/algo'
 import NumberBox from '@/components/common/NumberBox.vue'
+import PlaquetteBox from '@/components/common/PlaquetteBox.vue'
 import OperationsList from '@/components/OperationsList.vue'
 import { GameState, operators, pool } from '@/globals'
 import { OperatorType, Plaquette } from '@/types'