remove extra game
This commit is contained in:
ntr
parent
172e84df54
commit
cc5c02099f
@ -1,51 +0,0 @@
|
|||||||
const { connect } = require('preact-redux');
|
|
||||||
|
|
||||||
const actions = require('../actions');
|
|
||||||
|
|
||||||
const Game = require('./game.component');
|
|
||||||
|
|
||||||
const addState = connect(
|
|
||||||
function receiveState(state) {
|
|
||||||
const { ws, game, account, activeSkill, activeIncoming } = state;
|
|
||||||
|
|
||||||
function selectSkillTarget(targetCrypId) {
|
|
||||||
if (activeSkill) {
|
|
||||||
return ws.sendGameSkill(game.id, activeSkill.crypId, targetCrypId, activeSkill.skill);
|
|
||||||
}
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
|
|
||||||
// intercept self casting skills
|
|
||||||
if (activeSkill && activeSkill.skill.self_targeting) {
|
|
||||||
ws.sendGameSkill(game.id, activeSkill.crypId, null, activeSkill.skill.skill);
|
|
||||||
}
|
|
||||||
|
|
||||||
function selectIncomingTarget(crypId) {
|
|
||||||
if (activeIncoming) {
|
|
||||||
return ws.sendGameTarget(game.id, crypId, activeIncoming);
|
|
||||||
}
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
|
|
||||||
return { game, account, activeSkill, activeIncoming, selectSkillTarget, selectIncomingTarget };
|
|
||||||
},
|
|
||||||
|
|
||||||
function receiveDispatch(dispatch) {
|
|
||||||
function setActiveSkill(crypId, skill) {
|
|
||||||
dispatch(actions.setActiveSkill(crypId, skill));
|
|
||||||
}
|
|
||||||
|
|
||||||
function setActiveIncoming(skillId) {
|
|
||||||
dispatch(actions.setActiveIncoming(skillId));
|
|
||||||
}
|
|
||||||
|
|
||||||
function quit() {
|
|
||||||
dispatch(actions.setGame(null));
|
|
||||||
}
|
|
||||||
|
|
||||||
return { setActiveSkill, setActiveIncoming, quit };
|
|
||||||
}
|
|
||||||
|
|
||||||
);
|
|
||||||
|
|
||||||
module.exports = addState(Game);
|
|
||||||
@ -1,169 +0,0 @@
|
|||||||
const preact = require('preact');
|
|
||||||
const key = require('keymaster');
|
|
||||||
const range = require('lodash/range');
|
|
||||||
const molecule = require('./molecule');
|
|
||||||
const saw = require('./saw.component');
|
|
||||||
|
|
||||||
const SKILL_HOT_KEYS = ['Q', 'W', 'E', 'R'];
|
|
||||||
|
|
||||||
function GamePanel(props) {
|
|
||||||
const {
|
|
||||||
game,
|
|
||||||
activeSkill,
|
|
||||||
activeIncoming,
|
|
||||||
setActiveSkill,
|
|
||||||
selectSkillTarget,
|
|
||||||
selectIncomingTarget,
|
|
||||||
account,
|
|
||||||
} = props;
|
|
||||||
|
|
||||||
if (!game) return <div>...</div>;
|
|
||||||
|
|
||||||
const otherTeams = game.teams.filter(t => t.id !== account.id);
|
|
||||||
|
|
||||||
const playerTeam = game.teams.find(t => t.id === account.id);
|
|
||||||
|
|
||||||
function Cryp(cryp) {
|
|
||||||
const skills = range(0, 4).map((i) => {
|
|
||||||
const s = cryp.skills[i]
|
|
||||||
? cryp.skills[i].skill
|
|
||||||
: (<span> </span>);
|
|
||||||
|
|
||||||
return <button key={i} className="cryp-skill-btn" type ="submit" onClick={() => setActiveSkill(cryp.id, s)}>{s}</button>;
|
|
||||||
});
|
|
||||||
|
|
||||||
const stats = [
|
|
||||||
{ stat: 'hp', colour: '#1FF01F' },
|
|
||||||
{ stat: 'red_shield', colour: '#a52a2a' },
|
|
||||||
{ stat: 'blue_shield', colour: '#3498db' },
|
|
||||||
].map((s, i) => (
|
|
||||||
<figure key={i} alt={s.stat}>
|
|
||||||
{saw(s.colour)}
|
|
||||||
<figcaption>{cryp[s.stat].value} / {cryp[s.stat].max}</figcaption>
|
|
||||||
</figure>
|
|
||||||
));
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="cryp-box">
|
|
||||||
<figure className="img">
|
|
||||||
{molecule}
|
|
||||||
</figure>
|
|
||||||
<div className="skills">
|
|
||||||
{skills}
|
|
||||||
</div>
|
|
||||||
<div className="stats">
|
|
||||||
{stats}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function PlayerCrypCard(cryp) {
|
|
||||||
const skills = cryp.skills.map((skill, i) => {
|
|
||||||
const hotkey = SKILL_HOT_KEYS[i];
|
|
||||||
key.unbind(hotkey);
|
|
||||||
key(hotkey, () => setActiveSkill(cryp.id, skill));
|
|
||||||
|
|
||||||
return (
|
|
||||||
<button
|
|
||||||
key={i}
|
|
||||||
className="button is-dark"
|
|
||||||
type="submit"
|
|
||||||
onClick={() => setActiveSkill(cryp.id, skill)}
|
|
||||||
>
|
|
||||||
({hotkey}) {skill.skill} {skill.cd && `(${skill.cd}T)`}
|
|
||||||
</button>
|
|
||||||
);
|
|
||||||
});
|
|
||||||
|
|
||||||
const effects = cryp.effects.map((effect, i) => (
|
|
||||||
<div key={i}>{effect} for {effect.turns}T</div>
|
|
||||||
));
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
key={cryp.id}
|
|
||||||
style={ activeIncoming ? { cursor: 'pointer' } : {}}
|
|
||||||
onClick={() => selectIncomingTarget(cryp.id)}
|
|
||||||
className="tile is-vertical">
|
|
||||||
{Cryp(cryp, setActiveSkill)}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function PlayerTeam(team) {
|
|
||||||
const cryps = team.cryps.map(c => PlayerCrypCard(c, setActiveSkill));
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="tile">
|
|
||||||
{cryps}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function OpponentCrypCard(cryp) {
|
|
||||||
const effects = cryp.effects.map((effect, i) => (
|
|
||||||
<div key={i}>{effect.effect} for {effect.turns}T</div>
|
|
||||||
));
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="tile"
|
|
||||||
style={activeSkill ? { cursor: 'pointer' } : {}}
|
|
||||||
onClick={() => selectSkillTarget(cryp.id)} >
|
|
||||||
<div key={cryp.id} className="tile is-vertical">
|
|
||||||
<div className="tile is-child">
|
|
||||||
<div className="columns" >
|
|
||||||
<div className="column is-10">
|
|
||||||
<p className="title">{cryp.name}</p>
|
|
||||||
</div>
|
|
||||||
<div className="column">
|
|
||||||
<figure className="image">
|
|
||||||
<svg width="40" height="40" data-jdenticon-value={cryp.name} />
|
|
||||||
</figure>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<div className="has-text-centered">{cryp.hp.value} / {cryp.hp.value} HP </div>
|
|
||||||
<progress className="progress is-dark" value={cryp.hp.value} max={cryp.hp.max}></progress>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
{effects}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function OpponentTeam(team) {
|
|
||||||
const cryps = team.cryps.map(OpponentCrypCard);
|
|
||||||
return (
|
|
||||||
<div>
|
|
||||||
{cryps}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
const logs = game.log.reverse().map((l, i) => (<div key={i}>{l}</div>));
|
|
||||||
|
|
||||||
return (
|
|
||||||
<section>
|
|
||||||
<div className="row">
|
|
||||||
<div className="three columns">
|
|
||||||
{playerTeam.id}
|
|
||||||
{PlayerTeam(playerTeam, setActiveSkill)}
|
|
||||||
</div>
|
|
||||||
<div className="six columns" align="center">
|
|
||||||
Round X
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="three columns">
|
|
||||||
{otherTeams.id}
|
|
||||||
{otherTeams.map(OpponentTeam)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="row">
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
module.exports = GamePanel;
|
|
||||||
Loading…
x
Reference in New Issue
Block a user