-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
0640525
commit 4edc623
Showing
4 changed files
with
405 additions
and
0 deletions.
There are no files selected for viewing
Large diffs are not rendered by default.
Oops, something went wrong.
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,75 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <meta name="color-scheme" content="dark light"> | ||
| <!-- currently breaks the layout --> | ||
| <!-- <meta name="viewport" content="width=device-width, initial-scale=1">--> | ||
| <title>GoGoGo</title> | ||
| <link rel="stylesheet" href="style.css"> | ||
|
|
||
| <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous"> | ||
| </head> | ||
| <body> | ||
| <script type="text/javascript" src="gogogo-frontend.js"></script> | ||
|
|
||
| <div id="dark-mode-div"> | ||
| <label id="dark-mode-label" for="dark-mode">Dark mode</label> | ||
| <input id="dark-mode" type="checkbox"/> | ||
| </div> | ||
|
|
||
| <h1>GoGoGo</h1> | ||
|
|
||
| <div id="menu" class="center"> | ||
| <ul id="main-menu"> | ||
| <li><button id="btn-play-local" class="btn">Play local</button></li> | ||
| <li><button id="btn-play-online" class="btn">Play online</button></li> | ||
| <li><button id="btn-rules" class="btn">Rules</button></li> | ||
| </ul> | ||
|
|
||
| <div id="rules" class="hidden"> | ||
| <p>The goal is simple: reach the other end. The rules of movement are:</p> | ||
| <ol> | ||
| <li>Each turn, move one piece to an adjacent square.</li> | ||
| <li>You may push at most one other piece along with you.</li> | ||
| <li>The pushed piece is immobilized; it cannot move during the opponent's turn.</li> | ||
| <li>If a piece falls off the edge it's gone</li> | ||
| <li>If you have no moves available you lose.</li> | ||
| </ol> | ||
| <button id="btn-back" class="btn" >Return</button> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div id="game-ui" class="hidden"> | ||
| <button id="btn-exit-game" class="center btn btn-red btn-small">◀ Exit</button> | ||
|
|
||
| <p id="turn-indicator">Blue's turn</p> | ||
|
|
||
| <div id="game"> | ||
| <div id="connect-spinner" class="lds-dual-ring"></div> | ||
| <table id="game-grid"></table> | ||
| <div id="sidebar" class="hidden"> | ||
| <h3>Lines</h3> | ||
| <ul id="lines"></ul> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="center" id="local-controls"> | ||
| <select id="blue-controller"></select> | ||
| vs. | ||
| <select id="red-controller"></select> | ||
|
|
||
| <div id="local-btns"> | ||
| <!--TODO FIX These buttons are synchronised - click on one and both go down --> | ||
| <button id="btn-undo" class="btn btn-small">Undo</button> | ||
| <button id="btn-restart" class="btn btn-small">Restart</button> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="center" id="server-controls"> | ||
| <p id="server-own-player"></p> | ||
| </div> | ||
|
|
||
| </div> | ||
| </body> | ||
| </html> |
Oops, something went wrong.