construct buttons
This commit is contained in:
ntr
parent
711a83ba56
commit
90a60ebd65
@ -1,388 +0,0 @@
|
||||
/*
|
||||
INSTANCE
|
||||
*/
|
||||
|
||||
.instance {
|
||||
overflow-x: hidden;
|
||||
display: grid;
|
||||
grid-template-columns: 2fr minmax(min-content, 1fr);
|
||||
grid-template-rows: min-content 1fr;
|
||||
|
||||
grid-template-areas:
|
||||
"vbox info"
|
||||
"constructs info";
|
||||
}
|
||||
|
||||
@media (max-width: 1920px) {
|
||||
.instance .info table td svg {
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
.instance svg {
|
||||
height: 1.5em;
|
||||
}
|
||||
}
|
||||
|
||||
.instance .top {
|
||||
grid-area: top;
|
||||
}
|
||||
|
||||
.instance.lobby {
|
||||
align-content: center;
|
||||
}
|
||||
|
||||
.scoreboard .ready {
|
||||
background: black;
|
||||
color: forestgreen;
|
||||
}
|
||||
|
||||
.instance .info {
|
||||
/*font-size: 75%;*/
|
||||
margin-left: 1em;
|
||||
grid-area: info;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
justify-content: center;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
.instance .info h2 {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.instance .info .combos {
|
||||
margin-top: 1.5em;
|
||||
}
|
||||
|
||||
.instance .constructs {
|
||||
grid-area: constructs;
|
||||
}
|
||||
|
||||
.instance .equip {
|
||||
grid-area: equip;
|
||||
}
|
||||
|
||||
.instance .equip .skills {
|
||||
border-right-width: 0;
|
||||
}
|
||||
|
||||
/* VBOX */
|
||||
.vbox {
|
||||
align-content: space-between;
|
||||
grid-area: vbox;
|
||||
display: grid;
|
||||
grid-template-rows: min-content min-content min-content;
|
||||
grid-template-columns: 1fr min-content 1fr;
|
||||
grid-template-areas:
|
||||
"vbox varrow inventory"
|
||||
"vbox . carrow"
|
||||
"vbox . combiner";
|
||||
}
|
||||
|
||||
.vbox-inventory {
|
||||
grid-area: inventory;
|
||||
}
|
||||
|
||||
.vbox-combiner {
|
||||
grid-area: combiner;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.vbox-combiner-arrow {
|
||||
color: #444;
|
||||
grid-area: carrow;
|
||||
display: block;
|
||||
text-align: center;
|
||||
font-size: 2em;
|
||||
vertical-align: center;
|
||||
}
|
||||
|
||||
.vbox-arrow, .vbox-arrow-mobile {
|
||||
display: flex;
|
||||
justify-content:center;
|
||||
align-content:center;
|
||||
flex-direction:column;
|
||||
|
||||
margin: 1em 0.25em 0 0.25em;
|
||||
grid-area: varrow;
|
||||
font-size: 2em;
|
||||
color: #444;
|
||||
}
|
||||
|
||||
.vbox-combiner button {
|
||||
flex: 0;
|
||||
}
|
||||
|
||||
|
||||
.vbox-hdr {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.vbox-hdr h3 {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.vbox-hdr .bits {
|
||||
font-size: 2em;
|
||||
line-height: 1em;
|
||||
animation: bits 1s ease-out;
|
||||
}
|
||||
|
||||
.arrow {
|
||||
grid-area: arrow;
|
||||
color: #444;
|
||||
}
|
||||
|
||||
@keyframes action {
|
||||
0% {
|
||||
color: palegoldenrod;
|
||||
}
|
||||
100% {
|
||||
color: whitesmoke;
|
||||
}
|
||||
}
|
||||
|
||||
/* CONSTRUCT LIST */
|
||||
|
||||
.construct-list {
|
||||
grid-area: constructs;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.instance-construct {
|
||||
flex: 1;
|
||||
display: grid;
|
||||
grid-template-rows: min-content min-content min-content 1fr min-content;
|
||||
grid-template-areas:
|
||||
"name "
|
||||
"skills "
|
||||
"specs "
|
||||
"avatar "
|
||||
"stats ";
|
||||
|
||||
/*padding: 0.5em;*/
|
||||
border: 2px solid #222;
|
||||
border-left-width: 0;
|
||||
}
|
||||
|
||||
.instance-construct:first-child {
|
||||
margin-left: 0;
|
||||
border-left-width: 1px;
|
||||
}
|
||||
|
||||
.construct-list .name {
|
||||
grid-area: name;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
.construct-list .avatar {
|
||||
grid-area: avatar;
|
||||
object-fit: contain;
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.construct-list .name {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.construct-list .skills {
|
||||
padding: 0 0.5em;
|
||||
grid-area: skills;
|
||||
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
grid-gap: 0 0.5em;
|
||||
}
|
||||
|
||||
.construct-list .skills button.empty {
|
||||
border-style: dashed;
|
||||
}
|
||||
|
||||
.construct-list .specs {
|
||||
margin-top: 1em;
|
||||
grid-area: specs;
|
||||
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
grid-gap: 0 0.5em;
|
||||
}
|
||||
|
||||
.construct-list .specs figure {
|
||||
flex: 1;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.construct-list .specs figcaption {
|
||||
font-size: 75%;
|
||||
}
|
||||
|
||||
.construct-list .stats {
|
||||
grid-area: stats;
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
flex: 1;
|
||||
border-width: 0px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.construct-list .stats figcaption {
|
||||
font-size: 75%;
|
||||
}
|
||||
|
||||
.stats div:nth-child(4n) {
|
||||
margin: 0 1em;
|
||||
}
|
||||
|
||||
.stats div {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.construct-list .stats .damage-label {
|
||||
grid-area: dl;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.construct-list .stats .speed-label {
|
||||
grid-area: sl;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.construct-list .stats .life-label {
|
||||
grid-area: ll;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
/* Equipment */
|
||||
.equip {
|
||||
display: flex;
|
||||
margin: 1.5em 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.equip h3 {
|
||||
margin-bottom: 0.5em;
|
||||
text-transform: uppercase;
|
||||
font-weight: bold;
|
||||
letter-spacing: 0.1em;
|
||||
}
|
||||
|
||||
.equip .specs {
|
||||
flex: 1;
|
||||
border: 2px solid #222;
|
||||
}
|
||||
|
||||
.equip .items {
|
||||
display: flex;
|
||||
flex: 1 0 100%;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.label {
|
||||
flex: 1 0 100%;
|
||||
}
|
||||
|
||||
.equipping {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.equipping::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
left: 50%;
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
transform-origin: center;
|
||||
background-color: whitesmoke;
|
||||
animation: equipping-skill 2s infinite ease-out alternate;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.equipping::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 2px;
|
||||
left: 50%;
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
transform-origin: center;
|
||||
background-color: whitesmoke;
|
||||
animation: equipping-skill 2s infinite ease-out alternate;
|
||||
opacity: 0;
|
||||
animation-delay: 0.75s
|
||||
}
|
||||
|
||||
@keyframes equipping-skill {
|
||||
from {
|
||||
transform: translate(-50%, 0) scaleX(0);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: translate(-50%, 0) scaleX(0.75);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.equip-spec {
|
||||
position: relative;
|
||||
stroke: #333;
|
||||
}
|
||||
|
||||
.equip-spec::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 2px;
|
||||
left: 50%;
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
transform-origin: center;
|
||||
background-color: whitesmoke;
|
||||
animation: equipping-skill 2s infinite ease-out alternate;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.thresholds {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.thresholds svg {
|
||||
stroke-width: 5px;
|
||||
}
|
||||
|
||||
.thresholds hr {
|
||||
margin: 1em 0;
|
||||
}
|
||||
|
||||
.colour-reqs {
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.thresholds figure svg {
|
||||
height: 1.5em;
|
||||
}
|
||||
|
||||
.thresholds .unmet {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
/* Mobile Nav*/
|
||||
.instance-nav { display: none; }
|
||||
|
||||
.vbox-arrow-mobile { display: none }
|
||||
@ -1,6 +1,6 @@
|
||||
require('./assets/styles/styles.css');
|
||||
require('./assets/styles/styles.mobile.css');
|
||||
require('./assets/styles/instance.css');
|
||||
require('./assets/styles/instance.less');
|
||||
require('./assets/styles/vbox.less');
|
||||
require('./assets/styles/instance.mobile.css');
|
||||
require('./assets/styles/game.css');
|
||||
|
||||
@ -124,12 +124,12 @@ function Construct(props) {
|
||||
}
|
||||
|
||||
// const action = skill ? '' : 'action';
|
||||
const equip = skillList.includes(vbox.bound[itemEquip]) && !skill ? 'equipping' : '';
|
||||
const classes = `${equip} ${!skill ? 'empty' : ''}`;
|
||||
const equipping = skillList.includes(vbox.bound[itemEquip]) && !skill;
|
||||
const classes = `${equipping ? 'equipping' : ''} ${!skill ? 'empty' : ''}`;
|
||||
return (
|
||||
<button
|
||||
key={i}
|
||||
disabled={!skill && itemEquip === null}
|
||||
disabled={!skill && !equipping}
|
||||
class={classes}
|
||||
onClick={skillClick}
|
||||
onDblClick={skillDblClick}
|
||||
@ -143,12 +143,12 @@ function Construct(props) {
|
||||
const s = construct.specs[i];
|
||||
|
||||
if (!s) {
|
||||
const equip = specList.includes(vbox.bound[itemEquip]) ? 'equip-spec' : 'gray';
|
||||
const equipping = specList.includes(vbox.bound[itemEquip]);
|
||||
const classes = `${equipping ? 'equip-spec' : 'gray'} empty`;
|
||||
return (
|
||||
<figure key={i} class={equip} >
|
||||
{shapes.diamond(equip)}
|
||||
<figcaption> </figcaption>
|
||||
</figure>
|
||||
<button key={i} class={classes} disabled={!equipping} >
|
||||
{shapes.None()}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@ -38,6 +38,14 @@ module.exports = {
|
||||
|
||||
// specs
|
||||
// Base
|
||||
|
||||
None: () =>
|
||||
<figure>
|
||||
{diamond(['gray'])}
|
||||
<figcaption> </figcaption>
|
||||
</figure>,
|
||||
|
||||
|
||||
Power: () =>
|
||||
<figure>
|
||||
{circle(['white'])}
|
||||
|
||||
@ -124,7 +124,7 @@ function Vbox(args) {
|
||||
function combinerChange(newCombiner) {
|
||||
setCombiner(newCombiner);
|
||||
|
||||
if (combiner.length === 1) {
|
||||
if (newCombiner.length === 1) {
|
||||
setItemEquip(newCombiner[0]);
|
||||
} else {
|
||||
setItemEquip(null);
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user