oxaliq/browser-go-proto
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

layout modal menu, add capture logic

Browse source
This commit is contained in:
Sorrel Bri 2019-08-03 20:43:57 -07:00
parent 4f7b8cad10
commit 8ed69b3b0a
3 changed files with 72 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
css/main.css
View file

@ -8,16 +8,22 @@ body {
width: vw; width: vw;
} }
.full-screen { .modal {
/* positioning will be absolue */ display: flex;
/* will take up whole screen */ position: fixed;
/* background will be ~0.5 opacity */ z-index: 2;
/* grid-areas display: none;
"game-info *4" <-date, komi, handicap width: 100vw;
"b-player-info*2 w-player-info*2" <- name, rank, rank-certainty height: 100vh;
"record record record options" <- displays numbered record (stretch!), new game, get game record(stretch!) background-color: rgba(0,0,0,0.3);
pre-game record will display instructions align-items: center;
*/ justify-content: center;
}
#menu {
background-color: #fff;
padding: 1vmin;
} }
content { content {

32
index.html
View file

@ -13,10 +13,36 @@
<title>Browser Go</title> <title>Browser Go</title>
</head> </head>
<body> <body>
<div id="menu" class="full-screen"> <div class="modal">
<!-- for displaying new game screen and status during game --> <div id="menu">
<form>
<div id="game-meta">
<span>Date:</span><input type="text" name="date">
<span>Komi:</span><input type="range" name="komi">
<span>Handicap:</span><input type="range" name="handicap">
</div>
<div id="player-meta">
<div data-player-meta="black">
<h4>Black</h4>
<span>Name:</span><input type="text" name="black-name">
<span>Rank:</span><input type="text" name="black-rank">
<input type="checkbox" name="black-rank-certain">
</div>
<div data-player-meta="white">
<h4>White</h4>
<span>Name:</span><input type="text" name="white-name">
<span>Rank:</span><input type="text" name="white-rank">
<input type="checkbox" name="white-rank-certain">
</div>
<div id="game-record-space">
<p id="instructions">Put instructions for use here.</p>
<p id="game-record"></p>
</div>
</div>
</form>
</div>
</div> </div>
<!-- may need add'l .full-screen or other div for board overlay -->
<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>

43
js/main.js
View file

@ -82,7 +82,7 @@ class Point {
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); // 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] ))
@ -97,12 +97,12 @@ class Point {
// return true if neighboring point is empty; // return true if neighboring point is empty;
} }
checkCapture = () => { checkCapture = () => {
console.log(this) // console.log(this)
return !this.findStone(gameState.turn * -1).some(val => val.emptyNeighbor()); return this.findStone(gameState.turn * -1).filter(val => !val.emptyNeighbor());
} }
// returns first opposing neighbor that does not have an opposing neighbor // returns all opposing neighbors that do not have an opposing neighbor
checkGroup = () => { checkGroup = () => {
return this.findStone(gameState.turn).some(val => val.emptyNeighbor()); return this.findStone(gameState.turn).filter(val => val.emptyNeighbor());
// returns first friendly neighbor that has an empty neighbor // returns first friendly neighbor that has an empty neighbor
} }
findStone = (stone) => { findStone = (stone) => {
@ -112,19 +112,17 @@ class Point {
//returns an array of neighbors for the value of stone //returns an array of neighbors for the value of stone
} }
} }
// could use this Array to iterate through and create
// let boardCreator = new Array(gameState.boardSize).fill(gameState.boardSize); // let boardCreator = new Array(gameState.boardSize).fill(gameState.boardSize);
// boardState [point objects-contain overlay] lastState (created from boardState) // boardState [point objects-contain overlay] lastState (created from boardState)
// boardState accepts values of 0, 1, -1
// overlay accepts values of 0, 1, -1, 'k', 'd', 'chk', 'hold', 'l', 'x'
// 'k' represents komi, in-game integers represent move previews, // 'k' represents komi, in-game integers represent move previews,
// 'chk', 'hold', 'x' and 'l' represent points checked during checkLegalMove run // 'chk', 'hold', 'x' and 'l' represent points checked during checkLegalMove run
// game-end integer represent points of territory, 'd' represents dame, // game-end integer represent points of territory, 'd' represents dame,
/*----- cached element references -----*/ /*----- cached element references -----*/
// store #menu for displaying game info // store modal #menu for displaying game info
// store // store
@ -159,19 +157,19 @@ function checkLegal(point) {
// 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
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 neighboring point is empty // if point is not empty check if neighboring point is empty
if (!point.emptyNeighbor()) { if (!point.emptyNeighbor()) {
console.log('getting here') // console.log('getting here')
//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.findStone(gameState.turn * -1).length && point.checkCapture()) return true; if ( point.checkCapture().length ) return true;
console.log('getting here') // console.log('getting here')
//if neighboring point is not empty check if friendly group is alive //if neighboring point is not empty check if friendly group is alive
if ( point.findStone(gameState.turn).length && point.checkGroup()) return true; if ( point.checkGroup().length ) return true;
console.log('getting here') // console.log('getting here')
return false; return false;
} }
console.log('getting here') // console.log('getting here')
render(point); render(point);
return true; return true;
} }
@ -183,6 +181,18 @@ function clearOverlay() { //legal and check
} }
} }
function resolveCaptures(point) {
if( point.checkCapture().length ) {
let caps = point.checkCapture()
for (opp in caps) {
gameState.playerState[opp.stone > 0 ? 'bCaptures' : 'wCaptures']++;
caps[opp].stone = 0;
console.log(opp.stone);
console.log(caps[opp]);
}
}
}
function placeStone(evt) { function placeStone(evt) {
// 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 placement = [ parseInt(evt.target.closest('td').id[0]), parseInt(evt.target.closest('td').id[2]) ];
@ -190,6 +200,7 @@ function placeStone(evt) {
//checks that this placement was marked as legal //checks that this placement was marked as legal
if ( !checkLegal(point) ) return; if ( !checkLegal(point) ) return;
point.stone = gameState.turn; point.stone = gameState.turn;
resolveCaptures(point);
gameState.turn*= -1; gameState.turn*= -1;
render(); render();
} }