add resign and pass endgame

css/main.css

@@ -96,6 +96,10 @@ div[data-player-meta] input {
   margin: 1vmin;
 }
 
+#confirm {
+  visibility: hidden;
+}
+
 div[data-player-meta] label {
   margin: .25em;
   font-size: 100%;
@@ -109,6 +113,8 @@ div[data-player-meta] label {
   padding: .5em;
   line-height: 1.5;
   overflow: scroll;
+  height: 100%;
+  width: 100%
 }
 
 #instructions, #game-record{
@@ -228,6 +234,18 @@ content {
   justify-content: center;
 }
 
+.caps-space :first-child {
+  display: none;
+}
+
+.bowl[data-turn] + .name-space .caps-space:hover :first-child {
+  display: block;
+  position: absolute;
+  background-color: rgba(0,0,0,0.7);
+  padding: .5em;
+  cursor: grab;
+}
+
 .name-space {
   order: 1;
   display: flex;
@@ -240,12 +258,29 @@ content {
   color: rgb(255,240,230)
 }
 
+#board-container {
+  width: 100%;
+  display: grid;
+  grid-template-areas: 100%;
+  grid-template-columns: 100%;
+  grid-template-areas:
+    "board";
+}
+
+#board-underlay {
+  grid-area: board;
+  background-color: rgb(255, 255, 255);
+  width: 100%;
+  height: 100%;
+}
+
 #board-space {
+  grid-area: board;
   margin: 0 auto;
   /* grid-area: board-space; */
   display: flex;
   flex-direction: column;
-  background-color: #EAB24E;
+  background-color: rgba(234, 178, 78, 1);
   /* width: 90vmin; */
   /* height: 90vmin; */
   padding: 1vmin;
@@ -254,6 +289,7 @@ content {
   flex: 1;
 }
 
+
 #board-space table {
   display: flex;
   align-items: stretch;

index.html

@@ -38,7 +38,7 @@
           </div>
         </div>
           <div id="game-record-space">
-            <p id="instructions">Welcome to Browser Go!<br><br>If this is your first time playing Go, please see 
+            <p id="instructions"><span class="menu-heading">Welcome to Browser Go!</span><br><br>If this is your first time playing Go, please see 
               <a href="https://www.youtube.com/watch?v=gECcsSeRcNo" target="_blank">this great tutorial video.</a><br><br>
               To begin a game enter player names and ranks above, then click "Suggest Komi" Browser Go will calculate the appropriate komi based on AGA guidelines.
               To override Browser Go's suggestion, use the sliders above. Be sure to check the 'rank certainty' box if you're club-rated.<br><br>
@@ -60,9 +60,13 @@
       <div id="white-bowl" class="bowl"><p>Pass?</p><div id="stone-image"></div></div>
       <div id="white-player-space" class="name-space">
         <h4 id="white-player-name">Test Name rk</h4>
-        <div id="white-caps-space" class="caps-space"><p id="white-caps"></p></div>
+        <div id="white-caps-space" class="caps-space"><p>Resign?</p><p id="white-caps"></p></div>
+      </div>
+      <div id="game-hud">
+        <p></p>
       </div>
     </div>
+    <div id="board-container">
       <div id="board-space">
         <table id="board">
           <tr id="row-1">
@@ -328,12 +332,16 @@
           </tr>
         </table>
       </div>
+      <div id="table-underlay">
+      </div>
+    </div>
     <div id="black-pos" class="player-pos">
       <div id="black-bowl" class="bowl"><p>Pass?</p></div>
       <div id="black-player-space" class="name-space">
         <h4 id="black-player-name">Test Name rk</h4>
-          <div id="black-caps-space" class="caps-space"><p id="black-caps"></p></div>
+        <div id="black-caps-space" class="caps-space"><p>Resign?</p><p id="black-caps"></p></div>
-        </div>      <div id="kifu">
+      </div>      
+      <div id="kifu">
         <table>
           <tr>
             <td>

js/main.js

@@ -107,13 +107,10 @@ class Point {
     for (let frn of frns) {
       this.groupMembers.push(frn);
     }
-    console.log(this);
-    console.log(this.groupMembers)
     // this.groupMembers = Array.from(new Set(this.groupMembers));
     if (!this.groupMembers.length) return;
     for (let grpMem in this.groupMembers) {
       debugger;
-      console.log(this);
       this.groupMembers = Array.from(new Set(this.groupMembers.concat(this.groupMembers[grpMem].groupMembers)));
     }
     for (let grpMem in this.groupMembers) {
@@ -126,8 +123,6 @@ class Point {
       && nbr.getLiberties().every(liberty => liberty === this));
     for (let opp of opps) {
       if (opp.groupMembers.every(stone => stone.getLiberties().filter(liberty => liberty !== this).length === 0)) {
-        console.log(opp);
-        console.log(opp.groupMembers);
         this.capturing = this.capturing.concat(opp.groupMembers);
       };
     }
@@ -163,8 +158,10 @@ const blackRankDownEl = document.getElementById("black-rank-down");
 const whiteRankEl = document.getElementById("white-rank");
 const whiteRankUpEl = document.getElementById("black-rank-up");
 const whiteRankDownEl = document.getElementById("black-rank-down");
-const blackNameEl = document.querySelector("input[name='black-name']")
+const blackNameInputEl = document.querySelector("input[name='black-name']")
-const whiteNameEl = document.querySelector("input[name='white-name']")
+const whiteNameInputEl = document.querySelector("input[name='white-name']")
+const blackNameDisplayEl = document.querySelector("h4#black-player-name");
+const whiteNameDisplayEl = document.querySelector("h4#white-player-name");
 
 // store modal #menu for displaying game info
 // store 
@@ -206,7 +203,6 @@ function changeUpdateHandicap() {
 }
 
 function clickUpdatePlayerMeta(evt) {
-  evt.stopPropagation;
   switch (evt.target.id) {
     case 'black-rank-up':
       gameState.playerMeta.b.rank++;
@@ -221,14 +217,23 @@ function clickUpdatePlayerMeta(evt) {
       gameState.playerMeta.w.rank--;
       break;
   }
-  console.log(evt);
   if (evt.target.name = 'black-rank-certain') gameState.playerMeta.b.rankCertain = !gameState.playerMeta.b.rankCertain;
   if (evt.target.name = 'white-rank-certain') gameState.playerMeta.w.rankCertain = !gameState.playerMeta.w.rankCertain;
-  if (evt.target.name = 'black-name') gameState.playerMeta.b.name = blackNameEl.value;
-  if (evt.target.name = 'white-name') gameState.playerMeta.w.name = whiteNameEl.value;
-
   blackRankEl.textContent = RANKS[gameState.playerMeta.b.rank];
   whiteRankEl.textContent = RANKS[gameState.playerMeta.w.rank];
+  
+}
+
+function clickKomiSuggestion() {
+  //
+}
+
+function clickSubmitStart() {
+
+  gameState.playerMeta.b.name = blackNameInputEl.value;
+  gameState.playerMeta.w.name = whiteNameInputEl.value;
+  blackNameDisplayEl.textContent = gameState.playerMeta.b.name;
+  whiteNameDisplayEl.textContent = gameState.playerMeta.w.name;
 }
   
 function clickPass(evt) {
@@ -264,7 +269,10 @@ function clickResign(evt) {
 
 function playerResign() {
   // display confirmation message
-  gameState.gameRecord.push(`${STONES_DATA[gameState.turn]}: resign`)
+  if (!confirm('Do you want to resign?')) return;
+
+  gameState.gameRecord.push(`${STONES_DATA[gameState.turn]}: resign`);
+  gameState.winner = STONES_DATA[gameState.turn * -1];
   endGame();
 }
 
@@ -316,11 +324,6 @@ function resolveCaptures(point) {
 }
 
 function checkKo(point, cap) {
-  console.log(point);
-  console.log(point.getLiberties());
-  console.log(cap);
-  console.log(cap.checkNeighbors());
-  console.log(`${STONES_DATA[gameState.turn]}: ${point.pos[0]},${point.pos[1]}`)
   if (!point.getLiberties().length && cap.checkNeighbors().filter(stone => stone.stone === gameState.turn * -1) 
     && point.capturing.length === 1) return true;
 }
@@ -488,20 +491,22 @@ function init() {
 function render(hoverPoint) {
   if (gameState.winner || gameState.pass > 1) {
     renderTerritory();
+    renderMessage();
   }
   gameState.gameRecord.length? renderTurn() : renderFirstTurn();
   renderBoard();
   renderCaps();
 }
 
+function renderMessage() {
+  
+}
+
 function renderTerritory() {
-  console.log('rendering territory')
   boardState.forEach(val => {
     let stoneElem = document.getElementById(`${val.pos[0]}-${val.pos[1]}`).childNodes[1].childNodes[0];
-    console.log(stoneElem)
     stoneElem.setAttribute("data-dot", DOTS_DATA[val.territory]);
   })
-  console.log('rendering finished')
 }
 
 function renderFirstTurn() {
@@ -537,18 +542,21 @@ function renderPreview(hoverPoint) {
 }
 
 function endGameSetTerritory() {
-  console.log('ending game');
   boardState.forEach(pt => { 
-    pt.territory = pt.stone ? 'd' : 'd'
+    pt.territory = pt.stone ? pt.stone : 'd'
-    console.log(pt);
   });
+  boardState.filter(pt => {
+    return pt.groupMembers.length < 6 && pt.stone
+  }).forEach(pt => pt.territory = pt.stone * -1);
 }
 
 function endGame() {
+  if (!gameState.winner)
   endGameSetTerritory()
   
   // join all remaining groups
   // check remaining groups life
+
         // search empty spaces on board for deadShapes
             //  compare spaces to rotations of deadShapes[...]
             // 'd' if empty spaces