ntr/mnml
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

merged and removed components

Browse Source
This commit is contained in:
Mashy 2018-11-19 22:07:46 +10:00
commit bd3ffdc123
28 changed files with 141 additions and 1096 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
client/src/components/battle.cryp.card.jsx
View File

@ -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;

72
client/src/components/body.component.jsx
View File

@ -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);

29
client/src/components/cryp.list.container.js
View File

@ -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);

62
client/src/components/cryp.list.jsx
View File

@ -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.base} / {cryp.stamina.base} HP </div>
<progress className="progress is-dark" value={cryp.hp.base} max={cryp.stamina.base}></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.base === 0}
onClick={() => sendGamePve(cryp.id)}>
Start PVE
</button>
<button
className="button is-dark"
type="submit"
disabled={cryp.hp.base === 0}
onClick={() => sendGamePvp([cryp.id])}>
PVP
</button>
</div>
));
return (
<div className="tile is-parent is-vertical" >
{crypPanels}
</div>
);
}
module.exports = CrypList;

37
client/src/components/cryp.panel.jsx
View File

@ -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>
);
}

30
client/src/components/cryp.spawn.button.jsx
View File

@ -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;

16
client/src/components/cryp.spawn.container.js
View File

@ -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);

30
client/src/components/cryp.ui.js
View File

@ -1,30 +0,0 @@
const Phaser = require('phaser');
const fs = require('fs');
class CrypUi extends Phaser.Scene {
constructor() {
super('combat');
}
preload() {
/* Static Images */
this.textures.addBase64('alk', `data:image/png;base64,${new Buffer.from(fs.readFileSync('./assets/alakazam-f.png')).toString('base64')}`);
}
create() {
this.createPlayers();
this.input.keyboard.on('keydown_S', () => {
this.scene.switch('passives'); // Switch to passive scene
}, 0, this);
}
createPlayers() {
this.players = this.physics.add.staticGroup();
const img = this.players.create(100, 300, 'alk');
img.setScale(1);
this.playerOneHp = this.add.text(20, 200, 'HP', { fontFamily: 'Arial', fontSize: 24, color: '#00ff00' });
this.loaded = true;
}
}
module.exports = CrypUi;

48
client/src/components/game.container.js
View File

@ -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);

42
client/src/components/game.join.button.jsx
View File

@ -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);

188
client/src/components/game.jsx
View File

@ -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.base} / {cryp.stamina.base} HP </div>
<progress className="progress is-dark" value={cryp.hp.base} max={cryp.stamina.base}></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.base} / {cryp.stamina.base} HP </div>
<progress className="progress is-dark" value={cryp.hp.base} max={cryp.stamina.base}></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;

19
client/src/components/header.component.jsx
View File

@ -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;

20
client/src/components/item.list.container.js
View File

@ -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);

37
client/src/components/item.list.jsx
View File

@ -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;

69
client/src/components/login.component.jsx
View File

@ -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;

18
client/src/components/login.container.jsx
View File

@ -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);

47
client/src/components/navbar.jsx
View File

@ -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;

57
client/src/components/passive.container.jsx
View File

@ -1,57 +0,0 @@
const preact = require('preact');
const { connect } = require('preact-redux');
const Phaser = require('phaser');
const PhaserPassives = require('./passive.phaser');
const PhaserCombat = require('./phaser.combat');
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, PhaserCombat],
};
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);

138
client/src/components/passive.phaser.js
View File

@ -1,138 +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 {
constructor() {
super('passives');
}
preload() {
this.load.image('eye', 'https://labs.phaser.io/assets/particles/green-orb.png');
}
create() {
this.graphics = this.add.graphics();
this.passiveNodeData = passiveDataNode;
this.passiveEdgeData = passiveDataEdge;
this.addPassiveNodes();
this.addCameraControl();
this.addEvents();
this.drawPassiveEdges();
}
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();
});
}
addCameraControl() {
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,
});
}
addEvents() {
this.input.on('pointerover', (pointer, gameObjects) => {
if (gameObjects[0] instanceof PassiveNode) {
if (!gameObjects[0].alloc) {
gameObjects[0].setTint(0xff00ff);
}
this.displayPassiveText(gameObjects[0], pointer);
}
});
this.input.on('pointerout', (pointer, gameObjects) => {
if (gameObjects[0] instanceof PassiveNode) {
if (!gameObjects[0].alloc) gameObjects[0].clearTint();
this.nodeText.destroy();
}
});
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.on('pointermove', (pointer) => {
const zoomFactor = 2 / this.cameras.main.zoom;
if (this.pan) {
const points = pointer.getInterpolatedPosition(2);
this.cameras.main.scrollX -= zoomFactor * (points[1].x - points[0].x);
this.cameras.main.scrollY -= zoomFactor * (points[1].y - points[0].y);
}
}, this);
this.input.keyboard.on('keydown_A', () => {
this.updatePassives(); // Will update nodes from state
}, 0, this);
this.input.keyboard.on('keydown_S', () => {
this.scene.switch('combat');
}, 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);
});
}
displayPassiveText(node, pointer) {
if (this.nodeText) this.nodeText.destroy();
this.nodeText = this.add.text(node.x, node.y, node.text, {
fontSize: '20px',
fontFamily: 'Arial',
color: '#ffffff',
backgroundColor: '#222222',
}).setPadding(32);
this.nodeText.setAlpha(0.8);
this.nodeText.setOrigin(pointer.x >= 600 ? 1 : 0, pointer.y >= 450 ? 1 : 0);
this.nodeText.setWordWrapWidth(450);
this.nodeText.setScale(1 / this.cameras.main.zoom);
}
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;

55
client/src/components/phaser.container.jsx
View File

@ -1,55 +0,0 @@
const preact = require('preact');
const { connect } = require('preact-redux');
const Phaser = require('phaser');
const PhaserCombat = require('./phaser.combat');
const PhaserPassives = require('./passive.phaser');
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) {
this.PhaserCombat.registry.set('playerCryps', nextProps.game.teams.find(t => t.id === nextProps.account.id));
this.PhaserCombat.registry.set('enemyCryps', nextProps.game.teams.filter(t => t.id !== nextProps.account.id)[0]);
}
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, PhaserPassives],
};
const game = new Phaser.Game(config);
}
render() {
return (
<div id="phaser-example" style="overflow: hidden;">
</div>
);
}
}
module.exports = addState(PhaserInstance);

0
client/src/components/phaser.combat.js → client/src/scenes/combat.js
View File

0
client/src/components/phaser.skills.js → client/src/scenes/combat.skills.js
View File

23
client/src/scenes/cryp.info.js Executable file
View File

@ -0,0 +1,23 @@
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;
class CrypInfo extends Phaser.GameObjects.Rectangle {
constructor(scene, cryp, i) {
const X_ORIGIN = 0;
const Y_ORIGIN = (i * ROW_HEIGHT + ROW_MARGIN) + TOP_MARGIN;
super(scene, X_ORIGIN, Y_ORIGIN, ROW_WIDTH, ROW_HEIGHT, ROW_FILL * Math.random());
this.setOrigin(0);
this.cryp = cryp;
scene.add.text(X_ORIGIN, Y_ORIGIN + (TEXT_MARGIN * 0), cryp.name, { fontFamily: 'Arial', fontSize: 24, color: '#ffffff', fontStyle: 'bold' });
scene.add.text(X_ORIGIN, Y_ORIGIN + (TEXT_MARGIN * 1), cryp.stamina.base, { fontFamily: 'Arial', fontSize: 24, color: '#ffffff', fontStyle: 'bold' })
}
}
module.exports = CrypInfo;

8
client/src/scenes/cryp.list.js
View File

@ -12,8 +12,6 @@ class CrypList extends Phaser.Scene {
const cryps = this.registry.get('cryps');
this.graphics = this.add.graphics();
this.graphics.originX = 0;
this.graphics.originY = 0;
this.renderCryps(cryps);
return true;
}
@ -32,11 +30,17 @@ class CrypList extends Phaser.Scene {
crypRow(this, cryp, i);
});
this.input.on('gameobjectup', this.clickHandler, this);
// seal the boxes in and stop rerendering them
this.graphics.generateTexture();
return true;
}
clickHandler(pointer, crypBox) {
this.registry.set('activeCryp', crypBox.cryp);
}
}
module.exports = CrypList;

55
client/src/scenes/cryp.page.js Normal file
View 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;

9
client/src/scenes/cryp.row.js
View File

@ -15,12 +15,15 @@ function crypRow(list, cryp, i) {
const X_ORIGIN = xPos(i);
const Y_ORIGIN = yPos(i);
list.graphics.fillStyle(ROW_FILL * Math.random(), 1.0);
list.graphics.fillRect(X_ORIGIN, Y_ORIGIN, ROW_WIDTH, ROW_HEIGHT);
const row = list.add.rectangle(X_ORIGIN, Y_ORIGIN, ROW_WIDTH, ROW_HEIGHT, ROW_FILL * Math.random())
.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 * 1), cryp.stamina.base, { fontFamily: 'Arial', fontSize: 24, color: '#ffffff', fontStyle: 'bold' });
return true;
}
module.exports = crypRow;
module.exports = crypRow;

2
client/src/scenes/cryps.js
View File

@ -1,6 +1,7 @@
const Phaser = require('phaser');
const CrypList = require('./cryp.list');
const CrypPage = require('./cryp.page');
const Menu = require('./menu');
// const Passives = require('./passives');
@ -22,6 +23,7 @@ function renderCryps(store) {
scene: [
Menu,
CrypList,
CrypPage,
],
};

86
client/src/scenes/passives.js Normal file → Executable file
View File

@ -7,29 +7,23 @@ const passiveDataEdge = require('./passive.data.edge');
// Mouse click hold to move, Q + E to zoom in and out
// Press 'A' to reset allocated passive nodes
class Passives extends Phaser.Scene {
class PhaserPassives extends Phaser.Scene {
constructor() {
super('passives');
}
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.addCameraControl();
this.addEvents();
this.drawPassiveEdges();
this.addCanmeraControl();
}
addPassiveNodes() {
@ -39,20 +33,32 @@ class Passives extends Phaser.Scene {
new PassiveNode(this, n.x, n.y, n.id, n.alloc, n.text)
).setInteractive();
});
}
addCameraControl() {
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,
});
}
addEvents() {
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 = '';
if (!gameObjects[0].alloc) {
gameObjects[0].setTint(0xff00ff);
}
this.displayPassiveText(gameObjects[0], pointer);
}
});
this.input.on('pointerout', (pointer, gameObjects) => {
if (gameObjects[0] instanceof PassiveNode) {
if (!gameObjects[0].alloc) gameObjects[0].clearTint();
this.nodeText.destroy();
}
});
this.input.on('pointerup', (pointer, gameObjects) => {
@ -65,10 +71,20 @@ class Passives extends Phaser.Scene {
}
}
});
this.input.on('pointermove', (pointer) => {
const zoomFactor = 2 / this.cameras.main.zoom;
if (this.pan) {
const points = pointer.getInterpolatedPosition(2);
this.cameras.main.scrollX -= zoomFactor * (points[1].x - points[0].x);
this.cameras.main.scrollY -= zoomFactor * (points[1].y - points[0].y);
}
}, this);
this.input.keyboard.on('keydown_A', () => {
this.updatePassives(); // Will update nodes from state
}, 0, this);
this.input.keyboard.on('keydown_S', () => {
this.scene.switch('combat');
}, 0, this);
}
drawPassiveEdges() {
@ -87,22 +103,18 @@ class Passives extends Phaser.Scene {
});
}
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,
});
displayPassiveText(node, pointer) {
if (this.nodeText) this.nodeText.destroy();
this.nodeText = this.add.text(node.x, node.y, node.text, {
fontSize: '20px',
fontFamily: 'Arial',
color: '#ffffff',
backgroundColor: '#222222',
}).setPadding(32);
this.nodeText.setAlpha(0.8);
this.nodeText.setOrigin(pointer.x >= 600 ? 1 : 0, pointer.y >= 450 ? 1 : 0);
this.nodeText.setWordWrapWidth(450);
this.nodeText.setScale(1 / this.cameras.main.zoom);
}
updatePassives() {
@ -123,4 +135,4 @@ class Passives extends Phaser.Scene {
}
}
module.exports = Passives;
module.exports = PhaserPassives;