winner highlighting

MrTip0 · Aug 7, 2021 · 48b3d03 · 48b3d03
1 parent 792a4fc
commit 48b3d03
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 17 deletions.
diff --git a/src/index.js b/src/index.js
@@ -9,8 +9,8 @@ if (require('electron-squirrel-startup')) { // eslint-disable-line global-requir
 const createWindow = () => {
   // Create the browser window.
   const mainWindow = new BrowserWindow({
-    width: 235,
-    height: 315,
+    width: 245,
+    height: 370,
   });
 
   // and load the index.html of the app.

diff --git a/src/style.css b/src/style.css
@@ -1,7 +1,6 @@
 @import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@1,700&display=swap');
 body {
     display: flex;
-    flex: content;
     flex-direction: column;
     flex-wrap: wrap;
     align-items: center;
@@ -11,8 +10,8 @@ body {
     display: grid;
     grid: initial;
     grid-auto-flow: row;
-    grid-template-rows: 50px 50px 50px;
     grid-template-columns: 50px 50px 50px;
+    grid-template-rows: auto;
     justify-items: center;
     column-gap: 10px;
     row-gap: 10px;
@@ -42,19 +41,22 @@ h1 {
     color: crimson;
 }
 .restart {
-    grid-column-start: 2;
-    grid-row-start: 2;
+    grid-row-start: 4;
+    grid-column: 1 / span 3;
     background: none;
     border-width: 1px;
     border-radius: 10px;
     border-color: black;
     box-shadow: 2px 2px 0px 0px rgba(0, 0, 0, 0.4);
-    width: 150px;
     height: 50px;
+    width: 100%;
     font-size: large;
     font-family: "Roboto", sans-serif;
 }
 .restart:active {
     box-shadow: none;
     color: #000;
+}
+.winner {
+    background-color: rgb(109, 255, 145);
 }
diff --git a/src/tris.js b/src/tris.js
@@ -5,6 +5,7 @@ var xTurn = true
 var turno = 0
 var finito = false
 var scritta = ""
+var winner = []
 creaTavolo()
 
 function gioco(numero) {
@@ -23,16 +24,15 @@ function gioco(numero) {
 
 function creaTavolo() {
     board.innerHTML = ""
-    if (!finito) {
-        for (let i = 0; i < 9; i++) {
-            let a = document.createElement("button")
-            a.addEventListener("click", ()=> gioco(i))
-            a.innerText = tavolo[i]
-            a.setAttribute("class", `button ${a.innerText == 'X' ? 'X': 'O'}`)
-            board.appendChild(a)
-            text.innerText = `Turn: ${xTurn ? "X" : "O"}`
-        }
-    } else {
+    for (let i = 0; i < 9; i++) {
+        let a = document.createElement("button")
+        a.addEventListener("click", ()=> gioco(i))
+        a.innerText = tavolo[i]
+        a.setAttribute("class", `button${a.innerText == 'X' ? ' X': a.innerText == 'O' ? ' O' : ''}${winner.includes(i) ? ' winner': ''}`)
+        board.appendChild(a)
+        text.innerText = `Turn: ${xTurn ? "X" : "O"}`
+    }
+    if (finito) {
         text.innerText = scritta
         var b = document.createElement("button")
         b.innerText = "Restart"
@@ -59,6 +59,7 @@ function checkWin(){
         if (act != "" && act == tavolo[value[1]] && act == tavolo[value[2]]) {
             scritta = `The winner is ${act}`
             finito = true
+            winner = value
         }
     });
 }
@@ -68,5 +69,6 @@ function restart() {
     turno = 0
     finito = false
     scritta = ""
+    winner = []
     creaTavolo()
 }