smig/odin-codespace
1
0
Fork 0
mirror of https://gitea.smigz.com/smiggiddy/odin-codeprojects.git synced 2025-06-28 12:55:36 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: added grid and basic styling

Browse source
This commit is contained in:
Smigz 2023-12-14 10:32:14 -05:00
parent 8a97cde4fa
commit 358c1c524c
3 changed files with 48 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

10
tictactoe/css/style.css
View file

@ -20,3 +20,13 @@ header h1 {
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
.content>.game-area {
display: grid;
grid-area: 1 / 1 / 4 / 4;
gap: 15px;
grid-template-rows: repeat(3, 50px);
grid-template-columns: repeat(3, 50px);
justify-items: center;
align-items: center;
}

1
tictactoe/index.html
View file

@ -24,5 +24,6 @@
<div class="footer"></div> <div class="footer"></div>
</footer> </footer>
</div> </div>
<script src="./js/main.js"></script>
</body> </body>
</html> </html>

42
tictactoe/js/main.js
View file

@ -143,7 +143,7 @@ const gameController = (() => {
marker.addToken(player); marker.addToken(player);
tictactoeBoard.placeOnBoard(position, marker); // position on board tictactoeBoard.placeOnBoard(position, marker); // position on board
tictactoeBoard.printGameBoard(); tictactoeBoard.printGameBoard();
let gameOver = evalGameOutcome(tictactoeBoard); let gameOver = evalGameOutcome(tictactoeBoard.getGameBoard());
if (!gameOver) { if (!gameOver) {
switchPlayerTurn(); switchPlayerTurn();
} }
@ -192,10 +192,42 @@ const gameController = (() => {
return { playRound } return { playRound }
})(); })();
gameController.playRound(2);
gameController.playRound(4); const screenController = (() => {
gameController.playRound(4); const gameDiv = document.querySelector('.game-area');
gameController.playRound(5); const game = tictactoeBoard.getGameBoard();
gameController.playRound(2);
gameController.playRound(1);
gameController.playRound(5);
gameController.playRound(3);
gameController.playRound(8);
const updateScreen = () => {
console.log(typeof game, game);
displayBoard();
console.log('Deez nuts');
}
const displayBoard = () => {
let count = 0;
game.forEach((e) => {
e.forEach((element) => {
count += 1;
const block = document.createElement('div');
block.classList.add('block');
block.setAttribute('data-block', count);
block.textContent = element;
gameDiv.appendChild(block);
})
})
}
updateScreen();
})();