add render marker for player turn, push move to game record

css/main.css

@@ -84,6 +84,24 @@ content {
   border-radius: 50%;
   background-color: rgb(116, 48, 17);
   box-shadow: -1vmin 2vmin 3vmin rgba(83, 53, 35, 0.61);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.bowl p {
+  display: none;
+}
+
+.bowl[data-turn]:hover p {
+  display: block;
+  color: #FFF;
+  background-color: rgba(0,0,0,0.3);
+  padding: .5em;
+}
+
+.bowl[data-turn] {
+  box-shadow: 0 0 3vh 3vh rgb(31, 255, 2);
 }
 
 .caps-space {

index.html

@@ -45,8 +45,8 @@
   </div>
   <content>
     <div id="white-pos" class="player-pos">
-      <div id="white-bowl" class="bowl">White Bowl</div>
-      <div id="white-caps-space" class="caps-space"><p id="white-caps">White Caps</p></div>
+      <div id="white-bowl" class="bowl"><p>Pass?</p></div>
+      <div id="white-caps-space" class="caps-space"><p id="white-caps"></p></div>
     </div>
     <div id="board-space">
       <table id="board">
@@ -314,8 +314,8 @@
       </table>
     </div>
     <div id="black-pos" class="player-pos">
-      <div id="black-bowl" class="bowl">Black Bowl</div>
-      <div id="black-caps-space" class="caps-space"><p id="black-caps">Black Caps</p></div>
+      <div id="black-bowl" class="bowl"><p>Pass?</p></div>
+      <div id="black-caps-space" class="caps-space"><p id="black-caps"></p></div>
       <div id="kifu">
         <table>
           <tr>

js/main.js

@@ -78,12 +78,10 @@ class Point {
     this.neighbors.rgt = y > 1 ? [ x, y - 1 ] : null;
     this.neighbors.lft = y < gameState.boardSize ? [ x, y + 1 ] : null;
   } 
-  // first 
   checkNeighbors = () => {
     let neighborsArr = [];
     for ( let neighbor in this.neighbors ) {
       let nbr = this.neighbors[neighbor];
-      // console.log(nbr);
       // 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] ))
@@ -105,7 +103,7 @@ class Point {
         opp2.chk = true;
         tempCaps.push(opp2);
         if (opp2.getLiberties().length) return false;
-        checkCaptureNeighbors(opp2)
+        checkCaptureNeighbors(opp2);
       })
     }
     let opps = this.checkNeighbors().filter(nbr => nbr.stone === gameState.turn * -1);
@@ -182,6 +180,7 @@ document.getElementById('board').addEventListener('click', placeStone);
 // ::hover-over on either bowl for pass, one-level undo options (CSS implementation)
 // click on menu items 
 // click on kifu to display game menu
+document.querySelector('.bowl[data-turn="true"]')
 
 /*----- functions -----*/
 init();
@@ -195,7 +194,7 @@ function hoverPreview(evt) {
   let point = findPointFromIdx(hover);
   if (checkLegal(point)) {
     point.legal = true; // legal
-    render(point);
+    renderPreview(point);
   }
 }
 
@@ -203,6 +202,7 @@ function checkLegal(point) {
   clearOverlay();
   // first step in logic: is point occupied, or in ko
   point.chk = true; //check
+  console.log(!!point.stone);
   if (point.stone) return false;
   console.log('getting here')
   // if point is not empty check if liberties
@@ -217,7 +217,6 @@ function checkLegal(point) {
     return false;
   }
   // console.log('getting here')
-  render(point);
   return true;
 }
 
@@ -232,7 +231,7 @@ function clearOverlay() { //legal and check
 function resolveCaptures(point) {
   console.log('getting here');
   point.checkCapture();
-  if( point.capturing.length ) {
+  if(point.capturing.filter(cap => cap).length ) {
     point.capturing.forEach(cap => {
       gameState.playerState[cap.stone > 0 ? 'bCaptures' : 'wCaptures']++;
       cap.stone = 0;
@@ -255,7 +254,8 @@ function placeStone(evt) {
   point.stone = gameState.turn;
   clearKoClearPass();
   resolveCaptures(point);
-  clearCaptures(point);
+  clearCaptures();
+  gameState.gameRecord.push(`${STONES_DATA[gameState.turn]}: ${point.pos}`)
   gameState.turn*= -1;
   render();
 }
@@ -339,15 +339,23 @@ function init() {
   boardState[41].stone = -1;
   boardState[42].stone = 1;
   boardState[46].stone = 1;
-  
+  clearCaptures();
   // end testing board state
   render();
 };
     
 function render(hoverPoint) {
+  console.log(gameState.gameRecord)
+  gameState.gameRecord.length? renderTurn() : renderFirstTurn();
   renderBoard();
   renderCaps();
-  renderPreview(hoverPoint);
+}
+
+function renderFirstTurn() {
+  document.getElementById(`${STONES_DATA[gameState.turn]}-bowl`).toggleAttribute('data-turn');
+}
+function renderTurn() {
+  document.querySelectorAll(`.bowl`).forEach(bowl => bowl. toggleAttribute('data-turn'));
 }
 
 function renderBoard() {