diff --git a/VERSION b/VERSION index a73b4325..1d5e9e0b 100644 --- a/VERSION +++ b/VERSION @@ -1 +1 @@ -1.5.2 \ No newline at end of file +1.5.3 \ No newline at end of file diff --git a/acp/package.json b/acp/package.json index 809c390d..f41793e6 100644 --- a/acp/package.json +++ b/acp/package.json @@ -1,6 +1,6 @@ { "name": "mnml-client", - "version": "1.5.2", + "version": "1.5.3", "description": "", "main": "index.js", "scripts": { diff --git a/client/animations.test.js b/client/animations.test.js index b447e649..b6cbc772 100644 --- a/client/animations.test.js +++ b/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'); diff --git a/client/assets/styles/game.less b/client/assets/styles/game.less index e5a8007b..7c55e35a 100644 --- a/client/assets/styles/game.less +++ b/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); } } diff --git a/client/assets/styles/styles.less b/client/assets/styles/styles.less index c9729698..2e3b241c 100644 --- a/client/assets/styles/styles.less +++ b/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 { diff --git a/client/assets/styles/styles.mobile.less b/client/assets/styles/styles.mobile.less index 0b88dac7..e8269bd2 100644 --- a/client/assets/styles/styles.mobile.less +++ b/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; + } + } } diff --git a/client/package.json b/client/package.json index 221ea1cf..90e180ae 100644 --- a/client/package.json +++ b/client/package.json @@ -1,6 +1,6 @@ { "name": "mnml-client", - "version": "1.5.2", + "version": "1.5.3", "description": "", "main": "index.js", "scripts": { diff --git a/client/src/components/anims/chaos.jsx b/client/src/components/anims/chaos.jsx index 3b415520..8250af93 100644 --- a/client/src/components/anims/chaos.jsx +++ b/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)), - // cy: 200 + (Math.random() * 50 * (Math.random() < 0.5 ? -1 : 1)), - cx: 150, - cy: 200, + cx: 150 + (Math.random() * 50 * (Math.random() < 0.5 ? -1 : 1)), + cy: 200 + (Math.random() * 50 * (Math.random() < 0.5 ? -1 : 1)), + // cx: 150, + // cy: 200, // opacity: 0, delay: TIMES.TARGET_DELAY_MS, diff --git a/client/src/components/anims/siphon.jsx b/client/src/components/anims/siphon.jsx index 4ba6102b..5a286eb7 100644 --- a/client/src/components/anims/siphon.jsx +++ b/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"> - - - - + ); } @@ -53,15 +50,10 @@ class Siphon extends Component { anime({ targets: '#siphon', - keyframes: [ - { r: '110', stroke: '#1FF01F' }, - { r: '80', stroke: '#1FF01F' }, - { r: '50', stroke: '#3050f8' }, - { r: '20', stroke: '#3050f8' }, - ], + r: 0, delay: TIMES.TARGET_DELAY_MS, duration, - easing: 'easeInCubic', + easing: 'easeInSine', }); } diff --git a/client/src/components/anims/siphon.tick.jsx b/client/src/components/anims/siphon.tick.jsx index 4a0b82e5..5d0faaf9 100644 --- a/client/src/components/anims/siphon.tick.jsx +++ b/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)" - stroke-width="0.1" - stroke={colour} + fill={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"> - - - - - - - - {this.charges} ); @@ -84,27 +74,23 @@ class SiphonTick extends Component { }); anime.set('#siphon', { - r: '80', + r: 0, stroke: '#3050f8', }); anime({ targets: '#siphon', - keyframes: [ - { r: '50', stroke: '#3050f8' }, - { r: '20', stroke: '#3050f8' }, - { r: '0', stroke: '#3050f8' }, - ], + r: 600, 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, - cy: Math.random() * 200 - 100, + cx: 150 + (Math.random() * 300 * (Math.random() < 0.5 ? -1 : 1)), + cy: 150 + (Math.random() * 300 * (Math.random() < 0.5 ? -1 : 1)), delay: (Math.random() * duration * 1 / 2), duration, easing: 'easeInQuad', diff --git a/client/src/components/team.footer.jsx b/client/src/components/team.footer.jsx index db3bb077..82584a57 100644 --- a/client/src/components/team.footer.jsx +++ b/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 (