From a8ff3f0a23e6acc3803c8979c7f0b8c45161ee75 Mon Sep 17 00:00:00 2001
From: Mashy <himesh.kapadia@gmail.com>
Date: Mon, 4 Mar 2019 12:52:53 +1000
Subject: [PATCH] Highlight lines on cryps on select

---
 client/src/scenes/elements/outline.rotate.js | 13 ++++++-------
 client/src/scenes/home.cryps.js              |  9 +++++++--
 client/src/scenes/home.js                    |  3 ---
 3 files changed, 13 insertions(+), 12 deletions(-)

diff --git a/client/src/scenes/elements/outline.rotate.js b/client/src/scenes/elements/outline.rotate.js
index 4b0a3a27..041611ee 100644
--- a/client/src/scenes/elements/outline.rotate.js
+++ b/client/src/scenes/elements/outline.rotate.js
@@ -1,10 +1,11 @@
 const Phaser = require('phaser');
 
 class LineBox extends Phaser.GameObjects.Graphics {
-    constructor(scene, x0, x1, y0, y1, speed) {
+    constructor(scene, x, y, width, height, colour, speed) {
         super(scene);
-        this.x0 = x0; this.x1 = x1;
-        this.y0 = y0; this.y1 = y1;
+        this.colour = colour;
+        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));
         this.lineCoord = [this.x0 + margin, this.x1 - margin, this.y0, this.y0, 0];
         this.speed = speed;
@@ -13,7 +14,7 @@ class LineBox extends Phaser.GameObjects.Graphics {
     update() {
         this.clear();
 
-        let vertX = this.x1 + 2;
+        let vertX = this.x1;
         let horizY = this.y0;
         const genLine = () => {
             switch (this.lineCoord[4]) {
@@ -57,9 +58,7 @@ class LineBox extends Phaser.GameObjects.Graphics {
                 return delta[j];
             });
         }
-        console.log(this.lineCoord);
-
-        this.lineStyle(5, 0xFF00FF, 1);
+        this.lineStyle(5, this.colour, 1);
         this.lineBetween(this.lineCoord[0], horizY, this.lineCoord[1], horizY);
         this.lineBetween(vertX, this.lineCoord[2], vertX, this.lineCoord[3]);
     }
diff --git a/client/src/scenes/home.cryps.js b/client/src/scenes/home.cryps.js
index 418e2826..4c691a75 100644
--- a/client/src/scenes/home.cryps.js
+++ b/client/src/scenes/home.cryps.js
@@ -3,6 +3,7 @@ const { remove } = require('lodash');
 
 const { TEXT, COLOURS, POSITIONS: { CRYP_LIST } } = require('./constants');
 const genAvatar = require('./avatar');
+const { LineGroup, LineBox } = require('./elements/outline.rotate');
 
 const ROW_HEIGHT = CRYP_LIST.height() * 0.2;
 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('setdata', this.updateData, this);
         const cryps = this.registry.get('crypList');
-
+        const lineGroup = this.add.existing(new LineGroup(this));
 
         if (!cryps) return true;
         const ws = this.registry.get('ws');
@@ -58,12 +59,16 @@ class HomeCrypList extends Phaser.Scene {
                 .setOrigin(0);
             crypInteract.setAlpha(0.2);
             crypInteract.on('pointerdown', () => {
+                lineGroup.clear(true, true);
                 if (this.activeCryps.includes(crypInteract)) {
                     remove(this.activeCryps, n => n === crypInteract);
                     crypInteract.setAlpha(0.2);
                 } else {
                     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)
+                    ));
                 }
             });
 
diff --git a/client/src/scenes/home.js b/client/src/scenes/home.js
index dab7c2e5..ae96e772 100644
--- a/client/src/scenes/home.js
+++ b/client/src/scenes/home.js
@@ -1,6 +1,5 @@
 const Phaser = require('phaser');
 
-const { LineGroup, LineBox } = require('./elements/outline.rotate');
 
 const HomeCryps = require('./home.cryps');
 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('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;
     }