Merge branch 'info-rework' into tutorial-merged
This commit is contained in:
Mashy
commit
5dacda76dc
@ -20,36 +20,27 @@ class InfoComponent extends preact.Component {
|
||||
|
||||
render(args) {
|
||||
const {
|
||||
ws,
|
||||
itemInfo,
|
||||
player,
|
||||
instance,
|
||||
// Variables that will change
|
||||
info,
|
||||
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;
|
||||
|
||||
function Info() {
|
||||
if (tutorial) {
|
||||
const tutorialStageInfo = tutorialStage(tutorial, ws, clearTutorial, instance);
|
||||
const tutorialStageInfo = tutorialStage(tutorial, ws, setTutorialNull, instance);
|
||||
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];
|
||||
if (!fullInfo) return false;
|
||||
const isSkill = fullInfo.skill;
|
||||
@ -68,7 +59,7 @@ class InfoComponent extends preact.Component {
|
||||
const cooldown = fullInfo.cooldown ? `${fullInfo.cooldown} Turn delay` : null;
|
||||
return (
|
||||
<div class="info-skill">
|
||||
<h2>{fullInfo.item} - {fullInfo.cost}b</h2>
|
||||
<h2>{fullInfo.item} {fullInfo.cost}b</h2>
|
||||
<h3> SKILL </h3>
|
||||
{itemSourceDescription}
|
||||
<div> {cooldown} </div>
|
||||
@ -165,16 +156,20 @@ class InfoComponent extends preact.Component {
|
||||
const regEx = /(RedPower|BluePower|GreenPower|RedLife|BlueLife|GreenLife|SpeedStat)/;
|
||||
const infoDescription = reactStringReplace(fullInfo.description, regEx, match => shapes[match]());
|
||||
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]}`
|
||||
: false;
|
||||
const itemRegEx = /(Red|Blue|Green)/;
|
||||
if (itemSourceInfo) {
|
||||
while (itemSourceInfo.includes('Plus')) itemSourceInfo = itemSourceInfo.replace('Plus', '+');
|
||||
}
|
||||
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 (
|
||||
<div class="info-spec">
|
||||
<h2>{infoText} - {fullInfo.cost}b</h2>
|
||||
<h2>{infoText} {fullInfo.cost}b</h2>
|
||||
<h3>SPEC</h3>
|
||||
{itemSourceDescription}
|
||||
<div>{infoDescription}</div>
|
||||
@ -206,7 +201,7 @@ class InfoComponent extends preact.Component {
|
||||
<tbody>
|
||||
{vboxCombos.map((c, 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>)}
|
||||
</tr>
|
||||
)}
|
||||
|
||||
@ -29,10 +29,14 @@ const addState = connect(
|
||||
},
|
||||
|
||||
function receiveDispatch(dispatch) {
|
||||
function clearTutorial() {
|
||||
function setTutorialNull() {
|
||||
dispatch(actions.setTutorial(null));
|
||||
}
|
||||
return { clearTutorial };
|
||||
|
||||
function setInfo(info) {
|
||||
dispatch(actions.setInfo(info));
|
||||
}
|
||||
return { setTutorialNull, setInfo };
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -56,7 +56,6 @@ class Instance extends Component {
|
||||
render(args) {
|
||||
const {
|
||||
instance,
|
||||
setInfo,
|
||||
clearItems,
|
||||
} = args;
|
||||
|
||||
@ -76,7 +75,7 @@ class Instance extends Component {
|
||||
}
|
||||
|
||||
return (
|
||||
<main id="instance" class='instance' onClick={instanceClick} onMouseOver={() => setInfo(null)}>
|
||||
<main id="instance" class='instance' onClick={instanceClick}>
|
||||
<Vbox />
|
||||
<InfoContainer />
|
||||
<InstanceConstructsContainer />
|
||||
|
||||
@ -57,10 +57,6 @@ const addState = connect(
|
||||
dispatch(actions.setActiveConstruct(value));
|
||||
}
|
||||
|
||||
function clearInfo() {
|
||||
return dispatch(actions.setInfo(null));
|
||||
}
|
||||
|
||||
function setItemEquip(v) {
|
||||
return dispatch(actions.setItemEquip(v));
|
||||
}
|
||||
@ -69,7 +65,7 @@ const addState = connect(
|
||||
return dispatch(actions.setItemUnequip(v));
|
||||
}
|
||||
|
||||
return { quit, clearInfo, setInfo, setActiveConstruct, setItemUnequip, setItemEquip };
|
||||
return { quit, setInfo, setActiveConstruct, setItemUnequip, setItemEquip };
|
||||
}
|
||||
|
||||
);
|
||||
|
||||
@ -160,8 +160,12 @@ class Vbox extends preact.Component {
|
||||
//
|
||||
function vboxHover(e, 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;
|
||||
}
|
||||
@ -243,30 +247,32 @@ class Vbox extends preact.Component {
|
||||
|
||||
function vboxElement() {
|
||||
return (
|
||||
<div class='vbox-vbox'
|
||||
onMouseDown={() => setReclaiming(false)}
|
||||
onClick={e => e.stopPropagation()}
|
||||
onMouseOver={e => hoverInfo(e, 'vbox')}>
|
||||
<div class="vbox-hdr">
|
||||
<h3 onTouchStart={e => e.target.scrollIntoView(true)}>VBOX</h3>
|
||||
<div class="bits" onMouseOver={e => hoverInfo(e, 'bits')} >{vbox.bits}b</div>
|
||||
</div>
|
||||
<div class="vbox-colours">
|
||||
{range(0, 6).map(i => availableBtn(vbox.free[0][i], 0, i))}
|
||||
</div>
|
||||
<div class="vbox-items">
|
||||
{range(0, 3).map(i => availableBtn(vbox.free[1][i], 1, i))}
|
||||
{range(0, 3).map(i => availableBtn(vbox.free[2][i], 2, i))}
|
||||
</div>
|
||||
<button
|
||||
class='vbox-btn'
|
||||
onMouseOver={e => hoverInfo(e, 'refill')}
|
||||
disabled={tutorial && tutorial < 7}
|
||||
onClick={e => e.stopPropagation()}
|
||||
onMouseDown={() => sendVboxDiscard()}>
|
||||
refill - 2b
|
||||
</button>
|
||||
</div>
|
||||
<div class='vbox-vbox'
|
||||
onMouseDown={() => setReclaiming(false)}
|
||||
onClick={e => e.stopPropagation()}>
|
||||
<div class="vbox-hdr">
|
||||
<h3
|
||||
onTouchStart={e => e.target.scrollIntoView(true)}
|
||||
onMouseOver={e => hoverInfo(e, 'vbox')}> VBOX
|
||||
</h3>
|
||||
<div class="bits" onMouseOver={e => hoverInfo(e, 'bits')} >{vbox.bits}b</div>
|
||||
</div>
|
||||
<div class="vbox-colours">
|
||||
{range(0, 6).map(i => availableBtn(vbox.free[0][i], 0, i))}
|
||||
</div>
|
||||
<div class="vbox-items">
|
||||
{range(0, 3).map(i => availableBtn(vbox.free[1][i], 1, i))}
|
||||
{range(0, 3).map(i => availableBtn(vbox.free[2][i], 2, i))}
|
||||
</div>
|
||||
<button
|
||||
class='vbox-btn'
|
||||
onMouseOver={e => hoverInfo(e, 'refill')}
|
||||
disabled={tutorial && tutorial < 7}
|
||||
onClick={e => e.stopPropagation()}
|
||||
onMouseDown={() => sendVboxDiscard()}>
|
||||
refill - 2b
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -307,8 +313,10 @@ class Vbox extends preact.Component {
|
||||
if (reclaiming) return sendVboxReclaim(i);
|
||||
|
||||
// 4 things selected
|
||||
if (combiner.length > 2) return combinerChange([i]);
|
||||
|
||||
if (combiner.length > 2) {
|
||||
setInfo(vbox.bound[i]);
|
||||
return combinerChange([i]);
|
||||
}
|
||||
// removing
|
||||
const combinerIndex = combiner.indexOf(i);
|
||||
if (combinerIndex > -1) {
|
||||
@ -317,9 +325,10 @@ class Vbox extends preact.Component {
|
||||
|
||||
combiner.push(i);
|
||||
|
||||
if (!comboHighlight) {
|
||||
return combinerChange([i]);
|
||||
}
|
||||
if (!comboHighlight) {
|
||||
setInfo(vbox.bound[i]);
|
||||
return combinerChange([i]);
|
||||
}
|
||||
|
||||
return combinerChange(combiner);
|
||||
}
|
||||
@ -398,27 +407,29 @@ class Vbox extends preact.Component {
|
||||
}
|
||||
|
||||
return (
|
||||
<div class={inventoryClass}
|
||||
onMouseDown={inventoryClick}
|
||||
onClick={e => e.stopPropagation()}
|
||||
style={vboxSelecting || (itemUnequip.length) ? { cursor: 'pointer' } : null}
|
||||
onMouseOver={e => hoverInfo(e, 'inventory')}>
|
||||
<div class="vbox-hdr">
|
||||
<h3 onTouchStart={e => e.target.scrollIntoView(true)}>INVENTORY</h3>
|
||||
<button
|
||||
disabled={tutorial && tutorial < 8}
|
||||
class='vbox-btn reclaim'
|
||||
onMouseOver={e => hoverInfo(e, 'reclaim')}
|
||||
onClick={e => e.stopPropagation()}
|
||||
onMouseDown={reclaimClick}>
|
||||
reclaim
|
||||
</button>
|
||||
</div>
|
||||
<div class='vbox-items'>
|
||||
{range(0, 9).map(i => inventoryBtn(vbox.bound[i], i))}
|
||||
</div>
|
||||
{combinerBtn()}
|
||||
</div>
|
||||
<div class={inventoryClass}
|
||||
onMouseDown={inventoryClick}
|
||||
onClick={e => e.stopPropagation()}
|
||||
style={vboxSelecting || (itemUnequip.length) ? { cursor: 'pointer' } : null}>
|
||||
<div class="vbox-hdr">
|
||||
<h3
|
||||
onTouchStart={e => e.target.scrollIntoView(true)}
|
||||
onMouseOver={e => hoverInfo(e, 'inventory')}> INVENTORY
|
||||
</h3>
|
||||
<button
|
||||
disabled={tutorial && tutorial < 8}
|
||||
class='vbox-btn reclaim'
|
||||
onMouseOver={e => hoverInfo(e, 'reclaim')}
|
||||
onClick={e => e.stopPropagation()}
|
||||
onMouseDown={reclaimClick}>
|
||||
reclaim
|
||||
</button>
|
||||
</div>
|
||||
<div class='vbox-items'>
|
||||
{range(0, 9).map(i => inventoryBtn(vbox.bound[i], i))}
|
||||
</div>
|
||||
{combinerBtn()}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user