made css more dynamic for mobile

author: JP Appel <jeanpierre.appel01@gmail.com> 2023-10-25 23:52:32 -0700
committer: JP Appel <jeanpierre.appel01@gmail.com> 2023-10-25 23:52:32 -0700
commit: 99a1c02c80ee2d1154c163644a4e341aba4db192 (patch)
tree: bc7fa105e78f7d6b27fa67335723b781400a1e5d
parent: 33680b9a238ffda3a2efca654591e53e423b310f (diff)
4 files changed, 92 insertions, 18 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>
diff --git a/site/index.html b/site/index.html
index 8043b0d..1aef62e 100644
--- a/site/index.html
+++ b/site/index.html
@@ -4,10 +4,10 @@
         <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>Exploring Toggle Games on Graphs</title>
     </head>
     <body>
-        <h1>Toggle</h1>
+        <h1>Exploring Toggle Games on Graphs</h1>
         <nav>
             <a href="game"><button>Heat Toggle Demo</button></a>
         </nav>
@@ -15,17 +15,17 @@
             <section id="history">
                 <h2>History of Toggle</h2>
                 <p>
-                Lights Out<b>TM</b> is a commercial one-player game that consists of sequentially turning lights on or off on a 5 × 5 array. The game can be represented as a 5 × 5 lattice with vertex labels 1 (on) and 0 (off). A move involves toggling the 0/1 status of a vertex as well as the 0/1 status of all its orthogonal neighbors. A complete strategy for this game is detailed by Anderson and Feil in <a href="#">Turning Lights Out with Linear Algebra</a>.
+                Lights Out&#8482; is a commercial one-player game that consists of sequentially turning lights on or off on a 5 × 5 array. The game can be represented as a 5 × 5 lattice with vertex labels 1 (on) and 0 (off). A move involves toggling the 0/1 status of a vertex as well as the 0/1 status of all its orthogonal neighbors. A complete strategy for this game is detailed by Anderson and Feil in <a href="#">Turning Lights Out with Linear Algebra</a>.
                 </p>
                 <p>
-                    <b style="color">Fiorint Et. Al</b>
+                    <b>Fiorint Et. Al</b>
                 </p>
             </section>
             <section id="information">
                 <h2>Toggle Information</h2>
                 <h3>Abstract</h3>
                 <p>
-                <i>In the commercial one-player game Lights Out<b>TM</b> a grid of lights is randomly generated with some lights on and some lights off. The player can press a light to flip its on/off state as well as the state of its neighbors. Toggle seeks to transform Lights OutTM into a variety of impartial two-player games. Two players take turns toggling the on/off state of lights in an attempt to leave the other player with no available legal moves. We analyze Toggle on various finite simple graphs and use impartial game theory to determine which player has a winning strategy given an initial Toggle configuration. Finally, we prove that determining the winning player given an arbitrary Toggle configuration is PSpace-complete.</i>
+                <i>In the commercial one-player game Lights Out&#8482; a grid of lights is randomly generated with some lights on and some lights off. The player can press a light to flip its on/off state as well as the state of its neighbors. Toggle seeks to transform Lights OutTM into a variety of impartial two-player games. Two players take turns toggling the on/off state of lights in an attempt to leave the other player with no available legal moves. We analyze Toggle on various finite simple graphs and use impartial game theory to determine which player has a winning strategy given an initial Toggle configuration. Finally, we prove that determining the winning player given an arbitrary Toggle configuration is PSpace-complete.</i>
                 </p>
             </section>
         </main>
diff --git a/site/style.css b/site/style.css
index 508ad61..cb82f1e 100644
--- a/site/style.css
+++ b/site/style.css
@@ -14,22 +14,34 @@ body {
     flex-direction: column;
 }
 
+main {
+    width: 80vw;
+}
+
 #game {
     display: flex;
     flex-direction: row;
+    flex-wrap: wrap;
+    row-gap: 1vh;
 }
 
 .vertex {
     padding: 1em;
-    background-color: var(--hi-color);
+    /* padding: 1em; */
+    background-color: green;
     border-radius: 50%;
+    width: 1%;
 }
 
 .vertex.off {
     background-color: yellow;
 }
 
-.vertex:hover {
+.vertex.untoggleable:not(.off) {
+    background-color: orange;
+}
+
+.vertex:hover:not(.off):not(.untoggleable){
     filter: brightness(150%);
 }
 
@@ -44,6 +56,11 @@ section#optionsScreen {
     justify-content: space-between;
 }
 
+section#gameScreen {
+    display: flex;
+    flex-direction: column;
+}
+
 section.screen {
     animation: fadein 1s linear;
 }
@@ -55,6 +72,24 @@ button {
     border: none;
 }
 
+
+#key {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: start;
+    flex-wrap: wrap;
+}
+
+.keyitem {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 0 1em;
+    max-width: 33%;
+    text-align: center;
+}
+
 button:hover {
     filter: brightness(120%);
 }
author	JP Appel <jeanpierre.appel01@gmail.com>	2023-10-25 23:52:32 -0700
committer	JP Appel <jeanpierre.appel01@gmail.com>	2023-10-25 23:52:32 -0700
commit	99a1c02c80ee2d1154c163644a4e341aba4db192 (patch)
tree	bc7fa105e78f7d6b27fa67335723b781400a1e5d
parent	33680b9a238ffda3a2efca654591e53e423b310f (diff)