correct legal move logic for surrounding friendly stones
This commit is contained in:
Sorrel Bri
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 {
|
||||
order: 0;
|
||||
height: 10vh;
|
||||
width: 8vh;
|
||||
background-color: #FFF;
|
||||
transform: rotate(-20deg);
|
||||
}
|
||||
|
||||
#kifu table {
|
||||
|
||||
}
|
||||
|
||||
.bowl {
|
||||
|
|
@ -66,15 +74,18 @@ content {
|
|||
/* border: solid black; */
|
||||
border-radius: 50%;
|
||||
background-color: rgb(116, 48, 17);
|
||||
box-shadow: -1vmin 2vmin 3vmin rgba(83, 53, 35, 0.61);
|
||||
}
|
||||
|
||||
.caps {
|
||||
color: #FFF;
|
||||
order: 1;
|
||||
margin: 1vh;
|
||||
height: 6vh;
|
||||
width: 6vh;
|
||||
border-radius: 50%;
|
||||
background-color: rgb(116, 48, 17);
|
||||
box-shadow: -0.5vmin 1vmin 3vmin rgba(83, 53, 35, 0.61);
|
||||
}
|
||||
|
||||
#board-space {
|
||||
|
|
@ -86,9 +97,14 @@ content {
|
|||
width: 90vmin;
|
||||
height: 90vmin;
|
||||
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;
|
||||
align-items: stretch;
|
||||
justify-content: space-between;
|
||||
|
|
@ -97,7 +113,7 @@ table {
|
|||
margin: auto;
|
||||
}
|
||||
|
||||
td {
|
||||
#board-space td {
|
||||
height: 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%);
|
||||
|
|
@ -108,33 +124,35 @@ td {
|
|||
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%);
|
||||
}
|
||||
|
||||
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%);
|
||||
}
|
||||
|
||||
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%);
|
||||
}
|
||||
|
||||
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%);
|
||||
}
|
||||
|
||||
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%);
|
||||
}
|
||||
|
||||
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% );
|
||||
}
|
||||
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%);
|
||||
}
|
||||
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%);
|
||||
}
|
||||
|
||||
|
|
|
|||
10
index.html
10
index.html
|
|
@ -290,7 +290,15 @@
|
|||
<div id="black-pos" class="player-pos">
|
||||
<div id="black-bowl" class="bowl">Black Bowl</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>
|
||||
</content>
|
||||
</body>
|
||||
|
|
|
|||
80
js/main.js
80
js/main.js
|
|
@ -95,21 +95,20 @@ class Point {
|
|||
// return true if neighboring point is empty;
|
||||
}
|
||||
checkCapture = () => {
|
||||
let neighborsArr = this.checkNeighbors();
|
||||
let oppStones = neighborsArr.filter(val => {
|
||||
if (val.stone === gameState.turn * -1) return val;
|
||||
});
|
||||
console.log(oppStones);
|
||||
for ( let oppStone in oppStones ) {
|
||||
console.log(oppStones[oppStone])
|
||||
console.log(oppStones[oppStone].emptyNeighbor()) // will need to call something like .liveGroup() instead
|
||||
return oppStones[oppStone].emptyNeighbor(); //return
|
||||
}
|
||||
return !this.liveGroup(gameState.turn * -1).some(val => val.emptyNeighbor());
|
||||
}
|
||||
|
||||
checkGroup = () => {
|
||||
return this.liveGroup(gameState.turn).some(val => val.emptyNeighbor());
|
||||
// returns first neighbor of turn color that has an empty neighbor
|
||||
}
|
||||
|
||||
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);
|
||||
|
|
@ -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 lister for handicap + komi (only editable pre-game)
|
||||
// ::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
|
||||
document.getElementById('board').addEventListener('click', placeStone);
|
||||
// ::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] );
|
||||
|
||||
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 point = findPointFromIdx(hover);
|
||||
|
||||
// working old way assigns legal
|
||||
// point.overlay = point.stone !== 0 ? 0 : 'l';
|
||||
|
||||
if (checkLegal(point)) {
|
||||
point.overlay = 'l';
|
||||
render(point);
|
||||
}
|
||||
}
|
||||
|
||||
function checkLegal(point) {
|
||||
// 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.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 (point.checkGroup) return point.overlay = 'l'
|
||||
|
||||
|
||||
return;
|
||||
} else {
|
||||
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 true;
|
||||
}
|
||||
// if neighboring point is
|
||||
|
||||
|
||||
|
||||
render(point);
|
||||
return true;
|
||||
}
|
||||
|
||||
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
|
||||
let placement = [ parseInt(evt.target.closest('td').id[0]), parseInt(evt.target.closest('td').id[2]) ];
|
||||
let point = findPointFromIdx(placement);
|
||||
// console.log(placement);
|
||||
//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;
|
||||
for (let point in boardState) {
|
||||
point.overlay = '';
|
||||
}
|
||||
render();
|
||||
}
|
||||
|
||||
function init() {
|
||||
gameState.winner = null;
|
||||
// gameState.turn = ? : ; // get turn from consequences of player input
|
||||
gameState.pass = null;
|
||||
// gameState.komi = ; // get komi from player input
|
||||
// gameState.handicap = ; // get handicap from player input
|
||||
// gameState.turn = gameState.handicap ? -1 : 1;
|
||||
gameState.playerState.bCaptures = 0;
|
||||
gameState.playerState.wCaptures = 0;
|
||||
// gameState.gameMeta.date = // get from browser window
|
||||
|
|
|
|||
Loading…
Reference in a new issue