2 files changed, 82 insertions, 0 deletions
diff --git a/site/game.js b/site/game.js
new file mode 100644
index 0000000..4a5eff9
--- /dev/null
+++ b/site/game.js
@@ -0,0 +1,56 @@
+const order = document.getElementById("graphOrder");
+//TODO: read in player's name
+
+
+function foo(){
+    console.log(order.valueAsNumber);
+}
+
+function getNimber(length){
+    //TODO: copy from fast_p_sage
+    //TODO: put in seperate file
+}
+
+function createGame(length){
+    const game = {
+        board: Array(length).fill(1),
+        turn: getNimber(length) > 0 ? "computer" : "human",
+        finished: false,
+        result: "In Progress...",
+        //FIXME: turn shouldn't be an argument, 
+        //FIXME: human and computer Play needs the game as an argument
+        nextTurn: (turn) => {
+            if(turn === "computer")
+                computerPlay()
+            else
+                humanPlay()
+        }
+    }
+    //TODO: create game in DOM
+    return game;
+}
+
+function computerPlay(game){
+
+}
+
+function humanPlay(game){
+
+}
+
+function renderGame(game){
+    //TODO: update game in DOM
+}
+
+function displayMessage(text){
+
+}
+
+function playGame(){
+    const length = order.valueAsNumber;
+    const game = createGame(length);
+    while(!game.finished){
+        game.nextTurn(game.turn);
+    }
+    displayMessage(game.result);
+}
diff --git a/site/index.html b/site/index.html
new file mode 100644
index 0000000..24d50d2
--- /dev/null
+++ b/site/index.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>Toggle Online</title>
+    </head>
+    <body>
+        <h1>Toggle Online</h1>
+        Try to beat the computer :)
+        <nav></nav>
+        <button onclick="foo()">Test</button>
+        <main>
+            <section id="options" class="screen">
+                <h2>Options</h2>
+                <label for="graphOrder">Select a number of vertices for a path (0-100):</label>
+                <input type="number" name="graphOrder" id="graphOrder" defaultValue=7 min=0 max=100></input>
+            </section>
+            <section id="game" class="screen">
+                <h2>Game</h2>
+
+                <script src="game.js"></script>
+            </section>
+        </main>
+    </body>
+</html>