Merge branch 'develop' into ko-anims

client/assets/styles/colours.less

@@ -131,6 +131,15 @@ svg {
     }
 }
 
+@keyframes co-text {
+    from {
+        color: @black;
+    }
+    to {
+        color: @gray-exists;
+    }
+}
+
 button {
     &.blue {
         border-color: @blue;

client/assets/styles/controls.less

@@ -50,31 +50,6 @@ aside {
         }
     }
 
-    // button.ready:enabled {
-    //     &:hover {
-    //         color: forestgreen;
-    //         border-color: forestgreen;
-    //     }
-
-    //     &:active, &:focus, &.enabled {
-    //         background: forestgreen;
-    //         color: black;
-    //         border-color: forestgreen;
-    //     }
-    // }
-
-    button.ready:enabled {
-        color: forestgreen;
-        border-color: forestgreen;
-
-        &:hover {
-            background: forestgreen;
-            color: black;
-            border-color: forestgreen;
-        }
-    }
-
-
     .timer-container {
         grid-area: timer;
 
@@ -144,12 +119,6 @@ aside {
     }
 }
 
-.play-ctrl {
-    .controls {
-        grid-template-rows: 1fr 1fr 1fr 3fr 1fr;
-    }
-}
-
 .abandon:not([disabled]) {
     &:hover {
         color: @red;

client/assets/styles/instance.less

@@ -419,14 +419,9 @@
         margin-top: 1em;
     }
 
-    .opponent-name {
+    .winner {
-        margin-bottom: 1em;
+        color: @yellow;
-        grid-area: oppname;
+        font-weight: bold;
-    }
-
-    .player-name {
-        margin-top: 1em;
-        grid-area: playername;
     }
 
     .team {
@@ -438,9 +433,35 @@
 
 .faceoff-text {
     grid-area: text;
-    text-align: center;
+    font-size: 200%;
-    align-self: center;
+    text-transform: uppercase;
-    height: auto;
+    letter-spacing: 1em;
+    font-weight: bold;
+
+    color: @black;
+    animation: faceoff 4s ease-in-out 0s 2 alternate;
+
+    &.winner {
+        animation: win 2s ease-in-out 0s 1;
+    }
+}
+
+@keyframes faceoff {
+    from {
+        color: @black;
+    }
+    to {
+        color: @white;
+    }
+}
+
+@keyframes win {
+    from {
+        color: @black;
+    }
+    to {
+        color: @yellow;
+    }
 }
 
 /* Mobile Nav*/

client/assets/styles/menu.less

@@ -109,13 +109,40 @@ section {
         letter-spacing: 0.25em;
         text-transform: uppercase;
         display: grid;
-        grid-template-columns: repeat(4, 1fr);
+        // grid-template-columns: repeat(4, 1fr);
+        grid-template-columns: 1fr 1fr;
         grid-gap: 1em;
         flex-flow: row wrap;
         align-items: flex-end;
         button {
             border-radius: 0.25em;
+            // height: 3em;
         }
+
+        &.play {
+            grid-template-columns: repeat(2, 1fr);
+            align-items: flex-start;
+
+            &.rejoin {
+                grid-template-columns: 1fr;
+            }
+
+            button.ready:enabled {
+                color: forestgreen;
+                border-color: forestgreen;
+
+                &:hover {
+                    background: forestgreen;
+                    color: black;
+                    border-color: forestgreen;
+                }
+            }
+        }
+    }
+
+    .panes {
+        display: grid;
+        grid-template-columns: repeat(2, 1fr);
     }
 
     figure {
@@ -189,9 +216,14 @@ section {
 
         .list {
             grid-template-columns: 1fr 1fr;
+
+            &.play {
+                grid-template-columns: 1fr;
             }
         }
 
+    }
+
     .menu .team {
         grid-template-columns: 1fr;
 

client/assets/styles/player.less

@@ -46,6 +46,11 @@
         grid-area: msg;
         color: @white;
     }
+
+    &.winner {
+        color: @yellow;
+        font-weight: bold;
+    }
 }
 
 .chat {

client/assets/styles/styles.less

@@ -281,7 +281,7 @@ ul {
 }
 
 li {
-    margin-bottom: 0.5em;
+    margin-bottom: 0;
 }
 
 .logo {
@@ -299,6 +299,10 @@ li {
     background-position: center;
 }
 
+.mnni {
+    background-image: url("./../mnni.svg");
+}
+
 .avatar {
     grid-area: avatar;
     object-fit: contain;

client/src/components/faceoff.jsx

@@ -58,7 +58,8 @@ function Faceoff(props) {
         const constructs = team.constructs.map((c, i) =>
             <FaceoffConstruct key={c.id} construct={c}/>);
 
-        const classes = `team player ${team.ready ? 'ready' : ''}`
+        const winner = instance.winner === team.id;
+        const classes = `team player ${winner ? 'winner' : team.ready ? 'ready' : ''}`
         return (
             <div class={classes}>
                 {constructs}
@@ -71,7 +72,8 @@ function Faceoff(props) {
         const constructs = team.constructs.map((c, i) =>
             <FaceoffConstruct key={c.id} construct={c}/>);
 
-        const classes = `team opponent ${team.ready ? 'ready' : ''}`
+        const winner = instance.winner === team.id;
+        const classes = `team opponent ${winner ? 'winner' : team.ready ? 'ready' : ''}`
 
         return (
             <div class={classes}>
@@ -81,26 +83,19 @@ function Faceoff(props) {
     }
     function faceoffText() {
         if (!instance.winner) {
-            const zero = Date.parse(instance.phase_start);
-            const now = Date.now();
-            const end = Date.parse(instance.phase_end);
-            const timerPct = instance.phase_end
-                ? ((now - zero) / (end - zero) * 100)
-                : 100;
-            const fight = timerPct > 10 ? <h1> FIGHT </h1> : null;
             return (
                 <div class="faceoff-text">
-                    <h1> {otherTeam.name} </h1>
+                    <div class="opponent-text"> {otherTeam.name} </div>
-                    <h1> vs </h1>
+                    <div class="vs"> vs </div>
-                    <h1> {playerTeam.name} </h1>
+                    <div class="player-text"> {playerTeam.name} </div>
-                    {fight}
                 </div>
             );
         }
-        const winner = instance.winner === playerTeam.id ? playerTeam.name : otherTeam.name;
+        const winner = instance.winner === playerTeam.id ? playerTeam : otherTeam;
         return (
-            <div class="faceoff-text"> 
+            <div class="faceoff-text winner">
-                <h1> {winner} wins</h1>
+                <div> {winner.name} </div>
+                <div> wins </div>
             </div>
         )
 

client/src/components/instance.component.jsx

@@ -95,7 +95,6 @@ class Instance extends Component {
     bindSwipes() {
         const instance = document.getElementById('instance');
         if (!instance) {
-            console.log('no instance, binding in 50');
             return setTimeout(this.bindSwipes, 50);
         }
         if (this.h) this.h.destroy();
@@ -116,7 +115,6 @@ class Instance extends Component {
             setNavInstance((navInstance + 1) % 4);
         });
 
-        console.log('hammer gestures bound');
         return true;
     }
 }

client/src/components/instance.ctrl.jsx

@@ -43,11 +43,11 @@ function Controls(args) {
     const zero = Date.parse(instance.phase_start);
     const now = Date.now();
     const end = Date.parse(instance.phase_end);
-    const timerPct = instance.phase_end
+    const timerPct = instance.phase !== 'Finished' && instance.phase_end
         ? ((now - zero) / (end - zero) * 100)
         : 100;
 
-    const displayColour = !instance.phase_end
+    const displayColour = !instance.phase_end || instance.phase === 'Finished'
         ? '#222'
         : player.ready
             ? 'forestgreen'

client/src/components/mnni.jsx

@@ -0,0 +1,63 @@
+const { Component } = require('preact');
+const preact = require('preact');
+// const { connect } = require('preact-redux');
+
+const idleAnimation = require('./anims/idle');
+const wiggle = require('./anims/wiggle');
+
+class MnniAvatatr extends Component {
+    constructor() {
+        super();
+        // The animation ids are a check to ensure that animations are not repeated
+        // When a new account animation is communicated with state it will have a corresponding Id
+        // which is a count of how many resoluttions have passed
+        this.animations = [];
+        this.resetAnimations = this.resetAnimations.bind(this);
+    }
+
+    render() {
+        const { account, mtxActive } = this.props;
+        return (
+            <div
+                class="img avatar mnni"
+                id="mnni"
+                onMouseDown={this.onClick.bind(this)}>
+            </div>
+        );
+    }
+
+    onClick() {
+        if (this.props.mtxActive) {
+            return this.props.sendMtxAccountApply();
+        }
+        return this.animations.push(wiggle('mnni', this.idle));
+    }
+
+    componentDidMount() {
+        this.idle = idleAnimation('mnni');
+        return this.animations.push(this.idle);
+    }
+
+    resetAnimations() {
+        for (let i = this.animations.length - 1; i >= 0; i--) {
+            this.animations[i].reset();
+        }
+    }
+
+    componentWillUnmount() {
+        this.resetAnimations();
+    }
+}
+
+function Mnni(args) {
+    return (
+        <div class='player-box top'>
+            <MnniAvatatr />
+            <div class="msg">hi!</div>
+            <div class="name">MNNI</div>
+            <div class="score">&nbsp;</div>
+        </div>
+    );
+}
+
+module.exports = Mnni;

client/src/components/play.ctrl.jsx

@@ -1,155 +1,26 @@
 const preact = require('preact');
-const { connect } = require('preact-redux');
+// const { connect } = require('preact-redux');
-
-const { errorToast, infoToast } = require('../utils');
 
 const AccountBox = require('./account.box');
-
+const Mnni = require('./mnni');
-const addState = connect(
-    function receiveState(state) {
-        const {
-            ws,
-            instances,
-            invite,
-        } = state;
-
-        function sendInstanceState(id) {
-            ws.sendInstanceState(id);
-        }
-
-        function sendInstancePractice() {
-            ws.sendInstancePractice();
-        }
-
-        function sendInstanceQueue() {
-            ws.sendInstanceQueue();
-        }
-
-        function sendInstanceInvite() {
-            ws.sendInstanceInvite();
-        }
-
-        return {
-            instances,
-            invite,
-
-            sendInstanceState,
-            sendInstanceQueue,
-            sendInstancePractice,
-            sendInstanceInvite,
-        };
-    }
-);
 
 function JoinButtons(args) {
-    const {
-        instances,
-        invite,
-
-        sendInstanceState,
-        sendInstanceQueue,
-        sendInstancePractice,
-        sendInstanceInvite,
-    } = args;
-
-    const discordBtn = (
-        <button
-            class='discord-btn'
-            onClick={() => window.open('https://discord.gg/YJJgurM') }>
-                &nbsp;
-        </button>
-    );
-
-    if (instances.length) {
     return (
         <aside class='play-ctrl'>
             <div class="timer-container"></div>
             <div class="controls">
-                    {discordBtn}
-                    <div></div>
-                    <div></div>
-                    <AccountBox />
                 <div class="instance-ctrl-btns">
-                        <button disabled={true}>Chat</button>
+                    <button disabled={true}>-</button>
-                        <button
-                            class='pvp ready full'
-                            onClick={() => sendInstanceState(instances[0].id)}
-                            type="submit">
-                            Rejoin
-                        </button>
                 </div>
-                </div>
+                <Mnni />
-            </aside>
-        );
-    }
-
-    const inviteBtn = () => {
-        if (!invite) {
-            return (
-                <button
-                    class='pvp ready'
-                    onClick={() => sendInstanceInvite()}
-                    type="submit">
-                    Invite
-                </button>
-            );
-        }
-
-        function copyClick(e) {
-            const link = `${document.location.origin}#join=${invite}`;
-            const textArea = document.createElement('textarea', { id: '#clipboard' });
-            textArea.value = link;
-            document.body.appendChild(textArea);
-            textArea.focus();
-            textArea.select();
-
-            try {
-                document.execCommand('copy');
-                infoToast('Invite link copied to clipboard.');
-            } catch (err) {
-                console.error('link copy error', err);
-                errorToast('Invite link copy error.');
-            }
-
-            document.body.removeChild(textArea);
-            return true;
-        }
-
-        return (
-            <button
-                class='pvp ready enabled'
-                onClick={copyClick}
-                type="submit">
-                Copy <p> &#x1F517; </p>
-            </button>
-        );
-    };
-
-    return (
-        <aside class='play-ctrl'>
-            <div class="timer-container"></div>
-            <div class="controls">
-                <button
-                    class='practice ready'
-                    onClick={() => sendInstancePractice()}
-                    type="submit">
-                    Learn
-                </button>
-                {inviteBtn()}
-                {discordBtn}
                 <AccountBox />
                 <div class="instance-ctrl-btns">
                     <button disabled={true} >Chat</button>
-                    <button
+                    <button disabled={true}>-</button>
-                        class='pvp ready'
-                        onClick={() => sendInstanceQueue()}
-                        type="submit">
-                        PVP
-                    </button>
                 </div>
             </div>
         </aside>
     );
 }
 
-module.exports = addState(JoinButtons);
+module.exports = JoinButtons;

client/src/components/play.jsx

@@ -2,6 +2,7 @@
 const preact = require('preact');
 const { connect } = require('preact-redux');
 
+const { errorToast, infoToast } = require('../utils');
 const actions = require('./../actions');
 
 const VERSION = process.env.npm_package_version;
@@ -11,10 +12,35 @@ const addState = connect(
         const {
             ws,
             account,
+            instances,
+            invite,
         } = state;
 
+        function sendInstanceState(id) {
+            ws.sendInstanceState(id);
+        }
+
+        function sendInstancePractice() {
+            ws.sendInstancePractice();
+        }
+
+        function sendInstanceQueue() {
+            ws.sendInstanceQueue();
+        }
+
+        function sendInstanceInvite() {
+            ws.sendInstanceInvite();
+        }
+
         return {
             account,
+            instances,
+            invite,
+
+            sendInstanceState,
+            sendInstanceQueue,
+            sendInstancePractice,
+            sendInstanceInvite,
         };
     },
 
@@ -36,13 +62,69 @@ const addState = connect(
     }
 );
 
-
 function Play(args) {
     const {
         account,
+        instances,
+        invite,
+
+        sendInstanceState,
+        sendInstanceQueue,
+        sendInstancePractice,
+        sendInstanceInvite,
+
         setNav,
     } = args;
 
+    const inviteBtn = () => {
+        if (!invite) {
+            return (
+                <figure>
+                    <button
+                        class='ready'
+                        onClick={() => sendInstanceInvite()}
+                        type="submit">
+                        Invite
+                    </button>
+                    <figcaption>Invite a Friend</figcaption>
+                </figure>
+
+            );
+        }
+
+        function copyClick(e) {
+            const link = `${document.location.origin}#join=${invite}`;
+            const textArea = document.createElement('textarea', { id: '#clipboard' });
+            textArea.value = link;
+            document.body.appendChild(textArea);
+            textArea.focus();
+            textArea.select();
+
+            try {
+                document.execCommand('copy');
+                infoToast('Invite link copied to clipboard.');
+            } catch (err) {
+                console.error('link copy error', err);
+                errorToast('Invite link copy error.');
+            }
+
+            document.body.removeChild(textArea);
+            return true;
+        }
+
+        return (
+            <figure>
+                <button
+                    class='ready'
+                    onClick={copyClick}
+                    type="submit">
+                    Copy &#x1F517;
+                </button>
+                <figcaption>Invite Generated</figcaption>
+            </figure>
+        );
+    };
+
     const subscription = account.subscribed
         ? <button
             class="yellow-btn"
@@ -56,23 +138,56 @@ function Play(args) {
             Subscribe
         </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>
+        );
+
+        return (
+            <div class='list play rejoin'>
+               <figure>
+                    <button
+                        class="ready"
+                        onClick={() => sendInstanceState(instances[0].id)}>
+                        Rejoin
+                    </button>
+                    <figcaption>Resume playing</figcaption>
+                </figure>
+            </div>
+        );
+    }
+
     return (
         <section class="top">
             <div class="news">
-                <h2>v{VERSION}</h2>
+                <h1>v{VERSION}</h1>
-                <p>
+                {list()}
-                    Join our discord server to find opponents and talk to the devs. <br />
-                    Message @ntr or @mashy on discord. Invite link on the right control panel. <br />
-                    We will also give you some credits to try the mtx. <br />
-                </p>
-                <p>
-                    If you enjoy the game you can support the development:
-                    <ul>
-                        <li>Invite people to play pvp games and grow the community. </li>
-                        <li><b>Subscribe</b> or purchase <b>credits</b>.</li>
-                    </ul>
-                    glhf
-                </p>
             </div>
             <div>
                 <h1 class="credits">¤ {account.balance}</h1>
@@ -84,15 +199,19 @@ function Play(args) {
                         role="link">
                         Get Credits
                     </button>
-                    <div id="error-message"></div>
+                </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 />
                 </div>
                 <br />
-                <p>
+                <div>
-                    Click <b>LEARN</b> to practice the game without time controls. <br />
+                    If you enjoy the game you can support the development:
-                    Select <b>INVITE</b> then click <b>COPY LINK</b> to create a game invitation for a friend.<br />
+                    <ul>
-                    Select <b>PVP</b> to queue for a game against other players. <br />
+                        <li>Invite people to play pvp games and grow the community. </li>
-                </p>
+                        <li><b>Subscribe</b> or purchase <b>credits</b>.</li>
-                <p> If you can't find a match through pvp queue, ask around on discord. </p>
+                    </ul>
+                </div>
             </div>
         </section>
     );

client/src/components/player.box.jsx

@@ -67,9 +67,11 @@ function Scoreboard(args) {
         return '';
     };
 
+    const winner = player.score === 'Win';
+
     if (!isPlayer) {
         return (
-            <div class={`player-box top ${player.ready ? 'ready' : ''}`}>
+            <div class={`player-box top ${winner ? 'winner' : player.ready ? 'ready' : ''}`}>
                 <div></div>
                 <div class="score">{scoreText()}</div>
                 <div class="name">{player.name}</div>
@@ -80,7 +82,7 @@ function Scoreboard(args) {
     }
 
     return (
-        <div class={`player-box bottom ${player.ready ? 'ready' : ''}`}>
+        <div class={`player-box bottom ${winner ? 'winner': player.ready ? 'ready' : ''}`}>
             <div class="msg">{chat || '\u00A0'}</div>
             <div class="score">{scoreText()}</div>
             <div class="name">{player.name}</div>

client/src/components/scoreboard.jsx

@@ -1,52 +0,0 @@
-const preact = require('preact');
-const { connect } = require('preact-redux');
-
-const addState = connect(
-    function receiveState(state) {
-        const {
-            ws,
-            instance
-        } = state;
-
-        return { instance };
-    },
-);
-
-function ScoreBoard(args) {
-    const {
-        instance,
-    } = args;
-
-    const players = instance.players.map((p, i) => {
-        if (instance.phase === 'Finished') {
-            const winner = p.wins > instance.max_rounds / 2;
-            return <tr key={i}
-                class={p.winner ? 'ready' : ''}>
-                <td>{p.name}</td>
-                <td>{p.wins} / {p.losses}</td>
-                <td>{winner ? 'winner' : ''}</td>
-            </tr>
-        }
-
-        const text = instance.phase === 'Finished'
-            ? p.wins > instance.rounds / 2 && 'Winner'
-            : '';
-
-        return <tr key={i}
-            class={p.ready ? 'ready' : ''}>
-            <td>{p.name}</td>
-            <td>{p.wins} / {p.losses}</td>
-            <td>{p.ready ? 'ready' : ''}</td>
-        </tr>
-    });
-
-    return (
-        <table class="scoreboard">
-            <tbody>
-                {players}
-            </tbody>
-        </table>
-    );
-}
-
-module.exports = addState(ScoreBoard);

client/src/components/shop.jsx

@@ -41,7 +41,7 @@ function Shop(args) {
                     <b>Subscriptions</b> grant extra benefits:
                     <ul>
                         <li>¤150 per month</li>
-                        <li>Account icons</li>
+                        <li>Account img</li>
                         <li>Chat wheel</li>
                     </ul>
                 </p>

client/src/components/vertical.thresholds.js

@@ -1,172 +0,0 @@
-const preact = require('preact');
-const range = require('lodash/range');
-
-const { INFO } = require('./../constants');
-const { convertItem } = require('../utils');
-const shapes = require('./shapes');
-
-const ScoreBoard = require('./scoreboard');
-
-function InfoComponent(args) {
-    const {
-        itemInfo,
-        combiner,
-        player,
-        instance,
-    } = args;
-
-    args.info = 'PowerRG';
-    const { info } = args;
-
-    function Info() {
-        if (!info) return false;
-        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) {
-            return (
-                <div class="info-skill">
-                    <h2>{fullInfo.item}</h2>
-                    <div>{fullInfo.description}</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 = colours.map(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'
-                            : '';
-
-                        return (
-                            <figure key={j} alt={c.colour} class={reqClass} >
-                                {shapes.square([c])}
-                            </figure>
-                        );
-                    });
-
-                    return (
-                        <div key={c}>
-                            {dots}
-                        </div>
-                    );
-                });
-
-                const reqsMet = colours.every(c => teamColours[c] >= bonus.req[c]);
-
-                const reqClass = reqsMet
-                    ? ''
-                    : 'unmet';
-
-                return (
-                    <div key={i} class="spec-goal">
-                        <div class="colour-reqs">
-                            {colourGoals}
-                        </div>
-                        <div class={reqClass}>
-                            + {bonus.bonus}
-                            <hr />
-                        </div>
-                    </div>
-                );
-            });
-
-            return (
-                <div class="info-spec">
-                    <h2>{info}</h2>
-                    <div>{fullInfo.description}</div>
-                    <div class="thresholds">
-                        {thresholds}
-                    </div>
-                </div>
-            );
-        }
-
-        return (
-            <div class="info-item">
-                <h2>{fullInfo.item}</h2>
-                <div>{fullInfo.description}</div>
-            </div>
-        );
-    }
-
-    function Combos() {
-        if (!player) return false;
-
-        // show recipe for what's in combiner
-        if (combiner.some(u => u !== null)) {
-            const filteredCombos = itemInfo.combos
-                .filter(combo => combiner.every(u => u === null
-                    || combo.components.includes(player.vbox.bound[u])));
-            if (filteredCombos.length > 6) return false;
-            return (
-                <table>
-                    <tbody>
-                        {filteredCombos.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>
-            );
-        }
-
-        if (!info) 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>
-        );
-    }
-
-    const scoreboard = instance.phase === 'Lobby' || info
-        ? null
-        : <ScoreBoard />;
-
-    return (
-        <div class='info' >
-            {scoreboard}
-            <Info />
-            <Combos />
-        </div>
-    );
-}
-
-module.exports = InfoComponent;

client/src/socket.jsx

@@ -259,7 +259,7 @@ function createSocket(events) {
 
         QueueRequested: () => events.notify('pvp queue request received'),
         QueueJoined: () => events.notify('you have joined the pvp queue'),
-        InviteRequested: () => events.notify('pvp queue request received'),
+        InviteRequested: () => events.notify('pvp invite request received'),
         Invite: code => events.setInvite(code),
         InstanceChat: chat => events.setInstanceChat(chat),
         ChatWheel: wheel => events.setChatWheel(wheel),