From 0a8fff19025a4d38dfa06f79550fd82c7a655f96 Mon Sep 17 00:00:00 2001
From: Sorrel Bri <sorrel@SBJ-comp.hsd1.ca.comcast.net>
Date: Sat, 3 Aug 2019 21:38:31 -0700
Subject: [PATCH] add capture tracker on DOM

---
 css/main.css |  5 ++++-
 index.html   |  4 ++--
 js/main.js   | 18 +++++++++++++++---
 3 files changed, 21 insertions(+), 6 deletions(-)

diff --git a/css/main.css b/css/main.css
index 157ce5c..15ce806 100644
--- a/css/main.css
+++ b/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 {
diff --git a/index.html b/index.html
index 0adbc49..3b2025a 100644
--- a/index.html
+++ b/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>
diff --git a/js/main.js b/js/main.js
index 87a77f9..df6c08c 100644
--- a/js/main.js
+++ b/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];