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-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;

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

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

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

@ -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);
}

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

@ -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 {

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

@ -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 (
<div class="shop-hdr">
<div class="store-hdr">
<div class='vbox-padding'>
<h3
onTouchStart={e => e.target.scrollIntoView(true)}
onMouseOver={e => vboxHover(e, 'vbox')}> STORE
onMouseOver={e => vboxHover(e, 'store')}> STORE
</h3>
<div class={`bits ${vbox.bits < 3 ? 'red' : false}`} onMouseOver={e => vboxHover(e, 'bits')}>
<h2> {vbox.bits}b </h2>
@ -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 (
<div class='vbox'>
{vboxHdr()}
{storeHdr()}
{stashHdr()}
{refundBtn()}
<StoreElement
clearVboxSelected = {clearVboxSelected}
setInfo = {setInfo}
setVboxSelected = {setVboxSelected}
shopSelect = {shopSelect}
storeSelect = {storeSelect}
stashSelect = {stashSelect}
vbox = {vbox}
vboxHighlight = {vboxHighlight}
@ -272,7 +272,7 @@ class Vbox extends preact.Component {
sendVboxCombine = {sendVboxCombine}
setInfo = {setInfo}
stashSelect = {stashSelect}
shopSelect = {shopSelect}
storeSelect = {storeSelect}
vbox = {vbox}
vboxBuySelected = {vboxBuySelected}
vboxHighlight = {vboxHighlight}

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

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

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

@ -9,7 +9,7 @@ function storeElement(props) {
clearVboxSelected,
setInfo,
setVboxSelected,
shopSelect,
storeSelect,
stashSelect,
vbox,
vboxHighlight,
@ -18,26 +18,26 @@ function storeElement(props) {
function availableBtn(v, group, index) {
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' : '';
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 (
<div class='shop'
<div class='store'
onClick={e => e.stopPropagation()}>
<div class='vbox-padding'>
<div class="vbox-colours">

14
client/src/constants.jsx
View File

@ -24,10 +24,10 @@ module.exports = {
},
INFO: {
vbox: {
item: 'VBOX',
description: <p><b>ITEMS</b> 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>,
store: {
item: 'STORE',
description: <p>Contains items that are available to buy.<br />
The store is refilled every round.<br />Click <b>REFILL</b> to purchase a refill for 2 bits. </p>,
},
stash: {
item: 'STASH',
@ -35,11 +35,7 @@ module.exports = {
},
bits: {
item: 'BITS',
description: <p>The VBOX currency.<br />
Colours - 1b<br />
Skills - 2b<br />
Specs - 3b<br />
At the beginning of each round you receive 30 bits.</p>,
description: <p>Currency to buy items.<br />At the beginning of each round you receive 30 bits.</p>,
},
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.setInfo(null));
store.dispatch(actions.setItemUnequip([]));
store.dispatch(actions.setVboxSelected({ shopSelect: [], stashSelect: [] }));
store.dispatch(actions.setVboxSelected({ storeSelect: [], stashSelect: [] }));
}
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.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)));
}

2
client/src/reducers.jsx
View File

@ -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'),
};