Merge tag '1.5.3' into develop

1.5.3

VERSION

@@ -1 +1 @@
-1.5.2
+1.5.3

acp/package.json

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

client/animations.test.js

@@ -8,7 +8,7 @@ require('./assets/styles/instance.less');
 require('./assets/styles/vbox.less');
 require('./assets/styles/game.less');
 require('./assets/styles/player.less');
-require('./assets/styles/styles.mobile.css');
+require('./assets/styles/styles.mobile.less');
 require('./assets/styles/instance.mobile.less');
 
 require('./src/animations.test.jsx');

client/assets/styles/game.less

@@ -400,16 +400,28 @@
         }
 
         .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/styles.less

@@ -12,6 +12,9 @@ html body {
     -moz-user-select: none;
     -webkit-user-select: none;
     -ms-user-select: none;
+
+    overflow-x: hidden;
+    overflow-y: hidden;
 }
 
 #mnml {

client/assets/styles/styles.mobile.less

@@ -1,4 +1,8 @@
 @media (max-width: 800px) {
+    body {
+        overflow-y: initial;
+    }
+
     #mnml {
         font-size: 12pt;
         padding: 0;
@@ -11,7 +15,6 @@
         height: 100vh;
         max-height: initial;
         min-height: initial;
-        overflow-y: initial;
     }
 
     table td {
@@ -90,4 +93,34 @@
             "inventory"
             "games";
     }
+
+    .menu {
+        .options {
+            display: grid;
+            grid-template-columns: 1fr;
+
+            button:not(:last-child) {
+                border: 2px solid #222;
+            }
+
+            button.logo {
+                border: none;
+                margin-right: 0;
+                margin-top: 0.5em;
+                background-position: center;
+            }
+        }
+    }
+
+    section {
+        .list {
+            grid-template-columns: 1fr;
+        }
+    }
+
+    .account {
+        div {
+            padding: 0;
+        }
+    }
 }

client/package.json

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

client/src/components/anims/chaos.jsx

@@ -77,10 +77,10 @@ class Chaos extends Component {
 
         projectiles.forEach(proj => this.animations.push(anime({
             targets: proj,
-            // cx: 150 + (Math.random() * 50 * (Math.random() < 0.5 ? -1 : 1)),
+            cx: 150 + (Math.random() * 50 * (Math.random() < 0.5 ? -1 : 1)),
-            // cy: 200 + (Math.random() * 50 * (Math.random() < 0.5 ? -1 : 1)),
+            cy: 200 + (Math.random() * 50 * (Math.random() < 0.5 ? -1 : 1)),
-            cx: 150,
+            // cx: 150,
-            cy: 200,
+            // cy: 200,
             // opacity: 0,
 
             delay: TIMES.TARGET_DELAY_MS,

client/src/components/anims/siphon.jsx

@@ -27,12 +27,9 @@ class Siphon extends Component {
                 version="1.1"
                 id="Layer_1"
                 xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 300 400"
+                viewBox="0 0 300 300"
                 opacity="0">
-                <filter id="blur">
+                <circle id="siphon" r="140" cx="150" cy="150" stroke="#3050f8" stroke-width="2.5%"/>
-                    <feGaussianBlur in="SourceGraphic" stdDeviation="2" />
-                </filter>
-                <circle id="siphon" r="140" cx="150" cy="150" stroke="#3050f8" stroke-width="2.5%" filter="url(#blur)"/>
             </svg>
         );
     }
@@ -53,15 +50,10 @@ class Siphon extends Component {
 
         anime({
             targets: '#siphon',
-            keyframes: [
+            r: 0,
-                { r: '110', stroke: '#1FF01F' },
-                { r: '80', stroke: '#1FF01F' },
-                { r: '50', stroke: '#3050f8' },
-                { r: '20', stroke: '#3050f8' },
-            ],
             delay: TIMES.TARGET_DELAY_MS,
             duration,
-            easing: 'easeInCubic',
+            easing: 'easeInSine',
         });
     }
 

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

@@ -20,9 +20,7 @@ function projectile(x, y, radius, colour) {
             cx={x}
             cy={y}
             r={radius}
-            fill="url(#grad1)"
+            fill={colour}
-            stroke-width="0.1"
-            stroke={colour}
         />
     );
 }
@@ -44,24 +42,16 @@ class SiphonTick extends Component {
                 version="1.1"
                 id="Layer_1"
                 xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 300 400">
+                viewBox="0 0 300 300">
                 <filter id="blur">
                     <feGaussianBlur in="SourceGraphic" stdDeviation="2" />
                 </filter>
                 <circle id="siphon" r="20" cx="150" cy="150" stroke="#3050f8" stroke-width="2.5%" filter="url(#blur)"/>
-
-                <defs>
-                    <radialGradient id="grad1" cx="50%" cy="0%" r="85%" fx="50%" fy="50%">
-                        <stop offset="0%" style="stop-color:#3050f8;stop-opacity:0.4" />
-                        <stop offset="100%" style={'stop-color:#1FF01F;stop-opacity:1'} />
-                    </radialGradient>
-                </defs>
                 <filter id="explosion">
                     <feGaussianBlur stdDeviation="4"/>
                     <feTurbulence type="turbulence" baseFrequency="0.001" numOctaves="3" result="turbulence"/>
                     <feDisplacementMap in2="turbulence" in="SourceGraphic" scale="1" xChannelSelector="A" yChannelSelector="A"/>
                 </filter>
-
                 {this.charges}
             </svg>
         );
@@ -84,27 +74,23 @@ class SiphonTick extends Component {
         });
 
         anime.set('#siphon', {
-            r: '80',
+            r: 0,
             stroke: '#3050f8',
         });
 
         anime({
             targets: '#siphon',
-            keyframes: [
+            r: 600,
-                { r: '50', stroke: '#3050f8' },
-                { r: '20', stroke: '#3050f8' },
-                { r: '0', stroke: '#3050f8' },
-            ],
             duration: duration * 2 / 3,
-            easing: 'easeInCubic',
+            easing: 'easeInSine',
         });
 
         const projectiles = document.querySelectorAll('.skill-anim circle');
         projectiles.forEach(proj => {
             anime({
                 targets: proj,
-                cx: Math.random() * 250 + 25,
+                cx: 150 + (Math.random() * 300 * (Math.random() < 0.5 ? -1 : 1)),
-                cy: Math.random() * 200 - 100,
+                cy: 150 + (Math.random() * 300 * (Math.random() < 0.5 ? -1 : 1)),
                 delay: (Math.random() * duration * 1 / 2),
                 duration,
                 easing: 'easeInQuad',

client/src/components/team.footer.jsx

@@ -7,7 +7,6 @@ const addState = connect(
     function receiveState(state) {
         const {
             teamSelect,
-            showNav,
             ws,
         } = state;
 
@@ -18,32 +17,18 @@ const addState = connect(
         return {
             sendAccountSetTeam,
             teamSelect,
-            showNav,
         };
     },
-    function receiveDispatch(dispatch) {
-
-        function setShowNav(v) {
-            return dispatch(actions.setShowNav(v));
-        }
-
-        return {
-            setShowNav,
-        };
-    }
 );
 
 function TeamFooter(args) {
     const {
-        showNav,
         teamSelect,
         sendAccountSetTeam,
-        setShowNav,
     } = args;
 
     return (
         <footer>
-            <button id="nav-btn" onClick={() => setShowNav(!showNav)} >☰</button>
             <button
                 disabled={teamSelect.some(c => !c)}
                 onClick={sendAccountSetTeam}>

client/src/events.jsx

@@ -1,3 +1,4 @@
+const LogRocket = require('logrocket');
 const querystring = require('query-string');
 
 const eachSeries = require('async/eachSeries');
@@ -123,6 +124,10 @@ function registerEvents(store) {
     }
 
     function setAccount(account) {
+        if (account) {
+            LogRocket.identify(account.id, account);
+        }
+
         store.dispatch(actions.setAccount(account));
     }
 

ops/package.json

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

server/Cargo.toml

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