From 90a60ebd65969c6381985343f088fe33eeaf22b6 Mon Sep 17 00:00:00 2001 From: ntr Date: Tue, 23 Jul 2019 14:17:41 +1000 Subject: [PATCH] construct buttons --- client/assets/styles/instance.css | 388 ------------------ client/index.js | 2 +- client/src/components/instance.constructs.jsx | 16 +- client/src/components/shapes.jsx | 8 + client/src/components/vbox.component.jsx | 2 +- 5 files changed, 18 insertions(+), 398 deletions(-) delete mode 100644 client/assets/styles/instance.css diff --git a/client/assets/styles/instance.css b/client/assets/styles/instance.css deleted file mode 100644 index a34e7c22..00000000 --- a/client/assets/styles/instance.css +++ /dev/null @@ -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 } diff --git a/client/index.js b/client/index.js index 636aa1df..42505427 100644 --- a/client/index.js +++ b/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'); diff --git a/client/src/components/instance.constructs.jsx b/client/src/components/instance.constructs.jsx index b2c27234..bda246d2 100644 --- a/client/src/components/instance.constructs.jsx +++ b/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 classes = `${equip} ${!skill ? 'empty' : ''}`; + const equipping = skillList.includes(vbox.bound[itemEquip]) && !skill; + const classes = `${equipping ? 'equipping' : ''} ${!skill ? 'empty' : ''}`; return ( ); } diff --git a/client/src/components/shapes.jsx b/client/src/components/shapes.jsx index e434b21f..760ae491 100644 --- a/client/src/components/shapes.jsx +++ b/client/src/components/shapes.jsx @@ -38,6 +38,14 @@ module.exports = { // specs // Base + + None: () => +
+ {diamond(['gray'])} +
 
+
, + + Power: () =>
{circle(['white'])} diff --git a/client/src/components/vbox.component.jsx b/client/src/components/vbox.component.jsx index e0acb496..902d1013 100644 --- a/client/src/components/vbox.component.jsx +++ b/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);