add styling to capture tray, bowl, board

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
 
 <!-- describe go with images of game-->

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;
+  }
+
   
 }
 

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

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
+
+<!-- describe go with images of game-->
+
+<!-- List of technologies used -->
+
+<!-- How to play, link to deploy -->
+
+<!-- roadmap -->