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 ( -