From 33012c05338a8c1c4b9b132f11008b23631770b3 Mon Sep 17 00:00:00 2001 From: Abay Date: Sun, 1 Oct 2023 13:56:02 -0600 Subject: [PATCH 1/7] created html, css, and js files. also setup html and css files ready for basic implemenation of game --- index.html | 29 +++++++++++++++++++++++++++++ script.js | 0 style.css | 41 +++++++++++++++++++++++++++++++++++++++++ 3 files changed, 70 insertions(+) create mode 100644 index.html create mode 100644 script.js create mode 100644 style.css diff --git a/index.html b/index.html new file mode 100644 index 0000000..fecd747 --- /dev/null +++ b/index.html @@ -0,0 +1,29 @@ + + + + + + Tic Tac Toe + + + + +
Tic Tac Toe
+

Play Again

+

Turn

+
+
xc0r0
+
xc1r0
+
xc2r0
+ +
xc0r1
+
xc1r1
+
xc2r1
+ +
xc0r2
+
xc1r2
+
xc2r2
+
+ + + \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..e69de29 diff --git a/style.css b/style.css new file mode 100644 index 0000000..125f87b --- /dev/null +++ b/style.css @@ -0,0 +1,41 @@ +body { + height: 100vh; + margin: 0; + font-family: 'Rubik', sans-serif; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +#board { + display: grid; + grid-template-columns: repeat(3, 10vmin); + grid-template-rows: repeat(3, 10vmin); + gap: 3vmin; + /* margin-top: -2vmin; */ +} + +#board > div { + margin: auto; + padding: 3vmin; + width: 5vmin; + height: 5vmin; + background-color: gray; + text-align: center; +} +#board >div:hover { + background-color: lightgray; +} + +#board > div.x { + background-color: red; +} + +#board > div.o { + background-color: blue; +} + +h1 { + margin: 1vmin auto; +} \ No newline at end of file From 6a16e6f74f24903ad0179e96e3f4b4b9867a1217 Mon Sep 17 00:00:00 2001 From: Abay Date: Sun, 1 Oct 2023 19:26:54 -0600 Subject: [PATCH 2/7] added horizontal win, vertical win, and tie checks --- index.html | 25 ++++---- script.js | 173 +++++++++++++++++++++++++++++++++++++++++++++++++++++ style.css | 6 +- 3 files changed, 192 insertions(+), 12 deletions(-) diff --git a/index.html b/index.html index fecd747..493b289 100644 --- a/index.html +++ b/index.html @@ -5,24 +5,27 @@ Tic Tac Toe + + +
Tic Tac Toe
-

Play Again

-

Turn

+ +

Turn

-
xc0r0
-
xc1r0
-
xc2r0
+
c0r0
+
c1r0
+
c2r0
-
xc0r1
-
xc1r1
-
xc2r1
+
c0r1
+
c1r1
+
c2r1
-
xc0r2
-
xc1r2
-
xc2r2
+
c0r2
+
c1r2
+
c2r2
diff --git a/script.js b/script.js index e69de29..3206b52 100644 --- a/script.js +++ b/script.js @@ -0,0 +1,173 @@ +// constants +const colours = { // can sub in pictures later instead of colours + '0': 'gray', + '1': 'red', + '2': 'blue' +}; + +const players = { + '1': 'X', + '2': 'O' +}; +// variables +let board; // 3x3 board +let player; // 1 - player1, 2 - player 2, 0 - blank space +let winner; // 0 - no winners, 1 - player1 wins, 2 - player2 wins, 3 - tie +let turnCount; // count turns, determine if tie at 9 turns after checking for winner +// cache +const replay = document.getElementById('replay'); +const gameMessage = document.getElementById('message'); +const boardOptions = [... document.querySelectorAll('#board > div')]; +// event listeners +document.getElementById('board').addEventListener('click', handlePlay); +replay.addEventListener('click', startGame); +// functions + +startGame(); + +function startGame() { + board = { + 'r0': [0, 0, 0], + 'r1': [0, 0, 0], + 'r2': [0, 0, 0] + } + turnCount = 0; + winner = 0; + player = goFirst(); + render(); +} + +function goFirst(){ + let turnValue = Math.random() * 10 + let first = turnValue >= 5 ? 1 : 2; + return first; +} + +function render() { + renderBoard(); + renderMessage() +} + +function renderBoard() { + for (let i = 0; i < Object.keys(board).length; i++) { + for (let j = 0; j < board[`r${i}`].length; j++) { + const cellId = `c${j}r${i}`; + const cellElement = document.getElementById(cellId); + const cellValue = board[`r${i}`][j] + cellElement.style.backgroundColor = colours[cellValue]; + } + } +} + + +function renderMessage() { + while (winner === 0) { + gameMessage.innerHTML = `Player ${player}'s Turn!`; + return; + } + if (winner === 3) { + gameMessage.innerHTML = 'Tie!'; + } else if (winner === 1 || winner === 2) { + gameMessage.innerHTML = `Player ${winner} Wins!`; + } +} + +function handlePlay(event){ + // easier to access for later loops + const numberOfRows = Object.keys(board).length; + console.log("🚀 ~ file: script.js:78 ~ handlePlay ~ numberOfRows:", numberOfRows) + const numberOfColumns = board[Object.keys(board)[0]].length; + console.log("🚀 ~ file: script.js:80 ~ handlePlay ~ numberOfColumns:", numberOfColumns) + // set rowIndex to the index ( [0] or [1] or [2] ) of the clicked item (div) + // guard against misclick, the below code will return -1 if you clicked on not the div. also prevent input if game won or tied + const columnIndex = boardOptions.indexOf(event.target); + if (columnIndex === -1 || winner != 0) return; + // find row and column + const elementId = event.target.getAttribute('id'); + const col = elementId.slice(1,2); + const row = elementId.slice(2,4); + // only allow empty squares to be clicked + console.log(col + row + ' just col + row'); + console.log(board[`${row}`][col]) + + if (board[`${row}`][col] === 0) { + board[`${row}`][col] = player; + player = player == 1 ? 2 : 1; + //console.log('player after = ' + player) + } + + getWinner(row, col, numberOfRows, numberOfColumns); + + render(); +} + +function getWinner(row, col, numberOfRows, numberOfColumns) { + const horizontalWin = checkHorizontals(row, col); + const verticalWin = checkVerticals(row, col); + //const diagonalNorthEastWin = checkDiagonals(row, col, numberOfRows, numberOfColumns, 0, 0); + //const diagonalNorthWestWin = checkDiagonals(row, col, numberOfRows, numberOfColumns, 1, -1); + return; +} + +function checkHorizontals(row, col) { + for (let i = 0; i < Object.keys(board).length; i++) { + let winCount = 0; + for (let j = 0; j < board[`r${i}`].length; j++) { + if (board[`r${i}`][j] === board[`${row}`][col]) { + winCount ++; + } + if (winCount >= 3) { + return winner = board[`${row}`][col]; + } + } + } +} + +function checkVerticals(row, col) { + for (let i = 0; i < Object.keys(board).length; i++) { + let winCount = 0; + for (let j = 0; j < board[`r${i}`].length; j++) { + if (board[`r${j}`][i] === board[`${row}`][col]) { + winCount ++; + } + if (winCount >= 3) { + return winner = board[`${row}`][col]; + } + } + } +} + +function checkDiagonals(row, col, numberOfRows, numberOfColumns, addOne, minusOne) { + let i = 0 + let j = 0 + if (minusOne != 0) j = 2; + let winCount = 0; + while ( i < numberOfRows && j < numberOfColumns){ + if (board[`r${i}`][j] === board[`${row}`][col]) { + winCount ++; + } + if (winCount >= 3) { + return winner = board[`${row}`][col]; + } + i + addOne; + j + minusOne; + } +} + +// function countAdjacents(row, col, rowOffset, colOffset) { +// let currentPlayer = board[`${row}`][col]; +// console.log('current player' + currentPlayer); +// let winCount = 0; + +// while ( +// // Ensure indexes are within bounds of the board array +// board[`${row}`] !== undefined && +// board[`${row}`][col] !== undefined && +// board[`${row}`][col] === currentPlayer +// ) { +// winCount ++; +// colIndex += colOffset; +// rowIndex += rowOffset; +// } + +// } \ No newline at end of file diff --git a/style.css b/style.css index 125f87b..034dfc7 100644 --- a/style.css +++ b/style.css @@ -1,13 +1,17 @@ body { height: 100vh; margin: 0; - font-family: 'Rubik', sans-serif; + font-family: 'Cormorant Garamond', serif; display: flex; flex-direction: column; justify-content: center; align-items: center; } +header { + font-size: 5vmin; +} + #board { display: grid; grid-template-columns: repeat(3, 10vmin); From 59d5f13f1b3d0620814a4826af79a217d353900a Mon Sep 17 00:00:00 2001 From: Abay Date: Sun, 1 Oct 2023 20:01:51 -0600 Subject: [PATCH 3/7] fixed diagonal win check --- index.html | 2 +- script.js | 33 +++++++++++++++++---------------- style.css | 6 +++++- 3 files changed, 23 insertions(+), 18 deletions(-) diff --git a/index.html b/index.html index 493b289..d6783db 100644 --- a/index.html +++ b/index.html @@ -4,10 +4,10 @@ Tic Tac Toe - + diff --git a/script.js b/script.js index 3206b52..477f40a 100644 --- a/script.js +++ b/script.js @@ -34,6 +34,7 @@ function startGame() { turnCount = 0; winner = 0; player = goFirst(); + replay.classList.add('hide'); render(); } @@ -69,6 +70,7 @@ function renderMessage() { gameMessage.innerHTML = 'Tie!'; } else if (winner === 1 || winner === 2) { gameMessage.innerHTML = `Player ${winner} Wins!`; + replay.classList.remove('hide'); } } @@ -102,17 +104,16 @@ function handlePlay(event){ } function getWinner(row, col, numberOfRows, numberOfColumns) { - const horizontalWin = checkHorizontals(row, col); - const verticalWin = checkVerticals(row, col); - //const diagonalNorthEastWin = checkDiagonals(row, col, numberOfRows, numberOfColumns, 0, 0); - //const diagonalNorthWestWin = checkDiagonals(row, col, numberOfRows, numberOfColumns, 1, -1); - return; + checkHorizontals(row, col, numberOfRows, numberOfColumns); + checkVerticals(row, col, numberOfRows, numberOfColumns); + checkDiagonals(row, col, numberOfRows, 1); + checkDiagonals(row, col, numberOfRows, -1); } -function checkHorizontals(row, col) { - for (let i = 0; i < Object.keys(board).length; i++) { +function checkHorizontals(row, col, nOR, nOC) { + for (let i = 0; i < nOR; i++) { let winCount = 0; - for (let j = 0; j < board[`r${i}`].length; j++) { + for (let j = 0; j < nOC; j++) { if (board[`r${i}`][j] === board[`${row}`][col]) { winCount ++; } @@ -123,10 +124,10 @@ function checkHorizontals(row, col) { } } -function checkVerticals(row, col) { - for (let i = 0; i < Object.keys(board).length; i++) { +function checkVerticals(row, col, nOR, nOC) { + for (let i = 0; i < nOR; i++) { let winCount = 0; - for (let j = 0; j < board[`r${i}`].length; j++) { + for (let j = 0; j < nOC; j++) { if (board[`r${j}`][i] === board[`${row}`][col]) { winCount ++; } @@ -137,20 +138,20 @@ function checkVerticals(row, col) { } } -function checkDiagonals(row, col, numberOfRows, numberOfColumns, addOne, minusOne) { +function checkDiagonals(row, col, nOR, columnOffset) { let i = 0 let j = 0 - if (minusOne != 0) j = 2; + if (columnOffset != 1) j = 2; let winCount = 0; - while ( i < numberOfRows && j < numberOfColumns){ + while ( i < nOR){ if (board[`r${i}`][j] === board[`${row}`][col]) { winCount ++; } if (winCount >= 3) { return winner = board[`${row}`][col]; } - i + addOne; - j + minusOne; + i ++; + j += (1 * columnOffset); } } diff --git a/style.css b/style.css index 034dfc7..1a65791 100644 --- a/style.css +++ b/style.css @@ -25,7 +25,7 @@ header { padding: 3vmin; width: 5vmin; height: 5vmin; - background-color: gray; + background-color: green; text-align: center; } #board >div:hover { @@ -42,4 +42,8 @@ header { h1 { margin: 1vmin auto; +} + +button.hide { + visibility: hidden; } \ No newline at end of file From 6cfb96e8a95aa42fd63c3592cb8eeda1f5822b1e Mon Sep 17 00:00:00 2001 From: Abay Date: Sun, 1 Oct 2023 20:07:43 -0600 Subject: [PATCH 4/7] added over game counter --- index.html | 3 ++- script.js | 12 +++++++++--- 2 files changed, 11 insertions(+), 4 deletions(-) diff --git a/index.html b/index.html index d6783db..3fb7af7 100644 --- a/index.html +++ b/index.html @@ -12,8 +12,9 @@
Tic Tac Toe
+

Game

-

Turn

+

Turn

c0r0
c1r0
diff --git a/script.js b/script.js index 477f40a..b5177b2 100644 --- a/script.js +++ b/script.js @@ -13,11 +13,12 @@ const players = { let board; // 3x3 board let player; // 1 - player1, 2 - player 2, 0 - blank space let winner; // 0 - no winners, 1 - player1 wins, 2 - player2 wins, 3 - tie -let turnCount; // count turns, determine if tie at 9 turns after checking for winner +let gameCount = 0; // count games completed // cache const replay = document.getElementById('replay'); const gameMessage = document.getElementById('message'); const boardOptions = [... document.querySelectorAll('#board > div')]; +const gameCounter = document.getElementById('gameCounter'); // event listeners document.getElementById('board').addEventListener('click', handlePlay); replay.addEventListener('click', startGame); @@ -31,7 +32,7 @@ function startGame() { 'r1': [0, 0, 0], 'r2': [0, 0, 0] } - turnCount = 0; + gameCount ++; winner = 0; player = goFirst(); replay.classList.add('hide'); @@ -45,8 +46,13 @@ function goFirst(){ } function render() { + renderGameCount(); renderBoard(); - renderMessage() + renderMessage(); +} + +function renderGameCount() { + gameCounter.innerHTML = `Game ${gameCount}`; } function renderBoard() { From d08a39262e3d700c582fc7216385bacc2c9b62a2 Mon Sep 17 00:00:00 2001 From: Abay Date: Mon, 2 Oct 2023 00:49:22 -0600 Subject: [PATCH 5/7] made it mario themed --- index.html | 26 ++++++++++++------------- local/cloud.svg | 10 ++++++++++ script.js | 39 +++++++++++++++++++++++++++---------- style.css | 51 ++++++++++++++++++++++++++++++++++--------------- 4 files changed, 88 insertions(+), 38 deletions(-) create mode 100644 local/cloud.svg diff --git a/index.html b/index.html index 3fb7af7..3822ebb 100644 --- a/index.html +++ b/index.html @@ -4,9 +4,7 @@ Tic Tac Toe - - - + @@ -14,19 +12,21 @@
Tic Tac Toe

Game

-

Turn

+

Turn

+
Mario's Wins:
+
Luigi's Wins:
-
c0r0
-
c1r0
-
c2r0
+
+
+
-
c0r1
-
c1r1
-
c2r1
+
+
+
-
c0r2
-
c1r2
-
c2r2
+
+
+
diff --git a/local/cloud.svg b/local/cloud.svg new file mode 100644 index 0000000..89291c5 --- /dev/null +++ b/local/cloud.svg @@ -0,0 +1,10 @@ + + + +Created with Fabric.js 5.3.0 + + + + + + \ No newline at end of file diff --git a/script.js b/script.js index b5177b2..1dda0a8 100644 --- a/script.js +++ b/script.js @@ -1,13 +1,13 @@ // constants const colours = { // can sub in pictures later instead of colours - '0': 'gray', - '1': 'red', - '2': 'blue' + '0': 'https://mario.wiki.gallery/images/thumb/7/7f/Question_Block_-_Nintendo_JP_website.png/1200px-Question_Block_-_Nintendo_JP_website.png', + '1': 'https://mir-s3-cdn-cf.behance.net/project_modules/max_1200/318ab411192999.560f386fd4c56.jpg', + '2': 'https://mir-s3-cdn-cf.behance.net/project_modules/max_1200/79648a11192999.560f387135961.jpg' }; const players = { - '1': 'X', - '2': 'O' + '1': 'Mario', + '2': 'Luigi' }; // variables let board; // 3x3 board @@ -27,6 +27,7 @@ replay.addEventListener('click', startGame); startGame(); function startGame() { + // made them KV objects, because I love pain board = { 'r0': [0, 0, 0], 'r1': [0, 0, 0], @@ -61,7 +62,12 @@ function renderBoard() { const cellId = `c${j}r${i}`; const cellElement = document.getElementById(cellId); const cellValue = board[`r${i}`][j] - cellElement.style.backgroundColor = colours[cellValue]; + //cellElement.style.backgroundColor = colours[cellValue]; + console.log(`url("${colours[cellValue]}");`) + cellElement.style.backgroundImage = `url("${colours[cellValue]}")`; + cellElement.style.backgroundRepeat = `no-repeat`; + cellElement.style.backgroundSize = `auto 100%`; + cellElement.style.backgroundPosition = `center center`; } } } @@ -69,13 +75,14 @@ function renderBoard() { function renderMessage() { while (winner === 0) { - gameMessage.innerHTML = `Player ${player}'s Turn!`; + gameMessage.innerHTML = `${players[player]}'s Turn!`; return; } if (winner === 3) { gameMessage.innerHTML = 'Tie!'; + replay.classList.remove('hide'); } else if (winner === 1 || winner === 2) { - gameMessage.innerHTML = `Player ${winner} Wins!`; + gameMessage.innerHTML = `${players[winner]} Wins!`; replay.classList.remove('hide'); } } @@ -83,9 +90,9 @@ function renderMessage() { function handlePlay(event){ // easier to access for later loops const numberOfRows = Object.keys(board).length; - console.log("🚀 ~ file: script.js:78 ~ handlePlay ~ numberOfRows:", numberOfRows) + // console.log("🚀 ~ file: script.js:78 ~ handlePlay ~ numberOfRows:", numberOfRows) const numberOfColumns = board[Object.keys(board)[0]].length; - console.log("🚀 ~ file: script.js:80 ~ handlePlay ~ numberOfColumns:", numberOfColumns) + // console.log("🚀 ~ file: script.js:80 ~ handlePlay ~ numberOfColumns:", numberOfColumns) // set rowIndex to the index ( [0] or [1] or [2] ) of the clicked item (div) // guard against misclick, the below code will return -1 if you clicked on not the div. also prevent input if game won or tied const columnIndex = boardOptions.indexOf(event.target); @@ -101,6 +108,7 @@ function handlePlay(event){ if (board[`${row}`][col] === 0) { board[`${row}`][col] = player; player = player == 1 ? 2 : 1; + event.target.classList.remove('active'); //console.log('player after = ' + player) } @@ -110,6 +118,7 @@ function handlePlay(event){ } function getWinner(row, col, numberOfRows, numberOfColumns) { + checkTie(numberOfRows); checkHorizontals(row, col, numberOfRows, numberOfColumns); checkVerticals(row, col, numberOfRows, numberOfColumns); checkDiagonals(row, col, numberOfRows, 1); @@ -161,6 +170,16 @@ function checkDiagonals(row, col, nOR, columnOffset) { } } +function checkTie(nOR) { + let noSpots = 0; + for (let i = 0; i < nOR; i++) { + if (board[`r${i}`].some((element) => element == 0) == false) { + noSpots++; + } + } + if (noSpots == 3) winner = 3; +} + // function countAdjacents(row, col, rowOffset, colOffset) { // let currentPlayer = board[`${row}`][col]; // console.log('current player' + currentPlayer); diff --git a/style.css b/style.css index 1a65791..d1b0ac0 100644 --- a/style.css +++ b/style.css @@ -1,15 +1,22 @@ body { height: 100vh; margin: 0; - font-family: 'Cormorant Garamond', serif; + font-family: 'Super Mario 256', sans-serif; + color: black; display: flex; flex-direction: column; justify-content: center; align-items: center; + background-color: rgb(78, 197, 248); + background-image: url(local/cloud.svg); + background-position: 50% 27%; + background-repeat: no-repeat; + background-size: 130vmin; } header { - font-size: 5vmin; + font-size: 8vmin; + margin-top: 10vmin; } #board { @@ -22,28 +29,42 @@ header { #board > div { margin: auto; - padding: 3vmin; - width: 5vmin; - height: 5vmin; - background-color: green; + padding: 0; + width: 10vmin; + height: 10vmin; + border: 1vmin transparent solid; text-align: center; } -#board >div:hover { - background-color: lightgray; +#board >div.active:hover { + border: rgba(76, 76, 76, 0.397) 1vmin solid; + border-radius: 1vmin; } -#board > div.x { - background-color: red; +h1 { + margin: 1vmin auto; + font-size: 5vmin; } -#board > div.o { - background-color: blue; +h2 { + font-size: 4vmin; + margin-bottom: .5vmin; } -h1 { - margin: 1vmin auto; +button { + size: 6vmin; + background-color: rgb(78, 197, 248); + font-family: 'Super Mario 256', sans-serif; + font-size: 2vmin; + padding: 1.5vmin; + border-radius: 1vmin; } button.hide { visibility: hidden; -} \ No newline at end of file +} + +#mario{ + font-size: 2vmin; + margin-bottom: 1vmin; + margin-top: 0; +} From 73367c72bad7085df22f92ddcefe19babf347b02 Mon Sep 17 00:00:00 2001 From: Abay Date: Mon, 2 Oct 2023 01:16:32 -0600 Subject: [PATCH 6/7] everything works now --- script.js | 19 +++++++++++++++---- style.css | 8 +++++++- 2 files changed, 22 insertions(+), 5 deletions(-) diff --git a/script.js b/script.js index 1dda0a8..c34c408 100644 --- a/script.js +++ b/script.js @@ -6,14 +6,16 @@ const colours = { // can sub in pictures later instead of colours }; const players = { - '1': 'Mario', - '2': 'Luigi' + '1': ['Mario', 0], + '2': ['Luigi', 0] }; // variables let board; // 3x3 board let player; // 1 - player1, 2 - player 2, 0 - blank space let winner; // 0 - no winners, 1 - player1 wins, 2 - player2 wins, 3 - tie let gameCount = 0; // count games completed +let marioWins = 0; +let luigiWins = 0; // cache const replay = document.getElementById('replay'); const gameMessage = document.getElementById('message'); @@ -50,6 +52,14 @@ function render() { renderGameCount(); renderBoard(); renderMessage(); + renderWins(); +} + +function renderWins() { + const mario = document.getElementById('mario'); + const luigi = document.getElementById('luigi'); + mario.innerHTML = `${players['1'][0]}'s wins: ${players['1'][1]}`; + luigi.innerHTML = `${players['2'][0]}'s wins: ${players['2'][1]}`; } function renderGameCount() { @@ -75,14 +85,15 @@ function renderBoard() { function renderMessage() { while (winner === 0) { - gameMessage.innerHTML = `${players[player]}'s Turn!`; + gameMessage.innerHTML = `${players[player][0]}'s Turn!`; return; } if (winner === 3) { gameMessage.innerHTML = 'Tie!'; replay.classList.remove('hide'); } else if (winner === 1 || winner === 2) { - gameMessage.innerHTML = `${players[winner]} Wins!`; + gameMessage.innerHTML = `${players[winner][0]} Wins!`; + players[winner][1] ++; replay.classList.remove('hide'); } } diff --git a/style.css b/style.css index d1b0ac0..8bb5ea2 100644 --- a/style.css +++ b/style.css @@ -63,7 +63,13 @@ button.hide { visibility: hidden; } -#mario{ +#mario { + font-size: 2vmin; + margin-bottom: 1vmin; + margin-top: 0; +} + +#luigi { font-size: 2vmin; margin-bottom: 1vmin; margin-top: 0; From a9fb0b1211c550472809f1c838c8c009310ce2c6 Mon Sep 17 00:00:00 2001 From: Abay Date: Mon, 2 Oct 2023 12:09:21 -0600 Subject: [PATCH 7/7] fixed hover hiding on clicked spots --- script.js | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/script.js b/script.js index c34c408..975e3f7 100644 --- a/script.js +++ b/script.js @@ -39,6 +39,13 @@ function startGame() { winner = 0; player = goFirst(); replay.classList.add('hide'); + for (let i = 0; i < Object.keys(board).length; i++) { + for (let j = 0; j < board[`r${i}`].length; j++) { + const cellId = `c${j}r${i}`; + const cellElement = document.getElementById(cellId); + cellElement.classList.add('active'); + } + } render(); }