diff --git a/dist/index.html b/dist/index.html index 31b123c..8b02b9d 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 @@
- - - + + +
@@ -265,19 +265,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 a6096d3..17d3d84 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,38 +42,71 @@ 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; + } + + defineHotkeys() { + $('body').keydown( (e) => { + switch (e.key.toLowerCase()) { + // hot bar controls + case 'a': + $('.reset-view')[0].click(); + break; + case 's': + $('#drag-view').click(); + break; + case 'd': + $('#wall-drop').click(); + break; + case 'f': + $('#food-drop').click(); + break; + case 'g': + $('#click-kill').click(); + break; + case 'h': + $('.headless')[0].click(); + break; + case 'j': + case ' ': + $('.pause-button')[0].click(); + break; + // miscellaneous hotkeys + case 'q': // minimize/maximize control panel + e.preventDefault(); + if (this.control_panel_active) + $('#minimize').click(); + else + $('#maximize').click(); + break; + case 'z': + $('#select').click(); + break; + case 'x': + $('#edit').click(); + break; + case 'c': + $('#drop-org').click(); + break; + case '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 'b': + $('#clear-walls').click(); } }); - // var self = this; - // $('#minimize').click ( function() { - // $('.control-panel').css('display', 'none'); - // $('.hot-controls').css('display', 'block'); - - // }.bind(this)); - // $('#maximize').click ( function() { - // $('.control-panel').css('display', 'grid'); - // $('.hot-controls').css('display', 'none'); - // if (self.tab_id == 'stats') { - // self.stats_panel.startAutoRender(); - // } - // }); } defineEngineSpeedControls(){ @@ -261,20 +295,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 +339,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..73aa0fc 100644 --- a/src/Controllers/EnvironmentController.js +++ b/src/Controllers/EnvironmentController.js @@ -28,22 +28,14 @@ class EnvironmentController extends CanvasController{ // Restrict scale scale = Math.max(0.5, this.scale+(sign*zoom_speed)); - if (scale != 0.5) { - var cur_top = parseInt($('#env-canvas').css('top')); - var cur_left = parseInt($('#env-canvas').css('left')); - 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; - } - else { - // If we're zooming out, zoom out towards the center - var diff_x = -cur_left/scale; - var diff_y = -cur_top/scale; - } - $('#env-canvas').css('top', (cur_top+diff_y)+'px'); - $('#env-canvas').css('left', (cur_left+diff_x)+'px'); - } + 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); + + $('#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 +141,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) {