Rename client/Store.ts to client/store.ts

packages/client/src/3d/Controls.tsx

@@ -1,12 +1,11 @@
 import React, { useEffect, useRef } from 'react'
 import { PointerLockControls } from '@react-three/drei'
 
-import api from '../Store'
+import api from '../store'
 
 const Controls: React.FC = () => {
   const ref = useRef<null | PointerLockControls>(null)
-  const setPointerLockControls = api.getState().setPointerLockControls
-  const setPointerLockStatus = api.getState().setPointerLockStatus
+  const { setPointerLockStatus, setPointerLockControls } = api.getState()
 
   useEffect(() => {
     if (ref.current) {

packages/client/src/components/MenuOverlay.tsx

@@ -11,7 +11,7 @@ import {
   useToast,
 } from '@chakra-ui/react'
 
-import useStore from '../Store'
+import useStore from '../store'
 
 const MenuOverlay: React.FC = () => {
   const [helpToastShown, setHelpToastShown] = useState<boolean>(false)

packages/client/src/store.ts

@@ -1,11 +1,14 @@
 import create from 'zustand'
 import { PointerLockControls } from '@react-three/drei'
+import { Socket } from 'socket.io-client'
 
 type State = {
   pointerLockControls: PointerLockControls | undefined
   pointerLocked: boolean
   setPointerLockStatus: (status: boolean) => void
   setPointerLockControls: (controls: PointerLockControls) => void
+  socket: null | Socket
+  setSocket: (socket: Socket | null) => void
 }
 
 const useStore = create<State>((set) => ({
@@ -13,6 +16,8 @@ const useStore = create<State>((set) => ({
   pointerLocked: false,
   setPointerLockStatus: (status) => set(() => ({ pointerLocked: status })),
   setPointerLockControls: (controls) => set(() => ({ pointerLockControls: controls })),
+  socket: null,
+  setSocket: (socket) => set(() => ({ socket })),
 }))
 
 export default useStore