add draw message layout

HuiGong-dev · Jan 10, 2022 · 8a9c0e4 · 8a9c0e4
1 parent b0be097
commit 8a9c0e4
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 17 deletions.
diff --git a/index.html b/index.html
@@ -30,52 +30,52 @@
                     <i class="fa-solid fa-circle-dot"></i>
                 </div>
             </div>
-            <div class="turn-indicator">
+            <div class="turn-indicator" id="turn-indicator">
                 <div class="logo__x">
                     <i class="fa-solid fa-circle-dot"></i>
                 </div>
                 <!-- <i class="fa-solid fa-xmark turn-indicator__icon"></i> -->
                 <span class="turn-indicator__text">TURN</span>
             </div>
-            <div class="restart-button">
+            <div class="restart-button" id="restart-button">
                 <a href=""><i class="fas fa-redo"></i></a>
             </div>
         </div>
         <!-- game board main -->
-        <div class="board">
+        <div class="board" id="board">
+            <div class="cell" data-cell></div>
+            <div class="cell" data-cell></div>
+            <div class="cell" data-cell></div>
+            <div class="cell" data-cell></div>
+            <div class="cell" data-cell></div>
+            <div class="cell" data-cell></div>
+            <div class="cell" data-cell></div>
             <div class="cell" data-cell></div>
-            <div class="cell x" data-cell></div>
-            <div class="cell o" data-cell></div>
-            <div class="cell x" data-cell></div>
-            <div class="cell o" data-cell></div>
-            <div class="cell x" data-cell></div>
             <div class="cell" data-cell></div>
-            <div class="cell o" data-cell></div>
-            <div class="cell x" data-cell></div>
         </div>
         <!-- game board bottom status bar -->
         <div class="bottom-status-bar">
-            <div class="x-wins-count">
+            <div class="x-wins-count" id="x-wins-count">
                 <span class="x-wins-count__text">X (YOU)</span>
                 <span class="x-wins-count__number">0</span>
             </div>
-            <div class="tie-count">
+            <div class="tie-count" id="tie-count">
                 <span class="tie-count__text">TIES</span>
                 <span class="tie-count__number">0</span>
             </div>
-            <div class="o-wins-count">
+            <div class="o-wins-count" id="o-wins-count">
                 <span class="o-wins-count__text">O (CPU)</span>
                 <span class="o-wins-count__number">0</span>
             </div>
         </div>
     </div>
 <!-- winning message -->
-    <div class="winning-message" id="winningMessage">
+    <div class="winning-message" id="winning-message">
         <div class="winning-message__cover"></div>
         <div class="winning-message__banner">
             <div class="winning-message__banner__who-wins">YOU WON!</div>
-            <div class="winning-message__banner__icon-and-text">
-                <div class="logo__x">
+            <div class="winning-message__banner__icon-and-text draw">
+                <div class="winning-message__banner__icon logo__x">
                     <i class="fa-solid fa-circle-dot"></i>
                 </div>
                 <div class="winning-message__banner__text">TAKES THE ROUND</div>
@@ -90,7 +90,7 @@
     </div>
 
     <!-- intro page -->
-    <div class="intro">
+    <div class="intro" id="intro">
 
         <div class="intro__content">
             <div class="intro__content__logo">

diff --git a/styles.css b/styles.css
@@ -363,6 +363,15 @@ body {
     font-family: var(--ff-primary);
 
 }
+.winning-message__banner__icon-and-text.draw{
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.winning-message__banner__icon-and-text.draw .winning-message__banner__icon {
+display: none;
+}
 
 .winning-message__banner__icon-and-text .logo__x i {
   display: none;