From 5f2ee673b258da1ef4101f4b42511ef26c661f1e Mon Sep 17 00:00:00 2001 From: Mashy Date: Fri, 22 Nov 2019 12:52:23 +1000 Subject: [PATCH 01/19] mobile avatar --- client/assets/styles/styles.mobile.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/assets/styles/styles.mobile.less b/client/assets/styles/styles.mobile.less index 2eba09ac..4d790489 100644 --- a/client/assets/styles/styles.mobile.less +++ b/client/assets/styles/styles.mobile.less @@ -19,7 +19,7 @@ stroke-width: 1.25em; } .avatar { - display: none; + opacity: 0.1; } } From 8e73dcd92c8a5bda8f45ded9ffca07ea500519af Mon Sep 17 00:00:00 2001 From: Mashy Date: Fri, 22 Nov 2019 14:34:48 +1000 Subject: [PATCH 02/19] game bottom margin, targetting arrow start / end hotfix --- client/assets/styles/game.less | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/client/assets/styles/game.less b/client/assets/styles/game.less index 9b19db2c..ea48cede 100644 --- a/client/assets/styles/game.less +++ b/client/assets/styles/game.less @@ -27,6 +27,7 @@ position: absolute; bottom: 0; + margin-bottom: 0.5em; height: 50%; .avatar { @@ -232,8 +233,8 @@ #targeting, .resolving-skill { position: absolute; - top: 35%; - height: 15%; + top: calc(35% + 0.5em); // calc for 0.5em top gap + height: calc(15% - 1em); // calc for 0.5em + 0.5em top / bottom gap width: calc(90% - 1.25em); z-index: 2; span { @@ -273,7 +274,7 @@ /* some stupid bug in chrome makes it fill the entire screen */ @media screen and (-webkit-min-device-pixel-ratio:0) { #targeting { - max-height: 10em; + // max-height: 10em; } } From af803efe4f7215eeee0bfd74910533d3d5307dd6 Mon Sep 17 00:00:00 2001 From: Mashy Date: Fri, 22 Nov 2019 15:02:42 +1000 Subject: [PATCH 03/19] targetting arrows for mobile --- client/src/components/targeting.arrows.jsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/client/src/components/targeting.arrows.jsx b/client/src/components/targeting.arrows.jsx index f93966c5..a7a7e4b3 100644 --- a/client/src/components/targeting.arrows.jsx +++ b/client/src/components/targeting.arrows.jsx @@ -110,8 +110,11 @@ class TargetSvg extends Component { ? playerTeam.constructs.findIndex(c => c.id === cast.target_construct_id) : otherTeam.constructs.findIndex(c => c.id === cast.target_construct_id); + const skillNumber = window.innerWidth <= 800 // mobile styling trigger + ? playerTeam.constructs[source].skills.findIndex(s => s.skill === cast.skill) + : 0; const sourceY = height; - const sourceX = (source * width / 3) + width / 24; + const sourceX = (source * width / 3) + width / 18 + skillNumber * (width / 9); const targetX = (target * width / 3) + width / 6 + (defensive ? width / 64 : 0) + (source * width / 18); From b5ab43a18a818e1893ee82fe99212e5731268fea Mon Sep 17 00:00:00 2001 From: Mashy Date: Fri, 22 Nov 2019 15:19:22 +1000 Subject: [PATCH 04/19] fix game phase for small phones --- client/assets/styles/styles.mobile.less | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/client/assets/styles/styles.mobile.less b/client/assets/styles/styles.mobile.less index 4d790489..0914c4f2 100644 --- a/client/assets/styles/styles.mobile.less +++ b/client/assets/styles/styles.mobile.less @@ -1,7 +1,6 @@ @media (max-width: 800px) { body { overflow-y: initial; - } #mnml { @@ -138,7 +137,7 @@ } -// portrait menu +// portrait menu or small size vertical in landscape @media (max-width: 600px) { #mnml { grid-template-columns: 1fr; @@ -206,6 +205,14 @@ } } + .stats { + font-size: 6pt; + } + + .skill-description { + font-size: 6pt; + } + section { .list { grid-template-columns: 1fr; From 34f790caa33750243310c8fd43d8492e8c5b9d8b Mon Sep 17 00:00:00 2001 From: Mashy Date: Sat, 23 Nov 2019 17:03:04 +1000 Subject: [PATCH 05/19] moved combiner wip --- client/assets/styles/instance.less | 101 +---------- client/assets/styles/vbox.less | 158 +++++++++++++---- client/src/components/info.component.jsx | 6 +- client/src/components/instance.component.jsx | 2 - client/src/components/vbox.combiner.jsx | 173 ++++++++++++------- client/src/components/vbox.component.jsx | 24 +-- 6 files changed, 252 insertions(+), 212 deletions(-) diff --git a/client/assets/styles/instance.less b/client/assets/styles/instance.less index 055ee56e..2ebd9f12 100644 --- a/client/assets/styles/instance.less +++ b/client/assets/styles/instance.less @@ -5,114 +5,17 @@ .instance { overflow: hidden; display: grid; - grid-template-columns: 1fr minmax(min-content, 1fr); grid-template-rows: min-content 1fr; grid-template-areas: - "vbox info" - "constructs constructs"; - - .info { - h2 { - text-transform: uppercase; - } - svg { - display: inline; - height: 1em; - } - figure { - display: inline; - height: 0.5em; - svg { - margin-right: 0.5em; - } - } - figcaption { - font-size: 1em; - display: inline-block; - vertical-align: middle; - } - margin-left: 1em; - grid-area: info; - display: grid; - grid-template-columns: 1fr min-content; - grid-template-areas: - "item combos"; - - .info-item { - grid-area: item; - } - .combos { - display: grid; - grid-area: combos; - margin-left: 0.5em; - grid-template-rows: min-content min-content; - grid-template-areas: - "comboHeader" - "comboList"; - .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: 2px solid #222; - border-bottom: 2px solid #222; - flex: 1; - grid-area: item; - font-weight: bold; - div { - width: 5em; - } - } - - - div { - border-left: 2px solid #222; - border-right: 2px solid #222; - height: 1.75em; - width: 7.5em; - svg { - vertical-align: middle; - } - &:last-child { - border-bottom: 2px solid #222; - } - } - } - } - } - } + "vbox" + "constructs"; .constructs { grid-area: constructs; } } - - - @keyframes action { 0% { color: palegoldenrod; diff --git a/client/assets/styles/vbox.less b/client/assets/styles/vbox.less index 6b51f9de..05dd9867 100644 --- a/client/assets/styles/vbox.less +++ b/client/assets/styles/vbox.less @@ -3,10 +3,10 @@ grid-area: vbox; display: grid; grid-template-rows: 3fr 2fr; - grid-template-columns: 1fr 4fr 1fr; + grid-template-columns: 1fr 4fr 6fr; grid-template-areas: - "store-hdr store combiner" - "stash-hdr stash combiner"; + "store-hdr store info" + "stash-hdr stash info"; margin-bottom: 1em; line-height: 0; @@ -46,38 +46,6 @@ } } - .combiner { - grid-area: combiner; - display: flex; - flex-direction: column; - line-height: 1.3; - - padding: 0; - - .vbox-padding { - margin-right: 0em; - margin-bottom: 0em; - } - - button { - line-height: 1.3; - font-size: 1.25em; - - letter-spacing: 0.1em; - background-color: @yellow; - color: black; - border-radius: 0; - border: 0; - &[disabled] { - border: 0.1em solid @gray; - border-left: 0; - color: @gray-exists; - }; - - transition-property: 0; - } - } - .stash { grid-area: stash; display: grid; @@ -210,6 +178,126 @@ line-height: initial; } } + + .info { + line-height: 1.6; + + h2 { + text-transform: uppercase; + } + svg { + display: inline; + height: 1em; + } + figure { + display: inline; + height: 0.5em; + svg { + margin-right: 0.5em; + } + } + figcaption { + font-size: 1em; + display: inline-block; + vertical-align: middle; + } + margin-left: 1em; + grid-area: info; + display: grid; + grid-template-rows: min-content min-content; + grid-template-columns: 1fr min-content; + grid-template-areas: + "item combos" + "combiner combos"; + + .combiner { + grid-area: combiner; + button { + margin-top: 1em; + line-height: 1.3; + font-size: 1.25em; + + + letter-spacing: 0.1em; + background-color: @yellow; + color: black; + border-radius: 0; + border: 0; + &[disabled] { + border: 0.1em solid @gray; + border-left: 0; + color: @gray-exists; + }; + transition-property: 0; + } + } + + + .info-item { + grid-area: item; + } + .combos { + display: grid; + grid-area: combos; + margin-left: 0.5em; + grid-template-rows: min-content min-content; + grid-template-areas: + "comboHeader" + "comboList"; + .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: 2px solid #222; + border-bottom: 2px solid #222; + flex: 1; + grid-area: item; + font-weight: bold; + div { + width: 5em; + } + } + + + div { + border-left: 2px solid #222; + border-right: 2px solid #222; + height: 1.75em; + width: 7.5em; + svg { + vertical-align: middle; + } + &:last-child { + border-bottom: 2px solid #222; + } + } + } + } + } + } } @media (min-width: 2000px) { diff --git a/client/src/components/info.component.jsx b/client/src/components/info.component.jsx index eec7b710..4b59e4d3 100644 --- a/client/src/components/info.component.jsx +++ b/client/src/components/info.component.jsx @@ -7,9 +7,12 @@ const { convertItem, removeTier } = require('../utils'); const { tutorialStage } = require('../tutorial.utils'); const shapes = require('./shapes'); +const Combiner = require('./vbox.combiner'); + class InfoComponent extends preact.Component { shouldComponentUpdate(newProps, newState) { + if (newProps.vboxHighlight !== this.props.vboxHighlight) return true; if (newProps.tutorial !== this.props.tutorial) return true; // We don't care about info during tutorial if (newProps.tutorial && this.props.instance.time_control === 'Practice' @@ -30,6 +33,7 @@ class InfoComponent extends preact.Component { // Variables that will change info, tutorial, + vboxHighlight, // Static player, // Only used for colour calcs which will be update if info changes @@ -37,7 +41,6 @@ class InfoComponent extends preact.Component { itemInfo, instance, // Only used for instance id // functions - setInfo, setTutorialNull, } = args; const { comboItem } = this.state; @@ -181,6 +184,7 @@ class InfoComponent extends preact.Component {
this.setState({ comboItem: null })}> +
diff --git a/client/src/components/instance.component.jsx b/client/src/components/instance.component.jsx index a8abcac0..d0d34345 100644 --- a/client/src/components/instance.component.jsx +++ b/client/src/components/instance.component.jsx @@ -2,7 +2,6 @@ const preact = require('preact'); const { connect } = require('preact-redux'); const Vbox = require('./vbox.component'); -const InfoContainer = require('./info.container'); const InstanceConstructsContainer = require('./instance.constructs'); const Faceoff = require('./faceoff'); @@ -63,7 +62,6 @@ function Instance(args) { return (
-
); diff --git a/client/src/components/vbox.combiner.jsx b/client/src/components/vbox.combiner.jsx index 5b02b88e..1ffd6797 100644 --- a/client/src/components/vbox.combiner.jsx +++ b/client/src/components/vbox.combiner.jsx @@ -1,66 +1,123 @@ const preact = require('preact'); +const { connect } = require('preact-redux'); const countBy = require('lodash/countBy'); -function combinerBtn(props) { - const { - itemInfo, - sendVboxCombine, - setInfo, - stashSelect, - storeSelect, - vbox, - vboxBuySelected, - vboxHighlight, - } = props; - let text = ''; - let mouseEvent = false; - const combineLength = stashSelect.length + storeSelect.length; - if (vboxHighlight && vboxHighlight.length === 0) { - // The selected items can't be combined with additional items therefore valid combo - const stashItems = stashSelect.map(j => vbox.bound[j]); - const shopItems = storeSelect.map(j => vbox.free[j[0]][j[1]]); - const selectedItems = stashItems.concat(shopItems); - const combinerCount = countBy(selectedItems, co => co); +const actions = require('../actions'); - const comboItemObj = itemInfo.combos.find(combo => selectedItems.every(c => { - if (!combo.components.includes(c)) return false; - const comboCount = countBy(combo.components, co => co); - if (combinerCount[c] > comboCount[c]) return false; - return true; - })); - let comboItem = comboItemObj ? comboItemObj.item : 'refine'; - setInfo(comboItem); - comboItem = comboItem.replace('Plus', '+'); - let bits = 0; - storeSelect.forEach(item => bits += item[0] + 1); - text = bits - ?

Buy
{comboItem}
{bits}b

- :

Combine
{comboItem}

; - if (vbox.bits >= bits) mouseEvent = sendVboxCombine; - } else if (stashSelect.length === 0 && storeSelect.length === 1) { - const item = storeSelect[0]; - text =

Buy
{vbox.free[item[0]][item[1]]}
{item[0] + 1}b

; - mouseEvent = vboxBuySelected; - } else { - for (let i = 0; i < 3; i++) { - if (combineLength > i) { - text += '■ '; - } else { - text += '▫ '; - } +const addState = connect( + function receiveState(state) { + const { + ws, + instance, + vboxSelected, + itemInfo, + player, + } = state; + + const { vbox } = player; + function sendVboxAccept(group, index) { + document.activeElement.blur(); + return ws.sendVboxAccept(instance.id, group, index); } + + function sendVboxCombine() { + return ws.sendVboxCombine(instance.id, vboxSelected.stashSelect, vboxSelected.storeSelect); + } + + return { + vbox, + vboxSelected, + itemInfo, + sendVboxAccept, + sendVboxCombine, + }; + }, + function receiveDispatch(dispatch) { + function setInfo(item) { + return dispatch(actions.setInfo(item)); + } + + return { + setInfo, + }; + } +); + +class CombinerBtn extends preact.Component { + shouldComponentUpdate(newProps) { + // Single variable props + if (newProps.vbox !== this.props.vbox) return true; + if (newProps.vboxHighlight !== this.props.vboxHighlight) return true; + if (newProps.vboxSelected !== this.props.vboxSelected) return true; + return false; + } + + render(props) { + const { + vboxHighlight, + + vbox, + vboxSelected, + itemInfo, + sendVboxAccept, + sendVboxCombine, + + setInfo, + } = props; + + const { stashSelect, storeSelect } = vboxSelected; + + function vboxBuySelected() { + if (!(storeSelect.length === 1 && stashSelect.length === 0)) return false; + document.activeElement.blur(); + sendVboxAccept(storeSelect[0][0], storeSelect[0][1]); + return true; + } + + let text = ''; + let mouseEvent = false; + const combineLength = stashSelect.length + storeSelect.length; + if (vboxHighlight && vboxHighlight.length === 0) { + // The selected items can't be combined with additional items therefore valid combo + const stashItems = stashSelect.map(j => vbox.bound[j]); + const shopItems = storeSelect.map(j => vbox.free[j[0]][j[1]]); + const selectedItems = stashItems.concat(shopItems); + const combinerCount = countBy(selectedItems, co => co); + + const comboItemObj = itemInfo.combos.find(combo => selectedItems.every(c => { + if (!combo.components.includes(c)) return false; + const comboCount = countBy(combo.components, co => co); + if (combinerCount[c] > comboCount[c]) return false; + return true; + })); + let comboItem = comboItemObj ? comboItemObj.item : 'refine'; + setInfo(comboItem); + comboItem = comboItem.replace('Plus', '+'); + let bits = 0; + storeSelect.forEach(item => bits += item[0] + 1); + text = bits + ? `Buy ${comboItem} ${bits}b` + : `Combine${comboItem}`; + if (vbox.bits >= bits) mouseEvent = sendVboxCombine; + } else if (stashSelect.length === 0 && storeSelect.length === 1) { + const item = storeSelect[0]; + text = `Buy ${vbox.free[item[0]][item[1]]} ${item[0] + 1}b`; + mouseEvent = vboxBuySelected; + } else { + return false; + } + return ( +
+ +
+ ); } - return ( -
- -
- ); } -module.exports = combinerBtn; +module.exports = addState(CombinerBtn); diff --git a/client/src/components/vbox.component.jsx b/client/src/components/vbox.component.jsx index e51b94be..756f17ee 100644 --- a/client/src/components/vbox.component.jsx +++ b/client/src/components/vbox.component.jsx @@ -5,9 +5,9 @@ const forEach = require('lodash/forEach'); const actions = require('../actions'); +const InfoContainer = require('./info.container'); const StashElement = require('./vbox.stash'); const StoreElement = require('./vbox.store'); -const CombinerElement = require('./vbox.combiner'); const addState = connect( function receiveState(state) { @@ -16,6 +16,7 @@ const addState = connect( instance, player, vboxSelected, + info, itemInfo, itemUnequip, tutorial, @@ -30,10 +31,6 @@ const addState = connect( return ws.sendVboxAccept(instance.id, group, index); } - function sendVboxCombine() { - return ws.sendVboxCombine(instance.id, vboxSelected.stashSelect, vboxSelected.storeSelect); - } - function sendVboxReclaim(i) { return ws.sendVboxReclaim(instance.id, i); } @@ -44,9 +41,9 @@ const addState = connect( return { instance, + info, player, sendVboxAccept, - sendVboxCombine, sendVboxDiscard, sendVboxReclaim, vboxSelected, @@ -130,7 +127,6 @@ class Vbox extends preact.Component { // Function Calls sendItemUnequip, sendVboxAccept, - sendVboxCombine, sendVboxDiscard, sendVboxReclaim, setVboxSelected, @@ -235,6 +231,10 @@ class Vbox extends preact.Component {
{storeHdr()} {stashHdr()} + -
); } From 9b6bf4442e036ef585f8029d764d86d4ebd345fb Mon Sep 17 00:00:00 2001 From: Mashy Date: Sat, 23 Nov 2019 17:20:43 +1000 Subject: [PATCH 06/19] default button styling 60% width --- client/assets/styles/vbox.less | 10 ++-------- client/src/components/info.thresholds.jsx | 6 +----- 2 files changed, 3 insertions(+), 13 deletions(-) diff --git a/client/assets/styles/vbox.less b/client/assets/styles/vbox.less index 05dd9867..ec739a11 100644 --- a/client/assets/styles/vbox.less +++ b/client/assets/styles/vbox.less @@ -212,6 +212,8 @@ .combiner { grid-area: combiner; + display: flex; + width: 60%; button { margin-top: 1em; line-height: 1.3; @@ -219,15 +221,7 @@ letter-spacing: 0.1em; - background-color: @yellow; - color: black; - border-radius: 0; border: 0; - &[disabled] { - border: 0.1em solid @gray; - border-left: 0; - color: @gray-exists; - }; transition-property: 0; } } diff --git a/client/src/components/info.thresholds.jsx b/client/src/components/info.thresholds.jsx index 930882bd..6785380e 100644 --- a/client/src/components/info.thresholds.jsx +++ b/client/src/components/info.thresholds.jsx @@ -89,11 +89,7 @@ function specThresholds(player, fullInfo, info) { return (
- {thresholds[0]} - {thresholds[1]} -
-
- {thresholds[2]} + {thresholds}
From b9e4eca8cfc38597c785a7ca5a8314b570620ebb Mon Sep 17 00:00:00 2001 From: Mashy Date: Sat, 23 Nov 2019 19:53:06 +1000 Subject: [PATCH 07/19] vbox info always what selected prio full combo > bases > colour --- client/assets/styles/vbox.less | 7 +- client/src/components/info.component.jsx | 195 ------------- client/src/components/info.container.jsx | 43 --- client/src/components/instance.component.jsx | 4 - client/src/components/vbox.combiner.jsx | 39 +-- client/src/components/vbox.component.jsx | 8 +- client/src/components/vbox.info.jsx | 261 ++++++++++++++++++ ...hresholds.jsx => vbox.info.thresholds.jsx} | 0 8 files changed, 270 insertions(+), 287 deletions(-) delete mode 100644 client/src/components/info.component.jsx delete mode 100644 client/src/components/info.container.jsx create mode 100644 client/src/components/vbox.info.jsx rename client/src/components/{info.thresholds.jsx => vbox.info.thresholds.jsx} (100%) diff --git a/client/assets/styles/vbox.less b/client/assets/styles/vbox.less index ec739a11..859919d8 100644 --- a/client/assets/styles/vbox.less +++ b/client/assets/styles/vbox.less @@ -218,11 +218,10 @@ margin-top: 1em; line-height: 1.3; font-size: 1.25em; - - letter-spacing: 0.1em; - border: 0; - transition-property: 0; + &:hover { + border: 2px solid @gray-hover; + } } } diff --git a/client/src/components/info.component.jsx b/client/src/components/info.component.jsx deleted file mode 100644 index 4b59e4d3..00000000 --- a/client/src/components/info.component.jsx +++ /dev/null @@ -1,195 +0,0 @@ -const preact = require('preact'); -const reactStringReplace = require('react-string-replace'); - -const specThresholds = require('./info.thresholds'); -const { INFO } = require('./../constants'); -const { convertItem, removeTier } = require('../utils'); -const { tutorialStage } = require('../tutorial.utils'); -const shapes = require('./shapes'); - -const Combiner = require('./vbox.combiner'); - - -class InfoComponent extends preact.Component { - shouldComponentUpdate(newProps, newState) { - if (newProps.vboxHighlight !== this.props.vboxHighlight) return true; - if (newProps.tutorial !== this.props.tutorial) return true; - // We don't care about info during tutorial - if (newProps.tutorial && this.props.instance.time_control === 'Practice' - && this.props.instance.rounds.length === 1) return false; - if (newProps.info !== this.props.info) return true; - if (newState.comboItem !== this.state.comboItem) return true; - - return false; - } - - componentDidUpdate(prevProps) { - // Catch case where mouse events don't properly clear state and info changed - if (prevProps.info !== this.props.info && this.state.comboItem) this.setState({ comboItem: null }); - } - - render(args) { - const { - // Variables that will change - info, - tutorial, - vboxHighlight, - - // Static - player, // Only used for colour calcs which will be update if info changes - ws, - itemInfo, - instance, // Only used for instance id - // functions - setTutorialNull, - } = args; - const { comboItem } = this.state; - function Info() { - if (tutorial) { - const tutorialStageInfo = tutorialStage(tutorial, ws, setTutorialNull, instance); - if (tutorialStageInfo) return tutorialStageInfo; - } - if (!info) return false; - if (info.includes('constructName')) { - return ( -
-

{info.replace('constructName ', '')}

-

This is the name of your construct.
- Names are randomly generated and are purely cosmetic.
- You can change change your construct name in the RESHAPE tab outside of games. -

-
- ); - } - - if (info.includes('constructAvatar')) { - return ( -
-

{info.replace('constructAvatar ', '')}

-

This is your construct avatar.
- Avatars are randomly generated and are purely cosmetic.
- You can change your construct avatar in the RESHAPE tab outside of games. -

-
- ); - } - const fullInfo = comboItem - ? itemInfo.items.find(i => i.item === comboItem) || INFO[comboItem] - : itemInfo.items.find(i => i.item === info) || INFO[info]; - if (!fullInfo) return false; - const isSkill = fullInfo.skill; - const isSpec = fullInfo.spec; - - const itemDescription = () => { - const regEx = /(RedPower|BluePower|GreenPower|RedLife|BlueLife|GreenLife|SpeedStat|LIFE|SPEED|POWER)/; - const infoDescription = reactStringReplace(fullInfo.description, regEx, m => shapes[m]()); - return
{reactStringReplace(infoDescription, '\n', () =>
)}
; - }; - - if (isSkill || isSpec) { - let infoName = fullInfo.item; - while (infoName.includes('Plus')) infoName = infoName.replace('Plus', '+'); - - const itemSource = itemInfo.combos.filter(c => c.item === removeTier(fullInfo.item)); - - let itemSourceInfo = itemSource.length && !isSpec - ? `${itemSource[0].components[0]} ${itemSource[0].components[1]} ${itemSource[0].components[2]}` - : false; - - let header = null; - if (!itemSource.length) header = isSkill ?

SKILL

:

SPEC

; - if (itemSourceInfo) { - while (itemSourceInfo.includes('Plus')) itemSourceInfo = itemSourceInfo.replace('Plus', '+'); - const itemRegEx = /(Red|Blue|Green)/; - itemSourceInfo = reactStringReplace(itemSourceInfo, itemRegEx, match => shapes[match]()); - } - - const cooldown = isSkill && fullInfo.cooldown ?
{fullInfo.cooldown} Turn delay
: null; - - const speed = isSkill - ?
Speed {shapes.SpeedStat()} multiplier {fullInfo.speed * 4}%
- : null; - - const thresholds = isSpec ? specThresholds(player, fullInfo, info) : null; - - return ( -
-

{infoName}

- {header} - {itemSourceInfo} - {cooldown} - {itemDescription()} - {speed} - {thresholds} -
- ); - } - - return ( -
-

{fullInfo.item}

- {itemDescription()} -
- ); - } - - const Combos = () => { - if (tutorial && instance.time_control === 'Practice' && instance.rounds.length === 1) return false; -/* const generalNotes = ( -
-

General

-

- You can preview combos by clicking the combined item when it appears in this section.
- Click the READY button to start the GAME PHASE. -

-
- );*/ - if (!player) return false; - if (!info) return false; - - const vboxCombos = itemInfo.combos.filter(c => c.components.includes(info)); - if (vboxCombos.length > 6 || vboxCombos.length === 0) return false; - - const comboTable = vboxCombos.map((c, i) => { - const mouseOver = e => { - e.stopPropagation(); - this.setState({ comboItem: c.item }); - }; - const componentTable = (c.components.some(ci => ['Red', 'Blue', 'Green'].includes(ci))) - ? [
{convertItem(c.components[0])} {convertItem(c.components[1])}
, -
{convertItem(c.components[2])}
] - : c.components.map((u, j) =>
{convertItem(u)}
); - return ( -
-
- {convertItem(c.item)} -
- {componentTable} -
- ); - }); - const comboList = comboTable.length > 0 ?
{comboTable}
: false; - return ( -
-
-

COMBOS

- Combine colours and items. -
- {comboList} -
- ); - }; - - return ( -
-
this.setState({ comboItem: null })}> - - -
- -
- ); - } -} - -module.exports = InfoComponent; diff --git a/client/src/components/info.container.jsx b/client/src/components/info.container.jsx deleted file mode 100644 index 8a8dbb6f..00000000 --- a/client/src/components/info.container.jsx +++ /dev/null @@ -1,43 +0,0 @@ -const { connect } = require('preact-redux'); - -const actions = require('../actions'); -const Info = require('./info.component'); - -const addState = connect( - function receiveState(state) { - const { - ws, - info, - itemInfo, - instance, - player, - account, - tutorial, - } = state; - - return { - ws, - info, - itemInfo, - instance, - player, - account, - tutorial, - }; - }, - - function receiveDispatch(dispatch) { - function setTutorialNull() { - dispatch(actions.setTutorial(null)); - } - - function setInfo(info) { - dispatch(actions.setInfo(info)); - } - return { setTutorialNull, setInfo }; - } - - -); - -module.exports = addState(Info); diff --git a/client/src/components/instance.component.jsx b/client/src/components/instance.component.jsx index d0d34345..c59b5833 100644 --- a/client/src/components/instance.component.jsx +++ b/client/src/components/instance.component.jsx @@ -55,10 +55,6 @@ function Instance(args) { clearItems(); } - function onTouchMove(e) { - e.preventDefault(); - } - return (
diff --git a/client/src/components/vbox.combiner.jsx b/client/src/components/vbox.combiner.jsx index 1ffd6797..261fb7a2 100644 --- a/client/src/components/vbox.combiner.jsx +++ b/client/src/components/vbox.combiner.jsx @@ -1,6 +1,5 @@ const preact = require('preact'); const { connect } = require('preact-redux'); -const countBy = require('lodash/countBy'); const actions = require('../actions'); @@ -27,19 +26,9 @@ const addState = connect( return { vbox, vboxSelected, - itemInfo, sendVboxAccept, sendVboxCombine, }; - }, - function receiveDispatch(dispatch) { - function setInfo(item) { - return dispatch(actions.setInfo(item)); - } - - return { - setInfo, - }; } ); @@ -47,22 +36,18 @@ class CombinerBtn extends preact.Component { shouldComponentUpdate(newProps) { // Single variable props if (newProps.vbox !== this.props.vbox) return true; - if (newProps.vboxHighlight !== this.props.vboxHighlight) return true; if (newProps.vboxSelected !== this.props.vboxSelected) return true; return false; } render(props) { const { - vboxHighlight, - vbox, vboxSelected, - itemInfo, sendVboxAccept, sendVboxCombine, + combinerCombo, - setInfo, } = props; const { stashSelect, storeSelect } = vboxSelected; @@ -73,31 +58,15 @@ class CombinerBtn extends preact.Component { sendVboxAccept(storeSelect[0][0], storeSelect[0][1]); return true; } - let text = ''; let mouseEvent = false; - const combineLength = stashSelect.length + storeSelect.length; - if (vboxHighlight && vboxHighlight.length === 0) { - // The selected items can't be combined with additional items therefore valid combo - const stashItems = stashSelect.map(j => vbox.bound[j]); - const shopItems = storeSelect.map(j => vbox.free[j[0]][j[1]]); - const selectedItems = stashItems.concat(shopItems); - const combinerCount = countBy(selectedItems, co => co); - - const comboItemObj = itemInfo.combos.find(combo => selectedItems.every(c => { - if (!combo.components.includes(c)) return false; - const comboCount = countBy(combo.components, co => co); - if (combinerCount[c] > comboCount[c]) return false; - return true; - })); - let comboItem = comboItemObj ? comboItemObj.item : 'refine'; - setInfo(comboItem); - comboItem = comboItem.replace('Plus', '+'); + if (combinerCombo) { + const comboItem = combinerCombo.replace('Plus', '+'); let bits = 0; storeSelect.forEach(item => bits += item[0] + 1); text = bits ? `Buy ${comboItem} ${bits}b` - : `Combine${comboItem}`; + : `Combine ${comboItem}`; if (vbox.bits >= bits) mouseEvent = sendVboxCombine; } else if (stashSelect.length === 0 && storeSelect.length === 1) { const item = storeSelect[0]; diff --git a/client/src/components/vbox.component.jsx b/client/src/components/vbox.component.jsx index 756f17ee..1476ffb7 100644 --- a/client/src/components/vbox.component.jsx +++ b/client/src/components/vbox.component.jsx @@ -5,7 +5,7 @@ const forEach = require('lodash/forEach'); const actions = require('../actions'); -const InfoContainer = require('./info.container'); +const InfoContainer = require('./vbox.info'); const StashElement = require('./vbox.stash'); const StoreElement = require('./vbox.store'); @@ -149,11 +149,7 @@ class Vbox extends preact.Component { function vboxHover(e, v) { if (v) { e.stopPropagation(); - if (storeSelect.find(c => c[0])) return true; // There is a base skill or spec selected in the vbox - if (stashSelect.length !== 0) { - const base = stashSelect.find(c => !['Red', 'Blue', 'Green'].includes(vbox.bound[c])); - if (base || base === 0) return true; - } + if (stashSelect.length !== 0 || storeSelect.length !== 0) return true; setInfo(v); } return true; diff --git a/client/src/components/vbox.info.jsx b/client/src/components/vbox.info.jsx new file mode 100644 index 00000000..3a553c0d --- /dev/null +++ b/client/src/components/vbox.info.jsx @@ -0,0 +1,261 @@ +const preact = require('preact'); +const { connect } = require('preact-redux'); +const reactStringReplace = require('react-string-replace'); +const countBy = require('lodash/countBy'); + +const specThresholds = require('./vbox.info.thresholds'); +const { INFO } = require('./../constants'); +const { convertItem, removeTier } = require('../utils'); +const { tutorialStage } = require('../tutorial.utils'); +const shapes = require('./shapes'); +const Combiner = require('./vbox.combiner'); + +const actions = require('../actions'); + +const addState = connect( + function receiveState(state) { + const { + ws, + info, + itemInfo, + instance, + player, + account, + tutorial, + vboxSelected, + } = state; + + return { + ws, + info, + itemInfo, + instance, + player, + account, + tutorial, + vboxSelected, + }; + }, + + function receiveDispatch(dispatch) { + function setTutorialNull() { + dispatch(actions.setTutorial(null)); + } + + function setInfo(info) { + dispatch(actions.setInfo(info)); + } + return { setTutorialNull, setInfo }; + } +); + +class InfoComponent extends preact.Component { + shouldComponentUpdate(newProps, newState) { + if (newProps.vboxSelected !== this.props.vboxSelected) return true; + if (newProps.vboxHighlight !== this.props.vboxHighlight) return true; + if (newProps.tutorial !== this.props.tutorial) return true; + // We don't care about info during tutorial + if (newProps.tutorial && this.props.instance.time_control === 'Practice' + && this.props.instance.rounds.length === 1) return false; + if (newProps.info !== this.props.info) return true; + if (newState.comboItem !== this.state.comboItem) return true; + + return false; + } + + componentDidUpdate(prevProps) { + // Catch case where mouse events don't properly clear state and info changed + if (prevProps.info !== this.props.info && this.state.comboItem) this.setState({ comboItem: null }); + } + + render(args) { + const { + // Variables that will change + info, + tutorial, + vboxHighlight, + vboxSelected, + // Static + player, // Only used for colour calcs which will be update if info changes + ws, + itemInfo, + instance, // Only used for instance id + // functions + setTutorialNull, + } = args; + const { comboItem } = this.state; + + const { vbox } = player; + const { stashSelect, storeSelect } = vboxSelected; + + const vboxCombo = () => { + if (!(vboxHighlight && vboxHighlight.length === 0)) return false; + // The selected items can't be combined with additional items therefore valid combo + const stashItems = stashSelect.map(j => vbox.bound[j]); + const shopItems = storeSelect.map(j => vbox.free[j[0]][j[1]]); + const selectedItems = stashItems.concat(shopItems); + const combinerCount = countBy(selectedItems, co => co); + + const comboItemObj = itemInfo.combos.find(combo => selectedItems.every(c => { + if (!combo.components.includes(c)) return false; + const comboCount = countBy(combo.components, co => co); + if (combinerCount[c] > comboCount[c]) return false; + return true; + })); + return comboItemObj.item; + }; + + const combinerCombo = vboxCombo(); + const checkVboxInfo = () => { + if (combinerCombo) return combinerCombo; + const stashBase = stashSelect.find(i => !(['Red', 'Blue', 'Green'].includes(vbox.bound[i]))); + if (stashBase > -1) return vbox.bound[stashBase]; + const storeBase = storeSelect.find(j => !(['Red', 'Blue', 'Green'].includes(vbox.free[j[0]][j[1]]))); + if (storeBase) return vbox.free[storeBase[0]][storeBase[1]]; + if (stashSelect.length > 0) return vbox.bound[stashSelect[0]]; + if (storeSelect.length > 0) return vbox.free[storeSelect[0][0]][storeSelect[0][1]]; + return false; + }; + + const vboxInfo = (stashSelect.length > 0 || storeSelect.length > 0) ? checkVboxInfo() : false; + + function Info() { + if (tutorial) { + const tutorialStageInfo = tutorialStage(tutorial, ws, setTutorialNull, instance); + if (tutorialStageInfo) return tutorialStageInfo; + } + + function genItemInfo(item) { + const fullInfo = itemInfo.items.find(i => i.item === item) || INFO[item]; + const isSkill = fullInfo.skill; + const isSpec = fullInfo.spec; + const itemDescription = () => { + const regEx = /(RedPower|BluePower|GreenPower|RedLife|BlueLife|GreenLife|SpeedStat|LIFE|SPEED|POWER)/; + const infoDescription = reactStringReplace(fullInfo.description, regEx, m => shapes[m]()); + return
{reactStringReplace(infoDescription, '\n', () =>
)}
; + }; + if (isSkill || isSpec) { + let infoName = fullInfo.item; + while (infoName.includes('Plus')) infoName = infoName.replace('Plus', '+'); + + const itemSource = itemInfo.combos.filter(c => c.item === removeTier(fullInfo.item)); + + let itemSourceInfo = itemSource.length && !isSpec + ? `${itemSource[0].components[0]} ${itemSource[0].components[1]} ${itemSource[0].components[2]}` + : false; + + let header = null; + if (!itemSource.length) header = isSkill ?

SKILL

:

SPEC

; + if (itemSourceInfo) { + while (itemSourceInfo.includes('Plus')) itemSourceInfo = itemSourceInfo.replace('Plus', '+'); + const itemRegEx = /(Red|Blue|Green)/; + itemSourceInfo = reactStringReplace(itemSourceInfo, itemRegEx, match => shapes[match]()); + } + + const cooldown = isSkill && fullInfo.cooldown ?
{fullInfo.cooldown} Turn delay
: null; + + const speed = isSkill + ?
Speed {shapes.SpeedStat()} multiplier {fullInfo.speed * 4}%
+ : null; + + const thresholds = isSpec ? specThresholds(player, fullInfo, info) : null; + + return ( +
+

{infoName}

+ {header} + {itemSourceInfo} + {cooldown} + {itemDescription()} + {speed} + {thresholds} +
+ ); + } + return ( +
+

{fullInfo.item}

+ {itemDescription()} +
+ ); + } + if (vboxInfo) return genItemInfo(vboxInfo); + if (!info) return false; + if (info.includes('constructName')) { + return ( +
+

{info.replace('constructName ', '')}

+

This is the name of your construct.
+ Names are randomly generated and are purely cosmetic.
+ You can change change your construct name in the RESHAPE tab outside of games. +

+
+ ); + } + + if (info.includes('constructAvatar')) { + return ( +
+

{info.replace('constructAvatar ', '')}

+

This is your construct avatar.
+ Avatars are randomly generated and are purely cosmetic.
+ You can change your construct avatar in the RESHAPE tab outside of games. +

+
+ ); + } + const stateFullInfo = comboItem || info; + if (!stateFullInfo) return false; + return genItemInfo(stateFullInfo); + } + + const Combos = () => { + if (tutorial && instance.time_control === 'Practice' && instance.rounds.length === 1) return false; + if (!info && !vboxInfo) return false; + const comboInfo = vboxInfo || info; + const vboxCombos = itemInfo.combos.filter(c => c.components.includes(comboInfo)); + if (vboxCombos.length > 6 || vboxCombos.length === 0) return false; + + const comboTable = vboxCombos.map((c, i) => { + const mouseOver = e => { + e.stopPropagation(); + this.setState({ comboItem: c.item }); + }; + const componentTable = (c.components.some(ci => ['Red', 'Blue', 'Green'].includes(ci))) + ? [
{convertItem(c.components[0])} {convertItem(c.components[1])}
, +
{convertItem(c.components[2])}
] + : c.components.map((u, j) =>
{convertItem(u)}
); + return ( +
+
+ {convertItem(c.item)} +
+ {componentTable} +
+ ); + }); + const comboList = comboTable.length > 0 ?
{comboTable}
: false; + return ( +
+
+

COMBOS

+ Combine colours and items. +
+ {comboList} +
+ ); + }; + + return ( +
+
this.setState({ comboItem: null })}> + + +
+ +
+ ); + } +} + +module.exports = addState(InfoComponent); diff --git a/client/src/components/info.thresholds.jsx b/client/src/components/vbox.info.thresholds.jsx similarity index 100% rename from client/src/components/info.thresholds.jsx rename to client/src/components/vbox.info.thresholds.jsx From 8641e74f9be0e5604b392d9187f9266936a4530a Mon Sep 17 00:00:00 2001 From: Mashy Date: Sat, 23 Nov 2019 20:24:15 +1000 Subject: [PATCH 08/19] fix combo preview --- client/assets/styles/vbox.less | 24 ++++++------------------ client/src/components/vbox.component.jsx | 8 ++++---- client/src/components/vbox.info.jsx | 8 ++++---- 3 files changed, 14 insertions(+), 26 deletions(-) diff --git a/client/assets/styles/vbox.less b/client/assets/styles/vbox.less index 859919d8..0e4ca057 100644 --- a/client/assets/styles/vbox.less +++ b/client/assets/styles/vbox.less @@ -31,11 +31,10 @@ border-top: 0.1em solid @gray; h1 { - margin-bottom: 0; + margin-bottom: 0.5em; } button { - margin: 1em 0 0 0; line-height: 1.6; letter-spacing: 0.1em; background-color: #421010; @@ -58,32 +57,21 @@ } .stash-hdr { + grid-area: stash-hdr; display: flex; flex-flow: column; - justify-content: center; - - grid-area: stash-hdr; + text-align: center; border: 0.1em solid @gray; border-right: 0; - h3 { - margin-bottom: 2.5em; + h2 { + margin-bottom: 0.5em; } - } - - .refund { - padding: 0.5em 0.5em 0 0; button { - line-height: 1.4; + line-height: 1.6; letter-spacing: 0.1em; - color: black; - background-color: @yellow; - } - - .vbox-padding { - padding-left: 0; } } diff --git a/client/src/components/vbox.component.jsx b/client/src/components/vbox.component.jsx index 1476ffb7..b4c2f42b 100644 --- a/client/src/components/vbox.component.jsx +++ b/client/src/components/vbox.component.jsx @@ -169,10 +169,10 @@ class Vbox extends preact.Component { function storeHdr() { return (
-

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

+
vboxHover(e, 'bits')}>

{vbox.bits}b

@@ -214,9 +214,9 @@ class Vbox extends preact.Component { return (
-

e.target.scrollIntoView(true)} +

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

+ {refundBtn}
); diff --git a/client/src/components/vbox.info.jsx b/client/src/components/vbox.info.jsx index 3a553c0d..b83dfd3c 100644 --- a/client/src/components/vbox.info.jsx +++ b/client/src/components/vbox.info.jsx @@ -179,7 +179,8 @@ class InfoComponent extends preact.Component {
); } - if (vboxInfo) return genItemInfo(vboxInfo); + const stateFullInfo = comboItem || vboxInfo; + if (stateFullInfo) return genItemInfo(stateFullInfo); if (!info) return false; if (info.includes('constructName')) { return ( @@ -204,9 +205,8 @@ class InfoComponent extends preact.Component { ); } - const stateFullInfo = comboItem || info; - if (!stateFullInfo) return false; - return genItemInfo(stateFullInfo); + + return genItemInfo(info); } const Combos = () => { From f0ea19940f4b08a51c5a77fd2ac39b8f71318e7c Mon Sep 17 00:00:00 2001 From: Mashy Date: Sat, 23 Nov 2019 20:26:45 +1000 Subject: [PATCH 09/19] stash length fix (buy 3 item full combo from vbox) --- server/src/vbox.rs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/server/src/vbox.rs b/server/src/vbox.rs index 8f8f37a4..07708056 100644 --- a/server/src/vbox.rs +++ b/server/src/vbox.rs @@ -171,7 +171,7 @@ impl Vbox { self.bound.push(combo.item); // self.bound.sort_unstable(); - if self.bound.len() >= 6 { + if self.bound.len() >= 7 { return Err(err_msg("too many items bound")); } Ok(self) From 754f3e0025c3eb3fbac5a20312e8624b6189a3df Mon Sep 17 00:00:00 2001 From: Mashy Date: Sat, 23 Nov 2019 20:27:11 +1000 Subject: [PATCH 10/19] length clarify --- server/src/vbox.rs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/server/src/vbox.rs b/server/src/vbox.rs index 07708056..faf93fdc 100644 --- a/server/src/vbox.rs +++ b/server/src/vbox.rs @@ -171,7 +171,7 @@ impl Vbox { self.bound.push(combo.item); // self.bound.sort_unstable(); - if self.bound.len() >= 7 { + if self.bound.len() > 6 { return Err(err_msg("too many items bound")); } Ok(self) From 16af4da2494a453ba2851b4947ac63671bd86a93 Mon Sep 17 00:00:00 2001 From: Mashy Date: Sat, 23 Nov 2019 21:05:17 +1000 Subject: [PATCH 11/19] move combiner into info (clear buy/combine) on combo hover --- client/src/components/vbox.combiner.jsx | 92 ------------------------- client/src/components/vbox.info.jsx | 54 ++++++++++++++- 2 files changed, 52 insertions(+), 94 deletions(-) delete mode 100644 client/src/components/vbox.combiner.jsx diff --git a/client/src/components/vbox.combiner.jsx b/client/src/components/vbox.combiner.jsx deleted file mode 100644 index 261fb7a2..00000000 --- a/client/src/components/vbox.combiner.jsx +++ /dev/null @@ -1,92 +0,0 @@ -const preact = require('preact'); -const { connect } = require('preact-redux'); - -const actions = require('../actions'); - -const addState = connect( - function receiveState(state) { - const { - ws, - instance, - vboxSelected, - itemInfo, - player, - } = state; - - const { vbox } = player; - function sendVboxAccept(group, index) { - document.activeElement.blur(); - return ws.sendVboxAccept(instance.id, group, index); - } - - function sendVboxCombine() { - return ws.sendVboxCombine(instance.id, vboxSelected.stashSelect, vboxSelected.storeSelect); - } - - return { - vbox, - vboxSelected, - sendVboxAccept, - sendVboxCombine, - }; - } -); - -class CombinerBtn extends preact.Component { - shouldComponentUpdate(newProps) { - // Single variable props - if (newProps.vbox !== this.props.vbox) return true; - if (newProps.vboxSelected !== this.props.vboxSelected) return true; - return false; - } - - render(props) { - const { - vbox, - vboxSelected, - sendVboxAccept, - sendVboxCombine, - combinerCombo, - - } = props; - - const { stashSelect, storeSelect } = vboxSelected; - - function vboxBuySelected() { - if (!(storeSelect.length === 1 && stashSelect.length === 0)) return false; - document.activeElement.blur(); - sendVboxAccept(storeSelect[0][0], storeSelect[0][1]); - return true; - } - let text = ''; - let mouseEvent = false; - if (combinerCombo) { - const comboItem = combinerCombo.replace('Plus', '+'); - let bits = 0; - storeSelect.forEach(item => bits += item[0] + 1); - text = bits - ? `Buy ${comboItem} ${bits}b` - : `Combine ${comboItem}`; - if (vbox.bits >= bits) mouseEvent = sendVboxCombine; - } else if (stashSelect.length === 0 && storeSelect.length === 1) { - const item = storeSelect[0]; - text = `Buy ${vbox.free[item[0]][item[1]]} ${item[0] + 1}b`; - mouseEvent = vboxBuySelected; - } else { - return false; - } - return ( -
- -
- ); - } -} - -module.exports = addState(CombinerBtn); diff --git a/client/src/components/vbox.info.jsx b/client/src/components/vbox.info.jsx index b83dfd3c..63bf5552 100644 --- a/client/src/components/vbox.info.jsx +++ b/client/src/components/vbox.info.jsx @@ -8,7 +8,6 @@ const { INFO } = require('./../constants'); const { convertItem, removeTier } = require('../utils'); const { tutorialStage } = require('../tutorial.utils'); const shapes = require('./shapes'); -const Combiner = require('./vbox.combiner'); const actions = require('../actions'); @@ -25,6 +24,15 @@ const addState = connect( vboxSelected, } = state; + function sendVboxAccept(group, index) { + document.activeElement.blur(); + return ws.sendVboxAccept(instance.id, group, index); + } + + function sendVboxCombine() { + return ws.sendVboxCombine(instance.id, vboxSelected.stashSelect, vboxSelected.storeSelect); + } + return { ws, info, @@ -34,6 +42,8 @@ const addState = connect( account, tutorial, vboxSelected, + sendVboxAccept, + sendVboxCombine, }; }, @@ -81,6 +91,8 @@ class InfoComponent extends preact.Component { itemInfo, instance, // Only used for instance id // functions + sendVboxAccept, + sendVboxCombine, setTutorialNull, } = args; const { comboItem } = this.state; @@ -246,11 +258,49 @@ class InfoComponent extends preact.Component { ); }; + const Combiner = () => { + if (comboItem) return false; + function vboxBuySelected() { + if (!(storeSelect.length === 1 && stashSelect.length === 0)) return false; + document.activeElement.blur(); + sendVboxAccept(storeSelect[0][0], storeSelect[0][1]); + return true; + } + let text = ''; + let mouseEvent = false; + if (combinerCombo) { + const combinerComboText = combinerCombo.replace('Plus', '+'); + let bits = 0; + storeSelect.forEach(item => bits += item[0] + 1); + text = bits + ? `Buy ${combinerComboText} ${bits}b` + : `Combine ${combinerComboText}`; + if (vbox.bits >= bits) mouseEvent = sendVboxCombine; + } else if (stashSelect.length === 0 && storeSelect.length === 1) { + const item = storeSelect[0]; + text = `Buy ${vbox.free[item[0]][item[1]]} ${item[0] + 1}b`; + mouseEvent = vboxBuySelected; + } else { + return false; + } + return ( +
+ +
+ ); + }; + return (
this.setState({ comboItem: null })}> - +
From e702e3fdd1173104dfa47cd0d33e840286332f1d Mon Sep 17 00:00:00 2001 From: Mashy Date: Sat, 23 Nov 2019 21:17:56 +1000 Subject: [PATCH 12/19] vbox border width --- client/assets/styles/vbox.less | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/client/assets/styles/vbox.less b/client/assets/styles/vbox.less index 0e4ca057..aefd4f28 100644 --- a/client/assets/styles/vbox.less +++ b/client/assets/styles/vbox.less @@ -17,8 +17,8 @@ .store { grid-area: store; - border-right: 0.1em solid @gray; - border-top: 0.1em solid @gray; + border-right: 0.15em solid @gray; + border-top: 0.15em solid @gray; } .store-hdr { @@ -27,8 +27,8 @@ flex-flow: column; text-align: center; - border-left: 0.1em solid @gray; - border-top: 0.1em solid @gray; + border-left: 0.15em solid @gray; + border-top: 0.15em solid @gray; h1 { margin-bottom: 0.5em; @@ -36,7 +36,7 @@ button { line-height: 1.6; - letter-spacing: 0.1em; + letter-spacing: 0.15em; background-color: #421010; &:hover { background-color: @red; @@ -52,7 +52,7 @@ grid-gap: 0.5em 1em; align-items: center; - border: 0.1em solid @gray; + border: 0.15em solid @gray; border-left: 0; } @@ -62,7 +62,7 @@ flex-flow: column; text-align: center; - border: 0.1em solid @gray; + border: 0.15em solid @gray; border-right: 0; h2 { @@ -71,7 +71,7 @@ button { line-height: 1.6; - letter-spacing: 0.1em; + letter-spacing: 0.15em; } } From 024637c65d470df4d4b6be492a01a89a39d83521 Mon Sep 17 00:00:00 2001 From: Mashy Date: Sun, 24 Nov 2019 10:49:57 +1000 Subject: [PATCH 13/19] disable store drag --- client/src/components/vbox.store.jsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/client/src/components/vbox.store.jsx b/client/src/components/vbox.store.jsx index 20a5a402..cc2e286b 100644 --- a/client/src/components/vbox.store.jsx +++ b/client/src/components/vbox.store.jsx @@ -46,8 +46,7 @@ function storeElement(props) { const vboxObject = shapes[v] ? shapes[v]() : v; const disabled = vbox.bits <= group; return ( -