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 ++++++++++++++++++++++++---- 2 files changed, 50 insertions(+), 11 deletions(-) (limited to 'site/game') 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...
+
+
-- cgit v1.2.3