diff --git a/README.md b/README.md index ad185c6..63f2069 100644 --- a/README.md +++ b/README.md @@ -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 diff --git a/css/main.css b/css/main.css index 0546037..81e4e27 100644 --- a/css/main.css +++ b/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,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; + } + } diff --git a/images/board.png b/images/board.png new file mode 100644 index 0000000..37fcd07 Binary files /dev/null and b/images/board.png differ diff --git a/js/main.js b/js/main.js index 777e4db..b86eae2 100644 --- a/js/main.js +++ b/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) { diff --git a/version tracking.md b/version tracking.md new file mode 100644 index 0000000..63f2069 --- /dev/null +++ b/version tracking.md @@ -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 + + + + + + + + \ No newline at end of file