css fixes and removed long info componenents

This commit is contained in:
Mashy 2019-05-14 01:31:49 +10:00
parent 76a3ddc08e
commit af050143df
2 changed files with 28 additions and 31 deletions

View File

@ -7,17 +7,17 @@
grid-template-columns: repeat(12, 1fr); grid-template-columns: repeat(12, 1fr);
grid-template-rows: repeat(11, 1fr); grid-template-rows: repeat(11, 1fr);
grid-template-areas: grid-template-areas:
". v v v v v v v x x x x" "n v v v v v v v v i i i"
"n v v v v v v v x x x x" "n v v v v v v v v i i i"
"n v v v v v v v x x x x" "n v v v v v v v v i i i"
"n v v v v v v v x x x x" "n v v v v v v v v i i i"
"n g g g g g g g x x x x" "n e e e e e e e e e e e"
"n g g g g g g g x x x x" "n e e e e e e e e e e e"
"f f f f f f f f x x x x" "c c c c c c c c c c c c"
"f f f f f f f f x x x x" "c c c c c c c c c c c c"
"f f f f f f f f x x x x" "c c c c c c c c c c c c"
"f f f f f f f f x x x x" "c c c c c c c c c c c c"
"f f f f f f f f x x x x"; "c c c c c c c c c c c c";
} }
.instance-hdr { .instance-hdr {
@ -25,39 +25,35 @@
display: flex; display: flex;
flex-flow: column; flex-flow: column;
flex: 0 0 100%; flex: 0 0 100%;
padding-top: 50px;
padding-right: 20px;
} }
.instance-info { .instance-info {
grid-area: x; grid-area: i;
flex: 0 0 50%; justify-self: start;
padding-left: 20px;
} }
.instance .spacer { .instance .spacer {
flex-grow: 1 flex-grow: 1
} }
.vbox { .vbox {
grid-area: v; grid-area: v;
display: grid; display: flex;
grid-template-columns: 5fr 1fr 5fr; justify-content: flex-end;
grid-template-rows: repeat(2, 1fr);
grid-template-areas:
"vb . i"
"vb . i";
} }
.vbox-box { .vbox-box {
grid-area: vb;
justify-self: end; justify-self: end;
max-width: 450px; max-width: 450px;
display: flex; display: flex;
flex-flow: row wrap; flex-flow: row wrap;
padding-right: 50px;
} }
.vbox-inventory { .vbox-inventory {
grid-area: i;
justify-self: start; justify-self: start;
max-width: 450px; max-width: 450px;
display: flex; display: flex;
@ -168,13 +164,13 @@
/* CRYP BOX */ /* CRYP BOX */
.instance-cryp-list { .instance-cryp-list {
grid-area: f; grid-area: c;
flex: 1 1 auto; flex: 1 1 auto;
display: flex; display: flex;
flex-flow: row; flex-flow: row;
padding: 0 2em 0 2em; padding: 0 2em 0 2em;
align-content: flex-start; align-content: flex-start;
justify-content: center;
min-width: 300px; min-width: 300px;
overflow: hidden; overflow: hidden;
@ -316,7 +312,7 @@
/* Equipment */ /* Equipment */
.instance-equip { .instance-equip {
grid-area: g; grid-area: e;
display: flex; display: flex;
justify-content: center; justify-content: center;
} }

View File

@ -169,7 +169,7 @@ function Info(args) {
const filteredCombos = vboxInfo.combos const filteredCombos = vboxInfo.combos
.filter(combo => combiner.every(u => u === null .filter(combo => combiner.every(u => u === null
|| combo.units.includes(player.vbox.bound[u]))); || combo.units.includes(player.vbox.bound[u])));
if (filteredCombos.length > 6) return false;
return ( return (
<table> <table>
<tbody> <tbody>
@ -183,11 +183,12 @@ function Info(args) {
</table> </table>
); );
} }
const vboxCombos = vboxInfo.combos.filter(c => c.units.includes(info[1]));
if (vboxCombos.length > 6) return false;
return ( return (
<table> <table>
<tbody> <tbody>
{vboxInfo.combos.filter(c => c.units.includes(info[1])).map((c, i) => {vboxCombos.map((c, i) =>
<tr key={i} > <tr key={i} >
<td className="highlight" >{convertVar(c.var)}</td> <td className="highlight" >{convertVar(c.var)}</td>
{c.units.map((u, j) => <td key={j} >{convertVar(u)}</td>)} {c.units.map((u, j) => <td key={j} >{convertVar(u)}</td>)}
@ -206,12 +207,12 @@ function Info(args) {
return ( return (
<div className={classes} > <div className={classes} >
<InfoCryp />
<CrypVar /> <CrypVar />
<Combos /> <Combos />
<ScoreBoard />
</div> </div>
); );
} }
// <InfoCryp /> not required anymore
// <ScoreBoard /> Takes up too much space maybe a context switch
module.exports = Info; module.exports = Info;