Merge branch 'release/1.6.5' into face-imgs

CHANGELOG.md

@@ -2,6 +2,22 @@
 All notable changes to this project will be documented in this file.
 This project adheres to [Semantic Versioning](http://semver.org/).
 
+## [1.6.4] - 2019-10-24
+### Changed
+- Animations processing on client side reduced.
+
+## [1.6.3] - 2019-10-23
+### Added
+- MNNI: the MNML guide
+    - Delivers the message of the day
+
+### Fixed
+- Fixed issue where dots / hots would not trigger when reapplied at a higher speed
+- Changed layout of home page. UI elements for rerolling construct avatars moved to a separate tab.
+- Added highlighting to first round of a game against the bots to guide new users
+- Fixed UI issues related to scrolling
+- Improved the invite link
+
 ## [1.6.2] - 2019-10-20
 ### Fixed
 - Combiner bug where it would preview items for different combinations

VERSION

@@ -1 +1 @@
-1.6.2
+1.6.5

WORKLOG.md

@@ -3,39 +3,20 @@
 
 *PRODUCTION*
 
-* rename vbox to shop (just for display)
-* give the shop and inventory distinct delineation
-* proper victory / lose page instead of just face off (you are the winner or something)
 * vbox phase skill list navigator (overlay maybe?)
-
+* can't reset password without knowing password =\
-* clear active mtx after joining game
-
-* Check results stack for whether a construct has ticked a dot already. Current issue E.g.
-    Construct 1 with slow speed applies siphon round 1 on Enemy Construct 1
-    Construct 2 with fast speed applies siphon round 2 on Enemy Construct 2
-    Siphon tick won't proc at all that turn
-    It assumes the dot has triggered already from existing dot from pre_resolve
-    Instead of checking a dot already exists instead search for a matching dot tick event in results
 
 * mobile styles
 * mobile info page
-
 * fix info page for tablet layout
 
-* can't reset password without knowing password =\
 * Invert recharge
 
-  * serde serialize privatise
-  * chat
-
-* Convert spec 'Plus' -> '+' when it appears as combo text in combiner and in info text
-
 ## SOON
 
 * equip from shop (buy and equip without putting in your inventory) for bases
 * move item from one construct to another
 
-* bot game grind
 * ACP
   * essential
 * audio
@@ -75,6 +56,7 @@
 
 ## LATER
 * constants
+* bot game grind
 
 $$$
 * Items

acp/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mnml-client",
-  "version": "1.6.2",
+  "version": "1.6.5",
   "description": "",
   "main": "index.js",
   "scripts": {

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;
 
@@ -110,6 +85,17 @@ aside {
     transition-property: color, background;
     transition-duration: 0.25s;
     transition-timing-function: ease;
+
+    &:enabled {
+        color: forestgreen;
+        border-color: forestgreen;
+
+        &:hover {
+            background: forestgreen;
+            color: black;
+            border-color: forestgreen;
+        }
+    }
 }
 
 .team-page-ctrl {
@@ -142,11 +128,9 @@ aside {
         font-size: 200%;
         animation: co 0.75s cubic-bezier(0, 0, 1, 1) 0s infinite alternate;
     }
-}
 
-.play-ctrl {
+    .flex {
-    .controls {
+        flex: 1;
-        grid-template-rows: 1fr 1fr 1fr 3fr 1fr;
     }
 }
 

client/assets/styles/game.less

@@ -235,6 +235,9 @@
     width: 100%;
     height: 100%;
     position: absolute;
+    overflow: hidden;
+    max-height: 100%;
+    max-width: 100%;
 }
 
 .combat-anim svg {
@@ -339,6 +342,9 @@
 .skill-animation {
     opacity: 0;
     stroke-width: 5px;
+    overflow: hidden;
+    max-height: 100%;
+    max-width: 100%;
     // height: 5em;
 }
 

client/assets/styles/instance.less

@@ -97,8 +97,7 @@
     grid-template-columns: 1fr min-content 1fr;
     grid-template-areas:
         "vbox varrow inventory"
-        "vbox .     carrow"
+        "vbox varrow combiner";
-        "vbox .     combiner";
 }
 
 .vbox-inventory {
@@ -112,15 +111,6 @@
     justify-content: flex-end;
 }
 
-.vbox-combiner-arrow {
-    color: @gray-hint;
-    grid-area: carrow;
-    display: block;
-    text-align: center;
-    font-size: 2em;
-    vertical-align: center;
-}
-
 .vbox-arrow, .vbox-arrow-mobile {
     display: flex;
     justify-content:center;
@@ -413,9 +403,10 @@
     text-align: center;
     overflow: hidden;
     display: grid;
-    grid-template-rows: 1fr 1.5fr;
+    grid-template-rows: 1fr 0.5fr 1.5fr;
     grid-template-areas:
         "opponent"
+        "text"
         "player";
 
     h1 {
@@ -428,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 {
@@ -445,6 +431,39 @@
     }
 }
 
+.faceoff-text {
+    grid-area: text;
+    font-size: 200%;
+    text-transform: uppercase;
+    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*/
 .instance-nav { display: none; }
 

client/assets/styles/menu.less

@@ -35,6 +35,7 @@
 
         .construct {
             flex: 1 1 33%;
+            overflow: hidden;
 
             display: flex;
             flex-flow: column;
@@ -108,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 {
@@ -188,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

@@ -2,6 +2,7 @@
 
 .player-box {
     display: grid;
+    overflow: hidden;
     grid-template-areas:
         "msg"
         "img"
@@ -45,6 +46,11 @@
         grid-area: msg;
         color: @white;
     }
+
+    &.winner {
+        color: @yellow;
+        font-weight: bold;
+    }
 }
 
 .chat {

client/assets/styles/styles.less

@@ -26,7 +26,7 @@ html body {
 
     /* stops inspector going skitz*/
     overflow-x: hidden;
-    overflow-y: hidden;
+    // overflow-y: hidden;
 }
 
 // @media (min-width: 1921px) {
@@ -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/index.html

@@ -9,7 +9,7 @@
     <meta name="application-name" content="mnml">
     <meta name="description" content="mnml pvp tbs">
     <meta name="author" content="ntr@smokestack.io">
-    <title>mnml - abstract strategy</title>
+    <title>MNML - abstract strategy</title>
     <link rel="manifest" href="manifest.webmanifest">
     <link rel="stylesheet" href="./node_modules/izitoast/dist/css/iziToast.min.css"></script>
     <link href="https://fonts.googleapis.com/css?family=Jura" rel="stylesheet">
@@ -19,7 +19,7 @@
   </head>
   <body>
     <noscript>
-        <p>js is required to run mnml.</p>
+        <p>js is required to run MNML.</p>
         <p>this site has no ads. free to play forever.</p>
     </noscript>
   </body>

client/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mnml-client",
-  "version": "1.6.2",
+  "version": "1.6.5",
   "description": "",
   "main": "index.js",
   "scripts": {
@@ -15,9 +15,9 @@
   "license": "UNLICENSED",
   "dependencies": {
     "anime": "^0.1.2",
-    "animejs": "^3.0.1",
+    "animejs": "^3.1.0",
-    "async": "^2.6.2",
+    "async": "^2.6.3",
-    "borc": "^2.0.3",
+    "borc": "^2.1.1",
     "docco": "^0.7.0",
     "hammerjs": "^2.0.8",
     "izitoast": "^1.4.0",
@@ -26,15 +26,15 @@
     "lodash": "^4.17.15",
     "logrocket": "^1.0.3",
     "node-sass": "^4.12.0",
-    "parcel": "^1.12.3",
+    "parcel": "^1.12.4",
-    "preact": "^8.4.2",
+    "preact": "^8.5.2",
     "preact-compat": "^3.19.0",
-    "preact-context": "^1.1.3",
+    "preact-context": "^1.1.4",
     "preact-redux": "^2.1.0",
     "query-string": "^6.8.3",
     "react-string-replace": "^0.4.4",
-    "react-stripe-elements": "^3.0.0",
+    "react-stripe-elements": "^3.0.1",
-    "redux": "^4.0.0"
+    "redux": "^4.0.4"
   },
   "devDependencies": {
     "babel-core": "^6.26.3",
@@ -42,11 +42,11 @@
     "babel-preset-es2015": "^6.24.1",
     "babel-preset-react": "^6.24.1",
     "eslint": "^5.16.0",
-    "eslint-config-airbnb-base": "^13.1.0",
+    "eslint-config-airbnb-base": "^13.2.0",
-    "eslint-plugin-import": "^2.14.0",
+    "eslint-plugin-import": "^2.18.2",
-    "eslint-plugin-react": "^7.11.1",
+    "eslint-plugin-react": "^7.16.0",
-    "jest": "^18.0.0",
+    "jest": "^25.0.0",
-    "less": "^3.9.0"
+    "less": "^3.10.3"
   },
   "alias": {
     "react": "preact-compat",

client/src/animations.utils.jsx

@@ -1,4 +1,5 @@
 const { TIMES } = require('./constants');
+const { removeTier } = require('./utils');
 
 function none() {
     return {
@@ -7,7 +8,7 @@ function none() {
     };
 }
 
-function getObjects(resolution, stages, game, account) {
+function getObjects(resolution, game, account) {
     if (!resolution) return none();
     if (!resolution.target) return none();
 
@@ -52,7 +53,7 @@ function getObjects(resolution, stages, game, account) {
         };
     };
 
-    const skipSource = !stages.includes('START_SKILL')
+    const skipSource = !resolution.stages.includes('START_SKILL')
         || resolution.source.id === resolution.target.id;
 
     const animSource = skipSource
@@ -72,25 +73,6 @@ function getObjects(resolution, stages, game, account) {
     };
 }
 
-function getSequence(resolution) {
-    if (!resolution.event) return [];
-    if (resolution.event[0] === 'Inversion') return [];
-    if (['TargetKo', 'Ko'].includes(resolution.event[0])) return [];
-    if (['Skill', 'AoeSkill'].includes(resolution.event[0])) return ['START_SKILL', 'END_SKILL'];
-
-    switch (resolution.stages) {
-    case 'AllStages': return ['START_SKILL', 'END_SKILL', 'POST_SKILL'];
-    case 'StartEnd': return ['START_SKILL', 'END_SKILL'];
-    case 'StartPost': return ['START_SKILL', 'POST_SKILL'];
-    case 'StartOnly': return ['START_SKILL'];
-    case 'EndPost': return ['END_SKILL', 'POST_SKILL'];
-    case 'EndOnly': return ['END_SKILL'];
-    case 'PostOnly': return ['POST_SKILL'];
-    case 'NoStages': return [];
-    default: return ['START_SKILL', 'END_SKILL', 'POST_SKILL'];
-    }
-}
-
 function getTime(stages) {
     let time = 0;
     if (stages.includes('START_SKILL') && stages.includes('END_SKILL')) {
@@ -121,10 +103,10 @@ function getFocusTargets(resolution, game) {
     return [target];
 }
 
-function getText(resolution, sequence) {
+function getText(resolution) {
     const nullText = { text: null, constructId: null, life: null };
     if (!resolution) return nullText;
-    if (!sequence.includes('POST_SKILL')) return nullText;
+    if (!resolution.stages.includes('POST_SKILL')) return nullText;
 
     function generatePostSkill() {
         const [type, event] = resolution.event;
@@ -202,14 +184,19 @@ function getText(resolution, sequence) {
     };
 }
 
+function isCbAnim(skill) {
+    return ['Attack', 'Blast', 'Siphon', 'SiphonTick', 'Strike', 'Chaos', 'Slay', 'Heal',
+        'Buff', 'Amplify', 'Haste', 'Triage', 'TriageTick', 'Link', 'Hybrid', 'Intercept',
+        'Debuff', 'Curse', 'Decay', 'DecayTick', 'Purge', 'Silence', 'Restrict',
+        'Stun', 'Bash', 'Absorb', 'Sleep', 'Break', 'Ruin',
+        'Block', 'Sustain', 'Electrify', 'Electrocute', 'ElectrocuteTick',
+        'Counter', 'CounterAttack', 'Purify', 'Recharge', 'Reflect'].includes(removeTier(skill));
+}
+
 module.exports = {
     getFocusTargets,
     getObjects,
     getTime,
-    getSequence,
     getText,
+    isCbAnim,
 };
-
-
-        // if (!(resolution.target.id === construct.id)
-        //     && !(resolution.event[0] === 'AoeSkill' && targetTeam.includes(construct.id))) return false;

client/src/components/account.top.jsx

@@ -187,6 +187,7 @@ class AccountStatus extends Component {
                         class="login-input"
                         type="password"
                         name="new"
+                        autocomplete="new-password"
                         value={passwordState.password}
                         onInput={linkState(this, 'passwordState.password')}
                         placeholder="new password"
@@ -195,6 +196,7 @@ class AccountStatus extends Component {
                         class="login-input"
                         type="password"
                         name="confirm"
+                        autocomplete="new-password"
                         value={passwordState.confirm}
                         onInput={linkState(this, 'passwordState.confirm')}
                         placeholder="confirm"

client/src/components/controls.jsx

@@ -38,7 +38,7 @@ function Controls(args) {
 
     if (game) return <GameCtrl />;
     if (instance) return <InstanceCtrl />;
-    if (nav === 'play' || nav === 'shop' || !nav) return <PlayCtrl />
+    if (nav === 'play' || nav === 'shop' || nav === 'reshape' || !nav) return <PlayCtrl />
     if (nav === 'team' || nav === 'account') return <TeamCtrl />
 
     return false;

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}
@@ -66,11 +67,13 @@ function Faceoff(props) {
         );
     }
 
+
     function OpponentTeam(team) {
         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}>
@@ -78,10 +81,30 @@ function Faceoff(props) {
             </div>
         );
     }
+    function faceoffText() {
+        if (!instance.winner) {
+            return (
+                <div class="faceoff-text">
+                    <div class="opponent-text"> {otherTeam.name} </div>
+                    <div class="vs"> vs </div>
+                    <div class="player-text"> {playerTeam.name} </div>
+                </div>
+            );
+        }
+        const winner = instance.winner === playerTeam.id ? playerTeam : otherTeam;
+        return (
+            <div class="faceoff-text winner">
+                <div> {winner.name} </div>
+                <div> wins </div>
+            </div>
+        )
+
+    }
 
     return (
         <main class="faceoff">
             {OpponentTeam(otherTeam)}
+            {faceoffText()}
             {PlayerTeam(playerTeam)}
         </main>
     );

client/src/components/header.jsx

@@ -40,7 +40,7 @@ const addState = connect(
             dispatch(actions.setItemEquip(null));
             dispatch(actions.setItemUnequip([]));
             dispatch(actions.setVboxHighlight([]));
-
+            dispatch(actions.setMtxActive(null));
             return dispatch(actions.setNav(place));
         }
 
@@ -88,6 +88,11 @@ function Header(args) {
                     class={`login-btn ${nav === 'shop' ? 'highlight' : ''}`}>
                     Shop
                 </button>
+                <button
+                    onClick={() => navTo('reshape')}
+                    class={`login-btn ${nav === 'reshape' ? 'highlight' : ''}`}>
+                    Reshape
+                </button>
                 <button
                     onClick={accountClick}
                     class={`login-btn ${nav === 'account' ? 'highlight' : ''}`}>

client/src/components/info.component.jsx

@@ -152,10 +152,11 @@ function InfoComponent(args) {
                 : 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>{info} - {fullInfo.cost}b</h2>
+                    <h2>{infoText} - {fullInfo.cost}b</h2>
                     <h3>SPEC</h3>
                     {itemSourceDescription}
                     <div>{infoDescription}</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/main.top.jsx

@@ -6,6 +6,7 @@ const actions = require('./../actions');
 const AccountTop = require('./account.top');
 const Play = require('./play');
 const Shop = require('./shop');
+const Reshape = require('./reshape');
 
 const addState = connect(
     function receiveState(state) {
@@ -27,6 +28,7 @@ function Top(args) {
     if (nav === 'account') return <AccountTop />;
     if (nav === 'play') return <Play />
     if (nav === 'shop') return <Shop />
+    if (nav === 'reshape') return <Reshape />
 
     return false;
 }

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,156 +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 class="instance-ctrl-btns">
-                    <div class="flex">
+                    <button disabled={true}>-</button>
-                        <div>&nbsp;</div>
                 </div>
+                <Mnni />
                 <AccountBox />
                 <div class="instance-ctrl-btns">
                     <button disabled={true} >Chat</button>
-                        <button
+                    <button class="flex" disabled={true}>-</button>
-                            class='pvp ready full'
-                            onClick={() => sendInstanceState(instances[0].id)}
-                            type="submit">
-                            Rejoin
-                        </button>
-                    </div>
-                </div>
-            </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
-                        class='pvp ready'
-                        onClick={() => sendInstanceQueue()}
-                        type="submit">
-                        PVP
-                    </button>
                 </div>
             </div>
         </aside>
     );
 }
 
-module.exports = addState(JoinButtons);
+module.exports = JoinButtons;

client/src/components/play.jsx

@@ -1,12 +1,8 @@
 // const { connect } = require('preact-redux');
 const preact = require('preact');
 const { connect } = require('preact-redux');
-const { Elements } = require('react-stripe-elements');
-
-const Header = require('./header');
-const Team = require('./team');
-const StripeBtns = require('./stripe.buttons');
 
+const { errorToast, infoToast } = require('../utils');
 const actions = require('./../actions');
 
 const VERSION = process.env.npm_package_version;
@@ -16,17 +12,35 @@ const addState = connect(
         const {
             ws,
             account,
-            shop,
+            instances,
+            invite,
         } = state;
 
-        function mtxBuy(mtx) {
+        function sendInstanceState(id) {
-            return ws.sendMtxBuy(mtx.variant);
+            ws.sendInstanceState(id);
+        }
+
+        function sendInstancePractice() {
+            ws.sendInstancePractice();
+        }
+
+        function sendInstanceQueue() {
+            ws.sendInstanceQueue();
+        }
+
+        function sendInstanceInvite() {
+            ws.sendInstanceInvite();
         }
 
         return {
             account,
-            shop,
+            instances,
-            mtxBuy,
+            invite,
+
+            sendInstanceState,
+            sendInstanceQueue,
+            sendInstancePractice,
+            sendInstanceInvite,
         };
     },
 
@@ -51,32 +65,66 @@ const addState = connect(
 function Play(args) {
     const {
         account,
-        shop,
+        instances,
-        mtxBuy,
+        invite,
+
+        sendInstanceState,
+        sendInstanceQueue,
+        sendInstancePractice,
+        sendInstanceInvite,
 
-        setMtxActive,
         setNav,
     } = args;
 
-    if (!shop) return false;
+    const inviteBtn = () => {
-
+        if (!invite) {
-    const useMtx = (item, i) => {
-        const price = item === 'Rename' ? 5 : 1;
             return (
-            <figure key={i} onClick={() => setMtxActive(item)} >
+                <figure>
-                <figcaption>{item}</figcaption>
+                    <button
-                <button disabled={account.balance === 0}>¤{price}</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>Click to Copy</figcaption>
             </figure>
         );
     };
 
-    const availableMtx = (item, i) => (
-        <figure key={i}>
-            <figcaption>Enable {item.variant}</figcaption>
-            <button onClick={() => mtxBuy(item)} disabled={account.balance < item.credits}>¤{item.credits}</button>
-        </figure>
-    );
-
     const subscription = account.subscribed
         ? <button
             class="yellow-btn"
@@ -90,21 +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 class="play-p">Use the buttons on the right to join an instance.</p>
+                {list()}
-                <p>
-                    Select <b>PVP</b> to play against other players.<br />
-                    Select <b>INVITE</b> then click <b>COPY LINK</b> to generate an instance invitation for a friend.<br />
-                    Click <b>LEARN</b> to practice the game without time controls.
-                </p>
-                <p>Join our Discord server to find opponents, message @ntr or @mashy for some credits to get started.</p>
-                <p>
-                    If you enjoy the game please support its development by <b>subscribing</b> or purchasing <b>credits</b>.<br />
-                    glhf
-                </p>
             </div>
             <div>
                 <h1 class="credits">¤ {account.balance}</h1>
@@ -116,13 +199,18 @@ function Play(args) {
                         role="link">
                         Get Credits
                     </button>
-                    <div id="error-message"></div>
                 </div>
-                <div class='list'>
+                <div>
-                    {shop.owned.map(useMtx)}
+                        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>
-                <div class='list'>
+                <br />
-                    {shop.available.map(availableMtx)}
+                <div>
+                    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>
                 </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/reshape.jsx

@@ -0,0 +1,129 @@
+// const { connect } = require('preact-redux');
+const preact = require('preact');
+const { connect } = require('preact-redux');
+
+const actions = require('./../actions');
+
+const addState = connect(
+    function receiveState(state) {
+        const {
+            ws,
+            account,
+            shop,
+        } = state;
+
+        function mtxBuy(mtx) {
+            return ws.sendMtxBuy(mtx.variant);
+        }
+
+        return {
+            account,
+            shop,
+            mtxBuy,
+        };
+    },
+
+    function receiveDispatch(dispatch) {
+        function setMtxActive(mtx) {
+            dispatch(actions.setConstructRename(null));
+            dispatch(actions.setMtxActive(mtx));
+            return true;
+        }
+
+        function setNav(place) {
+            return dispatch(actions.setNav(place));
+        }
+
+        return {
+            setMtxActive,
+            setNav,
+        };
+    }
+);
+
+function Reshape(args) {
+    const {
+        account,
+        shop,
+        mtxBuy,
+
+        setMtxActive,
+        setNav,
+    } = args;
+
+    if (!shop) return false;
+
+    const useMtx = (item, i) => {
+        const price = item === 'Rename' ? 5 : 1;
+        return (
+            <figure key={i} onClick={e => {
+                e.stopPropagation();
+                setMtxActive(item);
+            }}>
+                <figcaption>{item}</figcaption>
+                <button disabled={account.balance === 0}>¤{price}</button>
+            </figure>
+        );
+    };
+
+    const availableMtx = (item, i) => (
+        <figure key={i}>
+            <figcaption>Enable {item.variant}</figcaption>
+            <button onClick={() => mtxBuy(item)} disabled={account.balance < item.credits}>¤{item.credits}</button>
+        </figure>
+    );
+
+    const subscription = account.subscribed
+        ? <button
+            class="yellow-btn"
+            disabled>
+            Subscribed
+        </button>
+        : <button
+            onClick={() => setNav('shop')}
+            class="yellow-btn"
+            role="link">
+            Subscribe
+        </button>;
+
+    return (
+        <section class="top" onClick={() => setMtxActive(null)}>
+            <div class="news">
+                <p class="play-p">Use credits to modify your construct names and appearance.</p>
+                <ul>
+
+                    <li> Purchase image sets to unlock different types of avatars. </li>
+                    <li> You can reroll any avatar to a new avatar from owned sets. </li>
+                    <li> Reroll avatars by clicking the owned set and then the construct you wish to reroll. </li>
+                    <li>Press escape to clear any active mtx. </li>
+                </ul>
+
+                <p>
+                    You can switch out your active constructs in the account settings. <br />
+                    Accounts start with 4 constructs by default. <br />
+                </p>
+            </div>
+            <div>
+                <h1 class="credits">¤ {account.balance}</h1>
+                <div class='list'>
+                    {subscription}
+                    <button
+                        onClick={() => setNav('shop')}
+                        class="yellow-btn"
+                        role="link">
+                        Get Credits
+                    </button>
+                    <div id="error-message"></div>
+                </div>
+                <div class='list'>
+                    {shop.owned.map(useMtx)}
+                </div>
+                <div class='list'>
+                    {shop.available.map(availableMtx)}
+                </div>
+            </div>
+        </section>
+    );
+}
+
+module.exports = addState(Reshape);

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,8 @@ function Shop(args) {
                     <b>Subscriptions</b> grant extra benefits:
                     <ul>
                         <li>¤150 per month</li>
-                        <li>More community features in the future including account icons and chat wheel</li>
+                        <li>Account img</li>
+                        <li>Chat wheel</li>
                     </ul>
                 </p>
             </div>

client/src/components/vbox.component.jsx

@@ -97,7 +97,7 @@ function Vbox(args) {
     const {
         combiner,
         navInstance,
-        // instance,
+        instance,
         itemInfo,
         player,
         reclaiming,
@@ -161,11 +161,20 @@ function Vbox(args) {
 
     function availableBtn(v, group, index) {
         if (!v) return <button disabled class='empty' >&nbsp;</button>;
+        const tutorial = instance.time_control === 'Practice'
+            && instance.rounds.length === 1
+            && group === 0
+            && combiner.length === 0
+            && vboxSelected.length === 0
+            && vbox.bits > 10
+            && vbox.free[0].filter(c => c).length > 4
+            ? 'combo-border' : null;
 
         const selected = vboxSelected[0] === group && vboxSelected[1] === index;
 
         // state not yet set in double click handler
         function onDblClick(e) {
+            clearVboxSelected();
             sendVboxAccept(group, index);
             e.stopPropagation();
         }
@@ -194,7 +203,7 @@ function Vbox(args) {
             } return false;
         }) ? 'combo-border' : '';
 
-        const classes = `${v.toLowerCase()} ${selected ? 'highlight' : ''} ${comboHighlight}`;
+        const classes = `${v.toLowerCase()} ${selected ? 'highlight' : ''} ${comboHighlight} ${tutorial}`;
 
         if (shapes[v]) {
             return (
@@ -267,6 +276,16 @@ function Vbox(args) {
             return <button disabled={!inventoryHighlight} class={inventoryHighlight ? 'receiving' : 'empty'} >&nbsp;</button>;
         }
 
+        const tutorial = instance.time_control === 'Practice'
+            && instance.rounds.length === 1
+            && i === 0
+            && combiner.length === 0
+            && vboxSelected.length === 0
+            && vbox.bits === 16
+            && vbox.bound.length === 5
+            && vbox.free[0].filter(c => c).length === 4
+            ? 'combo-border' : null;
+
         const combinerItems = combiner.map(j => vbox.bound[j]);
         const combinerCount = countBy(combinerItems, co => co);
 
@@ -306,7 +325,7 @@ function Vbox(args) {
 
         const highlighted = combiner.indexOf(i) > -1;
         const border = buttons[removeTier(v)] ? buttons[removeTier(v)]() : '';
-        const classes = `${highlighted ? 'highlight' : border} ${comboHighlight}`;
+        const classes = `${highlighted ? 'highlight' : border} ${comboHighlight} ${tutorial}`;
         if (shapes[v]) {
             return (
                 <button
@@ -352,6 +371,7 @@ function Vbox(args) {
                 return true;
             }));
             comboItem = comboItemObj ? comboItemObj.item : 'refine';
+            comboItem = comboItem.replace('Plus', '+');
             text = `Combine - ${comboItem}`;
         }
 

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/components/welcome.jsx

@@ -8,7 +8,7 @@ const Help = require('./welcome.help');
 const Demo = require('./demo');
 
 function Welcome() {
-    const page = this.state.page || 'login';
+    const page = this.state.page || 'register';
 
     const navRegister = () => this.setState({ page: 'register' });
     const pageEl = () => {

client/src/components/welcome.register.jsx

@@ -63,6 +63,7 @@ function Register(args) {
                 class="login-input"
                 type="password"
                 placeholder="password"
+                autocomplete="new-password"
                 value={this.state.password}
                 onInput={linkState(this, 'password')}
             />
@@ -71,6 +72,7 @@ function Register(args) {
                 class={`${registerConfirm() ? '' : 'red'} login-input`}
                 type="password"
                 placeholder="confirm"
+                autocomplete="new-password"
                 value={this.state.confirm}
                 onInput={linkState(this, 'confirm')}
             />

client/src/events.jsx

@@ -7,7 +7,7 @@ const sample = require('lodash/sample');
 const actions = require('./actions');
 const { TIMES } = require('./constants');
 const animations = require('./animations.utils');
-const { infoToast, errorToast, removeTier } = require('./utils');
+const { infoToast, errorToast } = require('./utils');
 
 function registerEvents(store) {
     function notify(msg) {
@@ -28,7 +28,8 @@ function registerEvents(store) {
 
     function setTeam(team) {
         store.dispatch(actions.setTeam(team));
-        setNav('play');
+        const { nav } = store.getState();
+        if (nav !== 'reshape') setNav('play');
     }
 
     function setSubscription(sub) {
@@ -62,27 +63,26 @@ function registerEvents(store) {
             if (game.resolved.length !== currentGame.resolved.length) {
                 store.dispatch(actions.setAnimating(true));
                 store.dispatch(actions.setGameSkillInfo(null));
-
                 // stop fetching the game state til animations are done
                 const newRes = game.resolved.slice(currentGame.resolved.length);
                 return eachSeries(newRes, (r, cb) => {
-                    if (['Disable', 'TargetKo'].includes(r.event[0])) return cb();
+                    if (!r.event || r.stages === '') return cb();
-
+                    const timeout = animations.getTime(r.stages);
-                    // convert server enum into anims keywords
+                    const anims = animations.getObjects(r, game, account);
-                    // todo make serersideonly
+                    const text = animations.getText(r);
-                    const sequence = animations.getSequence(r);
-                    const timeout = animations.getTime(sequence);
-                    const anims = animations.getObjects(r, sequence, game, account);
-                    const text = animations.getText(r, sequence);
                     store.dispatch(actions.setAnimFocus(animations.getFocusTargets(r, game)));
                     if (anims.animSkill) store.dispatch(actions.setAnimSkill(anims.animSkill));
 
-                    if (sequence.includes('START_SKILL') && anims.animSource) store.dispatch(actions.setAnimSource(anims.animSource));
+                    if (r.stages.includes('START_SKILL') && anims.animSource) {
-                    if (sequence.includes('END_SKILL') && anims.animTarget) {
+                        store.dispatch(actions.setAnimSource(anims.animSource));
-                        store.dispatch(actions.setAnimTarget(anims.animTarget));
-                        if (!['Banish', 'Invert'].includes(removeTier(anims.animTarget.skill))) store.dispatch(actions.setAnimCb(cb));
                     }
-                    if (sequence.includes('POST_SKILL') && text) {
+
+                    if (r.stages.includes('END_SKILL') && anims.animTarget) {
+                        store.dispatch(actions.setAnimTarget(anims.animTarget));
+                        if (animations.isCbAnim(anims.animSkill)) store.dispatch(actions.setAnimCb(cb));
+                    }
+
+                    if (r.stages.includes('POST_SKILL') && text) {
                         // timeout to prevent text classes from being added too soon
                         if (timeout === TIMES.POST_SKILL_DURATION_MS) {
                             store.dispatch(actions.setAnimText(text));
@@ -93,14 +93,15 @@ function registerEvents(store) {
                             );
                         }
                     }
+
                     return setTimeout(() => {
                         store.dispatch(actions.setAnimSkill(null));
                         store.dispatch(actions.setAnimSource(null));
                         store.dispatch(actions.setAnimTarget(null));
                         store.dispatch(actions.setAnimText(null));
                         store.dispatch(actions.setAnimFocus([]));
-                        if (!sequence.includes('END_SKILL') || (anims.animSkill && ['Banish', 'Invert'].includes(anims.animSkill))) return cb();
+                        if (r.stages.includes('END_SKILL') && animations.isCbAnim(anims.animSkill)) return true;
-                        return true;
+                        return cb();
                     }, timeout);
                 }, err => {
                     if (err) return console.error(err);
@@ -179,6 +180,7 @@ function registerEvents(store) {
     }
 
     function setAccountInstances(v) {
+        store.dispatch(actions.setMtxActive(null));
         return store.dispatch(actions.setInstances(v));
     }
 

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),

client/src/utils.jsx

@@ -142,6 +142,7 @@ function randomPoints(numPoints, radius, dimensions) {
 }
 
 const removeTier = skill => {
+    if (!skill) return skill;
     if (skill.includes('SiphonTick')) return 'SiphonTick';
     if (skill.includes('TriageTick')) return 'TriageTick';
     if (skill.includes('DecayTick')) return 'DecayTick';

ops/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mnml-ops",
-  "version": "1.6.2",
+  "version": "1.6.5",
   "description": "",
   "main": "index.js",
   "scripts": {

server/Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "mnml"
-version = "1.6.2"
+version = "1.6.5"
 authors = ["ntr <ntr@smokestack.io>"]
 
 [dependencies]

server/src/construct.rs

@@ -606,7 +606,7 @@ impl Construct {
                 });
             },
             true => {
-                events.push(Event::Inversion { skill });
+                // events.push(Event::Inversion { skill });
 
                 // there is no green shield (yet)
                 let current_green_life = self.green_life();
@@ -669,7 +669,7 @@ impl Construct {
                 });
             },
             true => {
-                events.push(Event::Inversion { skill });
+                // events.push(Event::Inversion { skill });
 
                 let current_green_life = self.green_life();
                 self.green_life.increase(modified_power);
@@ -738,7 +738,7 @@ impl Construct {
                 });
             },
             true => {
-                events.push(Event::Inversion { skill });
+                // events.push(Event::Inversion { skill });
 
                 let current_green_life = self.green_life();
                 self.green_life.increase(modified_power);

server/src/game.rs

@@ -377,9 +377,11 @@ impl Game {
         let mut sorted = self.stack.clone();
         sorted.iter_mut()
             .for_each(|s| {
+                if !s.skill.is_tick() {
                     let caster = self.construct_by_id(s.source_construct_id).unwrap();
                     let speed = caster.skill_speed(s.skill);
                     s.speed = speed;
+                }
             });
 
         sorted.sort_unstable_by_key(|s| s.speed);

server/src/instance.rs

@@ -81,7 +81,7 @@ impl TimeControl {
 
     pub fn lobby_timeout(&self) -> DateTime<Utc> {
         Utc::now()
-            .checked_add_signed(Duration::seconds(30))
+            .checked_add_signed(Duration::seconds(15))
             .expect("could not set phase end")
     }
 

server/src/skill.rs

@@ -16,7 +16,7 @@ pub fn dev_resolve(a_id: Uuid, b_id: Uuid, skill: Skill) -> Resolutions {
     let mut b = Construct::new();
     b.id = b_id;
     if skill.aoe() { // Send an aoe skill event for anims
-        resolutions.push(Resolution::new(&a, &b).event(Event::AoeSkill { skill }));
+        resolutions.push(Resolution::new(&a, &b).event(Event::AoeSkill { skill }).stages(EventStages::StartEnd));
     }
     return resolve(skill, &mut a, &mut b, resolutions);
 }
@@ -36,7 +36,7 @@ pub fn pre_resolve(cast: &Cast, game: &mut Game, mut resolutions: Resolutions) -
 
     if skill.aoe() { // Send an aoe skill event for anims
         resolutions.push(Resolution::new(&source,
-            &game.construct_by_id(cast.target_construct_id).unwrap().clone()).event(Event::AoeSkill { skill }));
+            &game.construct_by_id(cast.target_construct_id).unwrap().clone()).event(Event::AoeSkill { skill }).stages(EventStages::StartEnd));
     }
 
     for target_id in targets {
@@ -68,13 +68,13 @@ pub fn pre_resolve(cast: &Cast, game: &mut Game, mut resolutions: Resolutions) -
 }
 
 pub fn resolve(skill: Skill, source: &mut Construct, target: &mut Construct, mut resolutions: Vec<Resolution>) -> Resolutions {
-    if let Some(disable) = source.disabled(skill) {
+    if let Some(_disable) = source.disabled(skill) {
-        resolutions.push(Resolution::new(source, target).event(Event::Disable { disable, skill }));
+        // resolutions.push(Resolution::new(source, target).event(Event::Disable { disable, skill }).stages(EventStages::PostOnly));
         return resolutions;
     }
 
     if target.is_ko() {
-        resolutions.push(Resolution::new(source, target).event(Event::TargetKo { skill }));
+        // resolutions.push(Resolution::new(source, target).event(Event::TargetKo { skill }).stages(EventStages::PostOnly));
         return resolutions;
     }
 
@@ -342,7 +342,7 @@ fn post_resolve(_skill: Skill, game: &mut Game, mut resolutions: Resolutions) ->
         };
 
         if target.is_ko() {
-            resolutions.push(Resolution::new(&source, &target).event(Event::Ko()));
+            resolutions.push(Resolution::new(&source, &target).event(Event::Ko()).stages(EventStages::PostOnly));
             target.effects.clear();
         }
 
@@ -384,7 +384,7 @@ impl Cast {
             source_player_id: source.account,
             target_construct_id: target.id,
             skill,
-            speed: 0,
+            speed: source.skill_speed(skill),
         }
     }
 
@@ -408,13 +408,21 @@ pub struct EventConstruct {
 
 #[derive(Debug,Clone,PartialEq,Serialize,Deserialize)]
 pub enum EventStages {
+    #[serde(rename = "START_SKILL END_SKILL POST_SKILL")]
     AllStages,  // Anim Anim Anim
+    #[serde(rename = "START_SKILL END_SKILL")]
     StartEnd,   // Anim Anim Skip
+    #[serde(rename = "START_SKILL POST_SKILL")]
     StartPost,  // Anim Skip Anim
+    #[serde(rename = "START_SKILL")]
     StartOnly,  // Anim Skip Skip
+    #[serde(rename = "END_SKILL POST_SKILL")]
     EndPost,    // Skip Anim Anim
+    #[serde(rename = "END_SKILL")]
     EndOnly,    // Skip Anim Skip
+    #[serde(rename = "POST_SKILL")]
     PostOnly,   // Skip Skip Anim
+    #[serde(rename = "")]
     NoStages,   // Skip Skip Skip
 }
 
@@ -1499,7 +1507,13 @@ fn heal(source: &mut Construct, target: &mut Construct, mut results: Resolutions
 }
 
 fn triage(source: &mut Construct, target: &mut Construct, mut results: Resolutions, skill: Skill) -> Resolutions {
-    let skip_tick = target.effects.iter().any(|e| e.effect == Effect::Triage);
+    let skip_tick = target.effects.iter().any(|e| {
+        match e.effect {
+            Effect::Triage => source.skill_speed(skill) <= e.tick.unwrap().speed,
+            _ => false,
+        }
+    });
+
     let ConstructEffect { effect, duration, meta, tick: _ } = skill.effect()[0];
     let tick_skill = match meta {
         Some(EffectMeta::Skill(s)) => s,
@@ -1565,7 +1579,12 @@ fn decay(source: &mut Construct, target: &mut Construct, mut results: Resolution
     let wither = skill.effect()[0];
     results.push(Resolution::new(source, target).event(target.add_effect(skill, wither)));
 
-    let skip_tick = target.effects.iter().any(|e| e.effect == Effect::Decay);
+    let skip_tick = target.effects.iter().any(|e| {
+        match e.effect {
+            Effect::Decay => source.skill_speed(skill) <= e.tick.unwrap().speed,
+            _ => false,
+        }
+    });
     let ConstructEffect { effect, duration, meta, tick: _ } = skill.effect()[1];
     let tick_skill = match meta {
         Some(EffectMeta::Skill(s)) => s,
@@ -1619,7 +1638,12 @@ fn electrocute(source: &mut Construct, target: &mut Construct, mut results: Reso
         _ => panic!("no electrocute tick skill"),
     };
 
-    let skip_tick = target.effects.iter().any(|e| e.effect == Effect::Electrocute);
+    let skip_tick = target.effects.iter().any(|e| {
+        match e.effect {
+            Effect::Electrocute => source.skill_speed(skill) <= e.tick.unwrap().speed,
+            _ => false,
+        }
+    });
     let electrocute = ConstructEffect::new(effect, duration).set_tick(Cast::new_tick(source, target, tick_skill));
     results.push(Resolution::new(source, target)
         .event(target.add_effect(skill, electrocute))
@@ -1716,7 +1740,12 @@ fn recharge(source: &mut Construct, target: &mut Construct, mut results: Resolut
 
 fn siphon(source: &mut Construct, target: &mut Construct, mut results: Resolutions, skill: Skill) -> Resolutions {
 
-    let skip_tick = target.effects.iter().any(|e| e.effect == Effect::Siphon);
+    let skip_tick = target.effects.iter().any(|e| {
+        match e.effect {
+            Effect::Siphon => source.skill_speed(skill) <= e.tick.unwrap().speed,
+            _ => false,
+        }
+    });
     let ConstructEffect { effect, duration, meta, tick: _ } = skill.effect()[0];
     let tick_skill = match meta {
         Some(EffectMeta::Skill(s)) => s,
@@ -1790,7 +1819,7 @@ fn silence(source: &mut Construct, target: &mut Construct, mut results: Resoluti
 }
 
 fn purge(source: &mut Construct, target: &mut Construct, mut results: Resolutions, skill: Skill) -> Resolutions {
-    results.push(Resolution::new(source, target).event(Event::Skill { skill }));
+    results.push(Resolution::new(source, target).event(Event::Skill { skill }).stages(EventStages::StartEnd));
     while let Some(i) = target.effects
         .iter()
         .position(|ce| {
@@ -1824,7 +1853,7 @@ fn purge(source: &mut Construct, target: &mut Construct, mut results: Resolution
 }
 
 fn purify(source: &mut Construct, target: &mut Construct, mut results: Resolutions, skill: Skill) -> Resolutions {
-    results.push(Resolution::new(source, target).event(Event::Skill { skill }));
+    results.push(Resolution::new(source, target).event(Event::Skill { skill }).stages(EventStages::StartEnd));
     let amount = source.green_power().pct(skill.multiplier());
     while let Some(i) = target.effects
         .iter()
@@ -1848,7 +1877,7 @@ fn purify(source: &mut Construct, target: &mut Construct, mut results: Resolutio
 }
 
 fn banish(source: &mut Construct, target: &mut Construct, mut results: Resolutions, skill: Skill) -> Resolutions {
-    results.push(Resolution::new(source, target).event(Event::Skill { skill }));
+    results.push(Resolution::new(source, target).event(Event::Skill { skill }).stages(EventStages::StartEnd));
 
     let red_damage = target.red_life().pct(skill.multiplier());
     let blue_damage = target.blue_life().pct(skill.multiplier());
@@ -1983,10 +2012,10 @@ mod tests {
         // attack should heal and recharge red shield
         let mut results = attack(&mut x, &mut y, vec![], Skill::Attack);
 
-        match results.remove(0).event {
+        // match results.remove(0).event {
-            Event::Inversion { skill } => assert_eq!(skill, Skill::Attack),
+        //    Event::Inversion { skill } => assert_eq!(skill, Skill::Attack),
-            _ => panic!("not inversion"),
+        //    _ => panic!("not inversion"),
-        };
+        //};
 
         match results.remove(0).event {
             Event::Healing { skill: _, overhealing: _, amount } => assert!(amount > 0),