consolidate construct imgs

client/src/components/construct.jsx

@@ -0,0 +1,86 @@
+const preact = require('preact');
+const { Component } = require('preact');
+
+const anime = require('animejs').default;
+
+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 animations = {};
+function animateConstruct(id) {
+    if (animations[id]) return false;
+    animations[id] = true;
+    const duration = anime.random(2000, 18000);
+    const target = document.getElementById(id);
+    return anime({
+        targets: target,
+        translateX: () => anime.random(-20, 20),
+        translateY: () => anime.random(0, -40),
+        rotate: () => anime.random(-15, 15),
+        duration,
+        direction: 'alternate',
+        easing: 'linear',
+        loop: true,
+        complete: () => animations[id] = false,
+    });
+}
+
+function clearAnimation(id) {
+    animations[id] = false;
+}
+
+class ConstructAvatar extends Component {
+    render() {
+        return (
+            <div
+                className="avatar"
+                id={this.props.id}
+                style={{'background-image': `url(/molecules/${genAvatar(this.props.name)}.svg)`}}
+            />
+        );
+    }
+
+    componentDidMount() {
+        animateConstruct(this.props.id);
+    }
+
+    componentWillUnmount() {
+        clearAnimation(this.props.id);
+    }
+}
+
+class ConstructImg extends Component {
+    render() {
+        return (
+            <img
+                className="avatar"
+                id={this.props.id}
+                src={`/molecules/${genAvatar(this.props.name)}.svg`}
+                height="500"
+                onError={event => event.target.setAttribute('src', '/molecules/726.svg')}
+            />
+        );
+    }
+
+    componentDidMount() {
+        animateConstruct(this.props.id);
+    }
+
+    componentWillUnmount() {
+        clearAnimation(this.props.id);
+    }
+}
+
+module.exports = {
+    ConstructAvatar,
+    ConstructImg,
+};