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

fix flex display

Browse source
This commit is contained in:
Sorrel Bri 2019-08-03 19:42:39 -07:00
parent c5aa20029a
commit 4f7b8cad10
3 changed files with 19 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

29
css/main.css
View file

@ -3,9 +3,9 @@
margin: 0; margin: 0;
vertical-align: middle; vertical-align: middle;
} }
body { body {
display: block; height: vh;
width: vw;
} }
.full-screen { .full-screen {
@ -29,19 +29,21 @@ content {
"white-pos" "white-pos"
"board-space" "board-space"
"black-pos"; */ "black-pos"; */
display: flex; display: flex !important;
flex-direction: column; flex-direction: column;
/* justify-content: flex-end; */ /* justify-content: flex-end; */
justify-content: space-between !important; justify-content: space-between !important;
justify-items: stretch !important; /* justify-items: stretch !important; */
height: 100vh;
width: 100vw;
} }
.player-pos { .player-pos {
/* flex-grow: 2; */ /* flex-grow: 2; */
display: flex; display: flex;
align-content: center;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-around;
flex: 5;
} }
.player-pos#white-pos { .player-pos#white-pos {
@ -52,6 +54,7 @@ content {
.player-pos#black-pos { .player-pos#black-pos {
/* grid-area: black-pos; */ /* grid-area: black-pos; */
flex-direction: row-reverse; flex-direction: row-reverse;
justify-self: flex-end;
} }
#kifu { #kifu {
@ -63,14 +66,14 @@ content {
} }
#kifu table { #kifu table {
} }
.bowl { .bowl {
order: -1; order: -1;
margin: 1vh; margin: 1vh;
height: 8vh; height: 10vh;
width: 8vh; width: 10vh;
/* border: solid black; */ /* border: solid black; */
border-radius: 50%; border-radius: 50%;
background-color: rgb(116, 48, 17); background-color: rgb(116, 48, 17);
@ -94,14 +97,12 @@ content {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
background-color: #EAB24E; background-color: #EAB24E;
width: 90vmin; /* width: 90vmin; */
height: 90vmin; /* height: 90vmin; */
padding: 1vmin; padding: 1vmin;
z-index: 1; z-index: 1;
box-shadow: -2vmin 4vmin 3vmin rgba(145, 92, 23, 0.5); box-shadow: -2vmin 4vmin 3vmin rgba(145, 92, 23, 0.5);
} flex: 1;
#board-space::after {
} }
#board-space table { #board-space table {

4
index.html
View file

@ -289,12 +289,12 @@
</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 Captures</div> <div id="black-caps" class="caps">Black Caps</div>
<div id="kifu"> <div id="kifu">
<table> <table>
<tr> <tr>
<td> <td>
</td> </td>
</tr> </tr>
</table> </table>

5
js/main.js
View file

@ -100,12 +100,11 @@ class Point {
console.log(this) console.log(this)
return !this.findStone(gameState.turn * -1).some(val => val.emptyNeighbor()); return !this.findStone(gameState.turn * -1).some(val => val.emptyNeighbor());
} }
// returns // returns first opposing neighbor that does not have an opposing neighbor
checkGroup = () => { checkGroup = () => {
return this.findStone(gameState.turn).some(val => val.emptyNeighbor()); return this.findStone(gameState.turn).some(val => val.emptyNeighbor());
// returns first neighbor of turn color that has an empty neighbor // returns first friendly neighbor that has an empty neighbor
} }
findStone = (stone) => { findStone = (stone) => {
return this.checkNeighbors().filter(val => { return this.checkNeighbors().filter(val => {
if ( val.stone === (stone) ) return val; if ( val.stone === (stone) ) return val;