79 lines
2.8 KiB
JavaScript
79 lines
2.8 KiB
JavaScript
const preact = require('preact');
|
|
const { connect } = require('preact-redux');
|
|
|
|
const { tutorialStage } = require('../tutorial.utils');
|
|
const { genItemInfo } = require('./vbox.utils');
|
|
|
|
const addState = connect(
|
|
({ info, player, tutorial, vboxInfo, itemInfo, instance, comboPreview }) => ({
|
|
info, player, tutorial, vboxInfo, itemInfo, instance, comboPreview,
|
|
}));
|
|
|
|
|
|
class Info extends preact.Component {
|
|
shouldComponentUpdate(newProps) {
|
|
if (newProps.clearTutorial !== this.props.clearTutorial) return true;
|
|
if (newProps.info !== this.props.info) return true;
|
|
if (newProps.player !== this.props.player) return true;
|
|
if (newProps.tutorial !== this.props.tutorial) return true;
|
|
if (newProps.vboxInfo !== this.props.vboxInfo) return true;
|
|
if (newProps.itemInfo !== this.props.itemInfo) return true;
|
|
if (newProps.instance !== this.props.instance) return true;
|
|
if (newProps.comboPreview !== this.props.comboPreview) return true;
|
|
return false;
|
|
}
|
|
|
|
render(props) {
|
|
const {
|
|
// passed props
|
|
clearTutorial,
|
|
// connect state props
|
|
info,
|
|
player,
|
|
tutorial,
|
|
vboxInfo,
|
|
itemInfo,
|
|
instance,
|
|
comboPreview,
|
|
} = props;
|
|
|
|
// dispaly priority
|
|
// tutorial -> comboPreview -> vboxInfo -> info
|
|
if (tutorial) {
|
|
const tutorialStageInfo = tutorialStage(tutorial, clearTutorial, instance);
|
|
if (tutorialStageInfo) return tutorialStageInfo;
|
|
}
|
|
if (comboPreview) return genItemInfo(comboPreview, itemInfo, player);
|
|
if (vboxInfo) return genItemInfo(vboxInfo, itemInfo, player);
|
|
|
|
if (!info) return false;
|
|
if (info.includes('constructName')) {
|
|
return (
|
|
<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 />
|
|
You can change change your construct name in the <b>RESHAPE</b> tab outside of games.
|
|
</p>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (info.includes('constructAvatar')) {
|
|
return (
|
|
<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 />
|
|
You can change your construct avatar in the <b>RESHAPE</b> tab outside of games.
|
|
</p>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return genItemInfo(info, itemInfo, player, info);
|
|
}
|
|
}
|
|
|
|
module.exports = addState(Info);
|