From 7a581749a9fb7fcd4487edbe3d8b7f03264bcb6e Mon Sep 17 00:00:00 2001
From: Mathias Wagner <germannewsmaker@gmail.com>
Date: Fri, 28 Feb 2025 18:09:48 +0100
Subject: [PATCH] Improve UX

---
 client/src/pages/Home/Home.jsx    | 36 +++++++++++++++++++++++--------
 client/src/pages/Home/styles.sass |  3 ++-
 2 files changed, 29 insertions(+), 10 deletions(-)

diff --git a/client/src/pages/Home/Home.jsx b/client/src/pages/Home/Home.jsx
index e732f61..65bd04d 100644
--- a/client/src/pages/Home/Home.jsx
+++ b/client/src/pages/Home/Home.jsx
@@ -59,14 +59,35 @@ export const Home = () => {
     };
 
     const handleFrequencyChange = (e) => {
-        if (isPlaying || dragging) {
-            const rect = sliderRef.current.getBoundingClientRect();
-            const x = e.clientX - rect.left; // x position within the element.
-            const newFrequency = 20 + (x / rect.width) * 1980; // Scale to frequency range
-            setFrequency(newFrequency);
-        }
+        const rect = sliderRef.current.getBoundingClientRect();
+        const x = e.clientX - rect.left;
+        const clampedX = Math.max(0, Math.min(x, rect.width));
+        const newFrequency = 20 + (clampedX / rect.width) * 1980;
+        setFrequency(newFrequency);
     };
 
+    useEffect(() => {
+        const handleMouseMove = (e) => {
+            if (dragging) {
+                handleFrequencyChange(e);
+            }
+        };
+
+        const handleMouseUpGlobal = () => {
+            if (dragging) {
+                handleMouseUp();
+            }
+        };
+
+        document.addEventListener('mousemove', handleMouseMove);
+        document.addEventListener('mouseup', handleMouseUpGlobal);
+
+        return () => {
+            document.removeEventListener('mousemove', handleMouseMove);
+            document.removeEventListener('mouseup', handleMouseUpGlobal);
+        };
+    }, [dragging]);
+
     useEffect(() => {
         if (isPlaying) {
             if (oscillatorRef.current) {
@@ -134,9 +155,6 @@ export const Home = () => {
                 <div
                     className="otamatone"
                     onMouseDown={handleMouseDown}
-                    onMouseUp={handleMouseUp}
-                    onMouseMove={handleFrequencyChange}
-                    onMouseLeave={handleMouseUp}
                 >
                     <div className="otamatone-neck" ref={sliderRef}>
                         <div className="frequency-indicator" style={{ left: `${(frequency - 20) / 1980 * 100}%` }}></div>
diff --git a/client/src/pages/Home/styles.sass b/client/src/pages/Home/styles.sass
index 3c42f9e..edc0050 100644
--- a/client/src/pages/Home/styles.sass
+++ b/client/src/pages/Home/styles.sass
@@ -228,7 +228,8 @@
     flex-direction: column
     align-items: center
     justify-content: center
-    position: relative
+    position: absolute
+    left: 0
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2)
 
   .otamatone-eyes