126 lines
3.1 KiB
JavaScript
126 lines
3.1 KiB
JavaScript
const preact = require('preact');
|
|
const { connect } = require('preact-redux');
|
|
|
|
const actions = require('../actions');
|
|
|
|
const { ConstructAvatar } = require('./construct');
|
|
const Controls = require('./controls');
|
|
|
|
const addState = connect(
|
|
function receiveState(state) {
|
|
const {
|
|
ws,
|
|
instance,
|
|
account,
|
|
} = state;
|
|
|
|
function sendInstanceReady() {
|
|
return ws.sendInstanceReady(instance.id);
|
|
}
|
|
|
|
return {
|
|
instance,
|
|
account,
|
|
sendInstanceReady,
|
|
};
|
|
},
|
|
);
|
|
|
|
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>
|
|
)
|
|
}
|
|
|
|
function Faceoff(props) {
|
|
const {
|
|
instance,
|
|
account,
|
|
sendInstanceReady,
|
|
} = 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 classes = `team player ${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 classes = `team opponent ${team.ready ? 'ready' : ''}`
|
|
|
|
return (
|
|
<div class={classes}>
|
|
{constructs}
|
|
</div>
|
|
);
|
|
}
|
|
function faceoffText() {
|
|
if (!instance.winner) {
|
|
const zero = Date.parse(instance.phase_start);
|
|
const now = Date.now();
|
|
const end = Date.parse(instance.phase_end);
|
|
const timerPct = instance.phase_end
|
|
? ((now - zero) / (end - zero) * 100)
|
|
: 100;
|
|
const fight = timerPct > 10 ? <h1> FIGHT </h1> : null;
|
|
return (
|
|
<div class="faceoff-text">
|
|
<h1> {otherTeam.name} </h1>
|
|
<h1> vs </h1>
|
|
<h1> {playerTeam.name} </h1>
|
|
{fight}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (instance.winner === playerTeam.id) {
|
|
return (
|
|
<div class="faceoff-text">
|
|
<h1> You are the champion </h1>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<div class="faceoff-text">
|
|
<h1> You lose </h1>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<main class="faceoff">
|
|
{OpponentTeam(otherTeam)}
|
|
{faceoffText()}
|
|
{PlayerTeam(playerTeam)}
|
|
</main>
|
|
);
|
|
}
|
|
|
|
module.exports = addState(Faceoff);
|