[FIX] WINNER LINE WRONG POSITION

RicardoBritoBrens · Jul 6, 2023 · 8375d62 · 8375d62
1 parent cb873f1
commit 8375d62
Show file tree

Hide file tree

Showing 5 changed files with 251 additions and 68 deletions.
diff --git a/index.html b/index.html
@@ -18,41 +18,35 @@
   </head>
 
   <body class="body">
-    <div id="select-players-div" class="center-div">
+    <div id="select-players-div" class="select-players-div-space-between-elements center-div">
       <button class="btn-one" onclick="onePlayerVsIa()">
         Un Jugador vs IA
       </button>
       <button class="btn-one" onclick="twoPlayers()">Dos Jugadores</button>
     </div>
 
     <div id="select-player-icon-div" class="center-div display-none">
-      <h2 style="color: white">Select icon</h2>
-      <img
-        class="player-icon-image"
-        src="./assets/megaman-helmet-removebg-preview.png"
-        alt=""
-      />
-      <button onclick="useIconO()">Usar O</button>
-      <img
-        class="player-icon-image"
-        src="./assets/zero-helmet-removebg-preview.png"
-        alt=""
-      />
-      <button onclick="useIconX()">Usar X</button>
+      <div class="space-between-elements-select-player-icon">
+        <h2 style="color: white">Select icon</h2>
+        <img
+          class="player-icon-image"
+          src="./assets/megaman-helmet-removebg-preview.png"
+          alt=""
+        />
+        <button onclick="useIconO()">Usar O</button>
+        <img
+          class="player-icon-image"
+          src="./assets/zero-helmet-removebg-preview.png"
+          alt=""
+        />
+        <button onclick="useIconX()">Usar X</button>
+      </div>
     </div>
 
     <div id="board-div" class="board center-div display-none">
       <div
-        id="winner-canvas-div"
-        class="center-div-non-solid display-none"
-        style="width: 550px; height: 550px; background-color: transparent"
-      >
-        <canvas
-          id="canvas"
-          width="550px"
-          height="550px"
-          style="background-color: transparent"
-        ></canvas>
+        id="winner-canvas-div" class="center-div-non-solid display-none canvas-container">
+        <canvas id="canvas" class="canvas"></canvas>
       </div>
 
       <div id="board-inner-div" class="board-inner">

diff --git a/index.js b/index.js
@@ -350,7 +350,6 @@ function getPlayerName() {
 }
 
 function isThereAWinner() {
-  //
   let tempWinnerBoard = board.slice();
   let playerOneMoves = tempWinnerBoard.filter((x) => x[1] === playerOne);
   let playerTwoMoves = tempWinnerBoard.filter((x) => x[1] === playerTwo);
@@ -611,3 +610,7 @@ function showWinnerCanvas() {
 }
 
 // TODO: SHOW WINNER AND DROW WHEN USING TWO PLAYERS
+
+// TODO: CHECK PHONE STYLE
+/*var width = document. getElementById('container'). style. width;
+var height = document. getElementById('container'). style. height;*/
diff --git a/styles-large.css b/styles-large.css
@@ -1,9 +1,6 @@
-@import url("https://fonts.googleapis.com/css?family=Lato:100&display=swap");
-
 /* Styles for screens with a minimum width of 1025px */
 @media (min-width: 1025px) {
-
-.body {
+  .body {
     display: flex;
     justify-content: center;
     align-items: center;
@@ -13,12 +10,12 @@
     background-size: cover;
     font-family: "Lato", sans-serif;
   }
-  
+
   .player-icon-image {
     height: 25px;
     width: 28px;
   }
-  
+
   button {
     color: white;
     width: 180px;
@@ -30,13 +27,13 @@
     transition: 1s ease-in-out;
     font-size: larger;
   }
-  
+
   .board {
     width: 550px;
     height: 550px;
     background-color: white;
   }
-  
+
   .board-inner {
     display: flex;
     flex-direction: column;
@@ -45,7 +42,7 @@
     width: 550px;
     height: 550px;
   }
-  
+
   .box {
     margin: 15px;
     width: 150px;
@@ -54,20 +51,20 @@
     background-size: contain;
     background-repeat: no-repeat;
   }
-  
+
   .o {
     background-image: url(assets/o.png);
   }
-  
+
   .x {
     background-image: url(assets/x.png);
   }
-  
+
   .you-win-div {
     background-color: cadetblue;
     align-items: center;
   }
-  
+
   .center-div {
     border: 1px solid;
     position: absolute;
@@ -76,12 +73,25 @@
     transform: translate(-50%, -50%);
     padding: 25px;
   }
-  
+
   .center-div-non-solid {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     padding: 25px;
   }
-  }
+
+  .canvas-container
+  {
+    width: 550px;
+    height: 550px;
+    background-color: transparent"
+  }
+
+  .canvas{
+    width: 450px;
+    height: 250px;
+    background-color: transparent;
+  }
+}
diff --git a/styles-medium.css b/styles-medium.css
@@ -1,15 +1,97 @@
-@import url("https://fonts.googleapis.com/css?family=Lato:100&display=swap");
-
 /* Styles for screens with a maximum width of 1024px */
 @media (max-width: 1024px) {
-    .body {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        flex-direction: column;
-        background-image: url(https://wallpapercave.com/dwp1x/wp2794478.jpg);
-        background-repeat: no-repeat;
-        background-size: cover;
-        font-family: "Lato", sans-serif;
-      }      
-  }
+  .body {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    background-image: url(https://wallpapercave.com/dwp1x/wp2794478.jpg);
+    background-repeat: no-repeat;
+    background-size: cover;
+    font-family: "Lato", sans-serif;
+  }
+
+  .player-icon-image {
+    height: 25px;
+    width: 28px;
+  }
+
+  button {
+    color: white;
+    width: 180px;
+    height: 60px;
+    cursor: pointer;
+    background: transparent;
+    border: 1px solid #91c9ff;
+    outline: none;
+    transition: 1s ease-in-out;
+    font-size: larger;
+  }
+
+  .board {
+    width: 550px;
+    height: 550px;
+    background-color: white;
+  }
+
+  .board-inner {
+    display: flex;
+    flex-direction: column;
+    flex-wrap: wrap;
+    background-color: #91c9ff;
+    width: 550px;
+    height: 550px;
+  }
+
+  .box {
+    margin: 15px;
+    width: 150px;
+    height: 150px;
+    background-color: white;
+    background-size: contain;
+    background-repeat: no-repeat;
+  }
+
+  .o {
+    background-image: url(assets/o.png);
+  }
+
+  .x {
+    background-image: url(assets/x.png);
+  }
+
+  .you-win-div {
+    background-color: cadetblue;
+    align-items: center;
+  }
+
+  .center-div {
+    border: 1px solid;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    padding: 25px;
+  }
+
+  .center-div-non-solid {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    padding: 25px;
+  }
+
+  .canvas-container
+  {
+    width: 550px;
+    height: 550px;
+    background-color: transparent"
+  }
+
+  .canvas{
+    width: 550px;
+    height: 550px;
+    background-color: transparent;
+  }
+}