correct legal move logic for surrounding friendly stones

css/main.css

@@ -56,6 +56,14 @@ content {
 
 #kifu {
   order: 0;
+  height: 10vh;
+  width: 8vh;
+  background-color: #FFF;
+  transform: rotate(-20deg);
+}
+
+#kifu table {
+
 }
 
 .bowl {
@@ -66,15 +74,18 @@ content {
   /* border: solid black; */
   border-radius: 50%;
   background-color: rgb(116, 48, 17);
+  box-shadow: -1vmin 2vmin 3vmin rgba(83, 53, 35, 0.61);
 }
 
 .caps {
+  color: #FFF;
   order: 1;
   margin: 1vh;
   height: 6vh;
   width: 6vh;
   border-radius: 50%;
   background-color: rgb(116, 48, 17);
+  box-shadow: -0.5vmin 1vmin 3vmin rgba(83, 53, 35, 0.61);
 }
 
 #board-space {
@@ -86,9 +97,14 @@ content {
   width: 90vmin;
   height: 90vmin;
   padding: 1vmin;
+  z-index: 1;
+  box-shadow: -2vmin 4vmin 3vmin rgba(145, 92, 23, 0.5);
 }
 
-table {
+#board-space::after {
+}
+
+#board-space table {
   display: flex;
   align-items: stretch;
   justify-content: space-between;
@@ -97,7 +113,7 @@ table {
   margin: auto;
 }
 
-td {
+#board-space td {
   height: 9vmin;
   width: 9vmin;
   background: conic-gradient(#000 0%, rgba(0,0,0,0) 1%, rgba(0,0,0,0) 24%, #000 25%, rgba(0,0,0,0) 26%, rgba(0,0,0,0) 49%, #000 50%, rgba(0,0,0,0) 51%, rgba(0,0,0,0) 74%, #000 75%, rgba(0,0,0,0) 76%, rgba(0,0,0,0) 99%, #000 100%);
@@ -108,33 +124,35 @@ td {
   vertical-align: middle;
 }
 
-td[id^="1"] {
+#board-space td[id^="1"] {
   background: conic-gradient( rgba(0,0,0,0) 24%, #000 25%, rgba(0,0,0,0) 26%, rgba(0,0,0,0) 49%, #000 50%, rgba(0,0,0,0) 51%, rgba(0,0,0,0) 74%, #000 75%, rgba(0,0,0,0) 76%);
 }
 
-td[id^="9"] {
+#board-space td[id^="9"] {
   background: conic-gradient(#000 0%, rgba(0,0,0,0) 1%, rgba(0,0,0,0) 24%, #000 25%, rgba(0,0,0,0) 26%, rgba(0,0,0,0) 74%, #000 75%, rgba(0,0,0,0) 76%, rgba(0,0,0,0) 99%, #000 100%); 
 }
 
-td[id$="1"] {
+#board-space td[id$="1"] {
   background: conic-gradient(#000 0%, rgba(0,0,0,0) 1%, rgba(0,0,0,0) 24%, #000 25%, rgba(0,0,0,0) 26%, rgba(0,0,0,0) 49%, #000 50%, rgba(0,0,0,0) 51%, rgba(0,0,0,0) 99%, #000 100%);
 }
 
-td[id$="9"] {
+#board-space td[id$="9"] {
   background: conic-gradient(#000 0%, rgba(0,0,0,0) 1%, rgba(0,0,0,0) 49%, #000 50%, rgba(0,0,0,0) 51%, rgba(0,0,0,0) 74%, #000 75%, rgba(0,0,0,0) 76%, rgba(0,0,0,0) 99%, #000 100%);
 }
 
-td[id="1,1"] {
+#board-space td[id="1,1"] {
   background: conic-gradient( rgba(0,0,0,0) 24%, #000 25%, rgba(0,0,0,0) 26%, rgba(0,0,0,0) 49%, #000 50%, rgba(0,0,0,0) 51%);
 }
 
-td[id="1,9"] {
+#board-space td[id="1,9"] {
   background: conic-gradient( rgba(0,0,0,0) 49%, #000 50%, rgba(0,0,0,0) 51%, rgba(0,0,0,0) 74%, #000 75%, rgba(0,0,0,0) 76% );
 }
-td[id="9,1"] {
+
+#board-space td[id="9,1"] {
   background: conic-gradient(#000 0%, rgba(0,0,0,0) 1%, rgba(0,0,0,0) 24%, #000 25%, rgba(0,0,0,0) 26%, rgba(0,0,0,0) 99%, #000 100%);
 }
-td[id="9,9"] {
+
+#board-space td[id="9,9"] {
   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%);
 }
 

index.html

@@ -290,7 +290,15 @@
     <div id="black-pos" class="player-pos">
       <div id="black-bowl" class="bowl">Black Bowl</div>
       <div id="black-caps" class="caps">Black Captures</div>
-      <div id="kifu">kifu</div>
+      <div id="kifu">
+        <table>
+          <tr>
+            <td>
+              
+            </td>
+          </tr>
+        </table>  
+        </div>
     </div>
   </content>
 </body>

js/main.js

@@ -95,22 +95,21 @@ class Point {
     // return true if neighboring point is empty;
   }
   checkCapture = () => {
-    let neighborsArr = this.checkNeighbors();
+    return !this.liveGroup(gameState.turn * -1).some(val => val.emptyNeighbor());
-    let oppStones = neighborsArr.filter(val => {
+  }
-      if (val.stone === gameState.turn * -1) return val;
+
+  checkGroup = () => {
+    return this.liveGroup(gameState.turn).some(val => val.emptyNeighbor());
+    // returns first neighbor of turn color that has an empty neighbor
+  } 
+
+  liveGroup = (stone) => {
+    return this.checkNeighbors().filter(val => {
+      if ( val.stone === stone ) return val;
     });
-    console.log(oppStones);
+     //returns an array of neighbors for the value of stone
-    for ( let oppStone in oppStones ) {
-      console.log(oppStones[oppStone])
-      console.log(oppStones[oppStone].emptyNeighbor()) // will need to call something like .liveGroup() instead
-      return oppStones[oppStone].emptyNeighbor(); //return
   }
 }
-  // return true if move would form/join a living friendly group ad
-  // checkGroup = () => {
-  // 
-  // }
-}
 
 let boardCreator = new Array(gameState.boardSize).fill(gameState.boardSize);
 // boardState [point objects-contain overlay] lastState (created from boardState)
@@ -131,7 +130,7 @@ let boardCreator = new Array(gameState.boardSize).fill(gameState.boardSize);
 // input listeners for player names, ranks, rank certainty (editable during game)
 //input lister for handicap + komi (only editable pre-game)
 // ::hover-over on board to preview move (with legal move logic)
-document.getElementById('board').addEventListener('mousemove', checkLegal);
+document.getElementById('board').addEventListener('mousemove', hoverPreview);
 // click on board to play move
 document.getElementById('board').addEventListener('click', placeStone);
 // ::hover-over on either bowl for pass, one-level undo options (CSS implementation)
@@ -143,55 +142,52 @@ init();
 
 let findPointFromIdx = (arr) => boardState.find( point => point.pos[0] === arr[0] && point.pos[1] === arr[1] );
 
-function checkLegal(evt) {
+function hoverPreview(evt) {
+  // renders preview stone if move is legal
   let hover = [ parseInt(evt.target.closest('td').id[0]), parseInt(evt.target.closest('td').id[2]) ];
   let point = findPointFromIdx(hover);
+  if (checkLegal(point)) {
+    point.overlay = 'l';
+    render(point);
+  }
+}
 
-  // working old way assigns legal
+function checkLegal(point) {
-  // point.overlay = point.stone !== 0 ? 0 : 'l'; 
-  
   // first step in logic: is point occupied, or in ko
-  if (point.stone) return;
+  if (point.stone) return false;
+  console.log('reading empty');
+  console.log(point.emptyNeighbor())
   // if point is not empty check if neighboring point is empty
   if (!point.emptyNeighbor()) {
-    //if neighboring point is not empty check if friendly group is alive
-    point.checkCapture();
-    // if (point.checkCapture) return point.overlay = 'l';
-    
     //if neighboring point is not empty check if enemy group is captured
-    // if (point.checkGroup) return point.overlay = 'l'
+    if (!point.checkCapture()) return false;
-    
+    //if neighboring point is not empty check if friendly group is alive
-    
+    if (!point.checkGroup()) return false;
-    return;
+    return true;
-  } else {
-    point.overlay = 'l';
   }
-  // if neighboring point is 
-  
-  
-  
   render(point);
+  return true;
 }
 
 function placeStone(evt) {
-  console.log('click!');
-  
-  let placement = [ parseInt(evt.target.closest('td').id[0]), parseInt(evt.target.closest('td').id[2]) ];
   // checks for placement and pushes to cell
+  let placement = [ parseInt(evt.target.closest('td').id[0]), parseInt(evt.target.closest('td').id[2]) ];
   let point = findPointFromIdx(placement);
-  // console.log(placement);
   //checks that this placement was marked as legal
-  point.stone = point.overlay === 'l' ? gameState.turn : point.stone;
+  if ( !checkLegal(point) ) return;
+  point.stone = gameState.turn;
   gameState.turn*= -1;
+  for (let point in boardState) {
+    point.overlay = '';
+  }
   render();
 }
-
 function init() {
   gameState.winner = null;
-  // gameState.turn = ? : ; // get turn from consequences of player input
   gameState.pass = null;
   // gameState.komi = ; // get komi from player input
   // gameState.handicap = ; // get handicap from player input
+  // gameState.turn = gameState.handicap ? -1 : 1;
   gameState.playerState.bCaptures = 0;
   gameState.playerState.wCaptures = 0;
   // gameState.gameMeta.date = // get from browser window