alois/OpenFrontIO
1
0
Fork 0
mirror of https://github.com/openfrontio/OpenFrontIO.git synced 2026-06-21 13:20:43 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fixed the range sliders for Troops and Attack ratio to not go outside of the input container at 100%.

Browse Source 
Removed the custom thumb (ball) element and just styled it using CSS.
This commit is contained in:
NewHappyRabbit
2025-02-11 01:46:36 +02:00
parent 9b01f2bb9a
commit 85159b228f
1 changed files with 41 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/client/graphics/layers/ControlPanel.ts
+41 -12
View File
@@ -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>