Upload 4 files

app.py

@@ -1,10 +1,26 @@
-from flask import Flask, render_template, jsonify, request, redirect,abort,Response
-import cloth_loader
+import gzip
 import hashlib
-import zlib,struct
-import requests,json
+import json
+import struct
+import zlib
 from io import BytesIO
+from itertools import chain
+
+import requests
+from flask import (
+    Flask,
+    Response,
+    abort,
+    jsonify,
+    make_response,
+    redirect,
+    render_template,
+    request,
+)
 from PIL import Image
+
+import cloth_loader
+
 app = Flask(__name__)
 
 # Configuración
@@ -16,11 +32,44 @@ RESERVED_PARAMS = {"config_url", "page", "per_page", "limit", "offset"}
 CACHE = {}
 
 
+def get_or_load_data_by_category(
+    config_url: str, extra_vars: dict, category: str = None
+):
+    """Carga datos cacheados, opcionalmente por categoría."""
+    url = config_url.strip() or DEFAULT_CONFIG_URL
+    cache_key_input = f"{url}|{sorted(extra_vars.items())}"
+    base_cache_key = hashlib.md5(cache_key_input.encode("utf-8")).hexdigest()
+
+    # Si no se especifica categoría, cargar todo
+    if not category:
+        return get_or_load_data(config_url, extra_vars)
+
+    # Clave específica para la categoría
+    category_cache_key = f"{base_cache_key}_cat_{category}"
+
+    if category_cache_key in CACHE:
+        return CACHE[category_cache_key]
+
+    # Cargar datos completos
+    full_data = get_or_load_data(config_url, extra_vars)
+
+    # Extraer solo la categoría solicitada
+    category_data = {
+        "types": full_data["types"],
+        "_category_index": {category: full_data["_category_index"].get(category, [])},
+        "_palettes": full_data["_palettes"],
+        "config": full_data["config"],
+    }
+
+    CACHE[category_cache_key] = category_data
+    return category_data
+
+
 def get_or_load_data(config_url: str, extra_vars: dict):
     """Carga o devuelve datos cacheados (incluyendo config)."""
     url = config_url.strip() or DEFAULT_CONFIG_URL
     cache_key_input = f"{url}|{sorted(extra_vars.items())}"
-    cache_key = hashlib.md5(cache_key_input.encode('utf-8')).hexdigest()
+    cache_key = hashlib.md5(cache_key_input.encode("utf-8")).hexdigest()
 
     if cache_key in CACHE:
         return CACHE[cache_key]
@@ -28,8 +77,16 @@ def get_or_load_data(config_url: str, extra_vars: dict):
     print(f"🔄 Cargando datos desde: {url} con vars {extra_vars}")
     try:
         # ¡cloth_loader.load_game_data ahora devuelve config!
-        figuremap, figuredata_flat, palettes, config = cloth_loader.load_game_data(url, extra_vars)
-        types, category_index = cloth_loader.get_all_part_types_from_data(figuremap, figuredata_flat)
+        figuremap, figuredata_flat, palettes, config = cloth_loader.load_game_data(
+            url, extra_vars
+        )
+
+        # En load_game_data, después de resolver el config
+
+        types, category_index = cloth_loader.get_all_part_types_from_data(
+            figuremap, figuredata_flat
+        )
+        # types, category_index = cloth_loader.get_all_part_types_from_data(figuremap, figuredata_flat)
 
         data = {
             "types": types,
@@ -45,74 +102,33 @@ def get_or_load_data(config_url: str, extra_vars: dict):
         raise
 
 
-@app.route('/')
+@app.route("/")
 def index():
-    config_url = request.args.get('config_url', DEFAULT_CONFIG_URL)
+    config_url = request.args.get("config_url", DEFAULT_CONFIG_URL)
     extra_vars = {k: v for k, v in request.args.items() if k not in RESERVED_PARAMS}
     try:
-        data = get_or_load_data(config_url, extra_vars)
-        return render_template('armario.html', part_types=data["types"], max_per_page=MAX_PER_PAGE)
+        data = get_or_load_data_by_category(config_url, extra_vars)
+        return render_template(
+            "armario.html", part_types=data["types"], max_per_page=MAX_PER_PAGE
+        )
     except Exception as e:
-        return f"<h2>Error al cargar la configuración</h2><pre>{str(e)}</pre>", 500
-
-
-@app.route('/api/furnis/<part_type>')
-def api_furnis(part_type):
-    config_url = request.args.get('config_url', DEFAULT_CONFIG_URL)
-    extra_vars = {k: v for k, v in request.args.items() if k not in RESERVED_PARAMS}
-    try:
-        data = get_or_load_data(config_url, extra_vars)
-        if part_type not in data["types"]:
-            return jsonify({"error": f"Tipo '{part_type}' no válido."}), 400
-
-        page = request.args.get('page', default=1, type=int)
-        per_page = request.args.get('per_page', default=10, type=int)
-        per_page = max(1, min(per_page, MAX_PER_PAGE))
-        page = max(1, page)
-
-        all_items = data["_category_index"].get(part_type, [])
-        total = len(all_items)
-        total_pages = (total + per_page - 1) // per_page
-        offset = (page - 1) * per_page
-        items_slice = all_items[offset : offset + per_page]
-
-        # Usar config para generar image_url
-        avatar_asset_url = data["config"]["avatar.asset.url"]
-        print(f[0])
-        items = [
-            {
-                "lib_id": f.lib_id,
-                "id": f.id,
-                "type": part_type,
-                "sprite":1,
-                "image_url": f"/api/images/{f.lib_id}.nitro?{request.query_string.decode()}"
-            }
-            for f in items_slice
-        ]
+        import traceback
 
-        return jsonify({
-            "items": items,
-            "pagination": {
-                "page": page,
-                "per_page": per_page,
-                "total": total,
-                "total_pages": total_pages
-            }
-        })
+        traceback.print_exc()
+        return f"<h2>Error al cargar la configuración</h2><pre>{str(e)}</pre>", 500
 
-    except Exception as e:
-        return jsonify({"error": str(e)}), 500
 
-@app.route('/api/images/<image>.nitro')
+@app.route("/api/images/<image>.nitro")
 def serve_nitro_image(image):
     try:
         # --- 1. Obtener parámetros ---
-        config_url = request.args.get('config_url', DEFAULT_CONFIG_URL)
-        sprite_index_param = request.args.get('sprite')
-        get_total = request.args.get('get_total') == '1'
+        config_url = request.args.get("config_url", DEFAULT_CONFIG_URL)
+        sprite_index_param = request.args.get("sprite")
+        get_total = request.args.get("get_total") == "1"
         extra_vars = {
-            k: v for k, v in request.args.items()
-            if k not in RESERVED_PARAMS and k not in ('sprite', 'get_total')
+            k: v
+            for k, v in request.args.items()
+            if k not in RESERVED_PARAMS and k not in ("sprite", "get_total")
         }
 
         # --- 2. Cargar configuración ---
@@ -137,16 +153,16 @@ def serve_nitro_image(image):
         # --- 4. Buscar JSON y PNG ---
         fly = {}
         for name, content in files:
-            if content.startswith(b'\x89PNG\r\n\x1a\n'):
+            if content.startswith(b"\x89PNG\r\n\x1a\n"):
                 fly["png"] = {"content": content, "name": name}
-            elif name.lower().endswith('.json'):
+            elif name.lower().endswith(".json"):
                 fly["json"] = {"content": content, "name": name}
 
         if "json" not in fly or "png" not in fly:
             abort(404, "❌ No se encontró JSON o PNG en el bundle")
 
         # --- 5. Parsear JSON ---
-        json_str = fly["json"]["content"].decode('utf-8')
+        json_str = fly["json"]["content"].decode("utf-8")
         json_data = json.loads(json_str)
 
         # --- 6. Extraer frames ---
@@ -158,7 +174,9 @@ def serve_nitro_image(image):
                 frames = json_data["spritesheet"]["frames"]
 
         if not frames:
-            abort(400, f"❌ JSON no contiene 'frames'. Claves: {list(json_data.keys())}")
+            abort(
+                400, f"❌ JSON no contiene 'frames'. Claves: {list(json_data.keys())}"
+            )
 
         frame_names = list(frames.keys())
         total_sprites = len(frame_names)
@@ -176,7 +194,10 @@ def serve_nitro_image(image):
                 abort(400, "❌ El parámetro 'sprite' debe ser un número entero")
 
             if sprite_index < 0 or sprite_index >= total_sprites:
-                abort(400, f"❌ Índice de sprite fuera de rango. Debe estar entre 0 y {total_sprites - 1}")
+                abort(
+                    400,
+                    f"❌ Índice de sprite fuera de rango. Debe estar entre 0 y {total_sprites - 1}",
+                )
 
         selected_name = frame_names[sprite_index]
         frame_info = frames[selected_name]
@@ -185,7 +206,10 @@ def serve_nitro_image(image):
         coords = frame_info.get("frame", frame_info)
         for key in ["x", "y", "w", "h"]:
             if key not in coords:
-                abort(400, f"❌ Coordenada '{key}' faltante en el sprite '{selected_name}'")
+                abort(
+                    400,
+                    f"❌ Coordenada '{key}' faltante en el sprite '{selected_name}'",
+                )
 
         x = int(coords["x"])
         y = int(coords["y"])
@@ -199,7 +223,7 @@ def serve_nitro_image(image):
         output = BytesIO()
         sprite.save(output, format="PNG")
         output.seek(0)
-        return Response(output.getvalue(), mimetype='image/png')
+        return Response(output.getvalue(), mimetype="image/png")
 
     except requests.RequestException as e:
         abort(502, f"❌ Error al descargar: {str(e)}")
@@ -212,31 +236,32 @@ def serve_nitro_image(image):
     except Exception as e:
         abort(500, f"❌ Error inesperado: {str(e)}")
 
+
 def parse_nitro(data: bytes):
     """Parsea un archivo .nitro y devuelve [(nombre, datos_descomprimidos), ...]"""
     files = []
     offset = 0
     if len(data) < 2:
         return files
-    file_count = struct.unpack('>H', data[offset:offset+2])[0]
+    file_count = struct.unpack(">H", data[offset : offset + 2])[0]
     offset += 2
 
     for _ in range(file_count):
         if offset + 2 > len(data):
             break
-        name_len = struct.unpack('>H', data[offset:offset+2])[0]
+        name_len = struct.unpack(">H", data[offset : offset + 2])[0]
         offset += 2
         if offset + name_len > len(data):
             break
-        name = data[offset:offset+name_len].decode('utf-8', errors='replace')
+        name = data[offset : offset + name_len].decode("utf-8", errors="replace")
         offset += name_len
         if offset + 4 > len(data):
             break
-        compressed_size = struct.unpack('>I', data[offset:offset+4])[0]
+        compressed_size = struct.unpack(">I", data[offset : offset + 4])[0]
         offset += 4
         if offset + compressed_size > len(data):
             break
-        compressed_data = data[offset:offset+compressed_size]
+        compressed_data = data[offset : offset + compressed_size]
         offset += compressed_size
 
         try:
@@ -252,24 +277,187 @@ def parse_nitro(data: bytes):
     return files
 
 
-@app.route('/api/findfurni')
+def organizar_paletas(paletas: list[cloth_loader.Palette], paleta_id: int):
+    colores: list[dict] = []
+    for paleta in paletas:
+        if paleta.id != paleta_id:
+            continue
+        for color in paleta.colors:
+            if not color.selectable:
+                continue
+            colores.append(
+                {
+                    "index": color.index,
+                    "color": color.id,
+                    "hexColor": "#" + color.hex_code,
+                }
+            )
+    return colores
+
+
+@app.route("/api/effects")
+def api_effects():
+    config_url = request.args.get("config_url", DEFAULT_CONFIG_URL)
+    extra_vars = {k: v for k, v in request.args.items() if k not in RESERVED_PARAMS}
+    data = get_or_load_data_by_category(config_url, extra_vars, "ca")
+    config = data["config"]
+    effect_map = config["avatar.effectmap.url"]
+    map_effect = requests.get(effect_map).json()["effects"]
+
+    def guardar_efecto(efecto):
+        return {
+            "id": efecto["id"],
+            "tipo": efecto["type"],
+            "file": f"/api/gifs/{efecto['lib']}.nitro?{request.query_string.decode()}",
+        }
+
+    datos = list(map(guardar_efecto, map_effect))
+    return render_template("efectos.html", efectos=datos)
+
+
+@app.route("/api/gifs/<image>.nitro")
+def serve_nitro_gif(image):
+    try:
+        # --- 1. Obtener parámetros ---
+        config_url = request.args.get("config_url", DEFAULT_CONFIG_URL)
+        get_total = request.args.get("get_total") == "1"
+        extra_vars = {
+            k: v
+            for k, v in request.args.items()
+            if k not in RESERVED_PARAMS and k not in ("sprite", "get_total")
+        }
+
+        # --- 2. Cargar configuración ---
+        data = get_or_load_data_by_category(config_url, extra_vars, "ca")
+        config = data["config"]
+        asset_url_template = config.get("avatar.asset.effect.url")
+        if not asset_url_template:
+            abort(500, "❌ avatar.asset.url no encontrado en la configuración")
+
+        nitro_url = asset_url_template.format(libname=image)
+        print(f"📥 Descargando: {nitro_url}")
+
+        # --- 3. Descargar y parsear .nitro ---
+        resp = requests.get(nitro_url)
+        resp.raise_for_status()
+        nitro_data = resp.content
+
+        files = parse_nitro(nitro_data)
+        if not files:
+            abort(404, "📦 Bundle vacío")
+
+        # --- 4. Buscar JSON y PNG ---
+        fly = {}
+        for name, content in files:
+            # If gzip compressed, decompress first
+            if content[:2] == b"\x1f\x8b":
+                content = gzip.decompress(content)
+
+            if name.lower().endswith(".png"):
+                fly["png"] = {"content": content, "name": name}
+
+            elif name.lower().endswith(".json"):
+                fly["json"] = {"content": content, "name": name}
+        # --- 5. Parsear JSON ---
+
+        json_str = fly["json"]["content"].decode("utf-8")
+        json_data = json.loads(json_str)
+
+        # --- 6. Extraer frames ---
+        frames = {}
+        if isinstance(json_data, dict):
+            if "frames" in json_data:
+                frames = json_data["frames"]
+            elif "spritesheet" in json_data and "frames" in json_data["spritesheet"]:
+                frames = json_data["spritesheet"]["frames"]
+
+        if not frames:
+            abort(
+                400, f"❌ JSON no contiene 'frames'. Claves: {list(json_data.keys())}"
+            )
+
+        frame_names = list(frames.keys())
+        total_sprites = len(frame_names)
+
+        # --- 7. Modo: obtener total de sprites ---
+        if get_total:
+            return jsonify({"total_sprites": total_sprites})
+        sprites = []
+        # --- 8. Seleccionar sprite por índice ---
+        for frame_name, frame_info in frames.items():
+            # --- 9. Extraer coordenadas ---
+            coords = frame_info.get("frame", frame_info)
+            for key in ["x", "y", "w", "h"]:
+                if key not in coords:
+                    abort(
+                        400,
+                        f"❌ Coordenada '{key}' faltante en el sprite '{selected_name}'",
+                    )
+
+            x = int(coords["x"])
+            y = int(coords["y"])
+            w = int(coords["w"])
+            h = int(coords["h"])
+
+            # --- 10. Recortar y devolver PNG ---
+            png_image = Image.open(BytesIO(fly["png"]["content"]))
+            sprite = png_image.crop((x, y, x + w, y + h))
+            sprites.append(sprite)
+
+        output = BytesIO()
+        sprites[0].save(
+            output,
+            save_all=True,
+            append_images=sprites[1:],
+            format="GIF",
+            duration=1000,  # milisegundos por frame (opcional pero recomendado)
+            loop=0,  # 0 = bucle infinito (opcional pero recomendado)
+            disposal=2,  # Índice de color transparente (ajusta según tu paleta)
+            optimize=True,  # reduce tamaño (opcional)
+        )
+        output.seek(0)
+
+        return Response(output.getvalue(), mimetype="image/gif")
+
+    except requests.RequestException as e:
+        __import__("traceback").print_exc()
+        abort(502, f"❌ Error al descargar: {str(e)}")
+    except json.JSONDecodeError as e:
+        __import__("traceback").print_exc()
+        abort(500, f"❌ JSON inválido: {str(e)}")
+    except (KeyError, ValueError) as e:
+        import traceback
+
+        traceback.print_exc()
+        abort(400, f"❌ Estructura inválida: {str(e)}")
+    except zlib.error as e:
+        __import__("traceback").print_exc()
+        abort(500, f"❌ Error al descomprimir: {str(e)}")
+    except Exception as e:
+        __import__("traceback").print_exc()
+        abort(500, f"❌ Error inesperado: {str(e)}")
+
+
+@app.route("/api/findfurni")
 def api_findfurni():
-    config_url = request.args.get('config_url', DEFAULT_CONFIG_URL)
+    config_url = request.args.get("config_url", DEFAULT_CONFIG_URL)
     extra_vars = {k: v for k, v in request.args.items() if k not in RESERVED_PARAMS}
-    query = request.args.get('q', '').strip().lower()
-    part_type = request.args.get('type', '').strip()
-    page = request.args.get('page', default=1, type=int)
-    per_page = request.args.get('per_page', default=10, type=int)
+    query = request.args.get("q", "").strip().lower()
+    part_type = request.args.get("type", "").strip()
+    page = request.args.get("page", default=1, type=int)
+    per_page = request.args.get("per_page", default=10, type=int)
     per_page = max(1, min(per_page, MAX_PER_PAGE))
     page = max(1, page)
 
     try:
-        data = get_or_load_data(config_url, extra_vars)
+        data = get_or_load_data_by_category(config_url, extra_vars, part_type)
         if not part_type or part_type not in data["types"]:
             return jsonify({"error": f"Tipo '{part_type}' no válido."}), 400
 
         # Filtrar ítems por lib_id
+
         all_items = data["_category_index"].get(part_type, [])
+
         # En /api/findfurni
         if query:
             filtered = []
@@ -300,29 +488,47 @@ def api_findfurni():
         total_pages = (total + per_page - 1) // per_page
         offset = (page - 1) * per_page
         items_slice = filtered[offset : offset + per_page]
-
+        # En /api/furnis/<part_type>
         items = [
             {
                 "lib_id": f.lib_id,
                 "id": f.id,
-                "type": part_type,
-                "image_url": f"/api/images/{f.lib_id}.nitro?{request.query_string.decode()}"
+                "type": f.type,
+                "colors": len(
+                    set([part.colorindex for part in f.parts if f.colorable])
+                ),
+                "colorable": f.colorable,
+                "palette": organizar_paletas(
+                    data["_palettes"], f.paleta
+                ),  # ← Paleta completa
+                "image_url": f"/api/images/{f.lib_id}.nitro?{request.query_string.decode()}",
             }
             for f in items_slice
         ]
-
-        return jsonify({
-            "items": items,
-            "pagination": {
-                "page": page,
-                "per_page": per_page,
-                "total": total,
-                "total_pages": total_pages
-            }
-        })
+        response = make_response(
+            jsonify(
+                {
+                    "items": items,
+                    "pagination": {
+                        "page": page,
+                        "per_page": per_page,
+                        "total": total,
+                        "total_pages": total_pages,
+                    },
+                }
+            )
+        )
+        response.headers["Cache-Control"] = "public, max-age=3600"  # 1 hora
+        return response
+        return jsonify()
 
     except Exception as e:
+        import traceback
+
+        traceback.print_exc()
         return jsonify({"error": str(e)}), 500
-if __name__ == '__main__':
+
+
+if __name__ == "__main__":
     print("🚀 Iniciando Armario Virtual...")
-    app.run(debug=True, host='0.0.0.0', port=5000)
+    app.run(debug=True, host="0.0.0.0", port=5000)

cloth_loader.py

@@ -1,15 +1,20 @@
-import requests
-from itertools import chain
-from typing import Any, Optional, List, Dict
-from concurrent.futures import ThreadPoolExecutor
+import hashlib
 import re
+from concurrent.futures import ThreadPoolExecutor
+from itertools import chain
+from typing import Any, Dict, List, Optional, Tuple
 
+import requests
 
 # =============== CLASES ===============
 
+
 class Color:
     __slots__ = ("id", "index", "club", "selectable", "hex_code")
-    def __init__(self, id: int, index: int, club: int, selectable: bool, hex_code: str) -> None:
+
+    def __init__(
+        self, id: int, index: int, club: int, selectable: bool, hex_code: str
+    ) -> None:
         self.id = id
         self.index = index
         self.club = club
@@ -28,6 +33,7 @@ class Color:
 
 class Palette:
     __slots__ = ("id", "colors")
+
     def __init__(self, id: int, colors: List[Color]) -> None:
         self.id = id
         self.colors = colors
@@ -47,26 +53,51 @@ class Palette:
 
 class Part:
     __slots__ = ("id", "type", "colorable", "index", "colorindex")
-    def __init__(self, id: int, type: str, colorable: bool = False, index: int = 0, colorindex: int = 0) -> None:
+
+    def __init__(
+        self,
+        id: int,
+        type: str,
+        colorable: bool = False,
+        index: int = 0,
+        colorindex: int = 0,
+    ) -> None:
         self.id = id
         self.type = type
         self.colorable = colorable
         self.index = index
         self.colorindex = colorindex
+
     def __repr__(self) -> str:
         return f"<<<parteId:{self.id},tipo:{self.type},colorindex:{self.colorindex}>>>"
 
     def __eq__(self, other) -> bool:
         if not isinstance(other, Part):
             return False
-        return self.id == other.id and self.type == other.type and self.colorindex == other.colorindex
+        return (
+            self.id == other.id
+            and self.type == other.type
+            and self.colorindex == other.colorindex
+        )
 
     def __hash__(self) -> int:
         return hash((self.id, self.type, self.colorindex))
 
 
 class Lib:
-    __slots__ = ("id", "parts", "gender", "club", "colorable", "selectable", "preselectable", "sellable")
+    __slots__ = (
+        "id",
+        "parts",
+        "gender",
+        "club",
+        "colorable",
+        "selectable",
+        "preselectable",
+        "sellable",
+        "paleta",
+        "type",
+    )
+
     def __init__(
         self,
         id: int,
@@ -77,6 +108,8 @@ class Lib:
         selectable: bool = False,
         preselectable: bool = False,
         sellable: bool = False,
+        paleta: int = -1,
+        type: str = "Desconocido",
     ) -> None:
         self.id = id
         self.parts = parts
@@ -86,13 +119,18 @@ class Lib:
         self.selectable = selectable
         self.preselectable = preselectable
         self.sellable = sellable
+        self.paleta = paleta
+        self.type = type
 
     def __repr__(self) -> str:
-        return f"ID:{self.id},partes:{len(self.parts)},gender:{self.gender}"
+        return f"ID:{self.id},partes:{len(self.parts)},gender:{self.gender}, paleta:{self.paleta},Tipo:{self.type}"
 
     def __eq__(self, other) -> bool:
         return isinstance(other, Lib) and self.parts == other.parts
 
+    def set_paleta(self, pid):
+        self.paleta = pid
+
     def copy(self):
         return Lib(
             id=self.id,
@@ -103,11 +141,14 @@ class Lib:
             selectable=self.selectable,
             preselectable=self.preselectable,
             sellable=self.sellable,
+            paleta=self.paleta,
+            type=self.type,
         )
 
 
 class Full(Lib):
     __slots__ = ("lib_id",)
+
     def __init__(self, obj: Lib, lib_id: str) -> None:
         super().__init__(
             id=obj.id,
@@ -118,23 +159,26 @@ class Full(Lib):
             selectable=obj.selectable,
             preselectable=obj.preselectable,
             sellable=obj.sellable,
+            paleta=obj.paleta,
+            type=obj.type,
         )
         self.lib_id = lib_id
 
     def __repr__(self) -> str:
-        return f"ID:{self.id},partes:{len(self.parts)},Lib:{self.lib_id}"
+        return f"ID:{self.id},partes:{len(self.parts)},Lib:{self.lib_id},Paleta:{self.paleta}"
 
 
 # =============== FUNCIONES AUXILIARES ===============
 
+
 def link_parts(partes: list[dict]) -> list[Part]:
     return [
         Part(
             id=p["id"],
-            type=p["type"],
+            type="hr" if p["type"] == "hrb" else p["type"],
             colorable=p.get("colorable", False),
             index=p.get("index", 0),
-            colorindex=p.get("colorindex", 0)
+            colorindex=p.get("colorindex", 0),
         )
         for p in partes
     ]
@@ -147,7 +191,7 @@ def link_colors(colors_data: list[dict]) -> list[Color]:
             index=c["index"],
             club=c["club"],
             selectable=c["selectable"],
-            hex_code=c["hexCode"]
+            hex_code=c["hexCode"],
         )
         for c in colors_data
     ]
@@ -157,7 +201,7 @@ def link_palettes(palettes_data: list[dict]) -> list[Palette]:
     return [Palette(p["id"], link_colors(p["colors"])) for p in palettes_data]
 
 
-def hook( info:dict) -> Any:
+def hook(info: dict) -> Any:
     if "parts" in info:
         parts = link_parts(info["parts"])
         return Lib(
@@ -181,7 +225,10 @@ def fetch_json(url: str) -> Any:
 
 # =============== CARGA DINÁMICA ===============
 
-def load_game_data(config_url: str, extra_vars: Dict[str, str] = None) -> tuple[list[Lib], list[Lib], list[Palette], dict]:
+
+def load_game_data(
+    config_url: str, extra_vars: Dict[str, str] = None
+) -> tuple[list[Lib], list[Lib], list[Palette], dict]:
     """
     Carga datos desde renderer-config.json.
     - extra_vars sobrescribe cualquier clave del JSON.
@@ -235,9 +282,11 @@ def load_game_data(config_url: str, extra_vars: Dict[str, str] = None) -> tuple[
         for key in all_keys:
             value = config[key]
             if isinstance(value, str) and "${" in value:
+
                 def replace_var(match):
                     var_name = match.group(1)
                     return context.get(var_name, match.group(0))
+
                 resolved = re.sub(r"\$\{([^}]+)\}", replace_var, value).strip()
                 if "${" not in resolved and context.get(key) != resolved:
                     context[key] = resolved
@@ -245,19 +294,22 @@ def load_game_data(config_url: str, extra_vars: Dict[str, str] = None) -> tuple[
 
     # 5. Detectar variables raíz faltantes
     def escape_html(text: str) -> str:
-        return (text
-                .replace("&", "&amp;")
-                .replace("<", "&lt;")
-                .replace(">", "&gt;")
-                .replace('"', "&quot;")
-                .replace("'", "&#x27;"))
+        return (
+            text.replace("&", "&amp;")
+            .replace("<", "&lt;")
+            .replace(">", "&gt;")
+            .replace('"', "&quot;")
+            .replace("'", "&#x27;")
+        )
 
     def debug_config(original_config: dict, ctx: dict) -> str:
         def resolve_value(value):
             if isinstance(value, str):
+
                 def repl(m):
                     var = m.group(1)
                     return ctx.get(var, f"${{{var}}}")
+
                 return re.sub(r"\$\{([^}]+)\}", repl, value)
             elif isinstance(value, list):
                 return [resolve_value(v) for v in value]
@@ -265,8 +317,10 @@ def load_game_data(config_url: str, extra_vars: Dict[str, str] = None) -> tuple[
                 return {k: resolve_value(v) for k, v in value.items()}
             else:
                 return value
+
         resolved = resolve_value(original_config)
         import json
+
         return json.dumps(resolved, indent=2, ensure_ascii=False)
 
     all_missing_vars = set()
@@ -321,18 +375,44 @@ def load_game_data(config_url: str, extra_vars: Dict[str, str] = None) -> tuple[
         figuredata_dict = future_data.result()
 
     # 8. Procesar
-    figuremap: List[Lib] = figuremap_dict["libraries"]
+    def setPaleta(set_) -> List[Lib]:
+        v: List[Lib] = set_["sets"]
+        for i in range(len(v)):
+            v[i].set_paleta(set_["paletteId"])
+            v[i].type = set_["type"]
+        return v
+
+    figuremap_raw: List[Lib] = figuremap_dict["libraries"]
+    figuremap_by_id = {lib.id: lib for lib in figuremap_raw}
     figuredata_flat: List[Lib] = list(
-        chain.from_iterable(set_["sets"] for set_ in figuredata_dict["setTypes"])
+        chain.from_iterable(setPaleta(set_) for set_ in figuredata_dict["setTypes"])
     )
+    figuremap = []
+    for lib in figuremap_raw:
+        # Buscar en figuredata_flat el mismo ID
+        matching_data = None
+        for data_lib in figuredata_flat:
+            if data_lib.id == lib.id:
+                matching_data = data_lib
+                break
+
+        if matching_data and matching_data.paleta != -1:
+            lib.set_paleta(matching_data.paleta)
+        if matching_data and matching_data.type != "Desconocido":
+            lib.type = matching_data.type
+        figuremap.append(lib)
     palettes: List[Palette] = link_palettes(figuredata_dict["palettes"])
+
     def resolve_config_variables(config_dict: dict, context: dict) -> dict:
         """Resuelve todas las ${var} en todo el config usando el contexto."""
+
         def resolve_value(value):
             if isinstance(value, str):
+
                 def repl(match):
                     var = match.group(1)
                     return context.get(var, match.group(0))
+
                 return re.sub(r"\$\{([^}]+)\}", repl, value)
             elif isinstance(value, list):
                 return [resolve_value(v) for v in value]
@@ -340,35 +420,101 @@ def load_game_data(config_url: str, extra_vars: Dict[str, str] = None) -> tuple[
                 return {k: resolve_value(v) for k, v in value.items()}
             else:
                 return value
+
         return resolve_value(config_dict)
-    resolved_config = resolve_config_variables(config,context)
+
+    resolved_config = resolve_config_variables(config, context)
+
     return figuremap, figuredata_flat, palettes, resolved_config
 
+    # =============== FUNCIONES PÚBLICAS ===============
+
+
+pruebas = {"hair": "hr", "trousers": "lg", "hat": "ha"}
 
-# =============== FUNCIONES PÚBLICAS ===============
 
-def get_all_part_types_from_data(figuremap, figuredata_flat) -> tuple[List[str], dict]:
+def return_correct(name):
+    for started in pruebas.keys():
+        if name.startswith(started):
+            return pruebas[started]
+    return "Desconocido"
+
+
+def get_all_part_types_from_data(
+    figuremap, figuredata_flat, include_all=True
+) -> tuple[list[str], dict]:
     _category_index = {}
+    if include_all:
+        _category_index["Todos"] = []
+
     def parts_base_key(lib):
         return tuple((p.id, p.type) for p in lib.parts)
 
+    # Indexar ambos conjuntos
+    figuremap_keys = set()
+    figuremap_dict = {}
+    for item in figuremap:
+        key = parts_base_key(item)
+        figuremap_keys.add(key)
+        figuremap_dict[key] = item
+
     figuredata_by_base_key = {}
     for lib in figuredata_flat:
         key = parts_base_key(lib)
         if key not in figuredata_by_base_key:
             figuredata_by_base_key[key] = lib
 
-    _furnis_all = []
+    # 1. Ítems normales (en ambos)
     for item in figuremap:
         key = parts_base_key(item)
         if key in figuredata_by_base_key:
             matched_lib = figuredata_by_base_key[key]
+
             full = Full(matched_lib.copy(), str(item.id))
-            _furnis_all.append(full)
-            for part in full.parts:
-                ptype = part.type
-                if ptype not in _category_index:
-                    _category_index[ptype] = []
-                _category_index[ptype].append(full)
+            # full.set_paleta(matched_lib.paleta)
+            full.set_paleta(matched_lib.paleta)
+            full.type = matched_lib.type
+            if full.type == "Desconocido":
+                if len(set([t.type for t in full.parts])) == 1:
+                    full.type = full.parts[0].type
+                else:
+                    full.type = return_correct(full.lib_id)
+                    if full.type == "Desconocido":
+                        full.type = full.parts[0].type
+                        print(full.lib_id, "->", full.type)
+
+            # Encontrar la parte con mayor prioridad
+            if full.type not in _category_index:
+                _category_index[full.type] = []
+
+            _category_index[full.type].append(full)
+            if include_all:
+                _category_index["Todos"].append(full)
+    # 2. Ítems EXTRA (solo en figuredata)
+    extra_items = []
+    for lib in figuredata_flat:
+        key = parts_base_key(lib)
+        if key not in figuremap_keys:
+            full = Full(lib.copy(), str(lib.id))  # ID 0 para ítems extra
+            extra_items.append(full)
+
+    if extra_items:
+        _category_index["extra"] = extra_items
+
+    # 3. Ítems MISSING (solo en figuremap)
+    missing_items = []
+    for item in figuremap:
+        key = parts_base_key(item)
+        if key not in figuredata_by_base_key:
+            # Crear un objeto Full "vacío" con datos mínimos
+            dummy_lib = Lib(
+                0,
+                item.parts,
+            )
+            full = Full(dummy_lib, str(item.id))
+            missing_items.append(full)
+
+    if missing_items:
+        _category_index["missing"] = missing_items
 
     return sorted(_category_index.keys()), _category_index

templates/armario.html

@@ -108,11 +108,17 @@
                 display: flex;
                 flex-direction: column;
                 align-items: center;
+                cursor: pointer;
             }
             .item:hover {
                 transform: translateY(-3px);
                 box-shadow: 0 5px 12px rgba(0, 0, 0, 0.15);
             }
+            .item.selected {
+                box-shadow:
+                    0 0 0 3px #4299e1,
+                    0 3px 8px rgba(0, 0, 0, 0.1);
+            }
 
             /* Sprites */
             .sprite-container {
@@ -121,12 +127,51 @@
                 height: 80px;
                 margin-bottom: 24px;
             }
-            .sprite-image {
+            .image-container {
+                width: auto;
+                height: 80px;
+                position: relative;
+                margin: 0 auto;
+            }
+
+            .sprite-image,
+            .item-image {
                 width: 100%;
                 height: 100%;
                 object-fit: contain;
                 image-rendering: pixelated;
+                display: block; /* evita espacios extra */
             }
+            .image-loader {
+                position: absolute;
+                top: 0;
+                left: 0;
+                width: 100%;
+                height: 100%;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                background: rgba(255, 255, 255, 0.7);
+                border-radius: 4px;
+                z-index: 1;
+            }
+            .spinner {
+                width: 24px;
+                height: 24px;
+                border: 3px solid #e2e8f0;
+                border-top: 3px solid #4299e1;
+                border-radius: 50%;
+                animation: spin 1s linear infinite;
+            }
+            @keyframes spin {
+                0% {
+                    transform: rotate(0deg);
+                }
+                100% {
+                    transform: rotate(360deg);
+                }
+            }
+
             .sprite-controls {
                 position: absolute;
                 bottom: -24px;
@@ -164,49 +209,7 @@
                 margin-top: 4px;
             }
 
-            /* Paginación */
-            .pagination {
-                display: flex;
-                justify-content: center;
-                align-items: center;
-                gap: 12px;
-                margin-top: 25px;
-                padding: 15px;
-                background: white;
-                border-radius: 12px;
-                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-            }
-            .pagination button {
-                padding: 8px 16px;
-                background: #4299e1;
-                color: white;
-                border: none;
-                border-radius: 6px;
-                cursor: pointer;
-                font-weight: bold;
-            }
-            .pagination button:disabled {
-                background: #cbd5e0;
-                cursor: not-allowed;
-            }
-            .pagination span {
-                font-weight: bold;
-                color: #2d3748;
-            }
-            .loading {
-                grid-column: 1 / -1;
-                text-align: center;
-                padding: 30px;
-                color: #a0aec0;
-            }
-            .error {
-                grid-column: 1 / -1;
-                text-align: center;
-                padding: 20px;
-                color: #e53e3e;
-                background: #fed7d7;
-                border-radius: 8px;
-            }
+            /* Selección */
             .selection-box {
                 background: white;
                 padding: 15px;
@@ -221,6 +224,21 @@
                 color: #2d3748;
                 word-break: break-all;
                 min-height: 24px;
+                margin: 10px 0;
+            }
+            .selection-tag {
+                display: inline-block;
+                background: #e2e8f0;
+                color: #2d3748;
+                padding: 2px 6px;
+                border-radius: 4px;
+                font-family: monospace;
+                font-size: 13px;
+                cursor: pointer;
+                transition: background 0.2s;
+            }
+            .selection-tag:hover {
+                background: #cbd5e0;
             }
             .copy-button {
                 margin-top: 10px;
@@ -240,6 +258,8 @@
                 background: #cbd5e0;
                 cursor: not-allowed;
             }
+
+            /* Avatar preview */
             .avatar-preview {
                 background: white;
                 padding: 15px;
@@ -252,6 +272,8 @@
                 color: #a0aec0;
                 font-style: italic;
             }
+
+            /* Miniaturas seleccionadas - EN COLUMNA VERTICAL */
             .selected-items-preview {
                 background: white;
                 padding: 15px;
@@ -260,25 +282,20 @@
                 margin: 20px 0;
             }
             .selected-items-grid {
-                display: flex;
-                gap: 12px;
-                flex-wrap: wrap;
-                justify-content: center;
-                min-height: 60px;
+                display: block;
+                margin: 0 auto;
+                max-width: 600px;
             }
             .selected-item-card {
+                display: block;
+                width: 100%;
                 background: #f8fafc;
                 border-radius: 8px;
-                padding: 8px;
+                padding: 12px;
                 text-align: center;
                 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-                width: 80px;
-            }
-            .selected-item-card img {
-                width: 60px;
-                height: 60px;
-                object-fit: contain;
-                image-rendering: pixelated;
+                margin-bottom: 20px;
+                cursor: pointer;
             }
             .selected-item-card .item-id {
                 font-size: 10px;
@@ -286,6 +303,128 @@
                 margin-top: 4px;
                 word-break: break-all;
             }
+            .selected-item-card .itemlib_id {
+                font-size: 10px;
+                color: #4a5568;
+                margin-top: 4px;
+                word-break: break-all;
+            }
+            /* Series de paletas con scroll horizontal por fila */
+            .color-slots-series {
+                margin: 12px 0;
+                display: flex;
+                flex-direction: column;
+                gap: 8px;
+                align-items: center;
+            }
+            /* Contenedor de un slot de color con scroll vertical (10 filas máx) */
+            .color-slot-container {
+                /* 10 filas * (20px altura + 4px gap) - 4px último gap */
+                max-height: 236px;
+                overflow-y: auto;
+                padding-right: 6px;
+                scrollbar-width: thin;
+                scrollbar-color: #cbd5e0 transparent;
+            }
+
+            .color-slot-container::-webkit-scrollbar {
+                width: 6px;
+            }
+
+            .color-slot-container::-webkit-scrollbar-track {
+                background: transparent;
+            }
+
+            .color-slot-container::-webkit-scrollbar-thumb {
+                background: #cbd5e0;
+                border-radius: 3px;
+            }
+
+            /* Filas dentro del slot */
+            .color-slot-rows {
+                display: flex;
+                flex-direction: column;
+                gap: 4px;
+            }
+
+            .color-slot-row {
+                display: flex;
+                flex-wrap: wrap;
+                gap: 4px;
+                justify-content: center;
+            }
+
+            .color-separator {
+                width: 100%;
+                height: 1px;
+                background: #e2e8f0;
+                margin: 6px 0;
+            }
+
+            .color-swatch {
+                width: 20px;
+                height: 20px;
+                border-radius: 50%;
+                border: 2px solid #cbd5e0;
+                cursor: pointer;
+                transition:
+                    transform 0.1s,
+                    border-color 0.2s;
+                flex-shrink: 0;
+            }
+
+            .color-swatch:hover {
+                transform: scale(1.2);
+            }
+
+            .color-swatch.active {
+                border-color: #4299e1;
+                box-shadow: 0 0 0 2px #4299e1;
+            }
+
+            /* Paginación */
+            .pagination {
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                gap: 12px;
+                margin-top: 25px;
+                padding: 15px;
+                background: white;
+                border-radius: 12px;
+                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+            }
+            .pagination button {
+                padding: 8px 16px;
+                background: #4299e1;
+                color: white;
+                border: none;
+                border-radius: 6px;
+                cursor: pointer;
+                font-weight: bold;
+            }
+            .pagination button:disabled {
+                background: #cbd5e0;
+                cursor: not-allowed;
+            }
+            .pagination span {
+                font-weight: bold;
+                color: #2d3748;
+            }
+            .loading {
+                grid-column: 1 / -1;
+                text-align: center;
+                padding: 30px;
+                color: #a0aec0;
+            }
+            .error {
+                grid-column: 1 / -1;
+                text-align: center;
+                padding: 20px;
+                color: #e53e3e;
+                background: #fed7d7;
+                border-radius: 8px;
+            }
         </style>
     </head>
     <body>
@@ -321,7 +460,7 @@
                 <input
                     type="text"
                     id="searchInput"
-                    placeholder="Buscar por ID (ej: hr-100)"
+                    placeholder="Buscar por ID, lib_id o parte (ej: hr, 100)"
                 />
             </div>
 
@@ -331,35 +470,60 @@
                     Selecciona una categoría para comenzar
                 </div>
             </div>
-
-            <!-- Paginación -->
+            <!-- Cargador de figurestring -->
             <div
-                class="pagination"
-                id="paginationControls"
-                style="display: none"
+                class="load-box"
+                style="
+                    background: white;
+                    padding: 15px;
+                    border-radius: 12px;
+                    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+                    margin: 20px 0;
+                "
             >
-                <button id="prevBtn">◀ Anterior</button>
-                <span
-                    >Página <span id="currentPage">1</span> de
-                    <span id="totalPages">1</span></span
-                >
-                <button id="nextBtn">Siguiente ▶</button>
-            </div>
-        </div>
-        <!-- Lista de selección -->
-        <div class="selection-box">
-            <h3>Selección actual:</h3>
-            <div id="selectionOutput" class="selection-output">
-                Ningún ítem seleccionado
+                <h3>Cargar figura</h3>
+                <div style="display: flex; gap: 10px; margin-top: 10px">
+                    <input
+                        type="text"
+                        id="figurestringLoad"
+                        placeholder="Ej: hr-100-0.ch-200-1"
+                        style="
+                            flex: 1;
+                            padding: 8px;
+                            border: 1px solid #cbd5e0;
+                            border-radius: 6px;
+                        "
+                    />
+                    <button
+                        id="loadButton"
+                        style="
+                            padding: 8px 16px;
+                            background: #4299e1;
+                            color: white;
+                            border: none;
+                            border-radius: 6px;
+                            cursor: pointer;
+                        "
+                    >
+                        Cargar
+                    </button>
+                </div>
+                <div
+                    id="loadMessage"
+                    style="margin-top: 10px; min-height: 20px; font-size: 12px"
+                ></div>
             </div>
-            <!-- Miniaturas de ítems seleccionados -->
-            <div class="selected-items-preview">
-                <h3>Ítems seleccionados:</h3>
-                <div id="selectedItemsGrid" class="selected-items-grid">
-                    <!-- Las miniaturas se generarán aquí -->
+            <!-- Selección actual -->
+            <div class="selection-box">
+                <h3>Selección actual:</h3>
+                <div id="selectionOutput" class="selection-output">
+                    Ningún ítem seleccionado
                 </div>
+                <button id="copyButton" class="copy-button" disabled>
+                    Copiar
+                </button>
             </div>
-            <button id="copyButton" class="copy-button" disabled>Copiar</button>
+
             <!-- Visor de avatar -->
             <div class="avatar-preview">
                 <h3>Vista previa del avatar:</h3>
@@ -378,67 +542,331 @@
                     Selecciona ítems para ver el avatar
                 </div>
             </div>
+            <!-- Controles avanzados del avatar -->
+            <div
+                class="avatar-controls"
+                style="
+                    background: white;
+                    padding: 15px;
+                    border-radius: 12px;
+                    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+                    margin: 20px 0;
+                "
+            >
+                <h3>Controles del avatar</h3>
+
+                <!-- Dirección -->
+                <div style="margin: 10px 0">
+                    <label>Dirección:</label>
+                    <select
+                        id="directionSelect"
+                        style="
+                            margin-left: 10px;
+                            padding: 4px;
+                            border: 1px solid #cbd5e0;
+                            border-radius: 4px;
+                        "
+                    >
+                        <option value="0">0 - Espalda</option>
+                        <option value="1">1</option>
+                        <option value="2" selected>2 - Frente</option>
+                        <option value="3">3</option>
+                        <option value="4">4 - Izquierda</option>
+                        <option value="5">5</option>
+                        <option value="6">6 - Derecha</option>
+                        <option value="7">7</option>
+                    </select>
+
+                    <label style="margin-left: 15px">Cabeza:</label>
+                    <select
+                        id="headDirectionSelect"
+                        style="
+                            margin-left: 10px;
+                            padding: 4px;
+                            border: 1px solid #cbd5e0;
+                            border-radius: 4px;
+                        "
+                    >
+                        <option value="0">0 - Espalda</option>
+                        <option value="1">1</option>
+                        <option value="2" selected>2 - Frente</option>
+                        <option value="3">3</option>
+                        <option value="4">4 - Izquierda</option>
+                        <option value="5">5</option>
+                        <option value="6">6 - Derecha</option>
+                        <option value="7">7</option>
+                    </select>
+                </div>
+
+                <!-- Postura y acción -->
+                <div style="margin: 10px 0">
+                    <label>Postura:</label>
+                    <select
+                        id="postureSelect"
+                        style="
+                            margin-left: 10px;
+                            padding: 4px;
+                            border: 1px solid #cbd5e0;
+                            border-radius: 4px;
+                        "
+                    >
+                        <option value="std">Estándar</option>
+                        <option value="wlk">Caminando</option>
+                        <option value="sit">Sentado</option>
+                        <option value="lay">Acostado</option>
+                    </select>
+
+                    <label style="margin-left: 15px">Expresión:</label>
+                    <select
+                        id="expressionSelect"
+                        style="
+                            margin-left: 10px;
+                            padding: 4px;
+                            border: 1px solid #cbd5e0;
+                            border-radius: 4px;
+                        "
+                    >
+                        <option value="">Ninguna</option>
+                        <option value="wav">Saludando</option>
+                        <option value="blow">Beso</option>
+                        <option value="laugh">Risa</option>
+                        <option value="respect">Respeto</option>
+                    </select>
+                </div>
+
+                <!-- Gestos y baile -->
+                <div style="margin: 10px 0">
+                    <label>Gesto:</label>
+                    <select
+                        id="gestureSelect"
+                        style="
+                            margin-left: 10px;
+                            padding: 4px;
+                            border: 1px solid #cbd5e0;
+                            border-radius: 4px;
+                        "
+                    >
+                        <option value="std">Estándar</option>
+                        <option value="agr">Enojado</option>
+                        <option value="sad">Triste</option>
+                        <option value="sml">Sonriendo</option>
+                        <option value="srp">Sorprendido</option>
+                    </select>
+
+                    <label style="margin-left: 15px">Baile:</label>
+                    <select
+                        id="danceSelect"
+                        style="
+                            margin-left: 10px;
+                            padding: 4px;
+                            border: 1px solid #cbd5e0;
+                            border-radius: 4px;
+                        "
+                    >
+                        <option value="0">No bailar</option>
+                        <option value="1">Baile 1</option>
+                        <option value="2">Baile 2</option>
+                        <option value="3">Baile 3</option>
+                        <option value="4">Baile 4</option>
+                    </select>
+                </div>
+
+                <!-- Tamaño y efectos -->
+                <div style="margin: 10px 0">
+                    <label>Tamaño:</label>
+                    <select
+                        id="sizeSelect"
+                        style="
+                            margin-left: 10px;
+                            padding: 4px;
+                            border: 1px solid #cbd5e0;
+                            border-radius: 4px;
+                        "
+                    >
+                        <option value="s">Pequeño</option>
+                        <option value="n" selected>Normal</option>
+                        <option value="l">Grande</option>
+                    </select>
+
+                    <label style="margin-left: 15px">Efecto:</label>
+                    <input
+                        type="number"
+                        id="effectInput"
+                        min="0"
+                        max="999"
+                        value="0"
+                        style="
+                            margin-left: 10px;
+                            width: 60px;
+                            padding: 4px;
+                            border: 1px solid #cbd5e0;
+                            border-radius: 4px;
+                        "
+                    />
+                </div>
+
+                <button
+                    id="applyAvatarBtn"
+                    style="
+                        margin-top: 10px;
+                        padding: 6px 12px;
+                        background: #4299e1;
+                        color: white;
+                        border: none;
+                        border-radius: 6px;
+                        cursor: pointer;
+                    "
+                >
+                    Aplicar cambios
+                </button>
+            </div>
+
+            <!-- Miniaturas seleccionadas -->
+            <div class="selected-items-preview">
+                <h3>Ítems seleccionados:</h3>
+                <div id="selectedItemsGrid" class="selected-items-grid">
+                    <div
+                        style="color: #a0aec0; width: 100%; text-align: center"
+                    >
+                        No hay ítems seleccionados
+                    </div>
+                </div>
+            </div>
+
+            <!-- Paginación -->
+            <div
+                class="pagination"
+                id="paginationControls"
+                style="display: none"
+            >
+                <button id="prevBtn">◀ Anterior</button>
+                <span
+                    >Página <span id="currentPage">1</span> de
+                    <span id="totalPages">1</span></span
+                >
+                <button id="nextBtn">Siguiente ▶</button>
+            </div>
         </div>
 
         <script>
             // Estado global
-            const selectedItems = []; // [{ type, id }, ...]
+            const selectedItems = []; // [{ type, id, lib_id, colors, colorValues }, ...]
+            dataCache = {}; // { tipo: [items] }
+            const avatarState = {
+                direction: 2,
+                headDirection: 2,
+                posture: 'std',
+                expression: '',
+                gesture: 'std',
+                dance: 0,
+                size: 'n',
+                effect: 0
+            };
+            // Reemplazar setupImageLoader con Intersection Observer
+            function setupLazyImage(imgElement, loaderElement) {
+                const observer = new IntersectionObserver((entries) => {
+                    entries.forEach(entry => {
+                        if (entry.isIntersecting) {
+                            // Cargar imagen normalmente
+                            setupImageLoader(imgElement, loaderElement);
+                            observer.unobserve(imgElement);
+                        }
+                    });
+                });
+                observer.observe(imgElement);
+            }
+            // Función reutilizable para imágenes con loader
+            function setupImageLoader(imgElement, loaderElement) {
 
-            // Obtener parámetros de la URL
-            const urlParams = new URLSearchParams(window.location.search);
-            let baseUrlParams = "";
-            for (const [key, value] of urlParams) {
-                if (!['page', 'per_page', 'q', 'type'].includes(key)) {
-                    baseUrlParams += `&${encodeURIComponent(key)}=${encodeURIComponent(value)}`;
+                if (imgElement.complete && imgElement.naturalHeight !== 0) {
+                    if (loaderElement) loaderElement.style.display = 'none';
+                    imgElement.style.opacity = '1';
+                    return;
                 }
+
+                if (loaderElement) loaderElement.style.display = 'flex';
+                imgElement.style.opacity = '0';
+
+                imgElement.onload = () => {
+                    if (loaderElement) loaderElement.style.display = 'none';
+                    imgElement.style.opacity = '1';
+                    imgElement.style.transition = 'opacity 0.3s';
+                };
+
+                imgElement.onerror = () => {
+                    if (loaderElement) {
+                        loaderElement.innerHTML = '<span style="color:#e53e3e; font-size:20px">❌</span>';
+                    }
+                };
             }
-            if (baseUrlParams) baseUrlParams = "?" + baseUrlParams.substring(1);
 
-            let currentType = null;
-            let currentPage = 1;
-            let perPage = 10;
-            const maxPerPage = {{ max_per_page }};
+            // Cambiar sprite
+            function changeSprite(img, direction, counter, itemEl) {
+                const currentIndex = parseInt(img.dataset.spriteIndex);
+                const total = parseInt(itemEl.dataset.totalSprites);
+                let newIndex = currentIndex + direction;
 
-            // Elementos del DOM
-            const typesContainer = document.getElementById('typesContainer');
-            const grid = document.getElementById('furnisGrid');
-            const paginationEl = document.getElementById('paginationControls');
-            const prevBtn = document.getElementById('prevBtn');
-            const nextBtn = document.getElementById('nextBtn');
-            const currentPageEl = document.getElementById('currentPage');
-            const totalPagesEl = document.getElementById('totalPages');
-            const perPageInput = document.getElementById('perPageInput');
-            const selectionOutput = document.getElementById('selectionOutput');
+                if (newIndex < 0) newIndex = total - 1;
+                if (newIndex >= total) newIndex = 0;
 
-            // Formatear selección
-            function formatSelection() {
-                if (selectedItems.length === 0) {
-                    return "Ningún ítem seleccionado";
-                }
-                return selectedItems.map(item =>
-                    `${item.type}-${item.id}-0-0`
-                ).join('.');
+                const url = new URL(img.src);
+                url.searchParams.set('sprite', newIndex);
+                img.src = url.toString();
+                img.dataset.spriteIndex = newIndex;
+                counter.textContent = `${newIndex + 1} / ${total}`;
             }
 
             // Generar URL del avatar
+            // Estado del avatar
+            // Función para construir URLs correctamente
+            function buildApiUrl(basePath, params) {
+                const urlParams = new URLSearchParams();
+
+                // Parámetros específicos del endpoint
+                for (const [key, value] of Object.entries(params)) {
+                    urlParams.append(key, value);
+                }
+
+                // Parámetros globales de la URL actual
+                const currentParams = new URLSearchParams(window.location.search);
+                for (const [key, value] of currentParams) {
+                    if (!['page', 'per_page', 'q', 'type'].includes(key)) {
+                        urlParams.append(key, value);
+                    }
+                }
+
+                return `${basePath}?${urlParams.toString()}`;
+            }
+
             function generateAvatarUrl() {
                 if (selectedItems.length === 0) return null;
 
-                // Obtener código de figura: hr-100-0-0.ch-200-0-0
-                const figureCode = selectedItems.map(item =>
-                    `${item.type}-${item.id}-0-0`
-                ).join('.');
+                const figureParts = selectedItems.map(item => {
+                    const colorStr = item.colorValues ? item.colorValues.join('-') : '0';
+                    return `${item.type}-${item.id}-${colorStr}`;
+                }).join('.');
+
+                // Construir acción combinada
+                let action = avatarState.posture;
+                if (avatarState.expression) {
+                    action += `,${avatarState.expression}`;
+                }
 
-                // Obtener URL base desde parámetros o usar predeterminada
                 const urlParams = new URLSearchParams(window.location.search);
                 let avatarUrlTemplate = urlParams.get('avatar_url') ||
-                    'https://www.hartico.tv/HabboFigure/%figure%&action=wav&gesture=std&direction=2&head_direction=3&headonly=0&dance=0&effect=0&size=l&frame_num=0&img_format=png';
+                    'https://www.hartico.tv/HabboFigure/%figure%&action={action}&gesture={gesture}&direction={direction}&head_direction={head_direction}&headonly=0&dance={dance}&effect={effect}&size={size}&frame_num=0&img_format=png';
 
-                return avatarUrlTemplate.replace('%figure%', figureCode);
+                return avatarUrlTemplate
+                    .replace('%figure%', figureParts)
+                    .replace('{action}', action)
+                    .replace('{gesture}', avatarState.gesture)
+                    .replace('{direction}', avatarState.direction)
+                    .replace('{head_direction}', avatarState.headDirection)
+                    .replace('{dance}', avatarState.dance)
+                    .replace('{effect}', avatarState.effect)
+                    .replace('{size}', avatarState.size);
             }
-            // Actualizar vista de selección con "etiquetas" y botón de copiar
-            // Actualizar vista de selección y avatar
-            // Actualizar todo: selección, avatar y miniaturas
+            // Actualizar todo
             function updateSelectionDisplay() {
                 const copyButton = document.getElementById('copyButton');
                 const avatarImage = document.getElementById('avatarImage');
@@ -454,65 +882,150 @@
                     return;
                 }
 
-                // Generar texto plano para copiar
-                const plainText = selectedItems.map(item =>
-                    `${item.type}-${item.id}-0-0`
-                ).join('.');
+                const plainText = selectedItems.map(item => {
+                    const colorStr = item.colorValues ? item.colorValues.join('-') : '0';
+                    return `${item.type}-${item.id}-${colorStr}`;
+                }).join('.');
 
-                // Mostrar etiquetas clickeables
                 const tags = selectedItems.map((item, index) =>
-                    `<span class="selection-tag" data-index="${index}">${item.type}-${item.id}-0-0</span>`
+                    `<span class="selection-tag" data-index="${index}">${item.type}-${item.id}-${item.colorValues?.join('-') || '62'}</span>`
                 ).join('.');
 
                 selectionOutput.innerHTML = tags;
                 copyButton.disabled = false;
 
-                // Actualizar avatar
+                // En updateSelectionDisplay
                 const avatarUrl = generateAvatarUrl();
                 if (avatarUrl) {
-                    avatarImage.src = avatarUrl;
+                    // Forzar recarga incluso si la URL es la misma
+                    avatarImage.src = avatarUrl + '&t=' + Date.now();
                     avatarImage.style.display = 'inline-block';
                     avatarPlaceholder.style.display = 'none';
+                } else {
+                    avatarImage.style.display = 'none';
+                    avatarPlaceholder.style.display = 'block';
                 }
 
-                // Generar miniaturas
-                selectedItemsGrid.innerHTML = selectedItems.map((item, index) => {
-                    // Construir URL de la imagen del ítem
-                    const params = new URLSearchParams(window.location.search);
-                    let baseUrlParams = "";
-                    for (const [key, value] of params) {
-                        if (!['page', 'per_page', 'q', 'type'].includes(key)) {
-                            baseUrlParams += `&${encodeURIComponent(key)}=${encodeURIComponent(value)}`;
+                // Generar miniaturas con selectores en serie (10 por fila)
+                const miniaturasHTML = selectedItems.map((item, index) => {
+                    const categoryItems = dataCache[item.type]|| dataCache["Todos"] || [];
+                    const matchingItem = categoryItems.find(i => i.id == item.id);
+                    const palette = matchingItem?.palette || [];
+                    const colors = item.colors || 0;
+
+                    // Generar slots de color en serie
+                    let colorSlotsHTML = '';
+                    if (colors > 0) {
+                        for (let slot = 0; slot < colors; slot++) {
+                            // Swatches para este slot
+                            // Generar todos los swatches
+                            const allSwatches = [
+                                `<button
+                                    class="color-swatch ${(item.colorValues?.[slot] === '0' || !item.colorValues) ? 'active' : ''}"
+                                    data-color="0"
+                                    style="background: #e2e8f0;"
+                                    title="Color base">
+                                </button>`
+                            ];
+
+                            allSwatches.push(...palette.map(color => `
+                                <button
+                                    class="color-swatch ${(item.colorValues?.[slot] == color.color) ? 'active' : ''}"
+                                    data-color="${color.color}"
+                                    data-indice="${color.index}"
+                                    style="background: ${color.hexColor};"
+                                    title="Color ${color.color}, index:${color.index}">
+                                </button>
+                            `));
+
+                            // Agrupar en filas de 10
+                            const rowsHTML = [];
+                            for (let i = 0; i < allSwatches.length; i += 10) {
+                                const rowSwatches = allSwatches.slice(i, i + 10).join('');
+                                rowsHTML.push(`<div class="color-slot-row">${rowSwatches}</div>`);
+                            }
+
+                            // Envolver en contenedor con scroll
+                            colorSlotsHTML += `
+                                <div class="color-slot-container">
+                                    <div class="color-slot-rows">
+                                        ${rowsHTML.join('')}
+                                    </div>
+                                </div>
+                            `;
+
+                            // Agregar separador (excepto después del último slot)
+                            if (slot < colors - 1) {
+                                colorSlotsHTML += '<div class="color-separator"></div>';
+                            }
                         }
                     }
-                    const imageUrl = `/api/images/${item.lib_id}.nitro?sprite=0${baseUrlParams}`;
 
+                    // Usar lib_id original para la imagen base
+                    // DESPUÉS:
+                    const spriteParams = `sprite=0`;
+                    const imageUrl = buildApiUrl(`/api/images/${item.lib_id}.nitro`, {
+                        sprite: 0
+                    });
                     return `
                         <div class="selected-item-card" data-index="${index}">
-                            <img src="${imageUrl}" alt="${item.lib_id}" loading="lazy">
+                            <div class="image-container">
+                                <div class="image-loader">
+                                    <div class="spinner"></div>
+                                </div>
+                                <img src="${imageUrl}" alt="${item.lib_id}" class="item-image">
+                            </div>
                             <div class="item-id">${item.type}-${item.id}</div>
+                            <div class="itemlib_id">${item.lib_id}</div>
+                            ${colorSlotsHTML ? `<div class="color-slots-series">${colorSlotsHTML}</div>` : ''}
                         </div>
                     `;
                 }).join('');
 
-                // Asignar eventos a las "etiquetas"
-                document.querySelectorAll('.selection-tag').forEach(tag => {
-                    tag.addEventListener('click', (e) => {
-                        e.preventDefault();
-                        const index = parseInt(tag.dataset.index);
-                        selectedItems.splice(index, 1);
-                        updateSelectionDisplay();
-                    });
-                });
+                selectedItemsGrid.innerHTML = miniaturasHTML;
+
+                // Inicializar loaders y eventos de miniaturas
+                setTimeout(() => {
+                    document.querySelectorAll('.selected-item-card').forEach(card => {
+                        const img = card.querySelector('.item-image');
+                        const loader = card.querySelector('.image-loader');
+                        setupLazyImage(img, loader);
+
+                        // Evento de clic para eliminar (excepto en swatches)
+                        card.addEventListener('click', (e) => {
+                            if (e.target.closest('.color-swatch')) return;
+                            const index = parseInt(card.dataset.index);
+                            selectedItems.splice(index, 1);
+                            updateSelectionDisplay();
+                        });
 
-                // Asignar eventos a las miniaturas
-                document.querySelectorAll('.selected-item-card').forEach(card => {
-                    card.addEventListener('click', () => {
-                        const index = parseInt(card.dataset.index);
-                        selectedItems.splice(index, 1);
-                        updateSelectionDisplay();
+                        // Eventos de color corregidos
+                        const colorSlotContainers = card.querySelectorAll('.color-slot-container');
+                        colorSlotContainers.forEach((container, slotIndex) => {
+                            const swatches = container.querySelectorAll('.color-swatch');
+                            swatches.forEach(swatch => {
+                                swatch.addEventListener('click', (e) => {
+                                    e.stopPropagation();
+
+                                    // Actualizar valor de color
+                                    const colorValue = swatch.dataset.color;
+                                    const index = parseInt(card.dataset.index);
+
+                                    // Asegurar que exista el array de valores
+                                    if (!selectedItems[index].colorValues) {
+                                        selectedItems[index].colorValues = Array(selectedItems[index].colors).fill('0');
+                                    }
+
+                                    // Actualizar SOLO el slot correspondiente
+                                    selectedItems[index].colorValues[slotIndex] = colorValue;
+
+                                    // Actualizar vista
+                                    updateSelectionDisplay();
+                                });
+                            });
+                        });
                     });
-                });
+                }, 0);
 
                 // Evento de copiar
                 copyButton.onclick = async () => {
@@ -530,24 +1043,36 @@
                 };
             }
 
-            // ✅ FUNCIÓN changeSprite
-            function changeSprite(img, direction, counter, itemEl) {
-                const currentIndex = parseInt(img.dataset.spriteIndex);
-                const total = parseInt(itemEl.dataset.totalSprites);
-                let newIndex = currentIndex + direction;
+            // Parámetros de URL
+            const urlParams = new URLSearchParams(window.location.search);
+            // Generar baseUrlParams SIN el primer "?"
+            let baseUrlParams = "";
+            for (const [key, value] of urlParams) {
+                if (!['page', 'per_page', 'q', 'type'].includes(key)) {
+                    baseUrlParams += `${baseUrlParams ? '&' : '?'}${encodeURIComponent(key)}=${encodeURIComponent(value)}`;
+                }
+            }
+            if (baseUrlParams) baseUrlParams = "?" + baseUrlParams.substring(1);
 
-                if (newIndex < 0) newIndex = total - 1;
-                if (newIndex >= total) newIndex = 0;
+            let currentType = null;
+            let currentPage = 1;
+            let perPage = 10;
+            const maxPerPage = {{ max_per_page }};
 
-                const url = new URL(img.src);
-                url.searchParams.set('sprite', newIndex);
-                img.src = url.toString();
-                img.dataset.spriteIndex = newIndex;
-                counter.textContent = `${newIndex + 1} / ${total}`;
-            }
+            // Elementos del DOM
+            const typesContainer = document.getElementById('typesContainer');
+            const grid = document.getElementById('furnisGrid');
+            const paginationEl = document.getElementById('paginationControls');
+            const prevBtn = document.getElementById('prevBtn');
+            const nextBtn = document.getElementById('nextBtn');
+            const currentPageEl = document.getElementById('currentPage');
+            const totalPagesEl = document.getElementById('totalPages');
+            const perPageInput = document.getElementById('perPageInput');
+            const selectionOutput = document.getElementById('selectionOutput');
 
             // Cargar contenido
             function loadContent(page, searchQuery = '') {
+
                 if (!currentType) return;
 
                 const params = new URLSearchParams();
@@ -563,7 +1088,12 @@
                     }
                 }
 
-                const apiUrl = `/api/findfurni?${params.toString()}`;
+                const apiUrl = buildApiUrl('/api/findfurni', {
+                    type: currentType,
+                    page: page,
+                    per_page: perPageInput.value || 10,
+                    q: searchQuery
+                });
                 fetch(apiUrl)
                     .then(response => response.json())
                     .then(data => {
@@ -572,51 +1102,74 @@
                             return;
                         }
 
+                        // Almacenar en caché para acceder a la paleta
+                        dataCache[currentType] = data.items;
+                        console.log(dataCache)
+
                         if (data.items.length === 0) {
                             grid.innerHTML = '<div class="loading">No se encontraron resultados.</div>';
                         } else {
-                            grid.innerHTML = data.items.map(item => `
-                                <div class="item" data-lib-id="${item.lib_id}" data-id="${item.id}" data-type="${item.type}">
-                                    <div class="sprite-container">
-                                        <img src="${item.image_url}&sprite=0" alt="${item.lib_id}" class="sprite-image" data-sprite-index="0">
-                                        <div class="sprite-controls">
-                                            <button class="sprite-btn prev" data-action="prev">◀</button>
-                                            <span class="sprite-counter">1 / ?</span>
-                                            <button class="sprite-btn next" data-action="next">▶</button>
+                            grid.innerHTML = data.items.map(item => {
+                                const isSelected = selectedItems.some(
+                                    sel => sel.type === item.type && sel.id == item.id
+                                );
+
+                                return `
+                                    <div class="item ${isSelected ? 'selected' : ''}"
+                                         data-lib-id="${item.lib_id}"
+                                         data-id="${item.id}"
+                                         data-type="${item.type}">
+                                        <div class="sprite-container">
+                                            <div class="image-container">
+                                                <div class="image-loader">
+                                                    <div class="spinner"></div>
+                                                </div>
+                                                <img src="${item.image_url}&sprite=0" alt="${item.lib_id}" class="sprite-image" data-sprite-index="0">
+                                            </div>
+                                            <div class="sprite-controls">
+                                                <button class="sprite-btn prev" data-action="prev">◀</button>
+                                                <span class="sprite-counter">1 / ?</span>
+                                                <button class="sprite-btn next" data-action="next">▶</button>
+                                            </div>
                                         </div>
+                                        <div class="id">${item.lib_id}</div>
                                     </div>
-                                    <div class="id">${item.lib_id}</div>
-                                </div>
-                            `).join('');
+                                `;
+                            }).join('');
 
-                            // Inicializar controles y eventos de selección
+                            // Inicializar loaders e interacciones
                             document.querySelectorAll('.item').forEach(itemEl => {
                                 const img = itemEl.querySelector('.sprite-image');
+                                const loader = itemEl.querySelector('.image-loader');
                                 const counter = itemEl.querySelector('.sprite-counter');
                                 const prevBtn = itemEl.querySelector('.prev');
                                 const nextBtn = itemEl.querySelector('.next');
 
-                                // Evento de selección (único por categoría)
-                                itemEl.addEventListener('click', () => {
+                                setupLazyImage(img, loader);
+
+                                // Evento de selección
+                                itemEl.addEventListener('click', (e) => {
+                                    if (e.target.closest('.sprite-controls')) return;
+
                                     const type = itemEl.dataset.type;
                                     const id = itemEl.dataset.id;
-                                    const lib_id = itemEl.dataset.libId; // ← ¡Nuevo!
-
-                                    // Buscar si ya existe un ítem en esta categoría
+                                    const lib_id = itemEl.dataset.libId;
+                                    const categoryItems = dataCache[type] || dataCache["Todos"] || [];
+                                    const matchingItem = categoryItems.find(i => i.id == id);
+                                    const colors = matchingItem?.colors || 0;
+                                    console.log(matchingItem)
                                     const existingIndex = selectedItems.findIndex(item => item.type === type);
 
                                     if (existingIndex !== -1) {
-                                        // Reemplazar el ítem existente
-                                        selectedItems[existingIndex] = { type, id, lib_id }; // ← Incluye lib_id
+                                        selectedItems[existingIndex] = { type, id, lib_id, colors };
                                     } else {
-                                        // Agregar nuevo ítem
-                                        selectedItems.push({ type, id, lib_id }); // ← Incluye lib_id
+                                        selectedItems.push({ type, id, lib_id, colors });
                                     }
 
                                     updateSelectionDisplay();
                                 });
 
-                                // Controles de sprite
+                                // Obtener total de sprites
                                 fetch(`${img.src}&get_total=1`)
                                     .then(res => res.json())
                                     .then(data => {
@@ -629,12 +1182,14 @@
                                         itemEl.dataset.totalSprites = "1";
                                     });
 
+                                // Eventos de navegación
                                 prevBtn.addEventListener('click', (e) => {
-                                    e.stopPropagation(); // Evitar que se dispare el click del ítem
+                                    e.stopPropagation();
                                     changeSprite(img, -1, counter, itemEl);
                                 });
+
                                 nextBtn.addEventListener('click', (e) => {
-                                    e.stopPropagation(); // Evitar que se dispare el click del ítem
+                                    e.stopPropagation();
                                     changeSprite(img, 1, counter, itemEl);
                                 });
                             });
@@ -652,7 +1207,7 @@
                     });
             }
 
-            // Evento de búsqueda
+            // Búsqueda
             let searchTimeout;
             function getSearchQuery() {
                 return document.getElementById('searchInput').value.trim();
@@ -665,7 +1220,7 @@
                 }, 300);
             });
 
-            // Cambiar elementos por página
+            // Controles
             perPageInput.addEventListener('change', () => {
                 let val = parseInt(perPageInput.value) || 10;
                 val = Math.max(1, Math.min(val, maxPerPage));
@@ -674,7 +1229,6 @@
                 if (currentType) loadContent(currentPage, getSearchQuery());
             });
 
-            // Seleccionar tipo
             typesContainer.addEventListener('click', (e) => {
                 if (e.target.classList.contains('type-btn')) {
                     document.querySelectorAll('.type-btn').forEach(btn => btn.classList.remove('active'));
@@ -700,7 +1254,128 @@
                     loadContent(currentPage, getSearchQuery());
                 }
             });
+            // Cargador de figurestring inteligente
+            document.getElementById('loadButton').addEventListener('click', async () => {
+                const input = document.getElementById('figurestringLoad');
+                const message = document.getElementById('loadMessage');
+                const figurestring = input.value.trim();
+
+                if (!figurestring) {
+                    message.innerHTML = '<span style="color:#e53e3e;">Ingresa una figurestring válida</span>';
+                    return;
+                }
+
+                try {
+                    message.innerHTML = 'Cargando...';
+                    selectedItems.length = 0;
+
+                    // Parsear figurestring
+                    const parts = figurestring.split('.');
+                    const loadPromises = [];
+
+                    for (const part of parts) {
+                        const tokens = part.split('-');
+                        if (tokens.length < 2) continue;
+
+                        const ptype = tokens[0];
+                        const pid = tokens[1];
+                        const colors = tokens.slice(2).length > 0 ? tokens.slice(2) : ['0'];
+
+                        // Hacer llamada a findfurni para obtener datos reales
+                        const promise = fetch(`/api/findfurni?type=${ptype}&q=${pid}${baseUrlParams}`)
+                            .then(response => response.json())
+                            .then(data => {
+                                if (data.items && data.items.length > 0) {
+                                    // Encontrado - usar primer resultado
+                                    const item = data.items[0];
+                                    selectedItems.push({
+                                        type: ptype,
+                                        id: pid,
+                                        lib_id: item.lib_id,
+                                        colors: colors.length,
+                                        colorValues: colors,
+                                        palette: item.palette || []
+                                    });
+                                } else {
+                                    // No encontrado - placeholder
+                                    selectedItems.push({
+                                        type: ptype,
+                                        id: pid,
+                                        lib_id: `${ptype}-${pid}`,
+                                        colors: colors.length,
+                                        colorValues: colors,
+                                        palette: [],
+                                        isPlaceholder: true
+                                    });
+                                }
+                            })
+                            .catch(err => {
+                                // Error - placeholder
+                                selectedItems.push({
+                                    type: ptype,
+                                    id: pid,
+                                    lib_id: `${ptype}-${pid}`,
+                                    colors: colors.length,
+                                    colorValues: colors,
+                                    palette: [],
+                                    isPlaceholder: true
+                                });
+                            });
+
+                        loadPromises.push(promise);
+                    }
+
+                    // Esperar todas las llamadas
+                    await Promise.all(loadPromises);
+
+                    message.innerHTML = `<span style="color:#48bb78;">¡Figura cargada!</span>`;
+                    input.value = '';
+                    updateSelectionDisplay();
+
+                    setTimeout(() => {
+                        message.innerHTML = '';
+                    }, 3000);
+
+                } catch (err) {
+                    console.error('Error al cargar:', err);
+                    message.innerHTML = '<span style="color:#e53e3e;">Error al cargar la figura</span>';
+                }
+            });
+
+            // Permitir cargar con Enter
+            document.getElementById('figurestringLoad').addEventListener('keypress', (e) => {
+                if (e.key === 'Enter') {
+                    document.getElementById('loadButton').click();
+                }
+            });
+            // Inicializar controles del avatar
+            document.addEventListener('DOMContentLoaded', () => {
+                // Aplicar cambios al cambiar cualquier control
+                const controls = [
+                    'directionSelect', 'headDirectionSelect', 'postureSelect',
+                    'expressionSelect', 'gestureSelect', 'danceSelect', 'sizeSelect', 'effectInput'
+                ];
+
+                controls.forEach(id => {
+                    const element = document.getElementById(id);
+                    if (element) {
+                        element.addEventListener('change', () => {
+                            // Actualizar avatarState
+                            avatarState.direction = parseInt(document.getElementById('directionSelect').value) || 2;
+                            avatarState.headDirection = parseInt(document.getElementById('headDirectionSelect').value) || 2;
+                            avatarState.posture = document.getElementById('postureSelect').value || 'std';
+                            avatarState.expression = document.getElementById('expressionSelect').value || '';
+                            avatarState.gesture = document.getElementById('gestureSelect').value || 'std';
+                            avatarState.dance = parseInt(document.getElementById('danceSelect').value) || 0;
+                            avatarState.size = document.getElementById('sizeSelect').value || 'n';
+                            avatarState.effect = parseInt(document.getElementById('effectInput').value) || 0;
 
+                            // Actualizar vista
+                            updateSelectionDisplay();
+                        });
+                    }
+                });
+            });
             // Iniciar
             document.querySelector('.type-btn')?.click();
         </script>

templates/efectos.html

@@ -0,0 +1,708 @@
+<!DOCTYPE html>
+<html lang="es">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>✨ Efectos Nitro - Avatar Studio</title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        :root {
+            --primary: #ff00ff;
+            --secondary: #00ffff;
+            --dark: #0a0a1a;
+            --light: #ffffff;
+            --gradient-angle: 135deg;
+        }
+
+        body {
+            background: linear-gradient(var(--gradient-angle), #0f0c29, #302b63, #24243e);
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            min-height: 100vh;
+            padding: 20px;
+            color: var(--light);
+            overflow-x: hidden;
+        }
+
+        .container {
+            max-width: 1400px;
+            margin: 0 auto;
+        }
+
+        /* ===== HEADER ===== */
+        header {
+            text-align: center;
+            padding: 30px 0;
+            margin-bottom: 30px;
+            position: relative;
+        }
+
+        header::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            height: 4px;
+            background: linear-gradient(90deg, transparent, var(--primary), var(--secondary), transparent);
+            animation: glow 2s ease-in-out infinite;
+        }
+
+        @keyframes glow {
+            0%, 100% { opacity: 0.7; }
+            50% { opacity: 1; }
+        }
+
+        h1 {
+            font-size: 3.5rem;
+            margin-bottom: 10px;
+            background: linear-gradient(90deg, var(--primary), var(--secondary), #ff9966, var(--primary));
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-size: 300% 300%;
+            animation: gradientShift 8s ease infinite;
+            text-shadow: 0 0 20px rgba(255, 0, 255, 0.5);
+            letter-spacing: 2px;
+        }
+
+        @keyframes gradientShift {
+            0% { background-position: 0% 50%; }
+            50% { background-position: 100% 50%; }
+            100% { background-position: 0% 50%; }
+        }
+
+        .subtitle {
+            font-size: 1.2rem;
+            color: #aaa;
+            margin-top: 10px;
+            font-weight: 300;
+        }
+
+        /* ===== SEARCH & FILTERS ===== */
+        .controls {
+            background: rgba(20, 20, 40, 0.8);
+            backdrop-filter: blur(10px);
+            border-radius: 15px;
+            padding: 20px;
+            margin-bottom: 30px;
+            border: 1px solid rgba(255, 0, 255, 0.2);
+            box-shadow: 0 0 30px rgba(255, 0, 255, 0.1);
+        }
+
+        .search-container {
+            display: flex;
+            gap: 15px;
+            flex-wrap: wrap;
+            align-items: center;
+        }
+
+        .search-box {
+            flex: 1;
+            min-width: 300px;
+        }
+
+        .search-box input {
+            width: 100%;
+            padding: 12px 20px;
+            border: 2px solid var(--primary);
+            border-radius: 50px;
+            background: rgba(30, 30, 60, 0.8);
+            color: white;
+            font-size: 1rem;
+            transition: all 0.3s ease;
+        }
+
+        .search-box input:focus {
+            outline: none;
+            border-color: var(--secondary);
+            box-shadow: 0 0 20px rgba(0, 255, 255, 0.3);
+        }
+
+        .search-box input::placeholder {
+            color: #888;
+        }
+
+        .filter-btn {
+            padding: 12px 25px;
+            background: linear-gradient(90deg, var(--primary), var(--secondary));
+            border: none;
+            border-radius: 50px;
+            color: white;
+            font-weight: bold;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            box-shadow: 0 5px 15px rgba(255, 0, 255, 0.4);
+        }
+
+        .filter-btn:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 8px 25px rgba(255, 0, 255, 0.6);
+        }
+
+        .filter-btn:active {
+            transform: translateY(1px);
+        }
+
+        /* ===== STATS BAR ===== */
+        .stats-bar {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            background: rgba(30, 30, 60, 0.8);
+            padding: 15px 25px;
+            border-radius: 10px;
+            margin-bottom: 25px;
+            border-left: 4px solid var(--secondary);
+        }
+
+        .total-count {
+            font-size: 1.3rem;
+            font-weight: bold;
+            color: var(--secondary);
+        }
+
+        .view-toggle {
+            display: flex;
+            gap: 10px;
+        }
+
+        .view-btn {
+            padding: 8px 15px;
+            background: rgba(50, 50, 100, 0.7);
+            border: 2px solid var(--primary);
+            border-radius: 8px;
+            color: white;
+            cursor: pointer;
+            transition: all 0.3s ease;
+        }
+
+        .view-btn.active {
+            background: var(--primary);
+            border-color: white;
+            box-shadow: 0 0 15px rgba(255, 0, 255, 0.5);
+        }
+
+        .view-btn:hover:not(.active) {
+            background: rgba(255, 0, 255, 0.3);
+        }
+
+        /* ===== EFFECTS GRID ===== */
+        .effects-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+            gap: 25px;
+            padding: 10px;
+        }
+
+        .effect-card {
+            background: rgba(30, 30, 60, 0.7);
+            border-radius: 15px;
+            overflow: hidden;
+            border: 2px solid transparent;
+            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+            position: relative;
+            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
+        }
+
+        .effect-card::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: linear-gradient(45deg, transparent, rgba(255, 0, 255, 0.1), transparent);
+            z-index: 1;
+            opacity: 0;
+            transition: opacity 0.3s ease;
+        }
+
+        .effect-card:hover {
+            transform: translateY(-10px) scale(1.03);
+            box-shadow: 0 15px 40px rgba(255, 0, 255, 0.4);
+            border-color: var(--primary);
+        }
+
+        .effect-card:hover::before {
+            opacity: 1;
+        }
+
+        .effect-card:hover .effect-img {
+            transform: scale(1.1);
+            filter: brightness(1.2) saturate(1.3);
+        }
+
+        .effect-card:hover .effect-info {
+            background: rgba(40, 40, 80, 0.95);
+        }
+
+        .effect-img-container {
+            position: relative;
+            aspect-ratio: 1;
+            overflow: hidden;
+            background: linear-gradient(135deg, #1a1a2e, #16213e);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+
+        .effect-img {
+            width: 80%;
+            height: 80%;
+            object-fit: contain;
+            transition: all 0.4s ease;
+            cursor: pointer;
+            animation: pulse 3s ease-in-out infinite;
+        }
+
+        @keyframes pulse {
+            0%, 100% { transform: scale(1); }
+            50% { transform: scale(1.05); }
+        }
+
+        .effect-img.loading {
+            opacity: 0.3;
+        }
+
+        .effect-img.error {
+            display: none;
+        }
+
+        .loading-spinner {
+            position: absolute;
+            width: 40px;
+            height: 40px;
+            border: 4px solid rgba(255, 255, 255, 0.3);
+            border-top: 4px solid var(--primary);
+            border-radius: 50%;
+            animation: spin 1s linear infinite;
+        }
+
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+
+        .effect-info {
+            padding: 15px;
+            background: rgba(25, 25, 50, 0.9);
+            transition: all 0.3s ease;
+        }
+
+        .effect-id {
+            font-size: 0.9rem;
+            color: var(--secondary);
+            font-weight: bold;
+            margin-bottom: 5px;
+            text-transform: uppercase;
+            letter-spacing: 1px;
+        }
+
+        .effect-type {
+            font-size: 0.85rem;
+            color: #aaa;
+            background: rgba(0, 255, 255, 0.1);
+            padding: 3px 10px;
+            border-radius: 15px;
+            display: inline-block;
+        }
+
+        /* ===== EMPTY STATE ===== */
+        .empty-state {
+            grid-column: 1 / -1;
+            text-align: center;
+            padding: 60px 20px;
+            background: rgba(30, 30, 60, 0.5);
+            border-radius: 15px;
+            border: 2px dashed rgba(255, 0, 255, 0.3);
+        }
+
+        .empty-state i {
+            font-size: 4rem;
+            color: var(--secondary);
+            margin-bottom: 20px;
+            animation: bounce 2s ease-in-out infinite;
+        }
+
+        @keyframes bounce {
+            0%, 100% { transform: translateY(0); }
+            50% { transform: translateY(-20px); }
+        }
+
+        .empty-state h3 {
+            font-size: 1.8rem;
+            margin-bottom: 10px;
+            background: linear-gradient(90deg, var(--primary), var(--secondary));
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+        }
+
+        .empty-state p {
+            color: #888;
+            max-width: 500px;
+            margin: 0 auto;
+        }
+
+        /* ===== LOADING SKELETON ===== */
+        .skeleton {
+            background: linear-gradient(90deg, #2a2a4a, #3a3a5a, #2a2a4a);
+            background-size: 200% 100%;
+            animation: shimmer 1.5s ease-in-out infinite;
+            border-radius: 15px;
+            overflow: hidden;
+        }
+
+        @keyframes shimmer {
+            0% { background-position: 200% 0; }
+            100% { background-position: -200% 0; }
+        }
+
+        /* ===== FOOTER ===== */
+        footer {
+            text-align: center;
+            padding: 30px;
+            margin-top: 40px;
+            color: #888;
+            font-size: 0.9rem;
+            border-top: 1px solid rgba(255, 255, 255, 0.1);
+        }
+
+        /* ===== NOTIFICATION ===== */
+        .notification {
+            position: fixed;
+            top: 20px;
+            right: 20px;
+            padding: 15px 25px;
+            background: rgba(30, 30, 60, 0.95);
+            border-left: 4px solid var(--primary);
+            color: white;
+            border-radius: 10px;
+            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5);
+            transform: translateX(400px);
+            transition: transform 0.3s ease;
+            z-index: 1000;
+        }
+
+        .notification.show {
+            transform: translateX(0);
+        }
+
+        .notification.success {
+            border-left-color: #00ff9d;
+        }
+
+        .notification.error {
+            border-left-color: #ff4d4d;
+        }
+
+        /* ===== MODAL ===== */
+        .modal {
+            display: none;
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0, 0, 0, 0.9);
+            z-index: 2000;
+            justify-content: center;
+            align-items: center;
+            opacity: 0;
+            transition: opacity 0.3s ease;
+        }
+
+        .modal.show {
+            display: flex;
+            opacity: 1;
+        }
+
+        .modal-content {
+            background: rgba(30, 30, 60, 0.95);
+            border: 3px solid var(--secondary);
+            border-radius: 20px;
+            padding: 30px;
+            max-width: 90%;
+            max-height: 90%;
+            position: relative;
+        }
+
+        .modal-close {
+            position: absolute;
+            top: 15px;
+            right: 15px;
+            background: rgba(255, 0, 255, 0.2);
+            border: none;
+            color: white;
+            width: 35px;
+            height: 35px;
+            border-radius: 50%;
+            cursor: pointer;
+            font-size: 1.2rem;
+            transition: all 0.3s ease;
+        }
+
+        .modal-close:hover {
+            background: var(--primary);
+            transform: rotate(90deg);
+        }
+
+        .modal-gif {
+            max-width: 80vw;
+            max-height: 70vh;
+            border: 2px solid var(--primary);
+            border-radius: 10px;
+            box-shadow: 0 0 50px rgba(255, 0, 255, 0.5);
+        }
+
+        /* ===== RESPONSIVE ===== */
+        @media (max-width: 768px) {
+            h1 {
+                font-size: 2.5rem;
+            }
+
+            .search-box {
+                min-width: 100%;
+            }
+
+            .effects-grid {
+                grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+            }
+
+            .effect-img {
+                width: 70%;
+                height: 70%;
+            }
+        }
+
+        @media (max-width: 480px) {
+            h1 {
+                font-size: 2rem;
+            }
+
+            .controls {
+                padding: 15px;
+            }
+
+            .stats-bar {
+                flex-direction: column;
+                gap: 15px;
+            }
+
+            .effects-grid {
+                grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <!-- Header -->
+        <header>
+            <h1><i class="fas fa-magic"></i> NITRO EFFECTS STUDIO</h1>
+            <p class="subtitle">Colección de efectos animados para tu avatar</p>
+        </header>
+
+        <!-- Controls -->
+        <div class="controls">
+            <div class="search-container">
+                <div class="search-box">
+                    <input type="text" id="searchInput" placeholder="🔍 Buscar efecto por ID o tipo..." onkeyup="filterEffects()">
+                </div>
+                <button class="filter-btn" onclick="clearFilters()">
+                    <i class="fas fa-sync-alt"></i> Limpiar
+                </button>
+            </div>
+        </div>
+
+        <!-- Stats -->
+        <div class="stats-bar">
+            <div class="total-count">
+                <i class="fas fa-fire"></i> <span id="totalCount">{{ efectos|length }}</span> efectos disponibles
+            </div>
+            <div class="view-toggle">
+                <button class="view-btn active" onclick="setView('grid')">
+                    <i class="fas fa-th-large"></i> Cuadrícula
+                </button>
+                <button class="view-btn" onclick="setView('list')">
+                    <i class="fas fa-list"></i> Lista
+                </button>
+            </div>
+        </div>
+
+        <!-- Effects Grid -->
+        <div class="effects-grid" id="effectsContainer">
+            {% if efectos|length == 0 %}
+                <div class="empty-state">
+                    <i class="fas fa-ghost"></i>
+                    <h3>¡No hay efectos!</h3>
+                    <p>Parece que no se encontraron efectos con los parámetros actuales. Intenta ajustar la configuración o verifica la URL.</p>
+                </div>
+            {% else %}
+                {% for efecto in efectos %}
+                <div class="effect-card" data-id="{{ efecto.id }}" data-type="{{ efecto.tipo }}">
+                    <div class="effect-img-container">
+                        <div class="loading-spinner"></div>
+                        <img
+                            src="{{ efecto.file }}"
+                            alt="{{ efecto.id }}"
+                            class="effect-img loading"
+                            onerror="handleImageError(this)"
+                            onload="handleImageLoad(this)"
+                            onclick="showGifModal('{{ efecto.file }}', '{{ efecto.id }}')"
+                        />
+                    </div>
+                    <div class="effect-info">
+                        <div class="effect-id">{{ efecto.id }}</div>
+                        <div class="effect-type"><i class="fas fa-tag"></i> {{ efecto.tipo }}</div>
+                    </div>
+                </div>
+                {% endfor %}
+            {% endif %}
+        </div>
+    </div>
+
+    <!-- Modal for GIF preview -->
+    <div class="modal" id="gifModal">
+        <div class="modal-content">
+            <button class="modal-close" onclick="closeModal()">&times;</button>
+            <img class="modal-gif" id="modalGif" src="" alt="Preview">
+        </div>
+    </div>
+
+    <!-- Notification -->
+    <div class="notification" id="notification"></div>
+
+    <script>
+        // ========== IMAGE HANDLING ==========
+        function handleImageLoad(img) {
+            img.classList.remove('loading');
+        }
+
+        function handleImageError(img) {
+            img.classList.add('error');
+            img.parentElement.querySelector('.loading-spinner').style.display = 'none';
+            img.parentElement.innerHTML = '<i class="fas fa-times-circle" style="font-size: 3rem; color: #ff4d4d;"></i>';
+        }
+
+        // ========== SEARCH & FILTER ==========
+        function filterEffects() {
+            const searchTerm = document.getElementById('searchInput').value.toLowerCase();
+            const cards = document.querySelectorAll('.effect-card');
+            let visibleCount = 0;
+
+            cards.forEach(card => {
+                const id = card.dataset.id.toLowerCase();
+                const type = card.dataset.type.toLowerCase();
+
+                if (id.includes(searchTerm) || type.includes(searchTerm)) {
+                    card.style.display = '';
+                    visibleCount++;
+                } else {
+                    card.style.display = 'none';
+                }
+            });
+
+            document.getElementById('totalCount').textContent = visibleCount;
+
+            // Show empty state if needed
+            const grid = document.getElementById('effectsContainer');
+            if (visibleCount === 0 && cards.length > 0) {
+                if (!grid.querySelector('.empty-state')) {
+                    const emptyState = document.createElement('div');
+                    emptyState.className = 'empty-state';
+                    emptyState.innerHTML = `
+                        <i class="fas fa-search"></i>
+                        <h3>¡No se encontraron resultados!</h3>
+                        <p>Intenta con otro término de búsqueda</p>
+                    `;
+                    emptyState.style.gridColumn = '1 / -1';
+                    grid.appendChild(emptyState);
+                }
+            } else {
+                const emptyState = grid.querySelector('.empty-state');
+                if (emptyState) emptyState.remove();
+            }
+        }
+
+        function clearFilters() {
+            document.getElementById('searchInput').value = '';
+            filterEffects();
+            showNotification('Filtros limpiados', 'success');
+        }
+
+        // ========== VIEW MODE ==========
+        function setView(mode) {
+            const grid = document.getElementById('effectsContainer');
+            const buttons = document.querySelectorAll('.view-btn');
+
+            buttons.forEach(btn => btn.classList.remove('active'));
+            event.target.classList.add('active');
+
+            if (mode === 'list') {
+                grid.style.gridTemplateColumns = '1fr';
+            } else {
+                grid.style.gridTemplateColumns = 'repeat(auto-fill, minmax(220px, 1fr))';
+            }
+
+            showNotification(`Vista: ${mode === 'list' ? 'Lista' : 'Cuadrícula'}`, 'success');
+        }
+
+        // ========== MODAL ==========
+        function showGifModal(src, id) {
+            const modal = document.getElementById('gifModal');
+            const gif = document.getElementById('modalGif');
+
+            gif.src = src;
+            modal.classList.add('show');
+
+            // Log for analytics
+            console.log(`Previewing effect: ${id}`);
+        }
+
+        function closeModal() {
+            const modal = document.getElementById('gifModal');
+            modal.classList.remove('show');
+            document.getElementById('modalGif').src = '';
+        }
+
+        // Close modal on click outside
+        window.onclick = function(event) {
+            const modal = document.getElementById('gifModal');
+            if (event.target === modal) {
+                closeModal();
+            }
+        }
+
+        // Close modal on Escape key
+        document.addEventListener('keydown', function(event) {
+            if (event.key === 'Escape') {
+                closeModal();
+            }
+        });
+
+        // ========== NOTIFICATIONS ==========
+        function showNotification(message, type = 'info') {
+            const notification = document.getElementById('notification');
+            notification.textContent = message;
+            notification.className = `notification ${type} show`;
+
+            setTimeout(() => {
+                notification.classList.remove('show');
+            }, 3000);
+        }
+
+        // ========== PAGE LOAD ==========
+        window.addEventListener('load', function() {
+            // Show welcome message
+            setTimeout(() => {
+                showNotification(`✨ ${document.getElementById('totalCount').textContent} efectos cargados`, 'success');
+            }, 500);
+        });
+    </script>
+</body>
+</html>