construct buttons

client/assets/styles/instance.css

@@ -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 }

client/index.js

@@ -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');

client/src/components/instance.constructs.jsx

@@ -124,12 +124,12 @@ function Construct(props) {
         }
 
         // const action = skill ? '' : 'action';
-        const equip = skillList.includes(vbox.bound[itemEquip]) && !skill ? 'equipping' : '';
+        const equipping = skillList.includes(vbox.bound[itemEquip]) && !skill;
-        const classes = `${equip} ${!skill ? 'empty' : ''}`;
+        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} >
+                <button key={i} class={classes} disabled={!equipping} >
-                    {shapes.diamond(equip)}
+                    {shapes.None()}
-                    <figcaption>&nbsp;</figcaption>
+                </button>
-                </figure>
             );
         }
 

client/src/components/shapes.jsx

@@ -38,6 +38,14 @@ module.exports = {
 
     // specs
     // Base
+
+    None: () =>
+    <figure>
+        {diamond(['gray'])}
+        <figcaption>&nbsp;</figcaption>
+    </figure>,
+
+
     Power: () =>
     <figure>
         {circle(['white'])}

client/src/components/vbox.component.jsx

@@ -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);