From 6c41248bd6beaeb6dc5377c94d485babce9f4f2b Mon Sep 17 00:00:00 2001
From: Max Robinson <maxdrob1@gmail.com>
Date: Sun, 28 Nov 2021 22:29:36 -0600
Subject: [PATCH] cleaned hotkeys and button coloring

---
 dist/css/style.css              |  8 ++++----
 dist/index.html                 | 36 ++++++++++++++++-----------------
 src/Controllers/ControlPanel.js |  5 +++--
 3 files changed, 25 insertions(+), 24 deletions(-)

diff --git a/dist/css/style.css b/dist/css/style.css
index f98f464..1714871 100644
--- a/dist/css/style.css
+++ b/dist/css/style.css
@@ -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 {
diff --git a/dist/index.html b/dist/index.html
index 8b02b9d..0166f53 100644
--- a/dist/index.html
+++ b/dist/index.html
@@ -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>
diff --git a/src/Controllers/ControlPanel.js b/src/Controllers/ControlPanel.js
index 17d3d84..5ec9e54 100644
--- a/src/Controllers/ControlPanel.js
+++ b/src/Controllers/ControlPanel.js
@@ -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(){