fix flex display
This commit is contained in:
parent
c5aa20029a
commit
4f7b8cad10
3 changed files with 19 additions and 19 deletions
27
css/main.css
27
css/main.css
|
@ -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 {
|
||||||
|
@ -69,8 +72,8 @@ content {
|
||||||
.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 {
|
||||||
|
|
|
@ -289,7 +289,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 Captures</div>
|
<div id="black-caps" class="caps">Black Caps</div>
|
||||||
<div id="kifu">
|
<div id="kifu">
|
||||||
<table>
|
<table>
|
||||||
<tr>
|
<tr>
|
||||||
|
|
|
@ -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;
|
||||||
|
|
Loading…
Reference in a new issue