mtx images

client/src/components/account.box.jsx

@@ -1,6 +1,10 @@
+const { Component } = require('preact');
 const preact = require('preact');
 const { connect } = require('preact-redux');
 
+const idleAnimation = require('./anims/idle');
+const wiggle = require('./anims/wiggle');
+
 const addState = connect(
     function receiveState(state) {
         const {
@@ -23,18 +27,71 @@ const addState = connect(
 );
 
 
+class AccountAvatar extends Component {
+    constructor() {
+        super();
+        // The animation ids are a check to ensure that animations are not repeated
+        // When a new account animation is communicated with state it will have a corresponding Id
+        // which is a count of how many resoluttions have passed
+        this.animations = [];
+        this.resetAnimations = this.resetAnimations.bind(this);
+    }
+
+    render() {
+        const { account, mtxActive } = this.props;
+        const imgStyle = account.img
+            ? { 'background-image': `url(/imgs/${account.img}.svg)`, cursor: mtxActive ? 'pointer' : '' }
+            : null;
+        return (
+            <div
+                class="img avatar"
+                id={account.id}
+                onMouseDown={this.onClick.bind(this)}
+                style={imgStyle}>
+            </div>
+        );
+    }
+
+    onClick() {
+        if (this.props.mtxActive) {
+            return this.props.sendMtxAccountApply();
+        }
+        return this.animations.push(wiggle(this.props.account.id, this.idle));
+    }
+
+    componentDidMount() {
+        this.idle = idleAnimation(this.props.account.id);
+        return this.animations.push(this.idle);
+    }
+
+    resetAnimations() {
+        for (let i = this.animations.length - 1; i >= 0; i--) {
+            this.animations[i].reset();
+        }
+    }
+
+    componentWillUnmount() {
+        this.resetAnimations();
+    }
+
+    // shouldComponentUpdate(newProps) {
+    //     const { account } = newProps;
+
+    //     if (account !== this.props.account) {
+    //         return true;
+    //     }
+
+    //     return false;
+    // }
+}
+
+const StateAccountAvatar = addState(AccountAvatar);
+
 function AccountBox(args) {
     const {
         account,
-        mtxActive,
-
-        sendMtxAccountApply,
     } = args;
 
-    const imgStyle = account.img
-        ? { 'background-image': `url(/imgs/${account.img}.svg)`, cursor: mtxActive ? 'pointer' : '' }
-        : null;
-
     // if (!isTop) {
     //     return (
     //         <div class='player-box top'>
@@ -45,20 +102,10 @@ function AccountBox(args) {
     //     );
     // }
 
-    const onClick = () => {
-        if (!mtxActive) return false;
-        return sendMtxAccountApply();
-    };
-
     return (
         <div class='player-box bottom'>
             <div class="msg">&nbsp;</div>
-            <div
-                class="img avatar"
-                id={account.img}
-                onClick={onClick}
-                style={imgStyle}>
-            </div>
+            <StateAccountAvatar />
             <div class="name">{account.name}</div>
             <div class="score">0 MMR</div>
         </div>