From 663528f8af5fa1d24c8d2892bbaa7ac48d06318f Mon Sep 17 00:00:00 2001
From: Simon Cambier <simon.cambier@protonmail.com>
Date: Sun, 20 Feb 2022 12:26:57 +0100
Subject: [PATCH] Styles

---
 index.html                        |  2 +-
 src/components/AppHeader.vue      |  7 +++--
 src/components/OperationsList.vue | 47 +++++++++++++------------------
 src/components/PlaquettesList.vue |  3 +-
 src/index.css                     | 12 +++++++-
 src/views/GameView.vue            |  5 ++--
 src/views/HomeView.vue            |  2 +-
 tailwind.config.js                |  1 +
 8 files changed, 42 insertions(+), 37 deletions(-)
diff --git a/index.html b/index.html
index f40619f..234a72b 100644
--- a/index.html
+++ b/index.html
@@ -5,7 +5,7 @@
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
   <link rel="icon" href="/favicon.ico" />
-  <title>Le compte est bon</title>
+  <title>N0mbers</title>
 </head>
 
 <body class="bg-stone-200 text-stone-900 dark:bg-stone-900 dark:text-stone-200 h-full">
diff --git a/src/components/AppHeader.vue b/src/components/AppHeader.vue
index 3dde71f..26e8a11 100644
--- a/src/components/AppHeader.vue
+++ b/src/components/AppHeader.vue
@@ -6,10 +6,11 @@
       class="text-xl text-stone-400 hover:text-cyan-500 transition-opacity duration-200">
       <IconHouse />
     </RouterLink>
-    <h1 class="py-2 text-3xl text-center">
-      Numbers
+    <h1 class="py-2 font-mono text-3xl text-center">
+      N<span class="text-cyan-500">0</span>mbers
     </h1>
-    <IconMenu class="text-xl text-stone-400 hover:text-cyan-500 transition-opacity" />
+    <IconMenu
+      class="text-xl text-stone-400 hover:text-cyan-500 transition-opacity" />
   </div>
 </template>
 
diff --git a/src/components/OperationsList.vue b/src/components/OperationsList.vue
index 6f8c337..995c0f2 100644
--- a/src/components/OperationsList.vue
+++ b/src/components/OperationsList.vue
@@ -1,19 +1,19 @@
 <template>
-  <div>
+  <div class="relative font-mono text-xl text-center">
     <TransitionGroup name="slide_up">
       <div
-        class="text-center md:mb-2"
+        class=""
         v-for="(op, i) in operations"
         :style="{
           transitionDelay: `${transDelay * (operations.length - i)}ms`,
         }"
         :key="i">
-        <div class="inline-block relative text-xl">
-          <!-- OPERATION -->
+        <div class="inline-block">
+          <!-- OPERATION LINE -->
           <div
-            class="flex items-center border-b border-stone-600"
-            :class="{ 'text-red-400': isOperationInvalid(op) }">
-            <!-- LEFT -->
+            class="flex items-center pb-1 border-b border-stone-600 border-dashed md:py-2"
+            :class="{ 'text-red-500': isOperationInvalid(op) }">
+            <!-- LEFT OPERAND -->
             <div class="w-[2.5em] transition-all">
               {{ op.left?.value ?? '&nbsp;' }}
             </div>
@@ -27,7 +27,7 @@
               <span v-else>&nbsp;</span>
             </div>
 
-            <!-- RIGHT -->
+            <!-- RIGHT OPERAND -->
             <div class="w-[2.5em] transition-all">
               {{ op.right?.value ?? '&nbsp;' }}
             </div>
@@ -38,28 +38,22 @@
             </div>
 
             <!-- RESULT -->
-            <PlaquetteBox
-              :dynamic-size="true"
-              class="w-[3.2em] h-8 border-none">
+            <div class="w-[3.2em] transition-all">
               <IconSad v-if="isOperationInvalid(op)" />
               <span
-                v-else-if="
-                  op.operator &&
-                    op.left &&
-                    op.right &&
-                    isOperationResultValid(op)
-                ">
-                {{ operate(op.operator, op.left.value, op.right.value) }}
+                :class="{ 'text-cyan-500': op.result.value === result }"
+                v-else-if="op.result">
+                {{ op.result?.value }}
               </span>
               <span v-else>?</span>
-            </PlaquetteBox>
+            </div>
 
             <!-- UNDO -->
             <button
               class="ml-4"
               @click="undoOperation(i)">
               <IconUndo
-                class="text-stone-600"
+                class="text-stone-600 hover:text-cyan-500"
                 :class="{
                   invisible: !canOperationBeDeleted(op),
                 }" />
@@ -72,14 +66,13 @@
 </template>
 
 <script setup lang="ts">
+import { getEmptyOperation, isOperationInvalid } from '@/algo'
 import {
-  getEmptyOperation,
-  isOperationInvalid,
-  isOperationResultValid,
-  operate,
-} from '@/algo'
-import PlaquetteBox from '@/components/common/PlaquetteBox.vue'
-import { gameState, operations, plaquettes } from '@/composables/game-state'
+  gameState,
+  operations,
+  plaquettes,
+  result,
+} from '@/composables/game-state'
 import { operatorIcons } from '@/composables/operators'
 import { GameState } from '@/globals'
 import { Operation } from '@/types'
diff --git a/src/components/PlaquettesList.vue b/src/components/PlaquettesList.vue
index 79fee42..3c0b670 100644
--- a/src/components/PlaquettesList.vue
+++ b/src/components/PlaquettesList.vue
@@ -1,10 +1,9 @@
 <template>
   <div
-    class="grid grid-cols-6 grid-rows-2 gap-2 justify-center px-2 mx-auto max-w-sm">
+    class="grid grid-cols-6 grid-rows-2 gap-2 justify-center px-2 mx-auto max-w-sm font-mono">
     <TransitionGroup name="slide_left">
       <PlaquetteBox
         v-for="(item, i) in plaquettes"
-
         :key="i"
         is="button"
         @click="click(item)"
diff --git a/src/index.css b/src/index.css
index 651143c..6856310 100644
--- a/src/index.css
+++ b/src/index.css
@@ -45,6 +45,15 @@
   /* Legacy iOS */
 }
 
+/* Jetbrains mono - latin */
+@font-face {
+  font-family: 'Jetbrains Mono';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('../fonts/JetBrainsMono-Regular.woff2');
+}
+
 /* ROUTE TRANSITION */
 
 .route-move,
@@ -136,6 +145,7 @@
 @layer components {
   .btn {
     @apply w-fit p-2;
-    @apply rounded border border-stone-600 hover:border-cyan-500 transition-opacity;
+    @apply rounded border border-stone-600 transition-opacity;
+    @apply hover:border-cyan-500 hover:text-cyan-500;
   }
 }
diff --git a/src/views/GameView.vue b/src/views/GameView.vue
index c568231..3cd9d13 100644
--- a/src/views/GameView.vue
+++ b/src/views/GameView.vue
@@ -2,7 +2,7 @@
   <div class="w-full">
     <!-- Number to find -->
     <div class="p-1 mx-auto mb-4 w-fit text-cyan-500">
-      <span class="text-4xl">{{ result ? result : '???' }}</span>
+      <span class="font-mono text-4xl">{{ result ? result : '???' }}</span>
     </div>
 
     <!-- Start button -->
@@ -35,7 +35,8 @@
         <OperatorsList @click="selectOperator" />
 
         <!-- Divider -->
-        <div class="my-4 mx-auto max-w-sm border-b" />
+        <div
+          class="my-4 mx-auto max-w-sm border-b border-cyan-500/50" />
 
         <!-- List of Operations -->
         <OperationsList v-show="gameIsRunning" />
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 70e34e6..271ff43 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -26,7 +26,7 @@
           class="text-2xl btn">
           {{ t('randomGame') }}
         </RouterLink>
-        Un nombre au hasard, pour le plaisir
+        Une partie au hasard, pour le plaisir
       </div>
     </div>
   </div>
diff --git a/tailwind.config.js b/tailwind.config.js
index 34c631d..4843639 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -5,6 +5,7 @@ module.exports = {
     extend: {},
     fontFamily: {
       sans: ['Manrope', 'ui-sans-serif', 'system-ui', 'apple-system'],
+      mono: ['Jetbrains Mono', 'monospace'],
     },
   },
   plugins: [],
