From 51656e547975cc0045e83d70a16553d52a0d9593 Mon Sep 17 00:00:00 2001
From: Kostya <ckutls228@gmail.com>
Date: Thu, 14 Dec 2023 20:51:15 +0300
Subject: [PATCH] refactor card in saper game

---
 .../css/PagesStyles/games-pages/saper.css     | 20 +++++++++++++++++++
 .../src/pages/games-pages/SapergamePage.vue   | 10 +++++-----
 2 files changed, 25 insertions(+), 5 deletions(-)

diff --git a/luckydiamond/src/assets/css/PagesStyles/games-pages/saper.css b/luckydiamond/src/assets/css/PagesStyles/games-pages/saper.css
index 0fb083f..8b97670 100644
--- a/luckydiamond/src/assets/css/PagesStyles/games-pages/saper.css
+++ b/luckydiamond/src/assets/css/PagesStyles/games-pages/saper.css
@@ -279,6 +279,26 @@ input[type="number"]::-webkit-outer-spin-button {
     transform: rotateY(180deg);
 }
 
+.square h2 {
+    transition: .2s;
+    opacity: 1;
+}
+
+.square-text {
+    color: #303751;
+    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.00);
+    font-family: Montserrat Alternates;
+    font-size: 33px;
+    font-weight: 700;
+    text-transform: uppercase;
+    text-align: center;
+    padding-top: 25px;
+}
+
+.hidden {
+    opacity: 0 !important;
+}
+
 .display-lines {
     display: flex;
 }
diff --git a/luckydiamond/src/pages/games-pages/SapergamePage.vue b/luckydiamond/src/pages/games-pages/SapergamePage.vue
index 15babbc..fa56489 100644
--- a/luckydiamond/src/pages/games-pages/SapergamePage.vue
+++ b/luckydiamond/src/pages/games-pages/SapergamePage.vue
@@ -64,35 +64,35 @@
             <div class="game-firstline">
               <ul class="display-lines margin-lines">
                 <li class="firstline" v-for="index in 5" :key="index">
-                  <div @click="flipCard(index)" :class="[ 'square', `square-${index}`, { 'square-fliper' : flippedCards.includes(index) } ]"></div>
+                  <div @click="flipCard(index)" :class="[ 'square', `square-${index}`, { 'square-fliper' : flippedCards.includes(index) } ]"><h2 class="square-text" :class="{ 'hidden' : flippedCards.includes(index) }">ld</h2></div>
                 </li>
               </ul>
             </div>
             <div class="game-default-line">
               <ul class="display-lines margin-lines">
                 <li v-for="index in 5" :key="index">
-                  <div @click="flipCard(index + 5)" :class="[ 'square', `square-${index + 5}`, { 'square-fliper' : flippedCards.includes(index + 5) } ]"></div>
+                  <div @click="flipCard(index + 5)" :class="[ 'square', `square-${index + 5}`, { 'square-fliper' : flippedCards.includes(index + 5) } ]"><h2 class="square-text" :class="{ 'hidden' : flippedCards.includes(index + 5) }">ld</h2></div>
                 </li>
               </ul>
             </div>
             <div class="game-default-line">
               <ul class="display-lines margin-lines">
                 <li v-for="index in 5" :key="index">
-                  <div @click="flipCard(index + 10)" :class="[ 'square', `square-${index + 10}`, { 'square-fliper' : flippedCards.includes(index + 10) } ]"></div>
+                  <div @click="flipCard(index + 10)" :class="[ 'square', `square-${index + 10}`, { 'square-fliper' : flippedCards.includes(index + 10) } ]"><h2 class="square-text" :class="{ 'hidden' : flippedCards.includes(index + 10) }">ld</h2></div>
                 </li>
               </ul>
             </div>
             <div class="game-default-line">
               <ul class="display-lines margin-lines">
                 <li v-for="index in 5" :key="index">
-                  <div @click="flipCard(index + 15)" :class="[ 'square', `square-${index + 15}`, { 'square-fliper' : flippedCards.includes(index + 15) } ]"></div>
+                  <div @click="flipCard(index + 15)" :class="[ 'square', `square-${index + 15}`, { 'square-fliper' : flippedCards.includes(index + 15) } ]"><h2 class="square-text" :class="{ 'hidden' : flippedCards.includes(index + 15) }">ld</h2></div>
                 </li>
               </ul>
             </div>
             <div class="game-default-line">
               <ul class="display-lines margin-lines">
                 <li v-for="index in 5" :key="index">
-                  <div @click="flipCard(index + 20)" :class="[ 'square', `square-${index + 20}`, { 'square-fliper' : flippedCards.includes(index + 20) } ]"></div>
+                  <div @click="flipCard(index + 20)" :class="[ 'square', `square-${index + 20}`, { 'square-fliper' : flippedCards.includes(index + 20) } ]"><h2 class="square-text" :class="{ 'hidden' : flippedCards.includes(index + 20) }">ld</h2></div>
                 </li>
               </ul>
             </div>