diff options
| -rw-r--r-- | site/game/game.js (renamed from site/game.js) | 0 | ||||
| -rw-r--r-- | site/game/index.html | 32 | ||||
| -rw-r--r-- | site/index.html | 31 | ||||
| -rw-r--r-- | site/style.css | 7 |
4 files changed, 53 insertions, 17 deletions
diff --git a/site/game.js b/site/game/game.js index ee52509..ee52509 100644 --- a/site/game.js +++ b/site/game/game.js 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 { |