add resign and pass endgame

This commit is contained in:
Sorrel Bri 2019-08-06 16:36:39 -07:00
parent 3d9aca00f9
commit 589053dc8d
3 changed files with 346 additions and 294 deletions

View file

@ -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;

View file

@ -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,280 +60,288 @@
<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-space">
<table id="board">
<tr id="row-1">
<td id="1-1">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="1-2">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="1-3">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="1-4">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="1-5">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="1-6">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="1-7">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="1-8">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="1-9">
<div class="stone"><div class="dot"></div></div>
</td>
</tr>
<tr id="row-2">
<td id="2-1">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="2-2">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="2-3">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="2-4">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="2-5">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="2-6">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="2-7">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="2-8">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="2-9">
<div class="stone"><div class="dot"></div></div>
</td>
</tr>
<tr id="row-3">
<td id="3-1">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="3-2">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="3-3">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="3-4">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="3-5">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="3-6">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="3-7">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="3-8">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="3-9">
<div class="stone"><div class="dot"></div></div>
</td>
</tr>
<tr id="row-4">
<td id="4-1">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="4-2">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="4-3">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="4-4">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="4-5">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="4-6">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="4-7">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="4-8">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="4-9">
<div class="stone"><div class="dot"></div></div>
</td>
</tr>
<tr id="row-5">
<td id="5-1">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="5-2">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="5-3">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="5-4">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="5-5">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="5-6">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="5-7">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="5-8">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="5-9">
<div class="stone"><div class="dot"></div></div>
</td>
</tr>
<tr id="row-6">
<td id="6-1">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="6-2">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="6-3">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="6-4">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="6-5">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="6-6">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="6-7">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="6-8">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="6-9">
<div class="stone"><div class="dot"></div></div>
</td>
</tr>
<tr id="row-7">
<td id="7-1">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="7-2">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="7-3">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="7-4">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="7-5">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="7-6">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="7-7">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="7-8">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="7-9">
<div class="stone"><div class="dot"></div></div>
</td>
</tr>
<tr id="row-8">
<td id="8-1">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="8-2">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="8-3">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="8-4">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="8-5">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="8-6">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="8-7">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="8-8">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="8-9">
<div class="stone"><div class="dot"></div></div>
</td>
</tr>
<tr id="row-9">
<td id="9-1">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="9-2">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="9-3">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="9-4">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="9-5">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="9-6">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="9-7">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="9-8">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="9-9">
<div class="stone"><div class="dot"></div></div>
</td>
</tr>
</table>
<div id="board-container">
<div id="board-space">
<table id="board">
<tr id="row-1">
<td id="1-1">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="1-2">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="1-3">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="1-4">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="1-5">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="1-6">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="1-7">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="1-8">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="1-9">
<div class="stone"><div class="dot"></div></div>
</td>
</tr>
<tr id="row-2">
<td id="2-1">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="2-2">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="2-3">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="2-4">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="2-5">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="2-6">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="2-7">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="2-8">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="2-9">
<div class="stone"><div class="dot"></div></div>
</td>
</tr>
<tr id="row-3">
<td id="3-1">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="3-2">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="3-3">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="3-4">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="3-5">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="3-6">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="3-7">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="3-8">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="3-9">
<div class="stone"><div class="dot"></div></div>
</td>
</tr>
<tr id="row-4">
<td id="4-1">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="4-2">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="4-3">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="4-4">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="4-5">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="4-6">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="4-7">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="4-8">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="4-9">
<div class="stone"><div class="dot"></div></div>
</td>
</tr>
<tr id="row-5">
<td id="5-1">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="5-2">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="5-3">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="5-4">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="5-5">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="5-6">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="5-7">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="5-8">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="5-9">
<div class="stone"><div class="dot"></div></div>
</td>
</tr>
<tr id="row-6">
<td id="6-1">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="6-2">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="6-3">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="6-4">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="6-5">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="6-6">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="6-7">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="6-8">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="6-9">
<div class="stone"><div class="dot"></div></div>
</td>
</tr>
<tr id="row-7">
<td id="7-1">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="7-2">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="7-3">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="7-4">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="7-5">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="7-6">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="7-7">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="7-8">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="7-9">
<div class="stone"><div class="dot"></div></div>
</td>
</tr>
<tr id="row-8">
<td id="8-1">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="8-2">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="8-3">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="8-4">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="8-5">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="8-6">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="8-7">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="8-8">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="8-9">
<div class="stone"><div class="dot"></div></div>
</td>
</tr>
<tr id="row-9">
<td id="9-1">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="9-2">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="9-3">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="9-4">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="9-5">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="9-6">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="9-7">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="9-8">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="9-9">
<div class="stone"><div class="dot"></div></div>
</td>
</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> <div id="kifu">
<h4 id="black-player-name">Test Name rk</h4>
<div id="black-caps-space" class="caps-space"><p>Resign?</p><p id="black-caps"></p></div>
</div>
<div id="kifu">
<table>
<tr>
<td>

View file

@ -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 whiteNameEl = document.querySelector("input[name='white-name']")
const blackNameInputEl = document.querySelector("input[name='black-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'
console.log(pt);
pt.territory = pt.stone ? pt.stone : 'd'
});
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