finish endgame board calculation logic

css/main.css

@@ -70,7 +70,7 @@ h1 {
 
 h4 {
   font-weight: 600;
-  margin: 1em .25em 0 .25em;
+  margin: 1em .25em 1em .25em;
   font-size: 110%;
 }
 
@@ -89,6 +89,13 @@ h4 {
   margin: .25em;
 }
 
+#player-meta * .menu-line {
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: baseline;
+  justify-items: flex-start;
+}
+
 div[data-player-meta] {
   width: 100%;
   justify-self: stretch;
@@ -144,22 +151,6 @@ height: 1;
   justify-content: space-between;
 }
 
-input[type=number]::-webkit-inner-spin-button,
-input[type=number]:focus
-{
-
-}
-
-.rank-tick {
-  
-}
-
-.rank-tick li {
-  position: relative;
-  display: flex;
-  flex-wrap: none;
-}
-
 content {
   background-color: #61a6c2;
   display: flex !important;
@@ -411,7 +402,7 @@ td .dot .seki {
 
 }
 
-@media only screen and (min-width: 560px) {
+@media only screen and (min-width: 591px) {
 
   #player-meta {
     flex-direction: row;

index.html

@@ -34,16 +34,24 @@
           <div data-player-meta="black">
             <h4 class="menu-heading">Black</h4>
               <span class="menu-heading">Name:</span><input type="text" name="black-name">
+            <div class="menu-line">
               <span class="menu-heading">Rank:</span><span id="black-rank">9k</span><input type="button" id="black-rank-up" value="▲"><input type="button" id="black-rank-down" value="▼">
+            </div>
+            <div class="menu-line">
               <input type="checkbox" name="black-rank-certain"><label for="black-rank-certain">Rank Certainty</label>
             </div>
+          </div>
           <div data-player-meta="white">
             <h4 class="menu-heading">White</h4>
               <span class="menu-heading">Name:</span><input type="text" name="white-name">
+            <div class="menu-heading">
               <span class="menu-heading">Rank:</span><span id="white-rank">9k</span><input type="button" id="white-rank-up" value="▲"><input type="button" id="white-rank-down" value="▼">
+            </div>
+            <div class="menu-heading">
               <input type="checkbox" name="white-rank-certain"><label for="white-rank-certain">Rank Certainty</label>
             </div>
           </div>
+        </div>
           <div id="game-record-space">
             <p id="instructions"><span class="menu-heading">Welcome to Browser Go!</span><br><br>If this is your first time playing Go, please see 
               <a href="https://www.youtube.com/watch?v=gECcsSeRcNo" target="_blank">this great tutorial video.</a><br><br>

js/main.js

@@ -189,7 +189,6 @@ class Point {
       }
     }
     cycleTerritory = () => {
-      console.log(this);
       if (this.stone) {
         this.groupMembers.forEach(pt => pt.territory = pt.territory * -1);
       } else {
@@ -345,10 +344,7 @@ function clickMenu() {
 
 function startMenu() {
   modalEl.style.visibility = 'visible';
-  changeUpdateKomi();
-  changeUpdateHandicap();
-  clickUpdatePlayerMeta();
-  
+  renderMenu;
 }
 
 function clickCloseMenu(evt) {
@@ -491,7 +487,7 @@ function getDate() {
 function init() {
   gameState.gameMeta.date = getDate();
   gameState.komi = 5.5; // get komi from player input
-  // startMenu();
+  startMenu();
   gameState.winner = null;
   gameState.pass = null;
   // gameState.handicap = ; // get handicap from player input
@@ -587,14 +583,12 @@ function calculateWinner() {
     }
     return acc;
   }, 0);
-  console.log(whiteTerritory);
   let blackTerritory = boardState.reduce((acc, pt) => {
     if (pt.territory === 1 && pt.stone !== 1) {
       return acc + (pt.stone === 0 ? 1 : 2);
     }
     return acc;
   }, 0);
-  console.log(blackTerritory);
   gameState.playerState.wScore =
     gameState.playerState.wCaptures
     + (gameState.komi < 0 ? gameState.komi * -1 : 0)
@@ -609,28 +603,36 @@ function calculateWinner() {
 }
 
 function endGameSetTerritory() {
-  // boardState.forEach(pt => { 
-  //   pt.territory = pt.stone ? pt.stone : 'd'
-  // });
   let emptyPoints = boardState.filter(pt => !pt.stone);
   emptyPoints.forEach(pt => pt.joinGroup());
   emptyPointSetTerritory(emptyPoints);
-  // boardState.filter(pt => {
-  //   return pt.groupMembers.length < 6 && pt.stone
-  // }).forEach(pt => pt.territory = pt.stone * -1);
+  groupsMarkDeadLive();
+}
+
+function groupsMarkDeadLive() {
+  boardState.filter(pt => (!pt.territory ))
+    .forEach(pt => {
+      debugger;
+      if (pt.groupMembers.some(grpMem => {
+        return grpMem.checkNeighbors().some(nbr => nbr.territory === pt.stone && nbr.stone === 0)
+      })) {
+        pt.groupMembers.forEach(grpMem => grpMem.territory = pt.stone);
+      }
+    });
+  boardState.filter(pt => (!pt.territory)).forEach(pt => {
+    pt.territory = pt.stone * -1;
+  });  
 }
 
 function emptyPointSetTerritory(emptyPoints) {
   emptyPoints.filter(pt => !pt.territory && pt.checkNeighbors().filter(nbr => nbr.stone !== 0))
     .forEach(pt => {
-      console.log(pt);
-      let b = pt.groupMembers.reduce((acc, rdcPt) => {
-        let bNbr = rdcPt.checkNeighbors().filter(nbr => nbr.stone === 1).length;
+      let b = pt.groupMembers.reduce((acc, grpMem) => {
+        let bNbr = grpMem.checkNeighbors().filter(nbr => nbr.stone === 1).length;
         return acc + bNbr;
       }, 0);
-      let w = pt.groupMembers.reduce((acc, rdcPt) => {
-        debugger;
-        let wNbr = rdcPt.checkNeighbors().filter(nbr => nbr.stone === -1).length;
+      let w = pt.groupMembers.reduce((acc, grpMem) => {
+        let wNbr = grpMem.checkNeighbors().filter(nbr => nbr.stone === -1).length;
         return acc + wNbr;
       }, 0);
       pt.groupMembers.forEach(grp => {