fix capture jamming in long groups bug
This commit is contained in:
Sorrel Bri
parent
75b2feca43
commit
48c061919f
3 changed files with 172 additions and 100 deletions
12
css/main.css
12
css/main.css
|
|
@ -12,12 +12,13 @@ body {
|
|||
display: flex;
|
||||
position: fixed;
|
||||
z-index: 2;
|
||||
display: none;
|
||||
/* display: none; */
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background-color: rgba(0,0,0,0.3);
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
#menu {
|
||||
|
|
@ -98,6 +99,7 @@ content {
|
|||
color: #FFF;
|
||||
background-color: rgba(0,0,0,0.3);
|
||||
padding: .5em;
|
||||
cursor: grab;
|
||||
}
|
||||
|
||||
.bowl[data-turn] {
|
||||
|
|
@ -168,19 +170,19 @@ content {
|
|||
background: conic-gradient(#000 0%, rgba(0,0,0,0) 1%, rgba(0,0,0,0) 49%, #000 50%, rgba(0,0,0,0) 51%, rgba(0,0,0,0) 74%, #000 75%, rgba(0,0,0,0) 76%, rgba(0,0,0,0) 99%, #000 100%);
|
||||
}
|
||||
|
||||
#board-space td[id="1,1"] {
|
||||
#board-space td[id="1-1"] {
|
||||
background: conic-gradient( rgba(0,0,0,0) 24%, #000 25%, rgba(0,0,0,0) 26%, rgba(0,0,0,0) 49%, #000 50%, rgba(0,0,0,0) 51%);
|
||||
}
|
||||
|
||||
#board-space td[id="1,9"] {
|
||||
#board-space td[id="1-9"] {
|
||||
background: conic-gradient( rgba(0,0,0,0) 49%, #000 50%, rgba(0,0,0,0) 51%, rgba(0,0,0,0) 74%, #000 75%, rgba(0,0,0,0) 76% );
|
||||
}
|
||||
|
||||
#board-space td[id="9,1"] {
|
||||
#board-space td[id="9-1"] {
|
||||
background: conic-gradient(#000 0%, rgba(0,0,0,0) 1%, rgba(0,0,0,0) 24%, #000 25%, rgba(0,0,0,0) 26%, rgba(0,0,0,0) 99%, #000 100%);
|
||||
}
|
||||
|
||||
#board-space td[id="9,9"] {
|
||||
#board-space td[id="9-9"] {
|
||||
background: conic-gradient(#000 0%, rgba(0,0,0,0) 1%, rgba(0,0,0,0) 74%, #000 75%, rgba(0,0,0,0) 76%, rgba(0,0,0,0) 99%, #000 100%);
|
||||
}
|
||||
|
||||
|
|
|
|||
162
index.html
162
index.html
|
|
@ -51,263 +51,263 @@
|
|||
<div id="board-space">
|
||||
<table id="board">
|
||||
<tr id="row-1">
|
||||
<td id="1,1">
|
||||
<td id="1-1">
|
||||
<div class="stone"><div class="dot"></div></div>
|
||||
</td>
|
||||
<td id="1,2">
|
||||
<td id="1-2">
|
||||
<div class="stone"><div class="dot"></div></div>
|
||||
</td>
|
||||
<td id="1,3">
|
||||
<td id="1-3">
|
||||
<div class="stone"><div class="dot"></div></div>
|
||||
</td>
|
||||
<td id="1,4">
|
||||
<td id="1-4">
|
||||
<div class="stone"><div class="dot"></div></div>
|
||||
</td>
|
||||
<td id="1,5">
|
||||
<td id="1-5">
|
||||
<div class="stone"><div class="dot"></div></div>
|
||||
</td>
|
||||
<td id="1,6">
|
||||
<td id="1-6">
|
||||
<div class="stone"><div class="dot"></div></div>
|
||||
</td>
|
||||
<td id="1,7">
|
||||
<td id="1-7">
|
||||
<div class="stone"><div class="dot"></div></div>
|
||||
</td>
|
||||
<td id="1,8">
|
||||
<td id="1-8">
|
||||
<div class="stone"><div class="dot"></div></div>
|
||||
</td>
|
||||
<td id="1,9">
|
||||
<td id="1-9">
|
||||
<div class="stone"><div class="dot"></div></div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="row-2">
|
||||
<td id="2,1">
|
||||
<td id="2-1">
|
||||
<div class="stone"><div class="dot"></div></div>
|
||||
</td>
|
||||
<td id="2,2">
|
||||
<td id="2-2">
|
||||
<div class="stone"><div class="dot"></div></div>
|
||||
</td>
|
||||
<td id="2,3">
|
||||
<td id="2-3">
|
||||
<div class="stone"><div class="dot"></div></div>
|
||||
</td>
|
||||
<td id="2,4">
|
||||
<td id="2-4">
|
||||
<div class="stone"><div class="dot"></div></div>
|
||||
</td>
|
||||
<td id="2,5">
|
||||
<td id="2-5">
|
||||
<div class="stone"><div class="dot"></div></div>
|
||||
</td>
|
||||
<td id="2,6">
|
||||
<td id="2-6">
|
||||
<div class="stone"><div class="dot"></div></div>
|
||||
</td>
|
||||
<td id="2,7">
|
||||
<td id="2-7">
|
||||
<div class="stone"><div class="dot"></div></div>
|
||||
</td>
|
||||
<td id="2,8">
|
||||
<td id="2-8">
|
||||
<div class="stone"><div class="dot"></div></div>
|
||||
</td>
|
||||
<td id="2,9">
|
||||
<td id="2-9">
|
||||
<div class="stone"><div class="dot"></div></div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="row-3">
|
||||
<td id="3,1">
|
||||
<td id="3-1">
|
||||
<div class="stone"><div class="dot"></div></div>
|
||||
</td>
|
||||
<td id="3,2">
|
||||
<td id="3-2">
|
||||
<div class="stone"><div class="dot"></div></div>
|
||||
</td>
|
||||
<td id="3,3">
|
||||
<td id="3-3">
|
||||
<div class="stone"><div class="dot"></div></div>
|
||||
</td>
|
||||
<td id="3,4">
|
||||
<td id="3-4">
|
||||
<div class="stone"><div class="dot"></div></div>
|
||||
</td>
|
||||
<td id="3,5">
|
||||
<td id="3-5">
|
||||
<div class="stone"><div class="dot"></div></div>
|
||||
</td>
|
||||
<td id="3,6">
|
||||
<td id="3-6">
|
||||
<div class="stone"><div class="dot"></div></div>
|
||||
</td>
|
||||
<td id="3,7">
|
||||
<td id="3-7">
|
||||
<div class="stone"><div class="dot"></div></div>
|
||||
</td>
|
||||
<td id="3,8">
|
||||
<td id="3-8">
|
||||
<div class="stone"><div class="dot"></div></div>
|
||||
</td>
|
||||
<td id="3,9">
|
||||
<td id="3-9">
|
||||
<div class="stone"><div class="dot"></div></div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="row-4">
|
||||
<td id="4,1">
|
||||
<td id="4-1">
|
||||
<div class="stone"><div class="dot"></div></div>
|
||||
</td>
|
||||
<td id="4,2">
|
||||
<td id="4-2">
|
||||
<div class="stone"><div class="dot"></div></div>
|
||||
</td>
|
||||
<td id="4,3">
|
||||
<td id="4-3">
|
||||
<div class="stone"><div class="dot"></div></div>
|
||||
</td>
|
||||
<td id="4,4">
|
||||
<td id="4-4">
|
||||
<div class="stone"><div class="dot"></div></div>
|
||||
</td>
|
||||
<td id="4,5">
|
||||
<td id="4-5">
|
||||
<div class="stone"><div class="dot"></div></div>
|
||||
</td>
|
||||
<td id="4,6">
|
||||
<td id="4-6">
|
||||
<div class="stone"><div class="dot"></div></div>
|
||||
</td>
|
||||
<td id="4,7">
|
||||
<td id="4-7">
|
||||
<div class="stone"><div class="dot"></div></div>
|
||||
</td>
|
||||
<td id="4,8">
|
||||
<td id="4-8">
|
||||
<div class="stone"><div class="dot"></div></div>
|
||||
</td>
|
||||
<td id="4,9">
|
||||
<td id="4-9">
|
||||
<div class="stone"><div class="dot"></div></div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="row-5">
|
||||
<td id="5,1">
|
||||
<td id="5-1">
|
||||
<div class="stone"><div class="dot"></div></div>
|
||||
</td>
|
||||
<td id="5,2">
|
||||
<td id="5-2">
|
||||
<div class="stone"><div class="dot"></div></div>
|
||||
</td>
|
||||
<td id="5,3">
|
||||
<td id="5-3">
|
||||
<div class="stone"><div class="dot"></div></div>
|
||||
</td>
|
||||
<td id="5,4">
|
||||
<td id="5-4">
|
||||
<div class="stone"><div class="dot"></div></div>
|
||||
</td>
|
||||
<td id="5,5">
|
||||
<td id="5-5">
|
||||
<div class="stone"><div class="dot"></div></div>
|
||||
</td>
|
||||
<td id="5,6">
|
||||
<td id="5-6">
|
||||
<div class="stone"><div class="dot"></div></div>
|
||||
</td>
|
||||
<td id="5,7">
|
||||
<td id="5-7">
|
||||
<div class="stone"><div class="dot"></div></div>
|
||||
</td>
|
||||
<td id="5,8">
|
||||
<td id="5-8">
|
||||
<div class="stone"><div class="dot"></div></div>
|
||||
</td>
|
||||
<td id="5,9">
|
||||
<td id="5-9">
|
||||
<div class="stone"><div class="dot"></div></div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="row-6">
|
||||
<td id="6,1">
|
||||
<td id="6-1">
|
||||
<div class="stone"><div class="dot"></div></div>
|
||||
</td>
|
||||
<td id="6,2">
|
||||
<td id="6-2">
|
||||
<div class="stone"><div class="dot"></div></div>
|
||||
</td>
|
||||
<td id="6,3">
|
||||
<td id="6-3">
|
||||
<div class="stone"><div class="dot"></div></div>
|
||||
</td>
|
||||
<td id="6,4">
|
||||
<td id="6-4">
|
||||
<div class="stone"><div class="dot"></div></div>
|
||||
</td>
|
||||
<td id="6,5">
|
||||
<td id="6-5">
|
||||
<div class="stone"><div class="dot"></div></div>
|
||||
</td>
|
||||
<td id="6,6">
|
||||
<td id="6-6">
|
||||
<div class="stone"><div class="dot"></div></div>
|
||||
</td>
|
||||
<td id="6,7">
|
||||
<td id="6-7">
|
||||
<div class="stone"><div class="dot"></div></div>
|
||||
</td>
|
||||
<td id="6,8">
|
||||
<td id="6-8">
|
||||
<div class="stone"><div class="dot"></div></div>
|
||||
</td>
|
||||
<td id="6,9">
|
||||
<td id="6-9">
|
||||
<div class="stone"><div class="dot"></div></div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="row-7">
|
||||
<td id="7,1">
|
||||
<td id="7-1">
|
||||
<div class="stone"><div class="dot"></div></div>
|
||||
</td>
|
||||
<td id="7,2">
|
||||
<td id="7-2">
|
||||
<div class="stone"><div class="dot"></div></div>
|
||||
</td>
|
||||
<td id="7,3">
|
||||
<td id="7-3">
|
||||
<div class="stone"><div class="dot"></div></div>
|
||||
</td>
|
||||
<td id="7,4">
|
||||
<td id="7-4">
|
||||
<div class="stone"><div class="dot"></div></div>
|
||||
</td>
|
||||
<td id="7,5">
|
||||
<td id="7-5">
|
||||
<div class="stone"><div class="dot"></div></div>
|
||||
</td>
|
||||
<td id="7,6">
|
||||
<td id="7-6">
|
||||
<div class="stone"><div class="dot"></div></div>
|
||||
</td>
|
||||
<td id="7,7">
|
||||
<td id="7-7">
|
||||
<div class="stone"><div class="dot"></div></div>
|
||||
</td>
|
||||
<td id="7,8">
|
||||
<td id="7-8">
|
||||
<div class="stone"><div class="dot"></div></div>
|
||||
</td>
|
||||
<td id="7,9">
|
||||
<td id="7-9">
|
||||
<div class="stone"><div class="dot"></div></div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="row-8">
|
||||
<td id="8,1">
|
||||
<td id="8-1">
|
||||
<div class="stone"><div class="dot"></div></div>
|
||||
</td>
|
||||
<td id="8,2">
|
||||
<td id="8-2">
|
||||
<div class="stone"><div class="dot"></div></div>
|
||||
</td>
|
||||
<td id="8,3">
|
||||
<td id="8-3">
|
||||
<div class="stone"><div class="dot"></div></div>
|
||||
</td>
|
||||
<td id="8,4">
|
||||
<td id="8-4">
|
||||
<div class="stone"><div class="dot"></div></div>
|
||||
</td>
|
||||
<td id="8,5">
|
||||
<td id="8-5">
|
||||
<div class="stone"><div class="dot"></div></div>
|
||||
</td>
|
||||
<td id="8,6">
|
||||
<td id="8-6">
|
||||
<div class="stone"><div class="dot"></div></div>
|
||||
</td>
|
||||
<td id="8,7">
|
||||
<td id="8-7">
|
||||
<div class="stone"><div class="dot"></div></div>
|
||||
</td>
|
||||
<td id="8,8">
|
||||
<td id="8-8">
|
||||
<div class="stone"><div class="dot"></div></div>
|
||||
</td>
|
||||
<td id="8,9">
|
||||
<td id="8-9">
|
||||
<div class="stone"><div class="dot"></div></div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="row-9">
|
||||
<td id="9,1">
|
||||
<td id="9-1">
|
||||
<div class="stone"><div class="dot"></div></div>
|
||||
</td>
|
||||
<td id="9,2">
|
||||
<td id="9-2">
|
||||
<div class="stone"><div class="dot"></div></div>
|
||||
</td>
|
||||
<td id="9,3">
|
||||
<td id="9-3">
|
||||
<div class="stone"><div class="dot"></div></div>
|
||||
</td>
|
||||
<td id="9,4">
|
||||
<td id="9-4">
|
||||
<div class="stone"><div class="dot"></div></div>
|
||||
</td>
|
||||
<td id="9,5">
|
||||
<td id="9-5">
|
||||
<div class="stone"><div class="dot"></div></div>
|
||||
</td>
|
||||
<td id="9,6">
|
||||
<td id="9-6">
|
||||
<div class="stone"><div class="dot"></div></div>
|
||||
</td>
|
||||
<td id="9,7">
|
||||
<td id="9-7">
|
||||
<div class="stone"><div class="dot"></div></div>
|
||||
</td>
|
||||
<td id="9,8">
|
||||
<td id="9-8">
|
||||
<div class="stone"><div class="dot"></div></div>
|
||||
</td>
|
||||
<td id="9,9">
|
||||
<td id="9-9">
|
||||
<div class="stone"><div class="dot"></div></div>
|
||||
</td>
|
||||
</tr>
|
||||
|
|
|
|||
98
js/main.js
98
js/main.js
|
|
@ -67,6 +67,7 @@ class Point {
|
|||
this.legal;
|
||||
this.chk = false; // this is where 'chk', 'l'
|
||||
this.capturing = [];
|
||||
this.captureChecked = false;
|
||||
this.neighbors = {
|
||||
top: {},
|
||||
btm: {},
|
||||
|
|
@ -102,8 +103,9 @@ class Point {
|
|||
if (opp2.chk === true) continue;
|
||||
opp2.chk = true;
|
||||
if (opp2.getLiberties().length > 0) {
|
||||
opp.chk = false;
|
||||
tempCaps = [];
|
||||
continue;
|
||||
break;
|
||||
}
|
||||
tempCaps.push(opp2);
|
||||
checkCaptureNeighbors(opp2);
|
||||
|
|
@ -116,6 +118,7 @@ class Point {
|
|||
tempCaps = [];
|
||||
if (opp.getLiberties().length > 1) {
|
||||
tempCaps = [];
|
||||
opp.chk = false;
|
||||
continue;
|
||||
}
|
||||
console.log(opp);
|
||||
|
|
@ -124,6 +127,9 @@ class Point {
|
|||
checkCaptureNeighbors(opp);
|
||||
this.capturing = this.capturing.length ? this.capturing.concat(tempCaps) : tempCaps;
|
||||
}
|
||||
console.log(this);
|
||||
this.captureChecked = true;
|
||||
console.log(this);
|
||||
// filters duplicate points
|
||||
this.capturing = Array.from(new Set(this.capturing));
|
||||
return this.capturing;
|
||||
|
|
@ -165,8 +171,9 @@ class Point {
|
|||
|
||||
|
||||
/*----- cached element references -----*/
|
||||
const whiteCaps = document.getElementById("white-caps");
|
||||
const blackCaps = document.getElementById("black-caps");
|
||||
const whiteCapsEl = document.getElementById("white-caps");
|
||||
const blackCapsEl = document.getElementById("black-caps");
|
||||
const modalEl = document.querySelector('.modal');
|
||||
// store modal #menu for displaying game info
|
||||
// store
|
||||
|
||||
|
|
@ -181,13 +188,53 @@ document.getElementById('board').addEventListener('click', clickPlaceStone);
|
|||
// ::hover-over on either bowl for pass, one-level undo options (CSS implementation)
|
||||
// click on menu items
|
||||
// click on kifu to display game menu
|
||||
document.querySelector('.bowl[data-turn="true"]')
|
||||
document.getElementById('white-bowl').addEventListener('click',clickPass);
|
||||
document.getElementById('black-bowl').addEventListener('click',clickPass);
|
||||
document.getElementById('kifu').addEventListener('click', clickMenu);
|
||||
document.getElementById('white-caps-space').addEventListener('click', clickResign);
|
||||
document.getElementById('black-caps-space').addEventListener('click', clickResign);
|
||||
modalEl.addEventListener('click', clickCloseMenu);
|
||||
|
||||
|
||||
/*----- functions -----*/
|
||||
init();
|
||||
|
||||
let findPointFromIdx = (arr) => boardState.find( point => point.pos[0] === arr[0] && point.pos[1] === arr[1] );
|
||||
|
||||
function clickPass(evt) {
|
||||
if (evt.target.parentElement.id === `${STONES_DATA[gameState.turn]}-bowl`) playerPass();
|
||||
}
|
||||
|
||||
function playerPass() {
|
||||
// display confirmation message
|
||||
clearKo();
|
||||
clearCaptures();
|
||||
gameState.gameRecord.push(`${STONES_DATA[gameState.turn]}: pass`)
|
||||
gameState.pass++;
|
||||
if (gameState.pass === 2) return endGame();
|
||||
gameState.turn*= -1;
|
||||
render();
|
||||
}
|
||||
|
||||
function clickMenu() {
|
||||
modalEl.style.visibility = 'visible';
|
||||
}
|
||||
|
||||
function clickCloseMenu(evt) {
|
||||
evt.stopPropagation();
|
||||
modalEl.style.visibility = 'hidden';
|
||||
}
|
||||
|
||||
function clickResign(evt) {
|
||||
if (evt.target.parentElement.id === `${STONES_DATA[gameState.turn]}-caps-space`) playerResign();
|
||||
}
|
||||
|
||||
function playerResign() {
|
||||
// display confirmation message
|
||||
gameState.gameRecord.push(`${STONES_DATA[gameState.turn]}: resign`)
|
||||
endGame();
|
||||
}
|
||||
|
||||
function hoverPreview(evt) {
|
||||
evt.stopPropagation();
|
||||
// renders preview stone if move is legal
|
||||
|
|
@ -224,9 +271,13 @@ function clearOverlay() { //legal and check
|
|||
}
|
||||
|
||||
function resolveCaptures(point) {
|
||||
if(point.capturing.filter(cap => cap).length ) {
|
||||
if(!point.capturing.length && !point.captureChecked) {
|
||||
console.log('check fail');
|
||||
point.checkCapture();
|
||||
}
|
||||
if(point.capturing.length) {
|
||||
point.capturing.forEach(cap => {
|
||||
gameState.playerState[point.stone > 0 ? 'bCaptures' : 'wCaptures']++;
|
||||
gameState.playerState[gameState.turn > 0 ? 'bCaptures' : 'wCaptures']++;
|
||||
cap.stone = 0;
|
||||
})
|
||||
}
|
||||
|
|
@ -243,26 +294,31 @@ function clickPlaceStone(evt) {
|
|||
let point = findPointFromIdx(placement);
|
||||
//checks that this placement was marked as legal
|
||||
if ( !checkLegal(point) ) return;
|
||||
point.stone = gameState.turn;
|
||||
clearKoClearPass();
|
||||
clearKo();
|
||||
clearPass();
|
||||
resolveCaptures(point);
|
||||
point.stone = gameState.turn;
|
||||
clearCaptures();
|
||||
gameState.gameRecord.push(`${STONES_DATA[gameState.turn]}: ${point.pos}`)
|
||||
gameState.turn*= -1;
|
||||
render();
|
||||
}
|
||||
|
||||
function clearKoClearPass() {
|
||||
function clearKo() {
|
||||
for (let point in boardState) {
|
||||
point = boardState[point];
|
||||
point.stone = point.stone === 'k' ? 0 : point.stone;
|
||||
gameState.pass = 0;
|
||||
}
|
||||
}
|
||||
|
||||
function clearPass() {
|
||||
gameState.pass = 0;
|
||||
}
|
||||
|
||||
function clearCaptures() {
|
||||
for (let point in boardState) {
|
||||
point = boardState[point];
|
||||
point.captureChk = false;
|
||||
point.capturing = [];
|
||||
}
|
||||
}
|
||||
|
|
@ -331,6 +387,16 @@ function init() {
|
|||
boardState[41].stone = -1;
|
||||
boardState[42].stone = 1;
|
||||
boardState[46].stone = 1;
|
||||
boardState[56].stone = 1;
|
||||
boardState[57].stone = 1;
|
||||
boardState[65].stone = -1;
|
||||
boardState[66].stone = -1;
|
||||
boardState[67].stone = 1;
|
||||
boardState[74].stone = -1;
|
||||
boardState[75].stone = -1;
|
||||
boardState[76].stone = 1;
|
||||
|
||||
|
||||
clearCaptures();
|
||||
// end testing board state
|
||||
render();
|
||||
|
|
@ -351,22 +417,26 @@ function renderTurn() {
|
|||
|
||||
function renderBoard() {
|
||||
boardState.forEach(val => {
|
||||
let stoneElem = document.getElementById(`${val.pos[0]},${val.pos[1]}`).childNodes[1];
|
||||
let stoneElem = document.getElementById(`${val.pos[0]}-${val.pos[1]}`).childNodes[1];
|
||||
stoneElem.setAttribute("data-stone", STONES_DATA[val.stone]);
|
||||
})
|
||||
}
|
||||
|
||||
function renderCaps() {
|
||||
blackCaps.textContent = gameState.playerState.bCaptures;
|
||||
whiteCaps.textContent = gameState.playerState.wCaptures;
|
||||
blackCapsEl.textContent = gameState.playerState.bCaptures;
|
||||
whiteCapsEl.textContent = gameState.playerState.wCaptures;
|
||||
}
|
||||
|
||||
function renderPreview(hoverPoint) {
|
||||
boardState.forEach(val => {
|
||||
let dot = document.getElementById(`${val.pos[0]},${val.pos[1]}`).childNodes[1].childNodes[0];
|
||||
let dot = document.getElementById(`${val.pos[0]}-${val.pos[1]}`).childNodes[1].childNodes[0];
|
||||
dot.setAttribute("data-dot", val.legal === true && val.pos[0] === hoverPoint.pos[0] && val.pos[1] === hoverPoint.pos[1] ? DOTS_DATA[gameState.turn] : DOTS_DATA[0]);
|
||||
|
||||
})
|
||||
}
|
||||
|
||||
function endGame() {
|
||||
|
||||
}
|
||||
|
||||
// functions
|
||||
|
|
|
|||
Loading…
Reference in a new issue