add menu styling and begin form submission
This commit is contained in:
Sorrel Bri
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;
|
||||
margin: 0;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
body {
|
||||
height: vh;
|
||||
width: vw;
|
||||
|
|
@ -22,31 +25,112 @@ body {
|
|||
}
|
||||
|
||||
#menu {
|
||||
background-color: #fff;
|
||||
background-color: rgb(250, 2250, 255, 0.9);
|
||||
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 {
|
||||
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;
|
||||
flex-direction: column;
|
||||
/* justify-content: flex-end; */
|
||||
justify-content: space-between !important;
|
||||
/* justify-items: stretch !important; */
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
}
|
||||
|
||||
.player-pos {
|
||||
/* flex-grow: 2; */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
|
|
@ -54,12 +138,10 @@ content {
|
|||
}
|
||||
|
||||
.player-pos#white-pos {
|
||||
/* grid-area: white-pos; */
|
||||
|
||||
}
|
||||
|
||||
.player-pos#black-pos {
|
||||
/* grid-area: black-pos; */
|
||||
flex-direction: row-reverse;
|
||||
justify-self: flex-end;
|
||||
}
|
||||
|
|
@ -108,7 +190,6 @@ content {
|
|||
|
||||
.caps-space {
|
||||
color: #FFF;
|
||||
order: 1;
|
||||
margin: 1vh;
|
||||
height: 6vh;
|
||||
width: 6vh;
|
||||
|
|
@ -120,6 +201,17 @@ content {
|
|||
justify-content: center;
|
||||
}
|
||||
|
||||
.name-space {
|
||||
order: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.name-space p {
|
||||
margin-bottom: 2vh;
|
||||
}
|
||||
|
||||
#board-space {
|
||||
margin: 0 auto;
|
||||
/* grid-area: board-space; */
|
||||
|
|
|
|||
93
index.html
93
index.html
|
|
@ -14,31 +14,83 @@
|
|||
</head>
|
||||
<body>
|
||||
<div class="modal">
|
||||
<div id="menu">
|
||||
<form>
|
||||
<div>
|
||||
<form id="menu">
|
||||
<div id="game-meta">
|
||||
<span>Date:</span><input type="text" name="date">
|
||||
<span>Komi:</span><input type="range" name="komi">
|
||||
<span>Handicap:</span><input type="range" name="handicap">
|
||||
<div class="menu-subblock"><span class="menu-heading">Date:</span><input type="text" name="date"></div>
|
||||
<div class="menu-subblock"><span class="menu-heading">Komi:</span><span id="komi"></span></div>
|
||||
<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 id="player-meta">
|
||||
<div data-player-meta="black">
|
||||
<h4>Black</h4>
|
||||
<span>Name:</span><input type="text" name="black-name">
|
||||
<span>Rank:</span><input type="text" name="black-rank">
|
||||
<input type="checkbox" name="black-rank-certain">
|
||||
<h4 class="menu-heading">Black</h4>
|
||||
<span class="menu-heading">Name:</span><input type="text" name="black-name">
|
||||
<span class="menu-heading">Rank:</span><input type="number" id="black-rank" max="38" steps="1" placeholder="15" name="black-rank">
|
||||
<!-- <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 data-player-meta="white">
|
||||
<h4>White</h4>
|
||||
<span>Name:</span><input type="text" name="white-name">
|
||||
<span>Rank:</span><input type="text" name="white-rank">
|
||||
<input type="checkbox" name="white-rank-certain">
|
||||
<h4 class="menu-heading">White</h4>
|
||||
<span class="menu-heading">Name:</span><input type="text" name="white-name">
|
||||
<span class="menu-heading">Rank:</span><input type="text" name="white-rank">
|
||||
<input type="checkbox" name="white-rank-certain"><label for="white-rank-certain">Rank Certainty</label>
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
</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>
|
||||
|
||||
</form>
|
||||
</div>
|
||||
|
|
@ -46,7 +98,10 @@
|
|||
<content>
|
||||
<div id="white-pos" class="player-pos">
|
||||
<div id="white-bowl" class="bowl"><p>Pass?</p></div>
|
||||
<div id="white-caps-space" class="caps-space"><p id="white-caps"></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>
|
||||
</div>
|
||||
<div id="board-space">
|
||||
<table id="board">
|
||||
|
|
@ -315,8 +370,10 @@
|
|||
</div>
|
||||
<div id="black-pos" class="player-pos">
|
||||
<div id="black-bowl" class="bowl"><p>Pass?</p></div>
|
||||
<div id="black-caps-space" class="caps-space"><p id="black-caps"></p></div>
|
||||
<div id="kifu">
|
||||
<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> <div id="kifu">
|
||||
<table>
|
||||
<tr>
|
||||
<td>
|
||||
|
|
|
|||
18
js/main.js
18
js/main.js
|
|
@ -19,7 +19,7 @@ const gameState = {
|
|||
winner: null,
|
||||
turn: 1, // turn logic depends on handicap stones
|
||||
pass: null,
|
||||
komi: null, // komi depends on handicap stones
|
||||
komi: null, // komi depends on handicap stones + player rank
|
||||
handicap: null,
|
||||
boardSize: 9,
|
||||
playerState: {
|
||||
|
|
@ -143,6 +143,8 @@ class Point {
|
|||
const whiteCapsEl = document.getElementById("white-caps");
|
||||
const blackCapsEl = document.getElementById("black-caps");
|
||||
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
|
||||
|
||||
|
|
@ -163,6 +165,8 @@ document.getElementById('kifu').addEventListener('click', clickMenu);
|
|||
document.getElementById('white-caps-space').addEventListener('click', clickResign);
|
||||
document.getElementById('black-caps-space').addEventListener('click', clickResign);
|
||||
modalEl.addEventListener('click', clickCloseMenu);
|
||||
komiSliderEl.addEventListener('change', changeUpdateKomi);
|
||||
handiSliderEl.addEventListener('change', changeUpdateHandicap);
|
||||
|
||||
|
||||
/*----- functions -----*/
|
||||
|
|
@ -170,6 +174,14 @@ init();
|
|||
|
||||
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) {
|
||||
if (evt.target.parentElement.id === `${STONES_DATA[gameState.turn]}-bowl`) playerPass();
|
||||
}
|
||||
|
|
@ -187,11 +199,13 @@ function playerPass() {
|
|||
|
||||
function clickMenu() {
|
||||
modalEl.style.visibility = 'visible';
|
||||
changeUpdateKomi();
|
||||
changeUpdateHandicap();
|
||||
}
|
||||
|
||||
function clickCloseMenu(evt) {
|
||||
evt.stopPropagation();
|
||||
modalEl.style.visibility = 'hidden';
|
||||
if (evt.target.className === "modal") modalEl.style.visibility = 'hidden';
|
||||
}
|
||||
|
||||
function clickResign(evt) {
|
||||
|
|
|
|||
Loading…
Reference in a new issue