diff options
| -rw-r--r-- | site/game.js | 46 | ||||
| -rw-r--r-- | site/index.html | 20 | ||||
| -rw-r--r-- | site/style.css | 70 |
3 files changed, 120 insertions, 16 deletions
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 @@ <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> - <title>Toggle Online</title> + <link rel="stylesheet" href="style.css"> + <title>Toggle</title> </head> <body> - <h1>Toggle Online</h1> - Try to beat the computer :) + <h1>Heat Toggle Demo</h1> + <p>Try to beat the computer :)</p> <nav></nav> - <button onclick="playGame()">Test</button> + <button id="test_bttn" onclick="toggle_screen()">Test Button</button> <main> - <section id="options" class="screen"> + <section id="optionsScreen" class="screen"> <h2>Options</h2> - <label for="graphOrder">Select a number of vertices for a path (1-100):</label> - <input type="number" name="graphOrder" id="graphOrder" defaultValue=7 min=1 max=100></input> + <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> - <section id="game" class="screen"> + <section id="gameScreen" class="screen inactive"> <h2>Game</h2> - + <div id="game">Loading...</div> <script src="game.js"></script> </section> </main> 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; + } +} |