correct legal move logic for surrounding friendly stones

This commit is contained in:
Sorrel Bri 2019-08-03 16:59:56 -07:00
parent 76ef4038ec
commit c828fad0b4
3 changed files with 75 additions and 53 deletions

View file

@ -56,6 +56,14 @@ content {
#kifu { #kifu {
order: 0; order: 0;
height: 10vh;
width: 8vh;
background-color: #FFF;
transform: rotate(-20deg);
}
#kifu table {
} }
.bowl { .bowl {
@ -66,15 +74,18 @@ content {
/* border: solid black; */ /* border: solid black; */
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);
} }
.caps { .caps {
color: #FFF;
order: 1; order: 1;
margin: 1vh; margin: 1vh;
height: 6vh; height: 6vh;
width: 6vh; width: 6vh;
border-radius: 50%; border-radius: 50%;
background-color: rgb(116, 48, 17); background-color: rgb(116, 48, 17);
box-shadow: -0.5vmin 1vmin 3vmin rgba(83, 53, 35, 0.61);
} }
#board-space { #board-space {
@ -86,9 +97,14 @@ content {
width: 90vmin; width: 90vmin;
height: 90vmin; height: 90vmin;
padding: 1vmin; padding: 1vmin;
z-index: 1;
box-shadow: -2vmin 4vmin 3vmin rgba(145, 92, 23, 0.5);
} }
table { #board-space::after {
}
#board-space table {
display: flex; display: flex;
align-items: stretch; align-items: stretch;
justify-content: space-between; justify-content: space-between;
@ -97,7 +113,7 @@ table {
margin: auto; margin: auto;
} }
td { #board-space td {
height: 9vmin; height: 9vmin;
width: 9vmin; width: 9vmin;
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) 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) 24%, #000 25%, rgba(0,0,0,0) 26%, 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%);
@ -108,33 +124,35 @@ td {
vertical-align: middle; vertical-align: middle;
} }
td[id^="1"] { #board-space td[id^="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%, rgba(0,0,0,0) 74%, #000 75%, rgba(0,0,0,0) 76%); 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%, rgba(0,0,0,0) 74%, #000 75%, rgba(0,0,0,0) 76%);
} }
td[id^="9"] { #board-space td[id^="9"] {
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) 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) 24%, #000 25%, rgba(0,0,0,0) 26%, rgba(0,0,0,0) 74%, #000 75%, rgba(0,0,0,0) 76%, rgba(0,0,0,0) 99%, #000 100%);
} }
td[id$="1"] { #board-space td[id$="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) 49%, #000 50%, rgba(0,0,0,0) 51%, 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) 49%, #000 50%, rgba(0,0,0,0) 51%, rgba(0,0,0,0) 99%, #000 100%);
} }
td[id$="9"] { #board-space td[id$="9"] {
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%);
} }
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%);
} }
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% );
} }
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%);
} }
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%);
} }

View file

@ -290,7 +290,15 @@
<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">Black Bowl</div>
<div id="black-caps" class="caps">Black Captures</div> <div id="black-caps" class="caps">Black Captures</div>
<div id="kifu">kifu</div> <div id="kifu">
<table>
<tr>
<td>
</td>
</tr>
</table>
</div>
</div> </div>
</content> </content>
</body> </body>

View file

@ -95,21 +95,20 @@ class Point {
// return true if neighboring point is empty; // return true if neighboring point is empty;
} }
checkCapture = () => { checkCapture = () => {
let neighborsArr = this.checkNeighbors(); return !this.liveGroup(gameState.turn * -1).some(val => val.emptyNeighbor());
let oppStones = neighborsArr.filter(val => { }
if (val.stone === gameState.turn * -1) return val;
}); checkGroup = () => {
console.log(oppStones); return this.liveGroup(gameState.turn).some(val => val.emptyNeighbor());
for ( let oppStone in oppStones ) { // returns first neighbor of turn color that has an empty neighbor
console.log(oppStones[oppStone]) }
console.log(oppStones[oppStone].emptyNeighbor()) // will need to call something like .liveGroup() instead
return oppStones[oppStone].emptyNeighbor(); //return liveGroup = (stone) => {
} return this.checkNeighbors().filter(val => {
if ( val.stone === stone ) return val;
});
//returns an array of neighbors for the value of stone
} }
// return true if move would form/join a living friendly group ad
// checkGroup = () => {
//
// }
} }
let boardCreator = new Array(gameState.boardSize).fill(gameState.boardSize); let boardCreator = new Array(gameState.boardSize).fill(gameState.boardSize);
@ -131,7 +130,7 @@ let boardCreator = new Array(gameState.boardSize).fill(gameState.boardSize);
// input listeners for player names, ranks, rank certainty (editable during game) // input listeners for player names, ranks, rank certainty (editable during game)
//input lister for handicap + komi (only editable pre-game) //input lister for handicap + komi (only editable pre-game)
// ::hover-over on board to preview move (with legal move logic) // ::hover-over on board to preview move (with legal move logic)
document.getElementById('board').addEventListener('mousemove', checkLegal); document.getElementById('board').addEventListener('mousemove', hoverPreview);
// click on board to play move // click on board to play move
document.getElementById('board').addEventListener('click', placeStone); 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)
@ -143,55 +142,52 @@ 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 checkLegal(evt) { function hoverPreview(evt) {
// renders preview stone if move is legal
let hover = [ parseInt(evt.target.closest('td').id[0]), parseInt(evt.target.closest('td').id[2]) ]; let hover = [ parseInt(evt.target.closest('td').id[0]), parseInt(evt.target.closest('td').id[2]) ];
let point = findPointFromIdx(hover); let point = findPointFromIdx(hover);
if (checkLegal(point)) {
point.overlay = 'l';
render(point);
}
}
// working old way assigns legal function checkLegal(point) {
// point.overlay = point.stone !== 0 ? 0 : 'l';
// first step in logic: is point occupied, or in ko // first step in logic: is point occupied, or in ko
if (point.stone) return; if (point.stone) return false;
console.log('reading empty');
console.log(point.emptyNeighbor())
// if point is not empty check if neighboring point is empty // if point is not empty check if neighboring point is empty
if (!point.emptyNeighbor()) { if (!point.emptyNeighbor()) {
//if neighboring point is not empty check if friendly group is alive
point.checkCapture();
// if (point.checkCapture) return point.overlay = 'l';
//if neighboring point is not empty check if enemy group is captured //if neighboring point is not empty check if enemy group is captured
// if (point.checkGroup) return point.overlay = 'l' if (!point.checkCapture()) return false;
//if neighboring point is not empty check if friendly group is alive
if (!point.checkGroup()) return false;
return; return true;
} else {
point.overlay = 'l';
} }
// if neighboring point is
render(point); render(point);
return true;
} }
function placeStone(evt) { function placeStone(evt) {
console.log('click!');
let placement = [ parseInt(evt.target.closest('td').id[0]), parseInt(evt.target.closest('td').id[2]) ];
// checks for placement and pushes to cell // checks for placement and pushes to cell
let placement = [ parseInt(evt.target.closest('td').id[0]), parseInt(evt.target.closest('td').id[2]) ];
let point = findPointFromIdx(placement); let point = findPointFromIdx(placement);
// console.log(placement);
//checks that this placement was marked as legal //checks that this placement was marked as legal
point.stone = point.overlay === 'l' ? gameState.turn : point.stone; if ( !checkLegal(point) ) return;
point.stone = gameState.turn;
gameState.turn*= -1; gameState.turn*= -1;
for (let point in boardState) {
point.overlay = '';
}
render(); render();
} }
function init() { function init() {
gameState.winner = null; gameState.winner = null;
// gameState.turn = ? : ; // get turn from consequences of player input
gameState.pass = null; gameState.pass = null;
// gameState.komi = ; // get komi from player input // gameState.komi = ; // get komi from player input
// gameState.handicap = ; // get handicap from player input // gameState.handicap = ; // get handicap from player input
// gameState.turn = gameState.handicap ? -1 : 1;
gameState.playerState.bCaptures = 0; gameState.playerState.bCaptures = 0;
gameState.playerState.wCaptures = 0; gameState.playerState.wCaptures = 0;
// gameState.gameMeta.date = // get from browser window // gameState.gameMeta.date = // get from browser window