Victory actions done

index.html

@@ -44,6 +44,7 @@
 
         <div class="players-turn"><span>Turn of </span><span id="players-turn-name-place"></span></div>
         
+        <div class="background-winner-div"></div>
         <div class="tic-tac-toe">
             <div class="box" id="box-1" tabindex="-1"></div>
             <div class="box" id="box-2" tabindex="-1"></div>
@@ -55,6 +56,16 @@
             <div class="box" id="box-8" tabindex="-1"></div>
             <div class="box" id="box-9" tabindex="-1"></div>
         </div>
+
+        <div class="victory-message hidden animate__animated">
+            
+            <div class="text">
+                <span>Victory of </span><span id="victory-name"></span>
+            </div>
+            
+            <button id="play-again-button">Play again</button>
+        </div>
     </div>
+
 </body>
 </html>

script/game-functions/checkVictory.js

@@ -1,13 +1,18 @@
 export default function checkVictory(combinations, boxes) {
 
     const boxesSorted = boxes.sort()
+    
+    const result = []
 
     combinations.forEach(combination => {
             
-        if (boxesSorted[0] === combination[0] && boxesSorted[1] === combination[1] && boxesSorted[2] === combination[2]) {
+        if (boxes.includes(combination[0]) && boxes.includes(combination[1]) && boxes.includes(combination[2])) {
 
-            alert('Win')
+            console.log('WIN')
+            result.push('WIN')
+            result.push(combination)
         }
     });
     
+    return result
 }

script/game-functions/gameLogic.js

@@ -1,5 +1,6 @@
 import accessToCombinations from "./accessToCombinations.js"
 import checkVictory from "./checkVictory.js"
+import victoryActions from "./victoryActions.js"
 
 export default function gameLogic(checkInputsResult) {
 
@@ -38,7 +39,14 @@ export default function gameLogic(checkInputsResult) {
 
             actualPlayer.markedBoxes.push(box.id)
 
-            checkVictory(combinations, actualPlayer.markedBoxes)
+            const checkVictoryResult = checkVictory(combinations, actualPlayer.markedBoxes)
+            console.log(checkVictoryResult)
+            
+            if (checkVictoryResult[0] === 'WIN') {
+
+                victoryActions(checkVictoryResult[1], actualPlayer.name)
+
+            }
 
             if (players.indexOf(actualPlayer) === 0) {
 

script/game-functions/victoryActions.js

@@ -0,0 +1,48 @@
+export default function victoryActions(combination, playerName) {
+
+    const stylesActions = (() => {
+
+        let victoryMessage = document.getElementsByClassName('victory-message')[0]
+            victoryMessage.classList.remove('hidden')
+            victoryMessage.classList.add('animate__fadeInDown')
+
+        let victoryBackground = document.getElementsByClassName('background-winner-div')[0]
+            victoryBackground.classList.add('show')
+
+        let victoryName = document.getElementById('victory-name')
+            victoryName.innerText = playerName
+
+        let game = document.getElementsByClassName('tic-tac-toe')[0]
+            game.classList.add('completed')
+
+        combination.forEach(element => {
+            
+            const box = document.getElementById(element)
+            
+            box.classList.add('winner-box')
+
+            setTimeout(() => {
+                
+                box.classList.add('black-letters')
+
+            }, 350);
+        });
+    })()
+
+    const button = document.getElementById('play-again-button')
+
+    button.addEventListener('click', (e) => {
+
+        e.preventDefault()
+
+        const game = document.getElementsByClassName('game')[0]
+        
+        game.classList.add('animate__fadeOutDown')
+
+        setTimeout(() => {
+
+            game.classList.add('hidden')
+        
+        }, 1000)
+    })
+}

styles/game.scss

@@ -5,6 +5,9 @@
     grid-template-columns: 1fr 1fr 1fr;
     grid-template-rows: 1fr 1fr 1fr;
 
+    z-index: 100;
+    position: relative;
+    
     .box {
 
         width: 10vw;
@@ -26,6 +29,39 @@
 
         user-select: none;
         color: #e7e7e7;
+        background-color: rgb(221, 121, 121);
+
+        &.winner-box {
+
+            background-color: rgba(255, 255, 255, 0);
+
+            &.black-letters {
+
+                color: rgb(48, 48, 48);
+            }
+        }
+    }
+}
+
+.game .background-winner-div {
+
+    background-color: rgba(95, 255, 62, 0.692);
+
+    position: absolute;
+
+    width: 80vw;
+    height: 80vw;
+
+    z-index: 10;
+
+    opacity: 0%;
+
+    transition: 1s ease-in-out;
+
+    &.show {
+
+        opacity: 100%;
+        transition: 1s ease-in-out;
     }
 }
 
@@ -94,17 +130,72 @@
 
 .game .players-turn {
 
-    position: absolute;
+    // position: absolute;
 
-    top: -30%;
+    // top: -30%;
-    left: -20%;
+    // left: -20%;
+
+    margin-bottom: 5vh;
+    margin-left: -3vw;
 
     span {
 
         font-size: 30pt;
         font-weight: bold;
 
-        color: #e7e7e7;
+        color: #ffffff;
+    }
+}
+
+.victory-message {
+
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+    font-weight: bold;
+    font-size: 30pt;
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    flex-direction: column;
+
+    color: #fff;
+
+    margin-top: 5vh;
+
+    button {
+
+        width: 30vw;
+        max-width: 330px;
+        height: 9vw;
+        max-height: 100px;
+
+        background: none;
+        border: 2px solid #fff;
+        border-radius: 10px;
+
+        color: #fff;
+        
+        font-family:Arial, Helvetica, sans-serif;
+
+        font-size: 21pt;
+        font-weight: bold;
+
+        margin-top: 3vh;
+
+        transition: 0.4s ease-in-out;
+
+        &:hover {
+
+            background-color: rgba(0, 0, 0, 0.062);
+
+            transition: 0.4s ease-in-out;
+        }
+    }
+
+    &.hidden {
+
+        opacity: 0%;
     }
 }
 

styles/playerSelection.scss

@@ -49,6 +49,9 @@
 
                 margin-top: 1vh;
                 width: 5vw;
+
+                font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
+                font-weight: bold;
             }
 
             .symbol-container {

styles/styles.css

@@ -30,6 +30,8 @@
 .player-selection form .player .symbol-input {
   margin-top: 1vh;
   width: 5vw;
+  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
+  font-weight: bold;
 }
 .player-selection form .player .symbol-container {
   width: 100%;
@@ -119,6 +121,8 @@ emoji-picker {
   display: grid;
   grid-template-columns: 1fr 1fr 1fr;
   grid-template-rows: 1fr 1fr 1fr;
+  z-index: 100;
+  position: relative;
 }
 .game .tic-tac-toe .box {
   width: 10vw;
@@ -134,6 +138,27 @@ emoji-picker {
   align-items: center;
   user-select: none;
   color: #e7e7e7;
+  background-color: #dd7979;
+}
+.game .tic-tac-toe .box.winner-box {
+  background-color: rgba(255, 255, 255, 0);
+}
+.game .tic-tac-toe .box.winner-box.black-letters {
+  color: #303030;
+}
+
+.game .background-winner-div {
+  background-color: rgba(95, 255, 62, 0.692);
+  position: absolute;
+  width: 80vw;
+  height: 80vw;
+  z-index: 10;
+  opacity: 0%;
+  transition: 1s ease-in-out;
+}
+.game .background-winner-div.show {
+  opacity: 100%;
+  transition: 1s ease-in-out;
 }
 
 .game .tic-tac-toe .box#box-1 {
@@ -172,14 +197,47 @@ emoji-picker {
 }
 
 .game .players-turn {
-  position: absolute;
+  margin-bottom: 5vh;
-  top: -30%;
+  margin-left: -3vw;
-  left: -20%;
 }
 .game .players-turn span {
   font-size: 30pt;
   font-weight: bold;
-  color: #e7e7e7;
+  color: #ffffff;
+}
+
+.victory-message {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  font-weight: bold;
+  font-size: 30pt;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  color: #fff;
+  margin-top: 5vh;
+}
+.victory-message button {
+  width: 30vw;
+  max-width: 330px;
+  height: 9vw;
+  max-height: 100px;
+  background: none;
+  border: 2px solid #fff;
+  border-radius: 10px;
+  color: #fff;
+  font-family: Arial, Helvetica, sans-serif;
+  font-size: 21pt;
+  font-weight: bold;
+  margin-top: 3vh;
+  transition: 0.4s ease-in-out;
+}
+.victory-message button:hover {
+  background-color: rgba(0, 0, 0, 0.062);
+  transition: 0.4s ease-in-out;
+}
+.victory-message.hidden {
+  opacity: 0%;
 }
 
 @media (max-width: 900px) {

styles/styles.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["playerSelection.scss","game.scss","styles.scss"],"names":[],"mappings":"AAAA;EAEI;EAEA;EACA;EAEA;EAEA;EACA;EACA;EAEA;;AAEA;EAEG;;AAGH;EAEI;EAEA;;AAEA;EAKI;;AAEA;EAEI;EACA;EACA;EAEA;;AAGJ;EAEI;;AAGJ;EAEI;EACA;;AAGJ;EAEI;EAEA;EACA;EACA;EAEA;;AAGJ;EAEI;EACA;;AAIR;EAEI;EACA;;AAEA;EAEI;EAEA;EACA;EACA;EAEA;;AAEA;EAEI;EACA;;AAKZ;EAEI;EACA;;AAII;EAEI;EACA;;AAMhB;EAEI;EACA;EAEA;EAEA;EACA;EACA;EAEA;EAEA;EAEA;;AAGJ;EAEI;EAEA;;;AAIR;EAEI;EAEA;;;AAGJ;EAEI;EACA;EAEA;EACA;EAEA;EAEA;EACA;EACA;;AAEA;EAEI;EAEA;EAEA;EAEA;EACA;;;AAIR;EAEI;EACA;EAEA;EAEA;;;AAGJ;EAEI;;;ACtLJ;EAEI;EAEA;EACA;;AAEA;EAEI;EACA;EAEA;EACA;EACA;EAEA;EAEA;EAEA;EAEA;EACA;EACA;EAEA;EACA;;;AAQA;EAEI;EACA;;AAGJ;EAEI;;AAGJ;EAEI;EACA;;AAGJ;EAEI;;AAOJ;EAEI;;AAGJ;EAEI;EACA;;AAGJ;EAEI;;AAGJ;EAEI;EACA;;;AAKZ;EAEI;EAEA;EAEA;;;AAGJ;EAEI;EAEA;EACA;;AAEA;EAEI;EACA;EAEA;;;AAKR;EAEI;IAEI;IACA;;EAEA;IAEI;IACA;;;EAIR;IAEI;IACA;;;AC7HR;EAEI;EAEA;EAEA;;;AAGJ;EAEI;EACA;EAEA;EAEA;EACA;EACA;;;AAGJ;EAEI;;;AAGJ;EACI","file":"styles.css"}
+{"version":3,"sourceRoot":"","sources":["playerSelection.scss","game.scss","styles.scss"],"names":[],"mappings":"AAAA;EAEI;EAEA;EACA;EAEA;EAEA;EACA;EACA;EAEA;;AAEA;EAEG;;AAGH;EAEI;EAEA;;AAEA;EAKI;;AAEA;EAEI;EACA;EACA;EAEA;;AAGJ;EAEI;;AAGJ;EAEI;EACA;EAEA;EACA;;AAGJ;EAEI;EAEA;EACA;EACA;EAEA;;AAGJ;EAEI;EACA;;AAIR;EAEI;EACA;;AAEA;EAEI;EAEA;EACA;EACA;EAEA;;AAEA;EAEI;EACA;;AAKZ;EAEI;EACA;;AAII;EAEI;EACA;;AAMhB;EAEI;EACA;EAEA;EAEA;EACA;EACA;EAEA;EAEA;EAEA;;AAGJ;EAEI;EAEA;;;AAIR;EAEI;EAEA;;;AAGJ;EAEI;EACA;EAEA;EACA;EAEA;EAEA;EACA;EACA;;AAEA;EAEI;EAEA;EAEA;EAEA;EACA;;;AAIR;EAEI;EACA;EAEA;EAEA;;;AAGJ;EAEI;;;ACzLJ;EAEI;EAEA;EACA;EAEA;EACA;;AAEA;EAEI;EACA;EAEA;EACA;EACA;EAEA;EAEA;EAEA;EAEA;EACA;EACA;EAEA;EACA;EACA;;AAEA;EAEI;;AAEA;EAEI;;;AAMhB;EAEI;EAEA;EAEA;EACA;EAEA;EAEA;EAEA;;AAEA;EAEI;EACA;;;AAQA;EAEI;EACA;;AAGJ;EAEI;;AAGJ;EAEI;EACA;;AAGJ;EAEI;;AAOJ;EAEI;;AAGJ;EAEI;EACA;;AAGJ;EAEI;;AAGJ;EAEI;EACA;;;AAKZ;EAEI;EAEA;EAEA;;;AAGJ;EAOI;EACA;;AAEA;EAEI;EACA;EAEA;;;AAIR;EAEI;EACA;EACA;EAEA;EACA;EACA;EAEA;EAEA;EAEA;;AAEA;EAEI;EACA;EACA;EACA;EAEA;EACA;EACA;EAEA;EAEA;EAEA;EACA;EAEA;EAEA;;AAEA;EAEI;EAEA;;AAIR;EAEI;;;AAKR;EAEI;IAEI;IACA;;EAEA;IAEI;IACA;;;EAIR;IAEI;IACA;;;ACxNR;EAEI;EAEA;EAEA;;;AAGJ;EAEI;EACA;EAEA;EAEA;EACA;EACA;;;AAGJ;EAEI;;;AAGJ;EACI","file":"styles.css"}