76 lines
2.7 KiB
TypeScript
76 lines
2.7 KiB
TypeScript
import Setting, { GameSettings } from "./Setting"
|
|
import { faRotateLeft } from "@fortawesome/pro-regular-svg-icons"
|
|
import { faXmark } from "@fortawesome/pro-solid-svg-icons"
|
|
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
|
|
import { useGameProps } from "@hooks/useGameProps"
|
|
import { socket } from "@lib/socket"
|
|
import { useCallback } from "react"
|
|
|
|
function Settings({ closeSettings }: { closeSettings: () => void }) {
|
|
const { setSetting, full } = useGameProps()
|
|
|
|
const gameSetting = useCallback(
|
|
(payload: GameSettings) => {
|
|
const hash = setSetting(payload)
|
|
socket.emit("gameSetting", payload, (newHash) => {
|
|
if (newHash === hash) return
|
|
console.log("hash", hash, newHash)
|
|
socket.emit("update", full)
|
|
})
|
|
},
|
|
[full, setSetting]
|
|
)
|
|
|
|
return (
|
|
<div className="absolute inset-0 flex flex-col items-center justify-center bg-black/40">
|
|
<div className="w-full max-w-screen-lg">
|
|
<div className="mx-16 flex flex-col rounded-3xl border-4 border-slate-800 bg-zinc-500 p-8">
|
|
<div className="flex items-center justify-center">
|
|
<h1 className="font-farro ml-auto pl-14 text-center text-6xl font-semibold text-white shadow-black drop-shadow-lg">
|
|
Settings
|
|
</h1>
|
|
<button
|
|
className="right-6 top-6 ml-auto h-14 w-14"
|
|
onClick={closeSettings}
|
|
>
|
|
<FontAwesomeIcon
|
|
className="h-full w-full text-gray-800 drop-shadow-md"
|
|
size="3x"
|
|
icon={faXmark}
|
|
/>
|
|
</button>
|
|
</div>
|
|
<div className="mt-8 rounded-xl bg-zinc-600 p-8">
|
|
<div className="flex items-center justify-end">
|
|
<button
|
|
className="right-12 top-8 h-14 w-14"
|
|
onClick={() =>
|
|
gameSetting({
|
|
allowSpectators: true,
|
|
allowSpecials: true,
|
|
allowChat: true,
|
|
allowMarkDraw: true,
|
|
})
|
|
}
|
|
>
|
|
<FontAwesomeIcon
|
|
className="h-full w-full text-gray-800 drop-shadow-md"
|
|
size="3x"
|
|
icon={faRotateLeft}
|
|
/>
|
|
</button>
|
|
</div>
|
|
<div className="flex flex-col gap-8">
|
|
<Setting prop="allowSpectators">Erlaube Zuschauer</Setting>
|
|
<Setting prop="allowSpecials">Erlaube spezial Items</Setting>
|
|
<Setting prop="allowChat">Erlaube den Chat</Setting>
|
|
<Setting prop="allowMarkDraw">Erlaube zeichen/makieren</Setting>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default Settings
|