From 846ff147f9e4282991c9042819173c7264a614fc Mon Sep 17 00:00:00 2001
From: JP Appel <jeanpierre.appel01@gmail.com>
Date: Wed, 25 Oct 2023 13:47:29 -0400
Subject: separated toggle info page from game page

---
 site/game.js         | 83 ----------------------------------------------------
 site/game/game.js    | 83 ++++++++++++++++++++++++++++++++++++++++++++++++++++
 site/game/index.html | 32 ++++++++++++++++++++
 site/index.html      | 31 ++++++++++++--------
 site/style.css       |  7 ++---
 5 files changed, 136 insertions(+), 100 deletions(-)
 delete mode 100644 site/game.js
 create mode 100644 site/game/game.js
 create mode 100644 site/game/index.html

diff --git a/site/game.js b/site/game.js
deleted file mode 100644
index ee52509..0000000
--- a/site/game.js
+++ /dev/null
@@ -1,83 +0,0 @@
-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/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>
diff --git a/site/index.html b/site/index.html
index c9ab08a..8043b0d 100644
--- a/site/index.html
+++ b/site/index.html
@@ -7,21 +7,26 @@
         <title>Toggle</title>
     </head>
     <body>
-        <h1>Heat Toggle Demo</h1>
-        <p>Try to beat the computer :)</p>
-        <nav></nav>
-        <button id="test_bttn" onclick="toggle_screen()">Test Button</button>
+        <h1>Toggle</h1>
+        <nav>
+            <a href="game"><button>Heat Toggle Demo</button></a>
+        </nav>
         <main>
-            <section id="optionsScreen" class="screen">
-                <h2>Options</h2>
-                <label for="graphOrder">Select a number of vertices for a path (1-30):</label>
-                <input type="number" name="graphOrder" id="graphOrder" defaultValue=7 min=1 max=30></input>
-                <button onclick="playGame()">Play</button>
+            <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>.
+                </p>
+                <p>
+                    <b style="color">Fiorint Et. Al</b>
+                </p>
             </section>
-            <section id="gameScreen" class="screen inactive">
-                <h2>Game</h2>
-                <div id="game">Loading...</div>
-                <script src="game.js"></script>
+            <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>
+                </p>
             </section>
         </main>
     </body>
diff --git a/site/style.css b/site/style.css
index 788f454..97d5ae2 100644
--- a/site/style.css
+++ b/site/style.css
@@ -29,12 +29,11 @@ div.vertex.off {
     background-color: var(--fg-color);
 }
 
-section#options {
+section#optionsScreen {
     display: flex;
-    align-items: center;
-    justify-content: center;
-    align-items: center;
     flex-direction: column;
+    /* align-items: center; */
+    justify-content: space-between;
 }
 
 section.screen {
-- 
cgit v1.2.3