61 lines
1.6 KiB
TypeScript
61 lines
1.6 KiB
TypeScript
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"
|
|
|
|
type GameSettingKeys =
|
|
| "allowSpectators"
|
|
| "allowSpecials"
|
|
| "allowChat"
|
|
| "allowMarkDraw"
|
|
|
|
export type GameSettings = { [key in GameSettingKeys]?: boolean }
|
|
|
|
function Setting({
|
|
children,
|
|
props: { prop, gameSetting },
|
|
}: {
|
|
children: ReactNode
|
|
props: { prop: GameSettingKeys; gameSetting: (payload: GameSettings) => void }
|
|
}) {
|
|
const { payload } = 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={() => {
|
|
const payload = {
|
|
[prop]: !state,
|
|
}
|
|
gameSetting(payload)
|
|
}}
|
|
hidden={true}
|
|
/>
|
|
</label>
|
|
)
|
|
}
|
|
|
|
export default Setting
|