diff --git a/client/src/scenes/combat.cryps.js b/client/src/scenes/combat.cryps.js index 7e6241b0..2f12f16e 100644 --- a/client/src/scenes/combat.cryps.js +++ b/client/src/scenes/combat.cryps.js @@ -142,6 +142,14 @@ class CrypImage extends Phaser.GameObjects.Image { this.statusText = scene.add.text(statusX, statusY, '', TEXT.NORMAL); } + select() { + this.setTint('0x00bb00'); + } + + deselect() { + this.clearTint(); + } + clearStatus() { this.statusText.text = ''; } @@ -231,6 +239,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(); diff --git a/client/src/scenes/combat.skills.js b/client/src/scenes/combat.skills.js index 6082eecb..5a6a64d9 100644 --- a/client/src/scenes/combat.skills.js +++ b/client/src/scenes/combat.skills.js @@ -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 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);