From b03e2b9a9b3d054a334e3f212c93aba2b433830f Mon Sep 17 00:00:00 2001 From: Melanie Winter Date: Sun, 1 Oct 2023 14:01:18 -0700 Subject: [PATCH 01/15] creates elements and js functions to run tic tac toe game --- index.html | 39 +++++++++++++++++ main.js | 120 +++++++++++++++++++++++++++++++++++++++++++++++++++++ styles.css | 73 ++++++++++++++++++++++++++++++++ 3 files changed, 232 insertions(+) create mode 100644 index.html create mode 100644 main.js create mode 100644 styles.css diff --git a/index.html b/index.html new file mode 100644 index 0000000..a164c2f --- /dev/null +++ b/index.html @@ -0,0 +1,39 @@ + + + + + + + + + + + Document + + + +
TIC-TAC-TOE
+ +

TURN

+ +
+
+
+
+ +
+
+
+ +
+
+
+ + +
+ + + + + + \ No newline at end of file diff --git a/main.js b/main.js new file mode 100644 index 0000000..3244795 --- /dev/null +++ b/main.js @@ -0,0 +1,120 @@ +/*----- constants -----*/ +const MARKERS = { +'0': null, +'1': 'X', +'-1': 'O', +}; + +/*----- state variables -----*/ +let board; // array of 7 column arrays +let turn; // 1 or -1 +let winner; // null = no winner; 1 or -1 = winner; 'T' = Tie +let numRows = 3; +let numCols = 3; + +/*----- cached elements -----*/ +const messageEl = document.querySelector('h1'); +const playAgainBtn = document.querySelector('button'); +const divEls = document.querySelectorAll('div'); + +/*----- event listeners -----*/ +divEls.forEach(div => { + div.addEventListener('click', inputMarker); +}); + +playAgainBtn.addEventListener('click', init); + +/*----- functions -----*/ +init(); + +// Initialize all state, then call render() +function init() { + + +// To visualize the board's mapping to the DOM, +// rotate the board array 90 degrees counter-clockwise +board = [ + [0, 0, 0], // col 0 + [0, 0, 0], // col 1 + [0, 0, 0], // col 2 +]; + +turn = 1; +winner = null; +render(); +} + +// In response to use interaction, update all impacted +// state, then call render(); +function inputMarker(evt) { + const cellId = evt.target.id; + const [colIdx, rowIdx] = cellId.match(/\d+/g).map(Number); + + if (board[colIdx][rowIdx] !== 0 || winner) return; + + board[colIdx][rowIdx] = turn; + turn *= -1; + checkWin(colIdx, rowIdx); + render(); +} + +function checkWin(colIdx, rowIdx) { + if (checkVerticalWin(colIdx, rowIdx) || checkHorizontalWin(colIdx, rowIdx) || checkDiagonalWin(colIdx, rowIdx)) { + winner = board[colIdx][rowIdx]; + } +} + +function checkVerticalWin(colIdx, rowIdx) { + const player = board[colIdx][rowIdx]; + for (let i = 0; i < numCols; i++) { + if (board[i][rowIdx] !== player) return false; + } + return true; +} + +function checkHorizontalWin(colIdx, rowIdx) { + const player = board[colIdx][rowIdx]; + for (let i = 0; i < numRows; i++) { + if (board[colIdx][i] !== player) return false; + } + return true; +} + +function checkDiagonalWin(colIdx, rowIdx) { + const player = board[colIdx][rowIdx]; + if (board[0][0] === player && board[1][1] === player && board[2][2] === player) return true; + if (board[0][2] === player && board[1][1] === player && board[2][0] === player) return true; + return false; +} + +// Visualize all state in the DOM +function render() { + renderBoard(); + renderMessage(); + + // Hide/show UI elements (controls) + // renderControls(); +} + +function renderBoard() { +board.forEach(function(colArr, colIdx) { + // Iterate over the cells in the cur column (colArr) + colArr.forEach(function(cellVal, rowIdx) { + const cellId = `c${colIdx}r${rowIdx}`; + const cellEl = document.getElementById(cellId); + cellEl.innerHTML = cellVal === 1 ? 'X' : cellVal === -1 ? 'O' : ''; // Display 'X' for 1 and 'O' for -1 + }); +}); +} + +function renderMessage() { + if (winner) { + messageEl.innerHTML = `${MARKERS[winner]} Wins!`; + } else { + messageEl.innerHTML = `${MARKERS[turn]}'s Turn`; + } +} + +// function renderControls() { +// playAgainBtn.style.visibility = winner ? 'visible' : 'hidden'; +// } \ No newline at end of file diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..bdbc1ed --- /dev/null +++ b/styles.css @@ -0,0 +1,73 @@ +* { + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + font-family: 'Open Sans', sans-serif; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +header { + font-size: 4vmin; + color: darkgrey; + letter-spacing: 1vmin; + +} + +h1 { + color: grey; + font-size: 3vmin; +} + +#markers { + display: grid; + grid-template-columns: repeat(7, 10vmin); + gap: 1vmin; + margin-top: 1.5vmin; +} + +#markers > div { + height: 10vmin; + border-width: 5vmin; + border-style: solid; + border-color: lightgray transparent transparent; + transform: scale(0.7); +} + +#markers > div:hover { + transform: scale(0.9); + transition: transform 158ms ease-in; + border-top-color: darkgray; +} + +#board { + display: grid; + grid-template-columns: repeat(3, 10vmin); + grid-template-rows: repeat(3, 10vmin); + gap: 1vmin; + margin-top: 1vmin; +} + +#board > div { + border-radius: 10%; + border: 0.1vmin solid grey; +} + +button { + margin-top: 4vmin; + padding: 2vmin; + font-size: 2cmin; + border-radius: 4vmin; + border: 0.1vmin solid grey; + color: grey; +} + +button:hover { + color: white; + background-color: darkgray; +} \ No newline at end of file From d69f825440e24157accb2577034b42c4147c7cfe Mon Sep 17 00:00:00 2001 From: Melanie Winter Date: Sun, 1 Oct 2023 14:07:24 -0700 Subject: [PATCH 02/15] fixes x and o styling inside divs --- styles.css | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/styles.css b/styles.css index bdbc1ed..41542f1 100644 --- a/styles.css +++ b/styles.css @@ -70,4 +70,10 @@ button { button:hover { color: white; background-color: darkgray; +} + +div { + font-size: 10vmin; + text-align: center; + line-height: 9.5vmin; } \ No newline at end of file From b09b4718232eead510b175c182eba0eb761a5465 Mon Sep 17 00:00:00 2001 From: Melanie Winter Date: Sun, 1 Oct 2023 14:54:52 -0700 Subject: [PATCH 03/15] fixes some styling errors --- main.js | 5 ----- styles.css | 14 -------------- 2 files changed, 19 deletions(-) diff --git a/main.js b/main.js index 3244795..15d131c 100644 --- a/main.js +++ b/main.js @@ -21,7 +21,6 @@ const divEls = document.querySelectorAll('div'); divEls.forEach(div => { div.addEventListener('click', inputMarker); }); - playAgainBtn.addEventListener('click', init); /*----- functions -----*/ @@ -30,7 +29,6 @@ init(); // Initialize all state, then call render() function init() { - // To visualize the board's mapping to the DOM, // rotate the board array 90 degrees counter-clockwise board = [ @@ -91,9 +89,6 @@ function checkDiagonalWin(colIdx, rowIdx) { function render() { renderBoard(); renderMessage(); - - // Hide/show UI elements (controls) - // renderControls(); } function renderBoard() { diff --git a/styles.css b/styles.css index 41542f1..f40c0c9 100644 --- a/styles.css +++ b/styles.css @@ -31,20 +31,6 @@ h1 { margin-top: 1.5vmin; } -#markers > div { - height: 10vmin; - border-width: 5vmin; - border-style: solid; - border-color: lightgray transparent transparent; - transform: scale(0.7); -} - -#markers > div:hover { - transform: scale(0.9); - transition: transform 158ms ease-in; - border-top-color: darkgray; -} - #board { display: grid; grid-template-columns: repeat(3, 10vmin); From 4c909a5dacc54e5951f0adf66f30a6b3722efa35 Mon Sep 17 00:00:00 2001 From: Melanie Winter Date: Sun, 1 Oct 2023 15:04:45 -0700 Subject: [PATCH 04/15] Changes x and os to emojis --- main.js | 2 +- styles.css | 10 +++++----- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/main.js b/main.js index 15d131c..c6933e8 100644 --- a/main.js +++ b/main.js @@ -97,7 +97,7 @@ board.forEach(function(colArr, colIdx) { colArr.forEach(function(cellVal, rowIdx) { const cellId = `c${colIdx}r${rowIdx}`; const cellEl = document.getElementById(cellId); - cellEl.innerHTML = cellVal === 1 ? 'X' : cellVal === -1 ? 'O' : ''; // Display 'X' for 1 and 'O' for -1 + cellEl.innerHTML = cellVal === 1 ? '🙅‍♀️' : cellVal === -1 ? '🙆‍♂️' : ''; // Display 'X' for 1 and 'O' for -1 }); }); } diff --git a/styles.css b/styles.css index f40c0c9..427faaa 100644 --- a/styles.css +++ b/styles.css @@ -33,8 +33,8 @@ h1 { #board { display: grid; - grid-template-columns: repeat(3, 10vmin); - grid-template-rows: repeat(3, 10vmin); + grid-template-columns: repeat(3, 20vmin); + grid-template-rows: repeat(3, 20vmin); gap: 1vmin; margin-top: 1vmin; } @@ -48,7 +48,7 @@ button { margin-top: 4vmin; padding: 2vmin; font-size: 2cmin; - border-radius: 4vmin; + border-radius: 2vmin; border: 0.1vmin solid grey; color: grey; } @@ -59,7 +59,7 @@ button:hover { } div { - font-size: 10vmin; + font-size: 20vmin; text-align: center; - line-height: 9.5vmin; + line-height: 19.4vmin; } \ No newline at end of file From c78209e4758c8d5f9f2815f46b5c812632cf11b4 Mon Sep 17 00:00:00 2001 From: Melanie Winter Date: Sun, 1 Oct 2023 15:24:15 -0700 Subject: [PATCH 05/15] fixes stlying of css elements --- index.html | 4 ++-- styles.css | 20 +++++++------------- 2 files changed, 9 insertions(+), 15 deletions(-) diff --git a/index.html b/index.html index a164c2f..a7eeaf1 100644 --- a/index.html +++ b/index.html @@ -5,14 +5,14 @@ - + Document -
TIC-TAC-TOE
+
TIC-TAC-TOE

TURN

diff --git a/styles.css b/styles.css index 427faaa..b537559 100644 --- a/styles.css +++ b/styles.css @@ -1,11 +1,11 @@ * { box-sizing: border-box; + font-family: 'Rubik Mono One', sans-serif; } body { height: 100vh; margin: 0; - font-family: 'Open Sans', sans-serif; display: flex; flex-direction: column; justify-content: center; @@ -13,22 +13,16 @@ body { } header { - font-size: 4vmin; - color: darkgrey; + font-size: 5vmin; + color: darkviolet; letter-spacing: 1vmin; } h1 { - color: grey; + color: dimgray; font-size: 3vmin; -} - -#markers { - display: grid; - grid-template-columns: repeat(7, 10vmin); - gap: 1vmin; - margin-top: 1.5vmin; + margin-top: 1vmin; } #board { @@ -55,11 +49,11 @@ button { button:hover { color: white; - background-color: darkgray; + background-color: dimgray; } div { font-size: 20vmin; text-align: center; - line-height: 19.4vmin; + line-height: 22.5vmin; } \ No newline at end of file From 682a07f6ea3f9111378aaf4a46da8da039bb0933 Mon Sep 17 00:00:00 2001 From: Melanie Winter Date: Sun, 1 Oct 2023 15:31:39 -0700 Subject: [PATCH 06/15] styles divs on hover --- styles.css | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/styles.css b/styles.css index b537559..851a29f 100644 --- a/styles.css +++ b/styles.css @@ -50,10 +50,19 @@ button { button:hover { color: white; background-color: dimgray; + transform: scale(1.1); + transition: transform 158ms ease-in; + cursor: pointer; } div { font-size: 20vmin; text-align: center; line-height: 22.5vmin; +} + +div:hover { + cursor: pointer; + transform: scale(1.1); + transition: transform 158ms ease-in; } \ No newline at end of file From 384b1bc14cc8fb36708c013e42b865080cd4770b Mon Sep 17 00:00:00 2001 From: Melanie Winter Date: Sun, 1 Oct 2023 15:33:50 -0700 Subject: [PATCH 07/15] changes div styling --- styles.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/styles.css b/styles.css index 851a29f..d724d65 100644 --- a/styles.css +++ b/styles.css @@ -43,8 +43,8 @@ button { padding: 2vmin; font-size: 2cmin; border-radius: 2vmin; - border: 0.1vmin solid grey; - color: grey; + border: 0.1vmin solid dimgrey; + color: dimgrey; } button:hover { From ffedc48c656b44e49052481f978050df4b558ecf Mon Sep 17 00:00:00 2001 From: Melanie Winter Date: Sun, 1 Oct 2023 15:37:24 -0700 Subject: [PATCH 08/15] Fixes formatting in js file --- main.js | 21 +++++++++------------ 1 file changed, 9 insertions(+), 12 deletions(-) diff --git a/main.js b/main.js index c6933e8..119203f 100644 --- a/main.js +++ b/main.js @@ -92,14 +92,15 @@ function render() { } function renderBoard() { -board.forEach(function(colArr, colIdx) { - // Iterate over the cells in the cur column (colArr) - colArr.forEach(function(cellVal, rowIdx) { - const cellId = `c${colIdx}r${rowIdx}`; - const cellEl = document.getElementById(cellId); - cellEl.innerHTML = cellVal === 1 ? '🙅‍♀️' : cellVal === -1 ? '🙆‍♂️' : ''; // Display 'X' for 1 and 'O' for -1 + board.forEach(function(colArr, colIdx) { + // Iterate over the cells in the cur column (colArr) + colArr.forEach(function(cellVal, rowIdx) { + const cellId = `c${colIdx}r${rowIdx}`; + const cellEl = document.getElementById(cellId); + // Display '🙅‍♀️' for 1 and '🙆‍♂️' for -1 + cellEl.innerHTML = cellVal === 1 ? '🙅‍♀️' : cellVal === -1 ? '🙆‍♂️' : '' + }); }); -}); } function renderMessage() { @@ -108,8 +109,4 @@ function renderMessage() { } else { messageEl.innerHTML = `${MARKERS[turn]}'s Turn`; } -} - -// function renderControls() { -// playAgainBtn.style.visibility = winner ? 'visible' : 'hidden'; -// } \ No newline at end of file +} \ No newline at end of file From ac0c8755de4a697098b614a68a4687ca98eb924d Mon Sep 17 00:00:00 2001 From: Melanie Winter Date: Sun, 1 Oct 2023 16:08:29 -0700 Subject: [PATCH 09/15] Adds a win counter in the h1 message --- index.html | 2 +- main.js | 11 +++++++++-- 2 files changed, 10 insertions(+), 3 deletions(-) diff --git a/index.html b/index.html index a7eeaf1..0aa52de 100644 --- a/index.html +++ b/index.html @@ -8,7 +8,7 @@ - Document + Emoji Tic-Tac-Toe diff --git a/main.js b/main.js index 119203f..b8ee89a 100644 --- a/main.js +++ b/main.js @@ -5,6 +5,10 @@ const MARKERS = { '-1': 'O', }; +const WINCOUNT = { + '1': 0, // Player X wins + '-1': 0 // Player O wins +}; /*----- state variables -----*/ let board; // array of 7 column arrays let turn; // 1 or -1 @@ -59,6 +63,9 @@ function inputMarker(evt) { function checkWin(colIdx, rowIdx) { if (checkVerticalWin(colIdx, rowIdx) || checkHorizontalWin(colIdx, rowIdx) || checkDiagonalWin(colIdx, rowIdx)) { winner = board[colIdx][rowIdx]; + if (winner !== null) { + WINCOUNT[winner]++; // Increment the win count for the winning player + } } } @@ -105,8 +112,8 @@ function renderBoard() { function renderMessage() { if (winner) { - messageEl.innerHTML = `${MARKERS[winner]} Wins!`; + messageEl.innerHTML = `${MARKERS[winner]} Wins! || 🙅‍♀️: ${WINCOUNT['1']} - 🙆‍♂️: ${WINCOUNT['-1']}`; } else { - messageEl.innerHTML = `${MARKERS[turn]}'s Turn`; + messageEl.innerHTML = `${MARKERS[turn]}'s Turn`; } } \ No newline at end of file From 13b453ddb87f35100c2036ee9a17a590a4d0595c Mon Sep 17 00:00:00 2001 From: Melanie Winter Date: Sun, 1 Oct 2023 16:16:16 -0700 Subject: [PATCH 10/15] Fixes formatting in js file. Changes button styling in css. --- main.js | 9 ++++----- styles.css | 2 -- 2 files changed, 4 insertions(+), 7 deletions(-) diff --git a/main.js b/main.js index b8ee89a..3394de1 100644 --- a/main.js +++ b/main.js @@ -1,10 +1,9 @@ /*----- constants -----*/ const MARKERS = { -'0': null, -'1': 'X', -'-1': 'O', + '0': null, + '1': 'X', + '-1': 'O', }; - const WINCOUNT = { '1': 0, // Player X wins '-1': 0 // Player O wins @@ -100,7 +99,7 @@ function render() { function renderBoard() { board.forEach(function(colArr, colIdx) { - // Iterate over the cells in the cur column (colArr) + // Iterate over the cells in the current column (colArr) colArr.forEach(function(cellVal, rowIdx) { const cellId = `c${colIdx}r${rowIdx}`; const cellEl = document.getElementById(cellId); diff --git a/styles.css b/styles.css index d724d65..c286f37 100644 --- a/styles.css +++ b/styles.css @@ -50,8 +50,6 @@ button { button:hover { color: white; background-color: dimgray; - transform: scale(1.1); - transition: transform 158ms ease-in; cursor: pointer; } From 15673c805884b1e9f1a769e754712ebb26ead161 Mon Sep 17 00:00:00 2001 From: Melanie Winter Date: Sun, 1 Oct 2023 16:26:49 -0700 Subject: [PATCH 11/15] Changes button background to violet on hover --- styles.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/styles.css b/styles.css index c286f37..0bc45ee 100644 --- a/styles.css +++ b/styles.css @@ -44,12 +44,12 @@ button { font-size: 2cmin; border-radius: 2vmin; border: 0.1vmin solid dimgrey; - color: dimgrey; + color: dimgray;; } button:hover { color: white; - background-color: dimgray; + background-color: darkviolet; cursor: pointer; } From db85f77e2df5db2ebd76d9576885882a5560e350 Mon Sep 17 00:00:00 2001 From: Melanie Winter Date: Sun, 1 Oct 2023 16:30:03 -0700 Subject: [PATCH 12/15] Changes winner message in h1 --- main.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/main.js b/main.js index 3394de1..2450cf0 100644 --- a/main.js +++ b/main.js @@ -111,7 +111,7 @@ function renderBoard() { function renderMessage() { if (winner) { - messageEl.innerHTML = `${MARKERS[winner]} Wins! || 🙅‍♀️: ${WINCOUNT['1']} - 🙆‍♂️: ${WINCOUNT['-1']}`; + messageEl.innerHTML = `${MARKERS[winner]} Wins! 🙅‍♀️: ${WINCOUNT['1']} 🙆‍♂️: ${WINCOUNT['-1']}`; } else { messageEl.innerHTML = `${MARKERS[turn]}'s Turn`; } From 2ff69f887c42571bdb0ac019f73a3557ffd86439 Mon Sep 17 00:00:00 2001 From: Melanie Winter Date: Sun, 1 Oct 2023 21:45:12 -0700 Subject: [PATCH 13/15] Creates cat's game function and message --- index.html | 4 ++-- main.js | 17 ++++++++++++++++- 2 files changed, 18 insertions(+), 3 deletions(-) diff --git a/index.html b/index.html index 0aa52de..d34c824 100644 --- a/index.html +++ b/index.html @@ -14,7 +14,7 @@
TIC-TAC-TOE
-

TURN

+

X'S TURN

@@ -32,7 +32,7 @@

TURN

- + diff --git a/main.js b/main.js index 2450cf0..da53797 100644 --- a/main.js +++ b/main.js @@ -11,7 +11,8 @@ const WINCOUNT = { /*----- state variables -----*/ let board; // array of 7 column arrays let turn; // 1 or -1 -let winner; // null = no winner; 1 or -1 = winner; 'T' = Tie +let winner; +let tieGame; let numRows = 3; let numCols = 3; @@ -55,6 +56,7 @@ function inputMarker(evt) { board[colIdx][rowIdx] = turn; turn *= -1; + tieGame = catsGame(); checkWin(colIdx, rowIdx); render(); } @@ -68,6 +70,17 @@ function checkWin(colIdx, rowIdx) { } } +function catsGame() { + for (let i = 0; i < numCols; i++) { + for (let j = 0; j < numRows; j++) { + if (board[i][j] === 0) { + return false; + } + } + } + return true; +} + function checkVerticalWin(colIdx, rowIdx) { const player = board[colIdx][rowIdx]; for (let i = 0; i < numCols; i++) { @@ -112,6 +125,8 @@ function renderBoard() { function renderMessage() { if (winner) { messageEl.innerHTML = `${MARKERS[winner]} Wins! 🙅‍♀️: ${WINCOUNT['1']} 🙆‍♂️: ${WINCOUNT['-1']}`; + } else if (tieGame){ + messageEl.innerHTML = "Cat's game! It's a tie. 🐱"; } else { messageEl.innerHTML = `${MARKERS[turn]}'s Turn`; } From 5f3cb6e5d236ccd9263b667fefe58aecc456fde3 Mon Sep 17 00:00:00 2001 From: Melanie Winter Date: Sun, 1 Oct 2023 21:49:10 -0700 Subject: [PATCH 14/15] Changes message for cats game --- main.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/main.js b/main.js index da53797..98bf628 100644 --- a/main.js +++ b/main.js @@ -126,7 +126,7 @@ function renderMessage() { if (winner) { messageEl.innerHTML = `${MARKERS[winner]} Wins! 🙅‍♀️: ${WINCOUNT['1']} 🙆‍♂️: ${WINCOUNT['-1']}`; } else if (tieGame){ - messageEl.innerHTML = "Cat's game! It's a tie. 🐱"; + messageEl.innerHTML = "🐱 It's a tie! 🐱"; } else { messageEl.innerHTML = `${MARKERS[turn]}'s Turn`; } From c987a3995893f2efef19c62686da59d1fcac7517 Mon Sep 17 00:00:00 2001 From: Melanie Winter Date: Mon, 2 Oct 2023 10:36:21 -0700 Subject: [PATCH 15/15] Completed deliverable --- main.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/main.js b/main.js index 98bf628..5121913 100644 --- a/main.js +++ b/main.js @@ -130,4 +130,5 @@ function renderMessage() { } else { messageEl.innerHTML = `${MARKERS[turn]}'s Turn`; } -} \ No newline at end of file +} +