From e53983db98e70d15aece4f56055842d2cf083a45 Mon Sep 17 00:00:00 2001 From: Mashy Date: Wed, 20 Nov 2019 21:47:19 +1000 Subject: [PATCH 01/67] rearrange vbox wip --- client/assets/styles/vbox.less | 81 ++++++++++-------- client/src/components/vbox.component.jsx | 103 +++++++++++++---------- 2 files changed, 105 insertions(+), 79 deletions(-) diff --git a/client/assets/styles/vbox.less b/client/assets/styles/vbox.less index ea0d9fd7..c928028b 100644 --- a/client/assets/styles/vbox.less +++ b/client/assets/styles/vbox.less @@ -1,6 +1,50 @@ .vbox { - margin-bottom: 2em; + + align-content: space-between; + grid-area: vbox; + display: grid; + grid-template-rows: min-content 3.5em min-content 1em min-content 3.5em min-content; + grid-template-columns: 7em 1em 25em; + grid-template-areas: + "shop-hdr . shop" + ". . shop" + "combiner . shop" + "combiner . ." + "combiner . stash" + ". . stash" + "stash-hdr . stash"; + + margin-bottom: 1em; line-height: 0; + + .shop { + grid-area: shop; + } + + .shop-hdr { + grid-area: shop-hdr; + display: flex; + flex-direction: column; + } + + .combiner { + grid-area: combiner; + display: flex; + flex-direction: column; + + } + + .stash { + grid-area: stash; + display: flex; + flex-direction: column; + + } + + .stash-hdr { + grid-area: stash-hdr; + } + .vbox-hdr { margin-bottom: 1em; height: 2em; @@ -104,22 +148,6 @@ } } -/* 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 varrow combiner"; -} - -.vbox-inventory { - grid-area: inventory; -} - .vbox-combiner { grid-area: combiner; display: flex; @@ -127,18 +155,6 @@ justify-content: flex-end; } -.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: @gray-hint; -} - .vbox-combiner button { flex: 0; } @@ -156,9 +172,4 @@ font-size: 2em; line-height: 1em; animation: bits 1s ease-out; -} - -.arrow { - grid-area: arrow; - color: @gray-hint; -} +} \ No newline at end of file diff --git a/client/src/components/vbox.component.jsx b/client/src/components/vbox.component.jsx index 9263662d..eedb6527 100644 --- a/client/src/components/vbox.component.jsx +++ b/client/src/components/vbox.component.jsx @@ -232,15 +232,8 @@ class Vbox extends preact.Component { function vboxElement() { return ( -
e.stopPropagation()}> -
-

e.target.scrollIntoView(true)} - onMouseOver={e => hoverInfo(e, 'vbox')}> VBOX -

-
hoverInfo(e, 'bits')} >{vbox.bits}b
-
{range(0, 6).map(i => availableBtn(vbox.free[0][i], 0, i))}
@@ -248,6 +241,21 @@ class Vbox extends preact.Component { {range(0, 3).map(i => availableBtn(vbox.free[1][i], 1, i))} {range(0, 3).map(i => availableBtn(vbox.free[2][i], 2, i))}
+ + + ); + } + + function vboxHdr() { + return ( +
+

e.target.scrollIntoView(true)} + onMouseOver={e => hoverInfo(e, 'vbox')}> VBOX +

+
hoverInfo(e, 'bits')}> +

{vbox.bits}b

+
); } - // // INVENTORY // - function reclaimClick(e) { - e.stopPropagation(); - return setReclaiming(!reclaiming); - } function inventoryBtn(v, i) { const inventoryHighlight = vboxSelecting || itemUnequip.length; @@ -353,12 +357,12 @@ class Vbox extends preact.Component { let bits = 0; shopSelect.forEach(item => bits += item[0] + 1); text = bits - ? `Buy ${comboItem} - ${bits}b` - : `Combine - ${comboItem}`; + ?

Buy
{comboItem}
{bits}b

+ :

Combine
{comboItem}

; if (vbox.bits >= bits) mouseEvent = sendVboxCombine; } else if (stashSelect.length === 0 && shopSelect.length === 1) { const item = shopSelect[0]; - text = `Buy ${vbox.free[item[0]][item[1]]} ${item[0] + 1}b`; + text =

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

; mouseEvent = vboxBuySelected; } else { for (let i = 0; i < 3; i++) { @@ -370,13 +374,15 @@ class Vbox extends preact.Component { } } return ( - +
+ +
); } @@ -389,34 +395,42 @@ class Vbox extends preact.Component { return (
e.stopPropagation()} onDragOver={ev => ev.preventDefault()} onDrop={inventoryClick} > -
-

e.target.scrollIntoView(true)} - onMouseOver={e => hoverInfo(e, 'inventory')}> INVENTORY -

- -
-
- {range(0, 9).map(i => inventoryBtn(vbox.bound[i], i))} + {range(0, 6).map(i => inventoryBtn(vbox.bound[i], i))}
- {combinerBtn()}
); } + function inventoryHdr() { + return ( +
+

e.target.scrollIntoView(true)} + onMouseOver={e => hoverInfo(e, 'inventory')}> INVENTORY +

+ +
+ ); + } + + // // EVERYTHING // @@ -429,12 +443,13 @@ class Vbox extends preact.Component { return setInfo(newInfo); } - const classes = 'vbox'; return ( -
+
+ {vboxHdr()} {vboxElement()} -
⮞
+ {inventoryHdr()} {inventoryElement()} + {combinerBtn()}
); } From 3dddf4b1a8984f70ec07f6db1fb830a0f40befc9 Mon Sep 17 00:00:00 2001 From: Mashy Date: Wed, 20 Nov 2019 23:07:44 +1000 Subject: [PATCH 02/67] wip --- WORKLOG.md | 2 + client/assets/styles/instance.less | 2 +- client/assets/styles/vbox.less | 43 +++++++--- client/src/components/vbox.component.jsx | 105 ++++++++++++----------- 4 files changed, 89 insertions(+), 63 deletions(-) diff --git a/WORKLOG.md b/WORKLOG.md index 9ea59bde..24084a60 100644 --- a/WORKLOG.md +++ b/WORKLOG.md @@ -1,6 +1,8 @@ # WORK WORK ## NOW +* add combine between all of shop and stash, stash size -> 4 + *PRODUCTION* * can't reset password without knowing password =\ diff --git a/client/assets/styles/instance.less b/client/assets/styles/instance.less index e54bf31e..04e4f1c6 100644 --- a/client/assets/styles/instance.less +++ b/client/assets/styles/instance.less @@ -1,7 +1,7 @@ .instance { overflow: hidden; display: grid; - grid-template-columns: 1fr minmax(min-content, 1fr); + grid-template-columns: min-content minmax(min-content, 1fr); grid-template-rows: min-content 1fr; grid-template-areas: diff --git a/client/assets/styles/vbox.less b/client/assets/styles/vbox.less index c928028b..f3a51bc0 100644 --- a/client/assets/styles/vbox.less +++ b/client/assets/styles/vbox.less @@ -3,46 +3,61 @@ align-content: space-between; grid-area: vbox; display: grid; - grid-template-rows: min-content 3.5em min-content 1em min-content 3.5em min-content; - grid-template-columns: 7em 1em 25em; + grid-template-rows: 9em 3em 2em min-content; + grid-template-columns: 7em 25em; grid-template-areas: - "shop-hdr . shop" - ". . shop" - "combiner . shop" - "combiner . ." - "combiner . stash" - ". . stash" - "stash-hdr . stash"; + "shop-hdr shop" + "combiner shop" + "combiner stash" + "stash-hdr stash"; + border-top: 0.1em solid @gray-exists; + border-right: 0.1em solid @gray-exists; + border-bottom: 0.1em solid @gray-exists; margin-bottom: 1em; line-height: 0; + .items { + margin-left: 1em; + margin-bottom: 1em; + margin-top: 0.5em; + margin-right: 1em; + } + .shop { grid-area: shop; + border-bottom: 0.1em solid @gray-exists; } .shop-hdr { grid-area: shop-hdr; display: flex; flex-direction: column; + border-bottom: 0.1em solid @gray-exists; + border-left: 0.1em solid @gray-exists; } .combiner { grid-area: combiner; display: flex; flex-direction: column; + border-right: 0.1em solid @gray-exists; } .stash { grid-area: stash; - display: flex; - flex-direction: column; - } .stash-hdr { grid-area: stash-hdr; + display: flex; + flex-direction: column; + justify-content: flex-end; + border-left: 0.1em solid @gray-exists; + border-top: 0.1em solid @gray-exists; + + } .vbox-hdr { @@ -109,7 +124,7 @@ } button { - height: 4em; + height: 3.25em; margin: 0; width: 100%; @@ -138,7 +153,7 @@ // figures don't scale well figure { svg { - height: 2em; + height: 1.5em; stroke-width: 0.5em; } diff --git a/client/src/components/vbox.component.jsx b/client/src/components/vbox.component.jsx index eedb6527..a2333fef 100644 --- a/client/src/components/vbox.component.jsx +++ b/client/src/components/vbox.component.jsx @@ -234,14 +234,15 @@ class Vbox extends preact.Component { return (
e.stopPropagation()}> -
- {range(0, 6).map(i => availableBtn(vbox.free[0][i], 0, i))} +
+
+ {range(0, 6).map(i => availableBtn(vbox.free[0][i], 0, i))} +
+
+ {range(0, 3).map(i => availableBtn(vbox.free[1][i], 1, i))} + {range(0, 3).map(i => availableBtn(vbox.free[2][i], 2, i))} +
-
- {range(0, 3).map(i => availableBtn(vbox.free[1][i], 1, i))} - {range(0, 3).map(i => availableBtn(vbox.free[2][i], 2, i))} -
-
); } @@ -249,24 +250,26 @@ class Vbox extends preact.Component { function vboxHdr() { return (
-

e.target.scrollIntoView(true)} - onMouseOver={e => hoverInfo(e, 'vbox')}> VBOX -

-
hoverInfo(e, 'bits')}> -

{vbox.bits}b

+
+

e.target.scrollIntoView(true)} + onMouseOver={e => hoverInfo(e, 'vbox')}> VBOX +

+
hoverInfo(e, 'bits')}> +

{vbox.bits}b

+
+
-
); } @@ -375,13 +378,15 @@ class Vbox extends preact.Component { } return (
- +
+ +
); } @@ -401,8 +406,10 @@ class Vbox extends preact.Component { onDragOver={ev => ev.preventDefault()} onDrop={inventoryClick} > -
- {range(0, 6).map(i => inventoryBtn(vbox.bound[i], i))} +
+
+ {range(0, 6).map(i => inventoryBtn(vbox.bound[i], i))} +
); @@ -411,21 +418,23 @@ class Vbox extends preact.Component { function inventoryHdr() { return (
-

e.target.scrollIntoView(true)} - onMouseOver={e => hoverInfo(e, 'inventory')}> INVENTORY -

- +
+

e.target.scrollIntoView(true)} + onMouseOver={e => hoverInfo(e, 'inventory')}> INVENTORY +

+ +
); } From 7dc4a3f4f4f640c6c8b0fed64136282d6fa1b4d7 Mon Sep 17 00:00:00 2001 From: Mashy Date: Thu, 21 Nov 2019 10:42:15 +1000 Subject: [PATCH 03/67] vbox rearrange, rework reclaim --- client/assets/styles/vbox.less | 69 +++++++++++++++--------- client/src/components/info.component.jsx | 6 +-- client/src/components/vbox.component.jsx | 35 ++++++------ 3 files changed, 64 insertions(+), 46 deletions(-) diff --git a/client/assets/styles/vbox.less b/client/assets/styles/vbox.less index f3a51bc0..851a185b 100644 --- a/client/assets/styles/vbox.less +++ b/client/assets/styles/vbox.less @@ -3,22 +3,21 @@ align-content: space-between; grid-area: vbox; display: grid; - grid-template-rows: 9em 3em 2em min-content; - grid-template-columns: 7em 25em; + grid-template-rows: 9.5em 2.5em 4.5em min-content; + grid-template-columns: 7em 21em; grid-template-areas: - "shop-hdr shop" - "combiner shop" - "combiner stash" - "stash-hdr stash"; + "shop-hdr shop" + "stash-hdr shop" + "stash-hdr combiner" + "stash stash"; border-top: 0.1em solid @gray-exists; - border-right: 0.1em solid @gray-exists; border-bottom: 0.1em solid @gray-exists; margin-bottom: 1em; line-height: 0; .items { - margin-left: 1em; + margin-left: 0.5em; margin-bottom: 1em; margin-top: 0.5em; margin-right: 1em; @@ -27,37 +26,63 @@ .shop { grid-area: shop; border-bottom: 0.1em solid @gray-exists; + border-right: 0.1em solid @gray-exists; } .shop-hdr { grid-area: shop-hdr; - display: flex; - flex-direction: column; border-bottom: 0.1em solid @gray-exists; border-left: 0.1em solid @gray-exists; + text-align: center; + button { + margin-top: 0.5em; + line-height: 1.6; + height: 4em; + letter-spacing: 0.1em; + background-color: #421010; + } } .combiner { grid-area: combiner; + border-bottom: 0.1em solid @gray-exists; + border-right: 0.1em solid @gray-exists; display: flex; flex-direction: column; - border-right: 0.1em solid @gray-exists; - + button { + height: 3em; + letter-spacing: 0.1em; + background-color: #342100; + &[disabled] { + color: #342100; + }; + } } .stash { grid-area: stash; + .items { + display: grid; + grid-template-columns: repeat(4, 1fr); + grid-gap: 0.5em 1em; + align-items: center; + } + border-right: 0.1em solid @gray-exists; + border-left: 0.1em solid @gray-exists; } .stash-hdr { grid-area: stash-hdr; - display: flex; - flex-direction: column; - justify-content: flex-end; border-left: 0.1em solid @gray-exists; - border-top: 0.1em solid @gray-exists; - - + border-right: 0.1em solid @gray-exists; + text-align: center; + button { + margin-top: 0.5em; + line-height: 1.6; + height: 4em; + letter-spacing: 0.1em; + background-color: #342100; + } } .vbox-hdr { @@ -93,14 +118,6 @@ color: white; } - &.reclaim { - height: auto; - - &:hover { - color: @red; - }; - } - &[disabled] { background: black; border-width: 1px; diff --git a/client/src/components/info.component.jsx b/client/src/components/info.component.jsx index 71360599..6045c049 100644 --- a/client/src/components/info.component.jsx +++ b/client/src/components/info.component.jsx @@ -111,7 +111,7 @@ class InfoComponent extends preact.Component { return (
-

{infoName} {fullInfo.cost}b

+

{infoName}

{header} {itemSourceInfo} {cooldown} @@ -121,10 +121,10 @@ class InfoComponent extends preact.Component {
); } - const cost = fullInfo.cost ? `- ${fullInfo.cost}b` : false; + return (
-

{fullInfo.item} {cost}

+

{fullInfo.item}

{itemDescription()}
); diff --git a/client/src/components/vbox.component.jsx b/client/src/components/vbox.component.jsx index a2333fef..003aa379 100644 --- a/client/src/components/vbox.component.jsx +++ b/client/src/components/vbox.component.jsx @@ -253,10 +253,10 @@ class Vbox extends preact.Component {

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

hoverInfo(e, 'bits')}> -

{vbox.bits}b

+

{vbox.bits}b

); } function inventoryHdr() { + const refund = shopSelect.length === 0 && stashSelect.length === 1 + ? itemInfo.items.find(i => i.item === vbox.bound[stashSelect[0]]).cost + : 0; + const tutorialDisabled = tutorial && tutorial < 8 && instance.time_control === 'Practice' && instance.rounds.length === 1; + return (

e.target.scrollIntoView(true)} - onMouseOver={e => hoverInfo(e, 'inventory')}> INVENTORY + onMouseOver={e => hoverInfo(e, 'inventory')}> STASH

); } - // // EVERYTHING // From 26c1c49c4e55e3adb0d11ac9b82a483556cdd119 Mon Sep 17 00:00:00 2001 From: Mashy Date: Thu, 21 Nov 2019 10:57:46 +1000 Subject: [PATCH 04/67] reduce stash size --- server/src/vbox.rs | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/server/src/vbox.rs b/server/src/vbox.rs index 8df14c6d..a419a6f1 100644 --- a/server/src/vbox.rs +++ b/server/src/vbox.rs @@ -100,7 +100,7 @@ impl Vbox { } pub fn accept(&mut self, i: usize, j: usize, construct_id: Option) -> Result<&mut Vbox, Error> { - if self.bound.len() >= 9 && !construct_id.is_some() { + if self.bound.len() >= 4 && !construct_id.is_some() { return Err(err_msg("too many items bound")); } @@ -171,7 +171,7 @@ impl Vbox { self.bound.push(combo.item); // self.bound.sort_unstable(); - if self.bound.len() >= 10 { + if self.bound.len() >= 5 { return Err(err_msg("too many items bound")); } Ok(self) From 917858174ceddeb6df5bdddea420902a2d03ee30 Mon Sep 17 00:00:00 2001 From: Mashy Date: Thu, 21 Nov 2019 11:10:34 +1000 Subject: [PATCH 05/67] delete "reclaim" & "vboxHighlight" state variables --- client/src/actions.jsx | 2 -- client/src/components/account.status.jsx | 2 -- client/src/components/header.jsx | 2 -- client/src/components/instance.component.jsx | 2 -- client/src/components/instance.constructs.jsx | 2 -- client/src/components/nav.jsx | 2 -- client/src/components/vbox.component.jsx | 17 ++--------------- client/src/events.jsx | 2 -- client/src/keyboard.jsx | 2 -- client/src/reducers.jsx | 1 - client/src/tutorial.utils.jsx | 3 +-- 11 files changed, 3 insertions(+), 34 deletions(-) diff --git a/client/src/actions.jsx b/client/src/actions.jsx index 87d0cf51..0c1456af 100644 --- a/client/src/actions.jsx +++ b/client/src/actions.jsx @@ -35,7 +35,6 @@ export const setMtxActive = value => ({ type: 'SET_MTX_ACTIVE', value }); export const setNav = value => ({ type: 'SET_NAV', value }); export const setPing = value => ({ type: 'SET_PING', value }); export const setPlayer = value => ({ type: 'SET_PLAYER', value }); -export const setReclaiming = value => ({ type: 'SET_RECLAIMING', value }); export const setShowLog = value => ({ type: 'SET_SHOW_LOG', value }); export const setShop = value => ({ type: 'SET_SHOP', value }); export const setSubscription = value => ({ type: 'SET_SUBSCRIPTION', value }); @@ -48,7 +47,6 @@ export const setTeamSelect = value => ({ type: 'SET_TEAM_SELECT', value: Array.f export const setTutorial = value => ({ type: 'SET_TUTORIAL', value }); export const setTutorialGame = value => ({ type: 'SET_TUTORIAL_GAME', value }); -export const setVboxHighlight = value => ({ type: 'SET_VBOX_HIGHLIGHT', value }); export const setVboxSelected = value => ({ type: 'SET_VBOX_SELECTED', value }); export const setWs = value => ({ type: 'SET_WS', value }); diff --git a/client/src/components/account.status.jsx b/client/src/components/account.status.jsx index 99e5014e..1353deff 100644 --- a/client/src/components/account.status.jsx +++ b/client/src/components/account.status.jsx @@ -33,11 +33,9 @@ const addState = connect( function accountPage() { dispatch(actions.setGame(null)); dispatch(actions.setInstance(null)); - dispatch(actions.setReclaiming(false)); dispatch(actions.setActiveSkill(null)); dispatch(actions.setInfo(null)); dispatch(actions.setItemUnequip([])); - dispatch(actions.setVboxHighlight([])); return dispatch(actions.setNav('account')); } diff --git a/client/src/components/header.jsx b/client/src/components/header.jsx index b591afe0..734b1761 100644 --- a/client/src/components/header.jsx +++ b/client/src/components/header.jsx @@ -32,11 +32,9 @@ const addState = connect( function setNav(place) { dispatch(actions.setGame(null)); dispatch(actions.setInstance(null)); - dispatch(actions.setReclaiming(false)); dispatch(actions.setActiveSkill(null)); dispatch(actions.setInfo(null)); dispatch(actions.setItemUnequip([])); - dispatch(actions.setVboxHighlight([])); dispatch(actions.setMtxActive(null)); return dispatch(actions.setNav(place)); } diff --git a/client/src/components/instance.component.jsx b/client/src/components/instance.component.jsx index 8b6c2377..4955469e 100644 --- a/client/src/components/instance.component.jsx +++ b/client/src/components/instance.component.jsx @@ -27,9 +27,7 @@ const addState = connect( function clearItems() { - dispatch(actions.setReclaiming(false)); dispatch(actions.setItemUnequip([])); - dispatch(actions.setVboxHighlight([])); dispatch(actions.setVboxSelected({ shopSelect: [], stashSelect: [] })); return true; } diff --git a/client/src/components/instance.constructs.jsx b/client/src/components/instance.constructs.jsx index 59e77b10..e29a7ad7 100644 --- a/client/src/components/instance.constructs.jsx +++ b/client/src/components/instance.constructs.jsx @@ -258,7 +258,6 @@ class InstanceConstructs extends preact.Component { sendVboxApply, sendVboxAcceptEquip, sendVboxUnequipApply, - setVboxHighlight, setItemUnequip, } = props; @@ -281,7 +280,6 @@ class InstanceConstructs extends preact.Component { sendVboxUnequipApply, setInfo, itemInfo, - setVboxHighlight, vboxSelected, tutorial, }); diff --git a/client/src/components/nav.jsx b/client/src/components/nav.jsx index 0c845c8f..505c41c3 100644 --- a/client/src/components/nav.jsx +++ b/client/src/components/nav.jsx @@ -33,11 +33,9 @@ const addState = connect( function setNav(place) { dispatch(actions.setGame(null)); dispatch(actions.setInstance(null)); - dispatch(actions.setReclaiming(false)); dispatch(actions.setActiveSkill(null)); dispatch(actions.setInfo(null)); dispatch(actions.setItemUnequip([])); - dispatch(actions.setVboxHighlight([])); return dispatch(actions.setNav(place)); } diff --git a/client/src/components/vbox.component.jsx b/client/src/components/vbox.component.jsx index 003aa379..42cfa679 100644 --- a/client/src/components/vbox.component.jsx +++ b/client/src/components/vbox.component.jsx @@ -16,7 +16,6 @@ const addState = connect( ws, instance, player, - reclaiming, vboxSelected, itemInfo, itemUnequip, @@ -47,7 +46,6 @@ const addState = connect( return { instance, player, - reclaiming, sendVboxAccept, sendVboxCombine, sendVboxDiscard, @@ -61,12 +59,6 @@ const addState = connect( }, function receiveDispatch(dispatch) { - function setReclaiming(v) { - dispatch(actions.setItemUnequip([])); - dispatch(actions.setVboxSelected({ shopSelect: [], stashSelect: [] })); - return dispatch(actions.setReclaiming(v)); - } - function setInfo(item) { return dispatch(actions.setInfo(item)); } @@ -78,7 +70,6 @@ const addState = connect( } return { - setReclaiming, setInfo, setVboxSelected, }; @@ -119,7 +110,6 @@ class Vbox extends preact.Component { shouldComponentUpdate(newProps) { // Single variable props if (newProps.itemUnequip !== this.props.itemUnequip) return true; - if (newProps.reclaiming !== this.props.reclaiming) return true; if (newProps.tutorial !== this.props.tutorial) return true; if (newProps.vboxSelected !== this.props.vboxSelected) return true; if (newProps.player !== this.props.player) return true; @@ -132,7 +122,6 @@ class Vbox extends preact.Component { // Changing state variables itemUnequip, player, - reclaiming, tutorial, vboxSelected, instance, @@ -147,7 +136,6 @@ class Vbox extends preact.Component { sendVboxReclaim, setVboxSelected, setInfo, - setReclaiming, } = args; if (!player) return false; @@ -418,7 +406,7 @@ class Vbox extends preact.Component { const tutorialDisabled = tutorial && tutorial < 8 && instance.time_control === 'Practice' && instance.rounds.length === 1; return ( -
+

e.target.scrollIntoView(true)} @@ -426,8 +414,7 @@ class Vbox extends preact.Component {

+
+
+ ); +} + +module.exports = combinerBtn; diff --git a/client/src/components/vbox.component.jsx b/client/src/components/vbox.component.jsx index 4c09de46..99161682 100644 --- a/client/src/components/vbox.component.jsx +++ b/client/src/components/vbox.component.jsx @@ -1,14 +1,13 @@ const preact = require('preact'); const { connect } = require('preact-redux'); -const range = require('lodash/range'); const countBy = require('lodash/countBy'); -const without = require('lodash/without'); const forEach = require('lodash/forEach'); -const { removeTier } = require('../utils'); -const shapes = require('./shapes'); const actions = require('../actions'); -const buttons = require('./buttons'); + +const InventoryElement = require('./vbox.inventory'); +const StoreElement = require('./vbox.store'); +const CombinerElement = require('./vbox.combiner'); const addState = connect( function receiveState(state) { @@ -175,66 +174,6 @@ class Vbox extends preact.Component { return true; } - function availableBtn(v, group, index) { - if (!v) return ; - const selected = shopSelect.length && shopSelect.some(vs => vs[0] === group && vs[1] === index); - - const comboHighlight = vboxHighlight && vboxHighlight.includes(v) ? 'combo-border' : ''; - - function onClick(e) { - e.stopPropagation(); - if (!comboHighlight) setInfo(vbox.free[group][index]); - if (shopSelect.length && shopSelect.some(vs => vs[0] === group && vs[1] === index)) { - return setVboxSelected({ shopSelect: shopSelect.filter(vs => !(vs[0] === group && vs[1] === index)), stashSelect }); - } - - if (!shopSelect.length && !stashSelect.length) return setVboxSelected({ shopSelect: [[group, index]], stashSelect }); - if (comboHighlight !== 'combo-border') { - return setVboxSelected({ shopSelect: [[group, index]], stashSelect: [] }); - } - return setVboxSelected({ shopSelect: [...shopSelect, [group, index]], stashSelect }); - } - - - const classes = `${v.toLowerCase()} ${selected ? 'highlight' : ''} ${comboHighlight}`; - - const vboxObject = shapes[v] ? shapes[v]() : v; - const disabled = vbox.bits <= group; - return ( - - ); - } - - - function vboxElement() { - return ( -
e.stopPropagation()}> -
-
- {range(0, 6).map(i => availableBtn(vbox.free[0][i], 0, i))} -
-
- {range(0, 3).map(i => availableBtn(vbox.free[1][i], 1, i))} - {range(0, 3).map(i => availableBtn(vbox.free[2][i], 2, i))} -
-
-
- ); - } - function vboxHdr() { return (
@@ -250,7 +189,8 @@ class Vbox extends preact.Component { class='vbox-btn' onMouseOver={e => vboxHover(e, 'refill')} disabled={vbox.bits < 2 - || (tutorial && tutorial < 7 && instance.time_control === 'Practice' && instance.rounds.length === 1) + || (tutorial && tutorial < 7 + && instance.time_control === 'Practice' && instance.rounds.length === 1) } onClick={e => e.stopPropagation()} onMouseDown={() => sendVboxDiscard()}> @@ -261,143 +201,6 @@ class Vbox extends preact.Component {
); } - // - // INVENTORY - // - - function inventoryBtn(v, i) { - const inventoryHighlight = vboxSelecting || itemUnequip.length; - - if (!v && v !== 0) { - const emptyInvClick = () => { - if (vboxSelecting) return vboxBuySelected(); - return false; - }; - return ; - } - - const comboHighlight = vboxHighlight && vboxHighlight.includes(v) ? 'combo-border' : ''; - - function onClick(type) { - const combinerContainsIndex = stashSelect.indexOf(i) > -1; - // removing - if (combinerContainsIndex) { - if (type === 'click') { - return combinerChange(without(stashSelect, i)); - } - return true; - } - - if (!comboHighlight) { - setInfo(vbox.bound[i]); - return setVboxSelected({ shopSelect: [], stashSelect: [i] }); - } - - stashSelect.push(i); - // if (stashSelect.length === 3) setInfo(comboItem.item); - return combinerChange(stashSelect); - } - - const highlighted = stashSelect.indexOf(i) > -1; - const border = buttons[removeTier(v)] ? buttons[removeTier(v)]() : ''; - const classes = `${highlighted ? 'highlight' : border} ${comboHighlight}`; - - const invObject = shapes[v] ? shapes[v]() : v; - - return ( - - ); - } - - function combinerBtn() { - let text = ''; - let mouseEvent = false; - const combineLength = stashSelect.length + shopSelect.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 = shopSelect.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; - shopSelect.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 && shopSelect.length === 1) { - const item = shopSelect[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 += '▫ '; - } - } - } - return ( -
-
- -
-
- ); - } - - function inventoryElement() { - function inventoryClick(e) { - e.stopPropagation(); - if (itemUnequip.length) return sendItemUnequip(itemUnequip); - return true; - } - - return ( -
e.stopPropagation()} - onDragOver={ev => ev.preventDefault()} - onDrop={inventoryClick} - > -
- {range(0, 4).map(i => inventoryBtn(vbox.bound[i], i))} -
-
- ); - } function inventoryHdr() { return ( @@ -414,7 +217,8 @@ class Vbox extends preact.Component { const refund = shopSelect.length === 0 && stashSelect.length === 1 ? itemInfo.items.find(i => i.item === vbox.bound[stashSelect[0]]).cost : 0; - const tutorialDisabled = tutorial && tutorial < 8 && instance.time_control === 'Practice' && instance.rounds.length === 1; + const tutorialDisabled = tutorial && tutorial < 8 + && instance.time_control === 'Practice' && instance.rounds.length === 1; return (
@@ -434,17 +238,45 @@ class Vbox extends preact.Component { ); } - // // EVERYTHING - // return (
{vboxHdr()} - {vboxElement()} {inventoryHdr()} - {inventoryElement()} - {combinerBtn()} {refundBtn()} + + +
); } diff --git a/client/src/components/vbox.inventory.jsx b/client/src/components/vbox.inventory.jsx new file mode 100644 index 00000000..f4f80e06 --- /dev/null +++ b/client/src/components/vbox.inventory.jsx @@ -0,0 +1,108 @@ +const preact = require('preact'); +const range = require('lodash/range'); +const without = require('lodash/without'); + +const shapes = require('./shapes'); +const buttons = require('./buttons'); +const { removeTier } = require('../utils'); + +function inventoryElement(props) { + const { + combinerChange, + itemUnequip, + vbox, + vboxBuySelected, + vboxHighlight, + vboxHover, + vboxSelecting, + stashSelect, + + sendItemUnequip, + setInfo, + setVboxSelected, + + } = props; + function inventoryClick(e) { + e.stopPropagation(); + if (itemUnequip.length) return sendItemUnequip(itemUnequip); + return true; + } + + function inventoryBtn(v, i) { + const inventoryHighlight = vboxSelecting || itemUnequip.length; + + if (!v && v !== 0) { + const emptyInvClick = () => { + if (vboxSelecting) return vboxBuySelected(); + return false; + }; + return ; + } + + const comboHighlight = vboxHighlight && vboxHighlight.includes(v) ? 'combo-border' : ''; + + function onClick(type) { + const combinerContainsIndex = stashSelect.indexOf(i) > -1; + // removing + if (combinerContainsIndex) { + if (type === 'click') { + return combinerChange(without(stashSelect, i)); + } + return true; + } + + if (!comboHighlight) { + setInfo(vbox.bound[i]); + return setVboxSelected({ shopSelect: [], stashSelect: [i] }); + } + + stashSelect.push(i); + // if (stashSelect.length === 3) setInfo(comboItem.item); + return combinerChange(stashSelect); + } + + const highlighted = stashSelect.indexOf(i) > -1; + const border = buttons[removeTier(v)] ? buttons[removeTier(v)]() : ''; + const classes = `${highlighted ? 'highlight' : border} ${comboHighlight}`; + + const invObject = shapes[v] ? shapes[v]() : v; + + return ( + + ); + } + + return ( +
e.stopPropagation()} + onDragOver={ev => ev.preventDefault()} + onDrop={inventoryClick} + > +
+ {range(0, 4).map(i => inventoryBtn(vbox.bound[i], i))} +
+
+ ); +} + +module.exports = inventoryElement; diff --git a/client/src/components/vbox.store.jsx b/client/src/components/vbox.store.jsx new file mode 100644 index 00000000..410cf491 --- /dev/null +++ b/client/src/components/vbox.store.jsx @@ -0,0 +1,81 @@ +const preact = require('preact'); +const range = require('lodash/range'); + +const shapes = require('./shapes'); + + +function storeElement(props) { + const { + clearVboxSelected, + setInfo, + setVboxSelected, + shopSelect, + stashSelect, + vbox, + vboxHighlight, + vboxHover, + } = props; + + function availableBtn(v, group, index) { + if (!v) return ; + const selected = shopSelect.length && shopSelect.some(vs => vs[0] === group && vs[1] === index); + + const comboHighlight = vboxHighlight && vboxHighlight.includes(v) ? 'combo-border' : ''; + + function onClick(e) { + e.stopPropagation(); + if (!comboHighlight) setInfo(vbox.free[group][index]); + if (shopSelect.length && shopSelect.some(vs => vs[0] === group && vs[1] === index)) { + return setVboxSelected( + { shopSelect: shopSelect.filter(vs => !(vs[0] === group && vs[1] === index)), stashSelect } + ); + } + + if (!shopSelect.length && !stashSelect.length) { + return setVboxSelected({ shopSelect: [[group, index]], stashSelect }); + } + if (comboHighlight !== 'combo-border') { + return setVboxSelected({ shopSelect: [[group, index]], stashSelect: [] }); + } + return setVboxSelected({ shopSelect: [...shopSelect, [group, index]], stashSelect }); + } + + + const classes = `${v.toLowerCase()} ${selected ? 'highlight' : ''} ${comboHighlight}`; + + const vboxObject = shapes[v] ? shapes[v]() : v; + const disabled = vbox.bits <= group; + return ( + + ); + } + + return ( +
e.stopPropagation()}> +
+
+ {range(0, 6).map(i => availableBtn(vbox.free[0][i], 0, i))} +
+
+ {range(0, 3).map(i => availableBtn(vbox.free[1][i], 1, i))} + {range(0, 3).map(i => availableBtn(vbox.free[2][i], 2, i))} +
+
+
+ ); +} + +module.exports = storeElement; From 54743c67babcbf0bacbac8b20719b88728d8aa50 Mon Sep 17 00:00:00 2001 From: Mashy Date: Thu, 21 Nov 2019 15:57:25 +1000 Subject: [PATCH 13/67] styling --- client/assets/styles/vbox.less | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) diff --git a/client/assets/styles/vbox.less b/client/assets/styles/vbox.less index 857ce142..e24aba7e 100644 --- a/client/assets/styles/vbox.less +++ b/client/assets/styles/vbox.less @@ -9,7 +9,6 @@ "stash-hdr shop" "stash stash" "refund combiner"; - border-top: 0.1em solid @gray-exists; margin-bottom: 1em; line-height: 0; @@ -24,12 +23,14 @@ grid-area: shop; border-bottom: 0.1em solid @gray-exists; border-right: 0.1em solid @gray-exists; + border-top: 0.1em solid @gray-exists; } .shop-hdr { grid-area: shop-hdr; border-bottom: 0.1em solid @gray-exists; border-left: 0.1em solid @gray-exists; + border-top: 0.1em solid @gray-exists; text-align: center; button { margin-top: 0.5em; @@ -37,6 +38,10 @@ height: 4em; letter-spacing: 0.1em; background-color: #421010; + &:hover { + background-color: @red; + + } } } @@ -55,9 +60,9 @@ button { height: 3em; letter-spacing: 0.1em; - background-color: #342100; + background-color: #996100; &[disabled] { - color: #342100; + color: #996100; }; } } @@ -86,7 +91,7 @@ line-height: 1.4; height: 3em; letter-spacing: 0.1em; - background-color: #342100; + background-color: #996100; } border-left: 0.1em solid @gray-exists; border-bottom: 0.1em solid @gray-exists; From 05112fbf7e02ba01a802dcd58146b79f878a44ca Mon Sep 17 00:00:00 2001 From: Mashy Date: Thu, 21 Nov 2019 16:31:19 +1000 Subject: [PATCH 14/67] remove instance mobile style file --- client/assets/styles/instance.mobile.less | 29 ----------------------- client/assets/styles/styles.less | 1 - client/assets/styles/styles.mobile.less | 9 ++++--- 3 files changed, 6 insertions(+), 33 deletions(-) delete mode 100644 client/assets/styles/instance.mobile.less diff --git a/client/assets/styles/instance.mobile.less b/client/assets/styles/instance.mobile.less deleted file mode 100644 index 53585439..00000000 --- a/client/assets/styles/instance.mobile.less +++ /dev/null @@ -1,29 +0,0 @@ -// tablet / ipad -@media (max-width: 1100px) { - .instance { - grid-template-columns: 1fr; - grid-template-rows: min-content 1fr; - grid-template-areas: - "vbox" - "constructs"; - - .info { - display: none; - } - } -} - -@media (max-width: 800px) { - .instance { - font-size: 5.5pt; - grid-template-columns: 1fr; - grid-template-rows: min-content 1fr; - grid-template-areas: - "vbox" - "constructs"; - - .info { - display: none; - } - } -} \ No newline at end of file diff --git a/client/assets/styles/styles.less b/client/assets/styles/styles.less index abdb979b..de7f9dea 100644 --- a/client/assets/styles/styles.less +++ b/client/assets/styles/styles.less @@ -9,7 +9,6 @@ @import 'game.less'; @import 'player.less'; @import 'styles.mobile.less'; -@import 'instance.mobile.less'; html body { margin: 0; diff --git a/client/assets/styles/styles.mobile.less b/client/assets/styles/styles.mobile.less index b97257c1..80ba1518 100644 --- a/client/assets/styles/styles.mobile.less +++ b/client/assets/styles/styles.mobile.less @@ -1,20 +1,23 @@ -@media (max-width: 1000px) { +@media (max-width: 800px) { body { overflow-y: initial; } #mnml { - font-size: 8pt; + font-size: 6pt; padding: 0.25em; .instance { + font-size: 6pt; grid-template-columns: 1fr; grid-template-rows: min-content 1fr; grid-template-areas: "vbox" "constructs"; - + .info { + display: none; + } svg { stroke-width: 1.25em; } From 8e83d0aa0b408ef1241314be482b0fce10efae04 Mon Sep 17 00:00:00 2001 From: Mashy Date: Thu, 21 Nov 2019 16:55:04 +1000 Subject: [PATCH 15/67] instance cleanup --- client/assets/styles/instance.less | 265 +++++++----------------- client/assets/styles/styles.mobile.less | 5 +- 2 files changed, 76 insertions(+), 194 deletions(-) diff --git a/client/assets/styles/instance.less b/client/assets/styles/instance.less index 04e4f1c6..33142408 100644 --- a/client/assets/styles/instance.less +++ b/client/assets/styles/instance.less @@ -1,3 +1,7 @@ +.instance.lobby { + align-content: center; +} + .instance { overflow: hidden; display: grid; @@ -7,122 +11,89 @@ grid-template-areas: "vbox info" "constructs constructs"; -} -@media (max-width: 1920px) { - .instance .info table td svg { - // height: 50%; - stroke-width: 8px; - } + .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; + } - .instance svg { - height: 1.5em; - } -} + margin: 0 0 0 1em; + grid-area: info; -.instance .top { - grid-area: top; -} - -.instance.lobby { - align-content: center; -} - -.scoreboard { - flex: 1; -} - -.instance .info { - margin: 0 0 0 1em; - grid-area: info; - - display: grid; - grid-template-rows: 13em min-content; - grid-template-areas: - "item" - "combos"; - - .combos { display: grid; - grid-template-columns: repeat(6, 1fr); - align-content: center; + grid-template-rows: 13em min-content; + grid-template-areas: + "item" + "combos"; - .table-button { + .combos { display: grid; - text-align: center; + grid-template-columns: repeat(6, 1fr); align-content: center; - border-bottom: 2px solid #222; - grid-template-areas: - "item" - "ingr"; - - cursor: pointer; - &:hover { - color: whitesmoke; - background-color: @gray; - } - - .item { - border-top: 2px solid #222; + .table-button { + display: grid; + text-align: center; + align-content: center; border-bottom: 2px solid #222; - flex: 1; - grid-area: item; - font-weight: bold; - } - div { - border-right: 2px solid #222; - svg { - vertical-align: middle; + 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; } - } - &:first-child { div { - border-left: 2px solid #222; + border-right: 2px solid #222; + svg { + vertical-align: middle; + } + } + + &:first-child { + div { + border-left: 2px solid #222; + } } } } } -} -.instance .info h2 { - text-transform: uppercase; -} - -.instance .info svg { - display: inline; - height: 1em; -} - -.instance .info figure { - display: inline; - height: 0.5em; - - svg { - margin-right: 0.5em; + .constructs { + grid-area: constructs; } } -.instance .info figcaption { - font-size: 1em; - display: inline-block; - vertical-align: middle; -} -.instance .constructs { - grid-area: constructs; -} - -.instance .equip { - grid-area: equip; -} - -.instance .equip .skills { - border-right-width: 0; -} @keyframes action { 0% { @@ -135,10 +106,6 @@ /* CONSTRUCT LIST */ -.construct-list { - grid-area: constructs; - display: flex; -} .instance-construct { flex: 1; @@ -154,14 +121,16 @@ /*padding: 0.5em;*/ border: 2px solid #222; border-left-width: 0; -} - -.instance-construct:first-child { - margin-left: 0; - border-left-width: 1px; + &:first-child { + margin-left: 0; + border-left-width: 1px; + } } .construct-list { + grid-area: constructs; + display: flex; + button { &.highlight { color: black; @@ -264,95 +233,10 @@ } } -/* 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; -// } - .equipping, .receiving { animation: eq 0.75s cubic-bezier(0, 0, 1, 1) 0s infinite alternate; } @@ -484,9 +368,4 @@ to { color: @yellow; } -} - -/* Mobile Nav*/ -.instance-nav { display: none; } - -.vbox-arrow-mobile { display: none } +} \ No newline at end of file diff --git a/client/assets/styles/styles.mobile.less b/client/assets/styles/styles.mobile.less index 80ba1518..e20f2d4f 100644 --- a/client/assets/styles/styles.mobile.less +++ b/client/assets/styles/styles.mobile.less @@ -8,7 +8,7 @@ padding: 0.25em; .instance { - font-size: 6pt; + font-size: 7.5pt; grid-template-columns: 1fr; grid-template-rows: min-content 1fr; @@ -21,6 +21,9 @@ svg { stroke-width: 1.25em; } + .avatar { + display: none; + } } .game { From a3376fb8d23278036229757d6de555fe310584ee Mon Sep 17 00:00:00 2001 From: Mashy Date: Thu, 21 Nov 2019 18:05:46 +1000 Subject: [PATCH 16/67] fix mobile game phase --- client/assets/styles/styles.mobile.less | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/client/assets/styles/styles.mobile.less b/client/assets/styles/styles.mobile.less index e20f2d4f..ff8adf1a 100644 --- a/client/assets/styles/styles.mobile.less +++ b/client/assets/styles/styles.mobile.less @@ -27,6 +27,12 @@ } .game { + .stats { + font-size: 8pt; + svg { + stroke-width: 1.5em; + } + } .team, #targeting, .resolving-skill { width: calc(90% - 3em); } From 4d3a837d477809840b432a7ed019e44d3494d779 Mon Sep 17 00:00:00 2001 From: Mashy Date: Fri, 22 Nov 2019 00:17:50 +1000 Subject: [PATCH 17/67] misc styling --- client/assets/styles/controls.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/assets/styles/controls.less b/client/assets/styles/controls.less index 0bdb4b59..9fb1cd13 100644 --- a/client/assets/styles/controls.less +++ b/client/assets/styles/controls.less @@ -60,7 +60,7 @@ aside { width: 0.25em; max-width: 0.25em; - margin: 0 1em 0 0; + margin: 0 0.5em 0 0; border: none; } From 0722b194b04e2302b50a82fb20045089bc0937f0 Mon Sep 17 00:00:00 2001 From: Mashy Date: Fri, 22 Nov 2019 00:18:17 +1000 Subject: [PATCH 18/67] misc styling (actual commit) --- client/assets/styles/game.less | 13 +++--------- client/assets/styles/skeleton.css | 1 - client/assets/styles/styles.less | 3 ++- client/assets/styles/styles.mobile.less | 18 ++++++++++------ client/assets/styles/vbox.less | 26 ------------------------ client/src/components/vbox.inventory.jsx | 1 + 6 files changed, 18 insertions(+), 44 deletions(-) diff --git a/client/assets/styles/game.less b/client/assets/styles/game.less index 4ddacc63..92ec48ae 100644 --- a/client/assets/styles/game.less +++ b/client/assets/styles/game.less @@ -150,15 +150,10 @@ width: 100%; height: 2em; margin-right: 1em; - span { - background-color: black; - } + background-color: black; } button.active { - background: #2c2c2c; - span { - background-color: #2c2c2c; - } + background-color: #2c2c2c; } } @@ -266,9 +261,7 @@ padding-right: 1em; text-align: center; z-index: 2; - span { - background-color: black; - } + background-color: black; svg { display: inline; height: 1em; diff --git a/client/assets/styles/skeleton.css b/client/assets/styles/skeleton.css index 13bb3549..037e1747 100644 --- a/client/assets/styles/skeleton.css +++ b/client/assets/styles/skeleton.css @@ -176,7 +176,6 @@ input[type="button"] { /*padding: 0 2em;*/ color: #555; text-align: center; - font-size: 11px; font-weight: 600; line-height: 38px; letter-spacing: .1rem; diff --git a/client/assets/styles/styles.less b/client/assets/styles/styles.less index de7f9dea..202674b2 100644 --- a/client/assets/styles/styles.less +++ b/client/assets/styles/styles.less @@ -22,6 +22,7 @@ html body { -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; + -webkit-tap-highlight-color: transparent; overflow-x: hidden; overflow-y: hidden; @@ -128,7 +129,7 @@ button, input { border-color: @gray-exists; letter-spacing: 0.25em; box-sizing: border-box; - font-size: 100%; + font-size: 1em; flex: 1; border-radius: 0.5em; line-height: 2em; diff --git a/client/assets/styles/styles.mobile.less b/client/assets/styles/styles.mobile.less index ff8adf1a..a8c8ac96 100644 --- a/client/assets/styles/styles.mobile.less +++ b/client/assets/styles/styles.mobile.less @@ -1,10 +1,11 @@ @media (max-width: 800px) { body { overflow-y: initial; + } #mnml { - font-size: 6pt; + font-size: 8pt; padding: 0.25em; .instance { @@ -27,8 +28,8 @@ } .game { + font-size: 7.5pt; .stats { - font-size: 8pt; svg { stroke-width: 1.5em; } @@ -57,17 +58,22 @@ } .skills { - button[disabled] { - display: none; + display: grid; + grid-template-rows: 1fr; + grid-template-columns: 1fr 1fr 1fr; + button { + font-size: 0.9em; + letter-spacing: 0.05em; } + + } .effects { - font-size: 1em; + font-size: 1.1em; } .skill-description { - font-size: 0.8em; svg { height: 1em; } diff --git a/client/assets/styles/vbox.less b/client/assets/styles/vbox.less index e24aba7e..115decff 100644 --- a/client/assets/styles/vbox.less +++ b/client/assets/styles/vbox.less @@ -190,30 +190,4 @@ line-height: initial; } } -} - -.vbox-combiner { - grid-area: combiner; - display: flex; - flex-flow: column; - justify-content: flex-end; -} - -.vbox-combiner button { - flex: 0; -} - - -.vbox-hdr { - display: flex; -} - -.vbox-hdr h3 { - flex: 1; -} - -.vbox-hdr .bits { - font-size: 2em; - line-height: 1em; - animation: bits 1s ease-out; } \ No newline at end of file diff --git a/client/src/components/vbox.inventory.jsx b/client/src/components/vbox.inventory.jsx index f4f80e06..8aa22a14 100644 --- a/client/src/components/vbox.inventory.jsx +++ b/client/src/components/vbox.inventory.jsx @@ -25,6 +25,7 @@ function inventoryElement(props) { function inventoryClick(e) { e.stopPropagation(); if (itemUnequip.length) return sendItemUnequip(itemUnequip); + if (vboxSelecting) return vboxBuySelected(); return true; } From 28585487c6f43e63412a18a609c1b564cce6261a Mon Sep 17 00:00:00 2001 From: Mashy Date: Fri, 22 Nov 2019 00:23:53 +1000 Subject: [PATCH 19/67] game phase cooldown new line, mobile styling --- client/src/components/skill.btn.jsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/client/src/components/skill.btn.jsx b/client/src/components/skill.btn.jsx index 6f96e410..d7be22be 100644 --- a/client/src/components/skill.btn.jsx +++ b/client/src/components/skill.btn.jsx @@ -69,7 +69,7 @@ function Skill(props) { // return false; // } const cdText = construct.skills[i].cd > 0 - ? `- ${s.cd}T` + ? `${s.cd}T` : ''; const highlight = activeSkill @@ -91,7 +91,7 @@ function Skill(props) { onMouseOut={e => hoverInfo(e, null)} type="submit" onClick={onClick}> - {s.skill} {cdText} + {s.skill}
{cdText} ); } From c650b74ec918b1ace1080ad78c3898bddc6cb83f Mon Sep 17 00:00:00 2001 From: Mashy Date: Fri, 22 Nov 2019 00:39:22 +1000 Subject: [PATCH 20/67] skill button size --- client/assets/styles/game.less | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/client/assets/styles/game.less b/client/assets/styles/game.less index 92ec48ae..9b19db2c 100644 --- a/client/assets/styles/game.less +++ b/client/assets/styles/game.less @@ -148,7 +148,8 @@ z-index: 2; button { width: 100%; - height: 2em; + height: 3em; + line-height: 1; margin-right: 1em; background-color: black; } From 9cd656a99f23786e9d7a9ab200c0f3ca36a13ea0 Mon Sep 17 00:00:00 2001 From: Mashy Date: Fri, 22 Nov 2019 00:39:35 +1000 Subject: [PATCH 21/67] skill button size --- client/assets/styles/styles.mobile.less | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/client/assets/styles/styles.mobile.less b/client/assets/styles/styles.mobile.less index a8c8ac96..6e1b8cba 100644 --- a/client/assets/styles/styles.mobile.less +++ b/client/assets/styles/styles.mobile.less @@ -62,8 +62,8 @@ grid-template-rows: 1fr; grid-template-columns: 1fr 1fr 1fr; button { - font-size: 0.9em; - letter-spacing: 0.05em; + font-size: 1em; + letter-spacing: 0.1em; } From 843c1c6bbe8551c7096c966b33afdcf79930341f Mon Sep 17 00:00:00 2001 From: Mashy Date: Fri, 22 Nov 2019 01:17:45 +1000 Subject: [PATCH 22/67] combo preview wip --- client/assets/styles/instance.less | 79 +++++++++++++----------- client/src/components/info.component.jsx | 5 +- 2 files changed, 48 insertions(+), 36 deletions(-) diff --git a/client/assets/styles/instance.less b/client/assets/styles/instance.less index 33142408..cb7e062c 100644 --- a/client/assets/styles/instance.less +++ b/client/assets/styles/instance.less @@ -32,55 +32,64 @@ display: inline-block; vertical-align: middle; } - - margin: 0 0 0 1em; + margin-left: 1em; grid-area: info; - display: grid; - grid-template-rows: 13em min-content; + grid-template-rows: 1fr; + grid-template-columns: 20em 1fr; grid-template-areas: - "item" - "combos"; + "combos item"; .combos { + + margin-right: 1em; display: grid; - grid-template-columns: repeat(6, 1fr); - align-content: center; + grid-area: combos; + grid-template-rows: min-content min-content; + grid-template-areas: + "comboHeader" + "comboList"; + .combo-header { + font-size: 1.25em; + } - .table-button { + .combo-list { display: grid; - text-align: center; - align-content: center; - border-bottom: 2px solid #222; + grid-template-rows: min-content min-content min-content; + grid-template-columns: 1fr 1fr; + grid-gap: 1em; + .table-button { + display: grid; + text-align: center; + align-content: center; - grid-template-areas: - "item" - "ingr"; + 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 { - border-right: 2px solid #222; - svg { - vertical-align: middle; + 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; } - } - &:first-child { div { border-left: 2px solid #222; + border-right: 2px solid #222; + svg { + vertical-align: middle; + } + &:last-child { + border-bottom: 2px solid #222; + } } } } diff --git a/client/src/components/info.component.jsx b/client/src/components/info.component.jsx index 6045c049..c711429a 100644 --- a/client/src/components/info.component.jsx +++ b/client/src/components/info.component.jsx @@ -167,7 +167,10 @@ class InfoComponent extends preact.Component { }); return (
- {comboTable} +
COMBOS
+
+ {comboTable} +
); }; From b5ade7f012526574d4ba2f3b203686a5a2e3d713 Mon Sep 17 00:00:00 2001 From: Mashy Date: Fri, 22 Nov 2019 09:56:29 +1000 Subject: [PATCH 23/67] combo preview styling --- client/assets/styles/instance.less | 26 +++++++++++++++-------- client/assets/styles/styles.mobile.less | 10 +++------ client/src/components/info.component.jsx | 20 +++++++++-------- client/src/components/info.thresholds.jsx | 11 ++++++++-- 4 files changed, 40 insertions(+), 27 deletions(-) diff --git a/client/assets/styles/instance.less b/client/assets/styles/instance.less index cb7e062c..d9bf96c8 100644 --- a/client/assets/styles/instance.less +++ b/client/assets/styles/instance.less @@ -35,34 +35,36 @@ margin-left: 1em; grid-area: info; display: grid; - grid-template-rows: 1fr; - grid-template-columns: 20em 1fr; + grid-template-columns: 1fr min-content; grid-template-areas: - "combos item"; + "item combos"; + .info-item { + grid-area: item; + } .combos { - - margin-right: 1em; display: grid; grid-area: combos; + margin-left: 0.5em; grid-template-rows: min-content min-content; grid-template-areas: "comboHeader" "comboList"; .combo-header { - font-size: 1.25em; + text-align: center; } .combo-list { display: grid; grid-template-rows: min-content min-content min-content; - grid-template-columns: 1fr 1fr; - grid-gap: 1em; + grid-template-columns: min-content min-content; + grid-gap: 0.5em; + margin-top: 0.5em; + .table-button { display: grid; text-align: center; align-content: center; - grid-template-areas: "item" "ingr"; @@ -79,11 +81,17 @@ 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; } diff --git a/client/assets/styles/styles.mobile.less b/client/assets/styles/styles.mobile.less index 6e1b8cba..2eba09ac 100644 --- a/client/assets/styles/styles.mobile.less +++ b/client/assets/styles/styles.mobile.less @@ -10,14 +10,10 @@ .instance { font-size: 7.5pt; - grid-template-columns: 1fr; - grid-template-rows: min-content 1fr; - - grid-template-areas: - "vbox" - "constructs"; .info { - display: none; + .combos { + display: none; + } } svg { stroke-width: 1.25em; diff --git a/client/src/components/info.component.jsx b/client/src/components/info.component.jsx index c711429a..f60b658e 100644 --- a/client/src/components/info.component.jsx +++ b/client/src/components/info.component.jsx @@ -132,7 +132,7 @@ class InfoComponent extends preact.Component { const Combos = () => { if (tutorial && instance.time_control === 'Practice' && instance.rounds.length === 1) return false; - const generalNotes = ( +/* const generalNotes = (

General

@@ -140,12 +140,12 @@ class InfoComponent extends preact.Component { Click the READY button to start the GAME PHASE.

- ); - if (!player) return generalNotes; - if (!info) return generalNotes; + );*/ + 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 generalNotes; + if (vboxCombos.length > 6 || vboxCombos.length === 0) return false; const comboTable = vboxCombos.map((c, i) => { const mouseOver = e => { @@ -157,7 +157,7 @@ class InfoComponent extends preact.Component {
{convertItem(c.components[2])}
] : c.components.map((u, j) =>
{convertItem(u)}
); return ( -
setInfo(c.item)}> +
{convertItem(c.item)}
@@ -165,12 +165,14 @@ class InfoComponent extends preact.Component {
); }); + const comboList = comboTable.length > 0 ?
{comboTable}
: false; return (
-
COMBOS
-
- {comboTable} +
+

COMBOS

+ Combine colours and items.
+ {comboList}
); }; diff --git a/client/src/components/info.thresholds.jsx b/client/src/components/info.thresholds.jsx index 7136a855..930882bd 100644 --- a/client/src/components/info.thresholds.jsx +++ b/client/src/components/info.thresholds.jsx @@ -87,9 +87,16 @@ function specThresholds(player, fullInfo, info) { ); }); return ( -
- {thresholds} +
+
+ {thresholds[0]} + {thresholds[1]} +
+
+ {thresholds[2]} +
+ ); } From 945f0828c1e52da952813838158d89d90e605ed9 Mon Sep 17 00:00:00 2001 From: Mashy Date: Fri, 22 Nov 2019 09:59:35 +1000 Subject: [PATCH 24/67] combo mouseover event --- client/src/components/info.component.jsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/client/src/components/info.component.jsx b/client/src/components/info.component.jsx index f60b658e..eec7b710 100644 --- a/client/src/components/info.component.jsx +++ b/client/src/components/info.component.jsx @@ -178,8 +178,10 @@ class InfoComponent extends preact.Component { }; return ( -
this.setState({ comboItem: null })}> - +
+
this.setState({ comboItem: null })}> + +
); From a353dcca957baa9b5e6bb8a967bdec6898723ba6 Mon Sep 17 00:00:00 2001 From: Mashy Date: Fri, 22 Nov 2019 10:06:39 +1000 Subject: [PATCH 25/67] inventory -> stash --- client/src/components/demo.jsx | 8 ++++---- client/src/components/vbox.component.jsx | 10 +++++----- .../{vbox.inventory.jsx => vbox.stash.jsx} | 20 +++++++++---------- client/src/constants.jsx | 6 +++--- client/src/tutorial.utils.jsx | 4 ++-- 5 files changed, 24 insertions(+), 24 deletions(-) rename client/src/components/{vbox.inventory.jsx => vbox.stash.jsx} (85%) diff --git a/client/src/components/demo.jsx b/client/src/components/demo.jsx index 494015ef..e6bee9eb 100644 --- a/client/src/components/demo.jsx +++ b/client/src/components/demo.jsx @@ -46,7 +46,7 @@ function Demo(args) { const { combiner, items, equipping, equipped, players, combo } = demo; const vboxDemo = () => { - function inventoryBtn(i, j) { + function stashBtn(i, j) { if (!i) return ; const highlighted = combiner.indexOf(j) > -1; const classes = `${highlighted ? 'highlight' : ''}`; @@ -82,7 +82,7 @@ function Demo(args) { ); } - function inventoryElement() { + function stashElement() { return (
@@ -96,7 +96,7 @@ function Demo(args) {
 
- {items.map((i, j) => inventoryBtn(i, j))} + {items.map((i, j) => stashBtn(i, j))}
{combinerBtn()}
@@ -106,7 +106,7 @@ function Demo(args) { return (
- {inventoryElement()} + {stashElement()}
); }; diff --git a/client/src/components/vbox.component.jsx b/client/src/components/vbox.component.jsx index 99161682..639b6e11 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 InventoryElement = require('./vbox.inventory'); +const StashElement = require('./vbox.stash'); const StoreElement = require('./vbox.store'); const CombinerElement = require('./vbox.combiner'); @@ -202,12 +202,12 @@ class Vbox extends preact.Component { ); } - function inventoryHdr() { + function stashHdr() { return (

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

@@ -242,7 +242,7 @@ class Vbox extends preact.Component { return (
{vboxHdr()} - {inventoryHdr()} + {stashHdr()} {refundBtn()} - { @@ -40,8 +40,8 @@ function inventoryElement(props) { return ; + disabled={!stashHighlight} + class={stashHighlight ? 'receiving' : 'empty'} > ; } const comboHighlight = vboxHighlight && vboxHighlight.includes(v) ? 'combo-border' : ''; @@ -94,16 +94,16 @@ function inventoryElement(props) { return (
e.stopPropagation()} onDragOver={ev => ev.preventDefault()} - onDrop={inventoryClick} + onDrop={stashClick} >
- {range(0, 4).map(i => inventoryBtn(vbox.bound[i], i))} + {range(0, 4).map(i => stashBtn(vbox.bound[i], i))}
); } -module.exports = inventoryElement; +module.exports = stashElement; diff --git a/client/src/constants.jsx b/client/src/constants.jsx index 5a7a24a3..c0fb5541 100644 --- a/client/src/constants.jsx +++ b/client/src/constants.jsx @@ -29,8 +29,8 @@ module.exports = { description:

ITEMS that are available to buy.
The VBOX is refilled every round.
Click REFILL at the bottom to purchase a refill.

, }, - inventory: { - item: 'INVENTORY', + stash: { + item: 'STASH', description:

Holds ITEMS
ITEMS carry over each round.

, }, bits: { @@ -60,7 +60,7 @@ module.exports = { }, constructSkills: { item: 'SKILLS', - description: 'Skills are used by constructs in the game phase.\nBase skills can be bought from the VBOX.\nEquip skills from the inventory. Double-click to unequip.', + description: 'Skills are used by constructs in the game phase.\nBase skills can be bought from the VBOX.\nEquip skills from the stash. Double-click to unequip.', }, constructSpecs: { item: 'SPECS', diff --git a/client/src/tutorial.utils.jsx b/client/src/tutorial.utils.jsx index 3534cc36..23436be6 100644 --- a/client/src/tutorial.utils.jsx +++ b/client/src/tutorial.utils.jsx @@ -138,7 +138,7 @@ function tutorialStage(tutorial, ws, clearTutorial, instance) {

Tutorial

The first construct on your team is {constructOne}.

Skill items can be equipped to your constructs to be used in the combat phase.

-

Click the newly combined skill item in the top right of the inventory.
+

Click the newly combined skill from the stash.
Once selected click the construct SKILL slot to equip the skill.

); @@ -161,7 +161,7 @@ function tutorialStage(tutorial, ws, clearTutorial, instance) {

Tutorial

Equipping specialisation items will increase the stats of your constructs.

These can also be combined with colours for further specialisation.

-

Click the specialisation item in the top right of the inventory.
+

Click the specialisation item from the stash.
Once selected click the construct SPEC slot to equip the specialisation.

); From fba4627bf149ecfe65a05e2d8ee2658674c7c7fd Mon Sep 17 00:00:00 2001 From: Mashy Date: Fri, 22 Nov 2019 10:14:36 +1000 Subject: [PATCH 26/67] fixed combo list width --- client/assets/styles/instance.less | 1 + 1 file changed, 1 insertion(+) diff --git a/client/assets/styles/instance.less b/client/assets/styles/instance.less index d9bf96c8..26bee42c 100644 --- a/client/assets/styles/instance.less +++ b/client/assets/styles/instance.less @@ -60,6 +60,7 @@ grid-template-columns: min-content min-content; grid-gap: 0.5em; margin-top: 0.5em; + width: 15.5em; .table-button { display: grid; From 69be938e76e82f2cd22b078a086aeb141d95678d Mon Sep 17 00:00:00 2001 From: Mashy Date: Fri, 22 Nov 2019 10:34:50 +1000 Subject: [PATCH 27/67] shop / vbox -> store --- client/assets/styles/vbox.less | 12 +++---- client/src/components/instance.component.jsx | 2 +- client/src/components/instance.constructs.jsx | 10 +++--- client/src/components/vbox.combiner.jsx | 12 +++---- client/src/components/vbox.component.jsx | 36 +++++++++---------- client/src/components/vbox.stash.jsx | 2 +- client/src/components/vbox.store.jsx | 18 +++++----- client/src/constants.jsx | 14 +++----- client/src/events.jsx | 2 +- client/src/keyboard.jsx | 2 +- client/src/reducers.jsx | 2 +- 11 files changed, 54 insertions(+), 58 deletions(-) diff --git a/client/assets/styles/vbox.less b/client/assets/styles/vbox.less index 115decff..411dae51 100644 --- a/client/assets/styles/vbox.less +++ b/client/assets/styles/vbox.less @@ -5,8 +5,8 @@ grid-template-rows: 9.5em 2.5em 4.5em min-content; grid-template-columns: 8em 24em; grid-template-areas: - "shop-hdr shop" - "stash-hdr shop" + "store-hdr store" + "stash-hdr store" "stash stash" "refund combiner"; margin-bottom: 1em; @@ -19,15 +19,15 @@ margin-right: 0.5em; } - .shop { - grid-area: shop; + .store { + grid-area: store; border-bottom: 0.1em solid @gray-exists; border-right: 0.1em solid @gray-exists; border-top: 0.1em solid @gray-exists; } - .shop-hdr { - grid-area: shop-hdr; + .store-hdr { + grid-area: store-hdr; border-bottom: 0.1em solid @gray-exists; border-left: 0.1em solid @gray-exists; border-top: 0.1em solid @gray-exists; diff --git a/client/src/components/instance.component.jsx b/client/src/components/instance.component.jsx index 4955469e..a8abcac0 100644 --- a/client/src/components/instance.component.jsx +++ b/client/src/components/instance.component.jsx @@ -28,7 +28,7 @@ const addState = connect( function clearItems() { dispatch(actions.setItemUnequip([])); - dispatch(actions.setVboxSelected({ shopSelect: [], stashSelect: [] })); + dispatch(actions.setVboxSelected({ storeSelect: [], stashSelect: [] })); return true; } diff --git a/client/src/components/instance.constructs.jsx b/client/src/components/instance.constructs.jsx index e29a7ad7..88589efe 100644 --- a/client/src/components/instance.constructs.jsx +++ b/client/src/components/instance.constructs.jsx @@ -25,7 +25,7 @@ const addState = connect( } = state; function sendVboxAcceptEquip(constructId) { - return ws.sendVboxAcceptEquip(instance.id, vboxSelected.shopSelect[0][0], vboxSelected.shopSelect[0][1], constructId); + return ws.sendVboxAcceptEquip(instance.id, vboxSelected.storeSelect[0][0], vboxSelected.storeSelect[0][1], constructId); } function sendVboxApply(constructId, i) { @@ -60,7 +60,7 @@ const addState = connect( } function setItemUnequip(v) { - dispatch(actions.setVboxSelected({ shopSelect: [], stashSelect: [] })); + dispatch(actions.setVboxSelected({ storeSelect: [], stashSelect: [] })); return dispatch(actions.setItemUnequip(v)); } @@ -91,7 +91,7 @@ function Construct(props) { const { vbox } = player; - const itemEquip = vboxSelected.shopSelect.length === 0 && vboxSelected.stashSelect.length === 1 + const itemEquip = vboxSelected.storeSelect.length === 0 && vboxSelected.stashSelect.length === 1 ? vboxSelected.stashSelect[0] : -1; @@ -106,7 +106,7 @@ function Construct(props) { e.preventDefault(); if (duplicateSkill || tutorialDisableEquip) return true; if (itemEquip !== -1) return sendVboxApply(construct.id, itemEquip); - if (vboxSelected.shopSelect.length === 1) return sendVboxAcceptEquip(construct.id); + if (vboxSelected.storeSelect.length === 1) return sendVboxAcceptEquip(construct.id); if (itemUnequip.length && itemUnequip[0] !== construct.id) return sendVboxUnequipApply(construct.id); setItemUnequip([]); return true; @@ -114,7 +114,7 @@ function Construct(props) { function hoverInfo(e, info) { e.stopPropagation(); if (!info) return false; - if (vboxSelected.shopSelect.length || vboxSelected.stashSelect.length) return false; + if (vboxSelected.storeSelect.length || vboxSelected.stashSelect.length) return false; return setInfo(info); } diff --git a/client/src/components/vbox.combiner.jsx b/client/src/components/vbox.combiner.jsx index dddfce06..4b8ab14e 100644 --- a/client/src/components/vbox.combiner.jsx +++ b/client/src/components/vbox.combiner.jsx @@ -7,18 +7,18 @@ function combinerBtn(props) { sendVboxCombine, setInfo, stashSelect, - shopSelect, + storeSelect, vbox, vboxBuySelected, vboxHighlight, } = props; let text = ''; let mouseEvent = false; - const combineLength = stashSelect.length + shopSelect.length; + 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 = shopSelect.map(j => vbox.free[j[0]][j[1]]); + const shopItems = storeSelect.map(j => vbox.free[j[0]][j[1]]); const selectedItems = stashItems.concat(shopItems); const combinerCount = countBy(selectedItems, co => co); @@ -32,13 +32,13 @@ function combinerBtn(props) { setInfo(comboItem); comboItem = comboItem.replace('Plus', '+'); let bits = 0; - shopSelect.forEach(item => bits += item[0] + 1); + 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 && shopSelect.length === 1) { - const item = shopSelect[0]; + } 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 { diff --git a/client/src/components/vbox.component.jsx b/client/src/components/vbox.component.jsx index 639b6e11..819c43b5 100644 --- a/client/src/components/vbox.component.jsx +++ b/client/src/components/vbox.component.jsx @@ -31,7 +31,7 @@ const addState = connect( } function sendVboxCombine() { - return ws.sendVboxCombine(instance.id, vboxSelected.stashSelect, vboxSelected.shopSelect); + return ws.sendVboxCombine(instance.id, vboxSelected.stashSelect, vboxSelected.storeSelect); } function sendVboxReclaim(i) { @@ -75,13 +75,13 @@ const addState = connect( } ); -function validVboxSelect(vbox, itemInfo, shopSelect, stashSelect) { - if (shopSelect.length === 0 && stashSelect.length === 0) return false; +function validVboxSelect(vbox, itemInfo, storeSelect, stashSelect) { + if (storeSelect.length === 0 && stashSelect.length === 0) return false; const validSelects = []; const stashItems = stashSelect.map(j => vbox.bound[j]); - const shopItems = shopSelect.map(j => vbox.free[j[0]][j[1]]); + const shopItems = storeSelect.map(j => vbox.free[j[0]][j[1]]); const selectedItems = stashItems.concat(shopItems); const itemCount = countBy(selectedItems, co => co); @@ -139,21 +139,21 @@ class Vbox extends preact.Component { if (!player) return false; const { vbox } = player; - const { shopSelect, stashSelect } = vboxSelected; - const vboxSelecting = shopSelect.length === 1 && stashSelect.length === 0; + const { storeSelect, stashSelect } = vboxSelected; + const vboxSelecting = storeSelect.length === 1 && stashSelect.length === 0; function combinerChange(newStashSelect) { - return setVboxSelected({ shopSelect, stashSelect: newStashSelect }); + return setVboxSelected({ storeSelect, stashSelect: newStashSelect }); } - const vboxHighlight = validVboxSelect(vbox, itemInfo, shopSelect, stashSelect); + const vboxHighlight = validVboxSelect(vbox, itemInfo, storeSelect, stashSelect); // // VBOX // function vboxHover(e, v) { if (v) { e.stopPropagation(); - if (shopSelect.find(c => c[0])) return true; // There is a base skill or spec selected in the vbox + 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; @@ -164,23 +164,23 @@ class Vbox extends preact.Component { } function clearVboxSelected() { - setVboxSelected({ shopSelect: [], stashSelect: [] }); + setVboxSelected({ storeSelect: [], stashSelect: [] }); } function vboxBuySelected() { if (!vboxSelecting) return false; document.activeElement.blur(); - sendVboxAccept(shopSelect[0][0], shopSelect[0][1]); + sendVboxAccept(storeSelect[0][0], storeSelect[0][1]); return true; } - function vboxHdr() { + function storeHdr() { return ( -
+

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

vboxHover(e, 'bits')}>

{vbox.bits}b

@@ -214,7 +214,7 @@ class Vbox extends preact.Component { ); } function refundBtn() { - const refund = shopSelect.length === 0 && stashSelect.length === 1 + const refund = storeSelect.length === 0 && stashSelect.length === 1 ? itemInfo.items.find(i => i.item === vbox.bound[stashSelect[0]]).cost : 0; const tutorialDisabled = tutorial && tutorial < 8 @@ -241,14 +241,14 @@ class Vbox extends preact.Component { // EVERYTHING return (
- {vboxHdr()} + {storeHdr()} {stashHdr()} {refundBtn()}  ; - const selected = shopSelect.length && shopSelect.some(vs => vs[0] === group && vs[1] === index); + const selected = storeSelect.length && storeSelect.some(vs => vs[0] === group && vs[1] === index); const comboHighlight = vboxHighlight && vboxHighlight.includes(v) ? 'combo-border' : ''; function onClick(e) { e.stopPropagation(); if (!comboHighlight) setInfo(vbox.free[group][index]); - if (shopSelect.length && shopSelect.some(vs => vs[0] === group && vs[1] === index)) { + if (storeSelect.length && storeSelect.some(vs => vs[0] === group && vs[1] === index)) { return setVboxSelected( - { shopSelect: shopSelect.filter(vs => !(vs[0] === group && vs[1] === index)), stashSelect } + { storeSelect: storeSelect.filter(vs => !(vs[0] === group && vs[1] === index)), stashSelect } ); } - if (!shopSelect.length && !stashSelect.length) { - return setVboxSelected({ shopSelect: [[group, index]], stashSelect }); + if (!storeSelect.length && !stashSelect.length) { + return setVboxSelected({ storeSelect: [[group, index]], stashSelect }); } if (comboHighlight !== 'combo-border') { - return setVboxSelected({ shopSelect: [[group, index]], stashSelect: [] }); + return setVboxSelected({ storeSelect: [[group, index]], stashSelect: [] }); } - return setVboxSelected({ shopSelect: [...shopSelect, [group, index]], stashSelect }); + return setVboxSelected({ storeSelect: [...storeSelect, [group, index]], stashSelect }); } @@ -63,7 +63,7 @@ function storeElement(props) { } return ( -
e.stopPropagation()}>
diff --git a/client/src/constants.jsx b/client/src/constants.jsx index c0fb5541..f16b7f3b 100644 --- a/client/src/constants.jsx +++ b/client/src/constants.jsx @@ -24,10 +24,10 @@ module.exports = { }, INFO: { - vbox: { - item: 'VBOX', - description:

ITEMS that are available to buy.
- The VBOX is refilled every round.
Click REFILL at the bottom to purchase a refill.

, + store: { + item: 'STORE', + description:

Contains items that are available to buy.
+ The store is refilled every round.
Click REFILL to purchase a refill for 2 bits.

, }, stash: { item: 'STASH', @@ -35,11 +35,7 @@ module.exports = { }, bits: { item: 'BITS', - description:

The VBOX currency.
- Colours - 1b
- Skills - 2b
- Specs - 3b
- At the beginning of each round you receive 30 bits.

, + description:

Currency to buy items.
At the beginning of each round you receive 30 bits.

, }, ready: { item: 'READY', diff --git a/client/src/events.jsx b/client/src/events.jsx index 0f1beaad..f852313c 100644 --- a/client/src/events.jsx +++ b/client/src/events.jsx @@ -182,7 +182,7 @@ function registerEvents(store) { store.dispatch(actions.setActiveSkill(null)); store.dispatch(actions.setInfo(null)); store.dispatch(actions.setItemUnequip([])); - store.dispatch(actions.setVboxSelected({ shopSelect: [], stashSelect: [] })); + store.dispatch(actions.setVboxSelected({ storeSelect: [], stashSelect: [] })); } function setAccountInstances(v) { diff --git a/client/src/keyboard.jsx b/client/src/keyboard.jsx index e12c6366..43d7343b 100644 --- a/client/src/keyboard.jsx +++ b/client/src/keyboard.jsx @@ -9,7 +9,7 @@ function setupKeys(store) { key('esc', () => store.dispatch(actions.setActiveSkill(null))); key('esc', () => store.dispatch(actions.setInfo(null))); key('esc', () => store.dispatch(actions.setItemUnequip([]))); - key('esc', () => store.dispatch(actions.setVboxSelected({ shopSelect: [], stashSelect: [] }))); + key('esc', () => store.dispatch(actions.setVboxSelected({ storeSelect: [], stashSelect: [] }))); key('esc', () => store.dispatch(actions.setMtxActive(null))); } diff --git a/client/src/reducers.jsx b/client/src/reducers.jsx index 1afff50b..3dcb0670 100644 --- a/client/src/reducers.jsx +++ b/client/src/reducers.jsx @@ -56,7 +56,7 @@ module.exports = { tutorial: createReducer(1, 'SET_TUTORIAL'), tutorialGame: createReducer(1, 'SET_TUTORIAL_GAME'), - vboxSelected: createReducer({ shopSelect: [], stashSelect: [] }, 'SET_VBOX_SELECTED'), + vboxSelected: createReducer({ storeSelect: [], stashSelect: [] }, 'SET_VBOX_SELECTED'), ws: createReducer(null, 'SET_WS'), }; From 672644514dd6efc8ed1e85a8e7bf6257a3e14756 Mon Sep 17 00:00:00 2001 From: Mashy Date: Fri, 22 Nov 2019 10:35:17 +1000 Subject: [PATCH 28/67] 1150px text size breakpoint --- client/assets/styles/styles.less | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/client/assets/styles/styles.less b/client/assets/styles/styles.less index 202674b2..e4e9264a 100644 --- a/client/assets/styles/styles.less +++ b/client/assets/styles/styles.less @@ -258,6 +258,17 @@ figure.gray { } } +@media (max-width: 1150px) { + #mnml { + font-size: 60%; + } + + svg { + height: 1em; + } +} + + .mobile-title { display: none; } From d4f2f9623f3e23b7aa661e9fccbaa77f4cc0adcb Mon Sep 17 00:00:00 2001 From: ntr Date: Fri, 22 Nov 2019 12:47:46 +1100 Subject: [PATCH 29/67] wi --- WORKLOG.md | 20 +++++- client/assets/styles/instance.less | 2 +- client/assets/styles/styles.less | 2 +- client/assets/styles/vbox.less | 80 ++++++++++++------------ client/src/components/vbox.combiner.jsx | 16 +++-- client/src/components/vbox.component.jsx | 70 ++++++++++----------- client/src/components/vbox.stash.jsx | 4 +- client/src/components/vbox.store.jsx | 14 ++--- 8 files changed, 107 insertions(+), 101 deletions(-) diff --git a/WORKLOG.md b/WORKLOG.md index f6df3063..daaaefb6 100644 --- a/WORKLOG.md +++ b/WORKLOG.md @@ -12,6 +12,22 @@ _ntr_ * animation effects * vbox combine / buy / equip etc * background music +* effects rework + +Siphon = +[ + DamageBlue(50%), + Apply( + Siphon(2T) + - Siphoning(2T) + ), +] + +Hexagon Set +- Pick Colour +- Random Walk +- Draw hex +- Increase intensity for each visit _mashy_ * buy from preview if you have the required bases in vbox / inventory @@ -53,9 +69,9 @@ _tba_ - Strike + SpeedRR -> StrikeSpeed (strike has Y% more speed) - Strike + LifeRR -> StrikeLife (Strike recharges X% of damage as red life) - - Can also work as module style passive keystones + - Can also work as module style passive keystones * troll life -> dmg -> Invert life spec? - * prince of peace + * prince of peace * bonus healing / no damage -> Heal power spec? * fuck magic -> Some sort of reflect spec? * empower on ko -> Amplify + Power spec diff --git a/client/assets/styles/instance.less b/client/assets/styles/instance.less index 26bee42c..76e68884 100644 --- a/client/assets/styles/instance.less +++ b/client/assets/styles/instance.less @@ -5,7 +5,7 @@ .instance { overflow: hidden; display: grid; - grid-template-columns: min-content minmax(min-content, 1fr); + grid-template-columns: 3fr minmax(min-content, 6fr); grid-template-rows: min-content 1fr; grid-template-areas: diff --git a/client/assets/styles/styles.less b/client/assets/styles/styles.less index e4e9264a..72ab973c 100644 --- a/client/assets/styles/styles.less +++ b/client/assets/styles/styles.less @@ -125,7 +125,7 @@ button, input { font-family: 'Jura'; color: whitesmoke; height: auto; - border-width: 0.1em; + border-width: 0.2em; border-color: @gray-exists; letter-spacing: 0.25em; box-sizing: border-box; diff --git a/client/assets/styles/vbox.less b/client/assets/styles/vbox.less index 411dae51..c4d5c6cd 100644 --- a/client/assets/styles/vbox.less +++ b/client/assets/styles/vbox.less @@ -2,40 +2,38 @@ align-content: space-between; grid-area: vbox; display: grid; - grid-template-rows: 9.5em 2.5em 4.5em min-content; - grid-template-columns: 8em 24em; + grid-template-rows: 1fr min-content; + grid-template-columns: 1fr 3fr; grid-template-areas: "store-hdr store" - "stash-hdr store" - "stash stash" - "refund combiner"; + "stash-hdr stash" + "refund combiner"; margin-bottom: 1em; line-height: 0; - .vbox-padding { - margin-left: 0.5em; - margin-bottom: 0.5em; - margin-top: 0.5em; - margin-right: 0.5em; + // immediate children + > div { + padding: 0.5em; } .store { grid-area: store; - border-bottom: 0.1em solid @gray-exists; - border-right: 0.1em solid @gray-exists; - border-top: 0.1em solid @gray-exists; + border-right: 0.2em solid @gray-exists; + border-top: 0.2em solid @gray-exists; } .store-hdr { grid-area: store-hdr; - border-bottom: 0.1em solid @gray-exists; - border-left: 0.1em solid @gray-exists; - border-top: 0.1em solid @gray-exists; + display: flex; + flex-flow: column; + text-align: center; + border-left: 0.2em solid @gray-exists; + border-top: 0.2em solid @gray-exists; + button { - margin-top: 0.5em; + margin: 1em 0 0 0; line-height: 1.6; - height: 4em; letter-spacing: 0.1em; background-color: #421010; &:hover { @@ -47,18 +45,17 @@ .combiner { grid-area: combiner; - border-top: 0.1em solid @gray-exists; - border-left: 0.1em solid @gray-exists; display: flex; flex-direction: column; - + + padding: 0.5em 0 0 0; + .vbox-padding { margin-right: 0em; margin-bottom: 0em; } button { - height: 3em; letter-spacing: 0.1em; background-color: #996100; &[disabled] { @@ -66,35 +63,42 @@ }; } } - + .stash { grid-area: stash; - .vbox-padding { - display: grid; - grid-template-columns: repeat(4, 1fr); - grid-gap: 0.5em 1em; - align-items: center; - } - border-right: 0.1em solid @gray-exists; - border-left: 0.1em solid @gray-exists; + display: grid; + grid-template-columns: repeat(4, 1fr); + grid-gap: 0.5em 1em; + + align-items: center; + padding: 0.5em; + border: 0.2em solid @gray-exists; + border-left: 0; } .stash-hdr { + display: flex; + flex-flow: column; + justify-content: center; + grid-area: stash-hdr; - border-left: 0.1em solid @gray-exists; - border-right: 0.1em solid @gray-exists; text-align: center; + border: 0.2em solid @gray-exists; + border-right: 0; } .refund { + padding: 0.5em 0.5em 0 0; + button { line-height: 1.4; - height: 3em; letter-spacing: 0.1em; background-color: #996100; } - border-left: 0.1em solid @gray-exists; - border-bottom: 0.1em solid @gray-exists; + + .vbox-padding { + padding-left: 0; + } } .vbox-hdr { @@ -115,14 +119,12 @@ grid-template-columns: repeat(3, 1fr); grid-gap: 0.5em 1em; align-items: center; - margin-bottom: 0.5em; } .vbox-btn { width: 100%; margin: 0; background-color: @gray-box; - height: 3em; line-height: 1em; border-width: 0; @@ -153,7 +155,7 @@ } button { - height: 3.25em; + height: 4.5em; margin: 0; width: 100%; diff --git a/client/src/components/vbox.combiner.jsx b/client/src/components/vbox.combiner.jsx index 4b8ab14e..e1514e1f 100644 --- a/client/src/components/vbox.combiner.jsx +++ b/client/src/components/vbox.combiner.jsx @@ -52,15 +52,13 @@ function combinerBtn(props) { } return (
-
- -
+
); } diff --git a/client/src/components/vbox.component.jsx b/client/src/components/vbox.component.jsx index 819c43b5..e5286807 100644 --- a/client/src/components/vbox.component.jsx +++ b/client/src/components/vbox.component.jsx @@ -177,27 +177,25 @@ class Vbox extends preact.Component { function storeHdr() { return (
-
-

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

-
vboxHover(e, 'bits')}> -

{vbox.bits}b

-
- +

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

+
vboxHover(e, 'bits')}> +

{vbox.bits}b

+
); } @@ -205,11 +203,9 @@ class Vbox extends preact.Component { function stashHdr() { return (
-
-

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

-
+

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

); } @@ -221,19 +217,17 @@ class Vbox extends preact.Component { && instance.time_control === 'Practice' && instance.rounds.length === 1; return (
-
- -
+
); } diff --git a/client/src/components/vbox.stash.jsx b/client/src/components/vbox.stash.jsx index 2aad03f0..4ed23fd7 100644 --- a/client/src/components/vbox.stash.jsx +++ b/client/src/components/vbox.stash.jsx @@ -99,9 +99,7 @@ function stashElement(props) { onDragOver={ev => ev.preventDefault()} onDrop={stashClick} > -
- {range(0, 4).map(i => stashBtn(vbox.bound[i], i))} -
+ {range(0, 4).map(i => stashBtn(vbox.bound[i], i))}
); } diff --git a/client/src/components/vbox.store.jsx b/client/src/components/vbox.store.jsx index 64d4e5fc..20a5a402 100644 --- a/client/src/components/vbox.store.jsx +++ b/client/src/components/vbox.store.jsx @@ -65,14 +65,12 @@ function storeElement(props) { return (
e.stopPropagation()}> -
-
- {range(0, 6).map(i => availableBtn(vbox.free[0][i], 0, i))} -
-
- {range(0, 3).map(i => availableBtn(vbox.free[1][i], 1, i))} - {range(0, 3).map(i => availableBtn(vbox.free[2][i], 2, i))} -
+
+ {range(0, 6).map(i => availableBtn(vbox.free[0][i], 0, i))} +
+
+ {range(0, 3).map(i => availableBtn(vbox.free[1][i], 1, i))} + {range(0, 3).map(i => availableBtn(vbox.free[2][i], 2, i))}
); From 5f2ee673b258da1ef4101f4b42511ef26c661f1e Mon Sep 17 00:00:00 2001 From: Mashy Date: Fri, 22 Nov 2019 12:52:23 +1000 Subject: [PATCH 30/67] 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 31/67] 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 32/67] 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 33/67] 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 2d3c6cd18c316cb57de5422ad31dda4e9afdc142 Mon Sep 17 00:00:00 2001 From: ntr Date: Fri, 22 Nov 2019 16:26:43 +1100 Subject: [PATCH 34/67] SIX size stash --- client/assets/styles/instance.less | 2 +- client/assets/styles/vbox.less | 25 +++++++++------ client/src/components/vbox.combiner.jsx | 2 +- client/src/components/vbox.component.jsx | 41 +++++++++++------------- client/src/components/vbox.stash.jsx | 2 +- server/src/vbox.rs | 6 ++-- 6 files changed, 41 insertions(+), 37 deletions(-) diff --git a/client/assets/styles/instance.less b/client/assets/styles/instance.less index 76e68884..055ee56e 100644 --- a/client/assets/styles/instance.less +++ b/client/assets/styles/instance.less @@ -5,7 +5,7 @@ .instance { overflow: hidden; display: grid; - grid-template-columns: 3fr minmax(min-content, 6fr); + grid-template-columns: 1fr minmax(min-content, 1fr); grid-template-rows: min-content 1fr; grid-template-areas: diff --git a/client/assets/styles/vbox.less b/client/assets/styles/vbox.less index c4d5c6cd..8534d374 100644 --- a/client/assets/styles/vbox.less +++ b/client/assets/styles/vbox.less @@ -2,12 +2,11 @@ align-content: space-between; grid-area: vbox; display: grid; - grid-template-rows: 1fr min-content; - grid-template-columns: 1fr 3fr; + grid-template-rows: 3fr 2fr; + grid-template-columns: 1fr 4fr 1fr; grid-template-areas: - "store-hdr store" - "stash-hdr stash" - "refund combiner"; + "store-hdr store combiner" + "stash-hdr stash combiner"; margin-bottom: 1em; line-height: 0; @@ -48,7 +47,7 @@ display: flex; flex-direction: column; - padding: 0.5em 0 0 0; + padding: 0; .vbox-padding { margin-right: 0em; @@ -58,20 +57,24 @@ button { letter-spacing: 0.1em; background-color: #996100; + border-radius: 0; + border: 0; &[disabled] { - color: #996100; + border: 0.2em solid @gray-exists; + border-left: 0; }; + + transition-property: 0; } } .stash { grid-area: stash; display: grid; - grid-template-columns: repeat(4, 1fr); + grid-template-columns: repeat(3, 1fr); grid-gap: 0.5em 1em; align-items: center; - padding: 0.5em; border: 0.2em solid @gray-exists; border-left: 0; } @@ -85,6 +88,10 @@ text-align: center; border: 0.2em solid @gray-exists; border-right: 0; + + h3 { + margin-bottom: 2.5em; + } } .refund { diff --git a/client/src/components/vbox.combiner.jsx b/client/src/components/vbox.combiner.jsx index e1514e1f..48277f3e 100644 --- a/client/src/components/vbox.combiner.jsx +++ b/client/src/components/vbox.combiner.jsx @@ -34,7 +34,7 @@ function combinerBtn(props) { let bits = 0; storeSelect.forEach(item => bits += item[0] + 1); text = bits - ? `Buy ${comboItem} - ${bits}b` + ? `${comboItem} - ${bits}b` : `Combine - ${comboItem}`; if (vbox.bits >= bits) mouseEvent = sendVboxCombine; } else if (stashSelect.length === 0 && storeSelect.length === 1) { diff --git a/client/src/components/vbox.component.jsx b/client/src/components/vbox.component.jsx index e5286807..9d3f124c 100644 --- a/client/src/components/vbox.component.jsx +++ b/client/src/components/vbox.component.jsx @@ -201,33 +201,31 @@ class Vbox extends preact.Component { } function stashHdr() { - return ( -
-

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

-
- ); - } - function refundBtn() { const refund = storeSelect.length === 0 && stashSelect.length === 1 ? itemInfo.items.find(i => i.item === vbox.bound[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}
); } @@ -237,7 +235,6 @@ class Vbox extends preact.Component {
{storeHdr()} {stashHdr()} - {refundBtn()} ev.preventDefault()} onDrop={stashClick} > - {range(0, 4).map(i => stashBtn(vbox.bound[i], i))} + {range(0, 6).map(i => stashBtn(vbox.bound[i], i))}
); } diff --git a/server/src/vbox.rs b/server/src/vbox.rs index a419a6f1..8f8f37a4 100644 --- a/server/src/vbox.rs +++ b/server/src/vbox.rs @@ -100,7 +100,7 @@ impl Vbox { } pub fn accept(&mut self, i: usize, j: usize, construct_id: Option) -> Result<&mut Vbox, Error> { - if self.bound.len() >= 4 && !construct_id.is_some() { + if self.bound.len() >= 6 && !construct_id.is_some() { return Err(err_msg("too many items bound")); } @@ -150,7 +150,7 @@ impl Vbox { for vi in vbox_indicies.iter() { inv_indices.push(self.bound.len()); self.accept(vi[0], vi[1], Some(Uuid::nil()))?; - } + } // have to sort the indices and keep track of the iteration // because when removing the elements the array shifts @@ -171,7 +171,7 @@ impl Vbox { self.bound.push(combo.item); // self.bound.sort_unstable(); - if self.bound.len() >= 5 { + if self.bound.len() >= 6 { return Err(err_msg("too many items bound")); } Ok(self) From 3a0692a2a5a9c6d8ba4282a14b1d55cb08bfc385 Mon Sep 17 00:00:00 2001 From: ntr Date: Fri, 22 Nov 2019 16:36:11 +1100 Subject: [PATCH 35/67] resize stuff --- client/assets/styles/vbox.less | 20 ++++++++++++-------- client/src/components/vbox.combiner.jsx | 2 +- client/src/components/vbox.component.jsx | 2 +- 3 files changed, 14 insertions(+), 10 deletions(-) diff --git a/client/assets/styles/vbox.less b/client/assets/styles/vbox.less index 8534d374..a48ebad0 100644 --- a/client/assets/styles/vbox.less +++ b/client/assets/styles/vbox.less @@ -17,8 +17,8 @@ .store { grid-area: store; - border-right: 0.2em solid @gray-exists; - border-top: 0.2em solid @gray-exists; + border-right: 0.1em solid @gray; + border-top: 0.1em solid @gray; } .store-hdr { @@ -27,8 +27,12 @@ flex-flow: column; text-align: center; - border-left: 0.2em solid @gray-exists; - border-top: 0.2em solid @gray-exists; + border-left: 0.1em solid @gray; + border-top: 0.1em solid @gray; + + h1 { + margin-bottom: 0; + } button { margin: 1em 0 0 0; @@ -60,7 +64,7 @@ border-radius: 0; border: 0; &[disabled] { - border: 0.2em solid @gray-exists; + border: 0.1em solid @gray; border-left: 0; }; @@ -75,7 +79,7 @@ grid-gap: 0.5em 1em; align-items: center; - border: 0.2em solid @gray-exists; + border: 0.1em solid @gray; border-left: 0; } @@ -86,7 +90,7 @@ grid-area: stash-hdr; text-align: center; - border: 0.2em solid @gray-exists; + border: 0.1em solid @gray; border-right: 0; h3 { @@ -162,7 +166,7 @@ } button { - height: 4.5em; + height: 3.5em; margin: 0; width: 100%; diff --git a/client/src/components/vbox.combiner.jsx b/client/src/components/vbox.combiner.jsx index 48277f3e..e1514e1f 100644 --- a/client/src/components/vbox.combiner.jsx +++ b/client/src/components/vbox.combiner.jsx @@ -34,7 +34,7 @@ function combinerBtn(props) { let bits = 0; storeSelect.forEach(item => bits += item[0] + 1); text = bits - ? `${comboItem} - ${bits}b` + ? `Buy ${comboItem} - ${bits}b` : `Combine - ${comboItem}`; if (vbox.bits >= bits) mouseEvent = sendVboxCombine; } else if (stashSelect.length === 0 && storeSelect.length === 1) { diff --git a/client/src/components/vbox.component.jsx b/client/src/components/vbox.component.jsx index 9d3f124c..e51b94be 100644 --- a/client/src/components/vbox.component.jsx +++ b/client/src/components/vbox.component.jsx @@ -182,7 +182,7 @@ class Vbox extends preact.Component { onMouseOver={e => vboxHover(e, 'store')}> STORE
vboxHover(e, 'bits')}> -

{vbox.bits}b

+

{vbox.bits}b

+
+ ); } - 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 41/67] 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 42/67] 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 43/67] 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 44/67] 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 45/67] 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 46/67] 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 47/67] 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 48/67] 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 ( -
); } From 734132974bf245bf72f0c3fff0919b35a40769bb Mon Sep 17 00:00:00 2001 From: ntr Date: Sun, 24 Nov 2019 22:17:06 +1100 Subject: [PATCH 61/67] info back --- client/assets/styles/vbox.less | 20 +- client/src/components/vbox.combos.jsx | 144 +++++++++ client/src/components/vbox.component.jsx | 6 +- client/src/components/vbox.info.jsx | 359 ++++++++--------------- 4 files changed, 275 insertions(+), 254 deletions(-) create mode 100644 client/src/components/vbox.combos.jsx diff --git a/client/assets/styles/vbox.less b/client/assets/styles/vbox.less index 582899a0..963e16b4 100644 --- a/client/assets/styles/vbox.less +++ b/client/assets/styles/vbox.less @@ -3,12 +3,11 @@ grid-area: vbox; display: grid; grid-template-rows: 3fr 2fr; - grid-template-columns: 1fr 4fr 6fr min-content; // =\ + grid-template-columns: 1fr 4fr 6fr 17em; // =\ grid-template-areas: "store-hdr store info combos" "stash-hdr stash combiner combos"; margin-bottom: 1em; - line-height: 0; // immediate children > div { @@ -198,23 +197,6 @@ margin-left: 1em; grid-area: info; - display: grid; - grid-template-columns: 1fr min-content; - grid-template-areas: - "details combos"; - - .info-details { - grid-area: details; - display: grid; - grid-template-rows: 1fr min-content; - grid-template-areas: - "item" - "combiner"; - - .info-item { - grid-area: item; - } - } } .combiner { diff --git a/client/src/components/vbox.combos.jsx b/client/src/components/vbox.combos.jsx new file mode 100644 index 00000000..c822af1c --- /dev/null +++ b/client/src/components/vbox.combos.jsx @@ -0,0 +1,144 @@ +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 actions = require('../actions'); + +const addState = connect( + function receiveState(state) { + const { + ws, + info, + itemInfo, + itemUnequip, + instance, + player, + account, + tutorial, + 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, + itemInfo, + itemUnequip, + instance, + player, + account, + tutorial, + vboxSelected, + sendVboxAccept, + sendVboxCombine, + }; + } +); + +function Combos(args) { + const { + // Variables that will change + info, + itemUnequip, + 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 + sendVboxAccept, + sendVboxCombine, + 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; + }; + let vboxInfo = false; + if (itemUnequip.length) [, vboxInfo] = itemUnequip; + else if (stashSelect.length > 0 || storeSelect.length > 0) vboxInfo = checkVboxInfo(); + + 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} +
+ ); +} + +module.exports = addState(Combos); diff --git a/client/src/components/vbox.component.jsx b/client/src/components/vbox.component.jsx index bf5391aa..2f808f08 100644 --- a/client/src/components/vbox.component.jsx +++ b/client/src/components/vbox.component.jsx @@ -252,7 +252,10 @@ class Vbox extends preact.Component { setInfo = {setInfo} setVboxSelected = {setVboxSelected} /> -
+ -
); } diff --git a/client/src/components/vbox.info.jsx b/client/src/components/vbox.info.jsx index f8ea6157..3936260d 100644 --- a/client/src/components/vbox.info.jsx +++ b/client/src/components/vbox.info.jsx @@ -61,255 +61,148 @@ const addState = connect( } ); -class InfoComponent extends preact.Component { - shouldComponentUpdate(newProps, newState) { - if (newProps.info !== this.props.info) return true; - if (newProps.itemUnequip !== this.props.itemUnequip) return true; - if (newProps.tutorial !== this.props.tutorial) return true; - if (newProps.vboxHighlight !== this.props.vboxHighlight) return true; - if (newProps.vboxSelected !== this.props.vboxSelected) return true; - if (newState.comboItem !== this.state.comboItem) return true; +function Info(args) { + const { + // Variables that will change + info, + itemUnequip, + 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 + sendVboxAccept, + sendVboxCombine, + 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; + }; + let vboxInfo = false; + if (itemUnequip.length) [, vboxInfo] = itemUnequip; + else if (stashSelect.length > 0 || storeSelect.length > 0) vboxInfo = checkVboxInfo(); + + if (tutorial) { + const tutorialStageInfo = tutorialStage(tutorial, ws, setTutorialNull, instance); + if (tutorialStageInfo) return tutorialStageInfo; } - 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, - itemUnequip, - 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 - sendVboxAccept, - sendVboxCombine, - 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; + 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 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; - }; - let vboxInfo = false; - if (itemUnequip.length) [, vboxInfo] = itemUnequip; - else if (stashSelect.length > 0 || storeSelect.length > 0) vboxInfo = checkVboxInfo(); + const itemSource = itemInfo.combos.filter(c => c.item === removeTier(fullInfo.item)); - function Info() { - if (tutorial) { - const tutorialStageInfo = tutorialStage(tutorial, ws, setTutorialNull, instance); - if (tutorialStageInfo) return tutorialStageInfo; + 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]()); } - 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 cooldown = isSkill && fullInfo.cooldown ?
{fullInfo.cooldown} Turn delay
: null; - const itemSource = itemInfo.combos.filter(c => c.item === removeTier(fullInfo.item)); + const speed = isSkill + ?
Speed {shapes.SpeedStat()} multiplier {fullInfo.speed * 4}%
+ : null; - let itemSourceInfo = itemSource.length && !isSpec - ? `${itemSource[0].components[0]} ${itemSource[0].components[1]} ${itemSource[0].components[2]}` - : false; + const thresholds = isSpec ? specThresholds(player, fullInfo, info) : null; - 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 stateFullInfo = comboItem || vboxInfo; - if (stateFullInfo) return genItemInfo(stateFullInfo); - 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. -

-
- ); - } - - return genItemInfo(info); + return ( +
+

{infoName}

+ {header} + {itemSourceInfo} + {cooldown} + {itemDescription()} + {speed} + {thresholds} +
+ ); } - - 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} -
- ); - }; - - 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 })}> -
- - -
-
- +
+

{fullInfo.item}

+ {itemDescription()}
); } + const stateFullInfo = comboItem || vboxInfo; + if (stateFullInfo) return genItemInfo(stateFullInfo); + 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. +

+
+ ); + } + + return genItemInfo(info); } -module.exports = addState(InfoComponent); +module.exports = addState(Info); From bbdc89ed7ffc898f66bc6ecf0de94221e0071128 Mon Sep 17 00:00:00 2001 From: ntr Date: Sun, 24 Nov 2019 22:19:39 +1100 Subject: [PATCH 62/67] remove fns --- client/src/components/vbox.info.jsx | 13 ------------- 1 file changed, 13 deletions(-) diff --git a/client/src/components/vbox.info.jsx b/client/src/components/vbox.info.jsx index 3936260d..452f268d 100644 --- a/client/src/components/vbox.info.jsx +++ b/client/src/components/vbox.info.jsx @@ -25,15 +25,6 @@ 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, @@ -44,8 +35,6 @@ const addState = connect( account, tutorial, vboxSelected, - sendVboxAccept, - sendVboxCombine, }; }, @@ -75,8 +64,6 @@ function Info(args) { itemInfo, instance, // Only used for instance id // functions - sendVboxAccept, - sendVboxCombine, setTutorialNull, } = args; const { comboItem } = this.state; From 046c065bbdf4cb34084f9b9a9f1ddff86e883da0 Mon Sep 17 00:00:00 2001 From: ntr Date: Sun, 24 Nov 2019 22:23:22 +1100 Subject: [PATCH 63/67] big btn --- client/assets/styles/vbox.less | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/client/assets/styles/vbox.less b/client/assets/styles/vbox.less index 963e16b4..890c1431 100644 --- a/client/assets/styles/vbox.less +++ b/client/assets/styles/vbox.less @@ -201,7 +201,8 @@ .combiner { grid-area: combiner; - align-self: flex-end; + // align-self: flex-end; + height: 100%; margin: 0 0.5em; line-height: 1.3; font-size: 1.25em; From 8b7003fb324de98015479e93190422909be1a8bb Mon Sep 17 00:00:00 2001 From: ntr Date: Sun, 24 Nov 2019 22:41:14 +1100 Subject: [PATCH 64/67] mobile styles --- client/assets/styles/player.less | 1 + client/assets/styles/styles.mobile.less | 12 ++++++++++++ 2 files changed, 13 insertions(+) diff --git a/client/assets/styles/player.less b/client/assets/styles/player.less index d731e418..bdcf2477 100644 --- a/client/assets/styles/player.less +++ b/client/assets/styles/player.less @@ -42,6 +42,7 @@ .msg { grid-area: msg; + text-transform: uppercase; color: @white; } diff --git a/client/assets/styles/styles.mobile.less b/client/assets/styles/styles.mobile.less index dffb0b82..fa246be1 100644 --- a/client/assets/styles/styles.mobile.less +++ b/client/assets/styles/styles.mobile.less @@ -42,6 +42,18 @@ padding: 0.25em; } + .info { + display: none; + } + + .combos { + display: none; + } + + .combiner { + margin: 0; + } + .stash { border: 0; border-top: 0.1em solid @gray; From 4df4f3a785ffb55eda7cb77c035ef47b530fef43 Mon Sep 17 00:00:00 2001 From: ntr Date: Sun, 24 Nov 2019 23:08:35 +1100 Subject: [PATCH 65/67] fix remaining px borders --- client/assets/styles/account.less | 2 +- client/assets/styles/controls.less | 6 +- client/assets/styles/instance.less | 2 +- client/assets/styles/menu.less | 2 +- client/assets/styles/styles.mobile.less | 179 ++++++++++++------------ client/assets/styles/vbox.less | 16 +-- 6 files changed, 102 insertions(+), 105 deletions(-) diff --git a/client/assets/styles/account.less b/client/assets/styles/account.less index a52e6e5b..c920c8dc 100644 --- a/client/assets/styles/account.less +++ b/client/assets/styles/account.less @@ -44,7 +44,7 @@ } &[disabled] { - border: 1px solid @yellow; + border: 0.1em solid @yellow; color: @yellow; background: black; } diff --git a/client/assets/styles/controls.less b/client/assets/styles/controls.less index 9fb1cd13..a5938475 100644 --- a/client/assets/styles/controls.less +++ b/client/assets/styles/controls.less @@ -150,13 +150,13 @@ aside { &:hover { color: @red; border-color: @red; - border: 2px solid @red; + border: 0.1em solid @red; }; &:active, &.confirming { background: @red; color: black; - border: 2px solid @red; + border: 0.1em solid @red; } } @@ -164,7 +164,7 @@ aside { &:active, &.confirming { background: @gray-hover; color: black; - border: 2px solid @gray-hover; + border: 0.1em solid @gray-hover; } } diff --git a/client/assets/styles/instance.less b/client/assets/styles/instance.less index fa1e1485..52ad8fea 100644 --- a/client/assets/styles/instance.less +++ b/client/assets/styles/instance.less @@ -40,7 +40,7 @@ "stats "; /*padding: 0.5em;*/ - border: 2px solid #222; + border: 0.1em solid #222; border-left-width: 0; &:first-child { margin-left: 0; diff --git a/client/assets/styles/menu.less b/client/assets/styles/menu.less index 1ce06f73..e197781e 100644 --- a/client/assets/styles/menu.less +++ b/client/assets/styles/menu.less @@ -74,7 +74,7 @@ button { flex: 1; border-top: 0; - border: 2px solid #222; + border: 0.1em solid #222; &:not(:last-child) { border-right: 0; } diff --git a/client/assets/styles/styles.mobile.less b/client/assets/styles/styles.mobile.less index fa246be1..9fa19971 100644 --- a/client/assets/styles/styles.mobile.less +++ b/client/assets/styles/styles.mobile.less @@ -20,99 +20,10 @@ } } - .info { - display: none; - .combos { - display: none; - } - } svg { stroke-width: 1.25em; } - .vbox { - grid-template-rows: min-content min-content 1fr; - grid-template-columns: min-content 1fr min-content 1fr; - grid-template-areas: - "store-hdr store-hdr stash-hdr stash-hdr" - "store store stash stash" - "store store combiner combiner"; - - > div { - padding: 0.25em; - } - - .info { - display: none; - } - - .combos { - display: none; - } - - .combiner { - margin: 0; - } - - .stash { - border: 0; - border-top: 0.1em solid @gray; - border-right: 0.1em solid @gray; - border-bottom: 0.1em solid @gray; - } - - .stash-hdr { - border: 0; - border-left: 0.1em solid @gray; - border-right: 0.1em solid @gray; - - display: grid; - grid-template-rows: min-content min-content; - grid-template-columns: 1fr 1fr; - - h3 { - margin: 0; - } - } - - .store { - border: 0; - border-top: 0.1em solid @gray; - border-bottom: 0.1em solid @gray; - border-right: 0.1em solid @gray; - } - - .store-hdr { - display: grid; - grid-template-columns: min-content min-content 1fr; - - > * { - margin-right: 1em; - } - - grid-template-areas: - "hdr bits btn"; - - h1 { - grid-area: hdr; - margin-bottom: 0.25em; - } - - .bits { - grid-area: bits; - } - - button { - grid-area: btn; - } - } - - .store-hdr, .stash-hdr { - button { - margin: 0; - } - } - } } .game { @@ -286,7 +197,7 @@ grid-template-columns: repeat(2, 1fr); button:not(:last-child) { - border: 2px solid #222; + border: 0.1em solid #222; } button.logo { @@ -324,4 +235,90 @@ grid-template-columns: 1fr; } } -} \ No newline at end of file +} + +@media (max-width: 600px) { + .vbox { + grid-template-rows: min-content min-content 1fr; + grid-template-columns: min-content 1fr min-content 1fr; + grid-template-areas: + "store-hdr store-hdr stash-hdr stash-hdr" + "store store stash stash" + "store store combiner combiner"; + + > div { + padding: 0.25em; + } + + .info { + display: none; + } + + .combos { + display: none; + } + + .combiner { + margin: 0; + } + + .stash { + border: 0; + border-top: 0.1em solid @gray; + border-right: 0.1em solid @gray; + border-bottom: 0.1em solid @gray; + } + + .stash-hdr { + border: 0; + border-left: 0.1em solid @gray; + border-right: 0.1em solid @gray; + + display: grid; + grid-template-rows: min-content min-content; + grid-template-columns: 1fr 1fr; + + h3 { + margin: 0; + } + } + + .store { + border: 0; + border-top: 0.1em solid @gray; + border-bottom: 0.1em solid @gray; + border-right: 0.1em solid @gray; + } + + .store-hdr { + display: grid; + grid-template-columns: min-content min-content 1fr; + + > * { + margin-right: 1em; + } + + grid-template-areas: + "hdr bits btn"; + + h1 { + grid-area: hdr; + margin-bottom: 0.25em; + } + + .bits { + grid-area: bits; + } + + button { + grid-area: btn; + } + } + + .store-hdr, .stash-hdr { + button { + margin: 0; + } + } + } +} diff --git a/client/assets/styles/vbox.less b/client/assets/styles/vbox.less index 890c1431..88ec13fc 100644 --- a/client/assets/styles/vbox.less +++ b/client/assets/styles/vbox.less @@ -116,7 +116,7 @@ &, &:hover, &:active { background: @red; color: black; - border: 2px solid black; + border: 0.1em solid black; } } svg { @@ -207,9 +207,9 @@ line-height: 1.3; font-size: 1.25em; letter-spacing: 0.1em; - border: 2px solid @gray-exists; + border: 0.1em solid @gray-exists; &:hover { - border: 2px solid @gray-hover; + border: 0.1em solid @gray-hover; } } @@ -273,8 +273,8 @@ } .item { - border-top: 2px solid #222; - border-bottom: 2px solid #222; + border-top: 0.1em solid #222; + border-bottom: 0.1em solid #222; flex: 1; grid-area: item; font-weight: bold; @@ -285,15 +285,15 @@ div { - border-left: 2px solid #222; - border-right: 2px solid #222; + 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: 2px solid #222; + border-bottom: 0.1em solid #222; } } } From 8a2e8dbab1f2d1df75c8ca6e4c63611caa742a49 Mon Sep 17 00:00:00 2001 From: ntr Date: Sun, 24 Nov 2019 23:34:43 +1100 Subject: [PATCH 66/67] that'll do --- client/assets/styles/styles.mobile.less | 2 +- client/assets/styles/vbox.less | 2 +- client/src/components/mnml.jsx | 2 +- client/src/components/vbox.combos.jsx | 3 --- client/src/components/vbox.info.thresholds.jsx | 1 + 5 files changed, 4 insertions(+), 6 deletions(-) diff --git a/client/assets/styles/styles.mobile.less b/client/assets/styles/styles.mobile.less index 9fa19971..0c80a7bd 100644 --- a/client/assets/styles/styles.mobile.less +++ b/client/assets/styles/styles.mobile.less @@ -155,7 +155,7 @@ // portrait menu or small size vertical in landscape -@media (max-width: 550px) { +@media (max-width: 550px) and (max-height: 800px) { #mnml { grid-template-columns: 1fr; grid-template-rows: 1fr; diff --git a/client/assets/styles/vbox.less b/client/assets/styles/vbox.less index 88ec13fc..5cd15f33 100644 --- a/client/assets/styles/vbox.less +++ b/client/assets/styles/vbox.less @@ -3,7 +3,7 @@ grid-area: vbox; display: grid; grid-template-rows: 3fr 2fr; - grid-template-columns: 1fr 4fr 6fr 17em; // =\ + grid-template-columns: 1fr 4fr 6fr minmax(min-content, 17em); // =\ grid-template-areas: "store-hdr store info combos" "stash-hdr stash combiner combos"; diff --git a/client/src/components/mnml.jsx b/client/src/components/mnml.jsx index 7a5e94e0..cb3c6991 100644 --- a/client/src/components/mnml.jsx +++ b/client/src/components/mnml.jsx @@ -15,7 +15,7 @@ function Mnml(args) { instance, } = args; - const rotateClass = (game || instance) && window.innerWidth < window.innerHeight + const rotateClass = (game || instance) && window.innerHeight < 600 && window.innerWidth < window.innerHeight ? 'show' : ''; diff --git a/client/src/components/vbox.combos.jsx b/client/src/components/vbox.combos.jsx index c822af1c..410252d0 100644 --- a/client/src/components/vbox.combos.jsx +++ b/client/src/components/vbox.combos.jsx @@ -3,10 +3,7 @@ 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 actions = require('../actions'); diff --git a/client/src/components/vbox.info.thresholds.jsx b/client/src/components/vbox.info.thresholds.jsx index 6785380e..9f259f0e 100644 --- a/client/src/components/vbox.info.thresholds.jsx +++ b/client/src/components/vbox.info.thresholds.jsx @@ -3,6 +3,7 @@ const range = require('lodash/range'); const shapes = require('./shapes'); function specThresholds(player, fullInfo, info) { + if (!info) return false; let red = 0; let blue = 0; let green = 0; From ec10d7f890977b114c0264d80467eb28d17b44e5 Mon Sep 17 00:00:00 2001 From: ntr Date: Sun, 24 Nov 2019 23:38:31 +1100 Subject: [PATCH 67/67] fix rotate size --- client/assets/styles/vbox.less | 4 ++-- client/src/components/mnml.jsx | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/client/assets/styles/vbox.less b/client/assets/styles/vbox.less index 5cd15f33..2e3bbde8 100644 --- a/client/assets/styles/vbox.less +++ b/client/assets/styles/vbox.less @@ -2,8 +2,8 @@ align-content: space-between; grid-area: vbox; display: grid; - grid-template-rows: 3fr 2fr; - grid-template-columns: 1fr 4fr 6fr minmax(min-content, 17em); // =\ + grid-template-rows: 3fr minmax(min-content, 2fr); + grid-template-columns: 1fr 4fr 6fr 17em; // =\ grid-template-areas: "store-hdr store info combos" "stash-hdr stash combiner combos"; diff --git a/client/src/components/mnml.jsx b/client/src/components/mnml.jsx index cb3c6991..d1a632ce 100644 --- a/client/src/components/mnml.jsx +++ b/client/src/components/mnml.jsx @@ -15,7 +15,7 @@ function Mnml(args) { instance, } = args; - const rotateClass = (game || instance) && window.innerHeight < 600 && window.innerWidth < window.innerHeight + const rotateClass = (game || instance) && window.innerHeight < 900 && window.innerWidth < window.innerHeight ? 'show' : '';