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

button css, only update info component when info or tutorial changes

Browse Source
This commit is contained in:
Mashy 2019-10-27 22:13:23 +10:00
parent 0dfe181d52
commit 200482dd79
6 changed files with 255 additions and 224 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
client/assets/styles/instance.less
View File

@ -446,6 +446,17 @@
} }
} }
.tutorial {
button {
width: 100%;
}
button.focus {
animation: co 0.75s cubic-bezier(0, 0, 1, 1) 0s infinite alternate;
}
}
@keyframes faceoff { @keyframes faceoff {
from { from {
color: @black; color: @black;

2
client/src/components/anims/wiggle.jsx
View File

@ -6,7 +6,7 @@ function wiggle(id, idle) {
const target = document.getElementById(id); const target = document.getElementById(id);
const x = window.innerWidth * 0.01 * (Math.round(Math.random()) ? Math.random() : -Math.random()); const x = window.innerWidth * 0.01 * (Math.round(Math.random()) ? Math.random() : -Math.random());
const y = window.innerHeight * 0.01 * (Math.round(Math.random()) ? Math.random() : -Math.random()); const y = window.innerHeight * 0.01 * (Math.round(Math.random()) ? Math.random() : -Math.random());
const originalX = parseFloat(idle.animations[0].currentValue); const originalX = parseFloat(idle.animations[0].currentValue);
const originalY = parseFloat(idle.animations[1].currentValue); const originalY = parseFloat(idle.animations[1].currentValue);
// console.log(x, y); // console.log(x, y);

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

@ -2,211 +2,222 @@ const preact = require('preact');
const range = require('lodash/range'); const range = require('lodash/range');
const reactStringReplace = require('react-string-replace'); const reactStringReplace = require('react-string-replace');
const { Component } = require('preact');
const { INFO } = require('./../constants'); const { INFO } = require('./../constants');
const { convertItem, removeTier } = require('../utils'); const { convertItem, removeTier } = require('../utils');
const { tutorialStage } = require('../tutorial.utils'); const { tutorialStage } = require('../tutorial.utils');
const shapes = require('./shapes'); const shapes = require('./shapes');
function InfoComponent(args) {
const {
ws,
itemInfo,
player,
instance,
info,
tutorial,
clearTutorial,
} = args;
function Info() { class InfoComponent extends Component {
if (tutorial) return tutorialStage(tutorial, ws, clearTutorial, instance); shouldComponentUpdate(newProps) {
if (newProps.tutorial !== this.props.tutorial) return true;
if (newProps.tutorial) return false; // We don't care about info during tutorial
if (newProps.info !== this.props.info) return true;
return false;
}
if (!info) { render(args) {
return ( const {
<div> ws,
<h2>VBOX phase</h2> itemInfo,
<p>Strengthen and specialise your constructs by equipping items to them.</p> player,
<p>Double click to purchase items in the <b>VBOX</b> and move them to your <b>INVENTORY</b>.</p> instance,
<p> info,
Combine a <b>SKILL</b> or <b>SPEC</b> with 2 <b>COLOURS</b> to create an item.<br /> tutorial,
Combine <b>3 of the same item</b> to upgrade it.<br /> clearTutorial,
Click an item and then click a construct to <b>equip</b> that item to it.<br /> } = args;
</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;
const isSpec = fullInfo.spec;
if (isSkill) { function Info() {
const regEx = /(RedPower|BluePower|GreenPower|RedLife|BlueLife|GreenLife|SpeedStat)/; if (tutorial) return tutorialStage(tutorial, ws, clearTutorial, instance);
const infoDescription = reactStringReplace(fullInfo.description, regEx, match => shapes[match]());
const itemSource = itemInfo.combos.filter(c => c.item === removeTier(info));
const itemSourceInfo = itemSource.length
? `${itemSource[0].components[0]} ${itemSource[0].components[1]} ${itemSource[0].components[2]}`
: false;
const itemRegEx = /(Red|Blue|Green)/;
const itemSourceDescription = reactStringReplace(itemSourceInfo, itemRegEx, match => shapes[match]());
const speed = <div> Speed {shapes.SpeedStat()} multiplier {fullInfo.speed * 4}% </div>;
const cooldown = fullInfo.cooldown ? `${fullInfo.cooldown} Turn delay` : null;
return (
<div class="info-skill">
<h2>{fullInfo.item} - {fullInfo.cost}b</h2>
<h3> SKILL </h3>
{itemSourceDescription}
<div> {cooldown} </div>
<div>{infoDescription}</div>
{speed}
</div>
);
}
if (isSpec) { if (!info) {
let red = 0;
let blue = 0;
let green = 0;
player.constructs.forEach(construct => {
red += construct.colours.red;
blue += construct.colours.blue;
green += construct.colours.green;
});
const teamColours = { red, blue, green };
const colourReqs = fullInfo.values.bonuses || [];
const thresholds = colourReqs.map((bonus, i) => {
const colours = ['red', 'green', 'blue'];
const colourGoals = {
red: [],
green: [],
blue: [],
};
const overFlow = [];
colours.forEach(c => {
const colourReq = bonus.req[c];
if (colourReqs === 0) return false;
const start = i === 0
? 0
: colourReqs[i - 1].req[c];
const dots = range(start, colourReq).map(j => {
const unmet = teamColours[c] < j + 1;
const reqClass = unmet
? 'unmet'
: '';
if (j - start > 4) {
overFlow.push(
<figure key={j} alt={c.colour} class={reqClass} >
{shapes.vboxColour(c)}
</figure>
);
} else {
colourGoals[c].push(
<figure key={j} alt={c.colour} class={reqClass} >
{shapes.vboxColour(c)}
</figure>
);
}
return true;
});
return dots;
});
const reqsMet = colours.every(c => teamColours[c] >= bonus.req[c]);
const reqClass = reqsMet
? ''
: 'unmet';
const goals = colours.map((c, j) => {
if (colourGoals[c].length) {
return (
<div key={j}>{colourGoals[c]}</div>
);
}
return false;
});
const bonusObj = info.includes('Life')
? <div class={`${reqClass} bonus`} > + {bonus.bonus}</div>
: <div class={`${reqClass} bonus`} > + {bonus.bonus}%</div>;
const overFlowObj = overFlow.length ? <div> {overFlow} </div> : null;
return ( return (
<div key={i} class="spec-goal"> <div>
{goals} <h2>VBOX phase</h2>
{overFlowObj} <p>Strengthen and specialise your constructs by equipping items to them.</p>
{bonusObj} <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> </div>
); );
}); }
const regEx = /(RedPower|BluePower|GreenPower|RedLife|BlueLife|GreenLife|SpeedStat)/; const fullInfo = itemInfo.items.find(i => i.item === info) || INFO[info];
const infoDescription = reactStringReplace(fullInfo.description, regEx, match => shapes[match]()); if (!fullInfo) return false;
const itemSource = itemInfo.combos.filter(c => c.item === info); const isSkill = fullInfo.skill;
const itemSourceInfo = itemSource.length const isSpec = fullInfo.spec;
? `${itemSource[0].components[0]} ${itemSource[0].components[1]} ${itemSource[0].components[2]}`
: false;
const itemRegEx = /(Red|Blue|Green)/;
const itemSourceDescription = reactStringReplace(itemSourceInfo, itemRegEx, match => shapes[match]());
const infoText = info.replace('Plus', '+');
return ( if (isSkill) {
<div class="info-spec"> const regEx = /(RedPower|BluePower|GreenPower|RedLife|BlueLife|GreenLife|SpeedStat)/;
<h2>{infoText} - {fullInfo.cost}b</h2> const infoDescription = reactStringReplace(fullInfo.description, regEx, match => shapes[match]());
<h3>SPEC</h3> const itemSource = itemInfo.combos.filter(c => c.item === removeTier(info));
{itemSourceDescription} const itemSourceInfo = itemSource.length
<div>{infoDescription}</div> ? `${itemSource[0].components[0]} ${itemSource[0].components[1]} ${itemSource[0].components[2]}`
<div class="thresholds"> : false;
{thresholds} const itemRegEx = /(Red|Blue|Green)/;
const itemSourceDescription = reactStringReplace(itemSourceInfo, itemRegEx, match => shapes[match]());
const speed = <div> Speed {shapes.SpeedStat()} multiplier {fullInfo.speed * 4}% </div>;
const cooldown = fullInfo.cooldown ? `${fullInfo.cooldown} Turn delay` : null;
return (
<div class="info-skill">
<h2>{fullInfo.item} - {fullInfo.cost}b</h2>
<h3> SKILL </h3>
{itemSourceDescription}
<div> {cooldown} </div>
<div>{infoDescription}</div>
{speed}
</div> </div>
);
}
if (isSpec) {
let red = 0;
let blue = 0;
let green = 0;
player.constructs.forEach(construct => {
red += construct.colours.red;
blue += construct.colours.blue;
green += construct.colours.green;
});
const teamColours = { red, blue, green };
const colourReqs = fullInfo.values.bonuses || [];
const thresholds = colourReqs.map((bonus, i) => {
const colours = ['red', 'green', 'blue'];
const colourGoals = {
red: [],
green: [],
blue: [],
};
const overFlow = [];
colours.forEach(c => {
const colourReq = bonus.req[c];
if (colourReqs === 0) return false;
const start = i === 0
? 0
: colourReqs[i - 1].req[c];
const dots = range(start, colourReq).map(j => {
const unmet = teamColours[c] < j + 1;
const reqClass = unmet
? 'unmet'
: '';
if (j - start > 4) {
overFlow.push(
<figure key={j} alt={c.colour} class={reqClass} >
{shapes.vboxColour(c)}
</figure>
);
} else {
colourGoals[c].push(
<figure key={j} alt={c.colour} class={reqClass} >
{shapes.vboxColour(c)}
</figure>
);
}
return true;
});
return dots;
});
const reqsMet = colours.every(c => teamColours[c] >= bonus.req[c]);
const reqClass = reqsMet
? ''
: 'unmet';
const goals = colours.map((c, j) => {
if (colourGoals[c].length) {
return (
<div key={j}>{colourGoals[c]}</div>
);
}
return false;
});
const bonusObj = info.includes('Life')
? <div class={`${reqClass} bonus`} > + {bonus.bonus}</div>
: <div class={`${reqClass} bonus`} > + {bonus.bonus}%</div>;
const overFlowObj = overFlow.length ? <div> {overFlow} </div> : null;
return (
<div key={i} class="spec-goal">
{goals}
{overFlowObj}
{bonusObj}
</div>
);
});
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
? `${itemSource[0].components[0]} ${itemSource[0].components[1]} ${itemSource[0].components[2]}`
: false;
const itemRegEx = /(Red|Blue|Green)/;
const itemSourceDescription = reactStringReplace(itemSourceInfo, itemRegEx, match => shapes[match]());
const infoText = info.replace('Plus', '+');
return (
<div class="info-spec">
<h2>{infoText} - {fullInfo.cost}b</h2>
<h3>SPEC</h3>
{itemSourceDescription}
<div>{infoDescription}</div>
<div class="thresholds">
{thresholds}
</div>
</div>
);
}
const cost = fullInfo.cost ? `- ${fullInfo.cost}b` : false;
return (
<div class="info-item">
<h2>{fullInfo.item} {cost}</h2>
<div>{fullInfo.description}</div>
</div> </div>
); );
} }
const cost = fullInfo.cost ? `- ${fullInfo.cost}b` : false;
function Combos() {
if (!player) return false;
if (!info) return false;
if (tutorial) return false;
const vboxCombos = itemInfo.combos.filter(c => c.components.includes(info));
if (vboxCombos.length > 6) return false;
return (
<table class="combos">
<tbody>
{vboxCombos.map((c, i) =>
<tr key={i} >
<td class="highlight" >{convertItem(c.item)}</td>
{c.components.map((u, j) => <td key={j} >{convertItem(u)}</td>)}
</tr>
)}
</tbody>
</table>
);
}
return ( return (
<div class="info-item"> <div class='info' >
<h2>{fullInfo.item} {cost}</h2> <Info />
<div>{fullInfo.description}</div> <Combos />
</div> </div>
); );
} }
function Combos() {
if (!player) return false;
if (!info) return false;
if (tutorial) return false;
const vboxCombos = itemInfo.combos.filter(c => c.components.includes(info));
if (vboxCombos.length > 6) return false;
return (
<table class="combos">
<tbody>
{vboxCombos.map((c, i) =>
<tr key={i} >
<td class="highlight" >{convertItem(c.item)}</td>
{c.components.map((u, j) => <td key={j} >{convertItem(u)}</td>)}
</tr>
)}
</tbody>
</table>
);
}
return (
<div class='info' >
<Info />
<Combos />
</div>
);
} }
module.exports = InfoComponent; module.exports = InfoComponent;

70
client/src/components/play.jsx
View File

@ -139,39 +139,41 @@ function Play(args) {
</button>; </button>;
const list = () => { const list = () => {
if (!instances.length) return ( if (!instances.length) {
<div class='list play'> return (
<figure> <div class='list play'>
<button <figure>
class="ready" <button
onClick={() => sendInstanceQueue()}> class="ready"
PVP onClick={() => sendInstanceQueue()}>
</button> PVP
<figcaption>Matchmaking</figcaption> </button>
</figure> <figcaption>Matchmaking</figcaption>
{inviteBtn()} </figure>
<figure> {inviteBtn()}
<button <figure>
class="ready" <button
onClick={() => sendInstancePractice()}> class="ready"
Learn onClick={() => sendInstancePractice()}>
</button> Learn
<figcaption>Practice MNML</figcaption> </button>
</figure> <figcaption>Practice MNML</figcaption>
<figure> </figure>
<button <figure>
class='discord-btn' <button
onClick={() => window.open('https://discord.gg/YJJgurM') }> class='discord-btn'
&nbsp; onClick={() => window.open('https://discord.gg/YJJgurM') }>
</button> &nbsp;
<figcaption>Join the Community</figcaption> </button>
</figure> <figcaption>Join the Community</figcaption>
</div> </figure>
); </div>
);
}
return ( return (
<div class='list play rejoin'> <div class='list play rejoin'>
<figure> <figure>
<button <button
class="ready" class="ready"
onClick={() => sendInstanceState(instances[0].id)}> onClick={() => sendInstanceState(instances[0].id)}>
@ -181,7 +183,7 @@ function Play(args) {
</figure> </figure>
</div> </div>
); );
} };
return ( return (
<section class="top"> <section class="top">
@ -201,9 +203,9 @@ function Play(args) {
</button> </button>
</div> </div>
<div> <div>
Join our Discord server to find opponents and talk to the devs. <br /> Join our Discord server to find opponents and talk to the devs. <br />
Message <b>@ntr</b> or <b>@mashy</b> for some credits to get started.<br /> Message <b>@ntr</b> or <b>@mashy</b> for some credits to get started.<br />
<a href='https://www.youtube.com/watch?v=VtZLlkpJuS8'>Tutorial Playthrough on YouTube</a> <a href='https://www.youtube.com/watch?v=VtZLlkpJuS8'>Tutorial Playthrough on YouTube</a>
</div> </div>
<br /> <br />
<div> <div>

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

@ -99,7 +99,6 @@ function Vbox(args) {
const { const {
combiner, combiner,
navInstance, navInstance,
instance,
itemInfo, itemInfo,
player, player,
reclaiming, reclaiming,

16
client/src/tutorial.utils.jsx
View File

@ -162,7 +162,9 @@ function tutorialStage(tutorial, ws, clearTutorial, instance) {
<p> Each round you start with a vbox full of different skills, specs and colours. </p> <p> Each round you start with a vbox full of different skills, specs and colours. </p>
<p> Bits are your currency for buying skills, specs and colours from the vbox. <br /> <p> Bits are your currency for buying skills, specs and colours from the vbox. <br />
Colours cost 1b, Skills cost 2b and specs cost 3b. <br /> Colours cost 1b, Skills cost 2b and specs cost 3b. <br />
You can refill the vbox by pressing the refill button for 2b. </p> You can refill the vbox by pressing the refill button for 2b. <br />
After each combat round you get more bits to further upgrade your team.
</p>
<p> Press the <b>REFILL</b> button to get a new vbox and continue. </p> <p> Press the <b>REFILL</b> button to get a new vbox and continue. </p>
</div> </div>
); );
@ -182,12 +184,18 @@ function tutorialStage(tutorial, ws, clearTutorial, instance) {
return false; return false;
}; };
const exitTutorial = <button onClick={e => e.stopPropagation()} onMouseDown={exit}> Exit Tutorial </button>; const classes = tutorial === 8 ? 'focus' : '';
const exitTutorial = <button
class={classes}
onClick={e => e.stopPropagation()}
onMouseDown={exit}> Exit Tutorial </button>;
return ( return (
<div> <div class='tutorial'>
{tutorialText()} {tutorialText()}
{exitTutorial} <figure>
{exitTutorial}
</figure>
</div>); </div>);
} }