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

cleaned hotkeys and button coloring

Browse Source
This commit is contained in:
Max Robinson
2021-11-28 22:29:36 -06:00
parent 347d590aa2
commit 6c41248bd6
3 changed files with 25 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
dist/css/style.css vendored
View File

@@ -79,6 +79,9 @@ button {
button:hover{ button:hover{
background-color: #81d2c7; background-color: #81d2c7;
} }
button:active{
background-color: #595e77;
}
.icon-links { .icon-links {
font-size: 35px; font-size: 35px;
@@ -163,10 +166,7 @@ button:hover{
height: 30px; height: 30px;
margin-top: 5px; margin-top: 5px;
} }
.edit-mode-btn:hover{ .edit-mode-btn.selected {
background-color: #81d2c7;
}
.edit-mode-btn#drag-view {
background-color: #81d2c7; background-color: #81d2c7;
} }
#clear-walls { #clear-walls {

36
dist/index.html vendored
View File

@@ -19,17 +19,17 @@
<div class='control-panel'> <div class='control-panel'>
<div id='speed-controller' class='control-set'> <div id='speed-controller' class='control-set'>
<div class='vertical-buttons'> <div class='vertical-buttons'>
<button class="reset-view" title="Reset View. Hotkey: a"><i class="fa fa-video-camera"></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 drag-view selected" 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 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 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="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> <button id="clear-walls" title="Clear All Walls. Hotkey: B"><i class="fa fa-window-close"></i></button>
</div> </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 class='pause-button'><i class="fa fa-pause"></i></button> <button class='pause-button' title="Play/Pause. Hotkey: Spacebar"><i class="fa fa-pause"></i></button>
<button class="headless" title="Toggle rendering"><i class="fa fa-eye-slash"></i></button> <button class="headless" title="Toggle rendering. Hotkey: H"><i class="fa fa-eye-slash"></i></button>
<p id='fps'>Target FPS: 60</p> <p id='fps'>Target FPS: 60</p>
<p id='fps-actual'></p> <p id='fps-actual'></p>
<button id='reset-env'>Reset Environment</button> <button id='reset-env'>Reset Environment</button>
@@ -98,9 +98,9 @@
<div id='editor' class='tab'> <div id='editor' class='tab'>
<div class='left-half' id='editor-panel'> <div class='left-half' id='editor-panel'>
<div class='editor-buttons'> <div class='editor-buttons'>
<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 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 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> <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>
<div id='editor-env'> <div id='editor-env'>
<canvas id='editor-canvas'></canvas> <canvas id='editor-canvas'></canvas>
@@ -265,13 +265,13 @@
</div> </div>
</div> </div>
<div class='hot-controls'> <div class='hot-controls'>
<button class="reset-view" title="Reset View. Hotkey: a"><i class="fa fa-video-camera"></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 drag-view selected" 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 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 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="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="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> <button class='pause-button' title="Play/Pause. Hotkey: Spacebar"><i class="fa fa-pause"></i></button>
</div> </div>
<div id="headless-notification"> <div id="headless-notification">
<i class="fa fa-eye-slash" ></i> <i class="fa fa-eye-slash" ></i>

5
src/Controllers/ControlPanel.js
View File

@@ -68,6 +68,7 @@ class ControlPanel {
break; break;
case 'j': case 'j':
case ' ': case ' ':
e.preventDefault();
$('.pause-button')[0].click(); $('.pause-button')[0].click();
break; break;
// miscellaneous hotkeys // miscellaneous hotkeys
@@ -302,8 +303,8 @@ class ControlPanel {
case "drag-view": case "drag-view":
self.setMode(Modes.Drag); self.setMode(Modes.Drag);
} }
$('.edit-mode-btn').css('background-color', '#9099c2'); $('.edit-mode-btn').removeClass('selected');
$('.'+this.id).css('background-color', '#81d2c7'); $('.'+this.id).addClass('selected');
}); });
$('.reset-view').click( function(){ $('.reset-view').click( function(){