cryps list click
This commit is contained in:
ntr
parent
8cd8e61b7a
commit
6907cf17e0
@ -1,40 +0,0 @@
|
|||||||
const preact = require('preact');
|
|
||||||
|
|
||||||
function CrypCard(cryp) {
|
|
||||||
return (
|
|
||||||
<div key={cryp.id}
|
|
||||||
className="tile is-vertical box"
|
|
||||||
style={activeItem ? { cursor: 'pointer' } : {}}
|
|
||||||
onClick={() => sendItemUse(cryp.id)} >
|
|
||||||
<div className="tile is-child">
|
|
||||||
<div className="columns" >
|
|
||||||
<div className="column is-10">
|
|
||||||
<p className="title">{cryp.name}</p>
|
|
||||||
<p className="subtitle">Level {cryp.lvl}</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.stam.value} HP </div>
|
|
||||||
<progress className="progress is-dark" value={cryp.hp.value} max={cryp.stam.value}></progress>
|
|
||||||
|
|
||||||
<div className="has-text-centered">{cryp.xp} / {Math.pow(2, cryp.lvl + 1)} XP </div>
|
|
||||||
<progress className="progress is-dark" value={cryp.xp} max={Math.pow(2, cryp.lvl + 1)}></progress>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<button
|
|
||||||
className="button is-dark"
|
|
||||||
type="submit"
|
|
||||||
disabled={cryp.hp.value === 0}
|
|
||||||
onClick={() => sendGamePve(cryp.id)}>
|
|
||||||
Start PVE
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
module.exports = CrypCard;
|
|
||||||
@ -1,72 +0,0 @@
|
|||||||
// eslint-disable-next-line
|
|
||||||
const preact = require('preact');
|
|
||||||
const { connect } = require('preact-redux');
|
|
||||||
const actions = require('../actions');
|
|
||||||
|
|
||||||
const ItemListContainer = require('./item.list.container');
|
|
||||||
const CrypSpawnContainer = require('./cryp.spawn.container');
|
|
||||||
const GameJoinButton = require('./game.join.button');
|
|
||||||
const CrypListContainer = require('./cryp.list.container');
|
|
||||||
const GameContainer = require('./game.container');
|
|
||||||
const Passives = require('./passive.container');
|
|
||||||
|
|
||||||
const addState = connect(
|
|
||||||
(state) => {
|
|
||||||
const { game, ws } = state;
|
|
||||||
if (!game) {
|
|
||||||
ws.clearGameStateInterval();
|
|
||||||
}
|
|
||||||
return state;
|
|
||||||
},
|
|
||||||
(dispatch) => {
|
|
||||||
function setGame(game) {
|
|
||||||
dispatch(actions.setGame(game));
|
|
||||||
}
|
|
||||||
return { setGame };
|
|
||||||
}
|
|
||||||
);
|
|
||||||
|
|
||||||
function renderBody(props) {
|
|
||||||
const { game, setGame, account } = props;
|
|
||||||
if (game) {
|
|
||||||
return (
|
|
||||||
<div>
|
|
||||||
<GameContainer />
|
|
||||||
<button
|
|
||||||
className="button is-dark is-fullwidth"
|
|
||||||
type="submit"
|
|
||||||
onClick={() => setGame(null)}
|
|
||||||
>
|
|
||||||
Return to Main Menu
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
if (account) {
|
|
||||||
return (
|
|
||||||
<section className="columns">
|
|
||||||
<div className="column is-4">
|
|
||||||
<div className="column">
|
|
||||||
<GameJoinButton />
|
|
||||||
<CrypSpawnContainer />
|
|
||||||
</div>
|
|
||||||
<div className="column">
|
|
||||||
<div className="columns">
|
|
||||||
<div className="column is-8">
|
|
||||||
<CrypListContainer />
|
|
||||||
</div>
|
|
||||||
<div className="column">
|
|
||||||
<ItemListContainer />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className ="column">
|
|
||||||
<Passives />
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
);
|
|
||||||
} return <div>not ready</div>;
|
|
||||||
}
|
|
||||||
|
|
||||||
module.exports = addState(renderBody);
|
|
||||||
@ -1,29 +0,0 @@
|
|||||||
const { connect } = require('preact-redux');
|
|
||||||
|
|
||||||
const CrypList = require('./cryp.list');
|
|
||||||
|
|
||||||
const addState = connect(
|
|
||||||
function receiveState(state) {
|
|
||||||
const { ws, cryps, activeItem } = state;
|
|
||||||
function sendGamePve(crypId) {
|
|
||||||
return ws.sendGamePve(crypId);
|
|
||||||
}
|
|
||||||
|
|
||||||
function sendGamePvp(crypIds) {
|
|
||||||
return ws.sendGamePvp(crypIds);
|
|
||||||
}
|
|
||||||
|
|
||||||
function sendItemUse(targetId) {
|
|
||||||
if (activeItem) {
|
|
||||||
return ws.sendItemUse(activeItem, targetId);
|
|
||||||
}
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
|
|
||||||
return {
|
|
||||||
cryps, sendGamePve, sendGamePvp, activeItem, sendItemUse,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
);
|
|
||||||
|
|
||||||
module.exports = addState(CrypList);
|
|
||||||
@ -1,62 +0,0 @@
|
|||||||
const preact = require('preact');
|
|
||||||
|
|
||||||
const { stringSort } = require('./../utils');
|
|
||||||
|
|
||||||
const nameSort = stringSort('name');
|
|
||||||
|
|
||||||
function CrypList({
|
|
||||||
cryps, activeItem, sendGamePve, sendGamePvp, sendItemUse,
|
|
||||||
}) {
|
|
||||||
if (!cryps) return <div>not ready</div>;
|
|
||||||
const crypPanels = cryps.sort(nameSort).map(cryp => (
|
|
||||||
|
|
||||||
<div key={cryp.id}
|
|
||||||
className="tile is-vertical"
|
|
||||||
style={activeItem ? { cursor: 'pointer' } : {}}
|
|
||||||
onClick={() => sendItemUse(cryp.id)} >
|
|
||||||
<div className="tile is-child">
|
|
||||||
<div className="columns" >
|
|
||||||
<div className="column is-10">
|
|
||||||
<p className="title">{cryp.name}</p>
|
|
||||||
<p className="subtitle">Level {cryp.lvl}</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.stamina.value} HP </div>
|
|
||||||
<progress className="progress is-dark" value={cryp.hp.value} max={cryp.stamina.value}></progress>
|
|
||||||
|
|
||||||
<div className="has-text-centered">{cryp.xp} / {Math.pow(2, cryp.lvl + 1)} XP </div>
|
|
||||||
<progress className="progress is-dark" value={cryp.xp} max={Math.pow(2, cryp.lvl + 1)}></progress>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<button
|
|
||||||
className="button is-dark"
|
|
||||||
type="submit"
|
|
||||||
disabled={cryp.hp.value === 0}
|
|
||||||
onClick={() => sendGamePve(cryp.id)}>
|
|
||||||
Start PVE
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<button
|
|
||||||
className="button is-dark"
|
|
||||||
type="submit"
|
|
||||||
disabled={cryp.hp.value === 0}
|
|
||||||
onClick={() => sendGamePvp([cryp.id])}>
|
|
||||||
PVP
|
|
||||||
</button>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
));
|
|
||||||
return (
|
|
||||||
<div className="tile is-parent is-vertical" >
|
|
||||||
{crypPanels}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
module.exports = CrypList;
|
|
||||||
@ -1,37 +0,0 @@
|
|||||||
const preact = require('preact');
|
|
||||||
|
|
||||||
function renderCrypPanel(cryp) {
|
|
||||||
return (
|
|
||||||
<div className="tile">
|
|
||||||
<div className="tile is-vertical is-child">
|
|
||||||
<div className="columns">
|
|
||||||
<div className ="column has-text-right">
|
|
||||||
<figure className="image">
|
|
||||||
<svg width="160" height="160" data-jdenticon-value="Drake" />
|
|
||||||
</figure>
|
|
||||||
</div>
|
|
||||||
<div className="column">
|
|
||||||
<div className="columns">
|
|
||||||
<div className="column has-text-left">
|
|
||||||
<p className="title">Drake</p>
|
|
||||||
<p className="subtitle">Level 1</p>
|
|
||||||
</div>
|
|
||||||
<div className="column has-text-centered">
|
|
||||||
<p>Flying</p>
|
|
||||||
<p>Fire</p>
|
|
||||||
<p>Stone</p>
|
|
||||||
</div>
|
|
||||||
<div className="column has-text-centered">
|
|
||||||
<ul> <i className="fas fa-bomb" /> 5 </ul>
|
|
||||||
<ul> <i className="fas fa-walking" /> 5 </ul>
|
|
||||||
<ul> <i className="fas fa-shield-alt" /> 5 </ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="has-text-centered">5 / 5 HP </div>
|
|
||||||
<progress className="progress is-dark" value="5" max="5"></progress>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,30 +0,0 @@
|
|||||||
const preact = require('preact');
|
|
||||||
|
|
||||||
function renderSpawnButton({ account, sendCrypSpawn }) {
|
|
||||||
let name = '';
|
|
||||||
|
|
||||||
if (!account) return <div>...</div>;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="columns">
|
|
||||||
<div className="column">
|
|
||||||
<input
|
|
||||||
className="input"
|
|
||||||
type="email"
|
|
||||||
placeholder="cryp name"
|
|
||||||
onChange={e => (name = e.target.value)}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="column is-4">
|
|
||||||
<button
|
|
||||||
className="button is-dark is-fullwidth"
|
|
||||||
type="submit"
|
|
||||||
onClick={() => sendCrypSpawn(name)}>
|
|
||||||
Spawn 👾
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
module.exports = renderSpawnButton;
|
|
||||||
@ -1,16 +0,0 @@
|
|||||||
const { connect } = require('preact-redux');
|
|
||||||
|
|
||||||
const CrypSpawnButton = require('./cryp.spawn.button');
|
|
||||||
|
|
||||||
const addState = connect(
|
|
||||||
function receiveState(state) {
|
|
||||||
const { ws } = state;
|
|
||||||
function sendCrypSpawn(name) {
|
|
||||||
return ws.sendCrypSpawn(name);
|
|
||||||
}
|
|
||||||
|
|
||||||
return { account: state.account, sendCrypSpawn };
|
|
||||||
}
|
|
||||||
);
|
|
||||||
|
|
||||||
module.exports = addState(CrypSpawnButton);
|
|
||||||
@ -1,48 +0,0 @@
|
|||||||
const { connect } = require('preact-redux');
|
|
||||||
|
|
||||||
const actions = require('../actions');
|
|
||||||
|
|
||||||
const Game = require('./game');
|
|
||||||
|
|
||||||
const addState = connect(
|
|
||||||
function receiveState(state) {
|
|
||||||
const { ws, game, account, activeSkill, activeIncoming } = state;
|
|
||||||
|
|
||||||
function selectSkillTarget(targetTeamId) {
|
|
||||||
if (activeSkill) {
|
|
||||||
return ws.sendGameSkill(game.id, activeSkill.crypId, targetTeamId, activeSkill.skill.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));
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
return { setActiveSkill, setActiveIncoming };
|
|
||||||
}
|
|
||||||
|
|
||||||
);
|
|
||||||
|
|
||||||
module.exports = addState(Game);
|
|
||||||
@ -1,42 +0,0 @@
|
|||||||
const preact = require('preact');
|
|
||||||
const { connect } = require('preact-redux');
|
|
||||||
|
|
||||||
const addState = connect(
|
|
||||||
(state) => {
|
|
||||||
const { ws, cryps } = state;
|
|
||||||
function sendGameJoin(gameId) {
|
|
||||||
return ws.sendGameJoin(gameId, [cryps[0].id]);
|
|
||||||
}
|
|
||||||
|
|
||||||
return { account: state.account, sendGameJoin };
|
|
||||||
},
|
|
||||||
);
|
|
||||||
|
|
||||||
function GameJoinButton({ account, sendGameJoin }) {
|
|
||||||
let gameId = '';
|
|
||||||
|
|
||||||
if (!account) return <div>...</div>;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="columns">
|
|
||||||
<div className="column">
|
|
||||||
<input
|
|
||||||
className="input"
|
|
||||||
type="text"
|
|
||||||
placeholder="gameId"
|
|
||||||
onChange={e => (gameId = e.target.value)}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="column is-4">
|
|
||||||
<button
|
|
||||||
className="button is-dark is-fullwidth"
|
|
||||||
type="submit"
|
|
||||||
onClick={() => sendGameJoin(gameId)}>
|
|
||||||
Join Game
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
module.exports = addState(GameJoinButton);
|
|
||||||
@ -1,188 +0,0 @@
|
|||||||
const preact = require('preact');
|
|
||||||
const key = require('keymaster');
|
|
||||||
const Phaser = require('./phaser.container');
|
|
||||||
const SKILL_HOT_KEYS = ['Q', 'W', 'E', 'R'];
|
|
||||||
|
|
||||||
function GamePanel(props) {
|
|
||||||
const {
|
|
||||||
game,
|
|
||||||
activeSkill,
|
|
||||||
activeIncoming,
|
|
||||||
setActiveSkill,
|
|
||||||
setActiveIncoming,
|
|
||||||
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);
|
|
||||||
|
|
||||||
const incoming = game.stack.filter(s => s.target_team_id === playerTeam.id).map((inc) => {
|
|
||||||
key.unbind('1');
|
|
||||||
key('1', () => setActiveIncoming(inc.id));
|
|
||||||
return (
|
|
||||||
<div className="tile is-child" key={inc.id}>
|
|
||||||
<div>{JSON.stringify(inc)}</div>
|
|
||||||
<button
|
|
||||||
className="button is-dark is-fullwidth"
|
|
||||||
type="submit"
|
|
||||||
onClick={() => setActiveIncoming(inc.id)}>
|
|
||||||
(1) Block skill: {inc.skill}
|
|
||||||
</button>
|
|
||||||
</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">
|
|
||||||
<div className="tile is-child">
|
|
||||||
<div className="columns" >
|
|
||||||
<div className="column is-10">
|
|
||||||
<p className="title">{cryp.name}</p>
|
|
||||||
<p className="subtitle">Level {cryp.lvl}</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.stamina.value} HP </div>
|
|
||||||
<progress className="progress is-dark" value={cryp.hp.value} max={cryp.stamina.value}></progress>
|
|
||||||
|
|
||||||
<div className="has-text-centered">{cryp.xp} / {Math.pow(2, cryp.lvl + 1)} XP </div>
|
|
||||||
<progress className="progress is-dark" value={cryp.xp} max={Math.pow(2, cryp.lvl + 1)}></progress>
|
|
||||||
</div>
|
|
||||||
{effects}
|
|
||||||
{skills}
|
|
||||||
</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 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>
|
|
||||||
<p className="subtitle">Level {cryp.lvl}</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.stamina.value} HP </div>
|
|
||||||
<progress className="progress is-dark" value={cryp.hp.value} max={cryp.stamina.value}></progress>
|
|
||||||
|
|
||||||
<div className="has-text-centered">{cryp.xp} / {Math.pow(2, cryp.lvl + 1)} XP </div>
|
|
||||||
<progress className="progress is-dark" value={cryp.xp} max={Math.pow(2, cryp.lvl + 1)}></progress>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
{effects}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function OpponentTeam(team) {
|
|
||||||
const cryps = team.cryps.map(OpponentCrypCard);
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
className="tile"
|
|
||||||
style={activeSkill ? { cursor: 'pointer' } : {}}
|
|
||||||
onClick={() => selectSkillTarget(team.id)} >
|
|
||||||
{cryps}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
// style={{ "min-height": "100%" }}
|
|
||||||
function phaseText(phase) {
|
|
||||||
switch (phase) {
|
|
||||||
case 'Skill':
|
|
||||||
return 'Choose abilities';
|
|
||||||
case 'Target':
|
|
||||||
return 'Block abilities';
|
|
||||||
case 'Finish':
|
|
||||||
return 'Game over';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const logs = game.log.reverse().map((l, i) => (<div key={i}>{l}</div>));
|
|
||||||
|
|
||||||
return (
|
|
||||||
<section className="columns">
|
|
||||||
<div className="column is-1">
|
|
||||||
</div>
|
|
||||||
<div className="column is-6">
|
|
||||||
<Phaser />
|
|
||||||
<section className="columns">
|
|
||||||
<div className="column is-6">
|
|
||||||
{PlayerTeam(playerTeam, setActiveSkill)}
|
|
||||||
</div>
|
|
||||||
<div className="column is-6">
|
|
||||||
<div>
|
|
||||||
{otherTeams.map(OpponentTeam)}
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
{incoming}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
</div>
|
|
||||||
<div className="column is-2">
|
|
||||||
<div className="title is-4">{logs}</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
module.exports = GamePanel;
|
|
||||||
@ -1,19 +0,0 @@
|
|||||||
// eslint-disable-next-line
|
|
||||||
const preact = require('preact');
|
|
||||||
|
|
||||||
const LoginContainer = require('./login.container');
|
|
||||||
|
|
||||||
function renderHeader() {
|
|
||||||
return (
|
|
||||||
<section className="hero is-dark">
|
|
||||||
<div className="hero-body">
|
|
||||||
<div className="container">
|
|
||||||
<h1 className="title">cryps.gg</h1>
|
|
||||||
<LoginContainer />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
module.exports = renderHeader;
|
|
||||||
@ -1,20 +0,0 @@
|
|||||||
const { connect } = require('preact-redux');
|
|
||||||
const actions = require('../actions');
|
|
||||||
|
|
||||||
const ItemList = require('./item.list');
|
|
||||||
|
|
||||||
const addState = connect(
|
|
||||||
function receiveState(state) {
|
|
||||||
const { items } = state;
|
|
||||||
return { items };
|
|
||||||
},
|
|
||||||
function receiveDispatch(dispatch) {
|
|
||||||
function setActiveItem(id) {
|
|
||||||
dispatch(actions.setActiveItem(id))
|
|
||||||
}
|
|
||||||
|
|
||||||
return { setActiveItem };
|
|
||||||
}
|
|
||||||
);
|
|
||||||
|
|
||||||
module.exports = addState(ItemList);
|
|
||||||
@ -1,37 +0,0 @@
|
|||||||
// eslint-disable-next-line
|
|
||||||
const preact = require('preact');
|
|
||||||
|
|
||||||
function ItemList({ items, setActiveItem }) {
|
|
||||||
if (!items) return <div>...</div>;
|
|
||||||
const itemPanels = items.map(item => (
|
|
||||||
|
|
||||||
<div key={item.id} className="tile is-parent is-vertical">
|
|
||||||
<div className="tile is-vertical is-child">
|
|
||||||
<div className="columns" >
|
|
||||||
<div className="column is-8">
|
|
||||||
<p className="title">{item.action}</p>
|
|
||||||
<p className="subtitle">∞</p>
|
|
||||||
</div>
|
|
||||||
<div className="column">
|
|
||||||
<figure className="image">
|
|
||||||
<svg width="40" height="40" data-jdenticon-value={item.action} />
|
|
||||||
</figure>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<button
|
|
||||||
className="button is-dark"
|
|
||||||
type="submit"
|
|
||||||
onClick={() => setActiveItem(item.id)}>
|
|
||||||
Use
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
));
|
|
||||||
return (
|
|
||||||
<div>
|
|
||||||
{itemPanels}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
module.exports = ItemList;
|
|
||||||
@ -1,69 +0,0 @@
|
|||||||
// eslint-disable-next-line
|
|
||||||
const preact = require('preact');
|
|
||||||
|
|
||||||
function renderLogin({ account, submitLogin, submitRegister }) {
|
|
||||||
if (account) return <div>{JSON.stringify(account)}</div>;
|
|
||||||
|
|
||||||
const details = {
|
|
||||||
name: '',
|
|
||||||
password: '',
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div>
|
|
||||||
<div className="field">
|
|
||||||
<p className="control has-icons-left has-icons-right">
|
|
||||||
<input
|
|
||||||
className="input"
|
|
||||||
type="email"
|
|
||||||
placeholder="Email"
|
|
||||||
onChange={e => (details.name = e.target.value)}
|
|
||||||
/>
|
|
||||||
<span className="icon is-small is-left">
|
|
||||||
<i className="fas fa-user" />
|
|
||||||
</span>
|
|
||||||
<span className="icon is-small is-right">
|
|
||||||
<i className="fas fa-check" />
|
|
||||||
</span>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div className="field">
|
|
||||||
<p className="control has-icons-left">
|
|
||||||
<input
|
|
||||||
className="input"
|
|
||||||
type="password"
|
|
||||||
placeholder="Password"
|
|
||||||
onChange={e => (details.password = e.target.value)}
|
|
||||||
/>
|
|
||||||
<span className="icon is-small is-left">
|
|
||||||
<i className="fas fa-lock" />
|
|
||||||
</span>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div className="field">
|
|
||||||
<p className="control">
|
|
||||||
<button
|
|
||||||
className="button inverted"
|
|
||||||
type="submit"
|
|
||||||
onClick={() => submitLogin('ntr', 'grepgrepgrep')}>
|
|
||||||
Default
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
className="button inverted"
|
|
||||||
type="submit"
|
|
||||||
onClick={() => submitLogin(details.name, details.password)}>
|
|
||||||
Login
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
className="button inverted"
|
|
||||||
type="submit"
|
|
||||||
onClick={() => submitRegister(details.name, details.password)}>
|
|
||||||
Register
|
|
||||||
</button>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
module.exports = renderLogin;
|
|
||||||
@ -1,18 +0,0 @@
|
|||||||
const { connect } = require('preact-redux');
|
|
||||||
|
|
||||||
const Login = require('./login.component');
|
|
||||||
|
|
||||||
const addState = connect(
|
|
||||||
(state) => {
|
|
||||||
const { ws } = state;
|
|
||||||
function submitLogin(name, password) {
|
|
||||||
return ws.sendAccountLogin(name, password);
|
|
||||||
}
|
|
||||||
function submitRegister(name, password) {
|
|
||||||
return ws.sendAccountRegister(name, password);
|
|
||||||
}
|
|
||||||
return { account: state.account, submitLogin, submitRegister };
|
|
||||||
},
|
|
||||||
);
|
|
||||||
|
|
||||||
module.exports = addState(Login);
|
|
||||||
@ -1,47 +0,0 @@
|
|||||||
const preact = require('preact');
|
|
||||||
|
|
||||||
// components all the way down
|
|
||||||
const Icon = name => (
|
|
||||||
<span>
|
|
||||||
{name}
|
|
||||||
<svg width="80" height="80" data-jdenticon-value={name} />
|
|
||||||
</span>
|
|
||||||
);
|
|
||||||
|
|
||||||
// the css attribute name `class` is reserved in js
|
|
||||||
// so in react you have to call it `className`
|
|
||||||
function Navbar() {
|
|
||||||
const NAMES = ['Mashy', 'ntr'];
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div>
|
|
||||||
<nav className="navbar">
|
|
||||||
<div className="navbar-end">
|
|
||||||
<a href="/somewhere" className="navbar-item is-active">
|
|
||||||
Home
|
|
||||||
</a>
|
|
||||||
<a href="/somewhere" className="navbar-item">
|
|
||||||
Store
|
|
||||||
</a>
|
|
||||||
<a href="/somewhere" className="navbar-item">
|
|
||||||
FAQ
|
|
||||||
</a>
|
|
||||||
<span className="navbar-item">
|
|
||||||
<a href="/somewhere" className="button is-info is-inverted">
|
|
||||||
<span className="icon">
|
|
||||||
<svg width="80" height="80" data-jdenticon-value="Blog" />
|
|
||||||
</span>
|
|
||||||
<span>Blog</span>
|
|
||||||
</a>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
{NAMES.map(Icon)}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
// map is a function that is called on every element of an array
|
|
||||||
// so in this ^^ case it calls Icon('Mashy') which returns some jsx
|
|
||||||
// that gets put into the dom
|
|
||||||
}
|
|
||||||
|
|
||||||
module.exports = Navbar;
|
|
||||||
@ -1,56 +0,0 @@
|
|||||||
const preact = require('preact');
|
|
||||||
const { connect } = require('preact-redux');
|
|
||||||
const Phaser = require('phaser');
|
|
||||||
const PhaserPassives = require('./passive.phaser');
|
|
||||||
|
|
||||||
const addState = connect(
|
|
||||||
function receiveState(state) {
|
|
||||||
const {
|
|
||||||
game, account,
|
|
||||||
} = state;
|
|
||||||
return {
|
|
||||||
game, account,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
);
|
|
||||||
|
|
||||||
class PhaserInstance extends preact.Component {
|
|
||||||
constructor(props) {
|
|
||||||
super(props);
|
|
||||||
this.props = props;
|
|
||||||
}
|
|
||||||
|
|
||||||
componentWillReceiveProps(nextProps) {
|
|
||||||
// code here will update passive allocation from state
|
|
||||||
}
|
|
||||||
|
|
||||||
componentDidMount() {
|
|
||||||
// now mounted, can freely modify the DOM:
|
|
||||||
this.PhaserPassives = new PhaserPassives();
|
|
||||||
const config = {
|
|
||||||
type: Phaser.DOM.FILL,
|
|
||||||
width: 1200,
|
|
||||||
height: 900,
|
|
||||||
parent: 'passives',
|
|
||||||
physics: {
|
|
||||||
default: 'arcade',
|
|
||||||
arcade: {
|
|
||||||
gravity: { y: 0 },
|
|
||||||
},
|
|
||||||
},
|
|
||||||
scene: this.PhaserPassives,
|
|
||||||
};
|
|
||||||
const game = new Phaser.Game(config);
|
|
||||||
game.canvas.addEventListener('mousedown', () => this.PhaserPassives.camPan(true));
|
|
||||||
game.canvas.addEventListener('mouseup', () => this.PhaserPassives.camPan(false));
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
render() {
|
|
||||||
return (
|
|
||||||
<div id="passives" style="overflow: hidden;">
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
module.exports = addState(PhaserInstance);
|
|
||||||
@ -1,126 +0,0 @@
|
|||||||
const Phaser = require('phaser');
|
|
||||||
const PassiveNode = require('./passive.node');
|
|
||||||
const passiveDataNode = require('./passive.data.node');
|
|
||||||
const passiveDataEdge = require('./passive.data.edge');
|
|
||||||
|
|
||||||
// Passive tree generator - proof of concept visuals need work
|
|
||||||
// Mouse click hold to move, Q + E to zoom in and out
|
|
||||||
// Press 'A' to reset allocated passive nodes
|
|
||||||
|
|
||||||
class PhaserPassives extends Phaser.Scene {
|
|
||||||
preload() {
|
|
||||||
this.load.image('eye', 'https://labs.phaser.io/assets/particles/green-orb.png');
|
|
||||||
this.load.image('background', 'http://labs.phaser.io/assets/skies/nebula.jpg');
|
|
||||||
}
|
|
||||||
|
|
||||||
create() {
|
|
||||||
this.background = this.add.image(0, 0, 'background');
|
|
||||||
this.background.setScale(5);
|
|
||||||
this.background.setInteractive();
|
|
||||||
this.graphics = this.add.graphics();
|
|
||||||
this.nodeText = this.add.text(10000, 10000, 'grep', {
|
|
||||||
fontSize: '32px',
|
|
||||||
fontFamily: 'Arial',
|
|
||||||
color: '#ffffff',
|
|
||||||
backgroundColor: '#000000',
|
|
||||||
}).setPadding(32);
|
|
||||||
|
|
||||||
this.passiveNodeData = passiveDataNode;
|
|
||||||
this.passiveEdgeData = passiveDataEdge;
|
|
||||||
this.addPassiveNodes();
|
|
||||||
this.drawPassiveEdges();
|
|
||||||
this.addCanmeraControl();
|
|
||||||
}
|
|
||||||
|
|
||||||
addPassiveNodes() {
|
|
||||||
this.passiveNodes = [];
|
|
||||||
this.passiveNodeData.forEach((n) => {
|
|
||||||
this.passiveNodes[n.id] = this.add.existing(
|
|
||||||
new PassiveNode(this, n.x, n.y, n.id, n.alloc, n.text)
|
|
||||||
).setInteractive();
|
|
||||||
});
|
|
||||||
|
|
||||||
this.input.on('pointerover', (pointer, gameObjects) => {
|
|
||||||
if (gameObjects[0] instanceof PassiveNode) {
|
|
||||||
if (!gameObjects[0].alloc) gameObjects[0].setTint(0xff00ff);
|
|
||||||
this.nodeText.x = pointer.x + this.cameras.main.scrollX;
|
|
||||||
this.nodeText.y = pointer.y + this.cameras.main.scrollY;
|
|
||||||
this.nodeText.text = gameObjects[0].text;
|
|
||||||
} else {
|
|
||||||
this.nodeText.text = '';
|
|
||||||
}
|
|
||||||
});
|
|
||||||
this.input.on('pointerout', (pointer, gameObjects) => {
|
|
||||||
if (gameObjects[0] instanceof PassiveNode) {
|
|
||||||
if (!gameObjects[0].alloc) gameObjects[0].clearTint();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
this.input.on('pointerup', (pointer, gameObjects) => {
|
|
||||||
if (Math.abs(pointer.upX - pointer.downX) < 5
|
|
||||||
&& Math.abs(pointer.upY - pointer.downY) < 5) {
|
|
||||||
// Check cursor hasn't significantly moved during point allocation
|
|
||||||
// If panning and mouse release is on node it won't allocate
|
|
||||||
if (gameObjects[0] instanceof PassiveNode) {
|
|
||||||
gameObjects[0].allocate();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
this.input.keyboard.on('keydown_A', () => {
|
|
||||||
this.updatePassives(); // Will update nodes from state
|
|
||||||
}, 0, this);
|
|
||||||
}
|
|
||||||
|
|
||||||
drawPassiveEdges() {
|
|
||||||
this.graphics.clear();
|
|
||||||
this.passiveEdgeData.forEach((e) => {
|
|
||||||
const drawEdge = this.passiveNodeData.filter(n => (
|
|
||||||
e[0] === n.id || e[1] === n.id
|
|
||||||
));
|
|
||||||
if (drawEdge[0].alloc && drawEdge[1].alloc) {
|
|
||||||
this.graphics.lineStyle(10, 0xfff00f, 0.2);
|
|
||||||
} else {
|
|
||||||
this.graphics.lineStyle(2, 0xffffff, 0.2);
|
|
||||||
}
|
|
||||||
// console.log(drawEdge);
|
|
||||||
this.graphics.lineBetween(drawEdge[0].x, drawEdge[0].y, drawEdge[1].x, drawEdge[1].y);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
addCanmeraControl() {
|
|
||||||
this.input.on('pointermove', (pointer) => {
|
|
||||||
if (this.pan) {
|
|
||||||
const points = pointer.getInterpolatedPosition(2);
|
|
||||||
this.cameras.main.scrollX -= (points[1].x - points[0].x) * 2;
|
|
||||||
this.cameras.main.scrollY -= (points[1].y - points[0].y) * 2;
|
|
||||||
}
|
|
||||||
}, this);
|
|
||||||
this.controls = new Phaser.Cameras.Controls.SmoothedKeyControl({
|
|
||||||
camera: this.cameras.main,
|
|
||||||
zoomIn: this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.Q),
|
|
||||||
zoomOut: this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.E),
|
|
||||||
acceleration: 0.005,
|
|
||||||
drag: 0.0005,
|
|
||||||
maxSpeed: 0.001,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
updatePassives() {
|
|
||||||
this.passiveNodeData.forEach((n) => {
|
|
||||||
this.passiveNodes[n.id].alloc = false;
|
|
||||||
this.passiveNodes[n.id].updateNode();
|
|
||||||
});
|
|
||||||
// This function will be modified to just update from state
|
|
||||||
// State will update n.alloc instead of false
|
|
||||||
}
|
|
||||||
|
|
||||||
camPan(bool) {
|
|
||||||
this.pan = bool;
|
|
||||||
}
|
|
||||||
|
|
||||||
update(delta) {
|
|
||||||
this.controls.update(delta);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
module.exports = PhaserPassives;
|
|
||||||
@ -1,74 +0,0 @@
|
|||||||
const Phaser = require('phaser');
|
|
||||||
const fs = require('fs');
|
|
||||||
|
|
||||||
class PhaserCombat extends Phaser.Scene {
|
|
||||||
preload() {
|
|
||||||
/* Static Images */
|
|
||||||
this.textures.addBase64('alk', `data:image/png;base64,${new Buffer.from(fs.readFileSync('./assets/alakazam-f.png')).toString('base64')}`);
|
|
||||||
this.textures.addBase64('magmar', `data:image/png;base64,${new Buffer.from(fs.readFileSync('./assets/magmar.png')).toString('base64')}`);
|
|
||||||
|
|
||||||
this.load.image('sky', 'http://labs.phaser.io/assets/skies/nebula.jpg');
|
|
||||||
this.load.image('proj', 'http://labs.phaser.io/assets/sprites/bullet.png');
|
|
||||||
this.load.image('blue', 'http://labs.phaser.io/assets/particles/blue.png');
|
|
||||||
this.load.image('green', 'http://labs.phaser.io/assets/particles/green.png');
|
|
||||||
this.load.image('red', 'http://labs.phaser.io/assets/particles/red.png');
|
|
||||||
this.load.image('white', 'http://labs.phaser.io/assets/particles/white.png');
|
|
||||||
this.load.image('yellow', 'http://labs.phaser.io/assets/particles/yellow.png');
|
|
||||||
|
|
||||||
|
|
||||||
/* Spritesheets */
|
|
||||||
this.load.spritesheet({
|
|
||||||
key: 'explosion',
|
|
||||||
url: 'http://labs.phaser.io/assets/sprites/explosion.png',
|
|
||||||
frameConfig: { frameWidth: 64, frameHeight: 64, endFrame: 23 },
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
create() {
|
|
||||||
this.add.image(400, 300, 'sky');// Background image
|
|
||||||
this.createPlayers();
|
|
||||||
this.createAnim();
|
|
||||||
this.cursors = this.input.keyboard.createCursorKeys();
|
|
||||||
this.combat = false;
|
|
||||||
}
|
|
||||||
|
|
||||||
createPlayers() {
|
|
||||||
this.players = this.physics.add.staticGroup();
|
|
||||||
const img = this.players.create(100, 300, 'alk');
|
|
||||||
const imgTwo = this.players.create(500, 300, 'magmar');
|
|
||||||
img.setScale(0.5);
|
|
||||||
imgTwo.setScale(0.5);
|
|
||||||
this.playerOneHp = this.add.text(20, 200, 'HP', { fontFamily: 'Arial', fontSize: 24, color: '#00ff00' });
|
|
||||||
this.playerTwoHp = this.add.text(450, 200, 'HP', { fontFamily: 'Arial', fontSize: 24, color: '#00ff00' });
|
|
||||||
this.loaded = true;
|
|
||||||
}
|
|
||||||
|
|
||||||
createAnim() {
|
|
||||||
const config = {
|
|
||||||
key: 'explodeAnimation',
|
|
||||||
frames: this.anims.generateFrameNumbers('explosion', { start: 0, end: 23, first: 23 }),
|
|
||||||
frameRate: 20,
|
|
||||||
repeat: 0,
|
|
||||||
};
|
|
||||||
this.anims.create(config);
|
|
||||||
}
|
|
||||||
|
|
||||||
setPlayerOneHp(health) {
|
|
||||||
this.playerOneHp.text = health;
|
|
||||||
}
|
|
||||||
|
|
||||||
setPlayerTwoHp(health) {
|
|
||||||
this.playerTwoHp.text = health;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
explode(proj) {
|
|
||||||
this.proj.disableBody(true, true);
|
|
||||||
this.emitter.stop();
|
|
||||||
const sprite = this.add.sprite(proj.x, proj.y, 'explosion').play('explodeAnimation');
|
|
||||||
sprite.setScale(3);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
PhaserCombat.prototype.skills = require('./phaser.skills.js');
|
|
||||||
|
|
||||||
module.exports = PhaserCombat;
|
|
||||||
@ -1,67 +0,0 @@
|
|||||||
const preact = require('preact');
|
|
||||||
const { connect } = require('preact-redux');
|
|
||||||
const Phaser = require('phaser');
|
|
||||||
const PhaserCombat = require('./phaser.combat');
|
|
||||||
|
|
||||||
const addState = connect(
|
|
||||||
function receiveState(state) {
|
|
||||||
const {
|
|
||||||
game, activeSkill, activeIncoming, account,
|
|
||||||
} = state;
|
|
||||||
return {
|
|
||||||
game, activeSkill, activeIncoming, account,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
);
|
|
||||||
|
|
||||||
class PhaserInstance extends preact.Component {
|
|
||||||
constructor(props) {
|
|
||||||
super(props);
|
|
||||||
this.props = props;
|
|
||||||
}
|
|
||||||
|
|
||||||
componentWillReceiveProps(nextProps) {
|
|
||||||
const playerTeam = nextProps.game.teams.find(t => t.id === nextProps.account.id);
|
|
||||||
const otherTeams = nextProps.game.teams.filter(t => t.id !== nextProps.account.id);
|
|
||||||
|
|
||||||
if (playerTeam && otherTeams[0] && this.PhaserCombat.loaded) {
|
|
||||||
this.PhaserCombat.setPlayerOneHp(`${playerTeam.cryps[0].hp.value.toString()} / ${playerTeam.cryps[0].stamina.value.toString()} HP`);
|
|
||||||
this.PhaserCombat.setPlayerTwoHp(`${otherTeams[0].cryps[0].hp.value.toString()} / ${otherTeams[0].cryps[0].stamina.value.toString()} HP`);
|
|
||||||
|
|
||||||
if (playerTeam.cryps[0].hp.value === 0) {
|
|
||||||
// this.PhaserCombat.skills('blast', 400, -150);
|
|
||||||
this.PhaserCombat.skills('chargeBall', 'green', 400, -250);
|
|
||||||
} else if (otherTeams[0].cryps[0].hp.value === 0) {
|
|
||||||
// this.PhaserCombat.skills('blast', 180, 150);
|
|
||||||
this.PhaserCombat.skills('chargeBall', 'green', 180, 250);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
componentDidMount() {
|
|
||||||
// now mounted, can freely modify the DOM:
|
|
||||||
this.PhaserCombat = new PhaserCombat();
|
|
||||||
const config = {
|
|
||||||
type: Phaser.DOM.FILL,
|
|
||||||
width: 600,
|
|
||||||
height: 400,
|
|
||||||
parent: 'phaser-example',
|
|
||||||
physics: {
|
|
||||||
default: 'arcade',
|
|
||||||
arcade: {
|
|
||||||
gravity: { y: 0 },
|
|
||||||
},
|
|
||||||
},
|
|
||||||
scene: this.PhaserCombat,
|
|
||||||
};
|
|
||||||
const game = new Phaser.Game(config);
|
|
||||||
}
|
|
||||||
|
|
||||||
render() {
|
|
||||||
return (
|
|
||||||
<div id="phaser-example" style="overflow: hidden;">
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
module.exports = addState(PhaserInstance);
|
|
||||||
@ -1,141 +0,0 @@
|
|||||||
// Skill function called by phaser combat
|
|
||||||
const Phaser = require('phaser');
|
|
||||||
|
|
||||||
function skills(skill, img, location, spd) {
|
|
||||||
if (this.combat) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
this.combat = true;
|
|
||||||
const particles = this.add.particles(img);
|
|
||||||
|
|
||||||
switch (skill) {
|
|
||||||
case 'blast':
|
|
||||||
this.proj = this.physics.add.image(-100, 300, 'proj');
|
|
||||||
this.emitter = particles.createEmitter({
|
|
||||||
speed: 25,
|
|
||||||
scale: { start: 1, end: 0 },
|
|
||||||
blendMode: 'ADD',
|
|
||||||
});
|
|
||||||
this.emitter.startFollow(this.proj);
|
|
||||||
this.physics.add.overlap(this.proj, this.players, this.explode, null, this);
|
|
||||||
this.proj.x = location;
|
|
||||||
this.proj.setVelocity(spd, 0);
|
|
||||||
break;
|
|
||||||
|
|
||||||
case 'wall':
|
|
||||||
this.emitter = particles.createEmitter({
|
|
||||||
x: location,
|
|
||||||
y: { min: 200, max: 350 },
|
|
||||||
lifespan: 2000,
|
|
||||||
speedX: { min: spd, max: spd * 2 },
|
|
||||||
scale: { start: 0.4, end: 0 },
|
|
||||||
quantity: 4,
|
|
||||||
blendMode: 'ADD',
|
|
||||||
});
|
|
||||||
this.time.delayedCall(1000, () => { this.emitter.stop(); }, [], this);
|
|
||||||
break;
|
|
||||||
|
|
||||||
case 'spit':
|
|
||||||
if (location > 250) {
|
|
||||||
this.angleMin = 180;
|
|
||||||
this.angleMax = 220;
|
|
||||||
} else {
|
|
||||||
this.angleMin = 320;
|
|
||||||
this.angleMax = 360;
|
|
||||||
}
|
|
||||||
this.emitter = particles.createEmitter({
|
|
||||||
x: location,
|
|
||||||
y: 300,
|
|
||||||
lifespan: 2000,
|
|
||||||
angle: { min: this.angleMin, max: this.angleMax },
|
|
||||||
speed: spd * 2,
|
|
||||||
scale: { start: 0.4, end: 1 },
|
|
||||||
gravityY: 250,
|
|
||||||
quantity: 4,
|
|
||||||
blendMode: 'ADD',
|
|
||||||
});
|
|
||||||
this.time.delayedCall(1000, () => { this.emitter.stop(); }, [], this);
|
|
||||||
break;
|
|
||||||
case 'gravBomb':
|
|
||||||
this.well = particles.createGravityWell({
|
|
||||||
x: 150,
|
|
||||||
y: 150,
|
|
||||||
power: 4,
|
|
||||||
gravity: 500,
|
|
||||||
});
|
|
||||||
this.emitter = particles.createEmitter({
|
|
||||||
x: 150,
|
|
||||||
y: 150,
|
|
||||||
lifespan: 1500,
|
|
||||||
speed: 1000,
|
|
||||||
scale: { start: 0.7, end: 1 },
|
|
||||||
blendMode: 'ADD',
|
|
||||||
});
|
|
||||||
this.time.delayedCall(1000, () => {
|
|
||||||
this.emitter.stop();
|
|
||||||
this.well.active = false;
|
|
||||||
}, [], this);
|
|
||||||
break;
|
|
||||||
case 'gravBlast':
|
|
||||||
this.well = particles.createGravityWell({
|
|
||||||
x: 400,
|
|
||||||
y: 300,
|
|
||||||
power: 4,
|
|
||||||
gravity: 500,
|
|
||||||
});
|
|
||||||
this.emitter = particles.createEmitter({
|
|
||||||
x: 400,
|
|
||||||
y: 300,
|
|
||||||
lifespan: 2000,
|
|
||||||
speed: 1000,
|
|
||||||
scale: { start: 0.7, end: 1 },
|
|
||||||
blendMode: 'ADD',
|
|
||||||
bounds: {
|
|
||||||
x: 0, y: 250, w: 450, h: 150,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
this.time.delayedCall(1000, () => {
|
|
||||||
this.emitter.stop();
|
|
||||||
this.well.x = 100;
|
|
||||||
}, [], this);
|
|
||||||
this.time.delayedCall(3000, () => {
|
|
||||||
this.well.active = false;
|
|
||||||
}, [], this);
|
|
||||||
break;
|
|
||||||
case 'chargeBall':
|
|
||||||
|
|
||||||
this.emitter = particles.createEmitter({
|
|
||||||
x: -400,
|
|
||||||
y: -100,
|
|
||||||
lifespan: 1000,
|
|
||||||
moveToX: 450,
|
|
||||||
moveToY: 150,
|
|
||||||
scale: 0.75,
|
|
||||||
quantity: 4,
|
|
||||||
_frequency: 20,
|
|
||||||
blendMode: 'ADD',
|
|
||||||
emitZone: { source: new Phaser.Geom.Rectangle(0, 0, 1600, 700) },
|
|
||||||
});
|
|
||||||
this.emitter2 = particles.createEmitter({
|
|
||||||
radial: false,
|
|
||||||
x: { min: 450, max: 50, steps: 256 },
|
|
||||||
y: { min: 150, max: 300, steps: 256 },
|
|
||||||
lifespan: 1000,
|
|
||||||
speedX: { min: 200, max: 400 },
|
|
||||||
quantity: 4,
|
|
||||||
gravityY: 0,
|
|
||||||
scale: { start: 1.5, end: 0, ease: 'Power3' },
|
|
||||||
blendMode: 'ADD',
|
|
||||||
active: false,
|
|
||||||
});
|
|
||||||
this.time.delayedCall(1000, () => { this.emitter.stop(); }, [], this);
|
|
||||||
this.time.delayedCall(2000, () => { this.emitter2.active = true; }, [], this);
|
|
||||||
this.time.delayedCall(3000, () => { this.emitter2.stop(); }, [], this);
|
|
||||||
break;
|
|
||||||
default:
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
module.exports = skills;
|
|
||||||
@ -12,8 +12,6 @@ class CrypList extends Phaser.Scene {
|
|||||||
|
|
||||||
const cryps = this.registry.get('cryps');
|
const cryps = this.registry.get('cryps');
|
||||||
this.graphics = this.add.graphics();
|
this.graphics = this.add.graphics();
|
||||||
this.graphics.originX = 0;
|
|
||||||
this.graphics.originY = 0;
|
|
||||||
this.renderCryps(cryps);
|
this.renderCryps(cryps);
|
||||||
return true;
|
return true;
|
||||||
}
|
}
|
||||||
@ -32,11 +30,17 @@ class CrypList extends Phaser.Scene {
|
|||||||
crypRow(this, cryp, i);
|
crypRow(this, cryp, i);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
this.input.on('gameobjectup', this.clickHandler, this);
|
||||||
|
|
||||||
// seal the boxes in and stop rerendering them
|
// seal the boxes in and stop rerendering them
|
||||||
this.graphics.generateTexture();
|
this.graphics.generateTexture();
|
||||||
|
|
||||||
return true;
|
return true;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
clickHandler(pointer, crypBox) {
|
||||||
|
this.registry.set('activeCryp', crypBox.cryp);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
module.exports = CrypList;
|
module.exports = CrypList;
|
||||||
|
|||||||
55
client/src/scenes/cryp.page.js
Normal file
55
client/src/scenes/cryp.page.js
Normal file
@ -0,0 +1,55 @@
|
|||||||
|
const Phaser = require('phaser');
|
||||||
|
|
||||||
|
const ROW_WIDTH = 400;
|
||||||
|
const ROW_HEIGHT = 200;
|
||||||
|
const ROW_FILL = 0x888888;
|
||||||
|
|
||||||
|
const TOP_MARGIN = 50;
|
||||||
|
const ROW_MARGIN = 50;
|
||||||
|
const TEXT_MARGIN = 24;
|
||||||
|
|
||||||
|
const xPos = i => 0;
|
||||||
|
const yPos = i => (i * ROW_HEIGHT + ROW_MARGIN) + TOP_MARGIN;
|
||||||
|
|
||||||
|
function crypSkill(scene, skill, i) {
|
||||||
|
scene.add.text(500, 500 + (TEXT_MARGIN * (i + 1)), skill.skill, { fontFamily: 'Arial', fontSize: 24, color: '#ffffff', fontStyle: 'bold' });
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
class CrypPage extends Phaser.Scene {
|
||||||
|
constructor() {
|
||||||
|
super({ key: 'CrypPage', active: true });
|
||||||
|
}
|
||||||
|
|
||||||
|
create() {
|
||||||
|
this.registry.events.on('changedata', this.updateData, this);
|
||||||
|
|
||||||
|
const cryp = this.registry.get('activeCryp');
|
||||||
|
this.graphics = this.add.graphics();
|
||||||
|
|
||||||
|
this.renderCryp(cryp);
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
|
updateData(parent, key, data) {
|
||||||
|
if (key === 'activeCryp') {
|
||||||
|
return this.scene.restart();
|
||||||
|
}
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
|
renderCryp(cryp) {
|
||||||
|
if (!cryp) return true;
|
||||||
|
|
||||||
|
this.add.text(500, 500, cryp.name, { fontFamily: 'Arial', fontSize: 24, color: '#ffffff', fontStyle: 'bold' });
|
||||||
|
|
||||||
|
cryp.skills.forEach((skill, i) => crypSkill(this, skill, i));
|
||||||
|
|
||||||
|
// seal the boxes in and stop rerendering them
|
||||||
|
this.graphics.generateTexture();
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
module.exports = CrypPage;
|
||||||
@ -15,12 +15,15 @@ function crypRow(list, cryp, i) {
|
|||||||
const X_ORIGIN = xPos(i);
|
const X_ORIGIN = xPos(i);
|
||||||
const Y_ORIGIN = yPos(i);
|
const Y_ORIGIN = yPos(i);
|
||||||
|
|
||||||
list.graphics.fillStyle(ROW_FILL * Math.random(), 1.0);
|
const row = list.add.rectangle(X_ORIGIN, Y_ORIGIN, ROW_WIDTH, ROW_HEIGHT, ROW_FILL * Math.random())
|
||||||
list.graphics.fillRect(X_ORIGIN, Y_ORIGIN, ROW_WIDTH, ROW_HEIGHT);
|
.setInteractive()
|
||||||
|
.setOrigin(0);
|
||||||
|
|
||||||
|
row.cryp = cryp;
|
||||||
list.add.text(X_ORIGIN, Y_ORIGIN + (TEXT_MARGIN * 0), cryp.name, { fontFamily: 'Arial', fontSize: 24, color: '#ffffff', fontStyle: 'bold' });
|
list.add.text(X_ORIGIN, Y_ORIGIN + (TEXT_MARGIN * 0), cryp.name, { fontFamily: 'Arial', fontSize: 24, color: '#ffffff', fontStyle: 'bold' });
|
||||||
list.add.text(X_ORIGIN, Y_ORIGIN + (TEXT_MARGIN * 1), cryp.stamina.base, { fontFamily: 'Arial', fontSize: 24, color: '#ffffff', fontStyle: 'bold' });
|
list.add.text(X_ORIGIN, Y_ORIGIN + (TEXT_MARGIN * 1), cryp.stamina.base, { fontFamily: 'Arial', fontSize: 24, color: '#ffffff', fontStyle: 'bold' });
|
||||||
|
|
||||||
return true;
|
return true;
|
||||||
}
|
}
|
||||||
|
|
||||||
module.exports = crypRow;
|
module.exports = crypRow;
|
||||||
@ -1,6 +1,7 @@
|
|||||||
const Phaser = require('phaser');
|
const Phaser = require('phaser');
|
||||||
|
|
||||||
const CrypList = require('./cryp.list');
|
const CrypList = require('./cryp.list');
|
||||||
|
const CrypPage = require('./cryp.page');
|
||||||
const Menu = require('./menu');
|
const Menu = require('./menu');
|
||||||
// const Passives = require('./passives');
|
// const Passives = require('./passives');
|
||||||
|
|
||||||
@ -22,6 +23,7 @@ function renderCryps(store) {
|
|||||||
scene: [
|
scene: [
|
||||||
Menu,
|
Menu,
|
||||||
CrypList,
|
CrypList,
|
||||||
|
CrypPage,
|
||||||
],
|
],
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user