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

client/assets/styles/game.less

@@ -199,7 +199,7 @@
     position: absolute;
     top: 35%;
     height: 15%;
-    width: 90%;
+    width: calc(90% - 1.25em);
 }
 
 .resolving-skill {
@@ -239,6 +239,9 @@
     overflow: hidden;
     max-height: 100%;
     max-width: 100%;
+
+    display: flex;
+    flex-flow: column;
 }
 
 .combat-anim svg {
@@ -346,104 +349,4 @@
     overflow: hidden;
     max-height: 100%;
     max-width: 100%;
-    // height: 5em;
-}
-
-@media (max-width: 1000px) {
-    .game {
-        grid-template-areas:
-            "opponent"
-            "target  "
-            "player  ";
-
-        grid-template-rows: 1fr 0.2fr 1.5fr;
-        grid-template-columns: 1fr;
-
-        .game-construct  {
-            display: grid;
-            grid-template-columns: 1fr;
-            grid-template-rows: min-content 1fr;
-
-            .left {
-                width: 100%;
-                grid-template-areas:
-                    "skills"
-                    "effects";
-                grid-template-columns: 1fr;
-                grid-template-rows: min-content min-content;
-            }
-
-            .skills {
-                button {
-                    padding: 0 0.5em ;
-                    margin: 0;
-                }
-                button.active {
-                    background: #2c2c2c;
-                }
-            }
-
-            .stats div {
-                padding: 0;
-            }
-
-            .stats .max {
-                display: none;
-            }
-
-            .stats .value {
-                display: flex;
-            }
-
-            .stats svg {
-                height: 1em;
-            }
-
-            .stats div {
-                margin: 0 0.2em;
-            }
-
-            .effects {
-                font-size: 100%;
-            }
-
-            .stats, .name {
-                font-size: 75%;
-            }
-
-            .skills button {
-                font-size: 50%;
-            }
-
-            .skill-description {
-                font-size: 65%;
-            }
-        }
-
-        .player {
-            width: calc(100% - 1em);
-            bottom: 3em;
-            height: calc(50% - 3em);
-        }
-
-        .opponent {
-            width: calc(100% - 1em);
-            .game-construct {
-                display: grid;
-                grid-template-columns: 1fr;
-                grid-template-rows: min-content 1fr;
-            }
-        }
-
-        #targeting, .resolving-skill {
-            width: calc(100% - 1em);
-        }
-
-        .player {
-            width: calc(100% - 1em);
-            bottom: 3em;
-            height: calc(50% - 3em);
-        }
-    }
-
 }

client/assets/styles/instance.less

@@ -228,7 +228,7 @@
         }
 
         figcaption {
-            font-size: 75%;
+            // font-size: 75%;
             line-height: initial;
         }
 
@@ -246,7 +246,7 @@
         text-align: center;
 
         figcaption {
-            font-size: 75%;
+            // font-size: 75%;
         }
 
         // give speed some space

client/assets/styles/instance.mobile.less

@@ -17,9 +17,7 @@
 
 @media (max-width: 800px) {
     .instance {
-        overflow-y: scroll;
+        font-size: 6pt;
-        font-size: 8pt;
-        display: grid;
         grid-template-columns: 1fr;
         grid-template-rows: min-content 1fr;
         grid-template-areas:
@@ -30,141 +28,4 @@
             display: none;
         }
     }
-
-    .instance .nav-btn { display: initial; }
-
-    .vbox {
-        grid-area: vbox;
-        margin-bottom: 0;
-        display: grid;
-        grid-template-rows: min-content min-content min-content min-content;
-        grid-template-columns: 1fr;
-        grid-template-areas:
-            "vbox"
-            "varrow"
-            "inventory"
-            "combiner";
-
-        &:not(.visible) {
-            display: none;
-        }
-
-        .vbox-vbox {
-            margin-bottom: 1em;
-        }
-    }
-
-    .vbox-arrow {
-        display: none;
-    }
-
-    .vbox-inventory .vbox-hdr {
-        display: block;
-    }
-
-    .vbox-arrow-mobile {
-        display: block;
-        grid-area: varrow;
-        width: 100%;
-        text-align: center;
-        margin: 0;
-    }
-
-    .construct-list {
-        display: grid;
-        grid-auto-rows: 1fr;
-
-        .instance-construct:not(.visible) {
-            display: none;
-        };
-    }
-
-    .vbox-inventory {
-        margin-left: 0;
-    }
-
-    .vbox-combiner {
-        margin-left: 0;
-    }
-
-    .equip .specs {
-        margin-top: 0.5em;
-        border: none;
-        border-bottom: 1px solid #444;
-    }
-
-    .equip .skills {
-        border: none;
-        border-bottom: 1px solid #444;
-    }
-
-    .instance-construct {
-        display: grid;
-        grid-template-rows: min-content min-content min-content 1fr min-content;
-        grid-template-areas:
-            "name   "
-            "skills "
-            "specs  "
-            "avatar "
-            "stats  ";
-
-        border: 0;
-        padding: 0;
-
-        transition-property: all;
-        transition-duration: 0.25s;
-        transition-delay: 0;
-        transition-timing-function: ease;
-    }
-
-    .instance-construct:first-child {
-        border-left-width: 0;
-    }
-
-    .instance-construct:not(:last-child) {
-        border-right: 1px solid #222;
-    }
-
-    .instance-construct .skills {
-        flex-flow: column;
-    }
-
-    .instance-construct .skills button {
-        margin: 0;
-    }
-
-    .instance-construct .specs {
-        margin: 0;
-    }
-
-    .construct-list .stats {
-        flex-flow: row wrap;
-        text-align: center;
-    }
-
-    .instance-construct .stats div.speed {
-        order: -1;
-        flex: 1 0 100%;
-        margin: 0;
-    }
-
-    .instance-construct .stats div {
-        flex: 1 1 33%;
-    }
-
-    .instance-nav {
-        display: flex;
-        grid-area: nav;
-        margin-right: 0;
-        border-top: 2px solid #444;
-    }
-
-    .instance-nav button {
-        font-size: 150%;
-        border-right: 2px solid #444;
-    }
-
-    .instance-nav button:last-child {
-        border: none;
-    }
 }

client/assets/styles/menu.less

@@ -215,29 +215,3 @@ section {
     }
 }
 
-@media (max-width: 800px) {
-    section {
-        grid-template-columns: 1fr;
-
-        .list {
-            grid-template-columns: 1fr 1fr;
-
-            &.play {
-                grid-template-columns: 1fr;
-            }
-        }
-
-    }
-
-    .menu .team {
-        grid-template-columns: 1fr;
-
-        .construct {
-            height: 10em;
-        }
-    }
-
-    .account {
-        grid-template-columns: 1fr;
-    }
-}

client/assets/styles/styles.mobile.less

@@ -1,130 +1,71 @@
-@media (max-width: 800px) {
+@media (max-width: 1000px) {
     body {
         overflow-y: initial;
     }
 
     #mnml {
-        font-size: 12pt;
+        font-size: 8pt;
-        padding: 0;
+        padding: 0.25em;
-        grid-template-columns: 1fr;
-        grid-template-rows: 10fr 1fr;
-        grid-template-areas:
-          "main"
-          "footer";
 
-        height: 100vh;
+        .menu {
-        max-height: initial;
+            .logo {
-        min-height: initial;
+                display: none;
-    }
-
-    table td {
-        height: 2.5em;
-    }
-
-    nav {
-        display: none;
-    }
-
-    aside {
-        display: none;
-    }
-
-    footer {
-        display: flex;
-        position: fixed;
-        bottom: 0;
-        width: 100%;
-
-        button {
-            font-size: 90%;
-        }
-    }
-
-    #nav-btn, #instance-nav {
-        display: unset;
-    }
-
-    #mnml.nav-visible nav {
-        padding: 0.5em;
-        margin: 0;
-        display: block;
-        grid-area: main;
-    }
-
-    #mnml.nav-visible main {
-        display: none;
-    }
-
-    main {
-        overflow-x: hidden;
-        overflow-y: initial;
-        max-height: 100vh;
-        padding: 0 0.5em;
-    }
-
-    .welcome .login {
-        width: 100%;
-    }
-
-    .welcome .options {
-        width: 100%;
-        flex-flow: row wrap;
-    }
-
-    .welcome .options button {
-        flex: 1 0 50%;
-    }
-
-    .timer-container {
-        margin: 0.5em 0 0 0;
-    }
-
-    .mobile-title {
-        display: block;
-        margin-bottom: 1em;
-    }
-
-    .menu-instances {
-        display: grid;
-
-        grid-template-columns: 1fr;
-        grid-template-areas:
-            "constructs"
-            "inventory"
-            "games";
-    }
-
-    .menu {
-        .options {
-            display: grid;
-            grid-template-columns: 1fr;
-
-            button:not(:last-child) {
-                border: 2px solid #222;
             }
 
-            button.logo {
+            .team {
-                border: none;
+                height: 20em;
-                margin-right: 0;
-                margin-top: 0.5em;
-                background-position: center;
             }
         }
-    }
 
-    section {
+        .instance {
-        .list {
+            svg {
-            grid-template-columns: 1fr;
+                stroke-width: 1.25em;
+            }
         }
-    }
 
-    .account {
+        .game {
-        div {
+
-            padding: 0;
+            .team, #targeting, .resolving-skill {
+                width: calc(90% - 3em);
+            }
+
+            .game-construct {
+                .avatar {
+                    grid-area: initial;
+                    position: absolute;
+                    top: 0;
+                    height: 100%;
+                    width: 100%;
+                    z-index: -1;
+                }
+
+                svg {
+                    height: 1em;
+                }
+            }
         }
-    }
 
-    .play-p {
+        .instance-construct {
-        display: none;
+            position: relative;
+
+            .skills, .specs {
+                font-size: 75%;
+            }
+
+            .avatar {
+                grid-area: initial;
+                position: absolute;
+                top: 0;
+                height: 100%;
+                width: 100%;
+                z-index: -1;
+            }
+        }
+
+        .opponent {
+            .avatar {
+                bottom: 0;
+            }
+        }
     }
 }

client/assets/styles/vbox.less

@@ -100,7 +100,7 @@
     figure {
         svg {
             height: 2em;
-            stroke-width: 8px;
+            stroke-width: 0.5em;
         }
 
         figcaption {

client/src/actions.jsx

@@ -36,12 +36,10 @@ export const setItemInfo = value => ({ type: 'SET_ITEM_INFO', value });
 export const setItemUnequip = value => ({ type: 'SET_ITEM_UNEQUIP', value });
 export const setMtxActive = value => ({ type: 'SET_MTX_ACTIVE', value });
 export const setNav = value => ({ type: 'SET_NAV', value });
-export const setNavInstance = value => ({ type: 'SET_NAV_INSTANCE', value });
 export const setPing = value => ({ type: 'SET_PING', value });
 export const setPlayer = value => ({ type: 'SET_PLAYER', value });
 export const setReclaiming = value => ({ type: 'SET_RECLAIMING', value });
 export const setShowLog = value => ({ type: 'SET_SHOW_LOG', value });
-export const setShowNav = value => ({ type: 'SET_SHOW_NAV', value });
 export const setSkip = value => ({ type: 'SET_SKIP', value });
 export const setShop = value => ({ type: 'SET_SHOP', value });
 export const setSubscription = value => ({ type: 'SET_SUBSCRIPTION', value });

client/src/components/anims/siphon.tick.jsx

@@ -38,7 +38,7 @@ class SiphonTick extends Component {
     render() {
         return (
             <svg
-                class={'skill-anim'}
+                class='skill-anim'
                 version="1.1"
                 id="Layer_1"
                 xmlns="http://www.w3.org/2000/svg"

client/src/components/demo.jsx

@@ -84,7 +84,7 @@ function Demo(args) {
 
         function inventoryElement() {
             return (
-                <div class="vbox visible">
+                <div class="vbox">
                     <div class='vbox-section'>
                         <h2 class='colour-info'>
                             VBOX PHASE {shapes.Red()} {shapes.Green()} {shapes.Blue()}
@@ -117,7 +117,7 @@ function Demo(args) {
             : 'empty gray';
 
         const constructEl = c => (
-            <div class="instance-construct visible">
+            <div class="instance-construct">
                 <h2 class="name" >{c.name}</h2>
                 <ConstructAvatar construct={c} />
                 <div class="skills">

client/src/components/instance.component.jsx

@@ -1,9 +1,6 @@
-const { Component } = require('preact');
 const preact = require('preact');
 const { connect } = require('preact-redux');
 
-const Hammer = require('hammerjs');
-
 const Vbox = require('./vbox.component');
 const InfoContainer = require('./info.container');
 const InstanceConstructsContainer = require('./instance.constructs');
@@ -16,12 +13,10 @@ const addState = connect(
         const {
             instance,
             nav,
-            navInstance,
         } = state;
         return {
             instance,
             nav,
-            navInstance,
         };
     },
 
@@ -30,10 +25,6 @@ const addState = connect(
             return dispatch(actions.setInfo(c));
         }
 
-        function setNavInstance(c) {
-            return dispatch(actions.setNavInstance(c));
-        }
-
 
         function clearItems() {
             dispatch(actions.setCombiner([]));
@@ -48,80 +39,38 @@ const addState = connect(
         return {
             setInfo,
             clearItems,
-            setNavInstance,
         };
     }
 );
 
-class Instance extends Component {
+function Instance(args) {
-    shouldComponentUpdate(newProps) {
+    const {
-        if (newProps.instance !== this.props.instance) return true;
+        instance,
-        return false;
+        clearItems,
+    } = args;
+
+    if (!instance) return false;
+
+    if (instance.phase !== 'InProgress') {
+        return <Faceoff />;
     }
 
-    render(args) {
+    function instanceClick(e) {
-        const {
+        e.stopPropagation();
-            instance,
+        clearItems();
-            clearItems,
-        } = args;
-
-        if (!instance) return false;
-
-        if (instance.phase !== 'InProgress') {
-            return <Faceoff />;
-        }
-
-        function instanceClick(e) {
-            e.stopPropagation();
-            clearItems();
-        }
-
-        function onTouchMove(e) {
-            e.preventDefault();
-        }
-
-        return (
-            <main id="instance" class='instance' onClick={instanceClick}>
-                <Vbox />
-                <InfoContainer />
-                <InstanceConstructsContainer />
-            </main>
-        );
     }
 
-    componentDidMount() {
+    function onTouchMove(e) {
-        if (!this.h) this.bindSwipes();
+        e.preventDefault();
     }
 
-    componentDidUpdate() {
+    return (
-        if (!this.h) this.bindSwipes();
+        <main id="instance" class='instance' onClick={instanceClick}>
-    }
+            <Vbox />
-
+            <InfoContainer />
-    bindSwipes() {
+            <InstanceConstructsContainer />
-        const instance = document.getElementById('instance');
+        </main>
-        if (!instance) {
+    );
-            return setTimeout(this.bindSwipes, 50);
-        }
-        if (this.h) this.h.destroy();
-        this.h = new Hammer(instance);
-        this.h.on('swiperight', () => {
-            const {
-                navInstance,
-                setNavInstance,
-            } = this.props;
-            setNavInstance(navInstance === 0 ? 3 : navInstance - 1);
-        });
-
-        this.h.on('swipeleft', () => {
-            const {
-                navInstance,
-                setNavInstance,
-            } = this.props;
-            setNavInstance((navInstance + 1) % 4);
-        });
-
-        return true;
-    }
 }
 
 module.exports = addState(Instance);

client/src/components/instance.constructs.jsx

@@ -1,5 +1,6 @@
 const { connect } = require('preact-redux');
 const preact = require('preact');
+
 const range = require('lodash/range');
 
 const buttons = require('./buttons');
@@ -20,7 +21,6 @@ const addState = connect(
             itemInfo,
             itemEquip,
             itemUnequip,
-            navInstance,
             vboxSelected,
             tutorial,
         } = state;
@@ -51,7 +51,6 @@ const addState = connect(
             itemInfo,
             itemEquip,
             itemUnequip,
-            navInstance,
             sendUnequip,
             vboxSelected,
             tutorial,
@@ -92,7 +91,6 @@ function Construct(props) {
         itemEquip,
         itemUnequip,
         instance,
-        mobileVisible,
         player,
         vboxSelected,
         tutorial,
@@ -246,7 +244,7 @@ function Construct(props) {
         </div>;
     });
 
-    const classes = `instance-construct ${mobileVisible ? 'visible' : ''}`;
+    const classes = `instance-construct`;
     const avatarMouseOver = e => hoverInfo(e, `constructAvatar ${construct.name}`);
     return (
         <div key={construct.id} class={classes} onClick={onClick} onDragOver={ev => ev.preventDefault()} onDrop={onClick}>
@@ -270,7 +268,6 @@ class InstanceConstructs extends preact.Component {
         if (newProps.itemEquip !== this.props.itemEquip) return true;
         if (newProps.itemUnequip !== this.props.itemUnequip) return true;
         if (newProps.tutorial !== this.props.tutorial) return true;
-        if (newProps.navInstance !== this.props.navInstance) return true;
         // JSON or Array objects
         if (newProps.player !== this.props.player) return true;
         if (newProps.instance !== this.props.instance) return true;
@@ -284,7 +281,6 @@ class InstanceConstructs extends preact.Component {
             itemEquip,
             itemUnequip,
             instance,
-            navInstance,
             player,
             tutorial,
             vboxSelected,
@@ -306,7 +302,7 @@ class InstanceConstructs extends preact.Component {
         if (instance.phase === 'Lobby') return false;
 
         const constructs = range(0, 3).map(i => {
-            const tutorialConstruct = tutorialConstructDisplay(player, instance, tutorial, navInstance, i);
+            const tutorialConstruct = tutorialConstructDisplay(player, instance, tutorial, i);
             if (tutorialConstruct) return (tutorialConstruct);
 
             return Construct({
@@ -328,7 +324,6 @@ class InstanceConstructs extends preact.Component {
                 sendUnequip,
                 vboxSelected,
                 tutorial,
-                mobileVisible: navInstance === i + 1,
             });
         });
 

client/src/components/mnml.jsx

@@ -10,21 +10,14 @@ const addState = connect(
     state => ({ showNav: state.showNav })
 );
 
-class Mnml extends preact.Component {
+function Mnml(args) {
-    shouldComponentUpdate(newProps) {
+    return (
-        if (newProps.showNav !== this.props.showNav) return true;
+        <div id="mnml">
-        return false;
+            <Main />
-    }
+            <Controls />
-
+            <Footer />
-    render(args) {
+        </div>
-        return (
+    );
-            <div id="mnml" class={args.showNav ? 'nav-visible' : ''}>
-                <Main />
-                <Controls />
-                <Footer />
-            </div>
-        );
-    }
 }
 
 module.exports = addState(Mnml);

client/src/components/vbox.component.jsx

@@ -20,7 +20,6 @@ const addState = connect(
             vboxSelected,
             itemInfo,
             itemUnequip,
-            navInstance,
             tutorial,
         } = state;
 
@@ -58,7 +57,6 @@ const addState = connect(
             itemInfo,
             itemUnequip,
             sendItemUnequip,
-            navInstance,
             tutorial,
         };
     },
@@ -101,7 +99,6 @@ class Vbox extends preact.Component {
         if (newProps.combiner !== this.props.combiner) return true;
         if (newProps.itemUnequip !== this.props.itemUnequip) return true;
         if (newProps.reclaiming !== this.props.reclaiming) return true;
-        if (newProps.navInstance !== this.props.navInstance) return true;
         if (newProps.tutorial !== this.props.tutorial) return true;
         if (newProps.vboxSelected !== this.props.vboxSelected) return true;
         if (newProps.player !== this.props.player) return true;
@@ -117,7 +114,6 @@ class Vbox extends preact.Component {
             player,
             reclaiming,
             tutorial,
-            navInstance,
             vboxSelected,
             instance,
 
@@ -432,7 +428,7 @@ class Vbox extends preact.Component {
             return setInfo(newInfo);
         }
 
-        const classes = `vbox ${navInstance === 0 ? 'visible' : ''}`;
+        const classes = `vbox`;
         return (
             <div class={classes}>
                 {vboxElement()}

client/src/reducers.jsx

@@ -45,8 +45,6 @@ module.exports = {
     itemUnequip:        createReducer([], 'SET_ITEM_UNEQUIP'),
     mtxActive:          createReducer(null, 'SET_MTX_ACTIVE'),
     nav:                createReducer(null, 'SET_NAV'),
-    navInstance:        createReducer(0, 'SET_NAV_INSTANCE'),
-    showNav:            createReducer(null, 'SET_SHOW_NAV'),
     ping:               createReducer(null, 'SET_PING'),
     player:             createReducer(null, 'SET_PLAYER'),
     reclaiming:         createReducer(false, 'SET_RECLAIMING'),

client/src/tutorial.utils.jsx

@@ -1,11 +1,10 @@
 const preact = require('preact');
 const actions = require('./actions');
 
-function tutorialConstructDisplay(player, instance, tutorial, navInstance, i) {
+function tutorialConstructDisplay(player, instance, tutorial, i) {
     if (instance.time_control === 'Practice' && instance.rounds.length === 1 && tutorial && tutorial < 6) {
         if (tutorial <= 2 || (tutorial > 2 && i > 0)) {
-            const mobileVisible = navInstance === i + 1;
+            const classes = `instance-construct`;
-            const classes = `instance-construct ${mobileVisible ? 'visible' : ''}`;
             return (<div key={player.constructs[i].id} class={classes}></div>);
         }
     }

server/src/rpc.rs

@@ -1,6 +1,5 @@
 use std::time::{Instant};
-use std::thread::{spawn, sleep};
+use std::thread::{spawn};
-use std::time;
 
 use std::str;