diff --git a/packages/client/src/components/Error.tsx b/packages/client/src/components/Error.tsx
new file mode 100644
index 0000000..6b937d3
--- /dev/null
+++ b/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 (
+
+ ¡Oh no!
+
+ {errorText()}
+
+ Por favor,{' '}
+ reloadPage()}>clickeá acá para recargar la página
+
+
+
+ Si el problema persiste, envía un correo electrónico a{' '}
+ ianmethyst@gmail.com
+
+
+ )
+}
+
+export default Error
diff --git a/packages/client/src/components/Museo.tsx b/packages/client/src/components/Museo.tsx
index bcf530b..090e8fe 100644
--- a/packages/client/src/components/Museo.tsx
+++ b/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 (
-
-
+ {error ? (
+
+ ) : (
+ <>
+
+
+ >
+ )}
)
}
diff --git a/packages/client/src/store.ts b/packages/client/src/store.ts
index a1cbb01..6d56be4 100644
--- a/packages/client/src/store.ts
+++ b/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((set) => ({
@@ -18,6 +22,8 @@ const useStore = create((set) => ({
setPointerLockControls: (controls) => set(() => ({ pointerLockControls: controls })),
socket: null,
setSocket: (socket) => set(() => ({ socket })),
+ error: null,
+ setError: (error) => set(() => ({ error })),
}))
export default useStore