From 658c5b2419203f56742001bc583b3fdea6b3637b Mon Sep 17 00:00:00 2001 From: Francisco Pessano Date: Mon, 27 Dec 2021 20:25:33 -0300 Subject: [PATCH] Victory actions done --- index.html | 11 +++ script/game-functions/checkVictory.js | 9 ++- script/game-functions/gameLogic.js | 10 ++- script/game-functions/victoryActions.js | 48 ++++++++++++ styles/game.scss | 99 ++++++++++++++++++++++++- styles/playerSelection.scss | 3 + styles/styles.css | 66 ++++++++++++++++- styles/styles.css.map | 2 +- 8 files changed, 236 insertions(+), 12 deletions(-) create mode 100644 script/game-functions/victoryActions.js diff --git a/index.html b/index.html index b7cf9a6..b03946f 100644 --- a/index.html +++ b/index.html @@ -44,6 +44,7 @@
Turn of
+
@@ -55,6 +56,16 @@
+ + + diff --git a/script/game-functions/checkVictory.js b/script/game-functions/checkVictory.js index 2c61cdd..eb800b0 100644 --- a/script/game-functions/checkVictory.js +++ b/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 } \ No newline at end of file diff --git a/script/game-functions/gameLogic.js b/script/game-functions/gameLogic.js index 36af996..3034ab7 100644 --- a/script/game-functions/gameLogic.js +++ b/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) { diff --git a/script/game-functions/victoryActions.js b/script/game-functions/victoryActions.js new file mode 100644 index 0000000..58c8435 --- /dev/null +++ b/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) + }) +} \ No newline at end of file diff --git a/styles/game.scss b/styles/game.scss index addf006..da1ca68 100644 --- a/styles/game.scss +++ b/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%; - left: -20%; + // top: -30%; + // 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%; } } diff --git a/styles/playerSelection.scss b/styles/playerSelection.scss index 2be379e..3516c96 100644 --- a/styles/playerSelection.scss +++ b/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 { diff --git a/styles/styles.css b/styles/styles.css index 7ef8159..b93eb6d 100644 --- a/styles/styles.css +++ b/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; - top: -30%; - left: -20%; + margin-bottom: 5vh; + margin-left: -3vw; } .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) { diff --git a/styles/styles.css.map b/styles/styles.css.map index 5cb87cf..d0b5e1a 100644 --- a/styles/styles.css.map +++ b/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"} \ No newline at end of file +{"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"} \ No newline at end of file