Iniciar sesión con GitHub
ES

El panel JumPHP de Claude Code

Mientras Claude escribe tu juego, mira lo que hace: un panel junto a la conversación muestra las pruebas que se ejecutan, las pantallas del juego que está mirando, y te permite intervenir. Es un mod de Claude Code, jumphp-live, incluido con JumPHP.

Instalarlo

En Claude Code (en una terminal), escribe:

/plugin install jumphp-live --marketplace davidnurdin/jumPhp

Responde y para añadir la fuente y luego elige el alcance («user»: para todos tus proyectos). Desde un shell: claude plugin install jumphp-live --marketplace davidnurdin/jumPhp.

Usarlo

En tu proyecto JumPHP (la carpeta que contiene bin/jumphp), inicia Claude Code y escribe /jumphp <juego>, por ejemplo /jumphp pong. El panel se abre a la derecha (hace falta una ventana bastante ancha, de 110 columnas o más). También se abre solo la primera vez que Claude ejecuta bin/jumphp test o bin/jumphp shot.

Lo que muestra:

  • Las comprobaciones en directo: cuando Claude ejecuta bin/jumphp test, la salida se desplaza por el panel y cada paso se marca sobre la marcha: ✔ php -l ✔ phpstan … phpunit smoke test. Al final: el resumen de PHPUnit y lo que ha fallado (las pruebas fallidas, los avisos y errores de PHP).
  • La pantalla del juego en directo (● live): mientras bin/jumphp test (su smoke test) o bin/jumphp shot hacen funcionar el juego, el panel muestra su pantalla fotograma a fotograma (el motor reescribe var/live/frame.png, opción JUMPHP_LIVE). Las ejecuciones sin ventana van más rápido que el tiempo real: JUMPHP_REALTIME=1 las ralentiza a la velocidad del juego. Un proyecto creado antes de esta opción la obtiene con git pull jumphp main (el repositorio JumPHP original, guardado con el nombre jumphp).
  • Las pruebas de juego, ante tus ojos: las pruebas que juegan el juego se muestran mientras se ejecutan (⏳ y luego ✔ / ✘), con el nombre de la prueba en curso encima de la pantalla en directo; después, haz clic en una prueba para ver su último fotograma. El botón 🐢 Game speed / ⏩ Fast (r) elige la velocidad: la del juego (por defecto, para ver moverse la pala) o lo más rápido posible.
  • Las pantallas: la captura que bin/jumphp shot o siteshot acaba de hacer, y cada imagen que Claude abre para mirar el juego, mostradas en el panel.
  • Las imágenes en cualquier terminal: por defecto se dibujan con pequeños bloques de color (▦ Blocks), que cualquier terminal de color real muestra (GNOME Terminal, Konsole, Windows Terminal, VS Code…): el motor escribe para ello, junto a cada PNG, una pequeña copia en bruto (.rgb). En kitty, Ghostty o iTerm2 el panel muestra el propio PNG (🖼 HD); la tecla p alterna. El botón 🖼 Open (o) abre la imagen mostrada en el visor de tu escritorio (xdg-open, open en macOS), a tamaño real.
  • El playground: el resultado de las pruebas PHPUnit del sitio (run_tests, get_test_run) y de las publicaciones (sync_project) cuando Claude usa el servidor MCP.

Lo que puedes hacer:

  • ▶ Tests (tecla t) y 📸 Shot (s): ejecutar las pruebas o una captura al instante, sin Claude; la salida se desplaza por el panel.
  • 🛠 Ask Claude to fix (f), tras un fallo: Claude recibe lo que ha fallado y lo corrige.
  • Tell Claude: un campo para escribirle («salta más alto», «el jefe es demasiado difícil»); lo lee en cuanto termina el paso en curso.

Cómo sigue a Claude

Un comando Bash de Claude que ejecuta bin/jumphp test, shot, siteshot o webshot se ejecuta tal cual, y su salida también se copia a un archivo temporal que el panel sigue ({ export JUMPHP_LIVE=1; comando } 2>&1 | tee …, con el código de salida conservado). Los demás comandos no se tocan. No se envía nada a ningún otro sitio.