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

add additional styling to menu, begin making layout responsive

Browse source
This commit is contained in:
Sorrel Bri 2019-08-06 11:51:01 -07:00
parent dcc21638e8
commit da8d360a5f
2 changed files with 42 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

48
css/main.css
View file

@ -1,4 +1,4 @@
@import url('https://fonts.googleapis.com/css?family=La+Belle+Aurore|Raleway:300&display=swap');
@import url('https://fonts.googleapis.com/css?family=La+Belle+Aurore|Raleway:300,600');
* {
box-sizing: border-box;
@ -22,20 +22,21 @@ body {
align-items: center;
justify-content: center;
visibility: hidden;
overflow-y: scroll;
}
#menu {
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-columns: 80vw;
grid-template-rows: auto auto 80vw auto;
grid-template-areas:
"meta"
"player"
"record"
"submit";
font: 18px 'La Belle Aurore', cursive;
font: 14px 'La Belle Aurore', cursive;
}
#menu .menu-subblock {
@ -52,27 +53,39 @@ body {
.menu-heading, content, #instructions, div[data-player-meta] label {
font-family: 'Raleway', sans-serif;
font-weight: 300;
}
h4.menu-heading {
font-weight: 600;
margin: 1em .25em 0 .25em;
font-size: 110%;
}
#player-meta {
grid-area: player;
display: flex;
justify-items: stretch;
flex-direction: column;
}
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] input[type="text"] {
width: 90%;
justify-self: stretch;
}
div[data-player-meta] input {
margin: 1vmin;
}
div[data-player-meta] label {
margin: .25em;
font-size: 14px;
font-size: 100%;
}
#game-record-space {
@ -108,7 +121,7 @@ height: 100%
input[type=number]::-webkit-inner-spin-button,
input[type=number]:focus
{
width: 15%;
}
.rank-tick {
@ -325,3 +338,16 @@ td .dot .seki {
}
@media only screen and (min-width: 560px) {
#player-meta {
flex-direction: row;
}
div[data-player-meta] {
width: 50%;
}
#menu {
grid-template-columns: 60vw;
grid-template-rows: auto auto 60vw auto;
font-size: 14px;
}
}

7
index.html
View file

@ -76,7 +76,7 @@
<div data-player-meta="white">
<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">
<span class="menu-heading">Rank:</span><input type="number" name="white-rank">
<input type="checkbox" name="white-rank-certain"><label for="white-rank-certain">Rank Certainty</label>
</div>
</div>
@ -84,7 +84,10 @@
<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.
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>
When the game begins, click on a legal point on the board to make a move. The active player's bowl will be highlighted. To pass, click on your bowl.
This will only be possible on your turn. To resign click on your capture tray. To view the game record or adjust player settings, click the kifu on black's side.<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>