Max Robinson
GitHub
@@ -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) {
|
||||
|
||||
@@ -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) {
|
||||
|
||||
@@ -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) {
|
||||
|
||||
Reference in New Issue
Block a user