Set up skeleton js for console vsn of game

toduyemi · Sep 29, 2023 · f0efe68 · f0efe68
1 parent f973c95
commit f0efe68
Show file tree

Hide file tree

Showing 3 changed files with 150 additions and 0 deletions.
diff --git a/app.js b/app.js
@@ -0,0 +1,90 @@
+function Gameboard() {
+    const gameboard = [
+        [null, null, null],
+        [null, null, null],
+        [null, null, null]
+    ];
+
+    gameboard.forEach(row => {
+        row.forEach(square => {
+            square = SquareObject();
+        });
+    });
+
+    function SquareObject() {
+        const square = {};
+        square.value = null;
+        square.tokenCheck = false;
+
+        const addToken = token => {
+            if (!square.tokenCheck) {
+                return null;
+            }
+
+            square.value = token;
+            square.tokenCheck = true;
+        }
+
+        const getValue = () => square.value;
+
+        return { addToken, getValue };
+    }
+
+    const dropToken = (row, col, player) => {
+        if (!gameboard[row][col].addToken(player.token)) {
+            return null;
+        }
+    }
+
+    const getBoard = () => gameboard;
+
+    const printBoard = () => {
+        currentBoard = gameboard.map(row => row.map(square => SquareObject.getValue()));
+    }
+
+
+    return { getBoard, printBoard, dropToken };
+};
+
+const Player = (name, token) => {
+    const player = {};
+    player.name = name;
+    player.token = token;
+
+    return player;
+
+}
+
+
+const GameController = (function () {
+    const PlayerOne = Player("PlayerOne", "x");
+    const PlayerTwo = Player("PlayerTwo", "o");
+
+    let activePlayer;
+
+    const game = Gameboard();
+
+    const switchPlayer = () => {
+        activePlayer = activePlayer !== PlayerTwo ? PlayerOne : PlayerTwo;
+    }
+
+    const getActivePlayer = () => activePlayer;
+
+    const printNewRound = () => {
+        game.printBoard();
+        console.log(`${getActivePlayer().name}'s turn.`)
+    }
+
+    const playRound = (row, col) => {
+        game.dropToken(row, col, activePlayer.token);
+        console.log(`Dropping ${getActivePlayer().token} onto square ${row}${col}.`)
+
+        //win logic here
+
+        switchPlayer();
+        printNewRound();
+    }
+
+    printNewRound;
+    return { playRound, getActivePlayer };
+})();
diff --git a/index.html b/index.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <script src="./app.js" defer></script>
+    <link rel="stylesheet" href="style.css">
+    <title>tic-tac-toe</title>
+</head>
+
+<body>
+    <div class="board-container">
+        <div class="grid-row">
+            <div class="grid-square"></div>
+            <div class="grid-square"></div>
+            <div class="grid-square"></div>
+        </div>
+        <div class="grid-row">
+            <div class="grid-square"></div>
+            <div class="grid-square"></div>
+            <div class="grid-square"></div>
+        </div>
+        <div class="grid-row">
+            <div class="grid-square"></div>
+            <div class="grid-square"></div>
+            <div class="grid-square"></div>
+        </div>
+    </div>
+
+</body>
+
+</html>
diff --git a/style.css b/style.css
@@ -0,0 +1,26 @@
+body {
+    --board-size: 800px;
+}
+
+div {}
+
+.board-container {
+    height: var(--board-size);
+    width: var(--board-size);
+
+    display: flex;
+    flex-direction: column;
+
+    border: 3px solid black;
+}
+
+.grid-row {
+    display: flex;
+    flex: 0 0 1;
+}
+
+.grid-square {
+    height: calc(var(--board-size)/3);
+    width: calc(var(--board-size)/3);
+    border: .5px solid black;
+}