mnml/client/src/components/player.box.jsx
2019-09-22 17:25:28 +10:00

57 lines
1.9 KiB
JavaScript

const preact = require('preact');
function Scoreboard(args) {
const {
isPlayer,
player,
} = args;
const scoreText = () => {
if (player.score === 'Zero') 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 '';
};
/*
let scoreText = () => {
if (player.score === 'Zero') return '▫▫▫▫';
if (player.score === 'One') return '■▫▫▫';
if (player.score === 'Two') return '■■▫▫';
if (player.score === 'Three') return '■■■▫';
if (player.score === 'Adv') return '■■■+';
if (player.score === 'Win') return '■■■■';
return '';
};
*/
const imgStyle = player.img
? { 'background-image': `url(/imgs/${player.img}.svg)` }
: null;
if (!isPlayer) {
return (
<div class={`player-box top ${player.ready ? 'ready' : ''}`}>
<div></div>
<div class="score">{scoreText()}</div>
<div class="name">{player.name}</div>
<div class="img avatar" id={player.img} style={imgStyle}></div>
<div class="msg">&nbsp;</div>
</div>
);
}
return (
<div class={`player-box bottom ${player.ready ? 'ready' : ''}`}>
<div class="msg">hfhf</div>
<div class="score">{scoreText()}</div>
<div class="name">{player.name}</div>
<div class="img avatar" id={player.img} style={imgStyle}></div>
</div>
);
}
module.exports = Scoreboard;