From 2de317f17fef587c251cbac9407da35052d3de76 Mon Sep 17 00:00:00 2001
From: Evan You <yyx990803@gmail.com>
Date: Tue, 25 Jan 2022 12:39:35 +0800
Subject: [PATCH] add success animation

---
 src/Game.vue | 35 +++++++++++++++++++++++++++++++++--
 1 file changed, 33 insertions(+), 2 deletions(-)

diff --git a/src/Game.vue b/src/Game.vue
index 022a947..b61b749 100644
--- a/src/Game.vue
+++ b/src/Game.vue
@@ -25,6 +25,7 @@ const currentRow = $computed(() => board[currentRowIndex])
 let message = $ref('')
 let grid = $ref('')
 let shakeRowIndex = $ref(-1)
+let success = $ref(false)
 
 // Keep track of revealed letters for the virtual keyboard
 const letterStates: Record<string, LetterState> = $ref({})
@@ -117,6 +118,7 @@ function completeRow() {
           ],
           -1
         )
+        success = true
       }, 1600)
     } else if (currentRowIndex < board.length - 1) {
       // go the next row
@@ -188,7 +190,11 @@ function genResultGrid() {
   <div id="board">
     <div
       v-for="(row, index) in board"
-      :class="['row', shakeRowIndex === index && 'shake']"
+      :class="[
+        'row',
+        shakeRowIndex === index && 'shake',
+        success && currentRowIndex === index && 'jump'
+      ]"
     >
       <div
         v-for="(tile, index) in row"
@@ -199,7 +205,10 @@ function genResultGrid() {
         </div>
         <div
           :class="['back', tile.state]"
-          :style="{ transitionDelay: `${index * 300}ms` }"
+          :style="{
+            transitionDelay: `${index * 300}ms`,
+            animationDelay: `${index * 100}ms`
+          }"
         >
           {{ tile.letter }}
         </div>
@@ -335,6 +344,28 @@ function genResultGrid() {
   }
 }
 
+.jump .tile .back {
+  animation: jump 0.5s;
+}
+
+@keyframes jump {
+  0% {
+    transform: translateY(0px);
+  }
+  20% {
+    transform: translateY(5px);
+  }
+  60% {
+    transform: translateY(-25px);
+  }
+  90% {
+    transform: translateY(3px);
+  }
+  100% {
+    transform: translateY(0px);
+  }
+}
+
 @media (max-height: 680px) {
   .tile {
     font-size: 3vh;