2 files changed, 50 insertions, 11 deletions
diff --git a/site/game/game.js b/site/game/game.js
index d0bb4c6..bd88c35 100644
--- a/site/game/game.js
+++ b/site/game/game.js
@@ -3,8 +3,9 @@ const test_bttn = document.getElementById("test_bttn");
 const optionsScreen = document.getElementById("optionsScreen");
 const gameScreen = document.getElementById("gameScreen");
 const gameContainer = document.getElementById("game");
+const new_game = document.getElementById('new-game');
 
-const base_url = "http://localhost:9090/toggle/game"
+const base_url = "https://jpappel.xyz/toggle/game"
 
 const testGame = {
     size: 7,
@@ -17,6 +18,7 @@ const testGame = {
 }
 
 function createGame(length){
+    //TODO: get request of game from server
     const game = {
         size: length,
         finished: false,
@@ -77,7 +79,7 @@ function toggleVert(e){
     gameContainer.dispatchEvent(new Event("vertToggle"))
 }
 
-function renderGame(game, verticies){
+function renderGame(game, vertices){
     //synchronizes vertices in dom with game object
     game.board.forEach((on, index) => {
         let vertex = verticies[index];
@@ -90,10 +92,12 @@ function renderGame(game, verticies){
             vertex.removeEventListener('click', toggleVert);
         }
     });
+    setUntoggleable(vertices);
 }
 
 function updateGame(game, vertices){
     //synchronizes game object with vertices from dom
+    setUntoggleable(vertices);
     vertices.forEach((vertex, index) => {
         game.board[index] = !vertex.classList.contains('off');
     });
@@ -103,6 +107,25 @@ function displayMessage(text){
 
 }
 
+function setUntoggleable(vertices){
+    vertices.forEach((vertex) => {
+        const prev = vertex.previousSibling;
+        const next = vertex.nextSibling;
+        let heat = 0
+
+        if(prev){
+            heat += (prev.classList.contains('off')) ? 0 : 1 ;
+        }
+        if(next){
+            heat += (next.classList.contains('off')) ? 0 : 1 ;
+        }
+        if(heat <= 0){
+            vertex.classList.add('untoggleable');
+            vertex.removeEventListener('click', toggleVert);
+        }
+    });
+}
+
 async function sendGame(game){
     let response = await fetch(`${base_url}/play`, {
         method: "POST",
@@ -116,17 +139,13 @@ async function sendGame(game){
     return response.json()
 }
 
-async function gameLoop(){
-
-}
-
 function startGame(){
     //const length = order.valueAsNumber;
     //let game = createGame(length);
     //game = sendGame(game);
     //window.alert("Game Play Not implemented yet")
     //
-    const [game, vertices] = createGame(7);
+    const [game, vertices] = createGame(20);
     toggle_screen();
     gameContainer.addEventListener("vertToggle", () => {
         updateGame(game, vertices);
diff --git a/site/game/index.html b/site/game/index.html
index 4f47476..91cbac1 100644
--- a/site/game/index.html
+++ b/site/game/index.html
@@ -4,27 +4,47 @@
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <link rel="stylesheet" href="../style.css">
-        <title>Toggle</title>
+        <title>Heat Toggle Demo</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>
+                    <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>
+                <div>
+                    <label for="computer">Play against the optimal strategy (you will lose!)</label>
+                    <input type="checkbox" name="computer"></input>
                 </div>
                 <button onclick="startGame()">Play</button>
             </section>
             <section id="gameScreen" class="screen inactive">
                 <h2>Game</h2>
+                <div id="key">
+                    <div class="keyitem">
+                    <div class="vertex"></div>
+                    On Vertex
+                    </div>
+                    <div class="keyitem">
+                        <div class="vertex untoggleable"></div>
+                        Unplayable Vertex
+                    </div>
+                    <div class="keyitem">
+                        <div class="vertex off"></div>
+                        Off Vertex
+                    </div>
+                </div>
+                <hr />
                 <div id="game">Loading...</div>
+                <hr />
+                <button id="new-game">New Game</button>
                 <script src="game.js"></script>
             </section>
         </main>