Merge pull request #19 from cesaregarza/bugfix/weapon-leaderboards

Bugfix/weapon leaderboards
cesaregarza · Sep 7, 2024 · 807378d · 807378d
2 parents 79963b1 + 36e6b66
commit 807378d
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 39 deletions.
diff --git a/src/react_app/src/components/leaderboards_components/threshold_selector.jsx b/src/react_app/src/components/leaderboards_components/threshold_selector.jsx
@@ -15,10 +15,22 @@ const ThresholdSelector = ({ threshold, setThreshold }) => {
   const handleMouseDown = (event) => {
     event.preventDefault();
     setIsDragging(true);
+    updateValueFromEvent(event);
   };
 
   const handleMouseMove = (event) => {
-    if (isDragging && containerRef.current && circleRef.current) {
+    if (isDragging) {
+      updateValueFromEvent(event);
+    }
+  };
+
+  const handleMouseUp = () => {
+    setIsDragging(false);
+    setThreshold(dragValue);
+  };
+
+  const updateValueFromEvent = (event) => {
+    if (containerRef.current) {
       const containerRect = containerRef.current.getBoundingClientRect();
       const newX = event.clientX - containerRect.left;
       const containerWidth = containerRect.width;
@@ -28,11 +40,6 @@ const ThresholdSelector = ({ threshold, setThreshold }) => {
     }
   };
 
-  const handleMouseUp = () => {
-    setIsDragging(false);
-    setThreshold(dragValue);
-  };
-
   useEffect(() => {
     if (isDragging) {
       window.addEventListener("mousemove", handleMouseMove);
@@ -48,10 +55,22 @@ const ThresholdSelector = ({ threshold, setThreshold }) => {
   const handleTouchStart = (event) => {
     event.preventDefault();
     setIsDragging(true);
+    updateValueFromTouchEvent(event);
   };
 
   const handleTouchMove = (event) => {
-    if (isDragging && containerRef.current && circleRef.current) {
+    if (isDragging) {
+      updateValueFromTouchEvent(event);
+    }
+  };
+
+  const handleTouchEnd = () => {
+    setIsDragging(false);
+    setThreshold(dragValue);
+  };
+
+  const updateValueFromTouchEvent = (event) => {
+    if (containerRef.current) {
       const containerRect = containerRef.current.getBoundingClientRect();
       const newX = event.touches[0].clientX - containerRect.left;
       const containerWidth = containerRect.width;
@@ -61,11 +80,6 @@ const ThresholdSelector = ({ threshold, setThreshold }) => {
     }
   };
 
-  const handleTouchEnd = () => {
-    setIsDragging(false);
-    setThreshold(dragValue);
-  };
-
   useEffect(() => {
     if (isDragging) {
       window.addEventListener("touchmove", handleTouchMove);
@@ -85,7 +99,12 @@ const ThresholdSelector = ({ threshold, setThreshold }) => {
       >
         {t("threshold_select")}
       </label>
-      <div className="relative h-8" ref={containerRef}>
+      <div 
+        className="relative h-8" 
+        ref={containerRef}
+        onMouseDown={handleMouseDown}
+        onTouchStart={handleTouchStart}
+      >
         <div className="absolute top-1/2 -translate-y-1/2 left-0 right-0 h-1 bg-gray-700 rounded-full">
           <div
             className="absolute top-0 left-0 h-full bg-purple rounded-full"
@@ -95,9 +114,7 @@ const ThresholdSelector = ({ threshold, setThreshold }) => {
         <div
           ref={circleRef}
           className="absolute top-1/2 -translate-y-1/2 w-4 h-4 bg-purple rounded-full shadow-lg cursor-pointer flex items-center justify-center"
-          style={{ left: `calc(${dragValue / 10}% - 16px)` }}
-          onMouseDown={handleMouseDown}
-          onTouchStart={handleTouchStart}
+          style={{ left: `calc(${dragValue / 10}% - 8px)` }}
         >
           <div className="w-3 h-3 bg-purple rounded-full" />
         </div>

diff --git a/src/react_app/src/components/leaderboards_components/weapon_controls.jsx b/src/react_app/src/components/leaderboards_components/weapon_controls.jsx
@@ -112,21 +112,23 @@ const WeaponLeaderboardControls = ({
           </>
         )}
       </div>
-      <ThresholdSelector threshold={threshold} setThreshold={setThreshold} />
+      <div className="w-full max-w-[95%] mx-auto">
+        <ThresholdSelector threshold={threshold} setThreshold={setThreshold} />
+      </div>
       <div className="flex flex-col justify-center items-center mb-4 sm:mb-6">
         <label
           htmlFor="toggleFinalResults"
           className="inline-flex items-center cursor-pointer flex-col"
         >
-          <div className="flex items-center">
+          <div className="flex items-center justify-center">
             <span
-              className={`text-sm font-medium mr-2 ${
+              className={`text-sm font-medium w-40 text-right pr-4 ${
                 !finalResults ? "highlighted-option" : ""
               }`}
             >
               {t("weapon_leaderboard.peak_x_power")}
             </span>
-            <div className="relative" title="Change the scale type">
+            <div className="relative mx-2" title="Change the scale type">
               <input
                 type="checkbox"
                 id="toggleFinalResults"
@@ -141,7 +143,7 @@ const WeaponLeaderboardControls = ({
               ></div>
             </div>
             <span
-              className={`text-sm font-medium ml-2 ${
+              className={`text-sm font-medium w-40 text-left pl-4 ${
                 finalResults ? "highlighted-option" : ""
               }`}
             >

diff --git a/src/react_app/src/components/weapon_leaderboard.jsx b/src/react_app/src/components/weapon_leaderboard.jsx
@@ -141,28 +141,29 @@ const TopWeaponsContent = () => {
     error: weaponDataError,
   } = useWeaponAndTranslation();
 
-  const [selectedRegion, setSelectedRegion] = useState(
-    () => getCache("weapons.selectedRegion") || "Tentatek"
-  );
-  const [selectedMode, setSelectedMode] = useState(
-    () => getCache("weapons.selectedMode") || "Splat Zones"
-  );
-  const [weaponId, setWeaponId] = useState(
-    () => parseInt(getCache("weapons.weaponId")) || 40
-  );
+  const [selectedRegion, setSelectedRegion] = useState(() => {
+    return getCache("weapons.selectedRegion") || "Tentatek";
+  });
+  const [selectedMode, setSelectedMode] = useState(() => {
+    return getCache("weapons.selectedMode") || "Splat Zones";
+  });
+  const [weaponId, setWeaponId] = useState(() => {
+    const cachedWeaponId = getCache("weapons.weaponId");
+    return cachedWeaponId !== null ? parseInt(cachedWeaponId) : 40;
+  });
   const [additionalWeaponId, setAdditionalWeaponId] = useState(() => {
     const cached = getCache("weapons.additionalWeaponId");
     return cached ? parseInt(cached) : null;
   });
-  const [threshold, setThreshold] = useState(
-    () => parseInt(getCache("weapons.threshold")) || 0
-  );
-  const [currentPage, setCurrentPage] = useState(
-    () => parseInt(getCache("weapons.currentPage")) || 1
-  );
-  const [finalResults, setFinalResults] = useState(
-    () => getCache("weapons.finalResults") === "true"
-  );
+  const [threshold, setThreshold] = useState(() => {
+    return parseInt(getCache("weapons.threshold")) || 0;
+  });
+  const [currentPage, setCurrentPage] = useState(() => {
+    return parseInt(getCache("weapons.currentPage")) || 1;
+  });
+  const [finalResults, setFinalResults] = useState(() => {
+    return getCache("weapons.finalResults") === "true";
+  });
   const itemsPerPage = 100;
 
   useEffect(() => {