86 lines
3.0 KiB
TypeScript
86 lines
3.0 KiB
TypeScript
import { Slider, Label, Typography, Input } from "@heroui/react";
|
|
import {
|
|
useEffect,
|
|
type ChangeEvent,
|
|
type Dispatch,
|
|
type SetStateAction,
|
|
} from "react";
|
|
import { AgentInfo, WeaponInfo } from "~/types/skin";
|
|
|
|
export function Float({
|
|
skin,
|
|
setSkin,
|
|
acceptInput = false,
|
|
hasLabel = false,
|
|
}: {
|
|
skin: WeaponInfo;
|
|
setSkin: Dispatch<SetStateAction<WeaponInfo | AgentInfo>>;
|
|
minFloat?: number;
|
|
maxFloat?: number;
|
|
acceptInput?: boolean;
|
|
hasLabel?: boolean;
|
|
}) {
|
|
useEffect(() => {
|
|
const newSkin = new WeaponInfo(skin);
|
|
newSkin.float = Math.max(
|
|
skin.min_float,
|
|
Math.min(skin.max_float, skin.float),
|
|
);
|
|
setSkin(newSkin);
|
|
}, [skin.min_float, skin.max_float]);
|
|
|
|
const handleChange = (newValue: number | number[]) => {
|
|
const val = Array.isArray(newValue) ? newValue[0] : newValue;
|
|
const newSkin = new WeaponInfo(skin);
|
|
newSkin.float = Math.max(skin.min_float, Math.min(skin.max_float, val));
|
|
setSkin(newSkin);
|
|
};
|
|
|
|
const handleInputChange = (event: ChangeEvent<HTMLInputElement>) => {
|
|
const val = event.currentTarget.valueAsNumber;
|
|
const newSkin = new WeaponInfo(skin);
|
|
newSkin.float = Math.max(skin.min_float, Math.min(skin.max_float, val));
|
|
setSkin(newSkin);
|
|
};
|
|
|
|
return (
|
|
<>
|
|
{hasLabel && (
|
|
<div className="flex items-center gap-2">
|
|
<Typography.Paragraph>Float</Typography.Paragraph>
|
|
<Input
|
|
className="flex-1"
|
|
id="float"
|
|
type="number"
|
|
step={0.0001}
|
|
value={skin.float}
|
|
onChange={handleInputChange}
|
|
/>
|
|
</div>
|
|
)}
|
|
<Slider
|
|
value={skin.float}
|
|
maxValue={1}
|
|
step={0.0001}
|
|
onChange={handleChange}
|
|
>
|
|
<Slider.Track
|
|
className="border-0 h-2 rounded-xl"
|
|
style={{
|
|
background:
|
|
"linear-gradient(90deg, var(--color-green-800) 7%, var(--color-green-500) 7%, var(--color-green-500) 15%, var(--color-lime-400) 15%, var(--color-lime-400) 38%, var(--color-orange-400) 38%, var(--color-orange-400) 38%, var(--color-orange-400) 45%, var(--color-red-400) 45%",
|
|
}}
|
|
>
|
|
<div
|
|
className="h-full rounded-xl"
|
|
style={{
|
|
background: `linear-gradient(90deg, rgba(0, 0, 0, 0.8) ${skin.min_float * 100}%, transparent ${skin.min_float * 100}%, transparent ${skin.max_float * 100}%, rgba(0, 0, 0, 0.8) ${skin.max_float * 100}%)`,
|
|
}}
|
|
/>
|
|
<Slider.Thumb className="w-1" isDisabled={!acceptInput} />
|
|
</Slider.Track>
|
|
</Slider>
|
|
</>
|
|
);
|
|
}
|