info back
This commit is contained in:
ntr
parent
64fc508ae6
commit
734132974b
@ -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 {
|
||||
|
||||
144
client/src/components/vbox.combos.jsx
Normal file
144
client/src/components/vbox.combos.jsx
Normal file
@ -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)))
|
||||
? [<div key="0">{convertItem(c.components[0])} {convertItem(c.components[1])}</div>,
|
||||
<div key="1">{convertItem(c.components[2])}</div>]
|
||||
: c.components.map((u, j) => <div key={j} >{convertItem(u)}</div>);
|
||||
return (
|
||||
<div key={i} onMouseOver={mouseOver} class="table-button">
|
||||
<div class="item">
|
||||
{convertItem(c.item)}
|
||||
</div>
|
||||
{componentTable}
|
||||
</div>
|
||||
);
|
||||
});
|
||||
const comboList = comboTable.length > 0 ? <div class="combo-list">{comboTable}</div> : false;
|
||||
return (
|
||||
<div class="combos">
|
||||
<div class="combo-header">
|
||||
<h2>COMBOS</h2>
|
||||
Combine colours and items.
|
||||
</div>
|
||||
{comboList}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
module.exports = addState(Combos);
|
||||
@ -252,7 +252,10 @@ class Vbox extends preact.Component {
|
||||
setInfo = {setInfo}
|
||||
setVboxSelected = {setVboxSelected}
|
||||
/>
|
||||
<div class="info"></div>
|
||||
<InfoContainer
|
||||
vboxHighlight={vboxHighlight}
|
||||
vboxBuySelected={vboxBuySelected}
|
||||
/>
|
||||
<Combiner
|
||||
vboxHighlight={vboxHighlight}
|
||||
vboxBuySelected={vboxBuySelected}
|
||||
@ -261,7 +264,6 @@ class Vbox extends preact.Component {
|
||||
vboxHighlight={vboxHighlight}
|
||||
vboxBuySelected={vboxBuySelected}
|
||||
/>
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -61,24 +61,7 @@ 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;
|
||||
|
||||
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) {
|
||||
function Info(args) {
|
||||
const {
|
||||
// Variables that will change
|
||||
info,
|
||||
@ -133,7 +116,6 @@ class InfoComponent extends preact.Component {
|
||||
if (itemUnequip.length) [, vboxInfo] = itemUnequip;
|
||||
else if (stashSelect.length > 0 || storeSelect.length > 0) vboxInfo = checkVboxInfo();
|
||||
|
||||
function Info() {
|
||||
if (tutorial) {
|
||||
const tutorialStageInfo = tutorialStage(tutorial, ws, setTutorialNull, instance);
|
||||
if (tutorialStageInfo) return tutorialStageInfo;
|
||||
@ -175,7 +157,7 @@ class InfoComponent extends preact.Component {
|
||||
const thresholds = isSpec ? specThresholds(player, fullInfo, info) : null;
|
||||
|
||||
return (
|
||||
<div class={isSkill ? 'info-item' : 'info-item'}>
|
||||
<div class={`info ${isSkill ? 'info-item' : 'info-item'}`}>
|
||||
<h2>{infoName}</h2>
|
||||
{header}
|
||||
{itemSourceInfo}
|
||||
@ -187,7 +169,7 @@ class InfoComponent extends preact.Component {
|
||||
);
|
||||
}
|
||||
return (
|
||||
<div class="info-item">
|
||||
<div class="info info-item">
|
||||
<h2>{fullInfo.item}</h2>
|
||||
{itemDescription()}
|
||||
</div>
|
||||
@ -198,7 +180,7 @@ class InfoComponent extends preact.Component {
|
||||
if (!info) return false;
|
||||
if (info.includes('constructName')) {
|
||||
return (
|
||||
<div class='info-item'>
|
||||
<div class='info info-item'>
|
||||
<h2> {info.replace('constructName ', '')} </h2>
|
||||
<p> This is the name of your construct. <br />
|
||||
Names are randomly generated and are purely cosmetic. <br />
|
||||
@ -210,7 +192,7 @@ class InfoComponent extends preact.Component {
|
||||
|
||||
if (info.includes('constructAvatar')) {
|
||||
return (
|
||||
<div class='info-item'>
|
||||
<div class='info info-item'>
|
||||
<h2> {info.replace('constructAvatar ', '')} </h2>
|
||||
<p> This is your construct avatar. <br />
|
||||
Avatars are randomly generated and are purely cosmetic. <br />
|
||||
@ -221,95 +203,6 @@ class InfoComponent extends preact.Component {
|
||||
}
|
||||
|
||||
return genItemInfo(info);
|
||||
}
|
||||
|
||||
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)))
|
||||
? [<div key="0">{convertItem(c.components[0])} {convertItem(c.components[1])}</div>,
|
||||
<div key="1">{convertItem(c.components[2])}</div>]
|
||||
: c.components.map((u, j) => <div key={j} >{convertItem(u)}</div>);
|
||||
return (
|
||||
<div key={i} onMouseOver={mouseOver} class="table-button">
|
||||
<div class="item">
|
||||
{convertItem(c.item)}
|
||||
</div>
|
||||
{componentTable}
|
||||
</div>
|
||||
);
|
||||
});
|
||||
const comboList = comboTable.length > 0 ? <div class="combo-list">{comboTable}</div> : false;
|
||||
return (
|
||||
<div class="combos">
|
||||
<div class="combo-header">
|
||||
<h2>COMBOS</h2>
|
||||
Combine colours and items.
|
||||
</div>
|
||||
{comboList}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
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 (
|
||||
<div class='combiner'>
|
||||
<button
|
||||
class='vbox-btn'
|
||||
disabled={!mouseEvent}
|
||||
onClick={e => e.stopPropagation()}
|
||||
onMouseDown={() => mouseEvent()}>
|
||||
{text}
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<div class='info'>
|
||||
<div onMouseOver={() => this.setState({ comboItem: null })}>
|
||||
<div class='info-details'>
|
||||
<Info />
|
||||
<Combiner />
|
||||
</div>
|
||||
</div>
|
||||
<Combos />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = addState(InfoComponent);
|
||||
module.exports = addState(Info);
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user