53a5e3886e
- Añadido sistema de sesiones con localStorage - Nuevo hook useSessionStorage para manejar sesiones - Botón de salir de la partida (ExitGameButton) en todas las pantallas del juego - Botón de logout (LogoutButton) solo en el lobby - Evento leave_game en servidor para cerrar partida cuando alguien sale - Evento reconnect_session para reconectar jugadores después de recargar - Actualizado GameBoard para incluir botón de salida - Actualizado page.tsx para manejar sesiones y logout
113 lines
3.6 KiB
Markdown
113 lines
3.6 KiB
Markdown
# Resumen de Implementación: Sesiones y Botones de Salida
|
|
|
|
## Cambios Realizados
|
|
|
|
### 1. Sistema de Sesiones Persistentes ✅
|
|
|
|
#### Cliente
|
|
- **Nuevo hook**: `client/src/hooks/useSessionStorage.ts`
|
|
- Maneja el almacenamiento y recuperación de sesiones en localStorage
|
|
- Guarda: playerName, fullPlayerName, currentView, roomId
|
|
|
|
- **Actualización de `page.tsx`**:
|
|
- Integrado hook `useSessionStorage`
|
|
- Al iniciar sesión, se guarda la sesión
|
|
- Al cargar la app, se restaura la sesión si existe
|
|
- Al cambiar de vista (lobby/game), se actualiza la sesión
|
|
- Función `handleLogout` para limpiar sesión
|
|
|
|
#### Servidor
|
|
- **Nuevo evento**: `reconnect_session`
|
|
- Permite a un jugador reconectarse a una partida existente
|
|
- Actualiza el socketId del jugador en la partida
|
|
- Envía el estado actualizado al jugador reconectado
|
|
|
|
### 2. Botón de Salir de la Partida ✅
|
|
|
|
#### Cliente
|
|
- **Nuevo componente**: `client/src/components/ExitGameButton.tsx`
|
|
- Botón con icono de flecha
|
|
- Posicionado arriba a la izquierda (fixed top-4 left-4)
|
|
- Modal de confirmación antes de salir
|
|
- Se muestra en todas las fases del juego excepto en pantallas de victoria
|
|
|
|
- **Actualización de `GameBoard.tsx`**:
|
|
- Agregado prop `fullPlayerName`
|
|
- Integrado `ExitGameButton`
|
|
- Llama a `actions.leaveGame()` al confirmar
|
|
|
|
- **Actualización de `useSocket.ts`**:
|
|
- Nueva acción: `leaveGame()`
|
|
- Nuevo listener: `player_left_game`
|
|
|
|
#### Servidor
|
|
- **Nuevo evento**: `leave_game`
|
|
- Notifica a todos los jugadores que alguien abandonó
|
|
- Elimina la partida de la base de datos
|
|
- Limpia timers asociados
|
|
- Actualiza la lista de salas
|
|
- Desconecta a todos los jugadores de la sala
|
|
|
|
### 3. Botón de Salir del Juego (Logout) ✅
|
|
|
|
#### Cliente
|
|
- **Nuevo componente**: `client/src/components/LogoutButton.tsx`
|
|
- Botón con icono de apagar
|
|
- Posicionado arriba a la izquierda (fixed top-4 left-4)
|
|
- Solo visible en el lobby
|
|
|
|
- **Actualización de `page.tsx`**:
|
|
- Función `handleLogout()`:
|
|
- Limpia la sesión de localStorage
|
|
- Vuelve a la vista de login
|
|
- Si está en una partida, llama a `leaveGame()`
|
|
|
|
## Flujo de Uso
|
|
|
|
### Sesiones Persistentes
|
|
1. Usuario se loguea → sesión guardada en localStorage
|
|
2. Usuario cierra navegador
|
|
3. Usuario vuelve a abrir → sesión restaurada automáticamente
|
|
4. Si estaba en una partida, intenta reconectar
|
|
|
|
### Salir de la Partida
|
|
1. Usuario hace clic en botón de flecha (arriba izquierda)
|
|
2. Aparece modal de confirmación
|
|
3. Al confirmar:
|
|
- Servidor notifica a todos: "Jugador X ha abandonado"
|
|
- Partida eliminada de la BD
|
|
- Todos vuelven al lobby
|
|
|
|
### Salir del Juego (Logout)
|
|
1. Usuario hace clic en botón de apagar (arriba izquierda, solo en lobby)
|
|
2. Sesión eliminada de localStorage
|
|
3. Vuelve a pantalla de login
|
|
|
|
## Archivos Modificados
|
|
|
|
### Nuevos Archivos
|
|
- `client/src/hooks/useSessionStorage.ts`
|
|
- `client/src/components/LogoutButton.tsx`
|
|
- `client/src/components/ExitGameButton.tsx`
|
|
- `.agent/workflows/sesiones-y-botones.md`
|
|
|
|
### Archivos Modificados
|
|
- `client/src/app/page.tsx`
|
|
- `client/src/components/GameBoard.tsx`
|
|
- `client/src/hooks/useSocket.ts`
|
|
- `server/src/index.ts`
|
|
|
|
## Próximos Pasos
|
|
|
|
1. **Probar la aplicación**:
|
|
- Verificar que las sesiones persisten correctamente
|
|
- Probar el botón de salir de la partida
|
|
- Probar el botón de logout
|
|
- Verificar reconexión después de recargar
|
|
|
|
2. **Posibles mejoras**:
|
|
- Agregar notificación toast cuando alguien abandona
|
|
- Mejorar el manejo de errores en reconexión
|
|
- Agregar timeout de sesión (expiración automática)
|
|
- Guardar más información en la sesión (configuración, preferencias)
|