90 lines
2.8 KiB
TypeScript
90 lines
2.8 KiB
TypeScript
import type { ReactNode } from "react";
|
|
import { Switch } from "../../components/Switch";
|
|
import { useWSMutation, useWSQuery } from "../../hooks";
|
|
|
|
interface BoolSettingProps {
|
|
label: string;
|
|
description: ReactNode;
|
|
value: boolean;
|
|
onChange: (value: boolean) => void;
|
|
}
|
|
|
|
const BoolSetting: React.FC<BoolSettingProps> = ({
|
|
label,
|
|
description,
|
|
value,
|
|
onChange,
|
|
}) => (
|
|
<div className="flex border-white/20 border-1 text-white/80 p-4 rounded-md justify-between items-end">
|
|
<div className="flex gap-4 flex-col">
|
|
<label className="text-white/90 text-lg">{label}</label>
|
|
<p className="text-white/70 text-sm">{description}</p>
|
|
</div>
|
|
<Switch checked={value} onCheckedChange={onChange} />
|
|
</div>
|
|
);
|
|
|
|
const Settings = () => {
|
|
const { data: settings, refetch } = useWSQuery("user.getSettings", null);
|
|
const updateSettings = useWSMutation("user.updateSettings");
|
|
|
|
return (
|
|
<div className="w-full">
|
|
<div className="max-w-[650px] mx-auto flex flex-col gap-8">
|
|
<h2 className="text-white/90 text-xl">Settings</h2>
|
|
<div className="flex flex-col gap-4 ">
|
|
<BoolSetting
|
|
label="Place Question Mark"
|
|
description={
|
|
<>
|
|
You can place a question mark on a tile after placing a flag.
|
|
<br />
|
|
Just right click again on the tile.
|
|
</>
|
|
}
|
|
value={settings?.placeQuestionMark ?? false}
|
|
onChange={async (value) => {
|
|
await updateSettings.mutateAsync({ placeQuestionMark: value });
|
|
refetch();
|
|
}}
|
|
/>
|
|
<BoolSetting
|
|
label="Long Press On Desktop"
|
|
description={
|
|
<>
|
|
You can long press on a tile to reveal it. This is useful for
|
|
touch devices.
|
|
</>
|
|
}
|
|
value={settings?.longPressOnDesktop ?? false}
|
|
onChange={async (value) => {
|
|
await updateSettings.mutateAsync({ longPressOnDesktop: value });
|
|
refetch();
|
|
}}
|
|
/>
|
|
<BoolSetting
|
|
label="Show Reveal Animation"
|
|
description={<>Show an animation when a tile is revealed.</>}
|
|
value={settings?.showRevealAnimation ?? true}
|
|
onChange={async (value) => {
|
|
await updateSettings.mutateAsync({ showRevealAnimation: value });
|
|
refetch();
|
|
}}
|
|
/>
|
|
<BoolSetting
|
|
label="Sound Effects"
|
|
description={<>Enable or disable sound effects in the game.</>}
|
|
value={settings?.soundEnabled ?? true}
|
|
onChange={async (value) => {
|
|
await updateSettings.mutateAsync({ soundEnabled: value });
|
|
refetch();
|
|
}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Settings;
|