118 lines
3.2 KiB
JavaScript
118 lines
3.2 KiB
JavaScript
const preact = require('preact');
|
|
const { connect } = require('preact-redux');
|
|
|
|
const { ConstructAvatar } = require('./construct');
|
|
|
|
const addState = connect(
|
|
function receiveState(state) {
|
|
const {
|
|
instance,
|
|
account,
|
|
} = state;
|
|
|
|
return {
|
|
instance,
|
|
account,
|
|
};
|
|
}
|
|
);
|
|
|
|
function FaceoffConstruct(args) {
|
|
const {
|
|
construct,
|
|
} = args;
|
|
|
|
return (
|
|
<div class='game-construct'>
|
|
<div class="left"></div>
|
|
<div class="right">
|
|
<h3 class="name"> {construct.name} </h3>
|
|
<ConstructAvatar construct={construct} />
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
class Faceoff extends preact.Component {
|
|
shouldComponentUpdate(newProps) {
|
|
if (newProps.instance !== this.props.instance) return true;
|
|
if (newProps.account !== this.props.account) return true;
|
|
return false;
|
|
}
|
|
|
|
render(props) {
|
|
const {
|
|
instance,
|
|
account,
|
|
} = props;
|
|
|
|
if (!instance) return <div>...</div>;
|
|
|
|
const otherTeam = instance.players.find(t => t.id !== account.id);
|
|
const playerTeam = instance.players.find(t => t.id === account.id);
|
|
|
|
function PlayerTeam(team) {
|
|
const constructs = team.constructs.map((c, i) =>
|
|
<FaceoffConstruct key={c.id} construct={c}/>);
|
|
|
|
const winner = instance.winner === team.id;
|
|
const classes = `team player ${winner ? 'winner' : team.ready ? 'ready' : ''}`;
|
|
return (
|
|
<div class={classes}>
|
|
{constructs}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
|
|
function OpponentTeam(team) {
|
|
const constructs = team.constructs.map((c, i) =>
|
|
<FaceoffConstruct key={c.id} construct={c}/>);
|
|
|
|
const winner = instance.winner === team.id;
|
|
const classes = `team opponent ${winner ? 'winner' : team.ready ? 'ready' : ''}`;
|
|
|
|
return (
|
|
<div class={classes}>
|
|
{constructs}
|
|
</div>
|
|
);
|
|
}
|
|
function faceoffText() {
|
|
if (!instance.winner) {
|
|
if (instance.phase === 'Finished') return (
|
|
<div class="faceoff-text">
|
|
<div class="cancelled"> game cancelled </div>
|
|
</div>
|
|
);
|
|
|
|
return (
|
|
<div class="faceoff-text">
|
|
<div class="opponent-text"> {otherTeam.name} </div>
|
|
<div class="vs"> vs </div>
|
|
<div class="player-text"> {playerTeam.name} </div>
|
|
</div>
|
|
);
|
|
}
|
|
const winner = instance.winner === playerTeam.id ? playerTeam : otherTeam;
|
|
return (
|
|
<div class="faceoff-text winner">
|
|
<div> {winner.name} </div>
|
|
<div> wins </div>
|
|
</div>
|
|
)
|
|
|
|
}
|
|
|
|
return (
|
|
<main class="faceoff">
|
|
{OpponentTeam(otherTeam)}
|
|
{faceoffText()}
|
|
{PlayerTeam(playerTeam)}
|
|
</main>
|
|
);
|
|
}
|
|
}
|
|
|
|
module.exports = addState(Faceoff);
|