PipeMania Hub

Colección de puzzles de conexión y flujo en HTML5 + JavaScript (sin build ni dependencias de npm). El punto de entrada principal es el hub con interfaz unificada, juegos embebidos y herramientas para exportar el tablero actual como HTML autónomo.

Contenido del repositorio

Ruta	Descripción
`index.html`	PipeMania Hub: menú lateral, `iframe` con el juego activo, botones Guardar / Galería / Descargar.
`tuberias_hex.html`	Tuberías en rejilla hexagonal (piezas anillares); variante por defecto al abrir el hub.
`tuberias.html`	Tuberías clásicas en cuadrícula: rotar celdas hasta conectar el flujo desde la fuente. Tamaños 4×4 … 9×9.
`flow_free.html`	Estilo Flow Free: unir pares de colores sin cruzar trazos.
`Net.html`	Net (conexión de tuberías en cuadrícula, inspirado en el puzzle homónimo).
`toroide(PacMan).html`	Variante toroidal del Net (los bordes se conectan como en un toro).
`juegos.txt`	Lista de referencias y juegos similares (lectura humana, no usada por el hub).
`tantrix/`	Material aparte (interfaz tipo escenas / legado); no está enlazado desde `index.html`.

Cómo ejecutarlo

Clona o descarga la carpeta del proyecto.
Sirve los archivos por HTTP (recomendado). El hub usa fetch() para leer el HTML del juego al generar clones; en muchos navegadores no funcionará si abres index.html directamente desde el disco (file://).

Ejemplos rápidos:

# Python 3
python -m http.server 8080

# Node (npx)
npx --yes serve .

Luego abre en el navegador: http://localhost:8080/ (o el puerto que indique la herramienta) y entra en index.html.

Uso del hub

Pipes Hex / Pipes Classic / Flow Free / Net Connect / Net Toroidal: cambian el juego cargado en el iframe.
Guardar: memoriza el puzzle actual (estado serializado) en la sesión del navegador.
Galería: si hay al menos un puzzle guardado, descarga un HTML (galeria_pipemania.html) con vista en rejilla y zoom por panel.
Descargar: genera un clon del juego actual en un solo archivo HTML con el tablero fijado (se eliminan en el clon algunos controles de “nueva partida” / dificultad para dejar el puzzle congelado).

Los juegos individuales implementan postMessage (getState / gameState) para que el hub pueda leer el estado y construir esos clones.

Requisitos

Navegador moderno con Canvas, ES6+ y soporte de iframes / postMessage.
Conexión a Internet solo si quieres cargar las fuentes de Google Fonts usadas en index.html (el resto puede usarse offline si ya tienes los archivos en caché).

Créditos

En tuberias.html el pie de página indica diseño por Juan Guillermo Rivera Berrío con apoyo de herramientas de IA (Claude). Los demás HTML pueden tener estilos y lógica propios del mismo conjunto PipeMania.