2 files changed, 115 insertions, 0 deletions
diff --git a/site/game/game.js b/site/game/game.js
new file mode 100644
index 0000000..ee52509
--- /dev/null
+++ b/site/game/game.js
@@ -0,0 +1,83 @@
+const order = document.getElementById("graphOrder");
+const test_bttn = document.getElementById("test_bttn");
+const optionsScreen = document.getElementById("optionsScreen");
+const gameScreen = document.getElementById("gameScreen");
+const gameContainer = document.getElementById("game");
+
+const testGame = {
+    size: 7,
+    finished: false,
+    board: Array(7).fill(true),
+    turn: 0,
+    version: "0.0.0",
+    human_turn: false,
+    winner: ""
+}
+
+function createGame(length){
+    const game = {
+        size: length,
+        finished: false,
+        board: Array(length).fill(true),
+        turn: 0,
+        version: "0.0.0",
+        human_turn: false,
+        winner: ""
+    }
+    //TODO: create game in DOM
+    gameContainer.innerText = ""
+    game.board.forEach((status) => {
+        let light = document.createElement("div");
+        light.classList.add('vertex')
+        gameContainer.appendChild(light)
+    })
+    return game;
+}
+
+function toggle_screen(){
+    optionsScreen.classList.toggle('inactive');
+    gameScreen.classList.toggle('inactive');
+    renderGame(testGame)
+}
+
+async function humanPlay(game){
+
+}
+
+function renderGame(game){
+    //TODO: update game in DOM
+}
+
+function displayMessage(text){
+
+}
+
+async function sendGame(game){
+    let response = await fetch("https://jpappel.xyz/toggle/query", {
+        method: "POST",
+        body: JSON.stringify(game),
+        headers: {
+            "Accept": "application/json",
+            "Content-Type": "application/json; charset=UTF-8"
+        }
+    })
+    return response.json()
+}
+
+async function gameLoop(){
+
+}
+
+function playGame(){
+    //const length = order.valueAsNumber;
+    //let game = createGame(length);
+    //game = sendGame(game);
+    //window.alert("Game Play Not implemented yet")
+    const game = createGame(7)
+    renderGame(game)
+    //while(!game.finished){
+    //    humanPlay(game)
+    //   // game.nextTurn(game.turn);
+    //}
+    // displayMessage(game.result);
+}
diff --git a/site/game/index.html b/site/game/index.html
new file mode 100644
index 0000000..d8f7c8a
--- /dev/null
+++ b/site/game/index.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <link rel="stylesheet" href="../style.css">
+        <title>Toggle</title>
+    </head>
+    <body>
+        <h1>Heat Toggle Demo</h1>
+        <nav>
+            <a href=".."><button>Home</button></a>
+        </nav>
+        <p>Try to beat the computer :)</p>
+        <button id="test_bttn" onclick="toggle_screen()">Test Button</button>
+        <main>
+            <section id="optionsScreen" class="screen">
+                <h2>Options</h2>
+                <div>
+                <label for="graphOrder">Select a number of vertices for a path:</label>
+                <input type="number" name="graphOrder" id="graphOrder" defaultValue=7 min=1 max=30 placeholder="Enter a value (1-30)"></input>
+                </div>
+                <button onclick="playGame()">Play</button>
+            </section>
+            <section id="gameScreen" class="screen inactive">
+                <h2>Game</h2>
+                <div id="game">Loading...</div>
+                <script src="game.js"></script>
+            </section>
+        </main>
+    </body>
+</html>