From e1b0f94fb4c58b9cda5df90ec3360d505d4e493d Mon Sep 17 00:00:00 2001
From: Evan You <yyx990803@gmail.com>
Date: Mon, 24 Jan 2022 00:48:12 +0800
Subject: [PATCH] message timing

---
 src/Game.vue     | 30 ++++++++++++++++++------------
 src/Keyboard.vue |  1 +
 2 files changed, 19 insertions(+), 12 deletions(-)

diff --git a/src/Game.vue b/src/Game.vue
index 77f4125..e4f051c 100644
--- a/src/Game.vue
+++ b/src/Game.vue
@@ -109,22 +109,28 @@ function completeRow() {
       }
     })
 
+    allowInput = false
     if (currentRow.every((tile) => tile.state === LetterState.CORRECT)) {
       // yay!
-      allowInput = false
-      showMessage(
-        ['Genius', 'Magnificent', 'Impressive', 'Splendid', 'Great', 'Phew'][
-          currentRowIndex
-        ],
-        2000
-      )
+      setTimeout(() => {
+        showMessage(
+          ['Genius', 'Magnificent', 'Impressive', 'Splendid', 'Great', 'Phew'][
+            currentRowIndex
+          ],
+          2000
+        )
+      }, 1600)
     } else if (currentRowIndex < board.length - 1) {
       // go the next row
       currentRowIndex++
+      setTimeout(() => {
+        allowInput = true
+      }, 1600)
     } else {
       // game over :(
-      allowInput = false
-      showMessage(answer.toUpperCase(), -1)
+      setTimeout(() => {
+        showMessage(answer.toUpperCase(), -1)
+      }, 1600)
     }
   } else {
     shake()
@@ -176,12 +182,12 @@ function shake() {
           tile.state && 'revealed'
         ]"
       >
-        <div class="front" :style="{ transitionDelay: `${index * 200}ms` }">
+        <div class="front" :style="{ transitionDelay: `${index * 300}ms` }">
           {{ tile.letter }}
         </div>
         <div
           :class="['back', tile.state]"
-          :style="{ transitionDelay: `${index * 200}ms` }"
+          :style="{ transitionDelay: `${index * 300}ms` }"
         >
           {{ tile.letter }}
         </div>
@@ -255,7 +261,7 @@ function shake() {
   -webkit-backface-visibility: hidden;
 }
 .tile .front {
-  border: 2px solid #ccc;
+  border: 2px solid #d3d6da;
 }
 .tile .back {
   transform: rotateX(180deg);
diff --git a/src/Keyboard.vue b/src/Keyboard.vue
index 09923c1..787c90d 100644
--- a/src/Keyboard.vue
+++ b/src/Keyboard.vue
@@ -72,6 +72,7 @@ button {
   align-items: center;
   text-transform: uppercase;
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0.3);
+  transition: all .2s 1.5s;
 }
 button:last-of-type {
   margin: 0;