Add controls to disable milkyway and grid

gbiobob · Jan 10, 2016 · e22e28b · e22e28b
1 parent d2b9dd9
commit e22e28b
Show file tree

Hide file tree

Showing 6 changed files with 156 additions and 41 deletions.
diff --git a/css/styles.css b/css/styles.css
@@ -195,9 +195,10 @@ body {
   top: 10px;
   right: 10px;
   z-index: 999;
+  text-align: right;
 }
-#controls a {
-  display: block;
+#controls > a {
+  display: inline-block;
   width:  26px;
   height: 26px;
   margin: 4px;
@@ -209,16 +210,49 @@ body {
   background: rgba(100,100,100,0.2);
   border: solid 1px #ddd;
   border-color: rgba(255,255,255,0.2);
-  float: left;
   cursor: pointer;
   border-radius: 4px;
   text-decoration: none;
 }
-#controls a.selected {
+#controls > a.selected {
   color: #fff;
   border-color: rgba(255,255,255,0.6);
 }
 
+#options {
+  clear: both;
+  background: rgb(0,0,0);
+  background: rgba(0,0,0,0.6);
+  border-color: rgba(50,50,50,0.6);
+  padding: 10px 15px;
+  margin: 10px 0 0;
+}
+#options a {
+  display: block;
+  text-align: left;
+  margin: 7px 0;
+  color: #555;
+  font-size: 0.9rem;
+}
+#options a.active {
+  color: #eee;
+}
+#options a:before {
+  content: '-';
+  display: inline-block;
+  width:  16px;
+  height: 16px;
+  font-size: 14px;
+  line-height: 1.1;
+  text-align: center;
+  margin-right: 5px;
+  border: solid 1px #555;
+}
+#options a.active:before {
+  content: 'X';
+  border-color: #eee;
+}
+
 /* -------------------------------------------------------------------------- */
 /* HUD system infos */
 /* -------------------------------------------------------------------------- */

diff --git a/js/components/grid.class.js b/js/components/grid.class.js
@@ -11,6 +11,8 @@ var Grid = {
 
   'minDistView' : null,
 
+  'visible' : true,
+
   /**
    * Create 2 base grid scaled on Elite: Dangerous grid
    */
@@ -86,8 +88,39 @@ var Grid = {
 
     }
 
-  }
+  },
+
+  /**
+   * Toggle grid view
+   */
+  'toggleGrid' : function() {
+
+    this.visible = !this.visible;
+
+    if(this.size < 10000 && isFarView) return;
+    this.obj.visible = this.visible;
+
+  },
+
+  /**
+   * Show grid
+   */
+  'show' : function() {
+
+    if(!this.visible) return;
+
+    this.obj.visible = true;
+
+  },
 
+  /**
+   * Hide grid
+   */
+  'hide' : function() {
+
+    this.obj.visible = false;
+
+  }
 
 }
 
diff --git a/js/components/hud.class.js b/js/components/hud.class.js
@@ -3,6 +3,16 @@ var HUD = {
 
   'container' : null,
 
+  /**
+   *
+   */
+  'init' : function() {
+
+    this.initHudAction();
+    this.initControls();
+
+  },
+
   /**
    *
    */
@@ -33,21 +43,46 @@ var HUD = {
 
     $('#'+this.container).append(
       '  <div id="controls">'+
-      '    <a href="#" data-view="3d" class="selected">3D</a>'+
-      '    <a href="#" data-view="top">2D</a>'+
+      '    <a href="#" data-view="3d" class="view selected">3D</a>'+
+      '    <a href="#" data-view="top" class="view">2D</a>'+
+      '    <a href="#" data-view="options">'+Ico.cog+'</a>'+
+      '    <div id="options" style="display:none;"></div>'+
       '  </div>'
     );
+    this.createSubOptions();
 
   },
 
-
   /**
-   *
+   * Create option panel
    */
-  'init' : function() {
-
-    this.initHudAction();
-    this.initControls();
+  'createSubOptions' : function() {
+
+    //-- Toggle milky way
+    $( "<a></a>" )
+      .addClass( "sub-opt active" )
+      .attr('href','#')
+      .html('Toggle Milky Way')
+      .click(function() {
+        var state = Galaxy.milkyway[0].visible;
+        Galaxy.milkyway[0].visible = !state;
+        Galaxy.milkyway[1].visible = !state;
+        $(this).toggleClass('active');
+      })
+      .appendTo( "#options" );
+
+    //-- Toggle Grid
+    $( "<a></a>" )
+      .addClass( "sub-opt active" )
+      .attr('href','#')
+      .html('Toggle grid')
+      .click(function() {
+        Ed3d.grid1H.toggleGrid();
+        Ed3d.grid1K.toggleGrid();
+        Ed3d.grid1XL.toggleGrid();
+        $(this).toggleClass('active');
+      })
+      .appendTo( "#options" );
 
   },
 
@@ -58,44 +93,36 @@ var HUD = {
 
     $('#controls a').click(function(e) {
 
-      $('#controls a').removeClass('selected')
-      $(this).addClass('selected');
+      if($(this).hasClass('view')) {
+        $('#controls a.view').removeClass('selected')
+        $(this).addClass('selected');
+      }
 
       var view = $(this).data('view');
 
-      var moveFrom = {
-        x: camera.position.x, y: camera.position.y , z: camera.position.z
-      };
 
       switch(view) {
 
         case 'top':
+          Ed3d.isTopView = true;
+          var moveFrom = {x: camera.position.x, y: camera.position.y , z: camera.position.z};
           var moveCoords = {x: controls.center.x, y: controls.center.y+500, z: controls.center.z};
+          HUD.moveCamera(moveFrom,moveCoords);
           break;
 
         case '3d':
-        default:
           Ed3d.isTopView = false;
+          var moveFrom = {x: camera.position.x, y: camera.position.y , z: camera.position.z};
           var moveCoords = {x: controls.center.x-100, y: controls.center.y+500, z: controls.center.z+500};
+          HUD.moveCamera(moveFrom,moveCoords);
           break;
 
-      }
 
-      Ed3d.tween = new TWEEN.Tween(moveFrom, {override:true}).to(moveCoords, 800)
-        .start()
-        .onUpdate(function () {
-          camera.position.set(moveFrom.x, moveFrom.y, moveFrom.z);
-        })
-        .onComplete(function () {
-          controls.update();
-          switch(view) {
-
-            case 'top':
-              Ed3d.isTopView = true;
-              break;
+        case 'options':
+          $('#options').toggle();
+          break;
 
-          }
-        });
+      }
 
 
 
@@ -104,6 +131,22 @@ var HUD = {
 
   },
 
+  /**
+   * Move camera to a target
+   */
+  'moveCamera' : function(from, to) {
+
+    Ed3d.tween = new TWEEN.Tween(from, {override:true}).to(to, 800)
+      .start()
+      .onUpdate(function () {
+        camera.position.set(from.x, from.y, from.z);
+      })
+      .onComplete(function () {
+        controls.update();
+      });
+
+  },
+
   /**
    *
    */

diff --git a/js/components/icon.class.js b/js/components/icon.class.js
diff --git a/js/ed3dmap.js b/js/ed3dmap.js
@@ -109,8 +109,6 @@ var Ed3d = {
   /**
    * Init Ed3d map
    *
-   * @param {String} ID of the container for Ed3d map
-   * @param {String} Json path to load for systems data
    */
 
   'init' : function(options) {
@@ -158,6 +156,7 @@ var Ed3d = {
         $.getScript(Ed3d.basePath + "vendor/three-js/helvetiker_regular.typeface.js"),
 
         $.getScript(Ed3d.basePath + "js/components/grid.class.js"),
+        $.getScript(Ed3d.basePath + "js/components/icon.class.js"),
         $.getScript(Ed3d.basePath + "js/components/hud.class.js"),
         $.getScript(Ed3d.basePath + "js/components/action.class.js"),
         $.getScript(Ed3d.basePath + "js/components/route.class.js"),
@@ -570,8 +569,8 @@ function enableFarView (scale, withAnim) {
 
   //Galaxy.obj.scale.set(20,20,20);
   if(Action.cursorSel != null)  Action.cursorSel.scale.set(60,60,60);
-  Ed3d.grid1H.obj.visible = false;
-  Ed3d.grid1K.obj.visible = false;
+  Ed3d.grid1H.hide();
+  Ed3d.grid1K.hide();
   Ed3d.starfield.visible = false;
   scene.fog.density = 0.000009;
 
@@ -613,8 +612,8 @@ function disableFarView(scale, withAnim) {
 //
   camera.scale.set(1,1,1);
   if(Action.cursorSel != null)  Action.cursorSel.scale.set(1,1,1);
-  Ed3d.grid1H.obj.visible = true;
-  Ed3d.grid1K.obj.visible = true;
+  Ed3d.grid1H.show();
+  Ed3d.grid1K.show();
   Ed3d.starfield.visible = true;
   scene.fog.density = Ed3d.fogDensity;
 }

diff --git a/js/ed3dmap.min.js b/js/ed3dmap.min.js