css fixes and removed long info componenents
This commit is contained in:
parent
76a3ddc08e
commit
af050143df
@ -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;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -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;
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user