diff --git a/css/style.css b/css/style.css index 517132c..e9a73a2 100644 --- a/css/style.css +++ b/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 } diff --git a/js/machine.js b/js/machine.js index c86ba97..5c3a289 100644 --- a/js/machine.js +++ b/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);