108 lines
2.8 KiB
JavaScript
108 lines
2.8 KiB
JavaScript
const preact = require('preact');
|
|
const { connect } = require('preact-redux');
|
|
|
|
const actions = require('../actions');
|
|
|
|
const GameConstruct = require('./game.construct');
|
|
const Targeting = require('./targeting.arrows');
|
|
|
|
const addState = connect(
|
|
function receiveState(state) {
|
|
const {
|
|
ws,
|
|
game,
|
|
account,
|
|
resolution,
|
|
activeSkill,
|
|
activeConstruct,
|
|
} = state;
|
|
|
|
function selectSkillTarget(targetConstructId) {
|
|
if (activeSkill) {
|
|
return ws.sendGameSkill(game.id, activeSkill.constructId, targetConstructId, activeSkill.skill);
|
|
}
|
|
return false;
|
|
}
|
|
|
|
// intercept self casting skills
|
|
if (activeSkill && activeSkill.skill.self_targeting) {
|
|
ws.sendGameSkill(game.id, activeSkill.constructId, null, activeSkill.skill.skill);
|
|
}
|
|
|
|
return {
|
|
game,
|
|
account,
|
|
resolution,
|
|
activeSkill,
|
|
activeConstruct,
|
|
selectSkillTarget,
|
|
};
|
|
},
|
|
|
|
function receiveDispatch(dispatch) {
|
|
function setActiveSkill(constructId, skill) {
|
|
dispatch(actions.setActiveSkill(constructId, skill));
|
|
// particlesJS(`particles-${constructId}`, config);
|
|
}
|
|
|
|
function setActiveConstruct(construct) {
|
|
dispatch(actions.setActiveConstruct(construct));
|
|
}
|
|
|
|
return { setActiveSkill, setActiveConstruct };
|
|
}
|
|
|
|
);
|
|
|
|
function Game(props) {
|
|
const {
|
|
game,
|
|
account,
|
|
resolution,
|
|
setActiveSkill,
|
|
setActiveConstruct,
|
|
} = props;
|
|
|
|
if (!game) return <div>...</div>;
|
|
|
|
const otherTeams = game.players.filter(t => t.id !== account.id);
|
|
const playerTeam = game.players.find(t => t.id === account.id);
|
|
|
|
function PlayerTeam(team) {
|
|
const constructs = team.constructs.map((c, i) =>
|
|
<GameConstruct key={c.id} i={i} construct={c} player={true} />);
|
|
return (
|
|
<div class="team player">
|
|
{constructs}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function OpponentTeam(team) {
|
|
const constructs = team.constructs.map((c, i) =>
|
|
<GameConstruct key={c.id} i={i} construct={c} player={false} />);
|
|
return (
|
|
<div class="team opponent">
|
|
{constructs}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const gameClasses = `game ${resolution ? 'resolving': ''}`;
|
|
|
|
function gameClick(e) {
|
|
e.stopPropagation();
|
|
setActiveConstruct(null);
|
|
}
|
|
|
|
return (
|
|
<main class={gameClasses} onClick={gameClick} >
|
|
{otherTeams.map(OpponentTeam)}
|
|
<Targeting />
|
|
{PlayerTeam(playerTeam, setActiveSkill)}
|
|
</main>
|
|
);
|
|
}
|
|
|
|
module.exports = addState(Game);
|