change info / combos back to functional components with passed down props
This commit is contained in:
Mashy
parent
d1649c986b
commit
8312b44b2b
@ -1,29 +1,14 @@
|
||||
const preact = require('preact');
|
||||
const { connect } = require('preact-redux');
|
||||
|
||||
const { convertItem } = require('../utils');
|
||||
|
||||
const addState = connect(({ info, itemInfo, instance, tutorial, vboxInfo }) =>
|
||||
({ info, itemInfo, instance, tutorial, vboxInfo }));
|
||||
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
render(props) {
|
||||
function Combos(props) {
|
||||
const {
|
||||
// Variables that will change
|
||||
info,
|
||||
instance,
|
||||
itemInfo,
|
||||
tutorial,
|
||||
vboxInfo,
|
||||
// Static
|
||||
itemInfo,
|
||||
instance, // Only used for tutorial check
|
||||
} = props;
|
||||
|
||||
if (tutorial && instance.time_control === 'Practice' && instance.rounds.length === 1) return false;
|
||||
@ -34,7 +19,8 @@ class Combos extends preact.Component {
|
||||
const comboTable = vboxCombos.map((c, i) => {
|
||||
const mouseOver = e => {
|
||||
e.stopPropagation();
|
||||
this.setState({ comboItem: c.item });
|
||||
// this.setState({ comboItem: c.item });
|
||||
// set comboInfo state here
|
||||
};
|
||||
const componentTable = (c.components.some(ci => ['Red', 'Blue', 'Green'].includes(ci)))
|
||||
? [<div key="0">{convertItem(c.components[0])} {convertItem(c.components[1])}</div>,
|
||||
@ -55,12 +41,11 @@ class Combos extends preact.Component {
|
||||
<h2>COMBOS</h2>
|
||||
Combine colours and items.
|
||||
</div>
|
||||
<div class="combo-list">
|
||||
<div class="combo-list" onClick={e => e.stopPropagation()}>
|
||||
{comboTable}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = addState(Combos);
|
||||
module.exports = Combos;
|
||||
|
||||
@ -4,8 +4,8 @@ const { connect } = require('preact-redux');
|
||||
const actions = require('../actions');
|
||||
|
||||
const InfoContainer = require('./vbox.info');
|
||||
const StashElement = require('./vbox.stash');
|
||||
const StoreElement = require('./vbox.store');
|
||||
const { StashHdr, StashElement } = require('./vbox.stash');
|
||||
const { StoreHdr, StoreElement } = require('./vbox.store');
|
||||
const Combiner = require('./vbox.combiner');
|
||||
const Combos = require('./vbox.combos');
|
||||
|
||||
@ -28,6 +28,10 @@ const addState = connect(
|
||||
vboxSelected,
|
||||
} = state;
|
||||
|
||||
function clearTutorial() {
|
||||
return ws.clearTutorial(instance.id);
|
||||
}
|
||||
|
||||
function sendVboxDiscard() {
|
||||
return ws.sendVboxDiscard(instance.id);
|
||||
}
|
||||
@ -64,6 +68,7 @@ const addState = connect(
|
||||
vboxInfo,
|
||||
vboxSelected,
|
||||
|
||||
clearTutorial,
|
||||
sendVboxAccept,
|
||||
sendVboxCombine,
|
||||
sendVboxDiscard,
|
||||
@ -105,15 +110,18 @@ class Vbox extends preact.Component {
|
||||
const {
|
||||
// Changing state variables
|
||||
itemUnequip,
|
||||
info,
|
||||
instance,
|
||||
player,
|
||||
tutorial,
|
||||
instance,
|
||||
vboxCombiner,
|
||||
vboxHighlight,
|
||||
vboxInfo,
|
||||
vboxSelected,
|
||||
// Static
|
||||
itemInfo,
|
||||
// Function Calls
|
||||
clearTutorial,
|
||||
dispatchVboxSelect,
|
||||
sendItemUnequip,
|
||||
sendVboxAccept,
|
||||
@ -140,67 +148,16 @@ class Vbox extends preact.Component {
|
||||
return true;
|
||||
}
|
||||
|
||||
function storeHdr() {
|
||||
return (
|
||||
<div class="store-hdr">
|
||||
<h2
|
||||
onTouchStart={e => e.target.scrollIntoView(true)}
|
||||
onMouseOver={e => vboxHover(e, 'store')}> STORE
|
||||
</h2>
|
||||
<h1 class={`bits ${vbox.bits < 3 ? 'red' : false}`} onMouseOver={e => vboxHover(e, 'bits')}>
|
||||
{vbox.bits}b
|
||||
</h1>
|
||||
<button
|
||||
class='vbox-btn'
|
||||
onMouseOver={e => vboxHover(e, 'refill')}
|
||||
disabled={vbox.bits < 2
|
||||
|| (tutorial && tutorial < 7
|
||||
&& instance.time_control === 'Practice' && instance.rounds.length === 1)
|
||||
}
|
||||
onClick={e => e.stopPropagation()}
|
||||
onMouseDown={() => sendVboxDiscard()}>
|
||||
refill <br />
|
||||
2b
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function stashHdr() {
|
||||
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
|
||||
&& instance.time_control === 'Practice' && instance.rounds.length === 1;
|
||||
const refundBtn = (
|
||||
<button
|
||||
disabled={tutorialDisabled || !refund}
|
||||
class='vbox-btn'
|
||||
onClick={e => e.stopPropagation()}
|
||||
onMouseDown={e => {
|
||||
e.stopPropagation();
|
||||
sendVboxReclaim(vboxSelected.stashSelect[0]);
|
||||
}}>
|
||||
refund <br />
|
||||
{refund}b
|
||||
</button>
|
||||
);
|
||||
|
||||
return (
|
||||
<div class='stash-hdr'>
|
||||
<h2 onTouchStart={e => e.target.scrollIntoView(true)}
|
||||
onMouseOver={e => vboxHover(e, 'stash')}> STASH
|
||||
</h2>
|
||||
{refundBtn}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// EVERYTHING
|
||||
return (
|
||||
<div class='vbox'>
|
||||
{storeHdr()}
|
||||
{stashHdr()}
|
||||
<StoreHdr
|
||||
instance={instance}
|
||||
tutorial={tutorial}
|
||||
sendVboxDiscard={sendVboxDiscard}
|
||||
vbox={vbox}
|
||||
vboxHover={vboxHover}
|
||||
/>
|
||||
<StoreElement
|
||||
clearVboxSelected = {clearVboxSelected}
|
||||
setInfo = {setInfo}
|
||||
@ -211,6 +168,15 @@ class Vbox extends preact.Component {
|
||||
vboxHighlight = {vboxHighlight}
|
||||
vboxHover = {vboxHover}
|
||||
/>
|
||||
<StashHdr
|
||||
instance={instance}
|
||||
itemInfo={itemInfo}
|
||||
sendVboxReclaim={sendVboxReclaim}
|
||||
tutorial={tutorial}
|
||||
vbox={vbox}
|
||||
vboxHover={vboxHover}
|
||||
vboxSelected={vboxSelected}
|
||||
/>
|
||||
<StashElement
|
||||
itemUnequip = {itemUnequip}
|
||||
stashSelect = {stashSelect}
|
||||
@ -224,7 +190,15 @@ class Vbox extends preact.Component {
|
||||
vboxHover = {vboxHover}
|
||||
/>
|
||||
<div class='info-combiner'>
|
||||
<InfoContainer />
|
||||
<InfoContainer
|
||||
clearTutorial={clearTutorial}
|
||||
info={info}
|
||||
instance={instance}
|
||||
itemInfo={itemInfo}
|
||||
player={player}
|
||||
tutorial={tutorial}
|
||||
vboxInfo={vboxInfo}
|
||||
/>
|
||||
<Combiner
|
||||
vbox={vbox}
|
||||
vboxCombiner={vboxCombiner}
|
||||
@ -233,7 +207,13 @@ class Vbox extends preact.Component {
|
||||
sendVboxCombine={sendVboxCombine}
|
||||
/>
|
||||
</div>
|
||||
<Combos />
|
||||
<Combos
|
||||
info={info}
|
||||
instance={instance}
|
||||
itemInfo={itemInfo}
|
||||
tutorial={tutorial}
|
||||
vboxInfo={vboxInfo}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,22 +1,8 @@
|
||||
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, ws, itemInfo, instance }) =>
|
||||
({ info, player, tutorial, vboxInfo, ws, itemInfo, instance }));
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
render(props) {
|
||||
function Info(props) {
|
||||
const {
|
||||
// Variables that will change
|
||||
info,
|
||||
@ -24,13 +10,13 @@ class Info extends preact.Component {
|
||||
tutorial,
|
||||
vboxInfo,
|
||||
// Static
|
||||
ws,
|
||||
clearTutorial,
|
||||
itemInfo,
|
||||
instance,
|
||||
} = props;
|
||||
|
||||
if (tutorial) {
|
||||
const tutorialStageInfo = tutorialStage(tutorial, ws, instance);
|
||||
const tutorialStageInfo = tutorialStage(tutorial, clearTutorial, instance);
|
||||
if (tutorialStageInfo) return tutorialStageInfo;
|
||||
}
|
||||
|
||||
@ -64,7 +50,6 @@ class Info extends preact.Component {
|
||||
}
|
||||
|
||||
return genItemInfo(info, itemInfo, player, info);
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = addState(Info);
|
||||
module.exports = Info;
|
||||
|
||||
@ -6,6 +6,46 @@ const shapes = require('./shapes');
|
||||
const buttons = require('./buttons');
|
||||
const { removeTier } = require('../utils');
|
||||
|
||||
function stashHdr(props) {
|
||||
const {
|
||||
instance,
|
||||
itemInfo,
|
||||
sendVboxReclaim,
|
||||
tutorial,
|
||||
vbox,
|
||||
vboxHover,
|
||||
vboxSelected,
|
||||
} = props;
|
||||
const { storeSelect, stashSelect } = vboxSelected;
|
||||
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
|
||||
&& instance.time_control === 'Practice' && instance.rounds.length === 1;
|
||||
const refundBtn = (
|
||||
<button
|
||||
disabled={tutorialDisabled || !refund}
|
||||
class='vbox-btn'
|
||||
onClick={e => e.stopPropagation()}
|
||||
onMouseDown={e => {
|
||||
e.stopPropagation();
|
||||
sendVboxReclaim(vboxSelected.stashSelect[0]);
|
||||
}}>
|
||||
refund <br />
|
||||
{refund}b
|
||||
</button>
|
||||
);
|
||||
|
||||
return (
|
||||
<div class='stash-hdr'>
|
||||
<h2 onTouchStart={e => e.target.scrollIntoView(true)}
|
||||
onMouseOver={e => vboxHover(e, 'stash')}> STASH
|
||||
</h2>
|
||||
{refundBtn}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function stashElement(props) {
|
||||
const {
|
||||
itemUnequip,
|
||||
@ -105,4 +145,4 @@ function stashElement(props) {
|
||||
);
|
||||
}
|
||||
|
||||
module.exports = stashElement;
|
||||
module.exports = { stashHdr, stashElement };
|
||||
|
||||
@ -3,6 +3,40 @@ const range = require('lodash/range');
|
||||
|
||||
const shapes = require('./shapes');
|
||||
|
||||
function storeHdr(props) {
|
||||
const {
|
||||
instance,
|
||||
tutorial,
|
||||
sendVboxDiscard,
|
||||
vbox,
|
||||
vboxHover,
|
||||
} = props;
|
||||
|
||||
return (
|
||||
<div class="store-hdr">
|
||||
<h2
|
||||
onTouchStart={e => e.target.scrollIntoView(true)}
|
||||
onMouseOver={e => vboxHover(e, 'store')}> STORE
|
||||
</h2>
|
||||
<h1 class={`bits ${vbox.bits < 3 ? 'red' : false}`} onMouseOver={e => vboxHover(e, 'bits')}>
|
||||
{vbox.bits}b
|
||||
</h1>
|
||||
<button
|
||||
class='vbox-btn'
|
||||
onMouseOver={e => vboxHover(e, 'refill')}
|
||||
disabled={vbox.bits < 2
|
||||
|| (tutorial && tutorial < 7
|
||||
&& instance.time_control === 'Practice' && instance.rounds.length === 1)
|
||||
}
|
||||
onClick={e => e.stopPropagation()}
|
||||
onMouseDown={() => sendVboxDiscard()}>
|
||||
refill <br />
|
||||
2b
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
function storeElement(props) {
|
||||
const {
|
||||
@ -75,4 +109,4 @@ function storeElement(props) {
|
||||
);
|
||||
}
|
||||
|
||||
module.exports = storeElement;
|
||||
module.exports = { storeHdr, storeElement };
|
||||
|
||||
@ -97,10 +97,10 @@ function tutorialVbox(player, store, tutorial) {
|
||||
store.dispatch(actions.setTutorial(stage));
|
||||
}
|
||||
|
||||
function tutorialStage(tutorial, ws, instance) {
|
||||
function tutorialStage(tutorial, clearTutorial, instance) {
|
||||
if (!(instance.time_control === 'Practice' && instance.rounds.length === 1)) return false;
|
||||
|
||||
const exit = () => ws.clearTutorial(instance.id);
|
||||
const exit = () => clearTutorial();
|
||||
|
||||
const tutorialText = () => {
|
||||
if (tutorial === 1) {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user