Etapa 4: paleta y navegador de objetos, terreno y NPCs para el editor

[leocagli]

Parte de #2 (modo construcción). Depende del editor visual (#13) y de la API de objetos (#9).

Qué es

Para construir un mapa hace falta poder elegir qué poner. Eso significa un navegador de contenido dentro del editor: buscar entre los 1.062 objetos del juego, filtrarlos por tipo, previsualizarlos y arrastrarlos al mapa. Lo mismo para tiles de terreno y para NPCs.

Sin esto, el editor sirve para pintar pero no para amueblar.

Punto de partida que ya existe

@elpatoenlasolas tiene un editor web de objetos de AO: AO-object-editor. Es Next.js y ya resolvió el modelo de dominio, que es la parte que no se improvisa:

• lib/ao-constants.ts tiene el catálogo completo de los 37 tipos de objeto con etiquetas legibles (Comida, Arma, Armadura, Árbol, Dinero, Puerta, Cofre, Cartel, Llave, Foro, Poción, Yacimiento, Fragua, Barco, Runa...) y color por tipo
• Las 11 clases clásicas para el campo clasesPermitidas
• La interfaz GameObject con los 27 campos reales de un objeto de AO
• Un sistema de definición de campos (FieldDef) para generar formularios sin escribir uno por objeto
• components/object-list.tsx, object-form.tsx, object-editor.tsx y editor-toolbar.tsx, alrededor de 24 KB de componentes de editor

Nota importante sobre licencia: el repo no tiene archivo LICENSE. El README menciona Creative Commons sin especificar variante, lo cual no alcanza para reutilizar código con seguridad. Antes de copiar nada hay que pedirle al autor que aclare la licencia, o tratarlo sólo como referencia conceptual y escribir la implementación propia.

Alcance

1. Navegador de objetos dentro del editor: lista, búsqueda por nombre, filtro por tipo, vista previa del gráfico.
2. Paleta de terreno del mapa actual, con los tiles disponibles y los gráficos subidos por el usuario.
3. Navegador de NPCs, filtrable, para colocarlos en el mapa.
4. Selección con clic y colocación en el mapa, coherente con las herramientas del editor.
5. Favoritos o recientes, porque en una sesión de construcción se usan siempre los mismos veinte elementos.

A tener en cuenta

• La vista previa necesita resolver grhIndex a la imagen real. El cliente ya sabe hacer eso: recorta el frame del PNG según el índice de gráficos.
• Son 1.062 objetos y 340 NPCs. La lista tiene que virtualizarse o va a arrastrar.
• Nuestro frontend usa Tailwind 4 sin Radix. El editor de referencia usa shadcn/ui sobre Radix. Traer sus componentes implica sumar Radix como dependencia, que es una decisión de arquitectura, no un detalle.

Criterios de aceptación

• Se puede buscar un objeto por nombre y filtrarlo por tipo
• La vista previa muestra el gráfico real, no un placeholder
• Se puede seleccionar un objeto y colocarlo en el mapa
• La paleta de terreno incluye los gráficos subidos por el usuario
• La lista sigue siendo fluida con los 1.062 objetos cargados
• La situación de licencia del código de referencia está resuelta y documentada

[chfr19820610-cell]

Subject: Bounty Application – Etapa 4: Paleta y navegador de objetos, terreno y NPCs

I have strong experience building game editors and asset browsers, including real-time filtering, preview, and drag-and-drop placement systems. My background with TypeScript, React, and canvas-based rendering aligns well with the visual editor and object API dependencies in this task. I can implement a performant object navigator with type-based filtering and terrain/NPC support within 10–14 days. I’m confident I can deliver a clean, integrated solution that meets the requirements of #2 and #13.

[chfr19820610-cell]

Subject: Bounty Application – Etapa 4: Paleta y navegador de objetos, terreno y NPCs

I have strong experience building game editors and asset browsers, including real-time filtering, preview, and drag-and-drop placement systems. My background with TypeScript, React, and canvas-based rendering aligns well with the visual editor and object API dependencies in this task. I can implement a performant object navigator with type-based filtering and terrain/NPC support within 10–14 days. I’m confident I can deliver a clean, integrated solution that meets the requirements of #2 and #13.

[chfr19820610-cell]

Subject: Bounty Application – Etapa 4: Paleta y navegador de objetos, terreno y NPCs

I have strong experience building game editors and asset browsers, including real-time filtering, preview, and drag-and-drop placement systems. My background with TypeScript, React, and canvas-based rendering aligns well with the visual editor and object API dependencies in this task. I can implement a performant object navigator with type-based filtering and terrain/NPC support within 10–14 days. I’m confident I can deliver a clean, integrated solution that meets the requirements of #2 and #13.

[chfr19820610-cell]

Subject: Bounty Application – Etapa 4: Paleta y navegador de objetos, terreno y NPCs

I have strong experience building game editors and asset browsers, including real-time filtering, preview, and drag-and-drop placement systems. My background with TypeScript, React, and canvas-based rendering aligns well with the visual editor and object API dependencies in this task. I can implement a performant object navigator with type-based filtering and terrain/NPC support within 10–14 days. I’m confident I can deliver a clean, integrated solution that meets the requirements of #2 and #13.

[Shadow-MMN]

Hey @leocagli, I'd like to work on this issue.

From my understanding, this feature adds the content-selection layer needed to make the visual editor practical: browsing and searching the available objects, terrain tiles, and NPCs, previewing their actual graphics, and placing them directly onto the map. My implementation will follow the existing editor architecture and include:

Building an object browser with name search, type filtering, real grhIndex graphic previews, and click-to-select placement on the map. I'll add a terrain palette that exposes the available map tiles and user-uploaded graphics, as well as an NPC browser with filtering and placement support. I'll also implement a favorites/recently-used mechanism so frequently used content can be accessed quickly during a building session.

Since the catalog contains 1,062 objects and 340 NPCs, I'll make the lists virtualized or otherwise efficiently rendered so the editor remains responsive. I'll integrate with the existing Tailwind 4 setup rather than introducing Radix/shadcn dependencies unnecessarily, and I'll treat the existing AO-object-editor as a reference for the domain model rather than copying code until its licensing is explicitly clarified.

I'll test object search and filtering, real graphic previews, object/NPC/terrain placement, uploaded terrain graphics, and performance with the full object and NPC catalogs. I'll also document how the reference implementation was used and ensure the licensing constraint is respected.

ETA: Within 5 days.