player box

client/src/components/account.box.jsx

@@ -26,7 +26,6 @@ const addState = connect(
     }
 );
 
-
 class AccountAvatar extends Component {
     constructor() {
         super();
@@ -107,7 +106,7 @@ function AccountBox(args) {
             <div class="msg">&nbsp;</div>
             <StateAccountAvatar />
             <div class="name">{account.name}</div>
-            <div class="score">0 MMR</div>
+            <div class="score">&nbsp;</div>
         </div>
     );
 }

client/src/components/player.box.jsx

@@ -1,5 +1,57 @@
+const { Component } = require('preact');
 const preact = require('preact');
 
+const idleAnimation = require('./anims/idle');
+const wiggle = require('./anims/wiggle');
+
+class Img 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 { id, img } = this.props;
+        const imgStyle = img
+            ? { 'background-image': `url(/imgs/${img}.svg)` }
+            : null;
+        return (
+            <div
+                class="img avatar"
+                id={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.id, this.idle));
+    }
+
+    componentDidMount() {
+        this.idle = idleAnimation(this.props.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();
+    }
+}
+
 function Scoreboard(args) {
     const {
         isPlayer,
@@ -14,29 +66,13 @@ function Scoreboard(args) {
         return '';
     };
 
-    /*
-    let scoreText = () => {
-        if (player.score === 'Zero') return '▫▫▫▫';
-        if (player.score === 'One') return '■▫▫▫';
-        if (player.score === 'Two') return '■■▫▫';
-        if (player.score === 'Three') return '■■■▫';
-        if (player.score === 'Adv') return '■■■+';
-        if (player.score === 'Win') return '■■■■';
-        return '';
-    };
-    */
-
-    const imgStyle = player.img
-        ? { 'background-image': `url(/imgs/${player.img}.svg)` }
-        : null;
-
     if (!isPlayer) {
         return (
             <div class={`player-box top ${player.ready ? 'ready' : ''}`}>
                 <div></div>
                 <div class="score">{scoreText()}</div>
                 <div class="name">{player.name}</div>
-                <div class="img avatar" id={player.img} style={imgStyle}></div>
+                <Img img={player.img} id={player.id} />
                 <div class="msg">&nbsp;</div>
             </div>
         );
@@ -47,7 +83,7 @@ function Scoreboard(args) {
             <div class="msg">hfhf</div>
             <div class="score">{scoreText()}</div>
             <div class="name">{player.name}</div>
-            <div class="img avatar" id={player.img} style={imgStyle}></div>
+            <Img img={player.img} id={player.id} />
         </div>
     );
 }