diff --git a/client/assets/styles/instance.less b/client/assets/styles/instance.less index 86e97a9f..2ce78fbf 100644 --- a/client/assets/styles/instance.less +++ b/client/assets/styles/instance.less @@ -5,7 +5,7 @@ .instance { overflow: hidden; display: grid; - grid-template-rows: min-content 1fr; + grid-template-rows: 7fr 12fr; grid-template-areas: "vbox" @@ -31,13 +31,13 @@ .instance-construct { flex: 1; display: grid; - grid-template-rows: min-content min-content min-content 1fr min-content; + grid-template-columns: min-content 1fr; + grid-template-rows: min-content min-content 1fr min-content; grid-template-areas: - "name " - "skills " - "specs " - "avatar " - "stats "; + "name name " + "skills skills" + "stats avatar" + "defStats defStats"; /*padding: 0.5em;*/ border: 0.1em solid #222; @@ -78,7 +78,6 @@ z-index: 2; display: grid; - grid-template-columns: repeat(3, 1fr); grid-gap: 0 0.5em; button { @@ -89,58 +88,34 @@ } } - .specs { - grid-area: specs; - padding: 0 0.5em; - margin-bottom: 0.75em; - z-index: 2; - - 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; - } - - label { - display: flex; - } - } - - .stats { + .offStats { grid-area: stats; display: flex; - flex-flow: row; - flex: 1; + flex-flow: column; border-width: 0px; - text-align: center; - - figcaption { - // font-size: 75%; - } - + justify-content: center; // give speed some space - div:nth-child(4n) { - margin: 0 1em; - } - div { - flex: 1; + margin: 0.5em 0.75em; + display: flex; + flex-flow: row; + text-align: right; } } + .defStats { + grid-area: defStats; + display: flex; + flex-direction: row; + text-align: center; + justify-content: center; + div { + margin: 0.5em 0.75em; + } + } + + + button { margin: 0; diff --git a/client/assets/styles/vbox.less b/client/assets/styles/vbox.less index e217b100..edc65fe0 100644 --- a/client/assets/styles/vbox.less +++ b/client/assets/styles/vbox.less @@ -2,11 +2,11 @@ align-content: space-between; grid-area: vbox; display: grid; - grid-template-rows: 3fr minmax(min-content, 2fr); - grid-template-columns: 1fr 4fr 6fr minmax(min-content, 2fr);; + grid-template-rows: 1fr min-content; + grid-template-columns: 1fr 4fr; grid-template-areas: - "store-hdr store info-combiner combos" - "stash-hdr stash info-combiner combos"; + "store-hdr info-combiner" + "store store"; margin-bottom: 1em; // immediate children @@ -48,53 +48,15 @@ } } - .stash { - grid-area: stash; - display: grid; - grid-template-columns: repeat(3, 1fr); - grid-gap: 0.5em 1em; - - align-items: center; - border: 0.15em solid @gray; - border-left: 0; - } - - .stash-hdr { - grid-area: stash-hdr; - display: flex; - flex-flow: column; - - text-align: center; - border: 0.15em solid @gray; - border-right: 0; - - h2 { - margin-bottom: 0.5em; - } - - button { - line-height: 1.6; - letter-spacing: 0.15em; - border-width: 0.1em; - } - } - .vbox-hdr { + grid-area: vbox-hdr; margin-bottom: 1em; height: 2em; } - .vbox-colours { - display: grid; - grid-template-columns: repeat(6, 1fr); - grid-gap: 0.5em 1em; - align-items: center; - margin-bottom: 0.5em; - } - .vbox-items { display: grid; - grid-template-columns: repeat(3, 1fr); + grid-template-columns: repeat(5, 1fr); grid-gap: 0.5em 1em; align-items: center; } @@ -115,58 +77,6 @@ border-width: 0.1em; }; } - - .Refunding { - button:not([disabled]) { - &, &:hover, &:active { - background: @red; - color: black; - border: 0.1em solid black; - } - } - svg { - stroke-width: 0.75em; - } - .white { - stroke: black; - } - } - - button { - height: 3.5em; - margin: 0; - width: 100%; - - // text-transform: none; - &.empty { - border-style: dashed; - } - - &.fade { - opacity: 0.4; - } - - &.highlight { - background: @silver; - // overwrite the classes on white svg elements - svg { - stroke-width: 0.75em; - } - } - } - - // figures don't scale well - figure { - svg { - height: 1.5em; - stroke-width: 0.5em; - } - - figcaption { - line-height: initial; - } - } - .info-combiner { grid-area: info-combiner; display: grid; @@ -202,111 +112,46 @@ display: inline-block; vertical-align: middle; } - margin-left: 1em; } - .combiner { - grid-area: combiner; - margin: 1em 0.5em; - width: 50%; - line-height: 1.3; - font-size: 1.25em; - letter-spacing: 0.1em; - border: 0.1em solid @gray-exists; - &:hover { - border: 0.1em solid @gray-hover; - } - } // align-self: flex-end; } - .combos { - display: grid; - grid-area: combos; - margin-left: 0.5em; - margin-right: 0.5em; - grid-template-rows: min-content min-content; - width: 15.5em; - grid-template-areas: - "comboHeader" - "comboList"; - h2 { - text-transform: uppercase; + + button { + height: 5em; + margin: 0; + width: 100%; + + // text-transform: none; + &.empty { + border-style: dashed; } - svg { - display: inline; - height: 1em; + &.fade { + opacity: 0.4; } - figure { - display: inline; - height: 0.5em; + &.highlight { + background: @silver; + // overwrite the classes on white svg elements svg { - margin-right: 0.5em; + stroke-width: 0.75em; } } + } + + // figures don't scale well + figure { + svg { + height: 1.5em; + stroke-width: 0.5em; + } figcaption { - font-size: 1em; - display: inline-block; - vertical-align: middle; - } - - - .combo-header { - text-align: center; - } - - .combo-list { - display: grid; - grid-template-rows: min-content min-content min-content; - grid-template-columns: min-content min-content; - grid-gap: 0.5em; - margin-top: 0.5em; - width: 15.5em; - - .table-button { - display: grid; - text-align: center; - align-content: center; - grid-template-areas: - "item" - "ingr"; - - cursor: pointer; - &:hover { - color: whitesmoke; - background-color: @gray; - } - - .item { - border-top: 0.1em solid #222; - border-bottom: 0.1em solid #222; - flex: 1; - grid-area: item; - font-weight: bold; - div { - width: 5em; - } - } - - - div { - border-left: 0.1em solid #222; - border-right: 0.1em solid #222; - height: 1.75em; - width: 7.5em; - svg { - vertical-align: middle; - } - &:last-child { - border-bottom: 0.1em solid #222; - } - } - } + line-height: initial; } } } diff --git a/client/src/components/instance.constructs.jsx b/client/src/components/instance.constructs.jsx index 7877c584..68044c59 100644 --- a/client/src/components/instance.constructs.jsx +++ b/client/src/components/instance.constructs.jsx @@ -5,7 +5,7 @@ const range = require('lodash/range'); const buttons = require('./buttons'); const shapes = require('./shapes'); -const { STATS } = require('../utils'); +const { OFFENSE, DEFENSE } = require('../utils'); const { ConstructAvatar } = require('./construct'); const actions = require('../actions'); const { removeTier } = require('../utils'); @@ -125,7 +125,7 @@ function Construct(props) { const skillList = itemInfo.items.filter(v => v.skill).map(v => v.item); const specList = itemInfo.items.filter(v => v.spec).map(v => v.item); - const skills = range(0, 3).map(i => { + const skills = range(0, 1).map(i => { const skill = construct.skills[i]; const s = skill ? skill.skill @@ -169,7 +169,7 @@ function Construct(props) { ); }); - const specs = range(0, 3).map(i => { + const specs = range(0, 0).map(i => { const s = construct.specs[i]; if (!s) { @@ -207,12 +207,24 @@ function Construct(props) { ); }); - const stats = Object.keys(STATS).map(s => { - const stat = STATS[s]; + const offensiveStats = Object.keys(OFFENSE).map(s => { + const stat = OFFENSE[s]; const info = (s === 'SpeedStat' && 'speedStat') - || (s.includes('Power') && 'powerStat') - || (s.includes('Life') && 'lifeStat'); + || (s.includes('Power') && 'powerStat'); + return