121 lines
3.1 KiB
JavaScript
121 lines
3.1 KiB
JavaScript
const preact = require('preact');
|
|
const GameConstruct = require('./game.construct');
|
|
|
|
function GamePanel(props) {
|
|
const {
|
|
game,
|
|
account,
|
|
resolution,
|
|
setActiveSkill,
|
|
setActiveConstruct,
|
|
sendInstanceState,
|
|
sendGameReady,
|
|
skip,
|
|
quit,
|
|
} = props;
|
|
|
|
if (!game) return <div>...</div>;
|
|
|
|
function actionClick() {
|
|
if (game.phase === 'Finish') {
|
|
sendInstanceState(game.instance);
|
|
quit();
|
|
return true;
|
|
}
|
|
|
|
if (resolution) {
|
|
return skip();
|
|
}
|
|
|
|
return sendGameReady();
|
|
}
|
|
|
|
const otherTeams = game.players.filter(t => t.id !== account.id);
|
|
const playerTeam = game.players.find(t => t.id === account.id);
|
|
|
|
let actionText = 'Ready';
|
|
let actionStyles = 'instance-btn instance-ui-btn right';
|
|
if (game.phase === 'Finish') actionText = 'Done';
|
|
if (resolution) actionText = 'Skip';
|
|
if (actionText === 'Ready' && playerTeam.ready) actionStyles += ' ready';
|
|
|
|
const header = (
|
|
<div className="top">
|
|
<button
|
|
className={actionStyles}
|
|
onClick={() => actionClick()}>
|
|
{actionText}
|
|
</button>
|
|
</div>
|
|
);
|
|
|
|
function findConstruct(id) {
|
|
const team = game.players.find(t => t.constructs.find(c => c.id === id));
|
|
if (team) return team.constructs.find(c => c.id === id);
|
|
return null;
|
|
}
|
|
|
|
const zero = Date.parse(game.phase_start);
|
|
const now = Date.now();
|
|
const end = Date.parse(game.phase_end);
|
|
const timerPct = ((now - zero) / (end - zero) * 100);
|
|
const displayPct = resolution || game.phase === 'Finish'
|
|
? 0
|
|
: Math.min(timerPct, 100);
|
|
|
|
const displayColour = playerTeam.ready
|
|
? 'forestgreen'
|
|
: timerPct > 80
|
|
? 'red'
|
|
: 'whitesmoke';
|
|
|
|
const timerStyles = {
|
|
width: `${displayPct}%`,
|
|
background: displayColour,
|
|
};
|
|
|
|
const timer = (
|
|
<div className="timer-container">
|
|
<div className="timer" style={timerStyles} > </div>
|
|
</div>
|
|
);
|
|
|
|
function PlayerTeam(team) {
|
|
const constructs = team.constructs.map(c =>
|
|
<GameConstruct key={c.id} construct={c} player={true} />);
|
|
return (
|
|
<div className="team player">
|
|
{constructs}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function OpponentTeam(team) {
|
|
const constructs = team.constructs.map(c =>
|
|
<GameConstruct key={c.id} construct={c} player={false} />);
|
|
return (
|
|
<div className="team opponent">
|
|
{constructs}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const gameClasses = `game ${resolution ? 'resolving': ''}`;
|
|
|
|
function gameClick(e) {
|
|
e.stopPropagation();
|
|
setActiveConstruct(null);
|
|
}
|
|
|
|
return (
|
|
<main className={gameClasses} onClick={gameClick} >
|
|
{header}
|
|
{timer}
|
|
{otherTeams.map(OpponentTeam)}
|
|
{PlayerTeam(playerTeam, setActiveSkill)}
|
|
</main>
|
|
);
|
|
}
|
|
|
|
module.exports = GamePanel;
|