Show error screen on socket disconnect

packages/client/src/components/Error.tsx

@@ -0,0 +1,48 @@
+import React from 'react'
+import useStore from '../store'
+import { Box, Heading, Link, Stack, Text } from '@chakra-ui/react'
+
+const Error: React.FC = () => {
+  const error = useStore((state) => state.error)
+
+  const errorText = (): string => {
+    switch (error) {
+      case 'SOCKET': {
+        return 'Ocurrió un error de conexión'
+      }
+      default:
+        return 'Ocurrió un error desconocido'
+    }
+  }
+
+  const reloadPage = () => {
+    window.location.reload()
+    return false
+  }
+
+  return (
+    <Stack
+      h="100vh"
+      direction="column"
+      justify="center"
+      align="center"
+      w="100%"
+      spacing="1rem"
+    >
+      <Heading mb="2rem">¡Oh no! </Heading>
+      <Box textAlign="center">
+        <Text>{errorText()}</Text>
+        <Text mb="2rem">
+          Por favor,{' '}
+          <Link onClick={() => reloadPage()}>clickeá acá para recargar la página </Link>
+        </Text>
+      </Box>
+      <Text as="small">
+        Si el problema persiste, envía un correo electrónico a{' '}
+        <Link href="mailto:ianmethyst@gmail.com">ianmethyst@gmail.com</Link>
+      </Text>
+    </Stack>
+  )
+}
+
+export default Error

packages/client/src/components/Museo.tsx

@@ -5,27 +5,40 @@ import { Box } from '@chakra-ui/react'
 import { Canvas } from 'react-three-fiber'
 
 import MenuOverlay from './MenuOverlay'
+import Error from './Error'
 import Scene from '../3d'
 
 import useStore from '../store'
 
 const Museo: React.FC = () => {
   const setSocket = useStore((state) => state.setSocket)
+  const setError = useStore((state) => state.setError)
+  const error = useStore((state) => state.error)
+
   useEffect(() => {
     const socket = io()
     setSocket(socket)
 
+    socket.on('disconnect', () => setError('SOCKET'))
+
     return () => {
       socket.close()
       setSocket(null)
     }
   }, [])
+
   return (
     <Box w="100vw" h="100vh">
-      <MenuOverlay />
+      {error ? (
-      <Canvas colorManagement>
+        <Error />
-        <Scene />
+      ) : (
-      </Canvas>
+        <>
+          <MenuOverlay />
+          <Canvas colorManagement>
+            <Scene />
+          </Canvas>
+        </>
+      )}
     </Box>
   )
 }

packages/client/src/store.ts

@@ -2,6 +2,8 @@ import create from 'zustand'
 import { PointerLockControls } from '@react-three/drei'
 import { Socket } from 'socket.io-client'
 
+type Error = null | 'SOCKET'
+
 type State = {
   pointerLockControls: PointerLockControls | undefined
   pointerLocked: boolean
@@ -9,6 +11,8 @@ type State = {
   setPointerLockControls: (controls: PointerLockControls) => void
   socket: null | Socket
   setSocket: (socket: Socket | null) => void
+  error: Error
+  setError: (error: Error) => void
 }
 
 const useStore = create<State>((set) => ({
@@ -18,6 +22,8 @@ const useStore = create<State>((set) => ({
   setPointerLockControls: (controls) => set(() => ({ pointerLockControls: controls })),
   socket: null,
   setSocket: (socket) => set(() => ({ socket })),
+  error: null,
+  setError: (error) => set(() => ({ error })),
 }))
 
 export default useStore