diff --git a/dist/index.html b/dist/index.html index f833752..5b160ed 100644 --- a/dist/index.html +++ b/dist/index.html @@ -19,12 +19,12 @@
- - - - - - + + + + + +

Simulation Speed

@@ -62,7 +62,7 @@

Simulation Controls

Stats

Challenges

- +
@@ -98,9 +98,9 @@
- - - + + +
@@ -261,19 +261,19 @@
- - - - - - - + + + + + + +
- +
diff --git a/src/Controllers/CanvasController.js b/src/Controllers/CanvasController.js index 95a03d9..e14cb2a 100644 --- a/src/Controllers/CanvasController.js +++ b/src/Controllers/CanvasController.js @@ -9,6 +9,7 @@ class CanvasController{ this.mouse_c; this.mouse_r; this.left_click = false; + this.middle_click = false; this.right_click = false; this.cur_cell = null; this.cur_org = null; @@ -30,16 +31,21 @@ class CanvasController{ evt.preventDefault(); this.updateMouseLocation(evt.offsetX, evt.offsetY) this.mouseUp(); - this.left_click=false; - this.right_click=false; + if (evt.button == 0) + this.left_click = false; + if (evt.button == 1) + this.middle_click = false; + if (evt.button == 2) + this.right_click = false; }.bind(this)); this.canvas.addEventListener('mousedown', function(evt) { evt.preventDefault(); this.updateMouseLocation(evt.offsetX, evt.offsetY) - if (evt.button == 0) { + if (evt.button == 0) this.left_click = true; - } + if (evt.button == 1) + this.middle_click = true; if (evt.button == 2) this.right_click = true; this.mouseDown(); @@ -50,11 +56,25 @@ class CanvasController{ }); this.canvas.addEventListener('mouseleave', function(){ - this.right_click = false; - this.left_click = false; + this.left_click = false; + this.middle_click = false; + this.right_click = false; this.env.renderer.clearAllHighlights(true); }.bind(this)); + this.canvas.addEventListener('mouseenter', function(evt) { + + this.left_click = !!(evt.buttons & 1); + this.right_click = !!(evt.buttons & 2); + this.middle_click = !!(evt.buttons & 4); + + this.updateMouseLocation(evt.offsetX, evt.offsetY); + this.start_x = this.mouse_x; + this.start_y = this.mouse_y; + + + }.bind(this)) + } updateMouseLocation(offsetX, offsetY) { diff --git a/src/Controllers/ControlPanel.js b/src/Controllers/ControlPanel.js index ab5eaa5..f57da67 100644 --- a/src/Controllers/ControlPanel.js +++ b/src/Controllers/ControlPanel.js @@ -6,6 +6,7 @@ class ControlPanel { constructor(engine) { this.engine = engine; this.defineMinMaxControls(); + this.defineHotkeys(); this.defineEngineSpeedControls(); this.defineGridSizeControls(); this.defineTabNavigation(); @@ -41,25 +42,7 @@ class ControlPanel { this.stats_panel.startAutoRender(); } }); - const V_KEY = 118; - $('body').keypress( (e) => { - if (e.which === V_KEY) { - if (this.no_hud) { - let control_panel_display = this.control_panel_active ? 'grid' : 'none'; - let hot_control_display = !this.control_panel_active ? 'block' : 'none'; - if (this.control_panel_active && this.tab_id == 'stats') { - this.stats_panel.startAutoRender(); - }; - $('.control-panel').css('display', control_panel_display); - $('.hot-controls').css('display', hot_control_display); - } - else { - $('.control-panel').css('display', 'none'); - $('.hot-controls').css('display', 'none'); - } - this.no_hud = !this.no_hud; - } - }); + // var self = this; // $('#minimize').click ( function() { // $('.control-panel').css('display', 'none'); @@ -75,6 +58,88 @@ class ControlPanel { // }); } + defineHotkeys() { + + $('body').keydown( (evt) => { + + //console.log(evt.which); + + switch (evt.which) { + + // hot bar controls + case 49: // 1 = Reset Camera + $('.reset-view')[0].click(); + break; + + case 50: // 2 = Drag View + $('#drag-view').click(); + break; + + case 51: // 3 = Drop Wall + $('#wall-drop').click(); + break; + + case 52: // 4 = Drop Food + $('#food-drop').click(); + break; + + case 53: // 5 = Kill + $('#click-kill').click(); + break; + + case 54: // 6 = Play/Pause + case 32: // Space = Play/Pause + $('.pause-button')[0].click(); + break; + + case 55: // 7 = Toggle Rendering + $('.headless')[0].click(); + break; + + // miscellaneous hotkeys + case 9: // tab = toggle control panel + evt.preventDefault(); + if (this.control_panel_active) + $('#minimize').click(); + else + $('#maximize').click(); + break; + + case 68: // d = drop organism + $('#drop-org').click(); + break; + + case 69: // e = edit organism + $('#edit').click(); + break; + + case 83: // s = select creature mode + $('#select').click(); + break; + + case 86: // v = Toggle HUD + if (this.no_hud) { + let control_panel_display = this.control_panel_active ? 'grid' : 'none'; + let hot_control_display = !this.control_panel_active ? 'block' : 'none'; + if (this.control_panel_active && this.tab_id == 'stats') { + this.stats_panel.startAutoRender(); + }; + $('.control-panel').css('display', control_panel_display); + $('.hot-controls').css('display', hot_control_display); + } + else { + $('.control-panel').css('display', 'none'); + $('.hot-controls').css('display', 'none'); + } + this.no_hud = !this.no_hud; + break; + + case 88: // x = clear all walls + $('#clear-walls').click(); + } + }); + } + defineEngineSpeedControls(){ this.slider = document.getElementById("slider"); this.slider.oninput = function() { @@ -261,20 +326,15 @@ class ControlPanel { break; case "edit": self.setMode(Modes.Edit); - self.editor_controller.setEditorPanel(); break; case "drop-org": self.setMode(Modes.Clone); - self.env_controller.org_to_clone = self.engine.organism_editor.getCopyOfOrg(); - self.env_controller.add_new_species = self.editor_controller.new_species; - self.editor_controller.new_species = false; - // console.log(self.env_controller.add_new_species) break; case "drag-view": self.setMode(Modes.Drag); } $('.edit-mode-btn').css('background-color', '#9099c2'); - $('#'+this.id).css('background-color', '#81d2c7'); + $('.'+this.id).css('background-color', '#81d2c7'); }); $('.reset-view').click( function(){ @@ -310,6 +370,17 @@ class ControlPanel { setMode(mode) { this.env_controller.mode = mode; this.editor_controller.mode = mode; + + if (mode == Modes.Edit) { + this.editor_controller.setEditorPanel(); + } + + if (mode == Modes.Clone) { + this.env_controller.org_to_clone = this.engine.organism_editor.getCopyOfOrg(); + this.env_controller.add_new_species = this.editor_controller.new_species; + this.editor_controller.new_species = false; + // console.log(this.env_controller.add_new_species) + } } setEditorOrganism(org) { diff --git a/src/Controllers/EnvironmentController.js b/src/Controllers/EnvironmentController.js index 451d2a9..3067ab3 100644 --- a/src/Controllers/EnvironmentController.js +++ b/src/Controllers/EnvironmentController.js @@ -28,22 +28,33 @@ class EnvironmentController extends CanvasController{ // Restrict scale scale = Math.max(0.5, this.scale+(sign*zoom_speed)); - if (scale != 0.5) { + //if (scale != 0.5) { + var cur_top = parseInt($('#env-canvas').css('top')); var cur_left = parseInt($('#env-canvas').css('left')); + + var diff_x = (this.canvas.width/2 - this.mouse_x) * (scale - this.scale); + var diff_y = (this.canvas.height/2 - this.mouse_y) * (scale - this.scale); + + /* -- Original Zoom procedure if (sign == 1) { // If we're zooming in, zoom towards wherever the mouse is - var diff_x = ((this.canvas.width/2-cur_left/this.scale) - this.mouse_x)*this.scale/1.5; - var diff_y = ((this.canvas.height/2-cur_top/this.scale) - this.mouse_y)*this.scale/1.5; + var diff_x = ((this.canvas.width/2-cur_left/this.scale) - this.mouse_x)*scale/1.5; + var diff_y = ((this.canvas.height/2-cur_top/this.scale) - this.mouse_y)*scale/1.5; + } else { // If we're zooming out, zoom out towards the center var diff_x = -cur_left/scale; var diff_y = -cur_top/scale; + var new_left = cur_left - cur_left / scale; + var new_top = cur_top - cur_top / scale; } + */ + $('#env-canvas').css('top', (cur_top+diff_y)+'px'); $('#env-canvas').css('left', (cur_left+diff_x)+'px'); - } + //} // Apply scale transform el.style.transform = `scale(${scale})`; @@ -149,6 +160,15 @@ class EnvironmentController extends CanvasController{ break; } } + else if (this.middle_click) { + //drag on middle click + var cur_top = parseInt($('#env-canvas').css('top'), 10); + var cur_left = parseInt($('#env-canvas').css('left'), 10); + var new_top = cur_top + ((this.mouse_y - this.start_y)*this.scale); + var new_left = cur_left + ((this.mouse_x - this.start_x)*this.scale); + $('#env-canvas').css('top', new_top+'px'); + $('#env-canvas').css('left', new_left+'px'); + } } dropCellType(col, row, state, killBlocking=false) {