From cfd5e7d3f729b59f9e0aea9f5f237a139dd9ac72 Mon Sep 17 00:00:00 2001
From: ntr <ntr@smokestack.io>
Date: Tue, 9 Jul 2019 17:05:37 +1000
Subject: [PATCH] avatars loading

---
 client/src/components/construct.jsx           | 29 +++++--------------
 client/src/components/game.construct.jsx      |  2 +-
 client/src/components/instance.constructs.jsx |  2 +-
 client/src/components/list.jsx                |  5 +---
 client/src/components/team.jsx                |  2 +-
 5 files changed, 11 insertions(+), 29 deletions(-)

diff --git a/client/src/components/construct.jsx b/client/src/components/construct.jsx
index c1d8710e..9c669810 100644
--- a/client/src/components/construct.jsx
+++ b/client/src/components/construct.jsx
@@ -8,20 +8,6 @@ const idleAnimation = require('./anims/idle');
 const invert = require('./anims/invert');
 const sourceCast = require('./anims/source.cast');
 
-
-const genAvatar = name => {
-    let hash = 0;
-    if (name.length === 0) return hash;
-    // Probs don't need to hash using the whole string
-    for (let i = 0; i < name.length; i += 1) {
-        const chr = name.charCodeAt(i);
-        hash = ((hash << 5) - hash) + chr;
-        hash = hash % 10000;
-    }
-    return `${hash}`;
-};
-
-
 const addState = connect(
     function receiveState(state) {
         const { avatarAnimation } = state;
@@ -38,33 +24,32 @@ class ConstructAvatar extends Component {
         this.animId = 0;
         this.source = false;
         this.animations = [];
-        this.avatar = genAvatar(props.name);
     }
 
     render() {
         return (
             <div
                 class="avatar"
-                id={this.props.id}
-                style={{ 'background-image': `url(/molecules/${this.avatar}.svg)` }}
+                id={this.props.construct.id}
+                style={{ 'background-image': `url(/imgs/${this.props.construct.img}.svg)` }}
             />
         );
     }
 
     componentDidMount() {
-        this.idle = idleAnimation(this.props.id);
+        this.idle = idleAnimation(this.props.construct.id);
         this.animations.push(this.idle);
     }
 
     componentWillReceiveProps(nextProps) {
         if (nextProps.avatarAnimation.id === -1) this.animId = 0; // The current set of resolutions ended reset to 0
-        if (nextProps.avatarAnimation.id !== this.animId && nextProps.avatarAnimation.animTargetId === this.props.id) {
+        if (nextProps.avatarAnimation.id !== this.animId && nextProps.avatarAnimation.animTargetId === this.props.construct.id) {
             this.animId = nextProps.avatarAnimation.id;
             const selectAnim = () => {
                 switch (nextProps.avatarAnimation.type) {
-                case 'banish': return banish(this.props.id);
-                case 'invert': return invert(this.props.id);
-                case 'sourceCast': return sourceCast(this.props.id, nextProps.avatarAnimation.params);
+                case 'banish': return banish(this.props.construct.id);
+                case 'invert': return invert(this.props.construct.id);
+                case 'sourceCast': return sourceCast(this.props.construct.id, nextProps.avatarAnimation.params);
                 default: return null;
                 }
             };
diff --git a/client/src/components/game.construct.jsx b/client/src/components/game.construct.jsx
index dfb91861..c59bb108 100644
--- a/client/src/components/game.construct.jsx
+++ b/client/src/components/game.construct.jsx
@@ -103,7 +103,7 @@ function GameConstruct(props) {
             <h3 class="name"> {construct.name} </h3>
             {crypSkills}
             <div class="stats"> {stats} </div>
-            <ConstructAvatar name={construct.name} id={construct.id} />
+            <ConstructAvatar construct={construct} />
             {combatAnim}
             <div class={'combat-text'}> {combatText} </div>
             <div class="effects"> {effects} </div>
diff --git a/client/src/components/instance.constructs.jsx b/client/src/components/instance.constructs.jsx
index cc7c1dc7..a7eb6b53 100644
--- a/client/src/components/instance.constructs.jsx
+++ b/client/src/components/instance.constructs.jsx
@@ -201,7 +201,7 @@ function Construct(props) {
 
     return (
         <div key={construct.id} class="instance-construct" onClick={onClick} >
-            <ConstructAvatar name={construct.name} id={construct.id} />
+            <ConstructAvatar construct={construct} />
             <h2 class="name" >{construct.name}</h2>
             <div class="skills" onMouseOver={e => hoverInfo(e, 'constructSkills')} >
                 {skills}
diff --git a/client/src/components/list.jsx b/client/src/components/list.jsx
index b3324d8c..23f166ff 100644
--- a/client/src/components/list.jsx
+++ b/client/src/components/list.jsx
@@ -121,10 +121,7 @@ function List(args) {
                 style={ mtxActive ? { cursor: 'pointer' } : {}}
                 onClick={() => selectConstruct(construct.id)}
                 class="menu-construct" >
-                <ConstructAvatar
-                    name={construct.name}
-                    id={construct.id}
-                />
+                <ConstructAvatar construct={construct} />
                 <h2>{construct.name}</h2>
             </div>
         );
diff --git a/client/src/components/team.jsx b/client/src/components/team.jsx
index 43b9e6f8..0ae96c16 100644
--- a/client/src/components/team.jsx
+++ b/client/src/components/team.jsx
@@ -105,7 +105,7 @@ function Team(args) {
                     </h2>
                     <button onClick={e => deleteClick(e)} >&#10060;</button>
                 </div>
-                <ConstructAvatar name={construct.name} id={construct.id} />
+                <ConstructAvatar construct={construct} />
             </div>
         );
     });