ntr/mnml
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

shop / vbox -> store

Browse Source
This commit is contained in:
Mashy 2019-11-22 10:34:50 +10:00
parent fba4627bf1
commit 69be938e76
11 changed files with 54 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
client/assets/styles/vbox.less
View File

@ -5,8 +5,8 @@
grid-template-rows: 9.5em 2.5em 4.5em min-content; grid-template-rows: 9.5em 2.5em 4.5em min-content;
grid-template-columns: 8em 24em; grid-template-columns: 8em 24em;
grid-template-areas: grid-template-areas:
"shop-hdr shop" "store-hdr store"
"stash-hdr shop" "stash-hdr store"
"stash stash" "stash stash"
"refund combiner"; "refund combiner";
margin-bottom: 1em; margin-bottom: 1em;
@ -19,15 +19,15 @@
margin-right: 0.5em; margin-right: 0.5em;
} }
.shop { .store {
grid-area: shop; grid-area: store;
border-bottom: 0.1em solid @gray-exists; border-bottom: 0.1em solid @gray-exists;
border-right: 0.1em solid @gray-exists; border-right: 0.1em solid @gray-exists;
border-top: 0.1em solid @gray-exists; border-top: 0.1em solid @gray-exists;
} }
.shop-hdr { .store-hdr {
grid-area: shop-hdr; grid-area: store-hdr;
border-bottom: 0.1em solid @gray-exists; border-bottom: 0.1em solid @gray-exists;
border-left: 0.1em solid @gray-exists; border-left: 0.1em solid @gray-exists;
border-top: 0.1em solid @gray-exists; border-top: 0.1em solid @gray-exists;

2
client/src/components/instance.component.jsx
View File

@ -28,7 +28,7 @@ const addState = connect(
function clearItems() { function clearItems() {
dispatch(actions.setItemUnequip([])); dispatch(actions.setItemUnequip([]));
dispatch(actions.setVboxSelected({ shopSelect: [], stashSelect: [] })); dispatch(actions.setVboxSelected({ storeSelect: [], stashSelect: [] }));
return true; return true;
} }

10
client/src/components/instance.constructs.jsx
View File

@ -25,7 +25,7 @@ const addState = connect(
} = state; } = state;
function sendVboxAcceptEquip(constructId) { 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) { function sendVboxApply(constructId, i) {
@ -60,7 +60,7 @@ const addState = connect(
} }
function setItemUnequip(v) { function setItemUnequip(v) {
dispatch(actions.setVboxSelected({ shopSelect: [], stashSelect: [] })); dispatch(actions.setVboxSelected({ storeSelect: [], stashSelect: [] }));
return dispatch(actions.setItemUnequip(v)); return dispatch(actions.setItemUnequip(v));
} }
@ -91,7 +91,7 @@ function Construct(props) {
const { vbox } = player; 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] ? vboxSelected.stashSelect[0]
: -1; : -1;
@ -106,7 +106,7 @@ function Construct(props) {
e.preventDefault(); e.preventDefault();
if (duplicateSkill || tutorialDisableEquip) return true; if (duplicateSkill || tutorialDisableEquip) return true;
if (itemEquip !== -1) return sendVboxApply(construct.id, itemEquip); 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); if (itemUnequip.length && itemUnequip[0] !== construct.id) return sendVboxUnequipApply(construct.id);
setItemUnequip([]); setItemUnequip([]);
return true; return true;
@ -114,7 +114,7 @@ function Construct(props) {
function hoverInfo(e, info) { function hoverInfo(e, info) {
e.stopPropagation(); e.stopPropagation();
if (!info) return false; 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); return setInfo(info);
} }

12
client/src/components/vbox.combiner.jsx
View File

@ -7,18 +7,18 @@ function combinerBtn(props) {
sendVboxCombine, sendVboxCombine,
setInfo, setInfo,
stashSelect, stashSelect,
shopSelect, storeSelect,
vbox, vbox,
vboxBuySelected, vboxBuySelected,
vboxHighlight, vboxHighlight,
} = props; } = props;
let text = ''; let text = '';
let mouseEvent = false; let mouseEvent = false;
const combineLength = stashSelect.length + shopSelect.length; const combineLength = stashSelect.length + storeSelect.length;
if (vboxHighlight && vboxHighlight.length === 0) { if (vboxHighlight && vboxHighlight.length === 0) {
// The selected items can't be combined with additional items therefore valid combo // The selected items can't be combined with additional items therefore valid combo
const stashItems = stashSelect.map(j => vbox.bound[j]); 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 selectedItems = stashItems.concat(shopItems);
const combinerCount = countBy(selectedItems, co => co); const combinerCount = countBy(selectedItems, co => co);
@ -32,13 +32,13 @@ function combinerBtn(props) {
setInfo(comboItem); setInfo(comboItem);
comboItem = comboItem.replace('Plus', '+'); comboItem = comboItem.replace('Plus', '+');
let bits = 0; let bits = 0;
shopSelect.forEach(item => bits += item[0] + 1); storeSelect.forEach(item => bits += item[0] + 1);
text = bits text = bits
? `Buy ${comboItem} - ${bits}b` ? `Buy ${comboItem} - ${bits}b`
: `Combine - ${comboItem}`; : `Combine - ${comboItem}`;
if (vbox.bits >= bits) mouseEvent = sendVboxCombine; if (vbox.bits >= bits) mouseEvent = sendVboxCombine;
} else if (stashSelect.length === 0 && shopSelect.length === 1) { } else if (stashSelect.length === 0 && storeSelect.length === 1) {
const item = shopSelect[0]; const item = storeSelect[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; mouseEvent = vboxBuySelected;
} else { } else {

36
client/src/components/vbox.component.jsx
View File

@ -31,7 +31,7 @@ const addState = connect(
} }
function sendVboxCombine() { function sendVboxCombine() {
return ws.sendVboxCombine(instance.id, vboxSelected.stashSelect, vboxSelected.shopSelect); return ws.sendVboxCombine(instance.id, vboxSelected.stashSelect, vboxSelected.storeSelect);
} }
function sendVboxReclaim(i) { function sendVboxReclaim(i) {
@ -75,13 +75,13 @@ const addState = connect(
} }
); );
function validVboxSelect(vbox, itemInfo, shopSelect, stashSelect) { function validVboxSelect(vbox, itemInfo, storeSelect, stashSelect) {
if (shopSelect.length === 0 && stashSelect.length === 0) return false; if (storeSelect.length === 0 && stashSelect.length === 0) return false;
const validSelects = []; const validSelects = [];
const stashItems = stashSelect.map(j => vbox.bound[j]); 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 selectedItems = stashItems.concat(shopItems);
const itemCount = countBy(selectedItems, co => co); const itemCount = countBy(selectedItems, co => co);
@ -139,21 +139,21 @@ class Vbox extends preact.Component {
if (!player) return false; if (!player) return false;
const { vbox } = player; const { vbox } = player;
const { shopSelect, stashSelect } = vboxSelected; const { storeSelect, stashSelect } = vboxSelected;
const vboxSelecting = shopSelect.length === 1 && stashSelect.length === 0; const vboxSelecting = storeSelect.length === 1 && stashSelect.length === 0;
function combinerChange(newStashSelect) { 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 // VBOX
// //
function vboxHover(e, v) { function vboxHover(e, v) {
if (v) { if (v) {
e.stopPropagation(); 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) { if (stashSelect.length !== 0) {
const base = stashSelect.find(c => !['Red', 'Blue', 'Green'].includes(vbox.bound[c])); const base = stashSelect.find(c => !['Red', 'Blue', 'Green'].includes(vbox.bound[c]));
if (base || base === 0) return true; if (base || base === 0) return true;
@ -164,23 +164,23 @@ class Vbox extends preact.Component {
} }
function clearVboxSelected() { function clearVboxSelected() {
setVboxSelected({ shopSelect: [], stashSelect: [] }); setVboxSelected({ storeSelect: [], stashSelect: [] });
} }
function vboxBuySelected() { function vboxBuySelected() {
if (!vboxSelecting) return false; if (!vboxSelecting) return false;
document.activeElement.blur(); document.activeElement.blur();
sendVboxAccept(shopSelect[0][0], shopSelect[0][1]); sendVboxAccept(storeSelect[0][0], storeSelect[0][1]);
return true; return true;
} }
function vboxHdr() { function storeHdr() {
return ( return (
<div class="shop-hdr"> <div class="store-hdr">
<div class='vbox-padding'> <div class='vbox-padding'>
<h3 <h3
onTouchStart={e => e.target.scrollIntoView(true)} onTouchStart={e => e.target.scrollIntoView(true)}
onMouseOver={e => vboxHover(e, 'vbox')}> STORE onMouseOver={e => vboxHover(e, 'store')}> STORE
</h3> </h3>
<div class={`bits ${vbox.bits < 3 ? 'red' : false}`} onMouseOver={e => vboxHover(e, 'bits')}> <div class={`bits ${vbox.bits < 3 ? 'red' : false}`} onMouseOver={e => vboxHover(e, 'bits')}>
<h2> {vbox.bits}b </h2> <h2> {vbox.bits}b </h2>
@ -214,7 +214,7 @@ class Vbox extends preact.Component {
); );
} }
function refundBtn() { 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 ? itemInfo.items.find(i => i.item === vbox.bound[stashSelect[0]]).cost
: 0; : 0;
const tutorialDisabled = tutorial && tutorial < 8 const tutorialDisabled = tutorial && tutorial < 8
@ -241,14 +241,14 @@ class Vbox extends preact.Component {
// EVERYTHING // EVERYTHING
return ( return (
<div class='vbox'> <div class='vbox'>
{vboxHdr()} {storeHdr()}
{stashHdr()} {stashHdr()}
{refundBtn()} {refundBtn()}
<StoreElement <StoreElement
clearVboxSelected = {clearVboxSelected} clearVboxSelected = {clearVboxSelected}
setInfo = {setInfo} setInfo = {setInfo}
setVboxSelected = {setVboxSelected} setVboxSelected = {setVboxSelected}
shopSelect = {shopSelect} storeSelect = {storeSelect}
stashSelect = {stashSelect} stashSelect = {stashSelect}
vbox = {vbox} vbox = {vbox}
vboxHighlight = {vboxHighlight} vboxHighlight = {vboxHighlight}
@ -272,7 +272,7 @@ class Vbox extends preact.Component {
sendVboxCombine = {sendVboxCombine} sendVboxCombine = {sendVboxCombine}
setInfo = {setInfo} setInfo = {setInfo}
stashSelect = {stashSelect} stashSelect = {stashSelect}
shopSelect = {shopSelect} storeSelect = {storeSelect}
vbox = {vbox} vbox = {vbox}
vboxBuySelected = {vboxBuySelected} vboxBuySelected = {vboxBuySelected}
vboxHighlight = {vboxHighlight} vboxHighlight = {vboxHighlight}

2
client/src/components/vbox.stash.jsx
View File

@ -58,7 +58,7 @@ function stashElement(props) {
if (!comboHighlight) { if (!comboHighlight) {
setInfo(vbox.bound[i]); setInfo(vbox.bound[i]);
return setVboxSelected({ shopSelect: [], stashSelect: [i] }); return setVboxSelected({ storeSelect: [], stashSelect: [i] });
} }
stashSelect.push(i); stashSelect.push(i);

18
client/src/components/vbox.store.jsx
View File

@ -9,7 +9,7 @@ function storeElement(props) {
clearVboxSelected, clearVboxSelected,
setInfo, setInfo,
setVboxSelected, setVboxSelected,
shopSelect, storeSelect,
stashSelect, stashSelect,
vbox, vbox,
vboxHighlight, vboxHighlight,
@ -18,26 +18,26 @@ function storeElement(props) {
function availableBtn(v, group, index) { function availableBtn(v, group, index) {
if (!v) return <button disabled class='empty' key={(group * 10) + index} >&nbsp;</button>; if (!v) return <button disabled class='empty' key={(group * 10) + index} >&nbsp;</button>;
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' : ''; const comboHighlight = vboxHighlight && vboxHighlight.includes(v) ? 'combo-border' : '';
function onClick(e) { function onClick(e) {
e.stopPropagation(); e.stopPropagation();
if (!comboHighlight) setInfo(vbox.free[group][index]); 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( 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) { if (!storeSelect.length && !stashSelect.length) {
return setVboxSelected({ shopSelect: [[group, index]], stashSelect }); return setVboxSelected({ storeSelect: [[group, index]], stashSelect });
} }
if (comboHighlight !== 'combo-border') { 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 ( return (
<div class='shop' <div class='store'
onClick={e => e.stopPropagation()}> onClick={e => e.stopPropagation()}>
<div class='vbox-padding'> <div class='vbox-padding'>
<div class="vbox-colours"> <div class="vbox-colours">

14
client/src/constants.jsx
View File

@ -24,10 +24,10 @@ module.exports = {
}, },
INFO: { INFO: {
vbox: { store: {
item: 'VBOX', item: 'STORE',
description: <p><b>ITEMS</b> that are available to buy.<br /> description: <p>Contains items that are available to buy.<br />
The <b>VBOX</b> is refilled every round.<br />Click <b>REFILL</b> at the bottom to purchase a refill. </p>, The store is refilled every round.<br />Click <b>REFILL</b> to purchase a refill for 2 bits. </p>,
}, },
stash: { stash: {
item: 'STASH', item: 'STASH',
@ -35,11 +35,7 @@ module.exports = {
}, },
bits: { bits: {
item: 'BITS', item: 'BITS',
description: <p>The VBOX currency.<br /> description: <p>Currency to buy items.<br />At the beginning of each round you receive 30 bits.</p>,
Colours - 1b<br />
Skills - 2b<br />
Specs - 3b<br />
At the beginning of each round you receive 30 bits.</p>,
}, },
ready: { ready: {
item: 'READY', item: 'READY',

2
client/src/events.jsx
View File

@ -182,7 +182,7 @@ function registerEvents(store) {
store.dispatch(actions.setActiveSkill(null)); store.dispatch(actions.setActiveSkill(null));
store.dispatch(actions.setInfo(null)); store.dispatch(actions.setInfo(null));
store.dispatch(actions.setItemUnequip([])); store.dispatch(actions.setItemUnequip([]));
store.dispatch(actions.setVboxSelected({ shopSelect: [], stashSelect: [] })); store.dispatch(actions.setVboxSelected({ storeSelect: [], stashSelect: [] }));
} }
function setAccountInstances(v) { function setAccountInstances(v) {

2
client/src/keyboard.jsx
View File

@ -9,7 +9,7 @@ function setupKeys(store) {
key('esc', () => store.dispatch(actions.setActiveSkill(null))); key('esc', () => store.dispatch(actions.setActiveSkill(null)));
key('esc', () => store.dispatch(actions.setInfo(null))); key('esc', () => store.dispatch(actions.setInfo(null)));
key('esc', () => store.dispatch(actions.setItemUnequip([]))); 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))); key('esc', () => store.dispatch(actions.setMtxActive(null)));
} }

2
client/src/reducers.jsx
View File

@ -56,7 +56,7 @@ module.exports = {
tutorial: createReducer(1, 'SET_TUTORIAL'), tutorial: createReducer(1, 'SET_TUTORIAL'),
tutorialGame: createReducer(1, 'SET_TUTORIAL_GAME'), 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'), ws: createReducer(null, 'SET_WS'),
}; };