diff --git a/leaky-ships/components/Gamefield/Gamefield.tsx b/leaky-ships/components/Gamefield/Gamefield.tsx
index 39ab1de..10ccee5 100644
--- a/leaky-ships/components/Gamefield/Gamefield.tsx
+++ b/leaky-ships/components/Gamefield/Gamefield.tsx
@@ -2,7 +2,7 @@
// import FogImages from './FogImages'
import Labeling from "./Labeling"
import Ships from "./Ships"
-import useGameEvent from "@lib/hooks/useGameEvent"
+import useGameEvent from "@hooks/useGameEvent"
import { CSSProperties } from "react"
function Gamefield() {
diff --git a/leaky-ships/components/Lobby/LobbyFrame.tsx b/leaky-ships/components/Lobby/LobbyFrame.tsx
index 8ca7d0f..b5e651d 100644
--- a/leaky-ships/components/Lobby/LobbyFrame.tsx
+++ b/leaky-ships/components/Lobby/LobbyFrame.tsx
@@ -2,32 +2,17 @@ import Icon from "./Icon"
import Player from "./Player"
import { faSpinnerThird } from "@fortawesome/pro-solid-svg-icons"
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
-import useGameState from "@lib/hooks/useGameState"
-import useSocket from "@lib/hooks/useSocket"
+import { useGameProps } from "@hooks/useGameProps"
+import useSocket from "@hooks/useSocket"
import { useRouter } from "next/router"
import { Fragment, useEffect, useState } from "react"
-import { toast } from "react-toastify"
function LobbyFrame({ openSettings }: { openSettings: () => void }) {
- const { payload } = useGameState().gameProps
- const { isConnected, hasJoined } = useSocket()
+ const { payload } = useGameProps()
const [dots, setDots] = useState(3)
+ const { isConnected } = useSocket()
const router = useRouter()
- useEffect(() => {
- if (isConnected && hasJoined) return
- const timeout = setTimeout(() => {
- toast("Es konnte keine Echtzeitverbindung aufgebaute werden.", {
- toastId: "connection_error",
- type: "error",
- autoClose: 10000,
- })
- router.push("/start")
- }, 15000)
-
- return () => clearTimeout(timeout)
- }, [])
-
useEffect(() => {
if (payload?.player2) return
const interval = setInterval(() => setDots((e) => (e % 3) + 1), 1000)
@@ -41,7 +26,7 @@ function LobbyFrame({ openSettings }: { openSettings: () => void }) {
Game-PIN:{" "}
{isConnected ? (
- {payload?.gamePin?.pin ?? "---"}
+ {payload?.gamePin ?? "----"}
) : (
)}
@@ -65,7 +50,7 @@ function LobbyFrame({ openSettings }: { openSettings: () => void }) {
/>
) : (
- Warte auf {isConnected && hasJoined ? "Spieler 2" : "Verbindung"}{" "}
+ Warte auf {isConnected ? "Spieler 2" : "Verbindung"}{" "}
{Array.from(Array(dots), () => ".").join("")}
{Array.from(Array(3 - dots), (_, i) => (
@@ -74,7 +59,10 @@ function LobbyFrame({ openSettings }: { openSettings: () => void }) {
)}
-
diff --git a/leaky-ships/components/Lobby/SettingsFrame/Setting.tsx b/leaky-ships/components/Lobby/SettingsFrame/Setting.tsx
index b3756e2..289a22c 100644
--- a/leaky-ships/components/Lobby/SettingsFrame/Setting.tsx
+++ b/leaky-ships/components/Lobby/SettingsFrame/Setting.tsx
@@ -3,38 +3,69 @@ import {
faToggleLargeOn,
} from "@fortawesome/pro-solid-svg-icons"
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
+import { useGameProps } from "@hooks/useGameProps"
+import { socket } from "@lib/socket"
import classNames from "classnames"
+import { ReactNode, useMemo } from "react"
+import { toast } from "react-toastify"
+
+type GameSettingKeys =
+ | "allowSpectators"
+ | "allowSpecials"
+ | "allowChat"
+ | "allowMarkDraw"
+
+export type GameSettings = { [key in GameSettingKeys]?: boolean }
+
+export const gameSetting = (payload: GameSettings) => {
+ socket.emit("gameSetting", payload, ({ ack }) => {
+ if (ack) return
+ toast.warn("Something is wrong... ", {
+ toastId: "st_wrong",
+ theme: "colored",
+ })
+ })
+}
function Setting({
- props: { key, state, onClick },
+ children,
+ prop,
}: {
- props: {
- key: string
- state: boolean
- onClick: () => void
- }
+ children: ReactNode
+ prop: GameSettingKeys
}) {
+ const { payload, setSetting } = useGameProps()
+ const state = useMemo(() => payload?.game?.[prop], [payload?.game, prop])
+
return (
-