Working real time lobby

leaky-ships/components/Lobby/SettingsFrame/Setting.tsx

@@ -4,10 +4,8 @@ import {
 } 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"
@@ -17,24 +15,14 @@ type GameSettingKeys =
 
 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({
   children,
-  prop,
+  props: { prop, gameSetting },
 }: {
   children: ReactNode
-  prop: GameSettingKeys
+  props: { prop: GameSettingKeys; gameSetting: (payload: GameSettings) => void }
 }) {
-  const { payload, setSetting } = useGameProps()
+  const { payload } = useGameProps()
   const state = useMemo(() => payload?.game?.[prop], [payload?.game, prop])
 
   return (
@@ -62,8 +50,6 @@ function Setting({
           const payload = {
             [prop]: !state,
           }
-
-          setSetting(payload)
           gameSetting(payload)
         }}
         hidden={true}