add styling to capture tray, bowl, board

This commit is contained in:
Sorrel Bri 2019-08-08 15:49:51 -07:00
parent f88b9e3fa2
commit 49315f9fe3
5 changed files with 101 additions and 24 deletions

View file

@ -16,7 +16,7 @@ a working game of go for a 9x9 board that
- [x] calculates estimated score at game end - [x] calculates estimated score at game end
- [x] suggests dead groups - [x] suggests dead groups
- [x] allows users to override dead group estimates - [x] allows users to override dead group estimates
- [ ] allows users to submit finalized score to game record - [x] allows users to submit finalized score to game record
- [ ] displays game record as string - [ ] displays game record as string
stretch goals stretch goals
@ -27,10 +27,10 @@ stretch goals
- [ ] add stone placement sounds - [ ] add stone placement sounds
superstretch goals superstretch goals
- [ ] allows users to select board size (9x9, 13x13, 19x19) - [x] allows users to select board size (9x9, 13x13, 19x19)
- [ ] allows users to load .sgf main lines - [ ] allows users to load .sgf main lines
- [ ] allow for responsivity in the form of - [ ] allow for responsivity in the form of
- - [ ] 9x9 games simply stretch with screen size - - [x] 9x9 games simply stretch with screen size
- - [ ] larger games allow small displays one click to zoom before running legal move calculations and move placement - - [ ] larger games allow small displays one click to zoom before running legal move calculations and move placement
<!-- describe go with images of game--> <!-- describe go with images of game-->

View file

@ -73,7 +73,7 @@ h1 {
h4 { h4 {
font-weight: 600; font-weight: 600;
margin: 1em .25em 1em .25em; margin: .25em;
font-size: 110%; font-size: 110%;
} }
@ -168,7 +168,7 @@ content {
#game-hud p { #game-hud p {
font-size: 130%; font-size: 130%;
width: 50%; width: 100%;
order: 0; order: 0;
width: 10vh; width: 10vh;
background-color: rgba(0,0,0,0.3); background-color: rgba(0,0,0,0.3);
@ -232,12 +232,12 @@ content {
.caps-space { .caps-space {
color: #FFF; color: #FFF;
margin: 3vh; margin: 1vh;
height: 10vh; height: 10vh;
width: 10vh; width: 10vh;
border-radius: 50%; border-radius: 50%;
background-color: rgb(116, 48, 17); background: radial-gradient(farthest-side at 49% 52%, rgb(150, 75, 50) 0%, rgb(116,48,17) 35%, rgb(116,48,17) 64%, rgb(80, 20, 0) 65%, rgb(175, 140, 95) 70%, rgb(120, 50, 40) 80%, rgb(80, 20, 0) 95%, rgb(175, 140, 95) 100%);
box-shadow: -0.5vmin 1vmin 3vmin rgba(83, 53, 35, 0.61); box-shadow: -0.5vmin 1vmin 1vmin rgba(83, 53, 35, 0.61);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@ -264,7 +264,10 @@ content {
.name-space h4 { .name-space h4 {
font-size: 120%; font-size: 120%;
color: rgb(255,240,230) color: rgb(255,240,230);
background-color: rgba(0,0,0,0.7);
padding: 0.25em;
z-index: 2;
} }
#board-container { #board-container {
@ -276,13 +279,18 @@ content {
"board"; "board";
} }
#board-space tbody {
background: radial-gradient(farthest-corner at 55% 40%, rgba(244, 230, 120, 0.75) 0%, rgba(234, 178, 78, 0.5) 65%, rgba(200, 160, 90, 0.45) 90%, rgba(200, 140, 90, 0.45) 100%);
background-size: cover;
padding: 1vmin;
}
#board-space { #board-space {
grid-area: board; grid-area: board;
margin: 0 auto; margin: 0 auto;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
background: radial-gradient(farthest-corner at 55% 40%, rgb(244, 230, 120) 0%, rgb(234, 178, 78) 65%, rgb(200,160,90) 90%, rgb(200, 140, 90) 100%); background-image: url(../images/board.png);
padding: 1vmin;
z-index: 1; z-index: 1;
box-shadow: -2vmin 4vmin 3vmin rgba(145, 92, 23, 0.5); box-shadow: -2vmin 4vmin 3vmin rgba(145, 92, 23, 0.5);
flex: 1; flex: 1;
@ -352,7 +360,7 @@ content {
background: conic-gradient(#000 0%, rgba(0,0,0,0) 1%, rgba(0,0,0,0) 74%, #000 75%, rgba(0,0,0,0) 76%, rgba(0,0,0,0) 99%, #000 100%); background: conic-gradient(#000 0%, rgba(0,0,0,0) 1%, rgba(0,0,0,0) 74%, #000 75%, rgba(0,0,0,0) 76%, rgba(0,0,0,0) 99%, #000 100%);
} }
.stone.hoshi { /* to be added later */ .stone.hoshi {
background: radial-gradient(circle farthest-corner at center, #000 0%, #000 14%, rgba(0,0,0,0) 15%); background: radial-gradient(circle farthest-corner at center, #000 0%, #000 14%, rgba(0,0,0,0) 15%);
z-index: 3; z-index: 3;
} }
@ -418,6 +426,8 @@ td .dot[data-dot="dame"] {
} }
/* Responsive Design */
@media only screen and (min-width: 500px) { @media only screen and (min-width: 500px) {
html { html {
@ -442,15 +452,30 @@ td .dot[data-dot="dame"] {
@media only screen and (min-width: 570px) { @media only screen and (min-width: 570px) {
#board-space .board-9x9 td { #board-space .board-9x9 td {
height: 8vh; height: 7.5vh;
width: 8vh; width: 7.5vh;
} }
#board-space .board-13x13 td { #board-space .board-13x13 td {
height: 5.5vh; height: 5vh;
width: 5.5vh; width: 5vh;
} }
.bowl {
order: -1;
margin: 3vh;
height: 10vh;
width: 10vh;
}
.caps-space {
color: #FFF;
margin: 2vh;
height: 7vh;
width: 7vh;
}
} }
@media only screen and (min-width: 700px) { @media only screen and (min-width: 700px) {

BIN
images/board.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 217 KiB

View file

@ -234,7 +234,8 @@ const boardSizeEl = document.getElementById('board-size-radio');
const komiDisplayEl = document.getElementById('komi'); const komiDisplayEl = document.getElementById('komi');
const handiDisplayEl = document.getElementById('handicap'); const handiDisplayEl = document.getElementById('handicap');
const boardEl = document.querySelector('#board tbody'); const boardEl = document.querySelector('#board tbody');
const gameStartEl = document.querySelector('input[name="game-start"]') const gameStartEl = document.querySelector('input[name="game-start"]');
const komiSuggestEl = document.querySelector('input[name="komi-suggest"]');
const boardSizeRadioEls = [ const boardSizeRadioEls = [
document.querySelectorAll('input[name="board-size"')[0], document.querySelectorAll('input[name="board-size"')[0],
document.querySelectorAll('input[name="board-size"')[1], document.querySelectorAll('input[name="board-size"')[1],
@ -254,7 +255,7 @@ komiSliderEl.addEventListener('change', changeUpdateKomi);
handiSliderEl.addEventListener('change', changeUpdateHandicap); handiSliderEl.addEventListener('change', changeUpdateHandicap);
document.getElementById('player-meta').addEventListener('click', clickUpdatePlayerMeta); document.getElementById('player-meta').addEventListener('click', clickUpdatePlayerMeta);
document.getElementById('player-meta').addEventListener('change', clickUpdatePlayerMeta); document.getElementById('player-meta').addEventListener('change', clickUpdatePlayerMeta);
document.querySelector('input[name="komi-suggest"]').addEventListener('click', clickKomiSuggestion); komiSuggestEl.addEventListener('click', clickKomiSuggestion);
gameHudEl.addEventListener('click', clickGameHud); gameHudEl.addEventListener('click', clickGameHud);
boardSizeEl.addEventListener('click', clickBoardSize); boardSizeEl.addEventListener('click', clickBoardSize);
gameStartEl.addEventListener('click', clickSubmitStart); gameStartEl.addEventListener('click', clickSubmitStart);
@ -314,6 +315,12 @@ function clickBoardSize(evt) {
function clickKomiSuggestion(evt) { function clickKomiSuggestion(evt) {
evt.preventDefault(); evt.preventDefault();
evt.stopPropagation(); evt.stopPropagation();
if (gameState.gameMeta.start) {
gameState.playerMeta.b.name = blackNameInputEl.value || 'black';
gameState.playerMeta.w.name = whiteNameInputEl.value || 'white';
modalEl.style.visibility = 'hidden';
return
}
let sugg = KOMI_REC[gameState.boardSize][Math.abs(gameState.playerMeta.w.rank - gameState.playerMeta.b.rank)]; let sugg = KOMI_REC[gameState.boardSize][Math.abs(gameState.playerMeta.w.rank - gameState.playerMeta.b.rank)];
let handi = HANDI_REC[gameState.boardSize][Math.abs(gameState.playerMeta.w.rank - gameState.playerMeta.b.rank)]; let handi = HANDI_REC[gameState.boardSize][Math.abs(gameState.playerMeta.w.rank - gameState.playerMeta.b.rank)];
gameState.komi = sugg; gameState.komi = sugg;
@ -330,8 +337,8 @@ function clickSubmitStart(evt) {
if (gameState.gameMeta.start) return init(); if (gameState.gameMeta.start) return init();
evt.preventDefault(); evt.preventDefault();
evt.stopPropagation(); evt.stopPropagation();
gameState.playerMeta.b.name = blackNameInputEl.value; gameState.playerMeta.b.name = blackNameInputEl.value || 'black';
gameState.playerMeta.w.name = whiteNameInputEl.value; gameState.playerMeta.w.name = whiteNameInputEl.value || 'white';
modalEl.style.visibility = 'hidden'; modalEl.style.visibility = 'hidden';
initGame(); initGame();
} }
@ -355,7 +362,10 @@ function renderBoardSizeRadio() {
function renderMenu() { function renderMenu() {
dateEl.textContent = gameState.gameMeta.date; dateEl.textContent = gameState.gameMeta.date;
if (gameState.gameMeta.start) gameStartEl.value = "New Game"; if (gameState.gameMeta.start) {
gameStartEl.value = "New Game";
komiSuggestEl.value = "Close Menu";
}
renderKomi() renderKomi()
renderHandiSlider(); renderHandiSlider();
renderBoardSizeRadio(); renderBoardSizeRadio();
@ -390,7 +400,7 @@ function startMenu() {
function clickCloseMenu(evt) { function clickCloseMenu(evt) {
evt.stopPropagation(); evt.stopPropagation();
if (evt.target.className === "modal" && gameState.gameRecord.length) modalEl.style.visibility = 'hidden'; if (evt.target.className === "modal" && gameState.gameMeta.start) modalEl.style.visibility = 'hidden';
} }
function clickResign(evt) { function clickResign(evt) {

42
version tracking.md Normal file
View file

@ -0,0 +1,42 @@
# Browser Go
#### Minimum Deliverable Product
a working game of go for a 9x9 board that
- [x] displays well on mobile or desktop
- [x] initiates a game with suggested handicap and komi according to rank input
- [x] displays how to play in open screen
- [x] lets the user know whose turn it is
- [x] lets the user know which moves are legal and calculates those accordingly
- [x] logs ko
- [x] implement a search algorithm to avoid moving into dead space
- [x] correctly removes captured stones and adds them to capturing player's score
- [x] logs game record
- [x] allows players to pass or resign
- [x] ends game upon 2 consecutive passes
- [x] calculates estimated score at game end
- [x] suggests dead groups
- [x] allows users to override dead group estimates
- [x] allows users to submit finalized score to game record
- [ ] displays game record as string
stretch goals
- [x] uses stone placement GUI for resign and pass
- [ ] maintains a one move game state history for 'undo mismove'
- [ ] converts string to .sgf format
- [x] allows users to edit game info mid game
- [ ] add stone placement sounds
superstretch goals
- [x] allows users to select board size (9x9, 13x13, 19x19)
- [ ] allows users to load .sgf main lines
- [ ] allow for responsivity in the form of
- - [x] 9x9 games simply stretch with screen size
- - [ ] larger games allow small displays one click to zoom before running legal move calculations and move placement
<!-- describe go with images of game-->
<!-- List of technologies used -->
<!-- How to play, link to deploy -->
<!-- roadmap -->