add capture tracker on DOM

css/main.css

@@ -86,7 +86,7 @@ content {
   box-shadow: -1vmin 2vmin 3vmin rgba(83, 53, 35, 0.61);
 }
 
-.caps {
+.caps-space {
   color: #FFF;
   order: 1;
   margin: 1vh;
@@ -95,6 +95,9 @@ content {
   border-radius: 50%;
   background-color: rgb(116, 48, 17);
   box-shadow: -0.5vmin 1vmin 3vmin rgba(83, 53, 35, 0.61);
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 #board-space {

index.html

@@ -46,7 +46,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 Caps</div>
+      <div id="white-caps-space" class="caps-space"><p id="white-caps">White Caps</p></div>
     </div>
     <div id="board-space">
       <table id="board">
@@ -315,7 +315,7 @@
     </div>
     <div id="black-pos" class="player-pos">
       <div id="black-bowl" class="bowl">Black Bowl</div>
-      <div id="black-caps" class="caps">Black Caps</div>
+      <div id="black-caps-space" class="caps-space"><p id="black-caps">Black Caps</p></div>
       <div id="kifu">
         <table>
           <tr>

js/main.js

@@ -101,9 +101,13 @@ class Point {
     return this.findStone(gameState.turn * -1).filter(val => !val.emptyNeighbor());
   }
   // returns all opposing neighbors that do not have an opposing neighbor
-  checkGroup = () => {
-    return this.findStone(gameState.turn).filter(val => val.emptyNeighbor());
-    // returns first friendly neighbor that has an empty neighbor
+  checkGroup = () => { // return statement works for first layer bubbling
+    // return this.findStone(gameState.turn).filter(val => val.emptyNeighbor());
+    if (!this.findStone(gameState.turn).filter(val => val.emptyNeighbor()).length) {
+
+    }
+
+    // returns all friendly neighbors that have an empty neighbor
   } 
   findStone = (stone) => {
     return this.checkNeighbors().filter(val => {
@@ -122,6 +126,8 @@ class Point {
 
 
 /*----- cached element references -----*/
+const whiteCaps = document.getElementById("white-caps");
+const blackCaps = document.getElementById("black-caps");
 // store modal #menu for displaying game info
 // store 
 
@@ -251,6 +257,7 @@ function init() {
     
 function render(hoverPoint) {
   renderBoard();
+  renderCaps();
   renderPreview(hoverPoint);
 }
 
@@ -261,6 +268,11 @@ function renderBoard() {
   })
 }
 
+function renderCaps() {
+  blackCaps.textContent = gameState.playerState.bCaptures;
+  whiteCaps.textContent = gameState.playerState.wCaptures;
+}
+
 function renderPreview(hoverPoint) {
   boardState.forEach(val => {
     let dot = document.getElementById(`${val.pos[0]},${val.pos[1]}`).childNodes[1].childNodes[0];