franpcode/Tic-Tac-Toe-Game
1
0
Fork 0
mirror of https://github.com/FranP-code/Tic-Tac-Toe-Game.git synced 2025-10-12 23:52:39 +00:00
Code Issues Packages Projects Releases Wiki Activity

Victory actions done

Browse Source
This commit is contained in:
Francisco Pessano
2021-12-27 20:25:33 -03:00
parent 2a866751f9
commit 658c5b2419
8 changed files with 236 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
index.html
View File

@@ -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>

9
script/game-functions/checkVictory.js
View File

@@ -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
}

10
script/game-functions/gameLogic.js
View File

@@ -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) {

48
script/game-functions/victoryActions.js Normal file
View File

@@ -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)
})
}

99
styles/game.scss
View File

@@ -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%;
}
}

3
styles/playerSelection.scss
View File

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

66
styles/styles.css
View File

@@ -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) {

2
styles/styles.css.map
View File

@@ -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"}