From 4496374d509cf3a0dd0d0e23a538b04968ca3074 Mon Sep 17 00:00:00 2001
From: ntr <ntr@smokestack.io>
Date: Thu, 30 May 2019 20:34:50 +1000
Subject: [PATCH] oldschool animations

---
 client/src/components/game.component.jsx |  4 +-
 client/src/components/game.construct.jsx |  4 +-
 client/src/components/list.jsx           |  4 +-
 client/src/components/team.jsx           |  4 +-
 client/src/utils.jsx                     | 54 ++++++++++--------------
 5 files changed, 30 insertions(+), 40 deletions(-)

diff --git a/client/src/components/game.component.jsx b/client/src/components/game.component.jsx
index fe110229..e29837f3 100644
--- a/client/src/components/game.component.jsx
+++ b/client/src/components/game.component.jsx
@@ -1,5 +1,5 @@
 const preact = require('preact');
-const { STATS, eventClasses, getCombatText, constructAvatar } = require('../utils');
+const { STATS, eventClasses, getCombatText, ConstructAvatar } = require('../utils');
 // const { animationDivs } = require('../animations');
 const GameConstruct = require('./game.construct');
 const shapes = require('./shapes');
@@ -164,7 +164,7 @@ function GamePanel(props) {
                 <figure
                     className="img"
                     onClick={() => selectSkillTarget(construct.id)} >
-                    {constructAvatar(construct.name, construct.id)}
+                    <ConstructAvatar name={construct.name} id={construct.id} />
                     {combatTextEl}
                 </figure>
             </div>
diff --git a/client/src/components/game.construct.jsx b/client/src/components/game.construct.jsx
index a12d231f..27683c93 100644
--- a/client/src/components/game.construct.jsx
+++ b/client/src/components/game.construct.jsx
@@ -3,7 +3,7 @@ const preact = require('preact');
 const range = require('lodash/range');
 
 const actions = require('../actions');
-const { STATS, eventClasses, getCombatText, constructAvatar } = require('../utils');
+const { STATS, eventClasses, getCombatText, ConstructAvatar } = require('../utils');
 const { animationDivs } = require('../animations');
 const shapes = require('./shapes');
 
@@ -105,7 +105,7 @@ function GameConstruct(props) {
             <figure
                 className="img"
                 onClick={() => selectSkillTarget(construct.id)} >
-                {constructAvatar(construct.name, construct.id)}
+                <ConstructAvatar name={construct.name} id={construct.id} />
                 {combatTextEl}
                 {anim}
             </figure>
diff --git a/client/src/components/list.jsx b/client/src/components/list.jsx
index 778f9e11..203b7789 100644
--- a/client/src/components/list.jsx
+++ b/client/src/components/list.jsx
@@ -1,7 +1,7 @@
 const { connect } = require('preact-redux');
 const preact = require('preact');
 
-const { stringSort, NULL_UUID, COLOURS, constructAvatar } = require('./../utils');
+const { stringSort, NULL_UUID, COLOURS, ConstructAvatar } = require('./../utils');
 const actions = require('./../actions');
 const InstanceCreateForm = require('./instance.create.form');
 
@@ -118,7 +118,7 @@ function List(args) {
             <div
                 key={construct.id}
                 className="menu-construct" >
-                {constructAvatar(construct.name, construct.id)}
+                <ConstructAvatar name={construct.name} id={construct.id} />
                 <h2>{construct.name}</h2>
             </div>
         );
diff --git a/client/src/components/team.jsx b/client/src/components/team.jsx
index 0acb1b3f..08772138 100644
--- a/client/src/components/team.jsx
+++ b/client/src/components/team.jsx
@@ -4,7 +4,7 @@ const range = require('lodash/range');
 
 const actions = require('./../actions');
 const { COLOURS } = require('./../utils');
-const { stringSort, constructAvatar } = require('./../utils');
+const { stringSort, ConstructAvatar } = require('./../utils');
 const SpawnButton = require('./spawn.button');
 
 const idSort = stringSort('id');
@@ -86,7 +86,7 @@ function Team(args) {
                 className="menu-construct"
                 style={ { 'border-color': borderColour || 'whitesmoke' } }
                 onClick={() => selectConstruct(construct.id)} >
-                {constructAvatar(construct.name, construct.id)}
+                <ConstructAvatar name={construct.name} id={construct.id} />
                 <h2>{construct.name}</h2>
             </div>
         );
diff --git a/client/src/utils.jsx b/client/src/utils.jsx
index 004a419d..bb57e8e7 100644
--- a/client/src/utils.jsx
+++ b/client/src/utils.jsx
@@ -1,4 +1,5 @@
 const preact = require('preact');
+const { Component } = require('preact');
 
 const get = require('lodash/get');
 const anime = require('animejs').default;
@@ -78,20 +79,25 @@ function clearAnimation(id) {
     animations[id] = false;
 }
 
-function constructAvatar(name, id) {
-    // useEffect(() => {
-    //     animateConstruct(id);
-    //     return () => clearAnimation(id);
-    // });
+class ConstructAvatar extends Component {
+    render() {
+        return (
+            <img
+                id={this.props.id}
+                src={`/molecules/${genAvatar(this.props.name)}.svg`}
+                height="500"
+                onError={event => event.target.setAttribute('src', '/molecules/726.svg')}
+            />
+        );
+    }
 
-    return (
-        <img
-            id={id}
-            src={`/molecules/${genAvatar(name)}.svg`}
-            height="500"
-            onError={event => event.target.setAttribute('src', '/molecules/726.svg')}
-        />
-    );
+    componentDidMount() {
+        animateConstruct(this.props.id);
+    }
+
+    componentDidUnmount() {
+        clearAnimation(this.props.id);
+    }
 }
 
 function instanceConstruct(name, id) {
@@ -100,6 +106,8 @@ function instanceConstruct(name, id) {
     //     return () => clearAnimation(id);
     // });
 
+    setTimeout(() => animateConstruct(id), 50);
+
     return (
         <div
             className="avatar"
@@ -109,23 +117,6 @@ function instanceConstruct(name, id) {
     );
 }
 
-function gameConstructImg(name, id, combatTextEl, selectSkillTarget) {
-    // useEffect(() => {
-    //     animateConstruct(id);
-    //     return () => clearAnimation(id);
-    // });
-
-    return (
-        <div
-            className="avatar"
-            id={id}
-            onClick={() => selectSkillTarget(id)}
-            style={{ 'background-image': `url(/molecules/${genAvatar(name)}.svg)` }} >
-            {combatTextEl}
-        </div>
-    );
-}
-
 const NULL_UUID = '00000000-0000-0000-0000-000000000000';
 
 const STATS = {
@@ -459,9 +450,8 @@ module.exports = {
     convertItem,
     numSort,
     genAvatar,
-    constructAvatar,
+    ConstructAvatar,
     instanceConstruct,
-    gameConstructImg,
     requestAvatar,
     eventClasses,
     getCombatSequence,