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

Merge branch 'develop' of ssh://git.mnml.gg:40022/~/mnml into develop

Browse Source
This commit is contained in:
ntr
2019-11-12 15:20:25 +11:00
parent 87bc63e648 6c0457f8fd
commit 1824363de1
7 changed files with 101 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/components/info.component.jsx
+35 -18
View File
@@ -9,15 +9,22 @@ const shapes = require('./shapes');
class InfoComponent extends preact.Component {
shouldComponentUpdate(newProps) {
shouldComponentUpdate(newProps, newState) {
if (newProps.tutorial !== this.props.tutorial) return true;
// We don't care about info during tutorial
if (newProps.tutorial && this.props.instance.time_control === 'Practice'
&& this.props.instance.rounds.length === 1) return false;
if (newProps.info !== this.props.info) return true;
if (newState.comboItem !== this.state.comboItem) return true;
return false;
}
componentDidUpdate(prevProps) {
// Catch case where mouse events don't properly clear state and info changed
if (prevProps.info !== this.props.info && this.state.comboItem) this.setState({ comboItem: null });
}
render(args) {
const {
// Variables that will change
@@ -33,7 +40,7 @@ class InfoComponent extends preact.Component {
setInfo,
setTutorialNull,
} = args;
const { comboItem } = this.state;
function Info() {
if (tutorial) {
const tutorialStageInfo = tutorialStage(tutorial, ws, setTutorialNull, instance);
@@ -42,19 +49,19 @@ class InfoComponent extends preact.Component {
if (!info) return false;
if (info.includes('constructName')) {
return (
<div>
<div class='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>
</div>
);
}
if (info.includes('constructAvatar')) {
return (
<div>
<div class='info-item'>
<h2> {info.replace('constructAvatar ', '')} </h2>
<p> This is your construct avatar. <br />
Avatars are randomly generated and are purely cosmetic. <br />
@@ -63,7 +70,9 @@ class InfoComponent extends preact.Component {
</div>
);
}
const fullInfo = itemInfo.items.find(i => i.item === info) || INFO[info];
const fullInfo = comboItem
? itemInfo.items.find(i => i.item === comboItem) || INFO[comboItem]
: itemInfo.items.find(i => i.item === info) || INFO[info];
if (!fullInfo) return false;
const isSkill = fullInfo.skill;
const isSpec = fullInfo.spec;
@@ -75,16 +84,17 @@ class InfoComponent extends preact.Component {
};
if (isSkill || isSpec) {
let infoName = info;
let infoName = fullInfo.item;
while (infoName.includes('Plus')) infoName = infoName.replace('Plus', '+');
const header = isSkill ? <h3> SKILL </h3> : <h3> SPEC </h3>;
const itemSource = itemInfo.combos.filter(c => c.item === removeTier(info));
let itemSourceInfo = itemSource.length
const itemSource = itemInfo.combos.filter(c => c.item === removeTier(fullInfo.item));
let itemSourceInfo = itemSource.length && !isSpec
? `${itemSource[0].components[0]} ${itemSource[0].components[1]} ${itemSource[0].components[2]}`
: false;
let header = null;
if (!itemSource.length) header = isSkill ? <h3> SKILL </h3> : <h3> SPEC </h3>;
if (itemSourceInfo) {
while (itemSourceInfo.includes('Plus')) itemSourceInfo = itemSourceInfo.replace('Plus', '+');
const itemRegEx = /(Red|Blue|Green)/;
@@ -100,7 +110,7 @@ class InfoComponent extends preact.Component {
const thresholds = isSpec ? specThresholds(player, fullInfo, info) : null;
return (
<div class={isSkill ? 'info-skill' : 'info-spec'}>
<div class={isSkill ? 'info-item' : 'info-item'}>
<h2>{infoName} {fullInfo.cost}b</h2>
{header}
{itemSourceInfo}
@@ -120,10 +130,10 @@ class InfoComponent extends preact.Component {
);
}
function Combos() {
const Combos = () => {
if (tutorial && instance.time_control === 'Practice' && instance.rounds.length === 1) return false;
const generalNotes = (
<div>
<div class="combos">
<h2> General </h2>
<p>
You can preview combos by clicking the combined item when it appears in this section. <br />
@@ -141,18 +151,25 @@ class InfoComponent extends preact.Component {
<table class="combos">
<tbody>
{vboxCombos.map((c, i) =>
<tr key={i} >
<td class="highlight" onClick={() => setInfo(c.item)} >{convertItem(c.item)}</td>
<tr key={i}>
<td class="table-button"
onMouseOver={e => {
e.stopPropagation();
this.setState({ comboItem: c.item });
}}
onClick={() => setInfo(c.item)}
> {convertItem(c.item)} </td>
{c.components.map((u, j) => <td key={j} >{convertItem(u)}</td>)}
</tr>
)}
</tbody>
</table>
);
}
};
return (
<div class='info' >
<div class='info' onMouseOver={() => this.setState({ comboItem: null })}>
<Info />
<Combos />
</div>
client/src/components/vbox.component.jsx
+7 -3
View File
@@ -213,6 +213,7 @@ class Vbox extends preact.Component {
const classes = `${v.toLowerCase()} ${selected ? 'highlight' : ''} ${comboHighlight}`;
const vboxObject = shapes[v] ? shapes[v]() : v;
const disabled = vbox.bits <= group;
return (
<label draggable='true'
onDragStart={ev => {
@@ -223,6 +224,7 @@ class Vbox extends preact.Component {
onDragEnd={clearVboxSelected}>
<button
class={classes}
disabled={disabled}
onMouseOver={e => vboxHover(e, v)}
onMouseDown={onClick}
onClick={e => e.stopPropagation()}
@@ -244,7 +246,7 @@ class Vbox extends preact.Component {
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 class={`bits ${vbox.bits < 3 ? 'red' : false}`} 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))}
@@ -285,7 +287,7 @@ class Vbox extends preact.Component {
const combinerItems = combiner.map(j => vbox.bound[j]);
const combinerCount = countBy(combinerItems, co => co);
const comboHighlight = combinerItems.length > 0 && itemInfo.combos.some(combo => {
const comboItem = itemInfo.combos.find(combo => {
if (combo.components.includes(v)) {
return combinerItems.every(c => {
if (!combo.components.includes(c)) return false;
@@ -295,7 +297,8 @@ class Vbox extends preact.Component {
return true;
});
} return false;
}) ? 'combo-border' : '';
});
const comboHighlight = combinerItems.length > 0 && comboItem ? 'combo-border' : '';
function onClick(type) {
if (vboxSelecting) clearVboxSelected();
@@ -321,6 +324,7 @@ class Vbox extends preact.Component {
}
combiner.push(i);
if (combiner.length === 3) setInfo(comboItem.item);
return combinerChange(combiner);
}