2 files changed, 77 insertions, 17 deletions

diff --git a/site/game/game.js b/site/game/game.js
index ee52509..d0bb4c6 100644
--- a/site/game/game.js
+++ b/site/game/game.js
@@ -4,6 +4,8 @@ const optionsScreen = document.getElementById("optionsScreen");
 const gameScreen = document.getElementById("gameScreen");
 const gameContainer = document.getElementById("game");
 
+const base_url = "http://localhost:9090/toggle/game"
+
 const testGame = {
     size: 7,
     finished: false,
@@ -24,28 +26,77 @@ function createGame(length){
         human_turn: false,
         winner: ""
     }
-    //TODO: create game in DOM
+    const verticies = []
     gameContainer.innerText = ""
-    game.board.forEach((status) => {
-        let light = document.createElement("div");
-        light.classList.add('vertex')
-        gameContainer.appendChild(light)
-    })
-    return game;
+
+    game.board.forEach(() => {
+        let vertex = document.createElement("div");
+        vertex.classList.add('vertex');
+        vertex.addEventListener('click', toggleVert );
+
+        gameContainer.appendChild(vertex);
+        verticies.push(vertex);
+    });
+    return [game, verticies];
+}
+
+function getGame(length){
+    return fetch(`${base_url}/new?size=${length}`, {
+        method: "GET",
+        mode: "cors",
+        cache: "no-cache",
+        headers: {
+            'Access-Control-Allow-Origin': base_url
+        }
+    });
 }
 
 function toggle_screen(){
     optionsScreen.classList.toggle('inactive');
     gameScreen.classList.toggle('inactive');
-    renderGame(testGame)
 }
 
-async function humanPlay(game){
+function switchVert(vertex){
+    vertex.classList.toggle("off");
+    if(vertex.classList.contains("off"))
+        vertex.removeEventListener('click', toggleVert);
+    else
+        vertex.addEventListener('click', toggleVert);
+}
+
+function toggleVert(e){
+    const vertex = e.target;
+    const prev = vertex.previousSibling;
+    const next = vertex.nextSibling;
 
+    vertex.classList.add("off")
+    vertex.removeEventListener('click', toggleVert);
+    if(prev) switchVert(prev);
+    if(next) switchVert(next);
+
+    gameContainer.dispatchEvent(new Event("vertToggle"))
+}
+
+function renderGame(game, verticies){
+    //synchronizes vertices in dom with game object
+    game.board.forEach((on, index) => {
+        let vertex = verticies[index];
+        if(on){
+            vertex.classList.remove('off');
+            vertex.addEventListener('click', toggleVert);
+        }
+        else {
+            vertex.classList.add('off');
+            vertex.removeEventListener('click', toggleVert);
+        }
+    });
 }
 
-function renderGame(game){
-    //TODO: update game in DOM
+function updateGame(game, vertices){
+    //synchronizes game object with vertices from dom
+    vertices.forEach((vertex, index) => {
+        game.board[index] = !vertex.classList.contains('off');
+    });
 }
 
 function displayMessage(text){
@@ -53,7 +104,7 @@ function displayMessage(text){
 }
 
 async function sendGame(game){
-    let response = await fetch("https://jpappel.xyz/toggle/query", {
+    let response = await fetch(`${base_url}/play`, {
         method: "POST",
         body: JSON.stringify(game),
         headers: {
@@ -61,6 +112,7 @@ async function sendGame(game){
             "Content-Type": "application/json; charset=UTF-8"
         }
     })
+    gameContainer.dispatchEvent(new Event("recieveGame"));
     return response.json()
 }
 
@@ -68,13 +120,21 @@ async function gameLoop(){
 
 }
 
-function playGame(){
+function startGame(){
     //const length = order.valueAsNumber;
     //let game = createGame(length);
     //game = sendGame(game);
     //window.alert("Game Play Not implemented yet")
-    const game = createGame(7)
-    renderGame(game)
+    //
+    const [game, vertices] = createGame(7);
+    toggle_screen();
+    gameContainer.addEventListener("vertToggle", () => {
+        updateGame(game, vertices);
+        // sendGame(game);
+    });
+    gameContainer.addEventListener("recieveGame", () => {
+        renderGame(game, vertices);
+    });
     //while(!game.finished){
     //    humanPlay(game)
     //   // game.nextTurn(game.turn);
diff --git a/site/game/index.html b/site/game/index.html
index d8f7c8a..4f47476 100644
--- a/site/game/index.html
+++ b/site/game/index.html
@@ -12,7 +12,7 @@
             <a href=".."><button>Home</button></a>
         </nav>
         <p>Try to beat the computer :)</p>
-        <button id="test_bttn" onclick="toggle_screen()">Test Button</button>
+        <!-- <button id="test_bttn" onclick="toggle_screen()">Test Button</button> -->
         <main>
             <section id="optionsScreen" class="screen">
                 <h2>Options</h2>
@@ -20,7 +20,7 @@
                 <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>
+                <button onclick="startGame()">Play</button>
             </section>
             <section id="gameScreen" class="screen inactive">
                 <h2>Game</h2>