josh/lifeEngine
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #47 from MaxRobinsonTheGreat/hotkeys

Browse Source 
Hotkeys
This commit is contained in:
Max Robinson
2021-11-28 17:13:43 -06:00
committed by GitHub
parent a21a750322 4f85e1cc9d
commit f996083ca8
4 changed files with 137 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
dist/index.html vendored
View File

@@ -19,12 +19,12 @@
<div class='control-panel'>
<div id='speed-controller' class='control-set'>
<div class='vertical-buttons'>
<button class="reset-view" title="Reset View"><i class="fa fa-video-camera"></i></button>
<button class="edit-mode-btn" id="drag-view" title="Drag View"><i class="fa fa-arrows"></i></button>
<button class="edit-mode-btn" id="wall-drop" title="Drop/Remove Wall"><i class="fa fa-square"></i></button>
<button class="edit-mode-btn" id="food-drop" title="Drop/Remove Food"><i class="fa fa-cutlery"></i></button>
<button class="edit-mode-btn" id="click-kill" title="Click to kill"><i class="fa fa-bolt"></i></button>
<button id="clear-walls" title="Clear All Walls"><i class="fa fa-window-close"></i></button>
<button class="reset-view" title="Reset View. Hotkey: a"><i class="fa fa-video-camera"></i></button>
<button class="edit-mode-btn drag-view" id="drag-view" title="Drag View. Hotkey: s"><i class="fa fa-arrows"></i></button>
<button class="edit-mode-btn wall-drop" id="wall-drop" title="Drop/Remove Wall. Hotkey: d"><i class="fa fa-square"></i></button>
<button class="edit-mode-btn food-drop" id="food-drop" title="Drop/Remove Food. Hotkey: f"><i class="fa fa-cutlery"></i></button>
<button class="edit-mode-btn click-kill" id="click-kill" title="Click to kill. Hotkey: g"><i class="fa fa-bolt"></i></button>
<button id="clear-walls" title="Clear All Walls. Hotkey: b"><i class="fa fa-window-close"></i></button>
</div>
<h2>Simulation Speed</h2>
<input id="slider" type="range" min="1" max="300" value="60">
@@ -62,7 +62,7 @@
<p class='tabnav-item' id='hyperparameters'>Simulation Controls</p>
<p class='tabnav-item' id='stats'>Stats</p>
<p class='tabnav-item' id='challenges'>Challenges</p>
<button id="minimize" title="Minimze Control Panel"><i class="fa fa-minus-square"></i></button>
<button id="minimize" title="Minimze Control Panel."><i class="fa fa-minus-square"></i></button>
</div>
<div id='about' class='tab'>
@@ -98,9 +98,9 @@
<div id='editor' class='tab'>
<div class='left-half' id='editor-panel'>
<div class='editor-buttons'>
<button class="edit-mode-btn" id="select" title="Select organism from world"><i class="fa fa-hand-pointer-o"></i></button>
<button class="edit-mode-btn" id="edit" title="Edit organism"><i class="fa fa-pencil"></i></button>
<button class="edit-mode-btn" id="drop-org" title="Drop organism in world"><i class="fa fa-plus"></i></button>
<button class="edit-mode-btn select" id="select" title="Select organism from world. Hotkey: z"><i class="fa fa-hand-pointer-o"></i></button>
<button class="edit-mode-btn edit" id="edit" title="Edit organism. Hotkey: x"><i class="fa fa-pencil"></i></button>
<button class="edit-mode-btn drop-org" id="drop-org" title="Drop organism in world. Hotkey: c"><i class="fa fa-plus"></i></button>
</div>
<div id='editor-env'>
<canvas id='editor-canvas'></canvas>
@@ -265,19 +265,19 @@
</div>
</div>
<div class='hot-controls'>
<button class="reset-view" title="Reset View"><i class="fa fa-video-camera"></i></button>
<button class="edit-mode-btn" id="drag-view" title="Drag View"><i class="fa fa-arrows"></i></button>
<button class="edit-mode-btn" id="wall-drop" title="Drop/Remove Wall"><i class="fa fa-square"></i></button>
<button class="edit-mode-btn" id="food-drop" title="Drop/Remove Food"><i class="fa fa-cutlery"></i></button>
<button class="edit-mode-btn" id="click-kill" title="Click to kill"><i class="fa fa-bolt"></i></button>
<button class='pause-button'><i class="fa fa-pause"></i></button>
<button class="headless" title="Toggle rendering"><i class="fa fa-eye-slash"></i></button>
<button class="reset-view" title="Reset View. Hotkey: a"><i class="fa fa-video-camera"></i></button>
<button class="edit-mode-btn drag-view" id="drag-view" title="Drag View. Hotkey: s"><i class="fa fa-arrows"></i></button>
<button class="edit-mode-btn wall-drop" id="wall-drop" title="Drop/Remove Wall. Hotkey: d"><i class="fa fa-square"></i></button>
<button class="edit-mode-btn food-drop" id="food-drop" title="Drop/Remove Food. Hotkey: f"><i class="fa fa-cutlery"></i></button>
<button class="edit-mode-btn click-kill" id="click-kill" title="Click to kill. Hotkey: g"><i class="fa fa-bolt"></i></button>
<button class="headless" title="Toggle rendering. Hotkey: h"><i class="fa fa-eye-slash"></i></button>
<button class='pause-button' title="Play/Pause. Hotkey: j/space"><i class="fa fa-pause"></i></button>
</div>
<div id="headless-notification">
<i class="fa fa-eye-slash" ></i>
</div>
<div id='maximize-hot-control' class='hot-controls'>
<button id="maximize" title="Show Control Panel"><i class="fa fa-plus-square"></i></button>
<button id="maximize" title="Show Control Panel."><i class="fa fa-plus-square"></i></button>
</div>
</body>

32
src/Controllers/CanvasController.js
View File

@@ -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) {

112
src/Controllers/ControlPanel.js
View File

@@ -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) {

33
src/Controllers/EnvironmentController.js
View File

@@ -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) {