Style improvements

css/style.css

@@ -82,7 +82,7 @@ label {
   }
   .lever {
     bottom: -2.75rem;
-    height: 3.4375rem;
+    height: 4.4375rem;
     position: absolute;
     left: 12rem;
     width: 6.125rem;
@@ -92,6 +92,7 @@ label {
       height: 3.4375rem;
       position: absolute;
       width: 3.0625rem;
+      top: 1em;
       transform: rotate(var(--leverRotation));
       transform-origin: calc(100% - 3px) calc(100% - 2px);
 
@@ -226,4 +227,12 @@ label {
   text-transform: uppercase;
   width: 8.125rem;
   z-index: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* Util */
+.no-select {
+  user-select: none
 }

js/machine.js

@@ -51,6 +51,16 @@ const kPullDirection = {
   * Functions to handle side effects
   */
   const middleware = [
+    function disableSelect(_, action) {
+      if (action === kAction.startTurningWheel || action === kAction.startPullingLever) {
+          document.querySelector('.machine')?.classList.add('no-select');
+      }
+    },
+    function enableSelect(_, action) {
+      if (action === kAction.stopTurningWheel || action === kAction.stopPullingLever) {
+          document.querySelector('.machine')?.classList.remove('no-select');
+      }
+    },
     function completeLoading(state, action) {
       if (action === kAction.turnWheel && state.currentState === kState.readyToLoad && parseFloat(state.load) >= configuration.maxLoad) {
           send(kAction.completeLoading);