ntr/mnml
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

game styles alignment

Browse Source
This commit is contained in:
ntr 2019-05-31 16:41:59 +10:00
parent e8d9075dfd
commit 204ebe00e8
2 changed files with 11 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
client/assets/styles/game.css
View File

@ -51,6 +51,10 @@
margin-top: 0.25em; margin-top: 0.25em;
} }
.opponent .game-construct .img {
align-items: flex-start;
}
.game-construct { .game-construct {
display: grid; display: grid;
@ -58,7 +62,7 @@
justify-items: start; justify-items: start;
/*align-items: flex-end;*/ /*align-items: flex-end;*/
grid-template-rows: min-content minmax(min-content, 2fr) min-content min-content min-content; grid-template-rows: minmax(min-content, 2fr) min-content min-content min-content min-content;
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
grid-template-areas: grid-template-areas:
"skills ." "skills ."
@ -85,8 +89,11 @@
.game-construct .img { .game-construct .img {
grid-area: avatar; grid-area: avatar;
display: flex;
align-items: flex-end;
} }
.game-construct .name { .game-construct .name {
width: 100%; width: 100%;
margin-bottom: 0.25em; margin-bottom: 0.25em;

5
client/src/components/game.construct.jsx
View File

@ -55,7 +55,7 @@ function GameConstruct(props) {
const ko = construct.green_life.value === 0 ? 'ko' : ''; const ko = construct.green_life.value === 0 ? 'ko' : '';
const classes = eventClasses(resolution, construct); const classes = eventClasses(resolution, construct);
const stats = ['RedLife', 'GreenLife', 'BlueLife'].map((s, j) => ( const stats = ['RedLife', 'GreenLife', 'BlueLife'].map((s, j) => (
<div key={j} alt={STATS[s].stat}> <div key={j} alt={STATS[s].stat}>
{shapes[s]()} {shapes[s]()}
@ -67,7 +67,7 @@ function GameConstruct(props) {
const skills = range(0, 3) const skills = range(0, 3)
.map(i => <SkillBtn key={i} construct={construct} i={i} />); .map(i => <SkillBtn key={i} construct={construct} i={i} />);
let crypSkills = <div> &nbsp; </div>; let crypSkills = <div> &nbsp; </div>;
if (player) crypSkills = (<div className="skills"> {skills} </div>); if (player) crypSkills = (<div className="skills"> {skills} </div>);
@ -109,6 +109,7 @@ function GameConstruct(props) {
{combatTextEl} {combatTextEl}
</figure> </figure>
<div className="effects"> {effects} </div> <div className="effects"> {effects} </div>
<div className="spacer"></div>
</div> </div>
); );
} }