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

Message of active player added

Browse Source
This commit is contained in:
Francisco Pessano
2021-12-27 18:31:10 -03:00
parent d4392e8236
commit bb879e9eac
5 changed files with 67 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
index.html
View File

@@ -41,15 +41,20 @@
</div>
<div class="game hidden animate__animated" tabindex="-1">
<div class="box" id="box-1" tabindex="-1"></div>
<div class="box" id="box-2" tabindex="-1"></div>
<div class="box" id="box-3" tabindex="-1"></div>
<div class="box" id="box-4" tabindex="-1"></div>
<div class="box" id="box-5" tabindex="-1"></div>
<div class="box" id="box-6" tabindex="-1"></div>
<div class="box" id="box-7" tabindex="-1"></div>
<div class="box" id="box-8" tabindex="-1"></div>
<div class="box" id="box-9" tabindex="-1"></div>
<div class="players-turn"><span>Turn of </span><span id="players-turn-name-place"></span></div>
<div class="tic-tac-toe">
<div class="box" id="box-1" tabindex="-1"></div>
<div class="box" id="box-2" tabindex="-1"></div>
<div class="box" id="box-3" tabindex="-1"></div>
<div class="box" id="box-4" tabindex="-1"></div>
<div class="box" id="box-5" tabindex="-1"></div>
<div class="box" id="box-6" tabindex="-1"></div>
<div class="box" id="box-7" tabindex="-1"></div>
<div class="box" id="box-8" tabindex="-1"></div>
<div class="box" id="box-9" tabindex="-1"></div>
</div>
</div>
</body>
</html>

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

@@ -18,6 +18,9 @@ export default function gameLogic(checkInputsResult) {
let actualPlayer = players[0]
let boxesMarked = []
let playersTurnMessage = document.getElementById("players-turn-name-place")
playersTurnMessage.innerText = actualPlayer.name
const boxes = [...document.getElementsByClassName('box')]
@@ -47,6 +50,7 @@ export default function gameLogic(checkInputsResult) {
}
playersTurnMessage.innerText = actualPlayer.name
})
})
}

25
styles/game.scss
View File

@@ -1,4 +1,4 @@
.game {
.game .tic-tac-toe {
display: grid;
@@ -11,6 +11,8 @@
height: 10vw;
font-size: 75pt;
font-family:Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
font-weight: bold;
border: 2px #fff solid;
@@ -21,10 +23,13 @@
display: flex;
justify-content: center;
align-items: center;
user-select: none;
color: #e7e7e7;
}
}
.game {
.game .tic-tac-toe {
.box {
@@ -87,6 +92,22 @@
top: -100%;
}
.game .players-turn {
position: absolute;
top: -30%;
left: -20%;
span {
font-size: 30pt;
font-weight: bold;
color: #e7e7e7;
}
}
@media (max-width: 900px) {

35
styles/styles.css
View File

@@ -115,48 +115,52 @@ emoji-picker {
z-index: 100;
}
.game {
.game .tic-tac-toe {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
}
.game .box {
.game .tic-tac-toe .box {
width: 10vw;
height: 10vw;
font-size: 75pt;
font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
font-weight: bold;
border: 2px #fff solid;
box-sizing: border-box;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
user-select: none;
color: #e7e7e7;
}
.game .box#box-1 {
.game .tic-tac-toe .box#box-1 {
border-top: 0px;
border-left: 0px;
}
.game .box#box-2 {
.game .tic-tac-toe .box#box-2 {
border-top: 0px;
}
.game .box#box-3 {
.game .tic-tac-toe .box#box-3 {
border-top: 0px;
border-right: 0px;
}
.game .box#box-4 {
.game .tic-tac-toe .box#box-4 {
border-left: 0px;
}
.game .box#box-6 {
.game .tic-tac-toe .box#box-6 {
border-right: 0px;
}
.game .box#box-7 {
.game .tic-tac-toe .box#box-7 {
border-bottom: 0px;
border-left: 0px;
}
.game .box#box-8 {
.game .tic-tac-toe .box#box-8 {
border-bottom: 0px;
}
.game .box#box-9 {
.game .tic-tac-toe .box#box-9 {
border-bottom: 0px;
border-right: 0px;
}
@@ -167,6 +171,17 @@ emoji-picker {
top: -100%;
}
.game .players-turn {
position: absolute;
top: -30%;
left: -20%;
}
.game .players-turn span {
font-size: 30pt;
font-weight: bold;
color: #e7e7e7;
}
@media (max-width: 900px) {
.game {
width: 80vw;

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;EAEA;EAEA;EAEA;EAEA;EACA;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;;;AAIJ;EAEI;IAEI;IACA;;EAEA;IAEI;IACA;;;ACjGZ;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;;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;;;ACtHZ;EAEI;EAEA;EAEA;;;AAGJ;EAEI;EACA;EAEA;EAEA;EACA;EACA;;;AAGJ;EAEI;;;AAGJ;EACI","file":"styles.css"}