should comp update for info / combos
This commit is contained in:
Mashy
parent
86a84cbcea
commit
c10b68949c
@ -259,15 +259,15 @@
|
||||
padding: 0.25em;
|
||||
}
|
||||
|
||||
.info {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.combos {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.info-combiner {
|
||||
.info {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.combiner {
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
|
||||
@ -71,7 +71,7 @@
|
||||
button {
|
||||
line-height: 1.6;
|
||||
letter-spacing: 0.15em;
|
||||
border-width: 1px;
|
||||
border-width: 0.1em;
|
||||
}
|
||||
}
|
||||
|
||||
@ -108,7 +108,7 @@
|
||||
|
||||
&[disabled] {
|
||||
background: black;
|
||||
border-width: 1px;
|
||||
border-width: 0.1em;
|
||||
};
|
||||
}
|
||||
|
||||
@ -145,8 +145,6 @@
|
||||
&.highlight {
|
||||
color: black;
|
||||
background: @silver;
|
||||
// border: 1px solid @white; (this bangs around the vbox)
|
||||
|
||||
// overwrite the classes on white svg elements
|
||||
svg {
|
||||
stroke-width: 0.75em;
|
||||
|
||||
@ -6,51 +6,61 @@ const { convertItem } = require('../utils');
|
||||
const addState = connect(({ info, itemInfo, instance, tutorial, vboxInfo }) =>
|
||||
({ info, itemInfo, instance, tutorial, vboxInfo }));
|
||||
|
||||
function Combos(args) {
|
||||
const {
|
||||
// Variables that will change
|
||||
info,
|
||||
tutorial,
|
||||
vboxInfo,
|
||||
// Static
|
||||
itemInfo,
|
||||
instance, // Only used for tutorial check
|
||||
} = args;
|
||||
|
||||
if (tutorial && instance.time_control === 'Practice' && instance.rounds.length === 1) return false;
|
||||
class Combos extends preact.Component {
|
||||
shouldComponentUpdate(newProps) {
|
||||
if (newProps.info !== this.props.info) return true;
|
||||
if (newProps.tutorial !== this.props.tutorial) return true;
|
||||
if (newProps.vboxInfo !== this.props.vboxInfo) return true;
|
||||
return false;
|
||||
}
|
||||
|
||||
const vboxCombos = itemInfo.combos.filter(c => c.components.includes(vboxInfo || info));
|
||||
if (vboxCombos.length > 6 || vboxCombos.length === 0) return <div class="combos"></div>;
|
||||
render(props) {
|
||||
const {
|
||||
// Variables that will change
|
||||
info,
|
||||
tutorial,
|
||||
vboxInfo,
|
||||
// Static
|
||||
itemInfo,
|
||||
instance, // Only used for tutorial check
|
||||
} = props;
|
||||
|
||||
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)}
|
||||
if (tutorial && instance.time_control === 'Practice' && instance.rounds.length === 1) return false;
|
||||
|
||||
const vboxCombos = itemInfo.combos.filter(c => c.components.includes(vboxInfo || info));
|
||||
if (vboxCombos.length > 6 || vboxCombos.length === 0) return <div class="combos"></div>;
|
||||
|
||||
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>
|
||||
);
|
||||
});
|
||||
return (
|
||||
<div class="combos">
|
||||
<div class="combo-header">
|
||||
<h2>COMBOS</h2>
|
||||
Combine colours and items.
|
||||
</div>
|
||||
<div class="combo-list">
|
||||
{comboTable}
|
||||
</div>
|
||||
{componentTable}
|
||||
</div>
|
||||
);
|
||||
});
|
||||
return (
|
||||
<div class="combos">
|
||||
<div class="combo-header">
|
||||
<h2>COMBOS</h2>
|
||||
Combine colours and items.
|
||||
</div>
|
||||
<div class="combo-list">
|
||||
{comboTable}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = addState(Combos);
|
||||
|
||||
@ -6,54 +6,65 @@ const { genItemInfo } = require('./vbox.utils');
|
||||
const addState = connect(({ info, player, tutorial, vboxInfo, ws, itemInfo, instance }) =>
|
||||
({ info, player, tutorial, vboxInfo, ws, itemInfo, instance }));
|
||||
|
||||
function Info(args) {
|
||||
const {
|
||||
// Variables that will change
|
||||
info,
|
||||
player,
|
||||
tutorial,
|
||||
vboxInfo,
|
||||
// Static
|
||||
ws,
|
||||
itemInfo,
|
||||
instance,
|
||||
} = args;
|
||||
|
||||
if (tutorial) {
|
||||
const tutorialStageInfo = tutorialStage(tutorial, ws, instance);
|
||||
if (tutorialStageInfo) return tutorialStageInfo;
|
||||
class Info extends preact.Component {
|
||||
shouldComponentUpdate(newProps) {
|
||||
// Single variable props
|
||||
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;
|
||||
return false;
|
||||
}
|
||||
|
||||
// Prioritise the vbox info
|
||||
if (vboxInfo) return genItemInfo(vboxInfo, itemInfo, player, info);
|
||||
render(props) {
|
||||
const {
|
||||
// Variables that will change
|
||||
info,
|
||||
player,
|
||||
tutorial,
|
||||
vboxInfo,
|
||||
// Static
|
||||
ws,
|
||||
itemInfo,
|
||||
instance,
|
||||
} = props;
|
||||
|
||||
// check normal info state
|
||||
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 (tutorial) {
|
||||
const tutorialStageInfo = tutorialStage(tutorial, ws, instance);
|
||||
if (tutorialStageInfo) return tutorialStageInfo;
|
||||
}
|
||||
|
||||
// Prioritise the vbox info
|
||||
if (vboxInfo) return genItemInfo(vboxInfo, itemInfo, player, info);
|
||||
|
||||
// check normal info state
|
||||
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);
|
||||
}
|
||||
|
||||
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);
|
||||
|
||||
@ -66,7 +66,7 @@ function setVboxState(dispatch, vboxSelected, state) {
|
||||
|
||||
dispatch(actions.setVboxInfo(vboxInfo()));
|
||||
dispatch(actions.setVboxCombiner(vboxCombiner));
|
||||
return dispatch(actions.setVboxHighlight(vboxHighlight));
|
||||
dispatch(actions.setVboxHighlight(vboxHighlight));
|
||||
}
|
||||
|
||||
function genItemInfo(item, itemInfo, player, info) {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user