mirror of
https://gitea.smigz.com/smiggiddy/odin-codeprojects.git
synced 2025-06-28 12:55:36 -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 {
|
: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 {
|
body,html {
|
||||||
width: 100vw;
|
min-width: 100vw;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 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 {
|
header h1 {
|
||||||
font-size: 2rem;
|
font-size: 2rem;
|
||||||
|
|
@ -17,25 +31,56 @@ header h1 {
|
||||||
.container {
|
.container {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: center;
|
|
||||||
align-items: 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 {
|
.content>.game-area {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-area: 1 / 1 / 4 / 4;
|
grid-area: 1 / 1 / 4 / 4;
|
||||||
gap: 15px;
|
|
||||||
grid-template-rows: repeat(3, 150px);
|
grid-template-rows: repeat(3, 150px);
|
||||||
grid-template-columns: repeat(3, 150px);
|
grid-template-columns: repeat(3, 150px);
|
||||||
justify-items: center;
|
justify-items: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
border: solid;
|
||||||
}
|
}
|
||||||
|
|
||||||
.block {
|
.block {
|
||||||
height: 100px;
|
font-family: 'Silkscreen', sans-serif;
|
||||||
width: 100px;
|
font-weight: 700;
|
||||||
|
height: 150px;
|
||||||
|
width: 150px;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: 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>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<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">
|
<link rel="stylesheet" href="css/style.css">
|
||||||
<title>Tic-Tac-Toe</title>
|
<title>Tic-Tac-Toe</title>
|
||||||
</head>
|
</head>
|
||||||
|
|
|
||||||
|
|
@ -34,7 +34,7 @@ const tictactoeBoard = (function() {
|
||||||
case 9:
|
case 9:
|
||||||
return isEmpty(gameBoard[2][2]);
|
return isEmpty(gameBoard[2][2]);
|
||||||
default:
|
default:
|
||||||
console.log('Must enter a number 1 - 9');
|
Alert('Must enter a number 1 - 9');
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -74,7 +74,6 @@ const tictactoeBoard = (function() {
|
||||||
gameBoard[2][2] = marker;
|
gameBoard[2][2] = marker;
|
||||||
break;
|
break;
|
||||||
default:
|
default:
|
||||||
console.log('Must enter a number 1 - 9');
|
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -134,10 +133,12 @@ const gameController = (() => {
|
||||||
const resetGame = () => {
|
const resetGame = () => {
|
||||||
round = 0;
|
round = 0;
|
||||||
xTurn = true;
|
xTurn = true;
|
||||||
|
gameOver = false;
|
||||||
tictactoeBoard.resetGameBoard();
|
tictactoeBoard.resetGameBoard();
|
||||||
}
|
}
|
||||||
|
|
||||||
const gameStatus = () => gameOver;
|
const gameStatus = () => gameOver;
|
||||||
|
const gameRound = () => round;
|
||||||
|
|
||||||
const switchPlayerTurn = () => {
|
const switchPlayerTurn = () => {
|
||||||
xTurn = !xTurn;
|
xTurn = !xTurn;
|
||||||
|
|
@ -157,7 +158,7 @@ const gameController = (() => {
|
||||||
gameOver = evalGameOutcome(tictactoeBoard.getGameBoard());
|
gameOver = evalGameOutcome(tictactoeBoard.getGameBoard());
|
||||||
|
|
||||||
if (gameOver) {
|
if (gameOver) {
|
||||||
console.log(`${player.name}: ${player.piece} won the game`)
|
console.log(`${player.name}: ${player.piece} won!`)
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
switchPlayerTurn();
|
switchPlayerTurn();
|
||||||
|
|
@ -204,7 +205,7 @@ const gameController = (() => {
|
||||||
return outcome;
|
return outcome;
|
||||||
};
|
};
|
||||||
|
|
||||||
return { playRound, resetGame, gameStatus }
|
return { playRound, resetGame, gameStatus, gameRound }
|
||||||
})();
|
})();
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -220,9 +221,29 @@ const screenController = (() => {
|
||||||
contentDiv.appendChild(resetButton);
|
contentDiv.appendChild(resetButton);
|
||||||
|
|
||||||
const updateScreen = () => {
|
const updateScreen = () => {
|
||||||
|
status()
|
||||||
displayBoard();
|
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 = () => {
|
const displayBoard = () => {
|
||||||
// Check if someone won the game
|
// Check if someone won the game
|
||||||
|
|
||||||
|
|
@ -256,6 +277,7 @@ const screenController = (() => {
|
||||||
|
|
||||||
function clickResetButton() {
|
function clickResetButton() {
|
||||||
gameController.resetGame();
|
gameController.resetGame();
|
||||||
|
status();
|
||||||
updateScreen();
|
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
Add a link
Reference in a new issue