diff --git a/client/assets/icons/mnml.png b/client/assets/icons/mnml.png new file mode 100644 index 00000000..068e30c1 Binary files /dev/null and b/client/assets/icons/mnml.png differ diff --git a/client/assets/styles/game.less b/client/assets/styles/game.less index 43e9d795..0a71051c 100644 --- a/client/assets/styles/game.less +++ b/client/assets/styles/game.less @@ -295,7 +295,7 @@ background-size: contain; background-repeat: no-repeat; background-position: top; - pointer-events: none; + // pointer-events: none; } .animating .skills { diff --git a/client/assets/styles/instance.less b/client/assets/styles/instance.less index ee7a1898..9d3ea05a 100644 --- a/client/assets/styles/instance.less +++ b/client/assets/styles/instance.less @@ -201,7 +201,7 @@ background-size: contain; background-repeat: no-repeat; background-position: center; - pointer-events: none; + // pointer-events: none; } .name { diff --git a/client/assets/styles/menu.less b/client/assets/styles/menu.less index bafdaa29..a1320161 100644 --- a/client/assets/styles/menu.less +++ b/client/assets/styles/menu.less @@ -55,7 +55,7 @@ background-size: contain; background-repeat: no-repeat; background-position: center; - pointer-events: none; + // pointer-events: none; height: 100%; } } diff --git a/client/manifest.webmanifest b/client/manifest.webmanifest index 1e8a3408..afb2065e 100644 --- a/client/manifest.webmanifest +++ b/client/manifest.webmanifest @@ -4,12 +4,12 @@ "short_name": "mnml", "icons": [ { - "src": "./assets/icons/726.png", + "src": "./assets/icons/mnml.png", "sizes": "32x32", "type": "image/png" }, { - "src": "./assets/icons/726.png", + "src": "./assets/icons/mnml.png", "sizes": "512x512", "type": "image/png" } diff --git a/client/src/components/anims/wiggle.jsx b/client/src/components/anims/wiggle.jsx new file mode 100644 index 00000000..c4f06b9b --- /dev/null +++ b/client/src/components/anims/wiggle.jsx @@ -0,0 +1,21 @@ +const anime = require('animejs').default; + +function wiggle(id, idle) { + const duration = 300; + const target = document.getElementById(id); + const x = (window.screen.width / anime.random(-100, 100)) * 0.1; + const y = (window.screen.height / anime.random(-20, 100)) * 0.1; + return anime({ + targets: target, + rotate: 0, + translateX: [x, -x, 0], + translateY: [y, -y, 0], + duration, + easing: 'easeInOutSine', + // direction: 'alternate', + begin: idle.pause, + complete: idle.restart, + }); +} + +module.exports = wiggle; diff --git a/client/src/components/construct.jsx b/client/src/components/construct.jsx index c502be9e..151b9846 100644 --- a/client/src/components/construct.jsx +++ b/client/src/components/construct.jsx @@ -7,13 +7,14 @@ const { connect } = require('preact-redux'); const banish = require('./anims/banish'); const idleAnimation = require('./anims/idle'); const invert = require('./anims/invert'); +const wiggle = require('./anims/wiggle'); const sourceCast = require('./anims/source.cast'); const { ConstructAnimation } = require('./animations'); const addState = connect( function receiveState(state) { - const { animSource, animTarget } = state; - return { animSource, animTarget }; + const { animSource, animTarget, animText } = state; + return { animSource, animTarget, animText }; } ); @@ -33,12 +34,17 @@ class ConstructAvatar extends Component {