diff --git a/index.html b/index.html index 4bedc32..b7cf9a6 100644 --- a/index.html +++ b/index.html @@ -41,15 +41,20 @@ diff --git a/script/game-functions/gameLogic.js b/script/game-functions/gameLogic.js index f88d3c6..36af996 100644 --- a/script/game-functions/gameLogic.js +++ b/script/game-functions/gameLogic.js @@ -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 }) }) } \ No newline at end of file diff --git a/styles/game.scss b/styles/game.scss index e563eca..c98873e 100644 --- a/styles/game.scss +++ b/styles/game.scss @@ -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) { diff --git a/styles/styles.css b/styles/styles.css index 6965911..8b16921 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -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; diff --git a/styles/styles.css.map b/styles/styles.css.map index f74ba48..8e1d6fd 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;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"} \ 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;;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"} \ No newline at end of file