95 lines
2.9 KiB
JavaScript
95 lines
2.9 KiB
JavaScript
const { Component } = require('preact');
|
|
const preact = require('preact');
|
|
|
|
const idleAnimation = require('./anims/idle');
|
|
const wiggle = require('./anims/wiggle');
|
|
|
|
class Img 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 { id, img } = this.props;
|
|
const imgStyle = img
|
|
? { 'background-image': `url(/imgs/${img}.svg)` }
|
|
: null;
|
|
return (
|
|
<div
|
|
class="img avatar"
|
|
id={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.id, this.idle));
|
|
}
|
|
|
|
componentDidMount() {
|
|
this.idle = idleAnimation(this.props.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();
|
|
}
|
|
}
|
|
|
|
function Scoreboard(args) {
|
|
const {
|
|
isPlayer,
|
|
player,
|
|
chat,
|
|
} = args;
|
|
|
|
const scoreText = () => {
|
|
if (player.score === 'Zero' || player.score === 'Lose') return [<span i={0}>▫</span>, <span i={1}>▫</span>, <span i={2}>▫</span>];
|
|
if (player.score === 'One') return [<span i={0}>■</span>, <span i={1}>▫</span>, <span i={2}>▫</span>];
|
|
if (player.score === 'Two') return [<span i={0}>■</span>, <span i={1}>■</span>, <span i={2}>▫</span>];
|
|
if (player.score === 'Win') return [<span i={0}>■</span>, <span i={1}>■</span>, <span i={2}>■</span>];
|
|
return '';
|
|
};
|
|
|
|
const winner = player.score === 'Win';
|
|
|
|
if (!isPlayer) {
|
|
return (
|
|
<div class={`player-box top ${winner ? 'winner' : player.ready ? 'ready' : ''}`}>
|
|
<div></div>
|
|
<div class="score">{scoreText()}</div>
|
|
<div class="name">{player.name}</div>
|
|
<Img img={player.img} id={player.id} />
|
|
<div class="msg">{chat || '\u00A0'}</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div class={`player-box bottom ${winner ? 'winner': player.ready ? 'ready' : ''}`}>
|
|
<div class="msg">{chat || '\u00A0'}</div>
|
|
<div class="score">{scoreText()}</div>
|
|
<div class="name">{player.name}</div>
|
|
<Img img={player.img} id={player.id} />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
module.exports = Scoreboard;
|