58 lines
1.5 KiB
TypeScript
58 lines
1.5 KiB
TypeScript
import { setGameSetting } from "@components/Gamefield/EventBar"
|
|
import {
|
|
faToggleLargeOff,
|
|
faToggleLargeOn,
|
|
} from "@fortawesome/pro-solid-svg-icons"
|
|
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
|
|
import { useGameProps } from "@hooks/useGameProps"
|
|
import classNames from "classnames"
|
|
import { ReactNode, useMemo } from "react"
|
|
import { GameSettingKeys } from "../../../interfaces/frontend"
|
|
|
|
function Setting({
|
|
children,
|
|
prop,
|
|
}: {
|
|
children: ReactNode
|
|
prop: GameSettingKeys
|
|
}) {
|
|
const { payload, setSetting, full } = useGameProps()
|
|
const state = useMemo(() => payload?.game?.[prop], [payload?.game, prop])
|
|
|
|
return (
|
|
<label className="flex items-center justify-between" htmlFor={prop}>
|
|
<span className="col-span-2 w-96 select-none text-5xl text-white drop-shadow-md">
|
|
{children}
|
|
</span>
|
|
<FontAwesomeIcon
|
|
className={classNames(
|
|
"text-md mx-auto rounded-full px-4 drop-shadow-md transition-all",
|
|
state ? "text-blue-500" : "text-gray-800",
|
|
{
|
|
"bg-gray-300 ": state,
|
|
},
|
|
)}
|
|
size="3x"
|
|
icon={state ? faToggleLargeOn : faToggleLargeOff}
|
|
/>
|
|
<input
|
|
className="bg-none"
|
|
checked={state}
|
|
type="checkbox"
|
|
id={prop}
|
|
onChange={() =>
|
|
setGameSetting(
|
|
{
|
|
[prop]: !state,
|
|
},
|
|
setSetting,
|
|
full,
|
|
)
|
|
}
|
|
hidden={true}
|
|
/>
|
|
</label>
|
|
)
|
|
}
|
|
|
|
export default Setting
|