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

Highlight lines on cryps on select

Browse Source
This commit is contained in:
Mashy 2019-03-04 12:52:53 +10:00
parent 2eb8318ae1
commit a8ff3f0a23
3 changed files with 13 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
client/src/scenes/elements/outline.rotate.js
View File

@ -1,10 +1,11 @@
const Phaser = require('phaser'); const Phaser = require('phaser');
class LineBox extends Phaser.GameObjects.Graphics { class LineBox extends Phaser.GameObjects.Graphics {
constructor(scene, x0, x1, y0, y1, speed) { constructor(scene, x, y, width, height, colour, speed) {
super(scene); super(scene);
this.x0 = x0; this.x1 = x1; this.colour = colour;
this.y0 = y0; this.y1 = y1; this.x0 = x; this.x1 = x + width;
this.y0 = y; this.y1 = y + height;
const margin = Math.abs(Math.floor((this.x1 - this.x0) / 4)); const margin = Math.abs(Math.floor((this.x1 - this.x0) / 4));
this.lineCoord = [this.x0 + margin, this.x1 - margin, this.y0, this.y0, 0]; this.lineCoord = [this.x0 + margin, this.x1 - margin, this.y0, this.y0, 0];
this.speed = speed; this.speed = speed;
@ -13,7 +14,7 @@ class LineBox extends Phaser.GameObjects.Graphics {
update() { update() {
this.clear(); this.clear();
let vertX = this.x1 + 2; let vertX = this.x1;
let horizY = this.y0; let horizY = this.y0;
const genLine = () => { const genLine = () => {
switch (this.lineCoord[4]) { switch (this.lineCoord[4]) {
@ -57,9 +58,7 @@ class LineBox extends Phaser.GameObjects.Graphics {
return delta[j]; return delta[j];
}); });
} }
console.log(this.lineCoord); this.lineStyle(5, this.colour, 1);
this.lineStyle(5, 0xFF00FF, 1);
this.lineBetween(this.lineCoord[0], horizY, this.lineCoord[1], horizY); this.lineBetween(this.lineCoord[0], horizY, this.lineCoord[1], horizY);
this.lineBetween(vertX, this.lineCoord[2], vertX, this.lineCoord[3]); this.lineBetween(vertX, this.lineCoord[2], vertX, this.lineCoord[3]);
} }

9
client/src/scenes/home.cryps.js
View File

@ -3,6 +3,7 @@ const { remove } = require('lodash');
const { TEXT, COLOURS, POSITIONS: { CRYP_LIST } } = require('./constants'); const { TEXT, COLOURS, POSITIONS: { CRYP_LIST } } = require('./constants');
const genAvatar = require('./avatar'); const genAvatar = require('./avatar');
const { LineGroup, LineBox } = require('./elements/outline.rotate');
const ROW_HEIGHT = CRYP_LIST.height() * 0.2; const ROW_HEIGHT = CRYP_LIST.height() * 0.2;
const ROW_WIDTH = CRYP_LIST.width(); const ROW_WIDTH = CRYP_LIST.width();
@ -35,7 +36,7 @@ class HomeCrypList extends Phaser.Scene {
this.registry.events.on('changedata', this.updateData, this); this.registry.events.on('changedata', this.updateData, this);
this.registry.events.on('setdata', this.updateData, this); this.registry.events.on('setdata', this.updateData, this);
const cryps = this.registry.get('crypList'); const cryps = this.registry.get('crypList');
const lineGroup = this.add.existing(new LineGroup(this));
if (!cryps) return true; if (!cryps) return true;
const ws = this.registry.get('ws'); const ws = this.registry.get('ws');
@ -58,12 +59,16 @@ class HomeCrypList extends Phaser.Scene {
.setOrigin(0); .setOrigin(0);
crypInteract.setAlpha(0.2); crypInteract.setAlpha(0.2);
crypInteract.on('pointerdown', () => { crypInteract.on('pointerdown', () => {
lineGroup.clear(true, true);
if (this.activeCryps.includes(crypInteract)) { if (this.activeCryps.includes(crypInteract)) {
remove(this.activeCryps, n => n === crypInteract); remove(this.activeCryps, n => n === crypInteract);
crypInteract.setAlpha(0.2); crypInteract.setAlpha(0.2);
} else { } else {
this.activeCryps.push(crypInteract); this.activeCryps.push(crypInteract);
crypInteract.setAlpha(1); crypInteract.setAlpha(0.75);
lineGroup.add(this.add.existing(
new LineBox(this, crypInteract.x, crypInteract.y, crypInteract.width, crypInteract.height, crypInteract.fillColor, 3)
));
} }
}); });

3
client/src/scenes/home.js
View File

@ -1,6 +1,5 @@
const Phaser = require('phaser'); const Phaser = require('phaser');
const { LineGroup, LineBox } = require('./elements/outline.rotate');
const HomeCryps = require('./home.cryps'); const HomeCryps = require('./home.cryps');
const HomeNavigation = require('./home.navigation'); const HomeNavigation = require('./home.navigation');
@ -35,8 +34,6 @@ class Home extends Phaser.Scene {
this.scene.manager.add('HomeCryps', HomeCryps, true); this.scene.manager.add('HomeCryps', HomeCryps, true);
this.scene.manager.add('HomeNavigation', HomeNavigation, true); this.scene.manager.add('HomeNavigation', HomeNavigation, true);
const lineGroup = this.add.existing(new LineGroup(this));
lineGroup.add(this.add.existing(new LineBox(this, 50, 250, 200, 400, 4)));
return true; return true;
} }