87 lines
2.0 KiB
JavaScript
87 lines
2.0 KiB
JavaScript
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
|
|
class="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
|
|
class="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,
|
|
};
|