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

client/assets/styles/instance.less

@@ -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 {
     from {
         color: @black;

client/src/components/anims/wiggle.jsx

@@ -6,7 +6,7 @@ function wiggle(id, idle) {
     const target = document.getElementById(id);
     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 originalX = parseFloat(idle.animations[0].currentValue);
     const originalY = parseFloat(idle.animations[1].currentValue);
     // console.log(x, y);

client/src/components/info.component.jsx

@@ -2,211 +2,222 @@ const preact = require('preact');
 const range = require('lodash/range');
 const reactStringReplace = require('react-string-replace');
 
+const { Component } = require('preact');
 const { INFO } = require('./../constants');
 const { convertItem, removeTier } = require('../utils');
 const { tutorialStage } = require('../tutorial.utils');
 const shapes = require('./shapes');
 
-function InfoComponent(args) {
-    const {
-        ws,
-        itemInfo,
-        player,
-        instance,
-        info,
-        tutorial,
-        clearTutorial,
-    } = args;
 
-    function Info() {
-        if (tutorial) return tutorialStage(tutorial, ws, clearTutorial, instance);
+class InfoComponent extends Component {
+    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) {
-            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;
-        const isSpec = fullInfo.spec;
+    render(args) {
+        const {
+            ws,
+            itemInfo,
+            player,
+            instance,
+            info,
+            tutorial,
+            clearTutorial,
+        } = args;
 
-        if (isSkill) {
-            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 === 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>
-            );
-        }
+        function Info() {
+            if (tutorial) return tutorialStage(tutorial, ws, clearTutorial, instance);
 
-        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;
+            if (!info) {
                 return (
-                    <div key={i} class="spec-goal">
-                        {goals}
-                        {overFlowObj}
-                        {bonusObj}
+                    <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 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', '+');
+            }
+            const fullInfo = itemInfo.items.find(i => i.item === info) || INFO[info];
+            if (!fullInfo) return false;
+            const isSkill = fullInfo.skill;
+            const isSpec = fullInfo.spec;
 
-            return (
-                <div class="info-spec">
-                    <h2>{infoText} - {fullInfo.cost}b</h2>
-                    <h3>SPEC</h3>
-                    {itemSourceDescription}
-                    <div>{infoDescription}</div>
-                    <div class="thresholds">
-                        {thresholds}
+            if (isSkill) {
+                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 === 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) {
+                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>
             );
         }
-        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 (
-            <div class="info-item">
-                <h2>{fullInfo.item} {cost}</h2>
-                <div>{fullInfo.description}</div>
+            <div class='info' >
+                <Info />
+                <Combos />
             </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;

client/src/components/play.jsx

@@ -139,39 +139,41 @@ function Play(args) {
         </button>;
 
     const list = () => {
-        if (!instances.length) return (
-           <div class='list play'>
-                <figure>
-                    <button
-                        class="ready"
-                        onClick={() => sendInstanceQueue()}>
-                        PVP
-                    </button>
-                    <figcaption>Matchmaking</figcaption>
-                </figure>
-                {inviteBtn()}
-                <figure>
-                    <button
-                        class="ready"
-                        onClick={() => sendInstancePractice()}>
-                        Learn
-                    </button>
-                    <figcaption>Practice MNML</figcaption>
-                </figure>
-                <figure>
-                    <button
-                        class='discord-btn'
-                        onClick={() => window.open('https://discord.gg/YJJgurM') }>
-                            &nbsp;
-                    </button>
-                    <figcaption>Join the Community</figcaption>
-                </figure>
-            </div>
-        );
+        if (!instances.length) {
+            return (
+                <div class='list play'>
+                    <figure>
+                        <button
+                            class="ready"
+                            onClick={() => sendInstanceQueue()}>
+                            PVP
+                        </button>
+                        <figcaption>Matchmaking</figcaption>
+                    </figure>
+                    {inviteBtn()}
+                    <figure>
+                        <button
+                            class="ready"
+                            onClick={() => sendInstancePractice()}>
+                            Learn
+                        </button>
+                        <figcaption>Practice MNML</figcaption>
+                    </figure>
+                    <figure>
+                        <button
+                            class='discord-btn'
+                            onClick={() => window.open('https://discord.gg/YJJgurM') }>
+                                &nbsp;
+                        </button>
+                        <figcaption>Join the Community</figcaption>
+                    </figure>
+                </div>
+            );
+        }
 
         return (
             <div class='list play rejoin'>
-               <figure>
+                <figure>
                     <button
                         class="ready"
                         onClick={() => sendInstanceState(instances[0].id)}>
@@ -181,7 +183,7 @@ function Play(args) {
                 </figure>
             </div>
         );
-    }
+    };
 
     return (
         <section class="top">
@@ -201,9 +203,9 @@ function Play(args) {
                     </button>
                 </div>
                 <div>
-                        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 />
-                        <a href='https://www.youtube.com/watch?v=VtZLlkpJuS8'>Tutorial Playthrough on YouTube</a>
+                    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 />
+                    <a href='https://www.youtube.com/watch?v=VtZLlkpJuS8'>Tutorial Playthrough on YouTube</a>
                 </div>
                 <br />
                 <div>

client/src/components/vbox.component.jsx

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

client/src/tutorial.utils.jsx

@@ -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> 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 />
-                        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>
                 </div>
             );
@@ -182,12 +184,18 @@ function tutorialStage(tutorial, ws, clearTutorial, instance) {
         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 (
-        <div>
+        <div class='tutorial'>
             {tutorialText()}
-            {exitTutorial}
+            <figure>
+                {exitTutorial}
+            </figure>
         </div>);
 }