they call me "pixar pete"

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 {

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 {

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%;
             }
         }

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"
         }

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;

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 {
             <div
                 class="avatar"
                 id={construct.id}
+                onClick={this.onClick.bind(this)}
                 style={{ 'background-image': `url(/imgs/${construct.img}.svg)` }}>
                 <ConstructAnimation construct={construct} />
             </div>
         );
     }
 
+    onClick() {
+        return this.animations.push(wiggle(this.props.construct.id, this.idle));
+    }
+
     componentDidMount() {
         this.idle = idleAnimation(this.props.construct.id);
         return this.animations.push(this.idle);
@@ -54,11 +60,17 @@ class ConstructAvatar extends Component {
         this.resetAnimations();
     }
 
-    shouldComponentUpdate({ animSource, animTarget, construct }) {
+    shouldComponentUpdate(newProps) {
+        const { animSource, animTarget, animText, construct } = newProps;
+
         if (construct !== this.props.construct) {
             return true;
         }
 
+        if (animText && animText.constructId === construct.id) {
+            return wiggle(construct.id, this.idle);
+        }
+
         if (animSource === this.props.animSource && animTarget === this.props.animTarget) {
             // console.warn(construct.name, 'thinks its same props')
             return false;
@@ -73,6 +85,7 @@ class ConstructAvatar extends Component {
             return sourceCast(animSource.constructId, animSource.direction, this.idle);
         }
 
+
         // this is the target
         if (animTarget && animTarget.constructId.includes(construct.id)) {
             // console.warn(construct.name, 'should update')