add styling to capture tray, bowl, board
This commit is contained in:
Sorrel Bri
parent
f88b9e3fa2
commit
49315f9fe3
5 changed files with 101 additions and 24 deletions
|
|
@ -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-->
|
||||
|
|
|
|||
53
css/main.css
53
css/main.css
|
|
@ -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,15 +452,30 @@ 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;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 700px) {
|
||||
|
|
|
|||
BIN
images/board.png
Normal file
BIN
images/board.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 217 KiB |
22
js/main.js
22
js/main.js
|
|
@ -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
42
version tracking.md
Normal 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 -->
|
||||
Loading…
Reference in a new issue