From a5ac4b6b9f2bfc6b9eb261b5ba5dc70e17e1c8b6 Mon Sep 17 00:00:00 2001 From: Jean-Pierre Appel Date: Tue, 24 Oct 2023 12:26:56 -0400 Subject: minor styling --- site/game.js | 46 +++++++++++++++++++++++++++++++------ site/index.html | 20 +++++++++-------- site/style.css | 70 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 120 insertions(+), 16 deletions(-) (limited to 'site') diff --git a/site/game.js b/site/game.js index e0015be..ee52509 100644 --- a/site/game.js +++ b/site/game.js @@ -1,6 +1,18 @@ const order = document.getElementById("graphOrder"); -//TODO: read in player's name +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 = { @@ -13,10 +25,22 @@ function createGame(length){ 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 humanPlay(game){ +function toggle_screen(){ + optionsScreen.classList.toggle('inactive'); + gameScreen.classList.toggle('inactive'); + renderGame(testGame) +} + +async function humanPlay(game){ } @@ -37,15 +61,23 @@ async function sendGame(game){ "Content-Type": "application/json; charset=UTF-8" } }) - return JSON.parse(response.json()) + return response.json() +} + +async function gameLoop(){ + } function playGame(){ - const length = order.valueAsNumber; - const game = createGame(length); - console.log(sendGame(game)) + //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){ - // game.nextTurn(game.turn); + // humanPlay(game) + // // game.nextTurn(game.turn); //} // displayMessage(game.result); } diff --git a/site/index.html b/site/index.html index 5497e9a..c9ab08a 100644 --- a/site/index.html +++ b/site/index.html @@ -3,22 +3,24 @@ - Toggle Online + + Toggle -

Toggle Online

- Try to beat the computer :) +

Heat Toggle Demo

Try to beat the computer :)

- +

Options

- Select a number of vertices for a path (1-100): - + Select a number of vertices for a path (1-30): + +

Game

- +

diff --git a/site/style.css b/site/style.css index e69de29..788f454 100644 --- a/site/style.css +++ b/site/style.css @@ -0,0 +1,70 @@ +:root { + --hi-color: purple; + --fg-color: lightgrey; + --bg-color: white; +} + +body { + background-color: var(--bg-color); + animation-name: fadein; + animation-duration: 1s; + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; +} + +#game { + display: flex; + flex-direction: row; +} + +div.vertex { + padding: 1em; + background-color: var(--hi-color); + border-radius: 50%; +} + +div.vertex.off { + background-color: var(--fg-color); +} + +section#options { + display: flex; + align-items: center; + justify-content: center; + align-items: center; + flex-direction: column; +} + +section.screen { + animation: fadein 1s linear; +} + +section.screen.inactive { + display: none; +} + +button { + background-color: var(--hi-color); + color: var(--fg-color); + padding: 2em 3em; + border: none; +} + +button:hover { + filter: brightness(120%); +} + +button:focus { + outline: none; +} + +@keyframes fadein { + from { + opacity: 0; + } + to { + opacity: 1; + } +} -- cgit v1.2.3