Mejora visual en el mensaje de Ganador o Empate

Signed-off-by: KSAplay <kennysaavedraaltuna@outlook.com>
KSAplay · Sep 11, 2024 · 15ae49b · 15ae49b
1 parent ffd576f
commit 15ae49b
Show file tree

Hide file tree

Showing 3 changed files with 171 additions and 27 deletions.
diff --git a/index.html b/index.html
@@ -7,24 +7,45 @@
     <title>Tic Tac Toe</title>
   </head>
   <body>
-    <header>
-      <h1 class="title">TIC TAC TOE</h1>
-    </header>
-    <section class="game-section">
-      <div id="square-1" class="square" onclick="handleSquareClick(1)"></div>
-      <div id="square-2" class="square" onclick="handleSquareClick(2)"></div>
-      <div id="square-3" class="square" onclick="handleSquareClick(3)"></div>
-      <div id="square-4" class="square" onclick="handleSquareClick(4)"></div>
-      <div id="square-5" class="square" onclick="handleSquareClick(5)"></div>
-      <div id="square-6" class="square" onclick="handleSquareClick(6)"></div>
-      <div id="square-7" class="square" onclick="handleSquareClick(7)"></div>
-      <div id="square-8" class="square" onclick="handleSquareClick(8)"></div>
-      <div id="square-9" class="square" onclick="handleSquareClick(9)"></div>
-    </section>
-    <section class="buttons-section">
-      <input class="btn-reset" type="button" value="Reiniciar" />
-    </section>
-    <dialog class="message"></dialog>
+    <main>
+      <header>
+        <h1 class="title">TIC TAC TOE</h1>
+      </header>
+      <section class="game-section">
+        <div id="square-1" class="square" onclick="handleSquareClick(1)"></div>
+        <div id="square-2" class="square" onclick="handleSquareClick(2)"></div>
+        <div id="square-3" class="square" onclick="handleSquareClick(3)"></div>
+        <div id="square-4" class="square" onclick="handleSquareClick(4)"></div>
+        <div id="square-5" class="square" onclick="handleSquareClick(5)"></div>
+        <div id="square-6" class="square" onclick="handleSquareClick(6)"></div>
+        <div id="square-7" class="square" onclick="handleSquareClick(7)"></div>
+        <div id="square-8" class="square" onclick="handleSquareClick(8)"></div>
+        <div id="square-9" class="square" onclick="handleSquareClick(9)"></div>
+      </section>
+      <section class="buttons-section">
+        <input
+          class="btn-reset"
+          type="button"
+          value="Reiniciar"
+          onclick="resetGame()"
+        />
+      </section>
+    </main>
+    <div class="dialog">
+      <div class="background-message">
+        <div class="animated-squares">
+          <section class="blue-side">
+            <div></div>
+            <div></div>
+          </section>
+          <section class="pink-side">
+            <div></div>
+            <div></div>
+          </section>
+        </div>
+        <div class="message"></div>
+      </div>
+    </div>
     <script src="script.js"></script>
   </body>
 </html>
diff --git a/script.js b/script.js
@@ -1,5 +1,5 @@
-document.querySelector(".btn-reset").addEventListener("click", resetGame);
-const dialog = document.querySelector(".message");
+const DIALOG = document.querySelector(".dialog");
+const BUTTONS_SECTION = document.querySelector(".buttons-section");
 
 window.addEventListener("load", startGame);
 
@@ -16,6 +16,8 @@ const O_HTML = `
   </div>`;
 const O_SQUARE_COLOR = "rgb(96, 6, 46)";
 
+const RESET_BUTTON = `<input class="btn-reset" type="button" value="Reiniciar" onclick="resetGame()"/>`;
+
 const SQUARE_EXIT_ANIMATION_DURATION = 200;
 
 const WINNING_COMBINATIONS = [
@@ -80,7 +82,8 @@ function resetGame() {
   }
 
   // Cerrar el diálogo si está abierto.
-  dialog.close();
+  DIALOG.style.display = "none";
+  BUTTONS_SECTION.style.visibility = "visible";
 }
 
 function handleSquareClick(squareId) {
@@ -138,12 +141,18 @@ function checkWinner() {
   });
 
   if (winnerExists) {
-    dialog.innerHTML = `¡Ganador: ${winnerCheck == 1 ? "X" : "O"}!`;
-    dialog.showModal();
+    DIALOG.querySelector(".message").innerHTML = `<div>¡Ganador: ${
+      winnerCheck == 1 ? "X" : "O"
+    }!</div>${RESET_BUTTON}`;
+    BUTTONS_SECTION.style.visibility = "hidden";
+    DIALOG.style.display = "flex";
     return true;
   } else if (squaresUsed.length >= 9) {
-    dialog.innerHTML = `¡Empate!`;
-    dialog.showModal();
+    DIALOG.querySelector(
+      ".message"
+    ).innerHTML = `<div>¡Empate!</div>${RESET_BUTTON}`;
+    BUTTONS_SECTION.style.visibility = "hidden";
+    DIALOG.style.display = "flex";
     return true;
   }
 

diff --git a/styles.css b/styles.css
@@ -4,15 +4,27 @@
 }
 
 body {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100vh;
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  background-color: rgb(22, 22, 22);
+}
+
+main {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: space-evenly;
-  height: 100vh;
   box-sizing: border-box;
   margin: 0;
   padding: 0;
-  background: rgb(22, 22, 22);
+  width: 100%;
+  height: 100%;
 }
 
 header {
@@ -134,6 +146,108 @@ header {
     drop-shadow(0 0 8px rgb(180, 180, 180));
 }
 
+.dialog {
+  position: absolute;
+  display: none;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.2);
+  transition: 100ms ease;
+  animation: entrance 100ms ease both;
+}
+
+.dialog .background-message {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 360px;
+  height: 360px;
+  background-color: rgb(22, 22, 22);
+  border-radius: 25px;
+  overflow: hidden;
+}
+
+.dialog .animated-squares {
+  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  z-index: 0;
+}
+
+.blue-side,
+.pink-side {
+  position: absolute;
+  flex-direction: column;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 200px;
+  height: 150%;
+  animation: turn 2.5s linear infinite both;
+}
+
+.blue-side div,
+.pink-side div {
+  width: 50%;
+  height: 100%;
+}
+
+.blue-side div:nth-child(1) {
+  background: #2f76ff;
+  background: linear-gradient(
+    90deg,
+    #2f76ff 0%,
+    rgb(185, 208, 255) 50%,
+    #2f76ff 100%
+  );
+  filter: drop-shadow(0 0 5px #2f76ff) drop-shadow(0 0 10px #2f76ff)
+    drop-shadow(0 0 15px #2f76ff) drop-shadow(0 0 20px #2f76ff)
+    drop-shadow(0 0 25px #2f76ff) drop-shadow(0 0 30px #2f76ff);
+}
+
+.pink-side div:nth-child(2) {
+  background: rgb(204, 32, 108);
+  background: linear-gradient(
+    90deg,
+    rgba(204, 32, 108, 1) 0%,
+    rgb(250, 186, 215) 50%,
+    rgba(204, 32, 108, 1) 100%
+  );
+  filter: drop-shadow(0 0 5px #cc206c) drop-shadow(0 0 10px #cc206c)
+    drop-shadow(0 0 15px #cc206c) drop-shadow(0 0 20px #cc206c)
+    drop-shadow(0 0 25px #cc206c) drop-shadow(0 0 30px #cc206c);
+}
+.dialog .message {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-evenly;
+  font-size: 16pt;
+  text-transform: uppercase;
+  font-weight: 700;
+  width: 345px;
+  height: 345px;
+  border-radius: 15px;
+  background-color: rgb(22, 22, 22);
+  color: white;
+  z-index: 2;
+}
+
+@keyframes turn {
+  0% {
+    rotate: 0deg;
+  }
+  100% {
+    rotate: 360deg;
+  }
+}
+
 @keyframes entrance {
   0% {
     opacity: 0;