Styling

src/components/OperatorsList.vue

@@ -2,7 +2,7 @@
   <div class="flex gap-2 justify-center my-4">
     <PlaquetteBox
       is="button"
-      class="aspect-square w-[1.5em] text-2xl border hover:border-white"
+      class="aspect-square w-[1.5em] text-2xl border btn"
       @click="emit('click', item)"
       v-for="(item, i) in operators"
       :key="i">

src/components/PlaquettesList.vue

@@ -10,7 +10,7 @@
         class="h-11 border"
         :class="{
           'text-stone-600 border-stone-600': !item.free,
-          'hover:border-white': item.free,
+          'hover:border-cyan-500': item.free,
         }"
         :style="{ transitionDelay: `${initDelay * i}ms` }"
         :dynamic-size="true">

src/index.css

@@ -51,6 +51,7 @@
 .slide_left-leave-active {
   transition: all 0.5s ease;
 }
+
 .slide_left-enter-from,
 .slide_left-leave-to {
   opacity: 0;
@@ -61,6 +62,7 @@
 .slide_up-leave-active {
   transition: all 0.5s ease;
 }
+
 .slide_up-enter-from,
 .slide_up-leave-to {
   opacity: 0;
@@ -71,6 +73,7 @@
 .zero_height-leave-active {
   transition: all 0.5s ease;
 }
+
 .zero_height-enter-from,
 .zero_height-leave-to {
   height: 0;
@@ -80,6 +83,6 @@
 @layer components {
   .btn {
     @apply w-fit p-2;
-    @apply rounded border border-stone-600 transition-opacity;
+    @apply rounded border border-stone-600 hover:border-cyan-500 transition-opacity;
   }
 }

src/locales/fr.json

@@ -1,5 +1,5 @@
 {
-  "playAgain": "Rejouer",
+  "playAgain": "Nouveau nombre",
   "endGame.victoryLabel": "Le compte est bon !",
   "endGame.failureLabel": "Dommage...<br>Une autre partie ?",
   "startGame": "Démarrer",

src/views/GameView.vue

@@ -2,12 +2,7 @@
   <AppHeader />
 
   <!-- Number to find -->
-  <PlaquetteBox
+  <PlaquetteBox class="p-1 mx-auto mb-4 w-fit text-cyan-500">
-    class="p-1 mx-auto mb-4 w-fit"
-    :class="{
-      'text-blue-400': difficultyLevel === 1,
-      'text-purple-500': difficultyLevel === 2,
-    }">
     <span class="text-4xl">{{ result }}</span>
   </PlaquetteBox>
 
@@ -61,7 +56,7 @@
         v-else
         v-html="t('endGame.failureLabel')" />
       <button
-        class="p-2 rounded border"
+        class="btn"
         @click="reboot">
         {{ t('playAgain') }}
       </button>