From 1261b0f9059564800ae93cbe73f5f0ac63f72137 Mon Sep 17 00:00:00 2001
From: Evan You <yyx990803@gmail.com>
Date: Mon, 24 Jan 2022 09:20:43 +0800
Subject: [PATCH] tweak css

---
 src/Game.vue | 31 ++++++++++++-------------------
 1 file changed, 12 insertions(+), 19 deletions(-)

diff --git a/src/Game.vue b/src/Game.vue
index a6a05f1..7526175 100644
--- a/src/Game.vue
+++ b/src/Game.vue
@@ -166,17 +166,12 @@ function shake() {
   </header>
   <div id="board">
     <div
-      class="row"
       v-for="(row, index) in board"
-      :class="{ shake: shakeRowIndex === index }"
+      :class="['row', shakeRowIndex === index && 'shake']"
     >
       <div
         v-for="(tile, index) in row"
-        :class="[
-          'tile',
-          tile.letter ? 'filled' : 'empty',
-          tile.state && 'revealed'
-        ]"
+        :class="['tile', tile.letter && 'filled', tile.state && 'revealed']"
       >
         <div class="front" :style="{ transitionDelay: `${index * 300}ms` }">
           {{ tile.letter }}
@@ -236,10 +231,8 @@ function shake() {
   user-select: none;
   position: relative;
 }
-@media (max-height: 680px) {
-  .tile {
-    font-size: 3vh;
-  }
+.tile.filled {
+  animation: zoom 0.2s;
 }
 .tile .front,
 .tile .back {
@@ -259,17 +252,11 @@ function shake() {
 .tile .front {
   border: 2px solid #d3d6da;
 }
-.tile .back {
-  transform: rotateX(180deg);
-}
 .tile.filled .front {
   border-color: #999;
 }
-.tile.filled {
-  animation: zoom 0.2s;
-}
-.tile:not(.empty) {
-  border: none;
+.tile .back {
+  transform: rotateX(180deg);
 }
 .tile.revealed .front {
   transform: rotateX(180deg);
@@ -326,4 +313,10 @@ function shake() {
     transform: translate(1px);
   }
 }
+
+@media (max-height: 680px) {
+  .tile {
+    font-size: 3vh;
+  }
+}
 </style>