From 489e95de9fc55582ef289467798f7e69918354d7 Mon Sep 17 00:00:00 2001
From: Gwilym Inzani <email@gwilym.dev>
Date: Wed, 5 Jul 2023 13:20:01 +0100
Subject: [PATCH] replace slider with a better behaved one

---
 website/src/App.tsx    | 10 ++----
 website/src/Slider.tsx | 73 ++++++++++++++++++++++++++++++++++++++++++
 website/src/mgba.tsx   |  3 --
 3 files changed, 75 insertions(+), 11 deletions(-)
 create mode 100644 website/src/Slider.tsx

diff --git a/website/src/App.tsx b/website/src/App.tsx
index a7fcf941..4608a13b 100644
--- a/website/src/App.tsx
+++ b/website/src/App.tsx
@@ -5,6 +5,7 @@ import { styled } from "styled-components";
 import { useOnKeyUp } from "./useOnKeyUp.hook";
 import { useLocalStorage } from "./useLocalStorage.hook";
 import { useAvoidItchIoScrolling } from "./useAvoidItchIoScrolling";
+import { Slider } from "./Slider";
 
 const BindingsDialog = styled.dialog`
   border-radius: 5px;
@@ -118,14 +119,7 @@ function BindingsWindow({
     <BindingsDialog open onClose={hide}>
       <VolumeLabel>
         Volume:
-        <input
-          type="range"
-          value={volume}
-          min="0"
-          max="1"
-          step="0.05"
-          onChange={(e) => setVolume(Number(e.target.value))}
-        />
+        <Slider value={volume} onChange={(e) => setVolume(e)} />
       </VolumeLabel>
       <BindingsControl
         bindings={bindings}
diff --git a/website/src/Slider.tsx b/website/src/Slider.tsx
new file mode 100644
index 00000000..c73a3b1d
--- /dev/null
+++ b/website/src/Slider.tsx
@@ -0,0 +1,73 @@
+import { useRef } from "react";
+import { styled } from "styled-components";
+
+const SliderWrapper = styled.div`
+  padding: 1ex 0;
+  width: 100%;
+`;
+
+const SliderContainer = styled.div`
+  display: block;
+  position: relative;
+  width: 100%;
+  height: 0.25ex;
+  background-color: black;
+  margin: auto;
+  min-width: 10ex;
+`;
+
+const SliderBox = styled.div<{ $proportion: number }>`
+  position: absolute;
+  width: 1ex;
+  height: 1ex;
+  top: -0.3ex;
+  background-color: black;
+  left: ${(props) => props.$proportion * 90}%;
+`;
+
+export function Slider({
+  value,
+  onChange,
+}: {
+  value: number;
+  onChange: (newValue: number) => void;
+}) {
+  const slider = useRef<HTMLDivElement>(null);
+
+  const handleClick = (event: React.MouseEvent<HTMLDivElement>) => {
+    onChange(
+      event.nativeEvent.offsetX / (event.target as HTMLDivElement).offsetWidth
+    );
+
+    event.stopPropagation();
+  };
+
+  const handleDrag = (event: React.MouseEvent<HTMLDivElement>) => {
+    const sliderRef = slider.current;
+
+    if (!sliderRef || event.buttons !== 1) {
+      return;
+    }
+
+    const relativePosition =
+      event.clientX - sliderRef.getBoundingClientRect().left;
+    const proportion = relativePosition / sliderRef.offsetWidth;
+
+    const clamped = Math.min(1, Math.max(0, proportion));
+
+    onChange(clamped);
+  };
+
+  return (
+    <SliderWrapper ref={slider} onClick={handleClick} onMouseMove={handleDrag}>
+      <SliderContainer>
+        <SliderBox
+          $proportion={value}
+          onClick={(e: React.MouseEvent) => {
+            e.stopPropagation();
+          }}
+        />
+      </SliderContainer>
+    </SliderWrapper>
+  );
+}
diff --git a/website/src/mgba.tsx b/website/src/mgba.tsx
index e0c1e064..392f4cf2 100644
--- a/website/src/mgba.tsx
+++ b/website/src/mgba.tsx
@@ -57,7 +57,6 @@ export const Mgba = forwardRef<MgbaHandle, MgbaProps>(
         mgbaModule.current.FS.writeFile(gamePath, new Uint8Array(gameData));
         mgbaModule.current.loadGame(gamePath);
         mgbaModule.current.setVolume(0.1); // for some reason you have to do this or you get no sound
-        console.log(mgbaModule.current.getVolume());
         setGameLoaded(true);
       })();
     }, [state, gameUrl]);
@@ -113,9 +112,7 @@ export const Mgba = forwardRef<MgbaHandle, MgbaProps>(
 
     useEffect(() => {
       if (!gameLoaded) return;
-      console.log("before", mgbaModule.current.getVolume());
       mgbaModule.current.setVolume(volume ?? 1.0);
-      console.log("after", mgbaModule.current.getVolume());
     }, [gameLoaded, volume]);
 
     useEffect(() => {