Merge branch 'master' of ssh://cryps.gg:40022/~/cryps

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 }

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;
     }