From 85159b228f94c4bd07c76805fe58f49cef249d48 Mon Sep 17 00:00:00 2001
From: NewHappyRabbit <31893343+NewHappyRabbit@users.noreply.github.com>
Date: Tue, 11 Feb 2025 01:46:36 +0200
Subject: [PATCH] Fixed the range sliders for Troops and Attack ratio to not go
 outside of the input container at 100%. Removed the custom thumb (ball)
 element and just styled it using CSS.

---
 src/client/graphics/layers/ControlPanel.ts | 53 +++++++++++++++++-----
 1 file changed, 41 insertions(+), 12 deletions(-)

diff --git a/src/client/graphics/layers/ControlPanel.ts b/src/client/graphics/layers/ControlPanel.ts
index 144a2830e..aabde5bb6 100644
--- a/src/client/graphics/layers/ControlPanel.ts
+++ b/src/client/graphics/layers/ControlPanel.ts
@@ -112,6 +112,45 @@ export class ControlPanel extends LitElement implements Layer {
 
   render() {
     return html`
+      <style>
+        input[type="range"] {
+          -webkit-appearance: none;
+          background: transparent;
+          outline: none;
+        }
+        input[type="range"]::-webkit-slider-thumb {
+          -webkit-appearance: none;
+          appearance: none;
+          width: 16px;
+          height: 16px;
+          background: white;
+          border-width: 2px;
+          border-style: solid;
+          border-radius: 50%;
+          cursor: pointer;
+        }
+        input[type="range"]::-moz-range-thumb {
+          width: 16px;
+          height: 16px;
+          background: white;
+          border-width: 2px;
+          border-style: solid;
+          border-radius: 50%;
+          cursor: pointer;
+        }
+        .targetTroopRatio::-webkit-slider-thumb {
+          border-color: rgb(59 130 246);
+        }
+        .targetTroopRatio::-moz-range-thumb {
+          border-color: rgb(59 130 246);
+        }
+        .attackRatio::-webkit-slider-thumb {
+          border-color: rgb(239 68 68);
+        }
+        .attackRatio::-moz-range-thumb {
+          border-color: rgb(239 68 68);
+        }
+      </style>
       <div
         class="${this._isVisible
           ? "w-full text-sm lg:text-m lg:w-72 bg-gray-800/70 p-2 pr-3 lg:p-4 shadow-lg rounded-lg backdrop-blur"
@@ -162,13 +201,8 @@ export class ControlPanel extends LitElement implements Layer {
                   parseInt((e.target as HTMLInputElement).value) / 100;
                 this.onTroopChange(this.targetTroopRatio);
               }}
-              class="absolute left-0 right-0 top-2 m-0 h-4 opacity-0 cursor-pointer"
+              class="absolute left-0 right-0 top-2 m-0 h-4 cursor-pointer targetTroopRatio"
             />
-            <!-- Handle -->
-            <div
-              class="absolute top-2 w-4 h-4 bg-white border-2 border-blue-500 rounded-full -ml-2 cursor-pointer hover:scale-110 transition-transform pointer-events-none"
-              style="left: ${this.targetTroopRatio * 100}%"
-            ></div>
           </div>
         </div>
 
@@ -197,13 +231,8 @@ export class ControlPanel extends LitElement implements Layer {
                   parseInt((e.target as HTMLInputElement).value) / 100;
                 this.onAttackRatioChange(this.attackRatio);
               }}
-              class="absolute left-0 right-0 top-2 m-0 h-4 opacity-0 cursor-pointer"
+              class="absolute left-0 right-0 top-2 m-0 h-4 cursor-pointer attackRatio"
             />
-            <!-- Handle -->
-            <div
-              class="absolute top-2 w-4 h-4 bg-white border-2 border-red-500 rounded-full -ml-2 cursor-pointer hover:scale-110 transition-transform pointer-events-none"
-              style="left: ${this.attackRatio * 100}%"
-            ></div>
           </div>
         </div>
       </div>