ntr/mnml
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'info-rework' into tutorial-merged

Browse Source
This commit is contained in:
Mashy 2019-10-28 12:13:19 +10:00
commit 5dacda76dc
5 changed files with 92 additions and 87 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
client/src/components/info.component.jsx
View File

@ -20,36 +20,27 @@ class InfoComponent extends preact.Component {
render(args) { render(args) {
const { const {
ws, // Variables that will change
itemInfo,
player,
instance,
info, info,
tutorial, tutorial,
clearTutorial,
// Static
player, // Only used for colour calcs which will be update if info changes
ws,
itemInfo,
instance, // Only used for instance id
// functions
setInfo,
setTutorialNull,
} = args; } = args;
function Info() { function Info() {
if (tutorial) { if (tutorial) {
const tutorialStageInfo = tutorialStage(tutorial, ws, clearTutorial, instance); const tutorialStageInfo = tutorialStage(tutorial, ws, setTutorialNull, instance);
if (tutorialStageInfo) return tutorialStageInfo; if (tutorialStageInfo) return tutorialStageInfo;
} }
if (!info) return false;
if (!info) {
return (
<div>
<h2>VBOX phase</h2>
<p>Strengthen and specialise your constructs by equipping items to them.</p>
<p>Double click to purchase items in the <b>VBOX</b> and move them to your <b>INVENTORY</b>.</p>
<p>
Combine a <b>SKILL</b> or <b>SPEC</b> with 2 <b>COLOURS</b> to create an item.<br />
Combine <b>3 of the same item</b> to upgrade it.<br />
Click an item and then click a construct to <b>equip</b> that item to it.<br />
</p>
<p>Click the <b>READY</b> button for the <b>GAME PHASE</b>.</p>
</div>
);
}
const fullInfo = itemInfo.items.find(i => i.item === info) || INFO[info]; const fullInfo = itemInfo.items.find(i => i.item === info) || INFO[info];
if (!fullInfo) return false; if (!fullInfo) return false;
const isSkill = fullInfo.skill; const isSkill = fullInfo.skill;
@ -68,7 +59,7 @@ class InfoComponent extends preact.Component {
const cooldown = fullInfo.cooldown ? `${fullInfo.cooldown} Turn delay` : null; const cooldown = fullInfo.cooldown ? `${fullInfo.cooldown} Turn delay` : null;
return ( return (
<div class="info-skill"> <div class="info-skill">
<h2>{fullInfo.item} - {fullInfo.cost}b</h2> <h2>{fullInfo.item} {fullInfo.cost}b</h2>
<h3> SKILL </h3> <h3> SKILL </h3>
{itemSourceDescription} {itemSourceDescription}
<div> {cooldown} </div> <div> {cooldown} </div>
@ -165,16 +156,20 @@ class InfoComponent extends preact.Component {
const regEx = /(RedPower|BluePower|GreenPower|RedLife|BlueLife|GreenLife|SpeedStat)/; const regEx = /(RedPower|BluePower|GreenPower|RedLife|BlueLife|GreenLife|SpeedStat)/;
const infoDescription = reactStringReplace(fullInfo.description, regEx, match => shapes[match]()); const infoDescription = reactStringReplace(fullInfo.description, regEx, match => shapes[match]());
const itemSource = itemInfo.combos.filter(c => c.item === info); const itemSource = itemInfo.combos.filter(c => c.item === info);
const itemSourceInfo = itemSource.length let itemSourceInfo = itemSource.length
? `${itemSource[0].components[0]} ${itemSource[0].components[1]} ${itemSource[0].components[2]}` ? `${itemSource[0].components[0]} ${itemSource[0].components[1]} ${itemSource[0].components[2]}`
: false; : false;
const itemRegEx = /(Red|Blue|Green)/; const itemRegEx = /(Red|Blue|Green)/;
if (itemSourceInfo) {
while (itemSourceInfo.includes('Plus')) itemSourceInfo = itemSourceInfo.replace('Plus', '+');
}
const itemSourceDescription = reactStringReplace(itemSourceInfo, itemRegEx, match => shapes[match]()); const itemSourceDescription = reactStringReplace(itemSourceInfo, itemRegEx, match => shapes[match]());
const infoText = info.replace('Plus', '+'); let infoText = info;
while (infoText.includes('Plus')) infoText = infoText.replace('Plus', '+');
return ( return (
<div class="info-spec"> <div class="info-spec">
<h2>{infoText} - {fullInfo.cost}b</h2> <h2>{infoText} {fullInfo.cost}b</h2>
<h3>SPEC</h3> <h3>SPEC</h3>
{itemSourceDescription} {itemSourceDescription}
<div>{infoDescription}</div> <div>{infoDescription}</div>
@ -206,7 +201,7 @@ class InfoComponent extends preact.Component {
<tbody> <tbody>
{vboxCombos.map((c, i) => {vboxCombos.map((c, i) =>
<tr key={i} > <tr key={i} >
<td class="highlight" >{convertItem(c.item)}</td> <td class="highlight" onClick={() => setInfo(c.item)} >{convertItem(c.item)}</td>
{c.components.map((u, j) => <td key={j} >{convertItem(u)}</td>)} {c.components.map((u, j) => <td key={j} >{convertItem(u)}</td>)}
</tr> </tr>
)} )}

8
client/src/components/info.container.jsx
View File

@ -29,10 +29,14 @@ const addState = connect(
}, },
function receiveDispatch(dispatch) { function receiveDispatch(dispatch) {
function clearTutorial() { function setTutorialNull() {
dispatch(actions.setTutorial(null)); dispatch(actions.setTutorial(null));
} }
return { clearTutorial };
function setInfo(info) {
dispatch(actions.setInfo(info));
}
return { setTutorialNull, setInfo };
} }

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

@ -56,7 +56,6 @@ class Instance extends Component {
render(args) { render(args) {
const { const {
instance, instance,
setInfo,
clearItems, clearItems,
} = args; } = args;
@ -76,7 +75,7 @@ class Instance extends Component {
} }
return ( return (
<main id="instance" class='instance' onClick={instanceClick} onMouseOver={() => setInfo(null)}> <main id="instance" class='instance' onClick={instanceClick}>
<Vbox /> <Vbox />
<InfoContainer /> <InfoContainer />
<InstanceConstructsContainer /> <InstanceConstructsContainer />

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

@ -57,10 +57,6 @@ const addState = connect(
dispatch(actions.setActiveConstruct(value)); dispatch(actions.setActiveConstruct(value));
} }
function clearInfo() {
return dispatch(actions.setInfo(null));
}
function setItemEquip(v) { function setItemEquip(v) {
return dispatch(actions.setItemEquip(v)); return dispatch(actions.setItemEquip(v));
} }
@ -69,7 +65,7 @@ const addState = connect(
return dispatch(actions.setItemUnequip(v)); return dispatch(actions.setItemUnequip(v));
} }
return { quit, clearInfo, setInfo, setActiveConstruct, setItemUnequip, setItemEquip }; return { quit, setInfo, setActiveConstruct, setItemUnequip, setItemEquip };
} }
); );

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

@ -160,8 +160,12 @@ class Vbox extends preact.Component {
// //
function vboxHover(e, v) { function vboxHover(e, v) {
if (v) { if (v) {
if (info !== v) setInfo(v); e.stopPropagation();
e.stopPropagation(); if (combiner.length !== 0) {
const base = combiner.find(c => !['Red', 'Blue', 'Green'].includes(vbox.bound[c]));
if (base) return setInfo(vbox.bound[base]);
}
if (info !== v) setInfo(v);
} }
return true; return true;
} }
@ -243,30 +247,32 @@ class Vbox extends preact.Component {
function vboxElement() { function vboxElement() {
return ( return (
<div class='vbox-vbox' <div class='vbox-vbox'
onMouseDown={() => setReclaiming(false)} onMouseDown={() => setReclaiming(false)}
onClick={e => e.stopPropagation()} onClick={e => e.stopPropagation()}>
onMouseOver={e => hoverInfo(e, 'vbox')}> <div class="vbox-hdr">
<div class="vbox-hdr"> <h3
<h3 onTouchStart={e => e.target.scrollIntoView(true)}>VBOX</h3> onTouchStart={e => e.target.scrollIntoView(true)}
<div class="bits" onMouseOver={e => hoverInfo(e, 'bits')} >{vbox.bits}b</div> onMouseOver={e => hoverInfo(e, 'vbox')}> VBOX
</div> </h3>
<div class="vbox-colours"> <div class="bits" onMouseOver={e => hoverInfo(e, 'bits')} >{vbox.bits}b</div>
{range(0, 6).map(i => availableBtn(vbox.free[0][i], 0, i))} </div>
</div> <div class="vbox-colours">
<div class="vbox-items"> {range(0, 6).map(i => availableBtn(vbox.free[0][i], 0, i))}
{range(0, 3).map(i => availableBtn(vbox.free[1][i], 1, i))} </div>
{range(0, 3).map(i => availableBtn(vbox.free[2][i], 2, i))} <div class="vbox-items">
</div> {range(0, 3).map(i => availableBtn(vbox.free[1][i], 1, i))}
<button {range(0, 3).map(i => availableBtn(vbox.free[2][i], 2, i))}
class='vbox-btn' </div>
onMouseOver={e => hoverInfo(e, 'refill')} <button
disabled={tutorial && tutorial < 7} class='vbox-btn'
onClick={e => e.stopPropagation()} onMouseOver={e => hoverInfo(e, 'refill')}
onMouseDown={() => sendVboxDiscard()}> disabled={tutorial && tutorial < 7}
refill - 2b onClick={e => e.stopPropagation()}
</button> onMouseDown={() => sendVboxDiscard()}>
</div> refill - 2b
</button>
</div>
); );
} }
@ -307,8 +313,10 @@ class Vbox extends preact.Component {
if (reclaiming) return sendVboxReclaim(i); if (reclaiming) return sendVboxReclaim(i);
// 4 things selected // 4 things selected
if (combiner.length > 2) return combinerChange([i]); if (combiner.length > 2) {
setInfo(vbox.bound[i]);
return combinerChange([i]);
}
// removing // removing
const combinerIndex = combiner.indexOf(i); const combinerIndex = combiner.indexOf(i);
if (combinerIndex > -1) { if (combinerIndex > -1) {
@ -317,9 +325,10 @@ class Vbox extends preact.Component {
combiner.push(i); combiner.push(i);
if (!comboHighlight) { if (!comboHighlight) {
return combinerChange([i]); setInfo(vbox.bound[i]);
} return combinerChange([i]);
}
return combinerChange(combiner); return combinerChange(combiner);
} }
@ -398,27 +407,29 @@ class Vbox extends preact.Component {
} }
return ( return (
<div class={inventoryClass} <div class={inventoryClass}
onMouseDown={inventoryClick} onMouseDown={inventoryClick}
onClick={e => e.stopPropagation()} onClick={e => e.stopPropagation()}
style={vboxSelecting || (itemUnequip.length) ? { cursor: 'pointer' } : null} style={vboxSelecting || (itemUnequip.length) ? { cursor: 'pointer' } : null}>
onMouseOver={e => hoverInfo(e, 'inventory')}> <div class="vbox-hdr">
<div class="vbox-hdr"> <h3
<h3 onTouchStart={e => e.target.scrollIntoView(true)}>INVENTORY</h3> onTouchStart={e => e.target.scrollIntoView(true)}
<button onMouseOver={e => hoverInfo(e, 'inventory')}> INVENTORY
disabled={tutorial && tutorial < 8} </h3>
class='vbox-btn reclaim' <button
onMouseOver={e => hoverInfo(e, 'reclaim')} disabled={tutorial && tutorial < 8}
onClick={e => e.stopPropagation()} class='vbox-btn reclaim'
onMouseDown={reclaimClick}> onMouseOver={e => hoverInfo(e, 'reclaim')}
reclaim onClick={e => e.stopPropagation()}
</button> onMouseDown={reclaimClick}>
</div> reclaim
<div class='vbox-items'> </button>
{range(0, 9).map(i => inventoryBtn(vbox.bound[i], i))} </div>
</div> <div class='vbox-items'>
{combinerBtn()} {range(0, 9).map(i => inventoryBtn(vbox.bound[i], i))}
</div> </div>
{combinerBtn()}
</div>
); );
} }