From 99a1c02c80ee2d1154c163644a4e341aba4db192 Mon Sep 17 00:00:00 2001 From: JP Appel Date: Wed, 25 Oct 2023 23:52:32 -0700 Subject: made css more dynamic for mobile --- site/game/game.js | 33 ++++++++++++++++++++++++++------- site/game/index.html | 28 ++++++++++++++++++++++++---- site/index.html | 10 +++++----- site/style.css | 39 +++++++++++++++++++++++++++++++++++++-- 4 files changed, 92 insertions(+), 18 deletions(-) (limited to 'site') 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 @@ - Toggle + Heat Toggle Demo

Heat Toggle Demo

-

Try to beat the computer :)

Options

- - + + +
+
+ +

Game

+
+
+
+ On Vertex +
+
+
+ Unplayable Vertex +
+
+
+ Off Vertex +
+
+
Loading...
+
+
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 @@ - Toggle + Exploring Toggle Games on Graphs -

Toggle

+

Exploring Toggle Games on Graphs

@@ -15,17 +15,17 @@

History of Toggle

- Lights OutTM 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 Turning Lights Out with Linear Algebra. + Lights Out™ 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 Turning Lights Out with Linear Algebra.

- Fiorint Et. Al + Fiorint Et. Al

Toggle Information

Abstract

- In the commercial one-player game Lights OutTM 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. + In the commercial one-player game Lights Out™ 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.

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%); } -- cgit v1.2.3