add menu styling and begin form submission
This commit is contained in:
parent
cb78de4913
commit
dcc21638e8
3 changed files with 197 additions and 34 deletions
120
css/main.css
120
css/main.css
|
@ -1,8 +1,11 @@
|
||||||
|
@import url('https://fonts.googleapis.com/css?family=La+Belle+Aurore|Raleway:300&display=swap');
|
||||||
|
|
||||||
* {
|
* {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
height: vh;
|
height: vh;
|
||||||
width: vw;
|
width: vw;
|
||||||
|
@ -22,31 +25,112 @@ body {
|
||||||
}
|
}
|
||||||
|
|
||||||
#menu {
|
#menu {
|
||||||
background-color: #fff;
|
background-color: rgb(250, 2250, 255, 0.9);
|
||||||
padding: 1vmin;
|
padding: 1vmin;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 60vw;
|
||||||
|
grid-template-rows: auto auto 60vw auto;
|
||||||
|
grid-template-areas:
|
||||||
|
"meta"
|
||||||
|
"player"
|
||||||
|
"record"
|
||||||
|
"submit";
|
||||||
|
font: 18px 'La Belle Aurore', cursive;
|
||||||
|
}
|
||||||
|
|
||||||
|
#menu .menu-subblock {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin: .25em;
|
||||||
|
}
|
||||||
|
|
||||||
|
#game-meta {
|
||||||
|
grid-area: meta;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu-heading, content, #instructions, div[data-player-meta] label {
|
||||||
|
font-family: 'Raleway', sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
#player-meta {
|
||||||
|
grid-area: player;
|
||||||
|
display: flex;
|
||||||
|
justify-items: stretch;
|
||||||
|
}
|
||||||
|
|
||||||
|
div[data-player-meta] {
|
||||||
|
width: 30vw;
|
||||||
|
justify-self: stretch;
|
||||||
|
}
|
||||||
|
|
||||||
|
div[data-player-meta] input[type="text"] {
|
||||||
|
width: 100%;
|
||||||
|
justify-self: stretch;
|
||||||
|
}
|
||||||
|
|
||||||
|
div[data-player-meta] label {
|
||||||
|
margin: .25em;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#game-record-space {
|
||||||
|
grid-area: record;
|
||||||
|
}
|
||||||
|
|
||||||
|
#instructions {
|
||||||
|
padding: .5em;
|
||||||
|
line-height: 1.5;
|
||||||
|
overflow: scroll;
|
||||||
|
}
|
||||||
|
|
||||||
|
#instructions, #game-record{
|
||||||
|
border: 2px solid black;
|
||||||
|
height: 100%
|
||||||
|
}
|
||||||
|
|
||||||
|
#instructions:::-webkit-scrollbar-track {
|
||||||
|
border: 1px solid rgba(0,0,0,0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
#game-record {
|
||||||
|
visibility: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
#game-update-space {
|
||||||
|
grid-area: submit;
|
||||||
|
margin: .5em;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type=number]::-webkit-inner-spin-button,
|
||||||
|
input[type=number]:focus
|
||||||
|
{
|
||||||
|
width: 15%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rank-tick {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.rank-tick li {
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
content {
|
content {
|
||||||
background-color: #61a6c2;
|
background-color: #61a6c2;
|
||||||
/* display: grid;
|
|
||||||
grid-template-columns: 100vmin;
|
|
||||||
grid-template-rows: 1fr 100vmin 1fr;
|
|
||||||
grid-template-areas:
|
|
||||||
"white-pos"
|
|
||||||
"board-space"
|
|
||||||
"black-pos"; */
|
|
||||||
display: flex !important;
|
display: flex !important;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
/* justify-content: flex-end; */
|
|
||||||
justify-content: space-between !important;
|
justify-content: space-between !important;
|
||||||
/* justify-items: stretch !important; */
|
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
width: 100vw;
|
width: 100vw;
|
||||||
}
|
}
|
||||||
|
|
||||||
.player-pos {
|
.player-pos {
|
||||||
/* flex-grow: 2; */
|
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-around;
|
justify-content: space-around;
|
||||||
|
@ -54,12 +138,10 @@ content {
|
||||||
}
|
}
|
||||||
|
|
||||||
.player-pos#white-pos {
|
.player-pos#white-pos {
|
||||||
/* grid-area: white-pos; */
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.player-pos#black-pos {
|
.player-pos#black-pos {
|
||||||
/* grid-area: black-pos; */
|
|
||||||
flex-direction: row-reverse;
|
flex-direction: row-reverse;
|
||||||
justify-self: flex-end;
|
justify-self: flex-end;
|
||||||
}
|
}
|
||||||
|
@ -108,7 +190,6 @@ content {
|
||||||
|
|
||||||
.caps-space {
|
.caps-space {
|
||||||
color: #FFF;
|
color: #FFF;
|
||||||
order: 1;
|
|
||||||
margin: 1vh;
|
margin: 1vh;
|
||||||
height: 6vh;
|
height: 6vh;
|
||||||
width: 6vh;
|
width: 6vh;
|
||||||
|
@ -120,6 +201,17 @@ content {
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.name-space {
|
||||||
|
order: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.name-space p {
|
||||||
|
margin-bottom: 2vh;
|
||||||
|
}
|
||||||
|
|
||||||
#board-space {
|
#board-space {
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
/* grid-area: board-space; */
|
/* grid-area: board-space; */
|
||||||
|
|
87
index.html
87
index.html
|
@ -14,30 +14,82 @@
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="modal">
|
<div class="modal">
|
||||||
<div id="menu">
|
<div>
|
||||||
<form>
|
<form id="menu">
|
||||||
<div id="game-meta">
|
<div id="game-meta">
|
||||||
<span>Date:</span><input type="text" name="date">
|
<div class="menu-subblock"><span class="menu-heading">Date:</span><input type="text" name="date"></div>
|
||||||
<span>Komi:</span><input type="range" name="komi">
|
<div class="menu-subblock"><span class="menu-heading">Komi:</span><span id="komi"></span></div>
|
||||||
<span>Handicap:</span><input type="range" name="handicap">
|
<input type="range" min="-21.5" max="7.5" step="1" value="5.5" name="komi-slider">
|
||||||
|
<div class="menu-subblock"><span class="menu-heading">Handicap:</span><span id="handicap"></span></div>
|
||||||
|
<input type="range" min="0" max="5" step="1" value="0" name="handicap-slider">
|
||||||
</div>
|
</div>
|
||||||
<div id="player-meta">
|
<div id="player-meta">
|
||||||
<div data-player-meta="black">
|
<div data-player-meta="black">
|
||||||
<h4>Black</h4>
|
<h4 class="menu-heading">Black</h4>
|
||||||
<span>Name:</span><input type="text" name="black-name">
|
<span class="menu-heading">Name:</span><input type="text" name="black-name">
|
||||||
<span>Rank:</span><input type="text" name="black-rank">
|
<span class="menu-heading">Rank:</span><input type="number" id="black-rank" max="38" steps="1" placeholder="15" name="black-rank">
|
||||||
<input type="checkbox" name="black-rank-certain">
|
<!-- <div id=> -->
|
||||||
|
<!-- <datalist class="rank-tick">
|
||||||
|
<span>30k</span>
|
||||||
|
<span>29k</span>
|
||||||
|
<span>28k</span>
|
||||||
|
<span>27k</span>
|
||||||
|
<span>26k</span>
|
||||||
|
<span>25k</span>
|
||||||
|
<span>24k</span>
|
||||||
|
<span>23k</span>
|
||||||
|
<span>22k</span>
|
||||||
|
<span>21k</span>
|
||||||
|
<span>20k</span>
|
||||||
|
<span>19k</span>
|
||||||
|
<span>18k</span>
|
||||||
|
<span>17k</span>
|
||||||
|
<span>16k</span>
|
||||||
|
<span>15k</span>
|
||||||
|
<span>14k</span>
|
||||||
|
<span>13k</span>
|
||||||
|
<span>12k</span>
|
||||||
|
<span>11k</span>
|
||||||
|
<span>10k</span>
|
||||||
|
<span>9k</span>
|
||||||
|
<span>8k</span>
|
||||||
|
<span>7k</span>
|
||||||
|
<span>6k</span>
|
||||||
|
<span>5k</span>
|
||||||
|
<span>4k</span>
|
||||||
|
<span>3k</span>
|
||||||
|
<span>2k</span>
|
||||||
|
<span>1k</span>
|
||||||
|
<span>1d</span>
|
||||||
|
<span>2d</span>
|
||||||
|
<span>3d</span>
|
||||||
|
<span>4d</span>
|
||||||
|
<span>5d</span>
|
||||||
|
<span>6d</span>
|
||||||
|
<span>7d</span>
|
||||||
|
<span>8d</span>
|
||||||
|
<span>9d</span>
|
||||||
|
</ul>
|
||||||
|
</div> -->
|
||||||
|
<input type="checkbox" name="black-rank-certain"><label for="black-rank-certain">Rank Certainty</label>
|
||||||
</div>
|
</div>
|
||||||
<div data-player-meta="white">
|
<div data-player-meta="white">
|
||||||
<h4>White</h4>
|
<h4 class="menu-heading">White</h4>
|
||||||
<span>Name:</span><input type="text" name="white-name">
|
<span class="menu-heading">Name:</span><input type="text" name="white-name">
|
||||||
<span>Rank:</span><input type="text" name="white-rank">
|
<span class="menu-heading">Rank:</span><input type="text" name="white-rank">
|
||||||
<input type="checkbox" name="white-rank-certain">
|
<input type="checkbox" name="white-rank-certain"><label for="white-rank-certain">Rank Certainty</label>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div id="game-record-space">
|
<div id="game-record-space">
|
||||||
<p id="instructions">Put instructions for use here.</p>
|
<p id="instructions">Welcome to Browser Go!<br><br>If this is your first time playing Go, please see
|
||||||
|
<a href="https://www.youtube.com/watch?v=gECcsSeRcNo" target="_blank">this great tutorial video.</a><br><br>
|
||||||
|
To begin a game enter player names and ranks above, then click "Suggest Komi" Browser Go will calculate the appropriate komi based on AGA guidelines.
|
||||||
|
To override Browser Go's suggestion, use the sliders above. Be sure to check the 'rank certainty' box if you're club-rated.<br><br>For now, Browser Go only supports games on a small board.
|
||||||
|
I've got great things planned for the future, though! Lookout for new releases on <a href="https://github.com/sorrelbri/browser-go">the GitHub page!</a></p>
|
||||||
<p id="game-record"></p>
|
<p id="game-record"></p>
|
||||||
</div>
|
</div>
|
||||||
|
<div id="game-update-space">
|
||||||
|
<input type="submit" name="komi-suggest" value="Suggest Komi"><input type="submit" name="game-start" value="Start!">
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</form>
|
</form>
|
||||||
|
@ -46,8 +98,11 @@
|
||||||
<content>
|
<content>
|
||||||
<div id="white-pos" class="player-pos">
|
<div id="white-pos" class="player-pos">
|
||||||
<div id="white-bowl" class="bowl"><p>Pass?</p></div>
|
<div id="white-bowl" class="bowl"><p>Pass?</p></div>
|
||||||
|
<div id="white-player-space" class="name-space">
|
||||||
|
<p id="white-player-name">Test Name rk</p>
|
||||||
<div id="white-caps-space" class="caps-space"><p id="white-caps"></p></div>
|
<div id="white-caps-space" class="caps-space"><p id="white-caps"></p></div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
<div id="board-space">
|
<div id="board-space">
|
||||||
<table id="board">
|
<table id="board">
|
||||||
<tr id="row-1">
|
<tr id="row-1">
|
||||||
|
@ -315,8 +370,10 @@
|
||||||
</div>
|
</div>
|
||||||
<div id="black-pos" class="player-pos">
|
<div id="black-pos" class="player-pos">
|
||||||
<div id="black-bowl" class="bowl"><p>Pass?</p></div>
|
<div id="black-bowl" class="bowl"><p>Pass?</p></div>
|
||||||
|
<div id="black-player-space" class="name-space">
|
||||||
|
<p id="black-player-name">Test Name rk</p>
|
||||||
<div id="black-caps-space" class="caps-space"><p id="black-caps"></p></div>
|
<div id="black-caps-space" class="caps-space"><p id="black-caps"></p></div>
|
||||||
<div id="kifu">
|
</div> <div id="kifu">
|
||||||
<table>
|
<table>
|
||||||
<tr>
|
<tr>
|
||||||
<td>
|
<td>
|
||||||
|
|
18
js/main.js
18
js/main.js
|
@ -19,7 +19,7 @@ const gameState = {
|
||||||
winner: null,
|
winner: null,
|
||||||
turn: 1, // turn logic depends on handicap stones
|
turn: 1, // turn logic depends on handicap stones
|
||||||
pass: null,
|
pass: null,
|
||||||
komi: null, // komi depends on handicap stones
|
komi: null, // komi depends on handicap stones + player rank
|
||||||
handicap: null,
|
handicap: null,
|
||||||
boardSize: 9,
|
boardSize: 9,
|
||||||
playerState: {
|
playerState: {
|
||||||
|
@ -143,6 +143,8 @@ class Point {
|
||||||
const whiteCapsEl = document.getElementById("white-caps");
|
const whiteCapsEl = document.getElementById("white-caps");
|
||||||
const blackCapsEl = document.getElementById("black-caps");
|
const blackCapsEl = document.getElementById("black-caps");
|
||||||
const modalEl = document.querySelector('.modal');
|
const modalEl = document.querySelector('.modal');
|
||||||
|
const komiSliderEl = document.querySelector('input[name="komi-slider"]');
|
||||||
|
const handiSliderEl = document.querySelector('input[name="handicap-slider"]');
|
||||||
// store modal #menu for displaying game info
|
// store modal #menu for displaying game info
|
||||||
// store
|
// store
|
||||||
|
|
||||||
|
@ -163,6 +165,8 @@ document.getElementById('kifu').addEventListener('click', clickMenu);
|
||||||
document.getElementById('white-caps-space').addEventListener('click', clickResign);
|
document.getElementById('white-caps-space').addEventListener('click', clickResign);
|
||||||
document.getElementById('black-caps-space').addEventListener('click', clickResign);
|
document.getElementById('black-caps-space').addEventListener('click', clickResign);
|
||||||
modalEl.addEventListener('click', clickCloseMenu);
|
modalEl.addEventListener('click', clickCloseMenu);
|
||||||
|
komiSliderEl.addEventListener('change', changeUpdateKomi);
|
||||||
|
handiSliderEl.addEventListener('change', changeUpdateHandicap);
|
||||||
|
|
||||||
|
|
||||||
/*----- functions -----*/
|
/*----- functions -----*/
|
||||||
|
@ -170,6 +174,14 @@ init();
|
||||||
|
|
||||||
let findPointFromIdx = (arr) => boardState.find( point => point.pos[0] === arr[0] && point.pos[1] === arr[1] );
|
let findPointFromIdx = (arr) => boardState.find( point => point.pos[0] === arr[0] && point.pos[1] === arr[1] );
|
||||||
|
|
||||||
|
function changeUpdateKomi() {
|
||||||
|
document.getElementById('komi').textContent = komiSliderEl.value;
|
||||||
|
}
|
||||||
|
|
||||||
|
function changeUpdateHandicap() {
|
||||||
|
document.getElementById('handicap').textContent = handiSliderEl.value;
|
||||||
|
}
|
||||||
|
|
||||||
function clickPass(evt) {
|
function clickPass(evt) {
|
||||||
if (evt.target.parentElement.id === `${STONES_DATA[gameState.turn]}-bowl`) playerPass();
|
if (evt.target.parentElement.id === `${STONES_DATA[gameState.turn]}-bowl`) playerPass();
|
||||||
}
|
}
|
||||||
|
@ -187,11 +199,13 @@ function playerPass() {
|
||||||
|
|
||||||
function clickMenu() {
|
function clickMenu() {
|
||||||
modalEl.style.visibility = 'visible';
|
modalEl.style.visibility = 'visible';
|
||||||
|
changeUpdateKomi();
|
||||||
|
changeUpdateHandicap();
|
||||||
}
|
}
|
||||||
|
|
||||||
function clickCloseMenu(evt) {
|
function clickCloseMenu(evt) {
|
||||||
evt.stopPropagation();
|
evt.stopPropagation();
|
||||||
modalEl.style.visibility = 'hidden';
|
if (evt.target.className === "modal") modalEl.style.visibility = 'hidden';
|
||||||
}
|
}
|
||||||
|
|
||||||
function clickResign(evt) {
|
function clickResign(evt) {
|
||||||
|
|
Loading…
Reference in a new issue