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

All skills draggable, hitbox change color on hover with skill

Browse Source
This commit is contained in:
Mashy 2018-12-07 15:50:39 +10:00
parent d4e213297e
commit a24a64c811
2 changed files with 45 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
client/src/scenes/combat.hitbox.js
View File

@ -6,14 +6,22 @@ const CRYP_WIDTH = COMBAT.width() * 0.2;
const TEAM_MARGIN = COMBAT.width() * 0.775;
const Y_PADDING = COMBAT.height() * 0.1;
const teamHitBox = (scene, size, team, cback) => {
class TeamHitBox extends Phaser.GameObjects.Rectangle {
constructor(scene, size, team, cback) {
const height = CRYP_HEIGHT * (size) + (Y_PADDING * 0.5) * (size - 1);
scene.add
.rectangle(TEAM_MARGIN * team, Y_PADDING, CRYP_WIDTH, height, 0x222222)
.setInteractive()
.setOrigin(0)
.on('pointerup', cback);
};
super(scene, TEAM_MARGIN * team, Y_PADDING, CRYP_WIDTH, height, 0x222222);
this.setOrigin(0);
this.clickHandler = () => cback();
}
select() {
this.setFillStyle(0x003300);
}
deselect() {
this.setFillStyle(0x222222);
}
}
class CrypHitBox extends Phaser.GameObjects.Rectangle {
constructor(scene, iter, team, cback) {
@ -22,6 +30,14 @@ class CrypHitBox extends Phaser.GameObjects.Rectangle {
this.setOrigin(0);
this.clickHandler = () => cback();
}
select() {
this.setFillStyle(0x003300);
}
deselect() {
this.setFillStyle(0x222222);
}
}
class CombatHitBox extends Phaser.Scene {
@ -74,7 +90,7 @@ class CombatHitBox extends Phaser.Scene {
};
const team = t.id === account.id ? 0 : 1;
const size = t.cryps.length;
teamHitBox(this, size, team, cback);
this.add.existing(new TeamHitBox(this, size, team, cback));
});
this.scene.sendToBack();
}

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

@ -29,6 +29,17 @@ const targetTextPosition = (crypIter, teamIter) => {
return [ skillTextX, skillTextY ];
};
const skillCheckHitBox = (scenePlugin, pointer) => {
const { list } = scenePlugin.get('CombatHitBox').children;
for (let i = 0; i < list.length; i += 1) {
if (Phaser.Geom.Rectangle.ContainsPoint(list[i].getBounds(),
pointer.position)) return list[i];
}
// If we didn't find a hitbox deselect them all
for (let i = 0; i < list.length; i += 1) list[i].deselect();
return false;
};
class CrypName extends Phaser.GameObjects.Text {
constructor(scene, x, y, cryp) {
super(scene, x, y, cryp.name, TEXT.HEADER);
@ -82,20 +93,18 @@ 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('dragstart', (pointer, obj) => obj.clickHandler());
this.input.on('drag', (pointer, obj, dragX, dragY) => {
const hitBox = skillCheckHitBox(this.scene, pointer);
if (hitBox) hitBox.select();
obj.setPosition(dragX, dragY);
});
this.input.on('dragend', (pointer, obj) => {
const hitBoxScene = this.scene.get('CombatHitBox');
hitBoxScene.children.list.forEach((hitBox) => {
if (Phaser.Geom.Rectangle
.ContainsPoint(hitBox.getBounds(), pointer.position)) hitBox.clickHandler();
});
const hitBox = skillCheckHitBox(this.scene, pointer);
if (hitBox) {
hitBox.clickHandler();
hitBox.deselect();
}
obj.setPosition(obj.origX, obj.origY);
});
@ -131,6 +140,7 @@ class CombatSkills extends Phaser.Scene {
const addSkill = (i, j, skill, cryp) => {
const skillTextPos = skillTextPosition(i, j + 2);
const skillObj = new CrypSkill(this, skillTextPos[0], skillTextPos[1], skill, cryp);
this.input.setDraggable(skillObj);
this.add.existing(skillObj);
return skillObj;
};