Merge branch 'battleui'
This commit is contained in:
ntr
commit
cf1f478e2f
@ -8,28 +8,26 @@ const CrypSpawnContainer = require('./cryp.spawn.container');
|
|||||||
const GameJoinButton = require('./game.join.button');
|
const GameJoinButton = require('./game.join.button');
|
||||||
const CrypListContainer = require('./cryp.list.container');
|
const CrypListContainer = require('./cryp.list.container');
|
||||||
const GameContainer = require('./game.container');
|
const GameContainer = require('./game.container');
|
||||||
|
const Passives = require('./passive.container');
|
||||||
|
|
||||||
const addState = connect(
|
const addState = connect(
|
||||||
(state) => {
|
(state) => {
|
||||||
const { game, ws } = state;
|
const { game, ws } = state;
|
||||||
|
|
||||||
if (!game) {
|
if (!game) {
|
||||||
console.log('out of game');
|
|
||||||
ws.clearGameStateInterval();
|
ws.clearGameStateInterval();
|
||||||
}
|
}
|
||||||
|
return state;
|
||||||
return { game };
|
|
||||||
},
|
},
|
||||||
(dispatch) => {
|
(dispatch) => {
|
||||||
function setGame(game) {
|
function setGame(game) {
|
||||||
dispatch(actions.setGame(game));
|
dispatch(actions.setGame(game));
|
||||||
}
|
}
|
||||||
return { setGame };
|
return { setGame };
|
||||||
},
|
}
|
||||||
);
|
);
|
||||||
|
|
||||||
function renderBody(props) {
|
function renderBody(props) {
|
||||||
const { game, setGame } = props;
|
const { game, setGame, account } = props;
|
||||||
if (game) {
|
if (game) {
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
@ -44,26 +42,31 @@ function renderBody(props) {
|
|||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
return (
|
if (account) {
|
||||||
<section className="columns">
|
return (
|
||||||
<div className="column is-4">
|
<section className="columns">
|
||||||
<div className="column">
|
<div className="column is-4">
|
||||||
<GameJoinButton />
|
<div className="column">
|
||||||
<CrypSpawnContainer />
|
<GameJoinButton />
|
||||||
</div>
|
<CrypSpawnContainer />
|
||||||
<div className="column">
|
</div>
|
||||||
<div className="columns">
|
<div className="column">
|
||||||
<div className="column is-8">
|
<div className="columns">
|
||||||
<CrypListContainer />
|
<div className="column is-8">
|
||||||
</div>
|
<CrypListContainer />
|
||||||
<div className="column">
|
</div>
|
||||||
<ItemListContainer />
|
<div className="column">
|
||||||
|
<ItemListContainer />
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div className ="column">
|
||||||
</section>
|
<Passives />
|
||||||
);
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
} return <div>not ready</div>;
|
||||||
}
|
}
|
||||||
|
|
||||||
module.exports = addState(renderBody);
|
module.exports = addState(renderBody);
|
||||||
|
|||||||
4
client/src/components/cryp.list.container.js
Normal file → Executable file
4
client/src/components/cryp.list.container.js
Normal file → Executable file
@ -20,7 +20,9 @@ const addState = connect(
|
|||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
|
|
||||||
return { cryps, sendGamePve, sendGamePvp, activeItem, sendItemUse };
|
return {
|
||||||
|
cryps, sendGamePve, sendGamePvp, activeItem, sendItemUse,
|
||||||
|
};
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
|
|
||||||
|
|||||||
@ -27,8 +27,8 @@ function CrypList({
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<div className="has-text-centered">{cryp.hp.value} / {cryp.stam.value} HP </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.stam.value}></progress>
|
<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>
|
<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>
|
<progress className="progress is-dark" value={cryp.xp} max={Math.pow(2, cryp.lvl + 1)}></progress>
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
const preact = require('preact');
|
const preact = require('preact');
|
||||||
const key = require('keymaster');
|
const key = require('keymaster');
|
||||||
|
const Phaser = require('./phaser.container');
|
||||||
const SKILL_HOT_KEYS = ['Q', 'W', 'E', 'R'];
|
const SKILL_HOT_KEYS = ['Q', 'W', 'E', 'R'];
|
||||||
|
|
||||||
function GamePanel(props) {
|
function GamePanel(props) {
|
||||||
@ -78,8 +78,8 @@ function GamePanel(props) {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<div className="has-text-centered">{cryp.hp.value} / {cryp.stam.value} HP </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.stam.value}></progress>
|
<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>
|
<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>
|
<progress className="progress is-dark" value={cryp.xp} max={Math.pow(2, cryp.lvl + 1)}></progress>
|
||||||
@ -120,8 +120,8 @@ function GamePanel(props) {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<div className="has-text-centered">{cryp.hp.value} / {cryp.stam.value} HP </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.stam.value}></progress>
|
<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>
|
<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>
|
<progress className="progress is-dark" value={cryp.xp} max={Math.pow(2, cryp.lvl + 1)}></progress>
|
||||||
@ -160,25 +160,29 @@ function GamePanel(props) {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<section className="columns">
|
<section className="columns">
|
||||||
<div className="column is-2 title is-1">
|
<div className="column is-1">
|
||||||
{phaseText(game.phase)}
|
|
||||||
</div>
|
</div>
|
||||||
<div className="column is-4">
|
<div className="column is-6">
|
||||||
{PlayerTeam(playerTeam, setActiveSkill)}
|
<Phaser />
|
||||||
</div>
|
<section className="columns">
|
||||||
<div className="column is-4">
|
<div className="column is-6">
|
||||||
<div>
|
{PlayerTeam(playerTeam, setActiveSkill)}
|
||||||
{otherTeams.map(OpponentTeam)}
|
</div>
|
||||||
</div>
|
<div className="column is-6">
|
||||||
<div>
|
<div>
|
||||||
{incoming}
|
{otherTeams.map(OpponentTeam)}
|
||||||
</div>
|
</div>
|
||||||
|
<div>
|
||||||
|
{incoming}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
</div>
|
</div>
|
||||||
<div className="column is-2">
|
<div className="column is-2">
|
||||||
<div className="title is-4">{logs}</div>
|
<div className="title is-4">{logs}</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
);
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
module.exports = GamePanel;
|
module.exports = GamePanel;
|
||||||
|
|||||||
56
client/src/components/passive.container.jsx
Executable file
56
client/src/components/passive.container.jsx
Executable file
@ -0,0 +1,56 @@
|
|||||||
|
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);
|
||||||
121
client/src/components/passive.data.edge.js
Executable file
121
client/src/components/passive.data.edge.js
Executable file
@ -0,0 +1,121 @@
|
|||||||
|
const passiveEdges = [
|
||||||
|
['CMED1', 'CSTAT7'],
|
||||||
|
['CSTAT7', 'CSTAT8'],
|
||||||
|
['CSTAT8', 'CSTAT9'],
|
||||||
|
['CSTAT9', 'CMED20'],
|
||||||
|
['CMED20', 'CSTAT10'],
|
||||||
|
['CSTAT10', 'CSTAT11'],
|
||||||
|
['CSTAT11', 'CSTAT12'],
|
||||||
|
['CSTAT12', 'CMED21'],
|
||||||
|
['CMED21', 'CSTAT15'],
|
||||||
|
['CSTAT15', 'CMED22'],
|
||||||
|
['CMED21', 'CSTAT14'],
|
||||||
|
['CSTAT14', 'CLRG4'],
|
||||||
|
['CLRG4', 'CSTAT16'],
|
||||||
|
['CSTAT16', 'CMED22'],
|
||||||
|
['CMED22', 'CSTAT17'],
|
||||||
|
['CMED23', 'CSTAT17'],
|
||||||
|
['CMED23', 'CSTAT13'],
|
||||||
|
['CSTAT13', 'CLRG4'],
|
||||||
|
['CSTAT17', 'CSTAT18'],
|
||||||
|
['CSTAT18', 'CSTAT19'],
|
||||||
|
['CSTAT18', 'CSTAT20'],
|
||||||
|
['CSTAT20', 'CSTAT21'],
|
||||||
|
['CSTAT21', 'CSTAT22'],
|
||||||
|
['CSTAT22', 'CMED9'],
|
||||||
|
['CMED9', 'CSTAT23'],
|
||||||
|
['CSTAT23', 'CSTAT24'],
|
||||||
|
['CSTAT24', 'CLRG2'],
|
||||||
|
['CLRG2', 'CSTAT25'],
|
||||||
|
['CSTAT25', 'CMED8'],
|
||||||
|
['CMED8', 'CSTAT26'],
|
||||||
|
['CSTAT26', 'CLRG1'],
|
||||||
|
['CLRG1', 'CSTAT27'],
|
||||||
|
['CSTAT27', 'CSTAT28'],
|
||||||
|
['CMED7', 'CSTAT28'],
|
||||||
|
['CMED7', 'CSTAT29'],
|
||||||
|
['CSTAT29', 'CSTAT30'],
|
||||||
|
['CSTAT30', 'CSTAT31'],
|
||||||
|
['CSTAT31', 'CSTAT32'],
|
||||||
|
['CSTAT32', 'CSTAT33'],
|
||||||
|
['CSTAT31', 'CSTAT34'],
|
||||||
|
['CSTAT34', 'CSTAT35'],
|
||||||
|
['CSTAT34', 'CSTAT36'],
|
||||||
|
['CSTAT36', 'CSTAT37'],
|
||||||
|
['CSTAT20', 'CSTAT36'],
|
||||||
|
['CMED6', 'CSTAT33'],
|
||||||
|
['CMED25', 'CSTAT18'],
|
||||||
|
['CMED25', 'CMED24'],
|
||||||
|
['CMED24', 'CLRG3'],
|
||||||
|
['CSTAT6', 'CSTAT7'],
|
||||||
|
['CSTAT6', 'CMED18'],
|
||||||
|
['CMED2', 'CSDMG1'],
|
||||||
|
['CSDMG1', 'CSDMG2'],
|
||||||
|
['CSDMG2', 'CSDMG3'],
|
||||||
|
['CMED18', 'CSDMG3'],
|
||||||
|
['CMED2', 'CHEAL1'],
|
||||||
|
['CHEAL1', 'CHEAL2'],
|
||||||
|
['CHEAL2', 'CHEAL3'],
|
||||||
|
['CHEAL3', 'CMED18'],
|
||||||
|
['CMED18', 'CSDMG4'],
|
||||||
|
['CSDMG4', 'CSDMG5'],
|
||||||
|
['CSDMG5', 'CSDMG6'],
|
||||||
|
['CSDMG5', 'CSTAT5'],
|
||||||
|
['CSTAT5', 'CSTAT4'],
|
||||||
|
['CSTAT4', 'CMED3'],
|
||||||
|
['CMED3', 'CSTAT1'],
|
||||||
|
['CSTAT1', 'CSTAT2'],
|
||||||
|
['CSTAT1', 'CSTAT3'],
|
||||||
|
['CSTAT2', 'CMED4'],
|
||||||
|
['CMED4', 'CSDMG10'],
|
||||||
|
['CSDMG10', 'CMED5'],
|
||||||
|
['CMED5', 'CSDMG11'],
|
||||||
|
['CSDMG11', 'CMED6'],
|
||||||
|
['CMED4', 'CPHYS2'],
|
||||||
|
['CPHYS2', 'CMED5'],
|
||||||
|
['CMED5', 'CPHYS3'],
|
||||||
|
['CPHYS3', 'CMED6'],
|
||||||
|
['CSTAT3', 'CMED10'],
|
||||||
|
['CMED10', 'CPHYS1'],
|
||||||
|
['CPHYS1', 'CMED11'],
|
||||||
|
['CMED10', 'CHEAL14'],
|
||||||
|
['CHEAL14', 'CMED11'],
|
||||||
|
['CMED11', 'CHEAL15'],
|
||||||
|
['CHEAL15', 'CMED13'],
|
||||||
|
['CMED13', 'CSDMG6'],
|
||||||
|
['CPHYS4', 'CMED11'],
|
||||||
|
['CPHYS4', 'CMED13'],
|
||||||
|
['CPHYS4', 'CPHYS5'],
|
||||||
|
['CPHYS5', 'CPHYS6'],
|
||||||
|
['CPHYS6', 'CMED12'],
|
||||||
|
['CPHYS6', 'CSTAT34'],
|
||||||
|
['CMED12', 'CPHYS7'],
|
||||||
|
['CPHYS7', 'CSTAT33'],
|
||||||
|
['CMED13', 'CSDMG7'],
|
||||||
|
['CSDMG7', 'CSDMG9'],
|
||||||
|
['CSDMG7', 'CMED15'],
|
||||||
|
['CSDMG9', 'CSTAT37'],
|
||||||
|
['CSDMG9', 'CSTAT35'],
|
||||||
|
['CMED18', 'CHEAL4'],
|
||||||
|
['CHEAL4', 'CHEAL5'],
|
||||||
|
['CHEAL5', 'CHEAL6'],
|
||||||
|
['CHEAL6', 'CHEAL7'],
|
||||||
|
['CHEAL7', 'CHEAL8'],
|
||||||
|
['CHEAL7', 'CHEAL9'],
|
||||||
|
['CHEAL8', 'CMED20'],
|
||||||
|
['CHEAL9', 'CMED16'],
|
||||||
|
['CHEAL5', 'CMED19'],
|
||||||
|
['CMED16', 'CHEAL11'],
|
||||||
|
['CHEAL11', 'CHEAL12'],
|
||||||
|
['CHEAL12', 'CHEAL13'],
|
||||||
|
['CHEAL13', 'CMED17'],
|
||||||
|
['CHEAL13', 'CSTAT19'],
|
||||||
|
['CMED15', 'CHEAL10'],
|
||||||
|
['CHEAL10', 'CMED16'],
|
||||||
|
['CMED15', 'CSDMG8'],
|
||||||
|
['CSDMG8', 'CMED16'],
|
||||||
|
['CMED14', 'CMED15'],
|
||||||
|
['CMED8', 'CNOTE'],
|
||||||
|
];
|
||||||
|
|
||||||
|
module.exports = passiveEdges;
|
||||||
104
client/src/components/passive.data.node.js
Executable file
104
client/src/components/passive.data.node.js
Executable file
@ -0,0 +1,104 @@
|
|||||||
|
const passiveNodes = [
|
||||||
|
{ x: 860, y: 1011, id: 'CMED1', alloc: false, text: '5% Increased Speed for Chaos Slow skills, 5% Increased Slow Effect'},
|
||||||
|
{ x: 905, y: 970, id: 'CSTAT7', alloc: false, text: '+2 Chaos Stat'},
|
||||||
|
{ x: 940, y: 917.5, id: 'CSTAT8', alloc: false, text: '+2 Chaos Stat'},
|
||||||
|
{ x: 950, y: 1172.5, id: 'CMED2', alloc: false, text: '5% Increased Speed for Damaging Spells, 5% Increased Speed for Healing Skills'},
|
||||||
|
{ x: 955, y: 1120, id: 'CSDMG1', alloc: false, text: '+5% Increased Spell Damage'},
|
||||||
|
{ x: 965, y: 1082.5, id: 'CSDMG2', alloc: false, text: '+5% Increased Spell Damage'},
|
||||||
|
{ x: 970, y: 872.5, id: 'CSTAT9', alloc: false, text: '+2 Chaos Stat'},
|
||||||
|
{ x: 975, y: 1012.5, id: 'CSTAT6', alloc: false, text: '+2 Chaos Stat'},
|
||||||
|
{ x: 995, y: 1062.5, id: 'CSDMG3', alloc: false, text: '+5% Increased Spell Damage'},
|
||||||
|
{ x: 1000, y: 1150, id: 'CHEAL1', alloc: false, text: '+5% Increased Healing'},
|
||||||
|
{ x: 1005, y: 812.5, id: 'CMED20', alloc: false, text: '5% Increased Speed for Healing skills, 5% Increased Stamina'},
|
||||||
|
{ x: 1024.5, y: 1122.5, id: 'CHEAL2', alloc: false, text: '+5% Increased Healing'},
|
||||||
|
{ x: 1036.5, y: 896.5, id: 'CMED19', alloc: false, text: '5% Increased Speed for Healing skills, 5% Increased Stamina'},
|
||||||
|
{ x: 1036.5, y: 1042.5, id: 'CMED18', alloc: false, text: '5% Increased Speed for Damaging Spells, 5% Increased Speed for Healing Skills'},
|
||||||
|
{ x: 1036.5, y: 1082.5, id: 'CHEAL3', alloc: false, text: '+5% Increased Healing'},
|
||||||
|
{ x: 1041.5, y: 772.5, id: 'CSTAT10', alloc: false, text: '+2 Chaos Stat'},
|
||||||
|
{ x: 1055, y: 1327.5, id: 'CMED3', alloc: false, text: '5% Increased Speed for Damaging Spells, 5% Increased Speed for Banish Skills'},
|
||||||
|
{ x: 1066.5, y: 939.5, id: 'CHEAL5', alloc: false, text: '+5% Increased Healing'},
|
||||||
|
{ x: 1067.5, y: 995, id: 'CHEAL4', alloc: false, text: '+5% Increased Healing'},
|
||||||
|
{ x: 1070, y: 1250, id: 'CSTAT4', alloc: false, text: '+2 Chaos Stat'},
|
||||||
|
{ x: 1072.5, y: 840.5, id: 'CHEAL8', alloc: false, text: '+5% Increased Healing'},
|
||||||
|
{ x: 1087.5, y: 700, id: 'CSTAT11', alloc: false, text: '+2 Chaos Stat'},
|
||||||
|
{ x: 1097.5, y: 1052.5, id: 'CSDMG4', alloc: false, text: '+5% Increased Spell Damage'},
|
||||||
|
{ x: 1102.5, y: 1140, id: 'CSTAT5', alloc: false, text: '+2 Chaos Stat'},
|
||||||
|
{ x: 1102.5, y: 917.5, id: 'CHEAL6', alloc: false, text: '+5% Increased Healing'},
|
||||||
|
{ x: 1115, y: 1332.5, id: 'CSTAT1', alloc: false, text: '+2 Chaos Stat'},
|
||||||
|
{ x: 1115, y: 875, id: 'CHEAL7', alloc: false, text: '+5% Increased Healing'},
|
||||||
|
{ x: 1130, y: 640, id: 'CSTAT12', alloc: false, text: '+2 Chaos Stat'},
|
||||||
|
{ x: 1145, y: 1287.5, id: 'CSTAT3', alloc: false, text: '+2 Chaos Stat'},
|
||||||
|
{ x: 1145, y: 1057.5, id: 'CSDMG5', alloc: false, text: '+5% Increased Spell Damage'},
|
||||||
|
{ x: 1175, y: 1332.5, id: 'CSTAT2', alloc: false, text: '+2 Chaos Stat'},
|
||||||
|
{ x: 1180, y: 1247.5, id: 'CMED10', alloc: false, text: '5% Increased Speed for Banish Spells, 5% Increased Stamina'},
|
||||||
|
{ x: 1180, y: 950, id: 'CMED14', alloc: false, text: '5% Increased Speed for Chaos Slow skills, 5% Increased Speed for Banish Skills'},
|
||||||
|
{ x: 1195, y: 875, id: 'CHEAL9', alloc: false, text: '+5% Increased Healing'},
|
||||||
|
{ x: 1196.5, y: 635, id: 'CMED21', alloc: false, text: '5% Increased Effect of Slow, 5% Increased Stamina'},
|
||||||
|
{ x: 1205, y: 1062.5, id: 'CSDMG6', alloc: false, text: '+5% Increased Spell Damage'},
|
||||||
|
{ x: 1212.5, y: 1200, id: 'CHEAL14', alloc: false, text: '+5% Increased Healing'},
|
||||||
|
{ x: 1231.5, y: 590, id: 'CSTAT14', alloc: false, text: '+2 Chaos Stat'},
|
||||||
|
{ x: 1235, y: 772.5, id: 'CHEAL12', alloc: false, text: '+5% Increased Healing'},
|
||||||
|
{ x: 1240, y: 1225, id: 'CPHYS1', alloc: false, text: '+2% Reduced Physical Damage Taken'},
|
||||||
|
{ x: 1240, y: 1322.5, id: 'CMED4', alloc: false, text: '5% Increased Speed for Damaging Spells, 5% Increased Stamina'},
|
||||||
|
{ x: 1258.5, y: 1107.5, id: 'CHEAL15', alloc: false, text: '+5% Increased Healing'},
|
||||||
|
{ x: 1260, y: 917.5, id: 'CHEAL10', alloc: false, text: '+5% Increased Healing'},
|
||||||
|
{ x: 1263, y: 520, id: 'CLRG4', alloc: false, text: 'Damaging spells have a 20% chance to inflict slow'},
|
||||||
|
{ x: 1273.5, y: 1057.5, id: 'CMED13', alloc: false, text: '5% Increased Speed for Banish Spells, 5% Increased Speed for Damaging Spells'},
|
||||||
|
{ x: 1275, y: 1167.5, id: 'CMED11', alloc: false, text: '5% Increased Speed for Banish Spells, 5% Increased Stamina'},
|
||||||
|
{ x: 1275, y: 947.5, id: 'CMED15', alloc: false, text: '5% Increased Speed for Chaos Slow skills, 5% Increased Speed for Damaging Spells'},
|
||||||
|
{ x: 1277.5, y: 872.5, id: 'CMED16', alloc: false, text: '5% Increased Speed for Damaging Spells, 5% Increased Speed for Healing Skills'},
|
||||||
|
{ x: 1278.5, y: 812.5, id: 'CHEAL11', alloc: false, text: '+5% Increased Healing'},
|
||||||
|
{ x: 1280, y: 732.5, id: 'CHEAL13', alloc: false, text: '+5% Increased Healing'},
|
||||||
|
{ x: 1281.5, y: 1002.5, id: 'CSDMG7', alloc: false, text: '+5% Increased Spell Damage'},
|
||||||
|
{ x: 1284, y: 640, id: 'CSTAT15', alloc: false, text: '+2 Chaos Stat'},
|
||||||
|
{ x: 1298.5, y: 1107.5, id: 'CPHYS4', alloc: false, text: '+2% Reduced Physical Damage Taken'},
|
||||||
|
{ x: 1302.5, y: 917.5, id: 'CSDMG8', alloc: false, text: '+5% Increased Spell Damage'},
|
||||||
|
{ x: 1305, y: 1307.5, id: 'CPHYS2', alloc: false, text: '+2% Reduced Physical Damage Taken'},
|
||||||
|
{ x: 1306, y: 1347.5, id: 'CSDMG10', alloc: false, text: '+5% Increased Spell Damage'},
|
||||||
|
{ x: 1315, y: 762.5, id: 'CMED17', alloc: false, text: '5% Increased Speed for Healing skills, 5% Increased Stamina'},
|
||||||
|
{ x: 1326.5, y: 590, id: 'CSTAT16', alloc: false, text: '+2 Chaos Stat'},
|
||||||
|
{ x: 1346.5, y: 635, id: 'CMED22', alloc: false, text: '5% Increased Effect of Slow, 5% Increased Stamina'},
|
||||||
|
{ x: 1348.5, y: 535, id: 'CSTAT13', alloc: false, text: '+2 Chaos Stat'},
|
||||||
|
{ x: 1355, y: 1322.5, id: 'CMED5', alloc: false, text: '5% Increased Speed for Damaging Spells, 5% Increased Stamina'},
|
||||||
|
{ x: 1360, y: 1002.5, id: 'CSDMG9', alloc: false, text: '+5% Increased Spell Damage'},
|
||||||
|
{ x: 1399.5, y: 1107.5, id: 'CPHYS5', alloc: false, text: '+2% Reduced Physical Damage Taken'},
|
||||||
|
{ x: 1400, y: 807.5, id: 'CMED24', alloc: false, text: '5% Increased Speed for Damaging Spells, 5% Increased Speed for Healing Skills'},
|
||||||
|
{ x: 1409.5, y: 1312.5, id: 'CPHYS3', alloc: false, text: '+2% Reduced Physical Damage Taken'},
|
||||||
|
{ x: 1410, y: 1347.5, id: 'CSDMG11', alloc: false, text: '+5% Increased Spell Damage'},
|
||||||
|
{ x: 1410, y: 532.5, id: 'CMED23', alloc: false, text: '5% Increased Speed for Banish Spells, 5% Increased Effect of Slow'},
|
||||||
|
{ x: 1420, y: 732.5, id: 'CSTAT19', alloc: false, text: '+2 Chaos Stat'},
|
||||||
|
{ x: 1430, y: 1205, id: 'CPHYS7', alloc: false, text: '+2% Reduced Physical Damage Taken'},
|
||||||
|
{ x: 1447.5, y: 765, id: 'CMED25', alloc: false, text: '5% Increased Speed for Damaging Spells, 5% Increased Speed for Healing Skills'},
|
||||||
|
{ x: 1452.5, y: 1322.5, id: 'CMED6', alloc: false, text: '5% Increased Speed for Damaging Spells, 5% Increased Stamina'},
|
||||||
|
{ x: 1455, y: 1267.5, id: 'CSTAT33', alloc: false, text: '+2 Chaos Stat'},
|
||||||
|
{ x: 1455, y: 1147.5, id: 'CMED12', alloc: false, text: '5% Increased Speed for Banish Spells, 5% Increased Stamina'},
|
||||||
|
{ x: 1455, y: 1042.5, id: 'CSTAT35', alloc: false, text: '+2 Chaos Stat'},
|
||||||
|
{ x: 1457.5, y: 975, id: 'CSTAT37', alloc: false, text: '+2 Chaos Stat'},
|
||||||
|
{ x: 1462.5, y: 825, id: 'CLRG3', alloc: false, text: '20% critical strike chance for spells'},
|
||||||
|
{ x: 1485, y: 640, id: 'CSTAT17', alloc: false, text: '+2 Chaos Stat'},
|
||||||
|
{ x: 1500, y: 1110, id: 'CPHYS6', alloc: false, text: '+2% Reduced Physical Damage Taken'},
|
||||||
|
{ x: 1505, y: 1242.5, id: 'CSTAT32', alloc: false, text: '+2 Chaos Stat'},
|
||||||
|
{ x: 1555, y: 1242.5, id: 'CSTAT31', alloc: false, text: '+2 Chaos Stat'},
|
||||||
|
{ x: 1555, y: 1067.5, id: 'CSTAT34', alloc: false, text: '+2 Chaos Stat'},
|
||||||
|
{ x: 1555, y: 962.5, id: 'CSTAT36', alloc: false, text: '+2 Chaos Stat'},
|
||||||
|
{ x: 1555, y: 847.5, id: 'CSTAT20', alloc: false, text: '+2 Chaos Stat'},
|
||||||
|
{ x: 1555, y: 732.5, id: 'CSTAT18', alloc: false, text: '+2 Chaos Stat'},
|
||||||
|
{ x: 1597.5, y: 827.5, id: 'CSTAT21', alloc: false, text: '+2 Chaos Stat'},
|
||||||
|
{ x: 1607.5, y: 1277.5, id: 'CSTAT30', alloc: false, text: '+2 Chaos Stat'},
|
||||||
|
{ x: 1612.5, y: 1137.5, id: 'CLRG1', alloc: false, text: 'When you take physical damage there is a 20% chance to heal for 150% of physical damage taken'},
|
||||||
|
{ x: 1612.5, y: 955, id: 'CLRG2', alloc: false, text: 'Your healing spells have a 20% chance to increase ally speed by 100%'},
|
||||||
|
{ x: 1657.5, y: 822.5, id: 'CSTAT22', alloc: false, text: '+2 Chaos Stat'},
|
||||||
|
{ x: 1657.5, y: 1312.5, id: 'CSTAT29', alloc: false, text: '+2 Chaos Stat'},
|
||||||
|
{ x: 1685, y: 1187.5, id: 'CSTAT27', alloc: false, text: '+2 Chaos Stat'},
|
||||||
|
{ x: 1685, y: 1022.5, id: 'CSTAT25', alloc: false, text: '+2 Chaos Stat'},
|
||||||
|
{ x: 1690, y: 1117.5, id: 'CSTAT26', alloc: false, text: '+2 Chaos Stat'},
|
||||||
|
{ x: 1705, y: 960, id: 'CSTAT24', alloc: false, text: '+2 Chaos Stat'},
|
||||||
|
{ x: 1712.5, y: 850, id: 'CMED9', alloc: false, text: '5% Increased Speed for Healing skills, 5% Increased Stamina'},
|
||||||
|
{ x: 1717.5, y: 1267.5, id: 'CMED7', alloc: false, text: '5% Increased Speed for Damaging Spells, 5% Increased Stamina'},
|
||||||
|
{ x: 1725, y: 1222.5, id: 'CSTAT28', alloc: false, text: '+2 Chaos Stat'},
|
||||||
|
{ x: 1727.5, y: 1062.5, id: 'CMED8', alloc: false, text: '5% Increased Speed for Chaos Slow skills, 5% Increased Speed for Banish Skills'},
|
||||||
|
{ x: 1737.5, y: 917.5, id: 'CSTAT23', alloc: false, text: '+2 Chaos Stat'},
|
||||||
|
{ x: 1830, y: 1032.5, id: 'CNOTE', alloc: false, text: 'Increases duration of banish skills by 1 turn. Your chaos skills gain 20% increased speed for each successful banish. '},
|
||||||
|
];
|
||||||
|
|
||||||
|
module.exports = passiveNodes;
|
||||||
58
client/src/components/passive.node.js
Executable file
58
client/src/components/passive.node.js
Executable file
@ -0,0 +1,58 @@
|
|||||||
|
const Phaser = require('phaser');
|
||||||
|
|
||||||
|
class PassiveNode extends Phaser.GameObjects.Sprite {
|
||||||
|
constructor(scene, x, y, id, alloc, text) {
|
||||||
|
super(scene, x, y);
|
||||||
|
this.setTexture('eye');
|
||||||
|
this.scene = scene;
|
||||||
|
this.alloc = alloc;
|
||||||
|
this.text = text;
|
||||||
|
this.id = id;
|
||||||
|
this.setPosition(x, y);
|
||||||
|
|
||||||
|
const nodeNoDigits = this.id.replace(/[0-9]/g, '');
|
||||||
|
switch (nodeNoDigits) {
|
||||||
|
case 'CNOTE':
|
||||||
|
this.setScale(0.25);
|
||||||
|
break;
|
||||||
|
case 'CLRG':
|
||||||
|
this.setScale(0.15);
|
||||||
|
break;
|
||||||
|
case 'CMED':
|
||||||
|
this.setScale(0.1);
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
this.setScale(0.05);
|
||||||
|
}
|
||||||
|
if (this.alloc) {
|
||||||
|
this.setTint(0xff0000);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
allocate(alloc) {
|
||||||
|
if (alloc !== undefined) {
|
||||||
|
this.alloc = alloc;
|
||||||
|
} else {
|
||||||
|
this.alloc = !this.alloc;
|
||||||
|
}
|
||||||
|
this.updateNode();
|
||||||
|
}
|
||||||
|
|
||||||
|
updateNode() {
|
||||||
|
if (!this.alloc) {
|
||||||
|
this.clearTint();
|
||||||
|
} else {
|
||||||
|
this.setTint(0xff0000);
|
||||||
|
}
|
||||||
|
|
||||||
|
for (let i = 0; i < this.scene.passiveNodeData.length; i += 1) {
|
||||||
|
if (this.scene.passiveNodeData[i].id === this.id) {
|
||||||
|
this.scene.passiveNodeData[i].alloc = this.alloc;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
this.scene.drawPassiveEdges();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
module.exports = PassiveNode;
|
||||||
126
client/src/components/passive.phaser.js
Executable file
126
client/src/components/passive.phaser.js
Executable file
@ -0,0 +1,126 @@
|
|||||||
|
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;
|
||||||
74
client/src/components/phaser.combat.js
Executable file
74
client/src/components/phaser.combat.js
Executable file
@ -0,0 +1,74 @@
|
|||||||
|
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;
|
||||||
67
client/src/components/phaser.container.jsx
Executable file
67
client/src/components/phaser.container.jsx
Executable file
@ -0,0 +1,67 @@
|
|||||||
|
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);
|
||||||
141
client/src/components/phaser.skills.js
Executable file
141
client/src/components/phaser.skills.js
Executable file
@ -0,0 +1,141 @@
|
|||||||
|
// 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;
|
||||||
Loading…
x
Reference in New Issue
Block a user