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; margin: 1vmin;
} }
#confirm {
visibility: hidden;
}
div[data-player-meta] label { div[data-player-meta] label {
margin: .25em; margin: .25em;
font-size: 100%; font-size: 100%;
@ -109,6 +113,8 @@ div[data-player-meta] label {
padding: .5em; padding: .5em;
line-height: 1.5; line-height: 1.5;
overflow: scroll; overflow: scroll;
height: 100%;
width: 100%
} }
#instructions, #game-record{ #instructions, #game-record{
@ -228,6 +234,18 @@ content {
justify-content: center; 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 { .name-space {
order: 1; order: 1;
display: flex; display: flex;
@ -240,12 +258,29 @@ content {
color: rgb(255,240,230) 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 { #board-space {
grid-area: board;
margin: 0 auto; margin: 0 auto;
/* grid-area: board-space; */ /* grid-area: board-space; */
display: flex; display: flex;
flex-direction: column; flex-direction: column;
background-color: #EAB24E; background-color: rgba(234, 178, 78, 1);
/* width: 90vmin; */ /* width: 90vmin; */
/* height: 90vmin; */ /* height: 90vmin; */
padding: 1vmin; padding: 1vmin;
@ -254,6 +289,7 @@ content {
flex: 1; flex: 1;
} }
#board-space table { #board-space table {
display: flex; display: flex;
align-items: stretch; align-items: stretch;

View file

@ -38,7 +38,7 @@
</div> </div>
</div> </div>
<div id="game-record-space"> <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> <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 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> 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-bowl" class="bowl"><p>Pass?</p><div id="stone-image"></div></div>
<div id="white-player-space" class="name-space"> <div id="white-player-space" class="name-space">
<h4 id="white-player-name">Test Name rk</h4> <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> </div>
<div id="board-container">
<div id="board-space"> <div id="board-space">
<table id="board"> <table id="board">
<tr id="row-1"> <tr id="row-1">
@ -328,12 +332,16 @@
</tr> </tr>
</table> </table>
</div> </div>
<div id="table-underlay">
</div>
</div>
<div id="black-pos" class="player-pos"> <div id="black-pos" class="player-pos">
<div id="black-bowl" class="bowl"><p>Pass?</p></div> <div id="black-bowl" class="bowl"><p>Pass?</p></div>
<div id="black-player-space" class="name-space"> <div id="black-player-space" class="name-space">
<h4 id="black-player-name">Test Name rk</h4> <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> <table>
<tr> <tr>
<td> <td>

View file

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