146 lines
3.7 KiB
JavaScript
146 lines
3.7 KiB
JavaScript
const preact = require('preact');
|
|
const { connect } = require('react-redux');
|
|
|
|
const Vbox = require('./vbox.component');
|
|
const InfoContainer = require('./info.container');
|
|
const InstanceCrypsContainer = require('./instance.cryps');
|
|
const EquipmentContainer = require('./instance.equip');
|
|
|
|
const actions = require('../actions');
|
|
|
|
const addState = connect(
|
|
function receiveState(state) {
|
|
const { ws, instance, account } = state;
|
|
const player = instance.players.find(p => p.id === account.id);
|
|
|
|
function sendInstanceReady() {
|
|
return ws.sendInstanceReady(instance.id);
|
|
}
|
|
|
|
return { player, instance, sendInstanceReady };
|
|
},
|
|
|
|
function receiveDispatch(dispatch) {
|
|
function setInfo(c) {
|
|
return dispatch(actions.setInfo(c));
|
|
}
|
|
|
|
return {
|
|
setInfo,
|
|
};
|
|
}
|
|
);
|
|
|
|
function Instance(args) {
|
|
const {
|
|
instance,
|
|
player,
|
|
sendInstanceReady,
|
|
setInfo,
|
|
} = args;
|
|
|
|
if (!instance) return false;
|
|
|
|
function hoverInfo(e, info) {
|
|
e.stopPropagation();
|
|
return setInfo(info);
|
|
}
|
|
|
|
const rdyClasses = `instance-btn instance-ui-btn ${player.ready ? 'ready' : ''}`;
|
|
const readyInfo = instance.phase === 'Lobby'
|
|
? 'lobbyReady'
|
|
: 'ready';
|
|
const readyBtn = (
|
|
<button
|
|
className={rdyClasses}
|
|
onMouseOver={e => hoverInfo(e, readyInfo)}
|
|
onClick={() => sendInstanceReady()}>
|
|
Ready
|
|
</button>
|
|
);
|
|
|
|
const actionBtn = player
|
|
? readyBtn
|
|
: null;
|
|
|
|
// TIMER
|
|
const zero = Date.parse(instance.phase_end) - (1000 * 120);
|
|
const now = Date.now();
|
|
const end = Date.parse(instance.phase_end);
|
|
const timerPct = ((now - zero) / (end - zero) * 100);
|
|
const timerStyles = {
|
|
width: `${timerPct < 100 ? timerPct : 0}%`,
|
|
background: player.ready ? 'forestgreen' : 'whitesmoke',
|
|
};
|
|
|
|
function playerRound(id) {
|
|
if (!instance.rounds.length) return null;
|
|
return instance.rounds[instance.rounds.length - 1].find(r => r.player_ids.includes(id));
|
|
}
|
|
|
|
function playerText(p) {
|
|
const round = playerRound(p.id);
|
|
if (!round) {
|
|
return p.ready
|
|
? 'ready'
|
|
: '';
|
|
}
|
|
|
|
if (round.finished) return 'finished';
|
|
if (round.game_id) return 'in game';
|
|
|
|
return p.ready
|
|
? 'ready'
|
|
: '';
|
|
}
|
|
|
|
function ScoreBoard() {
|
|
if (instance.phase !== 'Lobby') return null;
|
|
|
|
const players = instance.players.map((p, i) => {
|
|
const pText = playerText(p);
|
|
return (
|
|
<tr key={i}
|
|
className={p.ready ? 'ready' : ''}>
|
|
<td>{p.name}</td>
|
|
<td>{p.score.wins} / {p.score.losses}</td>
|
|
<td>{pText}</td>
|
|
</tr>
|
|
);
|
|
});
|
|
|
|
return (
|
|
<table className="scoreboard" >
|
|
<tbody>
|
|
{players}
|
|
</tbody>
|
|
</table>
|
|
);
|
|
}
|
|
|
|
const timer = (
|
|
<div className="timer-container">
|
|
<div className="timer" style={timerStyles} > </div>
|
|
</div>
|
|
);
|
|
|
|
return (
|
|
<main className="instance" onMouseOver={() => setInfo(null)} >
|
|
<div className="top">
|
|
{actionBtn}
|
|
{timer}
|
|
</div>
|
|
|
|
<input type="checkbox" id="toggle-vbox"/>
|
|
<label id="toggle-vbox-label" htmlFor="toggle-vbox"> </label>
|
|
<ScoreBoard />
|
|
<Vbox />
|
|
<InfoContainer />
|
|
<EquipmentContainer />
|
|
<InstanceCrypsContainer />
|
|
</main>
|
|
);
|
|
}
|
|
|
|
module.exports = addState(Instance);
|