diff --git a/client/src/scenes/elements/outline.rotate.js b/client/src/scenes/elements/outline.rotate.js new file mode 100644 index 00000000..4b0a3a27 --- /dev/null +++ b/client/src/scenes/elements/outline.rotate.js @@ -0,0 +1,74 @@ +const Phaser = require('phaser'); + +class LineBox extends Phaser.GameObjects.Graphics { + constructor(scene, x0, x1, y0, y1, speed) { + super(scene); + this.x0 = x0; this.x1 = x1; + this.y0 = y0; this.y1 = y1; + 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.speed = speed; + } + + update() { + this.clear(); + + let vertX = this.x1 + 2; + let horizY = this.y0; + const genLine = () => { + switch (this.lineCoord[4]) { + case 0: + if (this.lineCoord[1] < this.x1) return [1, 1, 0, 0, 0]; + return [0, 0, 0, 0, 1]; + case 1: + if (this.lineCoord[0] < this.x1) return [1, 0, 0, 1, 1]; + return [0, 0, 0, 0, 2]; + case 2: + if (this.lineCoord[3] < this.y1) return [0, 0, 1, 1, 2]; + return [0, 0, 0, 0, 3]; + case 3: + horizY = this.y1; + if (this.lineCoord[2] < this.y1) return [-1, 0, 1, 0, 3]; + return [0, 0, 0, 0, 4]; + case 4: + horizY = this.y1; + if (this.lineCoord[0] > this.x0) return [-1, -1, 0, 0, 4]; + return [0, 0, 0, 0, 5]; + case 5: + horizY = this.y1; + vertX = this.x0; + if (this.lineCoord[1] > this.x0) return [0, -1, -1, 0, 5]; + return [0, 0, 0, 0, 6]; + case 6: + vertX = this.x0; + if (this.lineCoord[2] >= this.y0) return [0, 0, -1, -1, 6]; + return [0, 0, 0, 0, 7]; + case 7: + vertX = this.x0; + if (this.lineCoord[3] >= this.y0) return [0, 1, 0, -1, 7]; + return [0, 0, 0, 0, 0]; + default: return false; + } + }; + for (let i = 0; i < this.speed; i += 1) { + const delta = genLine(); + this.lineCoord = this.lineCoord.map((x, j) => { + if (j < 4) return (x + delta[j]); + return delta[j]; + }); + } + console.log(this.lineCoord); + + this.lineStyle(5, 0xFF00FF, 1); + this.lineBetween(this.lineCoord[0], horizY, this.lineCoord[1], horizY); + this.lineBetween(vertX, this.lineCoord[2], vertX, this.lineCoord[3]); + } +} + +class LineGroup extends Phaser.GameObjects.Group { + constructor(scene) { + super(scene, { classType: LineBox, runChildUpdate: true }); + } +} + +module.exports = { LineGroup, LineBox } \ No newline at end of file diff --git a/client/src/scenes/home.js b/client/src/scenes/home.js index 2f7789a3..dab7c2e5 100644 --- a/client/src/scenes/home.js +++ b/client/src/scenes/home.js @@ -1,5 +1,7 @@ const Phaser = require('phaser'); +const { LineGroup, LineBox } = require('./elements/outline.rotate'); + const HomeCryps = require('./home.cryps'); const HomeNavigation = require('./home.navigation'); @@ -33,6 +35,9 @@ class Home extends Phaser.Scene { this.scene.manager.add('HomeCryps', HomeCryps, 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; }