87 lines
2.2 KiB
JavaScript
87 lines
2.2 KiB
JavaScript
const preact = require('preact');
|
|
const { connect } = require('preact-redux');
|
|
|
|
// dunno if this is a good idea
|
|
// bashing together instance and game to save having two panels
|
|
|
|
const addState = connect(
|
|
function receiveState(state) {
|
|
const {
|
|
ws,
|
|
instance,
|
|
game,
|
|
account,
|
|
animating,
|
|
} = state;
|
|
|
|
function sendReady() {
|
|
document.activeElement.blur()
|
|
if (game) return ws.sendGameReady(game.id);
|
|
if (instance) return ws.sendInstanceReady(instance.id);
|
|
return false;
|
|
}
|
|
|
|
const gameObject = game || instance;
|
|
|
|
return {
|
|
gameObject,
|
|
sendReady,
|
|
account,
|
|
animating,
|
|
};
|
|
},
|
|
);
|
|
|
|
function scoreboard(gameObject, player, isOpponent) {
|
|
const text = gameObject.phase === 'Finished'
|
|
? player.wins > gameObject.rounds / 2 && 'Winner'
|
|
: '';
|
|
|
|
const classes =`scoreboard ${player.ready ? 'ready' : ''}`;
|
|
|
|
const body = isOpponent
|
|
? (
|
|
<tbody>
|
|
<tr><td>{player.name}</td></tr>
|
|
<tr><td>{player.wins} / {player.losses}</td></tr>
|
|
<tr><td>{player.ready ? 'ready' : ''}</td></tr>
|
|
</tbody>
|
|
) : (
|
|
<tbody>
|
|
<tr><td>{player.ready ? 'ready' : ''}</td></tr>
|
|
<tr><td>{player.wins} / {player.losses}</td></tr>
|
|
<tr><td>{player.name}</td></tr>
|
|
</tbody>
|
|
);
|
|
|
|
return (
|
|
<table class={classes}>
|
|
{body}
|
|
</table>
|
|
);
|
|
}
|
|
|
|
function Controls(args) {
|
|
const {
|
|
account,
|
|
gameObject,
|
|
animating,
|
|
sendReady,
|
|
} = args;
|
|
|
|
if (!gameObject) return false;
|
|
|
|
const opponent = gameObject.players.find(t => t.id !== account.id);
|
|
const player = gameObject.players.find(t => t.id === account.id);
|
|
|
|
return (
|
|
<aside class="controls">
|
|
{scoreboard(gameObject, opponent, true)}
|
|
<button disabled={animating} class="ready" onClick={() => sendReady()}>Ready</button>
|
|
{scoreboard(gameObject, player)}
|
|
</aside>
|
|
);
|
|
}
|
|
|
|
module.exports = addState(Controls);
|