create empty neighbor method for legal move check

This commit is contained in:
Sorrel Bri 2019-08-03 14:15:17 -07:00
parent 56a0f22e8d
commit 9dc9b4686f
4 changed files with 101 additions and 36 deletions

View file

@ -1,4 +1,4 @@
# Go # Browser Go
#### Minimum Deliverable Product #### Minimum Deliverable Product
a working game of go for a 9x9 board that a working game of go for a 9x9 board that

View file

@ -1,6 +1,11 @@
* { * {
box-sizing: border-box; box-sizing: border-box;
margin: 0; margin: 0;
vertical-align: middle;
}
body {
display: block;
} }
.full-screen { .full-screen {
@ -17,16 +22,22 @@
content { content {
background-color: #61a6c2; background-color: #61a6c2;
display: grid; /* display: grid;
grid-template-columns: 100vmin; grid-template-columns: 100vmin;
grid-template-rows: 1fr 100vmin 1fr; grid-template-rows: 1fr 100vmin 1fr;
grid-template-areas: grid-template-areas:
"white-pos" "white-pos"
"board-space" "board-space"
"black-pos" "black-pos"; */
display: flex;
flex-direction: column;
/* justify-content: flex-end; */
justify-content: space-between !important;
justify-items: stretch !important;
} }
.player-pos { .player-pos {
/* flex-grow: 2; */
display: flex; display: flex;
align-content: center; align-content: center;
align-items: center; align-items: center;
@ -34,11 +45,12 @@ content {
} }
.player-pos#white-pos { .player-pos#white-pos {
grid-area: white-pos; /* grid-area: white-pos; */
} }
.player-pos#black-pos { .player-pos#black-pos {
grid-area: black-pos; /* grid-area: black-pos; */
flex-direction: row-reverse; flex-direction: row-reverse;
} }
@ -48,20 +60,26 @@ content {
.bowl { .bowl {
order: -1; order: -1;
margin: 20px; margin: 1vh;
height: 8vh; height: 8vh;
width: 8vh; width: 8vh;
border: solid black; /* border: solid black; */
border-radius: 50%; border-radius: 50%;
background-color: rgb(116, 48, 17);
} }
.caps { .caps {
order: 1; order: 1;
margin: 1vh;
height: 6vh;
width: 6vh;
border-radius: 50%;
background-color: rgb(116, 48, 17);
} }
#board-space { #board-space {
margin: 0 auto; margin: 0 auto;
grid-area: board-space; /* grid-area: board-space; */
display: flex; display: flex;
flex-direction: column; flex-direction: column;
background-color: #EAB24E; background-color: #EAB24E;
@ -90,11 +108,11 @@ td {
vertical-align: middle; vertical-align: middle;
} }
td[id^="1,"] { 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%);
} }
#row-9 td { 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%);
} }
@ -107,17 +125,17 @@ td[id$="9"] {
} }
td[id="1,1"] { td[id="1,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%); 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"] { td[id="1,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) 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( 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"] { 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) 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) 99%, #000 100%);
} }
td[id="9,9"] { td[id="9,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) 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) 74%, #000 75%, rgba(0,0,0,0) 76%, rgba(0,0,0,0) 99%, #000 100%);
} }
td .stone { td .stone {

View file

@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge"> <meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" type="stylesheet"> <!-- <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" type="stylesheet"> -->
<link rel="stylesheet" href="css/reset.css" type="text/css"> <link rel="stylesheet" href="css/reset.css" type="text/css">
<link rel="stylesheet" href="css/main.css" type="text/css" /> <link rel="stylesheet" href="css/main.css" type="text/css" />
<!-- <script defer src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> --> <!-- <script defer src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> -->
@ -20,7 +20,7 @@
<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">White Bowl</div>
<div id="white-caps" class="caps">White Captures</div> <div id="white-caps" class="caps">White Caps</div>
</div> </div>
<div id="board-space"> <div id="board-space">
<table id="board"> <table id="board">

View file

@ -12,7 +12,6 @@ const DOTS_DATA = {
'0': 'none', '0': 'none',
'1': 'black', '1': 'black',
'd': 'dame', 'd': 'dame',
'l': 'legal',
's': 'seki' 's': 'seki'
} }
@ -69,28 +68,58 @@ class Point {
btm: {}, btm: {},
lft: {}, lft: {},
rgt: {} rgt: {}
}, }
// neighbor exists it's point is stored as { rPos, cPos}
this.neighbors.top = x > 1 ? [ x - 1, y ] : null; this.neighbors.top = x > 1 ? [ x - 1, y ] : null;
this.neighbors.btm = x < gameState.boardSize ? [ x + 1, y ] : null; this.neighbors.btm = x < gameState.boardSize ? [ x + 1, y ] : null;
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;
// checkLegal: function() { }
// this.cellValue = (for neighbor in this.neighbors) { // first
// boardState.find( val => { checkNeighbors = () => {
// if ( val.pos === neighbor.pos && val.stone = 0) { /*cell empty*/ } let neighborsArr = [];
// }); for ( let neighbor in this.neighbors ) {
// } let nbr = this.neighbors[neighbor];
// } console.log(nbr !== null)
// neighbor exists it's point is stored as { rPos, cPos}
if ( nbr !== null ) {
neighborsArr.push(boardState.find( val => val.pos[0] === nbr[0] && val.pos[1] === nbr[1] ))
} }
}; };
// returns array of existing neighbors to calling function
return neighborsArr;
}
emptyNeighbor = () => {
let neighborsArr = this.checkNeighbors();
return !!neighborsArr.find(val => val.stone === 0);
// return true if neighboring point is empty;
}
captureNeighbor = () => {
let neighborsArr = this.checkNeighbors();
// neighborsArr.find(val => val.point === turn * -1 );
// console.log(neighborsArr.find(val => val.point === turn * -1 ))
}
// captureNeighbor = ()
// livingNeighbor()
}
// boardState [point objects-contain overlay] lastState (created from boardState) // boardState [point objects-contain overlay] lastState (created from boardState)
let boardState = [ new Point(1,1), new Point(1,2), new Point(1,3), let boardState = [ new Point(1,1), new Point(1,2), new Point(1,3), new Point(1,4), new Point(1,5), new Point(1,6), new Point(1,7), new Point(1,8), new Point(1,9),
new Point(2,1), new Point(2,2), new Point(2,3), new Point(2,1), new Point(2,2), new Point(2,3), new Point(2,4), new Point(2,5), new Point(2,6), new Point(2,7), new Point(2,8), new Point(2,9),
new Point(3,1), new Point(3,2), new Point(3,3), new Point(3,1), new Point(3,2), new Point(3,3), new Point(3,4), new Point(3,5), new Point(3,6), new Point(3,7), new Point(3,8), new Point(3,9),
new Point(4,1), new Point(4,2), new Point(4,3), new Point(4,4), new Point(4,5), new Point(4,6), new Point(4,7), new Point(4,8), new Point(4,9),
new Point(5,1), new Point(5,2), new Point(5,3), new Point(5,4), new Point(5,5), new Point(5,6), new Point(5,7), new Point(5,8), new Point(5,9),
new Point(6,1), new Point(6,2), new Point(6,3), new Point(6,4), new Point(6,5), new Point(6,6), new Point(6,7), new Point(6,8), new Point(6,9),
new Point(7,1), new Point(7,2), new Point(7,3), new Point(7,4), new Point(7,5), new Point(7,6), new Point(7,7), new Point(7,8), new Point(7,9),
new Point(8,1), new Point(8,2), new Point(8,3), new Point(8,4), new Point(8,5), new Point(8,6), new Point(8,7), new Point(8,8), new Point(8,9),
new Point(9,1), new Point(9,2), new Point(9,3), new Point(9,4), new Point(9,5), new Point(9,6), new Point(9,7), new Point(9,8), new Point(9,9)
]; ];
boardState[0].checkNeighbors();
boardState[1].checkNeighbors();
boardState[2].checkNeighbors();
// modeling 1,1 point for // modeling 1,1 point for
// define boardState and overlay as 2d 9x9 arrays // define boardState and overlay as 2d 9x9 arrays
@ -123,19 +152,37 @@ 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 checkLegal(evt) {
let hover = [ parseInt(evt.target.parentNode.id[0]), parseInt(evt.target.parentNode.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);
//first step in logic: is stone occupied
point.overlay = point.stone !== 0 ? 0 : 'l'; // working old way assigns legal
// point.overlay = point.stone !== 0 ? 0 : 'l';
// first step in logic: is point occupied, or in ko
if (point.stone) return;
// 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
//if neighboring point is not empty check if enemy group is captured
} else {
point.overlay = 'l';
}
// if neighboring point is
render(point); render(point);
} }
function placeStone(evt) { function placeStone(evt) {
console.log('click!'); console.log('click!');
let placement = [ parseInt(evt.target.parentNode.id[0]), parseInt(evt.target.parentNode.id[2]) ]; 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 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; point.stone = point.overlay === 'l' ? gameState.turn : point.stone;
gameState.turn*= -1; gameState.turn*= -1;