oxaliq/browser-go-proto
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

fix capture jamming in long groups bug

Browse source
This commit is contained in:
Sorrel Bri 2019-08-05 16:13:23 -07:00
parent 75b2feca43
commit 48c061919f
3 changed files with 172 additions and 100 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
css/main.css
View file

@ -12,12 +12,13 @@ body {
display: flex; display: flex;
position: fixed; position: fixed;
z-index: 2; z-index: 2;
display: none; /* display: none; */
width: 100vw; width: 100vw;
height: 100vh; height: 100vh;
background-color: rgba(0,0,0,0.3); background-color: rgba(0,0,0,0.3);
align-items: center; align-items: center;
justify-content: center; justify-content: center;
visibility: hidden;
} }
#menu { #menu {
@ -98,6 +99,7 @@ content {
color: #FFF; color: #FFF;
background-color: rgba(0,0,0,0.3); background-color: rgba(0,0,0,0.3);
padding: .5em; padding: .5em;
cursor: grab;
} }
.bowl[data-turn] { .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%); 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%); 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% ); 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%); 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%); 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
View file

@ -51,263 +51,263 @@
<div id="board-space"> <div id="board-space">
<table id="board"> <table id="board">
<tr id="row-1"> <tr id="row-1">
<td id="1,1"> <td id="1-1">
<div class="stone"><div class="dot"></div></div> <div class="stone"><div class="dot"></div></div>
</td> </td>
<td id="1,2"> <td id="1-2">
<div class="stone"><div class="dot"></div></div> <div class="stone"><div class="dot"></div></div>
</td> </td>
<td id="1,3"> <td id="1-3">
<div class="stone"><div class="dot"></div></div> <div class="stone"><div class="dot"></div></div>
</td> </td>
<td id="1,4"> <td id="1-4">
<div class="stone"><div class="dot"></div></div> <div class="stone"><div class="dot"></div></div>
</td> </td>
<td id="1,5"> <td id="1-5">
<div class="stone"><div class="dot"></div></div> <div class="stone"><div class="dot"></div></div>
</td> </td>
<td id="1,6"> <td id="1-6">
<div class="stone"><div class="dot"></div></div> <div class="stone"><div class="dot"></div></div>
</td> </td>
<td id="1,7"> <td id="1-7">
<div class="stone"><div class="dot"></div></div> <div class="stone"><div class="dot"></div></div>
</td> </td>
<td id="1,8"> <td id="1-8">
<div class="stone"><div class="dot"></div></div> <div class="stone"><div class="dot"></div></div>
</td> </td>
<td id="1,9"> <td id="1-9">
<div class="stone"><div class="dot"></div></div> <div class="stone"><div class="dot"></div></div>
</td> </td>
</tr> </tr>
<tr id="row-2"> <tr id="row-2">
<td id="2,1"> <td id="2-1">
<div class="stone"><div class="dot"></div></div> <div class="stone"><div class="dot"></div></div>
</td> </td>
<td id="2,2"> <td id="2-2">
<div class="stone"><div class="dot"></div></div> <div class="stone"><div class="dot"></div></div>
</td> </td>
<td id="2,3"> <td id="2-3">
<div class="stone"><div class="dot"></div></div> <div class="stone"><div class="dot"></div></div>
</td> </td>
<td id="2,4"> <td id="2-4">
<div class="stone"><div class="dot"></div></div> <div class="stone"><div class="dot"></div></div>
</td> </td>
<td id="2,5"> <td id="2-5">
<div class="stone"><div class="dot"></div></div> <div class="stone"><div class="dot"></div></div>
</td> </td>
<td id="2,6"> <td id="2-6">
<div class="stone"><div class="dot"></div></div> <div class="stone"><div class="dot"></div></div>
</td> </td>
<td id="2,7"> <td id="2-7">
<div class="stone"><div class="dot"></div></div> <div class="stone"><div class="dot"></div></div>
</td> </td>
<td id="2,8"> <td id="2-8">
<div class="stone"><div class="dot"></div></div> <div class="stone"><div class="dot"></div></div>
</td> </td>
<td id="2,9"> <td id="2-9">
<div class="stone"><div class="dot"></div></div> <div class="stone"><div class="dot"></div></div>
</td> </td>
</tr> </tr>
<tr id="row-3"> <tr id="row-3">
<td id="3,1"> <td id="3-1">
<div class="stone"><div class="dot"></div></div> <div class="stone"><div class="dot"></div></div>
</td> </td>
<td id="3,2"> <td id="3-2">
<div class="stone"><div class="dot"></div></div> <div class="stone"><div class="dot"></div></div>
</td> </td>
<td id="3,3"> <td id="3-3">
<div class="stone"><div class="dot"></div></div> <div class="stone"><div class="dot"></div></div>
</td> </td>
<td id="3,4"> <td id="3-4">
<div class="stone"><div class="dot"></div></div> <div class="stone"><div class="dot"></div></div>
</td> </td>
<td id="3,5"> <td id="3-5">
<div class="stone"><div class="dot"></div></div> <div class="stone"><div class="dot"></div></div>
</td> </td>
<td id="3,6"> <td id="3-6">
<div class="stone"><div class="dot"></div></div> <div class="stone"><div class="dot"></div></div>
</td> </td>
<td id="3,7"> <td id="3-7">
<div class="stone"><div class="dot"></div></div> <div class="stone"><div class="dot"></div></div>
</td> </td>
<td id="3,8"> <td id="3-8">
<div class="stone"><div class="dot"></div></div> <div class="stone"><div class="dot"></div></div>
</td> </td>
<td id="3,9"> <td id="3-9">
<div class="stone"><div class="dot"></div></div> <div class="stone"><div class="dot"></div></div>
</td> </td>
</tr> </tr>
<tr id="row-4"> <tr id="row-4">
<td id="4,1"> <td id="4-1">
<div class="stone"><div class="dot"></div></div> <div class="stone"><div class="dot"></div></div>
</td> </td>
<td id="4,2"> <td id="4-2">
<div class="stone"><div class="dot"></div></div> <div class="stone"><div class="dot"></div></div>
</td> </td>
<td id="4,3"> <td id="4-3">
<div class="stone"><div class="dot"></div></div> <div class="stone"><div class="dot"></div></div>
</td> </td>
<td id="4,4"> <td id="4-4">
<div class="stone"><div class="dot"></div></div> <div class="stone"><div class="dot"></div></div>
</td> </td>
<td id="4,5"> <td id="4-5">
<div class="stone"><div class="dot"></div></div> <div class="stone"><div class="dot"></div></div>
</td> </td>
<td id="4,6"> <td id="4-6">
<div class="stone"><div class="dot"></div></div> <div class="stone"><div class="dot"></div></div>
</td> </td>
<td id="4,7"> <td id="4-7">
<div class="stone"><div class="dot"></div></div> <div class="stone"><div class="dot"></div></div>
</td> </td>
<td id="4,8"> <td id="4-8">
<div class="stone"><div class="dot"></div></div> <div class="stone"><div class="dot"></div></div>
</td> </td>
<td id="4,9"> <td id="4-9">
<div class="stone"><div class="dot"></div></div> <div class="stone"><div class="dot"></div></div>
</td> </td>
</tr> </tr>
<tr id="row-5"> <tr id="row-5">
<td id="5,1"> <td id="5-1">
<div class="stone"><div class="dot"></div></div> <div class="stone"><div class="dot"></div></div>
</td> </td>
<td id="5,2"> <td id="5-2">
<div class="stone"><div class="dot"></div></div> <div class="stone"><div class="dot"></div></div>
</td> </td>
<td id="5,3"> <td id="5-3">
<div class="stone"><div class="dot"></div></div> <div class="stone"><div class="dot"></div></div>
</td> </td>
<td id="5,4"> <td id="5-4">
<div class="stone"><div class="dot"></div></div> <div class="stone"><div class="dot"></div></div>
</td> </td>
<td id="5,5"> <td id="5-5">
<div class="stone"><div class="dot"></div></div> <div class="stone"><div class="dot"></div></div>
</td> </td>
<td id="5,6"> <td id="5-6">
<div class="stone"><div class="dot"></div></div> <div class="stone"><div class="dot"></div></div>
</td> </td>
<td id="5,7"> <td id="5-7">
<div class="stone"><div class="dot"></div></div> <div class="stone"><div class="dot"></div></div>
</td> </td>
<td id="5,8"> <td id="5-8">
<div class="stone"><div class="dot"></div></div> <div class="stone"><div class="dot"></div></div>
</td> </td>
<td id="5,9"> <td id="5-9">
<div class="stone"><div class="dot"></div></div> <div class="stone"><div class="dot"></div></div>
</td> </td>
</tr> </tr>
<tr id="row-6"> <tr id="row-6">
<td id="6,1"> <td id="6-1">
<div class="stone"><div class="dot"></div></div> <div class="stone"><div class="dot"></div></div>
</td> </td>
<td id="6,2"> <td id="6-2">
<div class="stone"><div class="dot"></div></div> <div class="stone"><div class="dot"></div></div>
</td> </td>
<td id="6,3"> <td id="6-3">
<div class="stone"><div class="dot"></div></div> <div class="stone"><div class="dot"></div></div>
</td> </td>
<td id="6,4"> <td id="6-4">
<div class="stone"><div class="dot"></div></div> <div class="stone"><div class="dot"></div></div>
</td> </td>
<td id="6,5"> <td id="6-5">
<div class="stone"><div class="dot"></div></div> <div class="stone"><div class="dot"></div></div>
</td> </td>
<td id="6,6"> <td id="6-6">
<div class="stone"><div class="dot"></div></div> <div class="stone"><div class="dot"></div></div>
</td> </td>
<td id="6,7"> <td id="6-7">
<div class="stone"><div class="dot"></div></div> <div class="stone"><div class="dot"></div></div>
</td> </td>
<td id="6,8"> <td id="6-8">
<div class="stone"><div class="dot"></div></div> <div class="stone"><div class="dot"></div></div>
</td> </td>
<td id="6,9"> <td id="6-9">
<div class="stone"><div class="dot"></div></div> <div class="stone"><div class="dot"></div></div>
</td> </td>
</tr> </tr>
<tr id="row-7"> <tr id="row-7">
<td id="7,1"> <td id="7-1">
<div class="stone"><div class="dot"></div></div> <div class="stone"><div class="dot"></div></div>
</td> </td>
<td id="7,2"> <td id="7-2">
<div class="stone"><div class="dot"></div></div> <div class="stone"><div class="dot"></div></div>
</td> </td>
<td id="7,3"> <td id="7-3">
<div class="stone"><div class="dot"></div></div> <div class="stone"><div class="dot"></div></div>
</td> </td>
<td id="7,4"> <td id="7-4">
<div class="stone"><div class="dot"></div></div> <div class="stone"><div class="dot"></div></div>
</td> </td>
<td id="7,5"> <td id="7-5">
<div class="stone"><div class="dot"></div></div> <div class="stone"><div class="dot"></div></div>
</td> </td>
<td id="7,6"> <td id="7-6">
<div class="stone"><div class="dot"></div></div> <div class="stone"><div class="dot"></div></div>
</td> </td>
<td id="7,7"> <td id="7-7">
<div class="stone"><div class="dot"></div></div> <div class="stone"><div class="dot"></div></div>
</td> </td>
<td id="7,8"> <td id="7-8">
<div class="stone"><div class="dot"></div></div> <div class="stone"><div class="dot"></div></div>
</td> </td>
<td id="7,9"> <td id="7-9">
<div class="stone"><div class="dot"></div></div> <div class="stone"><div class="dot"></div></div>
</td> </td>
</tr> </tr>
<tr id="row-8"> <tr id="row-8">
<td id="8,1"> <td id="8-1">
<div class="stone"><div class="dot"></div></div> <div class="stone"><div class="dot"></div></div>
</td> </td>
<td id="8,2"> <td id="8-2">
<div class="stone"><div class="dot"></div></div> <div class="stone"><div class="dot"></div></div>
</td> </td>
<td id="8,3"> <td id="8-3">
<div class="stone"><div class="dot"></div></div> <div class="stone"><div class="dot"></div></div>
</td> </td>
<td id="8,4"> <td id="8-4">
<div class="stone"><div class="dot"></div></div> <div class="stone"><div class="dot"></div></div>
</td> </td>
<td id="8,5"> <td id="8-5">
<div class="stone"><div class="dot"></div></div> <div class="stone"><div class="dot"></div></div>
</td> </td>
<td id="8,6"> <td id="8-6">
<div class="stone"><div class="dot"></div></div> <div class="stone"><div class="dot"></div></div>
</td> </td>
<td id="8,7"> <td id="8-7">
<div class="stone"><div class="dot"></div></div> <div class="stone"><div class="dot"></div></div>
</td> </td>
<td id="8,8"> <td id="8-8">
<div class="stone"><div class="dot"></div></div> <div class="stone"><div class="dot"></div></div>
</td> </td>
<td id="8,9"> <td id="8-9">
<div class="stone"><div class="dot"></div></div> <div class="stone"><div class="dot"></div></div>
</td> </td>
</tr> </tr>
<tr id="row-9"> <tr id="row-9">
<td id="9,1"> <td id="9-1">
<div class="stone"><div class="dot"></div></div> <div class="stone"><div class="dot"></div></div>
</td> </td>
<td id="9,2"> <td id="9-2">
<div class="stone"><div class="dot"></div></div> <div class="stone"><div class="dot"></div></div>
</td> </td>
<td id="9,3"> <td id="9-3">
<div class="stone"><div class="dot"></div></div> <div class="stone"><div class="dot"></div></div>
</td> </td>
<td id="9,4"> <td id="9-4">
<div class="stone"><div class="dot"></div></div> <div class="stone"><div class="dot"></div></div>
</td> </td>
<td id="9,5"> <td id="9-5">
<div class="stone"><div class="dot"></div></div> <div class="stone"><div class="dot"></div></div>
</td> </td>
<td id="9,6"> <td id="9-6">
<div class="stone"><div class="dot"></div></div> <div class="stone"><div class="dot"></div></div>
</td> </td>
<td id="9,7"> <td id="9-7">
<div class="stone"><div class="dot"></div></div> <div class="stone"><div class="dot"></div></div>
</td> </td>
<td id="9,8"> <td id="9-8">
<div class="stone"><div class="dot"></div></div> <div class="stone"><div class="dot"></div></div>
</td> </td>
<td id="9,9"> <td id="9-9">
<div class="stone"><div class="dot"></div></div> <div class="stone"><div class="dot"></div></div>
</td> </td>
</tr> </tr>

98
js/main.js
View file

@ -67,6 +67,7 @@ class Point {
this.legal; this.legal;
this.chk = false; // this is where 'chk', 'l' this.chk = false; // this is where 'chk', 'l'
this.capturing = []; this.capturing = [];
this.captureChecked = false;
this.neighbors = { this.neighbors = {
top: {}, top: {},
btm: {}, btm: {},
@ -102,8 +103,9 @@ class Point {
if (opp2.chk === true) continue; if (opp2.chk === true) continue;
opp2.chk = true; opp2.chk = true;
if (opp2.getLiberties().length > 0) { if (opp2.getLiberties().length > 0) {
opp.chk = false;
tempCaps = []; tempCaps = [];
continue; break;
} }
tempCaps.push(opp2); tempCaps.push(opp2);
checkCaptureNeighbors(opp2); checkCaptureNeighbors(opp2);
@ -116,6 +118,7 @@ class Point {
tempCaps = []; tempCaps = [];
if (opp.getLiberties().length > 1) { if (opp.getLiberties().length > 1) {
tempCaps = []; tempCaps = [];
opp.chk = false;
continue; continue;
} }
console.log(opp); console.log(opp);
@ -124,6 +127,9 @@ class Point {
checkCaptureNeighbors(opp); checkCaptureNeighbors(opp);
this.capturing = this.capturing.length ? this.capturing.concat(tempCaps) : tempCaps; this.capturing = this.capturing.length ? this.capturing.concat(tempCaps) : tempCaps;
} }
console.log(this);
this.captureChecked = true;
console.log(this);
// filters duplicate points // filters duplicate points
this.capturing = Array.from(new Set(this.capturing)); this.capturing = Array.from(new Set(this.capturing));
return this.capturing; return this.capturing;
@ -165,8 +171,9 @@ class Point {
/*----- cached element references -----*/ /*----- cached element references -----*/
const whiteCaps = document.getElementById("white-caps"); const whiteCapsEl = document.getElementById("white-caps");
const blackCaps = document.getElementById("black-caps"); const blackCapsEl = document.getElementById("black-caps");
const modalEl = document.querySelector('.modal');
// store modal #menu for displaying game info // store modal #menu for displaying game info
// store // store
@ -181,13 +188,53 @@ document.getElementById('board').addEventListener('click', clickPlaceStone);
// ::hover-over on either bowl for pass, one-level undo options (CSS implementation) // ::hover-over on either bowl for pass, one-level undo options (CSS implementation)
// click on menu items // click on menu items
// click on kifu to display game menu // 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 -----*/ /*----- functions -----*/
init(); init();
let findPointFromIdx = (arr) => boardState.find( point => point.pos[0] === arr[0] && point.pos[1] === arr[1] ); 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) { function hoverPreview(evt) {
evt.stopPropagation(); evt.stopPropagation();
// renders preview stone if move is legal // renders preview stone if move is legal
@ -224,9 +271,13 @@ function clearOverlay() { //legal and check
} }
function resolveCaptures(point) { 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 => { point.capturing.forEach(cap => {
gameState.playerState[point.stone > 0 ? 'bCaptures' : 'wCaptures']++; gameState.playerState[gameState.turn > 0 ? 'bCaptures' : 'wCaptures']++;
cap.stone = 0; cap.stone = 0;
}) })
} }
@ -243,26 +294,31 @@ function clickPlaceStone(evt) {
let point = findPointFromIdx(placement); let point = findPointFromIdx(placement);
//checks that this placement was marked as legal //checks that this placement was marked as legal
if ( !checkLegal(point) ) return; if ( !checkLegal(point) ) return;
point.stone = gameState.turn; clearKo();
clearKoClearPass(); clearPass();
resolveCaptures(point); resolveCaptures(point);
point.stone = gameState.turn;
clearCaptures(); clearCaptures();
gameState.gameRecord.push(`${STONES_DATA[gameState.turn]}: ${point.pos}`) gameState.gameRecord.push(`${STONES_DATA[gameState.turn]}: ${point.pos}`)
gameState.turn*= -1; gameState.turn*= -1;
render(); render();
} }
function clearKoClearPass() { function clearKo() {
for (let point in boardState) { for (let point in boardState) {
point = boardState[point]; point = boardState[point];
point.stone = point.stone === 'k' ? 0 : point.stone; point.stone = point.stone === 'k' ? 0 : point.stone;
gameState.pass = 0;
} }
} }
function clearPass() {
gameState.pass = 0;
}
function clearCaptures() { function clearCaptures() {
for (let point in boardState) { for (let point in boardState) {
point = boardState[point]; point = boardState[point];
point.captureChk = false;
point.capturing = []; point.capturing = [];
} }
} }
@ -331,6 +387,16 @@ function init() {
boardState[41].stone = -1; boardState[41].stone = -1;
boardState[42].stone = 1; boardState[42].stone = 1;
boardState[46].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(); clearCaptures();
// end testing board state // end testing board state
render(); render();
@ -351,22 +417,26 @@ function renderTurn() {
function renderBoard() { function renderBoard() {
boardState.forEach(val => { 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]); stoneElem.setAttribute("data-stone", STONES_DATA[val.stone]);
}) })
} }
function renderCaps() { function renderCaps() {
blackCaps.textContent = gameState.playerState.bCaptures; blackCapsEl.textContent = gameState.playerState.bCaptures;
whiteCaps.textContent = gameState.playerState.wCaptures; whiteCapsEl.textContent = gameState.playerState.wCaptures;
} }
function renderPreview(hoverPoint) { function renderPreview(hoverPoint) {
boardState.forEach(val => { 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]); 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 // functions