Estado actual
El juego no se puede jugar desde un celular. No es que se vea mal: no se puede usar.
Dos razones independientes:
1. El layout exige alrededor de 1050 px de ancho. El canvas es de 672 px fijos, más 10 de separación, más 320 del panel derecho, más 48 de padding. La escala del HUD está forzada a 1 fuera de pantalla completa, así que nada se achica. En una pantalla de 390 px el contenido simplemente se recorta, porque el contenedor tiene overflow: hidden y está centrado.
2. No hay ningún input táctil. El movimiento es sólo por teclado (WASD). No existe joystick, ni botones en pantalla, ni long press. Buscando touchstart, pointer: coarse, maxTouchPoints, isMobile o Joystick en todo el repo no aparece nada.
Lo único que funciona hoy en un teléfono es tocar el mapa para caminar, porque Pixi normaliza los eventos de puntero y un tap llega como click izquierdo.
Alcance
- Layout adaptado, con el canvas escalado y el HUD reorganizado en overlays
- Landscape obligatorio, con aviso de rotar el dispositivo en vertical
- Joystick flotante para moverse
- Botones táctiles para atacar y apuntar hechizos, barra rápida, acciones de mundo y chat
- Long press sobre el mapa como equivalente del click derecho
- Instalable como PWA, para ganar la altura de la barra del navegador
Restricciones técnicas encontradas
Vale la pena documentarlas porque cambian la implementación obvia:
No se pueden usar eventos de teclado sintéticos. El cliente rechaza eventos con isTrusted falso, como defensa anti bot. Un joystick que despache new KeyboardEvent("keydown", {code: "KeyW"}), que es la forma habitual de hacer un D-pad web, queda bloqueado en silencio. El input táctil tiene que entrar por el mismo camino interno que usa el teclado.
El throttle de movimiento ya está resuelto. El motor aplica el paso de 200 ms y respeta los estados de inmovilizado y paralizado. Duplicar ese control desde el joystick rompe el encadenado de pasos.
El escalado del canvas ya existe. El canvas se estira por CSS dentro de su contenedor, que es exactamente lo que ya hace el modo pantalla completa en desktop. No hace falta tocar cámara ni culling.
El campo visible está acoplado al servidor. El cliente muestra 21x21 tiles y el servidor sólo envía entidades dentro de ese radio. Mostrar más terreno en pantallas anchas requiere cambiar las dos puntas. Queda fuera de alcance: en mobile el canvas se escala, no se amplía.
Dependencias
Esto depende de que estén resueltos los problemas de sesión, porque si no el jugador móvil se desconecta constantemente aunque los controles funcionen:
- Timeout de IP duplicada que rompe con CGNAT
- Los pings no cuentan como actividad, así que bloquear la pantalla expulsa
- No hay reconexión automática
Criterios de aceptación
Archivos relevantes
frontend/app/play/page.tsx (layout y escala del HUD)frontend/components/game/core/useKeyboardGameplay.ts y useMovementSync.ts (camino de entrada del movimiento)frontend/components/game/core/useRendererBootstrap.ts (eventos de puntero sobre el canvas)frontend/app/layout.tsx y frontend/app/manifest.ts (viewport y PWA)
Estado actual
El juego no se puede jugar desde un celular. No es que se vea mal: no se puede usar.
Dos razones independientes:
1. El layout exige alrededor de 1050 px de ancho. El canvas es de 672 px fijos, más 10 de separación, más 320 del panel derecho, más 48 de padding. La escala del HUD está forzada a 1 fuera de pantalla completa, así que nada se achica. En una pantalla de 390 px el contenido simplemente se recorta, porque el contenedor tiene
overflow: hiddeny está centrado.2. No hay ningún input táctil. El movimiento es sólo por teclado (WASD). No existe joystick, ni botones en pantalla, ni long press. Buscando
touchstart,pointer: coarse,maxTouchPoints,isMobileoJoysticken todo el repo no aparece nada.Lo único que funciona hoy en un teléfono es tocar el mapa para caminar, porque Pixi normaliza los eventos de puntero y un tap llega como click izquierdo.
Alcance
Restricciones técnicas encontradas
Vale la pena documentarlas porque cambian la implementación obvia:
No se pueden usar eventos de teclado sintéticos. El cliente rechaza eventos con
isTrustedfalso, como defensa anti bot. Un joystick que despachenew KeyboardEvent("keydown", {code: "KeyW"}), que es la forma habitual de hacer un D-pad web, queda bloqueado en silencio. El input táctil tiene que entrar por el mismo camino interno que usa el teclado.El throttle de movimiento ya está resuelto. El motor aplica el paso de 200 ms y respeta los estados de inmovilizado y paralizado. Duplicar ese control desde el joystick rompe el encadenado de pasos.
El escalado del canvas ya existe. El canvas se estira por CSS dentro de su contenedor, que es exactamente lo que ya hace el modo pantalla completa en desktop. No hace falta tocar cámara ni culling.
El campo visible está acoplado al servidor. El cliente muestra 21x21 tiles y el servidor sólo envía entidades dentro de ese radio. Mostrar más terreno en pantallas anchas requiere cambiar las dos puntas. Queda fuera de alcance: en mobile el canvas se escala, no se amplía.
Dependencias
Esto depende de que estén resueltos los problemas de sesión, porque si no el jugador móvil se desconecta constantemente aunque los controles funcionen:
Criterios de aceptación
Archivos relevantes
frontend/app/play/page.tsx(layout y escala del HUD)frontend/components/game/core/useKeyboardGameplay.tsyuseMovementSync.ts(camino de entrada del movimiento)frontend/components/game/core/useRendererBootstrap.ts(eventos de puntero sobre el canvas)frontend/app/layout.tsxyfrontend/app/manifest.ts(viewport y PWA)