117 lines
3.0 KiB
JavaScript
117 lines
3.0 KiB
JavaScript
const { Component } = require('preact');
|
|
const preact = require('preact');
|
|
const { connect } = require('preact-redux');
|
|
|
|
const idleAnimation = require('./anims/idle');
|
|
const wiggle = require('./anims/wiggle');
|
|
|
|
const addState = connect(
|
|
function receiveState(state) {
|
|
const {
|
|
ws,
|
|
account,
|
|
mtxActive,
|
|
} = state;
|
|
|
|
function sendMtxAccountApply() {
|
|
return ws.sendMtxAccountApply(mtxActive);
|
|
}
|
|
|
|
return {
|
|
account,
|
|
mtxActive,
|
|
|
|
sendMtxAccountApply,
|
|
};
|
|
}
|
|
);
|
|
|
|
class AccountAvatar 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 { account, mtxActive } = this.props;
|
|
const imgStyle = account.img
|
|
? { 'background-image': `url(/imgs/${account.img}.svg)`, cursor: mtxActive ? 'pointer' : '' }
|
|
: null;
|
|
return (
|
|
<div
|
|
class="img avatar"
|
|
id={account.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.account.id, this.idle));
|
|
}
|
|
|
|
componentDidMount() {
|
|
this.idle = idleAnimation(this.props.account.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();
|
|
}
|
|
|
|
// shouldComponentUpdate(newProps) {
|
|
// const { account } = newProps;
|
|
|
|
// if (account !== this.props.account) {
|
|
// return true;
|
|
// }
|
|
|
|
// return false;
|
|
// }
|
|
}
|
|
|
|
const StateAccountAvatar = addState(AccountAvatar);
|
|
|
|
function AccountBox(args) {
|
|
const {
|
|
account,
|
|
} = args;
|
|
|
|
// if (!isTop) {
|
|
// return (
|
|
// <div class='player-box top'>
|
|
// <div class="name">Processor</div>
|
|
// <div class="img avatar" id={account.img} style={imgStyle}></div>
|
|
// <div class="msg"> </div>
|
|
// </div>
|
|
// );
|
|
// }
|
|
|
|
const nameClass = `name ${account.subscribed ? 'subscriber' : ''}`;
|
|
|
|
return (
|
|
<div class='player-box bottom'>
|
|
<div class="msg"> </div>
|
|
<StateAccountAvatar />
|
|
<div class={nameClass}>{account.name}</div>
|
|
<div class="score"> </div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
module.exports = addState(AccountBox);
|