From 1dcb77872586635388f0c2ad4b349f4978410d89 Mon Sep 17 00:00:00 2001 From: Samuel Macauley Date: Sun, 22 Oct 2023 21:57:59 +1100 Subject: [PATCH] Fix for issue 2183. Tested on mobile touchscreen and desktop --- src/ui/interface.js | 26 ++++++++++++++++++++++++++ 1 file changed, 26 insertions(+) diff --git a/src/ui/interface.js b/src/ui/interface.js index c142d7187..5c259c873 100644 --- a/src/ui/interface.js +++ b/src/ui/interface.js @@ -375,6 +375,32 @@ export class UI { const slider = document.getElementById('sfx'); slider.addEventListener('input', () => (game.soundsys.allEffectsMultiplier = slider.value)); + // Prevents default touch behaviour on slider when first touched (prevents scrolling the screen). + slider.addEventListener('touchstart', (e) => e.preventDefault(), { passive: false }); + + slider.addEventListener('touchmove', (e) =>{ + // Get slider relative to the view port. + const sliderRect = slider.getBoundingClientRect(); + // The original touch point Y coordinate relative to the view port. + const touchPoint = e.touches[0].clientY; + /// The y coord of the touch event relative to the slider. + const touchRelToSlider = touchPoint - sliderRect.top; + const distFromBottom = sliderRect.height - touchRelToSlider; + // Normalize the distance from the bottom of the slider to a value between 0 and 1. + const normDist = distFromBottom / sliderRect.height; + // Scale normDist to range of the slider. + const scaledDist = normDist * (slider.max - slider.min); + // New value of the slider. + const slidersNewVal = scaledDist + parseFloat(slider.min); + // Sets the slider value to the new value between the min/max bounds of the slider. + slider.value = Math.min(Math.max(slidersNewVal, slider.min), slider.max); + + // Manually dispatches the input event to update the sound system with new slider value. + slider.dispatchEvent(new Event('input')); + }); + + + this.hotkeys = new Hotkeys(this); const ingameHotkeys = getHotKeys(this.hotkeys);