correct legal move logic for surrounding friendly stones
This commit is contained in:
parent
76ef4038ec
commit
c828fad0b4
3 changed files with 75 additions and 53 deletions
38
css/main.css
38
css/main.css
|
@ -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%);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
10
index.html
10
index.html
|
@ -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>
|
||||||
|
|
78
js/main.js
78
js/main.js
|
@ -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
|
||||||
|
|
Loading…
Reference in a new issue