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

added zoom/drag controls, control panel minimizer

Browse Source
This commit is contained in:
MaxRobinsonTheGreat
2020-07-23 15:27:44 -06:00
parent 8fb471025e
commit b0af739747
7 changed files with 131 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
dist/css/style.css vendored
View File

@@ -15,9 +15,17 @@ body{
#env { #env {
position: fixed; position: fixed;
top: 0; top: 0;
bottom: 300px; /* must correspond to control-panel height*/ height: 100%;
width: 100%; width: 100%;
text-align: center; text-align: center;
transform: scale(1);
image-rendering: pixelated;
}
#env-canvas {
top: 0;
left: 0;
position: relative;
} }
.control-panel { .control-panel {
@@ -56,6 +64,7 @@ button {
text-decoration: none; text-decoration: none;
display: inline-block; display: inline-block;
font-size: 16px; font-size: 16px;
min-width: 30px;
} }
button:hover{ button:hover{
background-color: #81d2c7; background-color: #81d2c7;
@@ -72,6 +81,11 @@ button:hover{
grid-column: 1; grid-column: 1;
} }
#view-controls {
float:right;
padding: 10px;
}
.col-row-input { .col-row-input {
display: none; display: none;
} }
@@ -130,11 +144,15 @@ button:hover{
width: 30px; width: 30px;
height: 30px; height: 30px;
} }
.edit-mode-btn#drag-view {
background-color: #81d2c7;
}
#drop-org { #drop-org {
bottom: 0; bottom: 0;
} }
#editor-env { #editor-env {
image-rendering: pixelated;
height: 195px; height: 195px;
width: 195px; width: 195px;
} }
@@ -189,3 +207,15 @@ button:hover{
#editor-mode-cont{ #editor-mode-cont{
padding-top: 20px; padding-top: 20px;
} }
#minimize {
margin: 10px;
/* align-self: center; */
float: right;
}
#maximize {
position: fixed;
bottom: 10px;
right: 10px;
display: none;
}

9
dist/index.html vendored
View File

@@ -6,6 +6,7 @@
<link rel="stylesheet" href="./css/style.css"> <link rel="stylesheet" href="./css/style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head> </head>
<body> <body>
<script src="./js/bundle.js"></script> <script src="./js/bundle.js"></script>
@@ -15,6 +16,10 @@
</div> </div>
<div class='control-panel'> <div class='control-panel'>
<div id='speed-controller' class='control-set'> <div id='speed-controller' class='control-set'>
<div id='view-controls'>
<button id="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>
</div>
<h2>Simulation Speed</h2> <h2>Simulation Speed</h2>
<input id="slider" type="range" min="1" max="300" value="60"> <input id="slider" type="range" min="1" max="300" value="60">
<button id='pause-button'><i class="fa fa-pause"></i></button> <button id='pause-button'><i class="fa fa-pause"></i></button>
@@ -53,11 +58,12 @@
<p class='tabnav-item' id='editor'>Editor</p> <p class='tabnav-item' id='editor'>Editor</p>
<p class='tabnav-item' id='hyperparameters'>Rule Tuning</p> <p class='tabnav-item' id='hyperparameters'>Rule Tuning</p>
<p class='tabnav-item' id='stats'>Stats</p> <p class='tabnav-item' id='stats'>Stats</p>
<button id="minimize" title="Minimze Control Panel"><i class="fa fa-minus"></i></button>
</div> </div>
<div id='about' class='tab'> <div id='about' class='tab'>
<div class='left-half'> <div class='left-half'>
<img src="../img/title.png" alt="Life Engine"> <img src="./img/title.png" alt="Life Engine">
<p>The Life Engine is a virtual ecosystem that allows organisms to grow, spread, and compete.</p> <p>The Life Engine is a virtual ecosystem that allows organisms to grow, spread, and compete.</p>
<p>Each organism is made up by a structure of cells, which provide different benefits based on their color.</p> <p>Each organism is made up by a structure of cells, which provide different benefits based on their color.</p>
@@ -171,5 +177,6 @@
</div> </div>
</div> </div>
</div> </div>
<button id="maximize" title="Show Control Panel"><i class="fa fa-plus-square"></i></button>
</body> </body>
</html> </html>

2
dist/js/bundle.js vendored
View File

File diff suppressed because one or more lines are too long

46
src/Controllers/CanvasController.js
View File

@@ -22,37 +22,20 @@ class CanvasController{
defineEvents() { defineEvents() {
this.canvas.addEventListener('mousemove', e => { this.canvas.addEventListener('mousemove', e => {
var prev_cell = this.cur_cell; this.updateMouseLocation(e.offsetX, e.offsetY)
var prev_org = this.cur_org;
this.mouse_x = e.offsetX;
this.mouse_y = e.offsetY;
var colRow = this.env.grid_map.xyToColRow(this.mouse_x, this.mouse_y);
this.mouse_c = colRow[0];
this.mouse_r = colRow[1];
this.cur_cell = this.env.grid_map.cellAt(this.mouse_c, this.mouse_r);
this.cur_org = this.cur_cell.owner;
if (this.cur_org != prev_org || this.cur_cell != prev_cell) {
this.env.renderer.clearAllHighlights(true);
if (this.cur_org != null && this.highlight_org) {
this.env.renderer.highlightOrganism(this.cur_org);
}
else if (this.cur_cell != null) {
this.env.renderer.highlightCell(this.cur_cell, true);
}
}
this.mouseMove(); this.mouseMove();
}); });
this.canvas.addEventListener('mouseup', function(evt) { this.canvas.addEventListener('mouseup', function(evt) {
evt.preventDefault(); evt.preventDefault();
this.updateMouseLocation(evt.offsetX, evt.offsetY)
this.left_click=false; this.left_click=false;
this.right_click=false; this.right_click=false;
}.bind(this)); }.bind(this));
this.canvas.addEventListener('mousedown', function(evt) { this.canvas.addEventListener('mousedown', function(evt) {
evt.preventDefault(); evt.preventDefault();
this.updateMouseLocation(evt.offsetX, evt.offsetY)
if (evt.button == 0) { if (evt.button == 0) {
this.left_click = true; this.left_click = true;
} }
@@ -73,6 +56,29 @@ class CanvasController{
} }
updateMouseLocation(offsetX, offsetY) {
var prev_cell = this.cur_cell;
var prev_org = this.cur_org;
this.mouse_x = offsetX;
this.mouse_y = offsetY;
var colRow = this.env.grid_map.xyToColRow(this.mouse_x, this.mouse_y);
this.mouse_c = colRow[0];
this.mouse_r = colRow[1];
this.cur_cell = this.env.grid_map.cellAt(this.mouse_c, this.mouse_r);
this.cur_org = this.cur_cell.owner;
if (this.cur_org != prev_org || this.cur_cell != prev_cell) {
this.env.renderer.clearAllHighlights(true);
if (this.cur_org != null && this.highlight_org) {
this.env.renderer.highlightOrganism(this.cur_org);
}
else if (this.cur_cell != null) {
this.env.renderer.highlightCell(this.cur_cell, true);
}
}
}
mouseMove() { mouseMove() {
alert("mouse move must be overriden"); alert("mouse move must be overriden");
} }

3
src/Controllers/ControlModes.js
View File

@@ -5,7 +5,8 @@ const Modes = {
ClickKill: 3, ClickKill: 3,
Select: 4, Select: 4,
Edit: 5, Edit: 5,
Clone: 6 Clone: 6,
Drag: 7
} }
module.exports = Modes; module.exports = Modes;

20
src/Controllers/ControlPanel.js
View File

@@ -5,6 +5,7 @@ const CellTypes = require("../Organism/Cell/CellTypes");
class ControlPanel { class ControlPanel {
constructor(engine) { constructor(engine) {
this.engine = engine; this.engine = engine;
this.defineMinMaxControls();
this.defineEngineSpeedControls(); this.defineEngineSpeedControls();
this.defineGridSizeControls(); this.defineGridSizeControls();
this.defineTabNavigation(); this.defineTabNavigation();
@@ -18,6 +19,19 @@ class ControlPanel {
this.editor_controller.setControlPanel(this); this.editor_controller.setControlPanel(this);
} }
defineMinMaxControls(){
$('#minimize').click ( function() {
console.log('hello')
$('.control-panel').css('display', 'none');
$('#maximize').css('display', 'block');
});
$('#maximize').click ( function() {
$('.control-panel').css('display', 'grid');
$('#maximize').css('display', 'none');
});
}
defineEngineSpeedControls(){ defineEngineSpeedControls(){
this.slider = document.getElementById("slider"); this.slider = document.getElementById("slider");
this.slider.oninput = function() { this.slider.oninput = function() {
@@ -197,12 +211,18 @@ class ControlPanel {
self.setMode(Modes.Clone); self.setMode(Modes.Clone);
self.env_controller.org_to_clone = self.engine.organism_editor.getCopyOfOrg(); self.env_controller.org_to_clone = self.engine.organism_editor.getCopyOfOrg();
break; break;
case "drag-view":
self.setMode(Modes.Drag);
} }
$('.edit-mode-btn').css('background-color', '#9099c2'); $('.edit-mode-btn').css('background-color', '#9099c2');
$('#'+this.id).css('background-color', '#81d2c7'); $('#'+this.id).css('background-color', '#81d2c7');
}); });
$('#reset-view').click( function(){
this.env_controller.resetView();
}.bind(this));
var env = this.engine.env; var env = this.engine.env;
$('#reset-env').click( function() { $('#reset-env').click( function() {
this.engine.env.reset(); this.engine.env.reset();

44
src/Controllers/EnvironmentController.js
View File

@@ -8,8 +8,42 @@ const Cell = require("../Organism/Cell/Cell");
class EnvironmentController extends CanvasController{ class EnvironmentController extends CanvasController{
constructor(env, canvas) { constructor(env, canvas) {
super(env, canvas); super(env, canvas);
this.mode = Modes.None; this.mode = Modes.Drag;
this.org_to_clone = null; this.org_to_clone = null;
this.defineZoomControls();
this.prev_x;
this.prev_y;
this.scale = 1;
}
defineZoomControls() {
var scale = 1;
var zoom_speed = 0.5;
const el = document.querySelector('#env-canvas');
el.onwheel = function zoom(event) {
event.preventDefault();
var sign = -1*Math.sign(event.deltaY);
// Restrict scale
scale = Math.max(0.5, scale+(sign*zoom_speed));
// Apply scale transform
el.style.transform = `scale(${scale})`;
this.scale = scale;
}.bind(this);
}
resetView() {
$('#env-canvas').css('transform', 'scale(1)');
$('#env-canvas').css('top', '0px');
$('#env-canvas').css('left', '0px');
this.scale = 1;
}
updateMouseLocation(offsetX, offsetY){
this.prev_x = this.mouse_x;
this.prev_y = this.mouse_y;
super.updateMouseLocation(offsetX, offsetY);
} }
mouseMove() { mouseMove() {
@@ -68,6 +102,14 @@ class EnvironmentController extends CanvasController{
} }
} }
break; break;
case Modes.Drag:
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.prev_y)*this.scale);
var new_left = (cur_left + (this.mouse_x - this.prev_x)*this.scale);
$('#env-canvas').css('top', new_top+'px');
$('#env-canvas').css('left', new_left+'px');
break;
} }
} }
} }