roomforge

Planos y maquetas para la remodelación de una habitación: planta (vista superior, con cotas de holguras/despejes clave), vista isométrica (3D) y detalle del clóset (alzado con cotas de carpintería), generados como SVG a partir de datos editables.

Cómo verlo

Abre index.html directo en el navegador (doble clic). No requiere servidor ni build — es HTML/JS/SVG sin dependencias externas.

Estructura

roomforge/
  data/
    room.js        # dimensiones de la habitación, puerta, ventana, techo
    furniture.js    # todas las piezas del acomodo (cama matrimonial)
    layouts.js       # registro de layouts (qué FURNITURE_* se muestra y con qué título)
  js/
    geometry.js           # helpers genéricos de SVG (formas, texto, cotas)
    floorplan.js          # dibuja la vista en planta + cotas de despejes
    furniture-render.js   # dibuja los muebles en la planta
    closet-detail.js      # alzado con cotas de las piezas group:'closet'
    isometric.js           # vista isométrica (3D) de cuarto + muebles
    main.js                # genera una sección por layout y arranca el render
  index.html
  style.css

Editar los datos

• Habitación / puerta / ventana / techo: data/room.js. Cada campo tiene comentarios explicando su unidad (siempre metros) y su significado.
• Muebles: data/furniture.js. El esquema de cada pieza está documentado en el propio archivo (width/depth/height/x/y/rotation/color, más style: 'open' para piezas sin puerta/frente — solo contorno, sin relleno — y hideLabel para piezas menores como las barras del clóset). Se renderizan automáticamente como footprint acotado en la planta, en js/furniture-render.js.
• Layouts: data/layouts.js. Registro de qué FURNITURE_* se muestra y con qué título — agregar un layout nuevo no requiere tocar index.html.

La vista en planta (js/floorplan.js) además dibuja cotas de despejes clave (en verde, para distinguirlas de las estructurales en gris/café/azul): la cadena de la zona de trabajo contra la pared superior, el hueco entre esa zona y la cama, el pasillo cama-clóset, y el arranque del clóset respecto a la pared superior (zona de maniobra de la puerta) — ver drawClearanceDimensions en floorplan.js.

El detalle del clóset (js/closet-detail.js) acota TODAS las piezas group: 'closet': anchos (fila superior), altura de cada cajón, altura del colgado inferior/superior, y la altura del almacenamiento superior en cada extremo (79cm/52cm — no es pareja, sigue la pendiente real del techo).

Supuestos hechos con los datos actuales

El usuario describió la puerta y la ventana desde una vista 3D ("esquina superior derecha", "esquina inferior izquierda"), lo cual no define sin ambigüedad en qué de los 4 muros cae cada una, vistas en planta. Se asumió:

• Puerta: muro derecho (x = lengthX), a 10 cm de la esquina superior derecha, ancho 0.90 m, alto 2.07 m.
• Ventana: muro inferior (y = widthY), arrancando en la esquina inferior izquierda (sin separación), ancho 2.07 m, alto 1.93 m — se asumió que llega hasta el piso (sill = 0) porque no se especificó una altura de antepecho.
• Techo: a una sola agua (monopendiente) — 3.05 m en la pared superior (y = 0) y 2.60 m en la pared de la ventana (y = widthY), con interpolación lineal entre ambas. Las paredes left/right (donde está la puerta) quedan trapezoidales siguiendo esa pendiente.

Si alguno de estos supuestos no corresponde con la realidad, corrígelo directamente en data/room.js (campos wall, offsetFromCorner, sill) — los planos se regeneran solos al recargar la página.

Acomodo de muebles

Antes de proponer o ajustar posiciones en data/furniture.js, ver docs/guia-acomodo-muebles.md — principios generales de distribución (circulación, punto focal, zonificación, escala, ergonomía) más las restricciones específicas de esta habitación (techo a una sola agua, zona de barrido de la puerta, ventana). CLAUDE.md deja esto como regla obligatoria para cualquier sesión futura.

Color y pintura

Ver docs/guia-color-pintura.md — investigación sobre qué color de pintura hace que esta habitación (techo a una sola agua, 11.3 m²) se sienta acogedora y, dentro de lo posible, más grande: LRV, continuidad visual paredes/techo, subtono cálido y una paleta corta recomendada.

Acomodo actual

index.html muestra un único layout (planta + vista isométrica 3D + detalle de clóset), registrado en data/layouts.js: cama matrimonial, priorizada en posición, con el resto de los elementos del cuarto acomodados alrededor.

Piezas:

• Frigobar (48×45×85 cm) y, montado encima, un despensario abierto en forma de "H" (frigobar como base sólida + 2 entrepaños abiertos, sin puertas ni cuerpo cerrado): esquina superior izquierda, contra la pared superior. El conjunto completo no pasa de 2× la altura del frigobar (1.70 m), restricción explícita del usuario.
• Escritorio (120×60 cm): a continuación del frigobar (con holgura), misma pared (lado de techo alto).
• PC de escritorio sobre base con ruedas (50×30 cm) y repisa para impresora (50×60 cm, a 1.40 m de altura): a continuación del escritorio, del lado de la puerta, con holgura respecto al arco de la puerta.
• Clóset completo (contra la pared derecha, sin puerta ni ventana) — render cerrado (con puertas/frentes implícitos), con almacenamiento superior. Visto de frente al clóset (parado en el cuarto, mirando hacia +X): cajones+TV a la izquierda (lado de techo más alto), colgado a la derecha (lado de la ventana) — a pedido del usuario; ver la corrección de orientación (antes estaba al revés) junto a buildClosetRun en data/furniture.js:
  • 2 columnas de 5 cajones (0.6535 m de ancho cada una, 1.307 m en total — el ancho de la TV + margen): 30/20/20/20/13 cm de abajo hacia arriba por columna, dentro de la zona de alcance sin agacharse ni estirarse (piso a ~1.22 m).
  • TV de 50" (110.7×62.3 cm) en un nicho cerrado con repisa superior, montada directamente encima de las 2 columnas de cajones (a 1.03 m). El nicho ahora cierra a 2.08 m de alto (antes 1.88 m), al ras del tope del colgado — a pedido del usuario, para que el almacenamiento superior tenga un tope parejo de punta a punta.
  • Colgado doble (0.90 m de ancho): barra inferior a 1.03 m y superior a 2.08 m, cada una con ~1.00-1.05 m de espacio libre (medidas de referencia de sistemas modernos tipo IKEA PAX — ver la guía).
  • Almacenamiento superior: corre sobre todo el conjunto (2.207 m de ancho), apoyado en el tope de 2.08 m, con la tapa siguiendo la pendiente real del techo (topFollowsRoof) en vez de una altura plana — de sobra en los dos extremos (~0.79 m libres del lado del escritorio, ~0.52 m del lado de la ventana). Se había quitado antes para dar más flexibilidad de acomodo; se devolvió a pedido del usuario.
• Cama matrimonial (135×190 cm), rotada: cabecera contra la pared izquierda (sin puerta ni ventana) en vez de la de la ventana, porque esta cama ya no cabe ahí sin bloquear el vano (solo hay 1.03 m libres al lado). Con esto la ventana queda 100% libre y, al sentarse en la cama mirando hacia los pies, la puerta queda de lado — nunca de espaldas (ver "Orientación de la cama respecto a la puerta" en la guía).
• Cabecera con repisas integradas (135×15 cm, 1.40 m de alto): mismo ancho que la cama, contra la pared izquierda.
• Mesa de noche (45×40×55 cm, tamaño estándar): al lado derecho de la cama (visto de frente a la cabecera) — contra la pared izquierda, tocando el borde de la cabecera, del lado del escritorio. Es el único lado con piso libre: el otro costado ya lo ocupa el tocador.
• Tocador con espejo de cuerpo completo (80×60 cm, 2.00 m de alto): contra la pared izquierda, junto al pie de la cama — en la esquina que antes ocupaba el cesto de ropa sucia (eliminado a pedido del usuario). Puerta abatible con bisagra izquierda (no corrediza: no hay espacio a los lados del mueble para que una hoja corrediza se deslice), con espejo de cuerpo completo (1.80×0.60 m) montado sobre la hoja.
• Hueco entre la zona de escritorio y la cama: 0.80 m (antes 0.40 m, a pedido del usuario).

El pasillo hacia el clóset sigue en 0.70 m — por debajo del ideal de 75-90 cm de la guía, pero por encima del mínimo de paso secundario de 45 cm; es el límite geométrico de este cuarto de 3.10 m de ancho con una cama matrimonial rotada + el clóset.

Ver el razonamiento completo de cada pieza en los comentarios de data/furniture.js.

Vista isométrica (3D)

js/isometric.js — proyección isométrica pura en SVG (sin librerías externas), tercer panel junto a la planta y el detalle del clóset. Se había perdido en algún momento (el repo no es un git, así que no había historial de dónde recuperarla) y se reconstruyó a partir de roomforge-vistas.pdf (una versión anterior del sitio, con esta vista habilitada), que sirvió como referencia de la convención de cámara: paredes visibles x=0 y y=0 (forman la esquina de fondo), las otras dos (aquí, puerta y ventana) quedan cortadas para ver el interior. Soporta la misma pendiente de techo que closet-detail.js (piezas con topFollowsRoof se dibujan con la tapa inclinada en vez de plana).

Ajustes tras la primera verificación visual (con ~28 piezas en un dibujo chico, muchas cosas competían por el mismo espacio en pantalla):

• Opacidad reducida en todas las piezas (más aún en las elevadas/montadas), para que lo que queda tapado por otra pieza en esta proyección (sin z-buffer real por píxel — limitación conocida de un simple "orden pintor") se siga adivinando por transparencia en vez de desaparecer o verse cortado.
• Altura de Z ligeramente achatada (ISO_Z_SCALE) para que piezas angostas pero altas (ej. el frigobar+despensario) invadan menos la silueta de sus vecinas.
• Rótulos: solo el cajón 1 de cada columna del clóset se etiqueta (antes se repetía "Cajón N" 10 veces); se acortan sufijos entre paréntesis y textos muy largos; label3D: false permite ocultar el rótulo de una pieza SOLO en esta vista (ej. la repisa del nicho de TV, que choca con "TV 50"" pero sigue etiquetada normal en el detalle del clóset).

Próximos pasos

• Agregar más layouts en data/furniture.js + data/layouts.js siguiendo docs/guia-acomodo-muebles.md.