From f60d70995bf545f73d6436c0181f1e2103e50eb2 Mon Sep 17 00:00:00 2001
From: Diego Marcos <diego.marcos@gmail.com>
Date: Fri, 14 Sep 2018 11:31:59 -0700
Subject: [PATCH] Add saber highlights

---
 src/components/saber-controls.js | 24 ++++++++++++++++++++----
 1 file changed, 20 insertions(+), 4 deletions(-)

diff --git a/src/components/saber-controls.js b/src/components/saber-controls.js
index 715c4bd..7e8db2e 100644
--- a/src/components/saber-controls.js
+++ b/src/components/saber-controls.js
@@ -3,6 +3,11 @@ AFRAME.registerComponent('saber-controls', {
     hand: {default: 'left', oneOf: ['left', 'right']}
   },
 
+  colors: {
+    right: '#78aaff', // Blue
+    left: '#ffa8a8' // Red
+  },
+
   init: function () {
     var el = this.el;
     var data = this.data;
@@ -18,12 +23,12 @@ AFRAME.registerComponent('saber-controls', {
     var saberHandleEl = document.createElement('a-entity');
     var saberEl = this.saberEl = document.createElement('a-entity');
     var saberPivotEl = document.createElement('a-entity');
-    var saberColor = this.data.hand === 'left' ? '#fdccd1' : '#b0ecfd';
-    //saberColor = '#ffffff';
+    var highlightTop = document.createElement('a-entity');
+    var highlightBottom = document.createElement('a-entity');
 
     this.boundingBox = new THREE.Box3();
 
-    saberEl.setAttribute('material', {shader: 'flat', color: saberColor});
+    saberEl.setAttribute('material', {shader: 'flat', color: this.colors[this.data.hand]});
     saberEl.setAttribute('geometry', {primitive: 'box', height: 0.9, depth: 0.020, width: 0.020});
     saberEl.setAttribute('position', '0 -0.55 0');
 
@@ -31,7 +36,18 @@ AFRAME.registerComponent('saber-controls', {
     saberHandleEl.setAttribute('geometry', {primitive: 'box', height: 0.2, depth: 0.025, width: 0.025});
     saberHandleEl.setAttribute('position', '0 0 0');
 
-    saberPivotEl.setAttribute('rotation', '70 0 0');
+    highlightTop.setAttribute('material', {shader: 'flat', color: this.colors[this.data.hand]});
+    highlightTop.setAttribute('geometry', {primitive: 'box', height: 0.18, depth: 0.005, width: 0.005});
+    highlightTop.setAttribute('position', '0 0 0.0125');
+
+    highlightBottom.setAttribute('material', {shader: 'flat', color: this.colors[this.data.hand]});
+    highlightBottom.setAttribute('geometry', {primitive: 'box', height: 0.18, depth: 0.005, width: 0.005});
+    highlightBottom.setAttribute('position', '0 0 -0.0125');
+
+    saberHandleEl.appendChild(highlightTop);
+    saberHandleEl.appendChild(highlightBottom)
+
+    saberPivotEl.setAttribute('rotation', '90 0 0');
     saberPivotEl.appendChild(saberHandleEl);
     saberPivotEl.appendChild(saberEl);
     el.appendChild(saberPivotEl);