add render marker for player turn, push move to game record
This commit is contained in:
parent
1cd4eb52cb
commit
bab288f82c
3 changed files with 39 additions and 13 deletions
18
css/main.css
18
css/main.css
|
@ -84,6 +84,24 @@ content {
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
background-color: rgb(116, 48, 17);
|
background-color: rgb(116, 48, 17);
|
||||||
box-shadow: -1vmin 2vmin 3vmin rgba(83, 53, 35, 0.61);
|
box-shadow: -1vmin 2vmin 3vmin rgba(83, 53, 35, 0.61);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bowl p {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bowl[data-turn]:hover p {
|
||||||
|
display: block;
|
||||||
|
color: #FFF;
|
||||||
|
background-color: rgba(0,0,0,0.3);
|
||||||
|
padding: .5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bowl[data-turn] {
|
||||||
|
box-shadow: 0 0 3vh 3vh rgb(31, 255, 2);
|
||||||
}
|
}
|
||||||
|
|
||||||
.caps-space {
|
.caps-space {
|
||||||
|
|
|
@ -45,8 +45,8 @@
|
||||||
</div>
|
</div>
|
||||||
<content>
|
<content>
|
||||||
<div id="white-pos" class="player-pos">
|
<div id="white-pos" class="player-pos">
|
||||||
<div id="white-bowl" class="bowl">White Bowl</div>
|
<div id="white-bowl" class="bowl"><p>Pass?</p></div>
|
||||||
<div id="white-caps-space" class="caps-space"><p id="white-caps">White Caps</p></div>
|
<div id="white-caps-space" class="caps-space"><p id="white-caps"></p></div>
|
||||||
</div>
|
</div>
|
||||||
<div id="board-space">
|
<div id="board-space">
|
||||||
<table id="board">
|
<table id="board">
|
||||||
|
@ -314,8 +314,8 @@
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
<div id="black-pos" class="player-pos">
|
<div id="black-pos" class="player-pos">
|
||||||
<div id="black-bowl" class="bowl">Black Bowl</div>
|
<div id="black-bowl" class="bowl"><p>Pass?</p></div>
|
||||||
<div id="black-caps-space" class="caps-space"><p id="black-caps">Black Caps</p></div>
|
<div id="black-caps-space" class="caps-space"><p id="black-caps"></p></div>
|
||||||
<div id="kifu">
|
<div id="kifu">
|
||||||
<table>
|
<table>
|
||||||
<tr>
|
<tr>
|
||||||
|
|
26
js/main.js
26
js/main.js
|
@ -78,12 +78,10 @@ class Point {
|
||||||
this.neighbors.rgt = y > 1 ? [ x, y - 1 ] : null;
|
this.neighbors.rgt = y > 1 ? [ x, y - 1 ] : null;
|
||||||
this.neighbors.lft = y < gameState.boardSize ? [ x, y + 1 ] : null;
|
this.neighbors.lft = y < gameState.boardSize ? [ x, y + 1 ] : null;
|
||||||
}
|
}
|
||||||
// first
|
|
||||||
checkNeighbors = () => {
|
checkNeighbors = () => {
|
||||||
let neighborsArr = [];
|
let neighborsArr = [];
|
||||||
for ( let neighbor in this.neighbors ) {
|
for ( let neighbor in this.neighbors ) {
|
||||||
let nbr = this.neighbors[neighbor];
|
let nbr = this.neighbors[neighbor];
|
||||||
// console.log(nbr);
|
|
||||||
// neighbor exists it's point is stored as { rPos, cPos}
|
// neighbor exists it's point is stored as { rPos, cPos}
|
||||||
if ( nbr !== null ) {
|
if ( nbr !== null ) {
|
||||||
neighborsArr.push(boardState.find( val => val.pos[0] === nbr[0] && val.pos[1] === nbr[1] ))
|
neighborsArr.push(boardState.find( val => val.pos[0] === nbr[0] && val.pos[1] === nbr[1] ))
|
||||||
|
@ -105,7 +103,7 @@ class Point {
|
||||||
opp2.chk = true;
|
opp2.chk = true;
|
||||||
tempCaps.push(opp2);
|
tempCaps.push(opp2);
|
||||||
if (opp2.getLiberties().length) return false;
|
if (opp2.getLiberties().length) return false;
|
||||||
checkCaptureNeighbors(opp2)
|
checkCaptureNeighbors(opp2);
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
let opps = this.checkNeighbors().filter(nbr => nbr.stone === gameState.turn * -1);
|
let opps = this.checkNeighbors().filter(nbr => nbr.stone === gameState.turn * -1);
|
||||||
|
@ -182,6 +180,7 @@ document.getElementById('board').addEventListener('click', placeStone);
|
||||||
// ::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"]')
|
||||||
|
|
||||||
/*----- functions -----*/
|
/*----- functions -----*/
|
||||||
init();
|
init();
|
||||||
|
@ -195,7 +194,7 @@ function hoverPreview(evt) {
|
||||||
let point = findPointFromIdx(hover);
|
let point = findPointFromIdx(hover);
|
||||||
if (checkLegal(point)) {
|
if (checkLegal(point)) {
|
||||||
point.legal = true; // legal
|
point.legal = true; // legal
|
||||||
render(point);
|
renderPreview(point);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -203,6 +202,7 @@ function checkLegal(point) {
|
||||||
clearOverlay();
|
clearOverlay();
|
||||||
// first step in logic: is point occupied, or in ko
|
// first step in logic: is point occupied, or in ko
|
||||||
point.chk = true; //check
|
point.chk = true; //check
|
||||||
|
console.log(!!point.stone);
|
||||||
if (point.stone) return false;
|
if (point.stone) return false;
|
||||||
console.log('getting here')
|
console.log('getting here')
|
||||||
// if point is not empty check if liberties
|
// if point is not empty check if liberties
|
||||||
|
@ -217,7 +217,6 @@ function checkLegal(point) {
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
// console.log('getting here')
|
// console.log('getting here')
|
||||||
render(point);
|
|
||||||
return true;
|
return true;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -232,7 +231,7 @@ function clearOverlay() { //legal and check
|
||||||
function resolveCaptures(point) {
|
function resolveCaptures(point) {
|
||||||
console.log('getting here');
|
console.log('getting here');
|
||||||
point.checkCapture();
|
point.checkCapture();
|
||||||
if( point.capturing.length ) {
|
if(point.capturing.filter(cap => cap).length ) {
|
||||||
point.capturing.forEach(cap => {
|
point.capturing.forEach(cap => {
|
||||||
gameState.playerState[cap.stone > 0 ? 'bCaptures' : 'wCaptures']++;
|
gameState.playerState[cap.stone > 0 ? 'bCaptures' : 'wCaptures']++;
|
||||||
cap.stone = 0;
|
cap.stone = 0;
|
||||||
|
@ -255,7 +254,8 @@ function placeStone(evt) {
|
||||||
point.stone = gameState.turn;
|
point.stone = gameState.turn;
|
||||||
clearKoClearPass();
|
clearKoClearPass();
|
||||||
resolveCaptures(point);
|
resolveCaptures(point);
|
||||||
clearCaptures(point);
|
clearCaptures();
|
||||||
|
gameState.gameRecord.push(`${STONES_DATA[gameState.turn]}: ${point.pos}`)
|
||||||
gameState.turn*= -1;
|
gameState.turn*= -1;
|
||||||
render();
|
render();
|
||||||
}
|
}
|
||||||
|
@ -339,15 +339,23 @@ 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;
|
||||||
|
clearCaptures();
|
||||||
// end testing board state
|
// end testing board state
|
||||||
render();
|
render();
|
||||||
};
|
};
|
||||||
|
|
||||||
function render(hoverPoint) {
|
function render(hoverPoint) {
|
||||||
|
console.log(gameState.gameRecord)
|
||||||
|
gameState.gameRecord.length? renderTurn() : renderFirstTurn();
|
||||||
renderBoard();
|
renderBoard();
|
||||||
renderCaps();
|
renderCaps();
|
||||||
renderPreview(hoverPoint);
|
}
|
||||||
|
|
||||||
|
function renderFirstTurn() {
|
||||||
|
document.getElementById(`${STONES_DATA[gameState.turn]}-bowl`).toggleAttribute('data-turn');
|
||||||
|
}
|
||||||
|
function renderTurn() {
|
||||||
|
document.querySelectorAll(`.bowl`).forEach(bowl => bowl. toggleAttribute('data-turn'));
|
||||||
}
|
}
|
||||||
|
|
||||||
function renderBoard() {
|
function renderBoard() {
|
||||||
|
|
Loading…
Reference in a new issue