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

skill rework

Browse Source
This commit is contained in:
Mashy 2018-12-13 13:31:28 +10:00
parent ea2064e7c1
commit c832f92adf
2 changed files with 64 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -142,6 +142,14 @@ class CrypImage extends Phaser.GameObjects.Image {
this.statusText = scene.add.text(statusX, statusY, '', TEXT.NORMAL); this.statusText = scene.add.text(statusX, statusY, '', TEXT.NORMAL);
} }
select() {
this.setTint('0x00bb00');
}
deselect() {
this.clearTint();
}
clearStatus() { clearStatus() {
this.statusText.text = ''; this.statusText.text = '';
} }
@ -231,6 +239,11 @@ class CombatCryps extends Phaser.Scene {
return true; 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() { cleanUp() {
this.registry.events.off('changedata', this.updateData); this.registry.events.off('changedata', this.updateData);
this.scene.remove(); this.scene.remove();

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

@ -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 SKILL_KEY_MAP = ['keydown_Q', 'keydown_W', 'keydown_E', 'keydown_R'];
const TARGET_KEY_MAP = ['keydown_SEVEN', 'keydown_EIGHT', 'keydown_NINE', 'keydown_ZERO']; const TARGET_KEY_MAP = ['keydown_SEVEN', 'keydown_EIGHT', 'keydown_NINE', 'keydown_ZERO'];
const calcMargin = () => {
const CRYP_MARGIN = COMBAT.height() / 5; const CRYP_MARGIN = COMBAT.height() / 5;
const TEXT_MARGIN = COMBAT.height() / 35; const TEXT_MARGIN = COMBAT.height() / 35;
const TEAM_MARGIN = COMBAT.width() * 0.7; const TEAM_MARGIN = COMBAT.width() * 0.7;
const X_PADDING = COMBAT.width() / 10; const SKILL_WIDTH = COMBAT.width() / 10;
const Y_PADDING = COMBAT.height() / 7; const SKILL_HEIGHT = COMBAT.height() / 20;
return { CRYP_MARGIN, TEXT_MARGIN, TEAM_MARGIN, X_PADDING, Y_PADDING };
};
const skillTextPosition = (crypIter, skillIter) => { const skillPosition = (crypIter, skillIter) => {
const { TEXT_MARGIN } = calcMargin(); const skillTextX = COMBAT.width() / 3.8 + (SKILL_WIDTH + COMBAT.width() * 0.01) * skillIter;
const skillTextX = 0.15 * COMBAT.width() * crypIter; const skillTextY = TEXT_MARGIN * 5 + CRYP_MARGIN * crypIter;
const skillTextY = COMBAT.y() + COMBAT.height() * 0.7 + TEXT_MARGIN * skillIter;
return [skillTextX, skillTextY]; return [skillTextX, skillTextY];
}; };
const targetTextPosition = (crypIter, teamIter) => { const targetTextPosition = (crypIter, teamIter) => {
const { CRYP_MARGIN, TEAM_MARGIN, Y_PADDING } = calcMargin();
const skillTextX = COMBAT.width() / 5 + 0.7 * TEAM_MARGIN * teamIter; const skillTextX = COMBAT.width() / 5 + 0.7 * TEAM_MARGIN * teamIter;
const skillTextY = Y_PADDING * 1.25 + CRYP_MARGIN * crypIter; const skillTextY = TEXT_MARGIN * 4 + CRYP_MARGIN * crypIter;
return [ skillTextX, skillTextY ]; return [ skillTextX, skillTextY ];
}; };
@ -40,38 +35,25 @@ const skillCheckHitBox = (scenePlugin, pointer) => {
return false; return false;
}; };
class CrypName extends Phaser.GameObjects.Text { class CrypSkill extends Phaser.GameObjects.Container {
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 {
constructor(scene, x, y, skill, cryp) { constructor(scene, x, y, skill, cryp) {
// Avatar will be a property of cryp // Avatar will be a property of cryp
super(scene, x, y);
const CD_TEXT = skill.cd ? `(${skill.cd}T)` : ''; const CD_TEXT = skill.cd ? `(${skill.cd}T)` : '';
const SKILL_TEXT = `${skill.skill} ${CD_TEXT}`; 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.cryp = cryp;
this.skill = skill; this.skill = skill;
this.scene = scene; this.scene = scene;
this.activeSkill = null;
this.activeTarget = null; this.setSize(SKILL_WIDTH, SKILL_HEIGHT);
this.setInteractive(); this.setInteractive();
} }
@ -82,15 +64,24 @@ class CrypSkill extends Phaser.GameObjects.Text {
} }
select() { select() {
this.setTint(0x00ff00); this.scene.children.list.forEach((skill) => {
if (skill.state === 'select') skill.deselect();
});
this.skillBox.setFillStyle(0x9d9ea0);
this.state = 'select';
} }
activate() { activate() {
this.setTint(0xff0000); this.scene.children.list.forEach((skill) => {
if (skill.state === 'select') skill.deselect();
});
this.skillBox.setFillStyle(0xff0000);
this.state = 'activate';
} }
deselect() { 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.registry.events.on('changedata', this.updateData, this);
this.account = this.registry.get('account'); this.account = this.registry.get('account');
this.input.on('dragstart', (pointer, obj) => obj.clickHandler()); this.input.on('dragstart', (pointer, box) => {
this.input.on('drag', (pointer, obj, dragX, dragY) => { box.clickHandler();
});
this.input.on('drag', (pointer, box, dragX, dragY) => {
const hitBox = skillCheckHitBox(this.scene, pointer); const hitBox = skillCheckHitBox(this.scene, pointer);
if (hitBox) hitBox.select(); 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); const hitBox = skillCheckHitBox(this.scene, pointer);
if (hitBox) { if (hitBox) {
hitBox.clickHandler(); hitBox.clickHandler();
hitBox.deselect();
} }
obj.setPosition(obj.origX, obj.origY); box.setPosition(box.origX, box.origY);
}); });
if (phase === 'animating') return true; if (phase === 'animating') return true;
@ -131,7 +124,10 @@ class CombatSkills extends Phaser.Scene {
updateData(parent, key, data) { updateData(parent, key, data) {
if (key === 'gamePhase' && data) { if (key === 'gamePhase' && data) {
const shouldUpdate = data !== this.phase; 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 false;
} }
return true; return true;
@ -150,7 +146,7 @@ class CombatSkills extends Phaser.Scene {
const { events } = this.game; const { events } = this.game;
const addSkill = (i, j, skill, cryp) => { 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); const skillObj = new CrypSkill(this, skillTextPos[0], skillTextPos[1], skill, cryp);
this.input.setDraggable(skillObj); this.input.setDraggable(skillObj);
this.add.existing(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 team = game.teams.find(t => t.id === account.id);
const enemyTeam = game.teams.find(t => t.id !== account.id); const enemyTeam = game.teams.find(t => t.id !== account.id);
team.cryps.forEach((cryp, i) => { team.cryps.forEach((cryp) => {
const namePos = skillTextPosition(i, 0); const { iter } = this.scene.get('CombatCryps').cryps.children.entries.find(c => c.cryp.id === cryp.id);
// Draw the cryp name
const crypName = new CrypName(this, namePos[0], namePos[1], cryp);
this.add.existing(crypName);
// return early if KOd // return early if KOd
if (cryp.hp.base === 0) return true; if (cryp.hp.base === 0) return true;
// draw the skills // 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 // reset everything
keyboard.on('keydown_ESC', bindCrypKeys, this); keyboard.on('keydown_ESC', bindCrypKeys, this);
@ -186,31 +177,15 @@ class CombatSkills extends Phaser.Scene {
return true; return true;
} }
mapSkillKeys(skillButtons, crypName, gameId, crypId, alliesId, enemyId, i) { mapSkillKeys(skillButtons, gameId, crypId, alliesId, enemyId, i) {
const { keyboard } = this.input; 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.removeListener(CRYP_KEY_MAP[i]);
keyboard.on(CRYP_KEY_MAP[i], () => { keyboard.on(CRYP_KEY_MAP[i], () => {
SKILL_KEY_MAP.forEach(k => keyboard.removeListener(k)); SKILL_KEY_MAP.forEach(k => keyboard.removeListener(k));
// deselect any currently active button this.scene.get('CombatCryps').selectCryp(crypId);
if (this.activeSkill) {
this.activeSkill.deselect();
this.activeName.deselect();
}
crypName.select();
this.activeName = crypName;
skillButtons.forEach((button, j) => { skillButtons.forEach((button, j) => {
keyboard.on(SKILL_KEY_MAP[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); const cryp = crypTeam.cryps.find(c => c.id === skill.source_cryp_id);
// Draw the cryp name // 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 const sourceCryp = this.scene.get('CombatCryps').cryps.children.entries
.find(c => c.cryp.id === cryp.id); .find(c => c.cryp.id === cryp.id);