cleaned hotkeys and button coloring

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

8
dist/css/style.css vendored
View File

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

36
dist/index.html vendored
View File

@@ -19,17 +19,17 @@
<div class='control-panel'>
<div id='speed-controller' class='control-set'>
<div class='vertical-buttons'>
<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>
<button class="reset-view" title="Reset View. Hotkey: A"><i class="fa fa-video-camera"></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 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">
<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='pause-button' title="Play/Pause. Hotkey: Spacebar"><i class="fa fa-pause"></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-actual'></p>
<button id='reset-env'>Reset Environment</button>
@@ -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 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>
<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,13 +265,13 @@
</div>
</div>
<div class='hot-controls'>
<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>
<button class="reset-view" title="Reset View. Hotkey: A"><i class="fa fa-video-camera"></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 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: Spacebar"><i class="fa fa-pause"></i></button>
</div>
<div id="headless-notification">
<i class="fa fa-eye-slash" ></i>

View File

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