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] suggests dead groups
- [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
stretch goals
@ -27,10 +27,10 @@ stretch goals
- [ ] add stone placement sounds
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
- [ ] 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
<!-- describe go with images of game-->

View file

@ -73,7 +73,7 @@ h1 {
h4 {
font-weight: 600;
margin: 1em .25em 1em .25em;
margin: .25em;
font-size: 110%;
}
@ -168,7 +168,7 @@ content {
#game-hud p {
font-size: 130%;
width: 50%;
width: 100%;
order: 0;
width: 10vh;
background-color: rgba(0,0,0,0.3);
@ -232,12 +232,12 @@ content {
.caps-space {
color: #FFF;
margin: 3vh;
margin: 1vh;
height: 10vh;
width: 10vh;
border-radius: 50%;
background-color: rgb(116, 48, 17);
box-shadow: -0.5vmin 1vmin 3vmin rgba(83, 53, 35, 0.61);
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 1vmin rgba(83, 53, 35, 0.61);
display: flex;
align-items: center;
justify-content: center;
@ -264,7 +264,10 @@ content {
.name-space h4 {
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 {
@ -273,7 +276,13 @@ content {
grid-template-areas: 100%;
grid-template-columns: 100%;
grid-template-areas:
"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 {
@ -281,8 +290,7 @@ content {
margin: 0 auto;
display: flex;
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%);
padding: 1vmin;
background-image: url(../images/board.png);
z-index: 1;
box-shadow: -2vmin 4vmin 3vmin rgba(145, 92, 23, 0.5);
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%);
}
.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%);
z-index: 3;
}
@ -418,6 +426,8 @@ td .dot[data-dot="dame"] {
}
/* Responsive Design */
@media only screen and (min-width: 500px) {
html {
@ -442,14 +452,29 @@ td .dot[data-dot="dame"] {
@media only screen and (min-width: 570px) {
#board-space .board-9x9 td {
height: 8vh;
width: 8vh;
height: 7.5vh;
width: 7.5vh;
}
#board-space .board-13x13 td {
height: 5.5vh;
width: 5.5vh;
}
height: 5vh;
width: 5vh;
}
.bowl {
order: -1;
margin: 3vh;
height: 10vh;
width: 10vh;
}
.caps-space {
color: #FFF;
margin: 2vh;
height: 7vh;
width: 7vh;
}
}

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 handiDisplayEl = document.getElementById('handicap');
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 = [
document.querySelectorAll('input[name="board-size"')[0],
document.querySelectorAll('input[name="board-size"')[1],
@ -254,7 +255,7 @@ komiSliderEl.addEventListener('change', changeUpdateKomi);
handiSliderEl.addEventListener('change', changeUpdateHandicap);
document.getElementById('player-meta').addEventListener('click', 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);
boardSizeEl.addEventListener('click', clickBoardSize);
gameStartEl.addEventListener('click', clickSubmitStart);
@ -314,6 +315,12 @@ function clickBoardSize(evt) {
function clickKomiSuggestion(evt) {
evt.preventDefault();
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 handi = HANDI_REC[gameState.boardSize][Math.abs(gameState.playerMeta.w.rank - gameState.playerMeta.b.rank)];
gameState.komi = sugg;
@ -330,8 +337,8 @@ function clickSubmitStart(evt) {
if (gameState.gameMeta.start) return init();
evt.preventDefault();
evt.stopPropagation();
gameState.playerMeta.b.name = blackNameInputEl.value;
gameState.playerMeta.w.name = whiteNameInputEl.value;
gameState.playerMeta.b.name = blackNameInputEl.value || 'black';
gameState.playerMeta.w.name = whiteNameInputEl.value || 'white';
modalEl.style.visibility = 'hidden';
initGame();
}
@ -355,7 +362,10 @@ function renderBoardSizeRadio() {
function renderMenu() {
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()
renderHandiSlider();
renderBoardSizeRadio();
@ -390,7 +400,7 @@ function startMenu() {
function clickCloseMenu(evt) {
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) {

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 -->