mirror of
https://gitea.smigz.com/smiggiddy/odin-codeprojects.git
synced 2025-04-18 15:31:17 -04:00
feat: project complete
This commit is contained in:
parent
dcb7c62de0
commit
43173aac47
3 changed files with 80 additions and 97 deletions
|
|
@ -1,13 +1,27 @@
|
|||
:root {
|
||||
font-size: 16px;
|
||||
font-size: 32px;
|
||||
font-family: 'Roboto', sans-serif;
|
||||
--dark-color: #607274;
|
||||
--light-color: #FAEED1;
|
||||
--gray-color: #F4F4F2;
|
||||
--light-grey-color: #E8E8E8;
|
||||
}
|
||||
|
||||
body,html {
|
||||
width: 100vw;
|
||||
min-width: 100vw;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
header {
|
||||
display: flex;
|
||||
min-width: 100vw;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
background-color: var(--dark-color);
|
||||
color: var(--gray-color);
|
||||
}
|
||||
|
||||
|
||||
header h1 {
|
||||
font-size: 2rem;
|
||||
|
|
@ -17,25 +31,56 @@ header h1 {
|
|||
.container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: var(--light-grey-color);
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.content {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-content: center;
|
||||
flex-direction: column;
|
||||
gap: 20px
|
||||
}
|
||||
|
||||
.game-status {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
}
|
||||
|
||||
.content>.game-area {
|
||||
display: grid;
|
||||
grid-area: 1 / 1 / 4 / 4;
|
||||
gap: 15px;
|
||||
grid-template-rows: repeat(3, 150px);
|
||||
grid-template-columns: repeat(3, 150px);
|
||||
justify-items: center;
|
||||
align-items: center;
|
||||
border: solid;
|
||||
}
|
||||
|
||||
.block {
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
font-family: 'Silkscreen', sans-serif;
|
||||
font-weight: 700;
|
||||
height: 150px;
|
||||
width: 150px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
border: solid;
|
||||
font-size: 3rem;
|
||||
}
|
||||
|
||||
.block:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 16px 20px;
|
||||
font-size: 0.5rem;
|
||||
width: 200px;
|
||||
align-self: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,6 +3,9 @@
|
|||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,500;0,700;0,900;1,500;1,700;1,900&family=Silkscreen:wght@700&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
<title>Tic-Tac-Toe</title>
|
||||
</head>
|
||||
|
|
|
|||
|
|
@ -34,7 +34,7 @@ const tictactoeBoard = (function() {
|
|||
case 9:
|
||||
return isEmpty(gameBoard[2][2]);
|
||||
default:
|
||||
console.log('Must enter a number 1 - 9');
|
||||
Alert('Must enter a number 1 - 9');
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
|
@ -74,7 +74,6 @@ const tictactoeBoard = (function() {
|
|||
gameBoard[2][2] = marker;
|
||||
break;
|
||||
default:
|
||||
console.log('Must enter a number 1 - 9');
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
|
@ -134,10 +133,12 @@ const gameController = (() => {
|
|||
const resetGame = () => {
|
||||
round = 0;
|
||||
xTurn = true;
|
||||
gameOver = false;
|
||||
tictactoeBoard.resetGameBoard();
|
||||
}
|
||||
|
||||
const gameStatus = () => gameOver;
|
||||
const gameRound = () => round;
|
||||
|
||||
const switchPlayerTurn = () => {
|
||||
xTurn = !xTurn;
|
||||
|
|
@ -157,7 +158,7 @@ const gameController = (() => {
|
|||
gameOver = evalGameOutcome(tictactoeBoard.getGameBoard());
|
||||
|
||||
if (gameOver) {
|
||||
console.log(`${player.name}: ${player.piece} won the game`)
|
||||
console.log(`${player.name}: ${player.piece} won!`)
|
||||
return
|
||||
}
|
||||
switchPlayerTurn();
|
||||
|
|
@ -204,7 +205,7 @@ const gameController = (() => {
|
|||
return outcome;
|
||||
};
|
||||
|
||||
return { playRound, resetGame, gameStatus }
|
||||
return { playRound, resetGame, gameStatus, gameRound }
|
||||
})();
|
||||
|
||||
|
||||
|
|
@ -220,9 +221,29 @@ const screenController = (() => {
|
|||
contentDiv.appendChild(resetButton);
|
||||
|
||||
const updateScreen = () => {
|
||||
status()
|
||||
displayBoard();
|
||||
}
|
||||
|
||||
const status = () => {
|
||||
let pTags = gameStatus.querySelectorAll('p');
|
||||
if (pTags) pTags.forEach(e => e.remove());
|
||||
|
||||
let message = document.createElement('p');
|
||||
let gameOn = gameController.gameStatus() ? "Play again?" : "";
|
||||
let round = gameController.gameRound();
|
||||
|
||||
if (round <= 9 && gameOn) {
|
||||
message.textContent = gameOn;
|
||||
} else if (round >= 9 && !gameOn) {
|
||||
message.textContent = "Draw, play again?";
|
||||
}
|
||||
|
||||
gameStatus.appendChild(message);
|
||||
|
||||
}
|
||||
|
||||
|
||||
const displayBoard = () => {
|
||||
// Check if someone won the game
|
||||
|
||||
|
|
@ -256,6 +277,7 @@ const screenController = (() => {
|
|||
|
||||
function clickResetButton() {
|
||||
gameController.resetGame();
|
||||
status();
|
||||
updateScreen();
|
||||
}
|
||||
|
||||
|
|
@ -267,90 +289,3 @@ const screenController = (() => {
|
|||
})();
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// const inputController = (function(){
|
||||
// // only needed for CLI game
|
||||
// const readline = require("readline");
|
||||
// const rl = readline.createInterface({
|
||||
// input: process.stdin,
|
||||
// output: process.stdout
|
||||
// });
|
||||
//
|
||||
// const askQuestion = () => {
|
||||
// return new Promise( resolve => {
|
||||
// rl.question('Where would you like the piece placed?', position => {
|
||||
// position = Number(position);
|
||||
// resolve(position);
|
||||
// });
|
||||
// });
|
||||
// };
|
||||
//
|
||||
// const handleAskQuestion = (position, piece) => {
|
||||
// placeOnBoard(position, piece);
|
||||
// printGameBoard();
|
||||
// }
|
||||
//
|
||||
// return {
|
||||
// askQuestion
|
||||
// }
|
||||
// })();
|
||||
|
||||
// tictactoeBoard.playGame();
|
||||
|
||||
// const playGame = async function(){
|
||||
// for(let i = 0; i<9; i++) {
|
||||
// const move = await askQuestion();
|
||||
// if (i % 2 === 0) {
|
||||
// handleAskQuestion(move, 'x');
|
||||
// } else {
|
||||
// handleAskQuestion(move, 'o');
|
||||
// }
|
||||
//
|
||||
// if (i > 3) {
|
||||
// let results = evalGameOutcome(gameBoard);
|
||||
// console.log(results + ' game over');
|
||||
// if (results) return
|
||||
//
|
||||
// }
|
||||
//
|
||||
// }
|
||||
// rl.close();
|
||||
// };
|
||||
//
|
||||
//
|
||||
//
|
||||
// const evalGameOutcome = gameBoard => {
|
||||
// // create a new array of the vertical indexes in the game board
|
||||
// let vertArray = [];
|
||||
// gameBoard.forEach((_, index) => vertArray.push(gameBoard.map(e => e[index])));
|
||||
//
|
||||
// // create an array of diagnal pieces
|
||||
// let diagArray = [
|
||||
// [gameBoard[0][0], gameBoard[1][1], gameBoard[2][2]],
|
||||
// [gameBoard[0,2], gameBoard[1][1], gameBoard[2][0]]
|
||||
// ];
|
||||
//
|
||||
// let checkGameBoard = [gameBoard, diagArray, vertArray];
|
||||
// for (i=0; i<3; i++) {
|
||||
// let outcome = _evalGameOutcome(checkGameBoard[i]);
|
||||
// if (outcome) return outcome[0];
|
||||
// };
|
||||
// return false;
|
||||
// };
|
||||
//
|
||||
// const _evalGameOutcome = arr => {
|
||||
// // Checks if array values are equal to determine winner
|
||||
// let isWinner = checkArr => checkArr.reduce(function(a,b) { return a === b ? a : false; });
|
||||
//
|
||||
// const outcome = arr.find(element => {
|
||||
// let result = isWinner(element);
|
||||
// if (result != false) {
|
||||
// return result;
|
||||
// } else {
|
||||
// return false;
|
||||
// }
|
||||
// });
|
||||
// return outcome;
|
||||
// };
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue