Merge branch 'newskills'
This commit is contained in:
ntr
commit
b43fc44303
@ -38,10 +38,13 @@ const crypPosition = (team, iter) => {
|
||||
|
||||
|
||||
class HealthBar extends Phaser.GameObjects.Graphics {
|
||||
constructor(scene, cryp, team, iter, crypHpText) {
|
||||
constructor(scene, cryp, crypHpText) {
|
||||
super(scene);
|
||||
this.team = team; this.iter = iter; this.hp = cryp.hp.base;
|
||||
this.stam = cryp.stamina.base; this.hpText = crypHpText;
|
||||
this.crypObj = cryp;
|
||||
this.hpText = crypHpText;
|
||||
|
||||
this.hp = this.crypObj.cryp.hp.base;
|
||||
this.stam = this.crypObj.cryp.stamina.base;
|
||||
this.drawHealthBar();
|
||||
}
|
||||
|
||||
@ -49,7 +52,7 @@ class HealthBar extends Phaser.GameObjects.Graphics {
|
||||
this.clear();
|
||||
const {
|
||||
healthBarX, healthBarY, healthBarWidth, healthBarHeight,
|
||||
} = healthBarDimensions(this.team, this.iter);
|
||||
} = healthBarDimensions(this.crypObj.team, this.crypObj.iter);
|
||||
this.hpText.text = `${this.hp.toString()} / ${this.stam.toString()} HP`;
|
||||
// Draw Black Border
|
||||
this.fillStyle(COLOURS.BLACK);
|
||||
@ -76,6 +79,7 @@ class HealthBar extends Phaser.GameObjects.Graphics {
|
||||
} else {
|
||||
this.hp = (this.hp - value > this.stam) ? this.stam : this.hp -= value;
|
||||
}
|
||||
if (this.hp === 0) this.crypObj.setKo();
|
||||
this.drawHealthBar();
|
||||
}
|
||||
}
|
||||
@ -132,16 +136,34 @@ class CrypImage extends Phaser.GameObjects.Image {
|
||||
this.iter = iter;
|
||||
this.team = team;
|
||||
this.cryp = cryp;
|
||||
this.state = 'deselect';
|
||||
|
||||
// Add cryp name
|
||||
scene.add.text(nameX, nameY, cryp.name, TEXT.NORMAL);
|
||||
// Add cryp hp
|
||||
const healthText = scene.add.text(healthX, healthY, '', TEXT.NORMAL);
|
||||
this.healthBar = scene.add.existing(new HealthBar(scene, cryp, team, iter, healthText));
|
||||
this.healthBar = scene.add.existing(new HealthBar(scene, this, healthText));
|
||||
this.effects = scene.add.existing(new Effects(scene, team, iter));
|
||||
this.statusText = scene.add.text(statusX, statusY, '', TEXT.NORMAL);
|
||||
}
|
||||
|
||||
select() {
|
||||
this.setTint('0x00bb00');
|
||||
this.state = 'select';
|
||||
}
|
||||
|
||||
setKo() {
|
||||
this.state = 'ko';
|
||||
this.setTint('0x9d9ea0');
|
||||
}
|
||||
|
||||
deselect() {
|
||||
if (this.state !== 'ko') {
|
||||
this.clearTint();
|
||||
this.state = 'deselect';
|
||||
}
|
||||
}
|
||||
|
||||
clearStatus() {
|
||||
this.statusText.text = '';
|
||||
}
|
||||
@ -151,7 +173,7 @@ class CrypImage extends Phaser.GameObjects.Image {
|
||||
else this.setTint(0x00bb00);
|
||||
this.healthBar.takeDamage(damage);
|
||||
this.scene.time.delayedCall(DELAYS.DAMAGE_TICK, () => {
|
||||
this.clearTint();
|
||||
if (this.state !== 'ko') this.clearTint();
|
||||
});
|
||||
}
|
||||
}
|
||||
@ -231,6 +253,11 @@ class CombatCryps extends Phaser.Scene {
|
||||
return true;
|
||||
}
|
||||
|
||||
selectCryp(crypId) {
|
||||
this.cryps.children.entries.forEach(c => c.deselect());
|
||||
if (crypId) this.cryps.children.entries.find(c => c.cryp.id === crypId).select();
|
||||
}
|
||||
|
||||
cleanUp() {
|
||||
this.registry.events.off('changedata', this.updateData);
|
||||
this.scene.remove();
|
||||
|
||||
@ -6,26 +6,21 @@ const CRYP_KEY_MAP = ['keydown_ONE', 'keydown_TWO', 'keydown_THREE'];
|
||||
const SKILL_KEY_MAP = ['keydown_Q', 'keydown_W', 'keydown_E', 'keydown_R'];
|
||||
const TARGET_KEY_MAP = ['keydown_SEVEN', 'keydown_EIGHT', 'keydown_NINE', 'keydown_ZERO'];
|
||||
|
||||
const calcMargin = () => {
|
||||
const CRYP_MARGIN = COMBAT.height() / 5;
|
||||
const TEXT_MARGIN = COMBAT.height() / 35;
|
||||
const TEAM_MARGIN = COMBAT.width() * 0.7;
|
||||
const X_PADDING = COMBAT.width() / 10;
|
||||
const Y_PADDING = COMBAT.height() / 7;
|
||||
return { CRYP_MARGIN, TEXT_MARGIN, TEAM_MARGIN, X_PADDING, Y_PADDING };
|
||||
};
|
||||
const CRYP_MARGIN = COMBAT.height() / 5;
|
||||
const TEXT_MARGIN = COMBAT.height() / 35;
|
||||
const TEAM_MARGIN = COMBAT.width() * 0.7;
|
||||
const SKILL_WIDTH = COMBAT.width() / 10;
|
||||
const SKILL_HEIGHT = COMBAT.height() / 20;
|
||||
|
||||
const skillTextPosition = (crypIter, skillIter) => {
|
||||
const { TEXT_MARGIN } = calcMargin();
|
||||
const skillTextX = 0.15 * COMBAT.width() * crypIter;
|
||||
const skillTextY = COMBAT.y() + COMBAT.height() * 0.7 + TEXT_MARGIN * skillIter;
|
||||
const skillPosition = (crypIter, skillIter) => {
|
||||
const skillTextX = COMBAT.width() / 3.8 + (SKILL_WIDTH + COMBAT.width() * 0.01) * skillIter;
|
||||
const skillTextY = TEXT_MARGIN * 5 + CRYP_MARGIN * crypIter;
|
||||
return [skillTextX, skillTextY];
|
||||
};
|
||||
|
||||
const targetTextPosition = (crypIter, teamIter) => {
|
||||
const { CRYP_MARGIN, TEAM_MARGIN, Y_PADDING } = calcMargin();
|
||||
const skillTextX = COMBAT.width() / 5 + 0.7 * TEAM_MARGIN * teamIter;
|
||||
const skillTextY = Y_PADDING * 1.25 + CRYP_MARGIN * crypIter;
|
||||
const skillTextX = COMBAT.width() / 3.8 + 0.63 * TEAM_MARGIN * teamIter;
|
||||
const skillTextY = TEXT_MARGIN * 4 + CRYP_MARGIN * crypIter;
|
||||
return [ skillTextX, skillTextY ];
|
||||
};
|
||||
|
||||
@ -40,38 +35,25 @@ const skillCheckHitBox = (scenePlugin, pointer) => {
|
||||
return false;
|
||||
};
|
||||
|
||||
class CrypName extends Phaser.GameObjects.Text {
|
||||
constructor(scene, x, y, cryp) {
|
||||
super(scene, x, y, cryp.name, TEXT.HEADER);
|
||||
}
|
||||
|
||||
select() {
|
||||
this.setTint(0x00ff00);
|
||||
}
|
||||
|
||||
activate() {
|
||||
this.setTint(0xff0000);
|
||||
}
|
||||
|
||||
deselect() {
|
||||
this.clearTint();
|
||||
}
|
||||
}
|
||||
|
||||
class CrypSkill extends Phaser.GameObjects.Text {
|
||||
class CrypSkill extends Phaser.GameObjects.Container {
|
||||
constructor(scene, x, y, skill, cryp) {
|
||||
// Avatar will be a property of cryp
|
||||
super(scene, x, y);
|
||||
const CD_TEXT = skill.cd ? `(${skill.cd}T)` : '';
|
||||
const SKILL_TEXT = `${skill.skill} ${CD_TEXT}`;
|
||||
super(scene, x, y, SKILL_TEXT, TEXT.NORMAL);
|
||||
this.origX = x;
|
||||
this.origY = y;
|
||||
this.origX = x; this.origY = y;
|
||||
|
||||
this.skillBox = scene.add.rectangle(0, 0, SKILL_WIDTH, SKILL_HEIGHT, 0x222222);
|
||||
this.skillText = scene.add.text(0, 0, SKILL_TEXT, TEXT.NORMAL).setOrigin(0.5, 0.5);
|
||||
this.add(this.skillBox);
|
||||
this.add(this.skillText);
|
||||
|
||||
this.state = 'deselect';
|
||||
this.cryp = cryp;
|
||||
this.skill = skill;
|
||||
this.scene = scene;
|
||||
this.activeSkill = null;
|
||||
this.activeTarget = null;
|
||||
|
||||
this.setSize(SKILL_WIDTH, SKILL_HEIGHT);
|
||||
this.setInteractive();
|
||||
}
|
||||
|
||||
@ -82,15 +64,24 @@ class CrypSkill extends Phaser.GameObjects.Text {
|
||||
}
|
||||
|
||||
select() {
|
||||
this.setTint(0x00ff00);
|
||||
this.scene.children.list.forEach((skill) => {
|
||||
if (skill.state === 'select') skill.deselect();
|
||||
});
|
||||
this.skillBox.setFillStyle(0x9d9ea0);
|
||||
this.state = 'select';
|
||||
}
|
||||
|
||||
activate() {
|
||||
this.setTint(0xff0000);
|
||||
this.scene.children.list.forEach((skill) => {
|
||||
if (skill.state === 'select') skill.deselect();
|
||||
});
|
||||
this.skillBox.setFillStyle(0xff0000);
|
||||
this.state = 'activate';
|
||||
}
|
||||
|
||||
deselect() {
|
||||
this.clearTint();
|
||||
this.skillBox.setFillStyle(0x222222);
|
||||
this.state = 'deselect';
|
||||
}
|
||||
}
|
||||
|
||||
@ -105,19 +96,21 @@ class CombatSkills extends Phaser.Scene {
|
||||
this.registry.events.on('changedata', this.updateData, this);
|
||||
this.account = this.registry.get('account');
|
||||
|
||||
this.input.on('dragstart', (pointer, obj) => obj.clickHandler());
|
||||
this.input.on('drag', (pointer, obj, dragX, dragY) => {
|
||||
this.input.on('dragstart', (pointer, box) => {
|
||||
box.clickHandler();
|
||||
});
|
||||
this.input.on('drag', (pointer, box, dragX, dragY) => {
|
||||
const hitBox = skillCheckHitBox(this.scene, pointer);
|
||||
if (hitBox) hitBox.select();
|
||||
obj.setPosition(dragX, dragY);
|
||||
box.setPosition(dragX, dragY);
|
||||
});
|
||||
this.input.on('dragend', (pointer, obj) => {
|
||||
this.input.on('dragend', (pointer, box) => {
|
||||
box.deselect();
|
||||
const hitBox = skillCheckHitBox(this.scene, pointer);
|
||||
if (hitBox) {
|
||||
hitBox.clickHandler();
|
||||
hitBox.deselect();
|
||||
}
|
||||
obj.setPosition(obj.origX, obj.origY);
|
||||
box.setPosition(box.origX, box.origY);
|
||||
});
|
||||
|
||||
if (phase === 'animating') return true;
|
||||
@ -131,7 +124,10 @@ class CombatSkills extends Phaser.Scene {
|
||||
updateData(parent, key, data) {
|
||||
if (key === 'gamePhase' && data) {
|
||||
const shouldUpdate = data !== this.phase;
|
||||
if (shouldUpdate) return this.scene.restart(data);
|
||||
if (shouldUpdate) {
|
||||
this.scene.get('CombatCryps').selectCryp(null);
|
||||
return this.scene.restart(data);
|
||||
}
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
@ -150,7 +146,7 @@ class CombatSkills extends Phaser.Scene {
|
||||
const { events } = this.game;
|
||||
|
||||
const addSkill = (i, j, skill, cryp) => {
|
||||
const skillTextPos = skillTextPosition(i, j + 2);
|
||||
const skillTextPos = skillPosition(i, j);
|
||||
const skillObj = new CrypSkill(this, skillTextPos[0], skillTextPos[1], skill, cryp);
|
||||
this.input.setDraggable(skillObj);
|
||||
this.add.existing(skillObj);
|
||||
@ -160,20 +156,15 @@ class CombatSkills extends Phaser.Scene {
|
||||
const team = game.teams.find(t => t.id === account.id);
|
||||
const enemyTeam = game.teams.find(t => t.id !== account.id);
|
||||
|
||||
team.cryps.forEach((cryp, i) => {
|
||||
const namePos = skillTextPosition(i, 0);
|
||||
|
||||
// Draw the cryp name
|
||||
const crypName = new CrypName(this, namePos[0], namePos[1], cryp);
|
||||
this.add.existing(crypName);
|
||||
|
||||
team.cryps.forEach((cryp) => {
|
||||
const { iter } = this.scene.get('CombatCryps').cryps.children.entries.find(c => c.cryp.id === cryp.id);
|
||||
// return early if KOd
|
||||
if (cryp.hp.base === 0) return true;
|
||||
|
||||
// draw the skills
|
||||
const skillButtons = cryp.skills.map((skill, j) => addSkill(i, j, skill, cryp));
|
||||
const skillButtons = cryp.skills.map((skill, j) => addSkill(iter, j, skill, cryp));
|
||||
|
||||
const bindCrypKeys = () => this.mapSkillKeys(skillButtons, crypName, game.id, cryp.id, team.id, enemyTeam.id, i);
|
||||
const bindCrypKeys = () => this.mapSkillKeys(skillButtons, game.id, cryp.id, team.id, enemyTeam.id, iter);
|
||||
|
||||
// reset everything
|
||||
keyboard.on('keydown_ESC', bindCrypKeys, this);
|
||||
@ -186,31 +177,15 @@ class CombatSkills extends Phaser.Scene {
|
||||
return true;
|
||||
}
|
||||
|
||||
mapSkillKeys(skillButtons, crypName, gameId, crypId, alliesId, enemyId, i) {
|
||||
mapSkillKeys(skillButtons, gameId, crypId, alliesId, enemyId, i) {
|
||||
const { keyboard } = this.input;
|
||||
|
||||
// deselect any currently active button
|
||||
if (this.activeSkill) {
|
||||
this.activeSkill.deselect();
|
||||
}
|
||||
|
||||
if (this.activeName) {
|
||||
this.activeName.deselect();
|
||||
}
|
||||
|
||||
keyboard.removeListener(CRYP_KEY_MAP[i]);
|
||||
|
||||
keyboard.on(CRYP_KEY_MAP[i], () => {
|
||||
SKILL_KEY_MAP.forEach(k => keyboard.removeListener(k));
|
||||
|
||||
// deselect any currently active button
|
||||
if (this.activeSkill) {
|
||||
this.activeSkill.deselect();
|
||||
this.activeName.deselect();
|
||||
}
|
||||
|
||||
crypName.select();
|
||||
this.activeName = crypName;
|
||||
this.scene.get('CombatCryps').selectCryp(crypId);
|
||||
|
||||
skillButtons.forEach((button, j) => {
|
||||
keyboard.on(SKILL_KEY_MAP[j], () => {
|
||||
@ -251,8 +226,6 @@ class CombatSkills extends Phaser.Scene {
|
||||
const cryp = crypTeam.cryps.find(c => c.id === skill.source_cryp_id);
|
||||
|
||||
// Draw the cryp name
|
||||
// const namePos = skillTextPosition(i, 0);
|
||||
// this.add.existing(new CrypName(this, namePos[0], namePos[1], cryp));
|
||||
const sourceCryp = this.scene.get('CombatCryps').cryps.children.entries
|
||||
.find(c => c.cryp.id === cryp.id);
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user