oxaliq/browser-go-proto
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

add menu styling and begin form submission

Browse source
This commit is contained in:
Sorrel Bri 2019-08-06 11:22:43 -07:00
parent cb78de4913
commit dcc21638e8
3 changed files with 197 additions and 34 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

120
css/main.css
View file

@ -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; */

93
index.html
View file

@ -14,31 +14,83 @@
</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> <div id="game-update-space">
<input type="submit" name="komi-suggest" value="Suggest Komi"><input type="submit" name="game-start" value="Start!">
</div>
</form> </form>
</div> </div>
@ -46,7 +98,10 @@
<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-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>
<div id="board-space"> <div id="board-space">
<table id="board"> <table id="board">
@ -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-caps-space" class="caps-space"><p id="black-caps"></p></div> <div id="black-player-space" class="name-space">
<div id="kifu"> <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> <table>
<tr> <tr>
<td> <td>

18
js/main.js
View file

@ -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) {