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
hoverInfo(e, info)} > + {shapes[s]()} +
{construct[stat.stat].value}
+
; + }); + + const defensiveStats = Object.keys(DEFENSE).map(s => { + const stat = DEFENSE[s]; + + const info = (s.includes('Life') && 'lifeStat'); return
hoverInfo(e, 'constructSpecs')} > {specs}
-
- {stats} +
+ {offensiveStats} +
+
+ {defensiveStats}
); diff --git a/client/src/components/vbox.component.jsx b/client/src/components/vbox.component.jsx index 2f1770da..536e093d 100644 --- a/client/src/components/vbox.component.jsx +++ b/client/src/components/vbox.component.jsx @@ -45,10 +45,6 @@ const addState = connect( return ws.sendVboxRefund(instance.id, i); } - function sendItemUnequip([constructId, item]) { - return ws.sendVboxUnequip(instance.id, constructId, item); - } - return { itemUnequip, instance, @@ -59,7 +55,6 @@ const addState = connect( itemInfo, sendInstance, - sendItemUnequip, sendVboxBuy, sendVboxCombine, sendVboxRefill, @@ -112,7 +107,6 @@ class Vbox extends preact.Component { itemInfo, // Function Calls dispatchVboxSelect, - sendItemUnequip, sendInstance, sendVboxBuy, sendVboxCombine, @@ -128,7 +122,6 @@ class Vbox extends preact.Component { const setVboxSelected = v => dispatchVboxSelect(v, { itemInfo, itemUnequip, vbox }); const clearVboxSelected = () => setVboxSelected({ storeSelect: [], stashSelect: [] }); - const vboxBuySelected = () => sendVboxBuy(storeSelect[0][0], storeSelect[0][1]); const clearTutorial = () => { setTutorial(null); sendInstance(); @@ -147,7 +140,7 @@ class Vbox extends preact.Component {

e.target.scrollIntoView(true)} - onMouseOver={e => vboxHover(e, 'store')}> STORE + onMouseOver={e => vboxHover(e, 'store')}> VBOX

vboxHover(e, 'bits')}> {vbox.bits}b @@ -168,41 +161,10 @@ class Vbox extends preact.Component { ); } - function stashHdr() { - const refund = storeSelect.length === 0 && stashSelect.length === 1 - ? itemInfo.items.find(i => i.item === vbox.stash[stashSelect[0]]).cost - : 0; - const tutorialDisabled = tutorial && tutorial < 8 - && instance.time_control === 'Practice' && instance.rounds.length === 1; - const refundBtn = ( - - ); - - return ( -
-

e.target.scrollIntoView(true)} - onMouseOver={e => vboxHover(e, 'stash')}> STASH -

- {refundBtn} -
- ); - } - // EVERYTHING return (
{storeHdr()} - {stashHdr()} -
-
-
); } diff --git a/client/src/components/vbox.store.jsx b/client/src/components/vbox.store.jsx index f4d1878c..3f109581 100644 --- a/client/src/components/vbox.store.jsx +++ b/client/src/components/vbox.store.jsx @@ -80,11 +80,8 @@ class storeElement extends preact.Component { return (
e.stopPropagation()}> -
- {range(0, 6).map(i => availableBtn(vbox.store['Colours'][i], 'Colours', i.toString()))} -
- {range(0, 3).map(i => availableBtn(vbox.store['Skills'][i], 'Skills', i.toString()))} + {range(0, 2).map(i => availableBtn(vbox.store['Skills'][i], 'Skills', i.toString()))} {range(0, 3).map(i => availableBtn(vbox.store['Specs'][i], 'Specs', i.toString()))}
diff --git a/client/src/utils.jsx b/client/src/utils.jsx index 0ca4d727..729b0f2d 100644 --- a/client/src/utils.jsx +++ b/client/src/utils.jsx @@ -47,7 +47,7 @@ const numSort = (k, desc) => { const NULL_UUID = '00000000-0000-0000-0000-000000000000'; -const STATS = { +const OFFENSE = { RedPower: { stat: 'red_power', colour: 'red', @@ -68,6 +68,8 @@ const STATS = { colour: 'white', svg: shapes.triangle, }, +}; +const DEFENSE = { RedLife: { stat: 'red_life', colour: 'red', @@ -83,7 +85,7 @@ const STATS = { colour: 'blue', svg: shapes.square, }, -}; +} const COLOURS = [ '#a52a2a', @@ -294,7 +296,8 @@ module.exports = { errorToast, infoToast, NULL_UUID, - STATS, + OFFENSE, + DEFENSE, COLOURS, TARGET_COLOURS, randomPoints,