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

add capture tracker on DOM

Browse source
This commit is contained in:
Sorrel Bri 2019-08-03 21:38:31 -07:00
parent fb106d858c
commit 0a8fff1902
3 changed files with 21 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
css/main.css
View file

@ -86,7 +86,7 @@ content {
box-shadow: -1vmin 2vmin 3vmin rgba(83, 53, 35, 0.61); box-shadow: -1vmin 2vmin 3vmin rgba(83, 53, 35, 0.61);
} }
.caps { .caps-space {
color: #FFF; color: #FFF;
order: 1; order: 1;
margin: 1vh; margin: 1vh;
@ -95,6 +95,9 @@ content {
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); box-shadow: -0.5vmin 1vmin 3vmin rgba(83, 53, 35, 0.61);
display: flex;
align-items: center;
justify-content: center;
} }
#board-space { #board-space {

4
index.html
View file

@ -46,7 +46,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 Caps</div> <div id="white-caps-space" class="caps-space"><p id="white-caps">White Caps</p></div>
</div> </div>
<div id="board-space"> <div id="board-space">
<table id="board"> <table id="board">
@ -315,7 +315,7 @@
</div> </div>
<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 Caps</div> <div id="black-caps-space" class="caps-space"><p id="black-caps">Black Caps</p></div>
<div id="kifu"> <div id="kifu">
<table> <table>
<tr> <tr>

18
js/main.js
View file

@ -101,9 +101,13 @@ class Point {
return this.findStone(gameState.turn * -1).filter(val => !val.emptyNeighbor()); return this.findStone(gameState.turn * -1).filter(val => !val.emptyNeighbor());
} }
// returns all opposing neighbors that do not have an opposing neighbor // returns all opposing neighbors that do not have an opposing neighbor
checkGroup = () => { checkGroup = () => { // return statement works for first layer bubbling
return this.findStone(gameState.turn).filter(val => val.emptyNeighbor()); // return this.findStone(gameState.turn).filter(val => val.emptyNeighbor());
// returns first friendly neighbor that has an empty neighbor if (!this.findStone(gameState.turn).filter(val => val.emptyNeighbor()).length) {
}
// returns all friendly neighbors that have an empty neighbor
} }
findStone = (stone) => { findStone = (stone) => {
return this.checkNeighbors().filter(val => { return this.checkNeighbors().filter(val => {
@ -122,6 +126,8 @@ class Point {
/*----- cached element references -----*/ /*----- cached element references -----*/
const whiteCaps = document.getElementById("white-caps");
const blackCaps = document.getElementById("black-caps");
// store modal #menu for displaying game info // store modal #menu for displaying game info
// store // store
@ -251,6 +257,7 @@ function init() {
function render(hoverPoint) { function render(hoverPoint) {
renderBoard(); renderBoard();
renderCaps();
renderPreview(hoverPoint); renderPreview(hoverPoint);
} }
@ -261,6 +268,11 @@ function renderBoard() {
}) })
} }
function renderCaps() {
blackCaps.textContent = gameState.playerState.bCaptures;
whiteCaps.textContent = gameState.playerState.wCaptures;
}
function renderPreview(hoverPoint) { function renderPreview(hoverPoint) {
boardState.forEach(val => { boardState.forEach(val => {
let dot = document.getElementById(`${val.pos[0]},${val.pos[1]}`).childNodes[1].childNodes[0]; let dot = document.getElementById(`${val.pos[0]},${val.pos[1]}`).childNodes[1].childNodes[0];