From aa3bb65907b53f425dba9f49fd64acfa92fd4d7a Mon Sep 17 00:00:00 2001 From: ntr Date: Tue, 23 Jul 2019 11:56:05 +1000 Subject: [PATCH 1/5] names --- server/src/names.rs | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/server/src/names.rs b/server/src/names.rs index 67c6e918..36833363 100644 --- a/server/src/names.rs +++ b/server/src/names.rs @@ -1,7 +1,7 @@ use rand::prelude::*; use rand::{thread_rng}; -const FIRSTS: [&'static str; 33] = [ +const FIRSTS: [&'static str; 36] = [ "artificial", "ambient", "borean", @@ -13,6 +13,8 @@ const FIRSTS: [&'static str; 33] = [ "convex", "distorted", "dub", + "emotive", + "emotionless", "fierce", "inverted", "leafy", @@ -31,6 +33,7 @@ const FIRSTS: [&'static str; 33] = [ "purified", "recalcitrant", "rogue", + "subversive", "subterranean", "synthetic", "sweet", From 5c35c2d1953f07bbe58bc1a9dd6bab5fb7999a9c Mon Sep 17 00:00:00 2001 From: ntr Date: Tue, 23 Jul 2019 13:42:23 +1000 Subject: [PATCH 2/5] icons wip --- client/assets/styles/instance.css | 44 +++++-------------- client/assets/styles/vbox.less | 25 ++++++++--- client/src/components/instance.constructs.jsx | 7 ++- client/src/components/nav.jsx | 16 ------- client/src/components/shapes.jsx | 35 +++++++++++++-- client/src/components/vbox.component.jsx | 8 ++-- server/src/vbox.rs | 2 +- 7 files changed, 70 insertions(+), 67 deletions(-) diff --git a/client/assets/styles/instance.css b/client/assets/styles/instance.css index 71d0b229..a34e7c22 100644 --- a/client/assets/styles/instance.css +++ b/client/assets/styles/instance.css @@ -192,29 +192,29 @@ } .construct-list .skills { + padding: 0 0.5em; grid-area: skills; - display: flex; - border-width: 0px; + + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-gap: 0 0.5em; } -.construct-list .skills button { - flex: 1; - /*border: 1px solid #222;*/ - border: none; +.construct-list .skills button.empty { + border-style: dashed; } .construct-list .specs { margin-top: 1em; grid-area: specs; - display: flex; - flex: 1; - justify-content: center; - border-width: 0px; + + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-gap: 0 0.5em; } .construct-list .specs figure { flex: 1; - border: 0; align-items: center; text-align: center; } @@ -294,19 +294,6 @@ flex: 1 0 100%; } -.equip .skills { - flex: 1; - border: 2px solid #222; -} - -.equip .skills button { - color: whitesmoke; - font-size: 1em; - padding: 0.2em; - border-width: 0px; - margin-bottom: 0.5em; -} - .equipping { position: relative; } @@ -349,11 +336,6 @@ } } -.equip .specs figure { - border: 0; - text-align: center; -} - .equip-spec { position: relative; stroke: #333; @@ -372,10 +354,6 @@ opacity: 0; } -.equip .specs figcaption { - font-size: 75%; -} - .thresholds { display: flex; flex-flow: column; diff --git a/client/assets/styles/vbox.less b/client/assets/styles/vbox.less index e8a47386..734c841d 100644 --- a/client/assets/styles/vbox.less +++ b/client/assets/styles/vbox.less @@ -15,17 +15,17 @@ .vbox-colours { display: grid; grid-template-columns: repeat(6, 1fr); - grid-gap: 1em 2em; + grid-gap: 0.5em 1em; align-items: center; - margin-bottom: 1em; + margin-bottom: 0.5em; } .vbox-items { display: grid; grid-template-columns: repeat(3, 1fr); - grid-gap: 1em 2em; + grid-gap: 0.5em 1em; align-items: center; - margin-bottom: 1em; + margin-bottom: 0.5em; button { width: 100%; @@ -38,6 +38,8 @@ background-color: @gray; border-width: 0; + height: 3em; + :active, :hover, :focus { color: white; } @@ -62,9 +64,11 @@ } button { - height: 3em; + height: 4em; margin: 0; + text-transform: none; + &.empty { border-style: dashed; } @@ -79,4 +83,15 @@ svg { stroke: none; } + + // figures don't scale well + figure { + svg { + height: 2em; + } + + figcaption { + line-height: initial; + } + } } diff --git a/client/src/components/instance.constructs.jsx b/client/src/components/instance.constructs.jsx index 7ffe9786..b2c27234 100644 --- a/client/src/components/instance.constructs.jsx +++ b/client/src/components/instance.constructs.jsx @@ -125,7 +125,7 @@ function Construct(props) { // const action = skill ? '' : 'action'; const equip = skillList.includes(vbox.bound[itemEquip]) && !skill ? 'equipping' : ''; - const classes = `${equip}`; + const classes = `${equip} ${!skill ? 'empty' : ''}`; return ( ); }); diff --git a/client/src/components/nav.jsx b/client/src/components/nav.jsx index 7a6aff29..b9a057c4 100644 --- a/client/src/components/nav.jsx +++ b/client/src/components/nav.jsx @@ -1,15 +1,9 @@ const { connect } = require('preact-redux'); const preact = require('preact'); -const { Fragment } = require('preact'); -const { postData } = require('../utils'); -console.log(postData); const actions = require('../actions'); const AccountStatus = require('./account.status'); -const testGame = process.env.NODE_ENV === 'development' && require('./../test.game'); -const testInstance = process.env.NODE_ENV === 'development' && require('./../test.instance'); - const addState = connect( function receiveState(state) { const { @@ -115,15 +109,6 @@ function Nav(args) { return }); - const haxSection = process.env.NODE_ENV === 'development' - ? ( - -

Hax

- - - ) - : null; - const canJoin = team.some(c => !c); return ( @@ -134,7 +119,6 @@ function Nav(args) {
{joined} - {haxSection} ); } diff --git a/client/src/components/shapes.jsx b/client/src/components/shapes.jsx index 3f70c894..0eb0ae7d 100644 --- a/client/src/components/shapes.jsx +++ b/client/src/components/shapes.jsx @@ -1,3 +1,5 @@ +const preact = require('preact'); + const circle = require('./svgs/circle'); const diamond = require('./svgs/diamond'); const hexagon = require('./svgs/hexagon'); @@ -20,6 +22,10 @@ module.exports = { saw, vboxColour, + Red: () => vboxColour('red'), + Green: () => vboxColour('green'), + Blue: () => vboxColour('blue'), + // stats RedLife: () => square(['red']), GreenLife: () => square(['green']), @@ -29,11 +35,27 @@ module.exports = { BluePower: () => circle(['blue']), Speed: () => triangle(['white']), + // specs // Base - Power: () => circle(['white']), - Life: () => square(['white']), - // Speed, + Power: () => +
+ {circle(['white'])} +
Power
+
, + + Life: () => +
+ {square(['white'])} +
Life
+
, + + // Speed: + //
+ // {triangle(['white'])} + //
Speed
+ //
, + // Lifes Upgrades LifeGG: () => square(['green']), @@ -52,7 +74,12 @@ module.exports = { PowerRB: () => circle(['red', 'blue']), // Speed Upgrades - SpeedGG: () => triangle(['green']), + SpeedGG: () => +
+ {triangle(['green'])} +
Speed
+
, + SpeedRR: () => triangle(['red']), SpeedBB: () => triangle(['blue']), SpeedRG: () => triangle(['red', 'green']), diff --git a/client/src/components/vbox.component.jsx b/client/src/components/vbox.component.jsx index 65c713ab..e0acb496 100644 --- a/client/src/components/vbox.component.jsx +++ b/client/src/components/vbox.component.jsx @@ -171,12 +171,12 @@ function Vbox(args) { return setVboxSelected([group, index]); } - if (['Red', 'Green', 'Blue'].includes(v)) { + if (shapes[v]) { return ( ); } @@ -271,13 +271,13 @@ function Vbox(args) { const highlighted = combiner.indexOf(i) > -1; const classes = `${highlighted ? 'highlight' : ''}`; - if (['Red', 'Green', 'Blue'].includes(v)) { + if (shapes[v]) { return ( ); } diff --git a/server/src/vbox.rs b/server/src/vbox.rs index 866bed49..4e2e1a96 100644 --- a/server/src/vbox.rs +++ b/server/src/vbox.rs @@ -88,7 +88,7 @@ impl Vbox { }; let dist = WeightedIndex::new(items.iter().map(|item| item.1)).unwrap(); - iter::repeat_with(|| { + iter::repeat_with(|| { items[dist.sample(&mut rng)].0}).take(match item_type { ItemType::Colours => 6, _ => 3, From 711a83ba56f4fdebdf90b9ff9baf06ff6ecf40fc Mon Sep 17 00:00:00 2001 From: ntr Date: Tue, 23 Jul 2019 13:52:00 +1000 Subject: [PATCH 3/5] better icons --- client/assets/styles/vbox.less | 7 +- client/src/components/shapes.jsx | 117 ++++++++++++++++++++++++++----- 2 files changed, 106 insertions(+), 18 deletions(-) diff --git a/client/assets/styles/vbox.less b/client/assets/styles/vbox.less index 734c841d..f1947ce3 100644 --- a/client/assets/styles/vbox.less +++ b/client/assets/styles/vbox.less @@ -67,7 +67,7 @@ height: 4em; margin: 0; - text-transform: none; + // text-transform: none; &.empty { border-style: dashed; @@ -77,6 +77,10 @@ color: black; background: @white; border: 1px solid @white; + + ellipse.white { + stroke: black; + } } } @@ -88,6 +92,7 @@ figure { svg { height: 2em; + stroke-width: 8px; } figcaption { diff --git a/client/src/components/shapes.jsx b/client/src/components/shapes.jsx index 0eb0ae7d..e434b21f 100644 --- a/client/src/components/shapes.jsx +++ b/client/src/components/shapes.jsx @@ -58,20 +58,79 @@ module.exports = { // Lifes Upgrades - LifeGG: () => square(['green']), - LifeRR: () => square(['red']), - LifeBB: () => square(['blue']), - LifeRG: () => square(['red', 'green']), - LifeGB: () => square(['green', 'blue']), - LifeRB: () => square(['red', 'blue']), + LifeGG: () => +
+ {square(['green'])} +
Life
+
, + + LifeRR: () => +
+ {square(['green'])} +
Life
+
, + + LifeBB:() => +
+ {square(['green'])} +
Life
+
, + + LifeRG: () => +
+ {square(['red', 'green'])} +
Life
+
, + + LifeGB: () => +
+ {square(['green', 'blue'])} +
Life
+
, + + LifeRB:() => +
+ {square(['red', 'blue'])} +
Life
+
, + // Power Upgrades - PowerGG: () => circle(['green']), - PowerRR: () => circle(['red']), - PowerBB: () => circle(['blue']), - PowerRG: () => circle(['red', 'green']), - PowerGB: () => circle(['green', 'blue']), - PowerRB: () => circle(['red', 'blue']), + PowerGG: () => +
+ {circle(['green'])} +
Power
+
, + + PowerRR: () => +
+ {circle(['green'])} +
Power
+
, + + PowerBB:() => +
+ {circle(['green'])} +
Power
+
, + + PowerRG: () => +
+ {circle(['red', 'green'])} +
Power
+
, + + PowerGB: () => +
+ {circle(['green', 'blue'])} +
Power
+
, + + PowerRB:() => +
+ {circle(['red', 'blue'])} +
Power
+
, // Speed Upgrades SpeedGG: () => @@ -80,9 +139,33 @@ module.exports = {
Speed
, - SpeedRR: () => triangle(['red']), - SpeedBB: () => triangle(['blue']), - SpeedRG: () => triangle(['red', 'green']), - SpeedGB: () => triangle(['green', 'blue']), - SpeedRB: () => triangle(['red', 'blue']), + SpeedRR: () => +
+ {triangle(['green'])} +
Speed
+
, + + SpeedBB:() => +
+ {triangle(['green'])} +
Speed
+
, + + SpeedRG: () => +
+ {triangle(['red', 'green'])} +
Speed
+
, + + SpeedGB: () => +
+ {triangle(['green', 'blue'])} +
Speed
+
, + + SpeedRB:() => +
+ {triangle(['red', 'blue'])} +
Speed
+
, }; From 90a60ebd65969c6381985343f088fe33eeaf22b6 Mon Sep 17 00:00:00 2001 From: ntr Date: Tue, 23 Jul 2019 14:17:41 +1000 Subject: [PATCH 4/5] 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); From 10369dee179a66ecf1368d4d729e44ea9d64bfdc Mon Sep 17 00:00:00 2001 From: ntr Date: Tue, 23 Jul 2019 14:17:46 +1000 Subject: [PATCH 5/5] less --- client/assets/styles/instance.less | 381 +++++++++++++++++++++++++++++ 1 file changed, 381 insertions(+) create mode 100644 client/assets/styles/instance.less diff --git a/client/assets/styles/instance.less b/client/assets/styles/instance.less new file mode 100644 index 00000000..4b7cd9de --- /dev/null +++ b/client/assets/styles/instance.less @@ -0,0 +1,381 @@ +/* + 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 { + .avatar { + grid-area: avatar; + object-fit: contain; + background-size: contain; + background-repeat: no-repeat; + background-position: center; + pointer-events: none; + } + + .name { + grid-area: name; + margin-bottom: 0.5em; + text-align: center; + } + + .skills { + grid-area: skills; + padding: 0 0.5em; + margin-bottom: 0.75em; + + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-gap: 0 0.5em; + + button { + height: 3em; + } + } + + .specs { + grid-area: specs; + padding: 0 0.5em; + + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-gap: 0 0.5em; + + button { + padding: 0.25em 0; + } + + figure { + flex: 1; + align-items: center; + text-align: center; + } + + figcaption { + font-size: 75%; + line-height: initial; + } + } + + .stats { + grid-area: stats; + display: flex; + flex-flow: row; + flex: 1; + border-width: 0px; + text-align: center; + + figcaption { + font-size: 75%; + } + + // give speed some space + div:nth-child(4n) { + margin: 0 1em; + } + + div { + flex: 1; + } + } + + button { + margin: 0; + + &.empty { + border-style: dashed; + } + } +} + +/* 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 }