WDI-SEA · MelanieWinter · Oct 1, 2023 · Oct 1, 2023 · Oct 1, 2023 · Oct 1, 2023
diff --git a/index.html b/index.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="en">
+<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=Rubik+Mono+One&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="styles.css">
+
+    <title>Emoji Tic-Tac-Toe</title>
+</head>
+<body>
+
+    <header>TIC-<font color="dodgerblue">TAC</font>-TOE</header>
+
+    <h1>X'S TURN</h1>
+
+    <section id="board">
+        <div id="c0r2"></div>
+        <div id="c1r2"></div>
+        <div id="c2r2"></div>
+
+        <div id="c0r1"></div>
+        <div id="c1r1"></div>
+        <div id="c2r1"></div>
+
+        <div id="c0r0"></div>
+        <div id="c1r0"></div>
+        <div id="c2r0"></div>
+
+
+    </section>
+
+    <button>PLAY AGAIN</button>
+
+    <script src="main.js"></script>
+</body>
+</html>
diff --git a/main.js b/main.js
@@ -0,0 +1,134 @@
+/*----- constants -----*/
+const MARKERS = {
+    '0': null,
+    '1': 'X',
+    '-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
+let winner;
+let tieGame;
+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;
+    tieGame = catsGame();
+    checkWin(colIdx, rowIdx);
+    render();
+}
+
+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
+        }
+    }
+}
+
+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++) {
+        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();
+}
+
+function renderBoard() {
+    board.forEach(function(colArr, colIdx) {
+        // 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);
+        // Display '🙅‍♀️' for 1 and '🙆‍♂️' for -1
+        cellEl.innerHTML = cellVal === 1 ? '🙅‍♀️' : cellVal === -1 ? '🙆‍♂️' : ''
+        });
+    });
+}
+
+function renderMessage() {
+    if (winner) {
+        messageEl.innerHTML = `${MARKERS[winner]} Wins! 🙅‍♀️: ${WINCOUNT['1']} 🙆‍♂️: ${WINCOUNT['-1']}`;
+    } else if (tieGame){ 
+        messageEl.innerHTML = "🐱 It's a tie! 🐱";
+    } else {
+        messageEl.innerHTML = `${MARKERS[turn]}'s Turn`;
+    }
+}
+
diff --git a/styles.css b/styles.css
@@ -0,0 +1,66 @@
+* {
+    box-sizing: border-box;
+    font-family: 'Rubik Mono One', sans-serif;
+}
+
+body {
+    height: 100vh;
+    margin: 0;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
+
+header {
+    font-size: 5vmin;
+    color: darkviolet;
+    letter-spacing: 1vmin;
+
+}
+
+h1 {
+    color: dimgray;
+    font-size: 3vmin;
+    margin-top: 1vmin;
+}
+
+#board {
+    display: grid;
+    grid-template-columns: repeat(3, 20vmin);  
+    grid-template-rows: repeat(3, 20vmin);
+    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: 2vmin;
+    border: 0.1vmin solid dimgrey;
+    color: dimgray;;
+}
+
+button:hover {
+    color: white;
+    background-color: darkviolet;
+    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;
+}