Compare commits

..

2 Commits

Author SHA1 Message Date
f454bb48f9 Make scrolling less spammy 2024-12-29 00:41:03 +01:00
0bb13f635a Make scoll brightness 2024-12-29 00:36:29 +01:00

View File

@@ -7,20 +7,40 @@
function handleBrightnessChange(event: Event) {
clearTimeout(timer);
timer = setTimeout(() => {
brightness = Number(event.target?.value);
const input = event.target as HTMLInputElement;
brightness = Number(input.value);
brightnessChange(lamp, brightness);
}, 300);
}
function handleWheel(event: WheelEvent) {
event.preventDefault();
const delta = event.deltaY > 0 ? -4 : 4;
const newBrightness = Math.max(0, Math.min(100, brightness + delta));
if (newBrightness !== brightness) {
brightness = newBrightness;
clearTimeout(timer);
timer = setTimeout(() => {
brightnessChange(lamp, brightness);
}, 300);
}
}
</script>
<div class="flex flex-col items-center justify-center p-4">
<div
class="w-48 h-48 rounded-full overflow-hidden mb-4"
style="background-color: #FFD700; filter: brightness({brightness}%)"
>
<svg class="w-48 h-48 fill-current text-yellow-800" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M12 2L2 22h20Z" />
</svg>
<div class="relative">
<div
class="w-48 h-48 rounded-full overflow-hidden mb-4"
style="background-color: #FFD700; filter: brightness({brightness}%)"
on:wheel={handleWheel}
>
<svg class="w-48 h-48 fill-current text-yellow-800" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M12 2L2 22h20Z" />
</svg>
</div>
<div class="absolute -bottom-2 left-1/2 transform -translate-x-1/2 bg-gray-800 text-white px-3 py-1 rounded-full text-sm font-semibold">
{Math.round(brightness)}%
</div>
</div>
<input type="range" min="0" max="100" step="1" value={brightness} on:input={handleBrightnessChange} class="w-4/5" />
<input type="range" min="0" max="100" step="1" value={brightness} on:input={handleBrightnessChange} class="w-4/5 mt-4" />
</div>