From 20fd2376e80ed228eaecf3663718e22aa88a7ea0 Mon Sep 17 00:00:00 2001 From: Mashy Date: Mon, 13 May 2019 23:12:04 +1000 Subject: [PATCH] Added filtered skills and specs --- client/instance.css | 102 +++++++++++++++---- client/src/components/instance.component.jsx | 2 + client/src/components/instance.equip.jsx | 95 +++++++++++++++++ 3 files changed, 178 insertions(+), 21 deletions(-) create mode 100644 client/src/components/instance.equip.jsx diff --git a/client/instance.css b/client/instance.css index 8037ee86..a53cc675 100644 --- a/client/instance.css +++ b/client/instance.css @@ -11,8 +11,8 @@ "n v v v v v v v x x x x" "n v v v v v v v x x x x" "n v v v v v v v x x x x" - "g g g g g g g g x x x x" - "g g g g g g g g x x x x" + "n g g g g g g g x x x x" + "n g g g g g g g x x x x" "f f f f f f f f x x x x" "f f f f f f f f x x x x" "f f f f f f f f x x x x" @@ -33,19 +33,6 @@ } -.instance-cryp-list { - grid-area: f; - flex: 1 1 auto; - display: flex; - flex-flow: row; - padding: 0 2em 0 2em; - align-content: flex-start; - - min-width: 300px; - - overflow: hidden; -} - .instance .spacer { flex-grow: 1 @@ -54,11 +41,11 @@ .vbox { grid-area: v; display: grid; - grid-template-columns: repeat(11, 1fr); + grid-template-columns: 5fr 1fr 5fr; grid-template-rows: repeat(2, 1fr); grid-template-areas: - "vb vb vb vb vb . i i i i i" - "vb vb vb vb vb . i i i i i"; + "vb . i" + "vb . i"; } .vbox-box { @@ -121,6 +108,8 @@ margin: 0; } +/* VBOX */ + .vbox-btn:active, .vbox-btn:hover, .vbox-btn:focus { color: black; } @@ -177,6 +166,20 @@ } /* CRYP BOX */ + +.instance-cryp-list { + grid-area: f; + flex: 1 1 auto; + display: flex; + flex-flow: row; + padding: 0 2em 0 2em; + align-content: flex-start; + + min-width: 300px; + + overflow: hidden; +} + .instance-cryp { display: grid; grid-template-columns: repeat(5, 1fr); @@ -249,10 +252,10 @@ grid-area: st; display: grid; grid-template-rows: 1fr 3fr; - grid-template-columns: repeat(7, 1fr); + grid-template-columns: 3fr 1fr 3fr; grid-template-areas: - "dl dl dl sl ll ll ll" - "di di di si li li li"; + "dl sl ll" + "di si li"; border-top: 1px solid whitesmoke; } @@ -311,4 +314,61 @@ justify-content: center; } +/* Equipment */ +.instance-equip { + grid-area: g; + display: flex; + justify-content: center; +} +.instance-equip .skills { + display: flex; + min-height: 100px; + flex-direction: column; +} + +.instance-equip .skills button { + flex: 1 1 100%; + color: whitesmoke; + font-size: 16pt; + padding: 10px; + border-width: 0px; + border-bottom-width: 1px; + border-left-width: 1px; + border-right-width: 1px; + border-top-width: 1px; + height: 100%; + +} + + +.instance-equip .specs { + display: flex; + padding-left: 50px; + flex-direction: column; +} + +.instance-equip .items { + display: flex; + justify-content: center; +} + +.instance-equip .label { + display: flex; + justify-content: center; + font-size: 20pt; + padding: 15px; + +} + +.instance-equip .specs figure { + flex: 1; + border: 0; + padding: 0.5em 1em 0 0; + text-align: center; +} + + +.instance-equip .specs figcaption { + font-size: 75%; +} diff --git a/client/src/components/instance.component.jsx b/client/src/components/instance.component.jsx index e6adf175..d6fdf09c 100644 --- a/client/src/components/instance.component.jsx +++ b/client/src/components/instance.component.jsx @@ -3,6 +3,7 @@ const preact = require('preact'); const VboxContainer = require('./vbox.container'); const InfoContainer = require('./info.container'); const InstanceCrypsContainer = require('./instance.cryps'); +const EquipmentContainer = require('./instance.equip'); function InstanceComponent(args) { const { @@ -92,6 +93,7 @@ function InstanceComponent(args) { + ); diff --git a/client/src/components/instance.equip.jsx b/client/src/components/instance.equip.jsx new file mode 100644 index 00000000..1275eb5b --- /dev/null +++ b/client/src/components/instance.equip.jsx @@ -0,0 +1,95 @@ +const { connect } = require('preact-redux'); +const preact = require('preact'); +const range = require('lodash/range'); + +const actions = require('../actions'); +const { convertVar, SPECS } = require('./../utils'); + +const addState = connect( + function receiveState(state) { + const { player, vboxInfo } = state; + + return { player, vboxInfo }; + }, + + function receiveDispatch(dispatch) { + function setInfo(item, value) { + dispatch(actions.setInfo([item, value])); + } + + function clearInfo() { + return dispatch(actions.setInfo([])); + } + + return { setInfo, clearInfo }; + } + +); + +function Equipment(props) { + const { + player, + setInfo, + vboxInfo, + } = props; + + const { vbox } = player; + + function boundClick(e, i) { + const value = vbox.bound[i]; + setInfo('item', value); + + return false; + } + + // const classes = `right ${skill ? '' : 'action'}`; + const skillList = vboxInfo.vars.filter(v => v.skill).map(v => v.v); + const specList = vboxInfo.vars.filter(v => v.spec).map(v => v.v); + + const skills = range(0, 9).map(i => { + const item = convertVar(vbox.bound[i]); + if (skillList.includes(item)) { + return ( + + ); + } return false; + }); + + const specs = range(0, 9).map(i => { + const item = convertVar(vbox.bound[i]); + if (specList.includes(item)) { + return ( +
boundClick(e, i)}> + {SPECS[item].svg(`stat-icon ${SPECS[item].colour}`)} +
{SPECS[item].caption}
+
+ ); + } return false; + }); + // const specLabel = specs.every(i => i === false) ? '' : 'Specs'; + + return ( +
+
+
+ Skills +
+
+ {skills} +
+
+
+
+ Specs +
+
+ {specs} +
+
+
+ ); +} + +module.exports = addState(Equipment);