Fully working ship placement

leaky-ships/hooks/useGameProps.ts

@@ -2,13 +2,19 @@ import {
   ActionDispatchProps,
   EventBarModes,
   Hit,
+  MouseCursor,
   ShipProps,
   Target,
+  TargetPreview,
 } from "../interfaces/frontend"
 import { GameSettings } from "@components/Lobby/SettingsFrame/Setting"
 import { getPayloadwithChecksum } from "@lib/getPayloadwithChecksum"
 import { socket } from "@lib/socket"
-import { initlialTarget, initlialTargetPreview } from "@lib/utils/helpers"
+import {
+  initlialMouseCursor,
+  initlialTarget,
+  initlialTargetPreview,
+} from "@lib/utils/helpers"
 import {
   GamePropsSchema,
   optionalGamePropsSchema,
@@ -30,7 +36,8 @@ const initialState: optionalGamePropsSchema & {
   ships: ShipProps[]
   hits: Hit[]
   target: Target
-  targetPreview: Target
+  targetPreview: TargetPreview
+  mouseCursor: MouseCursor
 } = {
   menu: "actions",
   mode: 0,
@@ -40,6 +47,7 @@ const initialState: optionalGamePropsSchema & {
   hits: [],
   target: initlialTarget,
   targetPreview: initlialTargetPreview,
+  mouseCursor: initlialMouseCursor,
   userStates: Array.from(Array(2), () => ({
     isReady: false,
     isConnected: false,
@@ -51,7 +59,8 @@ export type State = typeof initialState
 export type Action = {
   DispatchAction: (props: ActionDispatchProps) => void
   setTarget: (target: SetStateAction<Target>) => void
-  setTargetPreview: (targetPreview: SetStateAction<Target>) => void
+  setTargetPreview: (targetPreview: SetStateAction<TargetPreview>) => void
+  setMouseCursor: (mouseCursor: SetStateAction<MouseCursor>) => void
   setPlayer: (payload: { users: PlayerSchema[] }) => string | null
   setSetting: (settings: GameSettings) => string | null
   full: (newProps: GamePropsSchema) => void
@@ -80,20 +89,28 @@ export const useGameProps = create<State & Action>()(
             // }
           })
         ),
-      setTarget: (target) =>
+      setTarget: (dispatch) =>
         set(
           produce((state: State) => {
-            if (typeof target === "function")
-              state.target = target(state.target)
-            else state.target = target
+            if (typeof dispatch === "function")
+              state.target = dispatch(state.target)
+            else state.target = dispatch
           })
         ),
-      setTargetPreview: (targetPreview) =>
+      setTargetPreview: (dispatch) =>
         set(
           produce((state: State) => {
-            if (typeof targetPreview === "function")
-              state.targetPreview = targetPreview(state.target)
-            else state.targetPreview = targetPreview
+            if (typeof dispatch === "function")
+              state.targetPreview = dispatch(state.targetPreview)
+            else state.targetPreview = dispatch
+          })
+        ),
+      setMouseCursor: (dispatch) =>
+        set(
+          produce((state: State) => {
+            if (typeof dispatch === "function")
+              state.mouseCursor = dispatch(state.mouseCursor)
+            else state.mouseCursor = dispatch
           })
         ),
       addShip: (props) =>