create empty neighbor method for legal move check

README.md

@@ -1,4 +1,4 @@
-# Go 
+# Browser Go 
 #### Minimum Deliverable Product
 
 a working game of go for a 9x9 board that

css/main.css

@@ -1,6 +1,11 @@
 * {
   box-sizing: border-box;
   margin: 0;
+  vertical-align: middle;
+}
+
+body {
+  display: block;
 }
 
 .full-screen {
@@ -17,16 +22,22 @@
 
 content {
   background-color: #61a6c2;
-  display: grid;
+  /* display: grid;
   grid-template-columns: 100vmin;
   grid-template-rows: 1fr 100vmin 1fr;
   grid-template-areas:
     "white-pos"
     "board-space"
-    "black-pos"
+    "black-pos"; */
+  display: flex;
+  flex-direction: column; 
+  /* justify-content: flex-end; */
+  justify-content: space-between !important;
+  justify-items: stretch !important;
 }
 
 .player-pos {
+  /* flex-grow: 2; */
   display: flex;
   align-content: center;
   align-items: center;
@@ -34,11 +45,12 @@ content {
 }
 
 .player-pos#white-pos {
-  grid-area: white-pos;
+  /* grid-area: white-pos; */
+  
 }
 
 .player-pos#black-pos {
-  grid-area: black-pos;
+  /* grid-area: black-pos; */
   flex-direction: row-reverse;
 }
 
@@ -48,20 +60,26 @@ content {
 
 .bowl {
   order: -1;
-  margin: 20px;
+  margin: 1vh;
   height: 8vh;
   width: 8vh;
-  border: solid black;
+  /* border: solid black; */
   border-radius: 50%;
+  background-color: rgb(116, 48, 17);
 }
 
 .caps {
   order: 1;
+  margin: 1vh;
+  height: 6vh;
+  width: 6vh;
+  border-radius: 50%;
+  background-color: rgb(116, 48, 17);
 }
 
 #board-space {
   margin: 0 auto;
-  grid-area: board-space;
+  /* grid-area: board-space; */
   display: flex;
   flex-direction: column;
   background-color: #EAB24E;
@@ -90,11 +108,11 @@ td {
   vertical-align: middle;
 }
 
-td[id^="1,"] {
+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%);
 }
 
-#row-9 td {
+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%); 
 }
 
@@ -107,17 +125,17 @@ td[id$="9"] {
 }
 
 td[id="1,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%);
+  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"] {
-  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%);
+  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"] {
-  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%);
+  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"] {
-  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%);
+  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%);
 }
 
 td .stone {

index.html

@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     
-    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" type="stylesheet">
+    <!-- <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" type="stylesheet"> -->
     <link rel="stylesheet" href="css/reset.css" type="text/css">
     <link rel="stylesheet" href="css/main.css" type="text/css" />    
     <!-- <script defer src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> -->
@@ -20,7 +20,7 @@
   <content>
     <div id="white-pos" class="player-pos">
       <div id="white-bowl" class="bowl">White Bowl</div>
-      <div id="white-caps" class="caps">White Captures</div>
+      <div id="white-caps" class="caps">White Caps</div>
     </div>
     <div id="board-space">
       <table id="board">

js/main.js

@@ -12,7 +12,6 @@ const DOTS_DATA = {
   '0': 'none',
   '1': 'black',
   'd': 'dame',
-  'l': 'legal',
   's': 'seki'
 }
 
@@ -69,28 +68,58 @@ class Point {
       btm: {},
       lft: {},
       rgt: {}
-    },
+    }
-    // neighbor exists it's point is stored as { rPos, cPos}
     this.neighbors.top = x > 1 ? [ x - 1, y ] : null;
     this.neighbors.btm = x < gameState.boardSize ? [ x + 1, y ] : null;
     this.neighbors.rgt = y > 1 ? [ x, y - 1 ] : null;
     this.neighbors.lft = y < gameState.boardSize ? [ x, y + 1 ] : null;
-    // checkLegal: function() {
+  } 
-    //   this.cellValue = (for neighbor in this.neighbors) {
+  // first 
-    //     boardState.find( val => {
+  checkNeighbors = () => {
-    //       if ( val.pos === neighbor.pos && val.stone = 0) { /*cell empty*/ }
+    let neighborsArr = [];
-    //     });
+    for ( let neighbor in this.neighbors ) {
-    //   }
+      let nbr = this.neighbors[neighbor];
-    //   }
+      console.log(nbr !== null)
+      // neighbor exists it's point is stored as { rPos, cPos}
+      if ( nbr !== null ) {
+      neighborsArr.push(boardState.find( val =>  val.pos[0] === nbr[0] && val.pos[1] === nbr[1] ))
       }
     };
+    // returns array of existing neighbors to calling function
+    return neighborsArr;
+  }
+  emptyNeighbor = () => {
+    let neighborsArr = this.checkNeighbors();
+    return !!neighborsArr.find(val => val.stone === 0);
+    // return true if neighboring point is empty;
+  }
+  captureNeighbor = () => {
+    let neighborsArr = this.checkNeighbors();
+    // neighborsArr.find(val => val.point === turn * -1 );
+    // console.log(neighborsArr.find(val => val.point === turn * -1 ))
+  }
+  // captureNeighbor = ()
+  // livingNeighbor()
+}
+
+
     
     // boardState [point objects-contain overlay] lastState (created from boardState)
-let boardState = [ new Point(1,1), new Point(1,2), new Point(1,3),
+let boardState = [ new Point(1,1), new Point(1,2), new Point(1,3), new Point(1,4), new Point(1,5), new Point(1,6), new Point(1,7), new Point(1,8), new Point(1,9),
-  new Point(2,1), new Point(2,2), new Point(2,3),
+  new Point(2,1), new Point(2,2), new Point(2,3), new Point(2,4), new Point(2,5), new Point(2,6), new Point(2,7), new Point(2,8), new Point(2,9),
-  new Point(3,1), new Point(3,2), new Point(3,3),
+  new Point(3,1), new Point(3,2), new Point(3,3), new Point(3,4), new Point(3,5), new Point(3,6), new Point(3,7), new Point(3,8), new Point(3,9),
+  new Point(4,1), new Point(4,2), new Point(4,3), new Point(4,4), new Point(4,5), new Point(4,6), new Point(4,7), new Point(4,8), new Point(4,9),
+  new Point(5,1), new Point(5,2), new Point(5,3), new Point(5,4), new Point(5,5), new Point(5,6), new Point(5,7), new Point(5,8), new Point(5,9),
+  new Point(6,1), new Point(6,2), new Point(6,3), new Point(6,4), new Point(6,5), new Point(6,6), new Point(6,7), new Point(6,8), new Point(6,9),
+  new Point(7,1), new Point(7,2), new Point(7,3), new Point(7,4), new Point(7,5), new Point(7,6), new Point(7,7), new Point(7,8), new Point(7,9),
+  new Point(8,1), new Point(8,2), new Point(8,3), new Point(8,4), new Point(8,5), new Point(8,6), new Point(8,7), new Point(8,8), new Point(8,9),
+  new Point(9,1), new Point(9,2), new Point(9,3), new Point(9,4), new Point(9,5), new Point(9,6), new Point(9,7), new Point(9,8), new Point(9,9)
 ];
 
+boardState[0].checkNeighbors();
+boardState[1].checkNeighbors();
+boardState[2].checkNeighbors();
+
     
     // modeling 1,1 point for 
   // define boardState and overlay as 2d 9x9 arrays
@@ -123,19 +152,37 @@ init();
 let findPointFromIdx = (arr) => boardState.find( point => point.pos[0] === arr[0] && point.pos[1] === arr[1] );
 
 function checkLegal(evt) {
-  let hover = [ parseInt(evt.target.parentNode.id[0]), parseInt(evt.target.parentNode.id[2]) ];
+  let hover = [ parseInt(evt.target.closest('td').id[0]), parseInt(evt.target.closest('td').id[2]) ];
   let point = findPointFromIdx(hover);
-  //first step in logic: is stone occupied
+  
-  point.overlay = point.stone !== 0 ? 0 : 'l';
+  // working old way assigns legal
+  // point.overlay = point.stone !== 0 ? 0 : 'l'; 
+  
+  // first step in logic: is point occupied, or in ko
+  if (point.stone) return;
+  // 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
+    
+    //if neighboring point is not empty check if enemy group is captured
+    
+  } else {
+    point.overlay = 'l';
+  }
+  // if neighboring point is 
+
+
+
   render(point);
 }
 
 function placeStone(evt) {
   console.log('click!');
 
-  let placement = [ parseInt(evt.target.parentNode.id[0]), parseInt(evt.target.parentNode.id[2]) ];
+  let placement = [ parseInt(evt.target.closest('td').id[0]), parseInt(evt.target.closest('td').id[2]) ];
   // checks for placement and pushes to cell
   let point = findPointFromIdx(placement);
+  // console.log(placement);
   //checks that this placement was marked as legal
   point.stone = point.overlay === 'l' ? gameState.turn : point.stone;
   gameState.turn*= -1;