Oficina Live
Proyecto propio · Oficina virtual
Una oficina virtual en pixel art, solo para computador. Cada persona camina con su personaje y ve en tiempo real a quienes están. Hay salas abiertas, silenciosas y privadas, y un botón que abre Teams.
709: objetos para armar la oficina
Cómo funciona
- La oficina: Cada persona camina con su personaje, se sienta al detenerse y cruza puertas que se abren y se cierran. Ves en vivo a quienes están.
- Teams: El botón cambia según el lugar: en una sala abre su chat; cerca de alguien, el chat con esa persona. Las llamadas salen con enlace de Teams.
- El editor: Pisos, paredes, zonas y 709 objetos, o una de 3 plantillas. Todo el pixel art se dibuja por código, con una paleta cerrada.
- Planner: Tableros de tareas por estado, prioridad y responsable, dentro de la misma herramienta.
- Cuentas: Cada persona activa su cuenta con un enlace de un solo uso. Tres roles de permisos, respaldos y registro de actividad.
El proyecto
Contexto
Este proyecto parte de una pregunta: ¿y si la oficina remota también se pudiera recorrer? La respuesta es una oficina en pixel art donde cada persona camina con su personaje y ve, en tiempo real, quién está cerca.
Idea
Un mapa de casillas de 32 px, con salas, puertas y escritorios, donde la presencia se ve sin preguntar. La plataforma no transmite audio ni video: con un clic, el botón de Microsoft Teams abre el chat de la sala o de la persona que tienes cerca, o arma una llamada con enlace de Teams. Es solo para computador.
Mi rol
Es un proyecto propio. Lo construí con Claude Code (Anthropic), que figura como coautor en los commits: yo definí el producto, tomé las decisiones y revisé cada resultado. El pixel art se dibuja por código con una paleta cerrada. Está inspirado en la experiencia de Gather, sin relación con esa empresa.
El reto: ¿Y si la oficina remota se pudiera recorrer?
- Que se vea quién está, en qué estado y quién está cerca
- Que haya lugares: salas abiertas, silenciosas y privadas
- Que hablar sea un clic: un chat o una llamada de Teams según dónde estés
- Que se pueda armar una oficina sin dibujar cada objeto
Caminar, sentarse, hablar
Una oficina en pixel art con presencia en tiempo real, salas con reglas y un botón que lleva a Teams según el lugar.
En la oficina
- Presencia en tiempo real: Cada persona camina con su personaje. Ves quién está, quién saluda y su estado: activo, ocupado o ausente.
- Personaje propio: Once categorías de ropa y rasgos, caminar de 4 cuadros por dirección y mascotas.
- Sentarse como en la vida real: Las sillas se pueden cruzar. La persona se sienta solo si se detiene encima, y una silla ocupada bloquea.
Salas y Teams
- Salas con reglas: Abiertas, silenciosas o privadas. Un aviso arriba a la izquierda dice en qué sala estás, y las privadas se bloquean.
- Teams según el lugar: En una sala, el botón abre su chat; cerca de alguien, el chat con esa persona. Las llamadas salen con un enlace de Teams.
- Puertas y sonidos: Las puertas se abren al cruzarlas y se cierran detrás. Los pasos y demás sonidos se sintetizan con Web Audio, sin archivos de audio.
Armar y administrar
- Editor de la oficina: Pisos, paredes, zonas y un inventario de más de 700 elementos, o una de tres plantillas. Los objetos pequeños se apoyan solos sobre las mesas y un validador avisa de lo que quedó suelto.
- Planner interno: Tableros con columnas, prioridades, responsables, subtareas y fechas.
- Cuentas y permisos: Nadie se registra solo: la administración crea perfiles y cada persona abre un enlace de un solo uso para elegir su contraseña. Hay tres roles: administración, constructor y persona.
Cómo viaja la presencia
El navegador dibuja el mundo y manda tus movimientos por un WebSocket. El servidor los revisa y los comparte. Todo lo demás pasa por una API con SQLite.
- Navegador (React 19 · Phaser 3): Dibuja el mundo con pixel art hecho por código y manda tus movimientos
- Presencia (WebSocket · ws): Comparte posiciones, estados y salas en tiempo real
- Servidor (Express 5): Revisa cada paso y sirve cuentas, mapa, permisos y Planner
- Datos (SQLite · Prisma): Una base local; las migraciones se aplican al arrancar
Hecho con cuidado
- Nadie se registra solo: cada perfil nuevo se activa con un enlace de un solo uso, de 256 bits, que vence a los 7 días. En la base solo queda su huella.
- Las contraseñas usan scrypt, con bloqueo temporal tras intentos fallidos y límite por IP. La sesión es un token firmado, sin cookies, y cambiar la contraseña la revoca.
- Toda escritura exige una cabecera propia y el WebSocket valida el origen. El navegador nunca recibe listas de correos: el servidor arma los enlaces de Teams.
- El servidor no se fía del navegador: revisa cada movimiento (cuántos por segundo, la velocidad, las paredes, los muebles y los asientos ocupados) y corrige los que no cuadran.
- La base de datos, las fotos, los respaldos y el secreto viven en carpetas fuera de git. El repositorio no trae llaves ni datos reales.
Dirección humana
Parte del código, del arte por código y de la documentación se escribió con Claude Code (Anthropic) bajo mi dirección y revisión, y Claude figura como coautor en los commits.
- Producto: Qué hace cada parte y qué no: la plataforma no transmite audio ni video, las llamadas salen por Teams y es solo para computador.
- Arte: Todo el pixel art se dibuja por código con una paleta cerrada y se empaqueta en atlas. Unas guías fijan el estilo y cada familia de objetos.
- Reglas del mundo: Casilla de 32 px, personaje de 32 por 64 px, sillas que se cruzan y puertas que se abren al pasar. Cada regla quedó escrita en el repositorio.
- Pruebas: Cuenta con 1.325 pruebas automáticas (shared, server, web y arte) y revisión de tipos. Todavía falta probarla con dos personas reales en una misma oficina.
Preguntas frecuentes
¿Qué es Oficina Live?
Una oficina virtual en pixel art, solo para computador. Cada persona camina con su personaje y ve en tiempo real a quienes están. Hay salas abiertas, silenciosas y privadas, y un botón que abre Teams.
¿Se puede abrir en línea?
No hay versión en línea: corre en un computador. El código es público para leerlo y estudiarlo, y el README explica cómo levantar la demostración con cuentas de ejemplo. Las capturas de esta página son de esa demostración.
¿Puedo reutilizar el código?
No. Es público para leerlo y estudiarlo, pero no es código abierto: todos los derechos están reservados y no se puede copiar, modificar, distribuir ni usar sin permiso por escrito.
¿Funciona en el celular?
No. Es solo para computador. En un celular se pide el sitio de escritorio.
¿Tiene audio y video?
La plataforma no transmite audio ni video. El botón de Teams abre el chat o arma una llamada con enlace de Teams. Microsoft Teams es marca de Microsoft y Oficina Live no está afiliada ni respaldada por Microsoft.
¿Qué falta?
Música ambiental con pistas licenciadas, el envío real de correos para los enlaces de activación, chats persistentes de Teams por sala (exigen Microsoft Graph), un catálogo de personajes más amplio y una prueba con dos personas reales en una misma oficina.
Créditos
- Jaime Orozco: Producto, dirección y revisión (Proyecto propio)
- Claude Code (Anthropic): Coautor: código, arte por código y documentación (Proyecto propio)
- Gather: La experiencia que inspiró el proyecto. Sin relación con esa empresa (Inspiración)
Con qué está hecho
Tecnologías: React 19 · Phaser 3, Express 5 · SQLite (Prisma) · WebSocket, 1.325 pruebas automáticas, Hecho con IA, dirigido por Jaime.
Ver el código en GitHub