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

refactoring stuff

Browse Source
This commit is contained in:
Mashy 2018-11-27 12:43:21 +10:00
parent 98d8c7e29b
commit 7c7bb030ad
5 changed files with 50 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
client/src/events.js
View File

@ -36,6 +36,23 @@ function registerEvents(registry, events) {
return setActiveSkill(skill);
});
events.on('SEND_ACTIVE_SKILL', function skillActive(cryp) {
const activeSkill = registry.get('activeSkill');
const game = registry.get('game');
if (activeSkill) {
if (activeSkill.cryp.account !== cryp.account) {
const ws = registry.get('ws');
if (game.phase === 'Skill') {
ws.sendGameSkill(game.id, activeSkill.cryp.id, cryp.account, activeSkill.skill.skill);
} else if (game.phase === 'Target') {
ws.sendGameTarget(game.id, cryp.id, activeSkill.skill.id);
}
}
activeSkill.clearTint();
registry.set('activeSkill', null);
}
});
events.on('CRYP_ACTIVE', function crypActiveCb(cryp) {
const cryps = registry.get('cryps');

60
client/src/scenes/combat.cryps.js
View File

@ -22,7 +22,6 @@ const healthBarDimensions = (team, iter) => {
const crypAvatarText = (team, iter) => {
const { TEAM_MARGIN, CRYP_MARGIN, TEXT_MARGIN } = calcMargin();
const nameTextX = 1.25 * TEAM_MARGIN * team;
const nameTextY = COMBAT.y() + CRYP_MARGIN * iter + COMBAT.height() * 0.07;
const healthTextX = 1.25 * TEAM_MARGIN * team;
@ -49,28 +48,12 @@ class CrypImage extends Phaser.GameObjects.Image {
// Avatar will be a property of cryp
const { crypAvatarX, crypAvatarY } = crypPosition(team, iter);
super(scene, crypAvatarX, crypAvatarY, avatar);
this.scene = scene;
this.cryp = cryp;
this.skills = skills;
this.scene = scene; this.cryp = cryp; this.skills = skills;
this.healthbar = healthbar;
}
clickHandler() {
const activeSkill = this.scene.registry.get('activeSkill');
const game = this.scene.registry.get('game');
if (activeSkill) {
if (activeSkill.cryp.account !== this.cryp.account) {
const ws = this.scene.registry.get('ws');
if (game.phase === 'Skill') {
ws.sendGameSkill(game.id, activeSkill.cryp.id, this.cryp.account, activeSkill.skill.skill);
} else if (game.phase === 'Target') {
ws.sendGameTarget(game.id, this.cryp.id, activeSkill.skill.id);
}
}
activeSkill.clearTint();
this.scene.registry.set('activeSkill', null);
this.scene.registry.set('activeCryp', null);
}
this.scene.game.events.emit('SEND_ACTIVE_SKILL', this.cryp);
}
takeDamage(damage) {
@ -86,41 +69,35 @@ class CrypSkill extends Phaser.GameObjects.Text {
constructor(scene, x, y, team, skill, cryp) {
// Avatar will be a property of cryp
super(scene, x, y, skill.skill, TEXT.NORMAL);
this.cryp = cryp;
this.skill = skill;
this.cryp = cryp; this.skill = skill; this.scene = scene;
this.setInteractive();
}
clickHandler() {
const activeSkill = this.scene.registry.get('activeSkill');
if (activeSkill) {
activeSkill.clearTint();
}
this.scene.registry.set('activeSkill', this);
this.setTint(COLOURS.BLUE);
this.scene.game.events.emit('SET_ACTIVE_SKILL', this);
}
}
class HealthBar extends Phaser.GameObjects.Graphics {
constructor(scene, cryp, team, iter, crypHpText) {
super(scene);
this.team = team;
this.iter = iter;
this.hp = cryp.hp.base;
this.stam = cryp.stamina.base;
this.hpText = crypHpText;
this.team = team; this.iter = iter; this.hp = cryp.hp.base;
this.stam = cryp.stamina.base; this.hpText = crypHpText;
this.drawHealthBar();
}
drawHealthBar() {
const { healthBarX, healthBarY, healthBarWidth, healthBarHeight } = healthBarDimensions(this.team, this.iter);
const {
healthBarX, healthBarY, healthBarWidth, healthBarHeight,
} = healthBarDimensions(this.team, this.iter);
this.hpText.text = `${this.hp.toString()} / ${this.stam.toString()} HP`;
// Draw Black Border
this.fillStyle(COLOURS.BLACK);
this.fillRect(healthBarX, healthBarY, healthBarWidth, healthBarHeight);
// White fill
this.fillStyle(COLOURS.WHITE);
this.fillRect(healthBarX + 2, healthBarY + 2, healthBarWidth - 4, healthBarHeight - 4);
// Fill the health bar
const healthPercentage = this.hp / this.stam;
if (healthPercentage < 0.3) {
this.fillStyle(COLOURS.RED);
@ -135,7 +112,6 @@ class HealthBar extends Phaser.GameObjects.Graphics {
takeDamage(damage) {
this.hp -= damage;
this.hpText.text = `${this.hp.toString()} / ${this.stam.toString()} HP`;
this.clear();
this.drawHealthBar();
}
@ -147,7 +123,7 @@ function renderCryp(scene, group, cryp, skills, game, team, iter) {
// Add cryp hp
const { nameTextX, nameTextY, healthTextX, healthTextY } = crypAvatarText(team, iter);
const crypName = scene.add.text(nameTextX, nameTextY, cryp.name, TEXT.NORMAL);
const crypHpText = scene.add.text(healthTextX, healthTextY, `${cryp.hp.base.toString()} / ${cryp.stamina.base.toString()} HP`, TEXT.NORMAL);
const crypHpText = scene.add.text(healthTextX, healthTextY, '', TEXT.NORMAL);
const healthBar = scene.add.existing(new HealthBar(scene, cryp, team, iter, crypHpText));
// Add cryp name
const crypSpawn = scene.add.existing(new CrypImage(scene, team, iter, skills, avatar, cryp, healthBar))
@ -189,19 +165,15 @@ function renderSkills(scene, group, cryp, account, game, team, iter) {
class DrawCrypTeams extends Phaser.GameObjects.Group {
constructor(scene, game) {
super(scene);
this.scene = scene;
this.keyboard = scene.input.keyboard;
let allyCount = 0; let enemyCount = 0;
const account = scene.registry.get('account');
scene.cryps.forEach((cryp) => {
const team = cryp.account === account.id ? 0 : 1;
const iter = cryp.account === account.id ? allyCount : enemyCount;
const renderTeam = (cryp, iter, team) => {
const skillsObj = renderSkills(scene, this, cryp, account, game, team, iter);
const crypObj = renderCryp(scene, this, cryp, skillsObj, game, team, iter);
allyCount = cryp.account === account.id ? allyCount += 1 : enemyCount += 1;
const addKeys = (game.phase === 'Skill' && !team) || (game.phase === 'Target' && team);
if (addKeys) scene.crypKeyHandler(crypObj, iter);
});
};
scene.allyTeam.cryps.forEach((cryp, i) => renderTeam(cryp, i, 0));
scene.enemyTeam.cryps.forEach((cryp, i) => renderTeam(cryp, i, 1));
}
}

12
client/src/scenes/combat.js
View File

@ -48,6 +48,7 @@ class Combat extends Phaser.Scene {
this.skills = new CombatSkills(this);
this.logIter = 0; this.resolvedIter = 0;
this.registry.set('resolve', false);
this.account = this.registry.get('account');
this.log = this.add.text(logX, logY, '', TEXT.NORMAL);
this.log.setWordWrapWidth(logWidth);
return true;
@ -76,8 +77,13 @@ class Combat extends Phaser.Scene {
return true;
} this.logIter += 1;
}
this.cryps = [];
game.teams.forEach(t => t.cryps.forEach(cryp => this.cryps.push(cryp)));
game.teams.forEach((t) => {
if (this.account.id === t.id) {
this.allyTeam = t;
} else {
this.enemyTeam = t;
}
});
// If not animating render static skill / block phase
if (this.crypTeamRender) {
this.crypTeamRender.destroy(true);
@ -99,8 +105,6 @@ class Combat extends Phaser.Scene {
this.input.keyboard.removeListener(CRYP_KEY_MAP[iter]);
if (cryp.skills.length > 0) { // check there are cryp skills
this.input.keyboard.on(CRYP_KEY_MAP[iter], () => {
this.registry.set('activeCryp', cryp);
console.log(cryp.cryp.name);
SKILL_KEY_MAP.forEach(k => this.input.keyboard.removeListener(k));
cryp.skills.forEach((skill, i) => {
this.input.keyboard.on(SKILL_KEY_MAP[i], () => {

19
client/src/scenes/combat.render.js
View File

@ -1,9 +1,6 @@
const { CrypImage } = require('./combat.cryps');
const { DELAYS, POSITIONS: { COMBAT } } = require('./constants');
const MOVE_CREEP = 1000;
const DAMAGE_TICK = 750;
const randomSkill = () => {
const skills = ['wall', 'spit', 'gravBlast', 'gravBomb', 'chargeBall'];
return skills[Math.floor(Math.random() * 5)];
@ -12,10 +9,10 @@ const randomSkill = () => {
function animatePhase(scene, group, game, account, delay) {
// Find cryps and targets
const resolved = game.resolved[scene.resolvedIter];
const allyCryp = scene.cryps.filter(c => c.account === account.id).find(
const allyCryp = scene.allyTeam.cryps.find(
c => c.id === resolved.source_cryp_id || c.id === resolved.target_cryp_id
);
const enemyCryp = scene.cryps.filter(c => c.account !== account.id).find(
const enemyCryp = scene.enemyTeam.cryps.find(
c => c.id === resolved.source_cryp_id || c.id === resolved.target_cryp_id
);
const allySpawn = group.children.entries
@ -34,7 +31,7 @@ function animatePhase(scene, group, game, account, delay) {
x: COMBAT.x() + COMBAT.width() * 0.3,
y: COMBAT.height() * 13.25 / 35,
ease: 'Power1',
duration: MOVE_CREEP,
duration: DELAYS.MOVE_CREEP,
});
scene.tweens.add({
@ -42,7 +39,7 @@ function animatePhase(scene, group, game, account, delay) {
x: COMBAT.x() + COMBAT.width() * 0.7,
y: COMBAT.height() * 13.25 / 35,
ease: 'Power1',
duration: MOVE_CREEP,
duration: DELAYS.MOVE_CREEP,
});
// Target cryp takes damage into posistion
scene.time.delayedCall(delay + DELAYS.MOVE_CREEP, () => {
@ -55,7 +52,7 @@ function animatePhase(scene, group, game, account, delay) {
x: allyCrypX,
y: allyCrypY,
ease: 'Power1',
duration: MOVE_CREEP,
duration: DELAYS.MOVE_CREEP,
});
scene.tweens.add({
@ -63,7 +60,7 @@ function animatePhase(scene, group, game, account, delay) {
x: enemyCrypX,
y: enemyCrypY,
ease: 'Power1',
duration: MOVE_CREEP,
duration: DELAYS.MOVE_CREEP,
});
});
}
@ -81,13 +78,13 @@ function combatRender(scene, game, group) {
animatePhase(scene, group, game, account, delay[0]);
if (scene.iterateLog(game)) {
scene.time.delayedCall(delay[1] + DELAYS.MOVE_CREEP * 2 + DELAYS.DAMAGE_TICK, () => {
scene.time.delayedCall(delay[1] + DELAYS.MOVE_CREEP * 2, () => {
scene.registry.set('resolve', false);
scene.skills.cleanup();
scene.renderLog(game);
});
} else {
scene.time.delayedCall(delay[1] + DELAYS.MOVE_CREEP * 2 + DELAYS.DAMAGE_TICK, () => {
scene.time.delayedCall(delay[1] + DELAYS.MOVE_CREEP * 2, () => {
scene.skills.cleanup();
combatRender(scene, game, group);
});

2
client/src/scenes/combat.skills.js
View File

@ -58,7 +58,7 @@ class CombatSkills extends Phaser.GameObjects.Group {
gravBomb(target) {
const { spawnLocation, img } = animationParams(!target);
const particles = this.scene.add.particles(img);
const location = target ? COMBAT.width() * 0.6 : COMBAT.width() * 0.1;
const location = target ? COMBAT.width() * 0.65 : COMBAT.width() * 0.35;
const well = particles.createGravityWell({
x: location,
y: COMBAT.height() * 0.25,