Update anuncios.html

Signed-off-by: Grouvex <168425996+Grouvex@users.noreply.github.com>
Grouvex · Feb 22, 2025 · 0894410 · 0894410
1 parent 83e93df
commit 0894410
Showing 1 changed file with 58 additions and 30 deletions.
diff --git a/anuncios.html b/anuncios.html
@@ -395,39 +395,67 @@
             const anunciosParaCargar = anunciosFiltrados.slice(anunciosCargados, anunciosCargados + anunciosPorCarga);
 
             anunciosParaCargar.forEach(anuncio => {
-                const urlAnuncio = `anuncio.html?id=${anuncio.id}`;
-                const esNuevoAnuncio = esNuevo(anuncio.uT);
-                const anuncioHTML = `
-                    <div id="${sanitizeHTML(anuncio.id)}" class="anuncio">
-                        <a href="${sanitizeHTML(urlAnuncio)}">
-                            <div class="cabecera-anuncio">
-                                <img src="${sanitizeHTML(anuncio.userimagen)}" alt="${sanitizeHTML(anuncio.user)}">
-                                <span class="user"></span>
-                                <p><span id="${sanitizeHTML(anuncio.actualizadoID)}"></span></p>
-                                <p>${sanitizeHTML(anuncio.tipo)}</p>
-                                ${esNuevoAnuncio ? '<span class="etiqueta-nuevo">Nuevo</span>' : ''}
-                            </div>
-                            <div class="contenido-anuncio">
-                                <h1>${sanitizeHTML(anuncio.titulo)}</h1>
-                                <p>${sanitizeHTML(anuncio.contenido)}</p>
-                                <div class="mas-info">
-                                    ${sanitizeHTML(anuncio.masInfo)}
-                                </div>
-                                <button class="ver-mas">Ver más</button>
-                            </div>
-                        </a>
+    const urlAnuncio = `anuncio.html?id=${anuncio.id}`;
+    const esNuevoAnuncio = esNuevo(anuncio.uT);
+    const anuncioHTML = `
+        <div id="anuncio-${sanitizeHTML(anuncio.id)}" class="anuncio">
+            <a href="${sanitizeHTML(urlAnuncio)}">
+                <div class="cabecera-anuncio">
+                    <img src="${sanitizeHTML(anuncio.userimagen)}" alt="${sanitizeHTML(anuncio.user)}">
+                    <div class="usuario-info">
+                        <span class="user"></span> <!-- Nombre del usuario -->
+                        <div class="insignias-principales"></div> <!-- Insignias principales -->
+                        <details class="insignias-secundarias">
+                            <summary>Insignias Secundarias</summary>
+                            <div class="insignias-secundarias-container"></div>
+                        </details>
                     </div>
-                `;
-                content.insertAdjacentHTML('beforeend', anuncioHTML);
-
-                // Asignar la clase dinámica al elemento .user
-                const userSpan = document.querySelector(`.user`);
-                if (userSpan) {
-                    userSpan.className = anuncio.user.replace(/\s+/g, '-');
-                }
+                    <p><span id="${sanitizeHTML(anuncio.actualizadoID)}"></span></p>
+                    <p>${sanitizeHTML(anuncio.tipo)}</p>
+                    ${esNuevoAnuncio ? '<span class="etiqueta-nuevo">Nuevo</span>' : ''}
+                </div>
+                <div class="contenido-anuncio">
+                    <h1>${sanitizeHTML(anuncio.titulo)}</h1>
+                    <p>${sanitizeHTML(anuncio.contenido)}</p>
+                    <div class="mas-info">
+                        ${sanitizeHTML(anuncio.masInfo)}
+                    </div>
+                    <button class="ver-mas">Ver más</button>
+                </div>
+            </a>
+        </div>
+    `;
+    content.insertAdjacentHTML('beforeend', anuncioHTML);
+
+    // Seleccionar los elementos dentro del anuncio recién creado
+    const userSpan = document.querySelector(`#anuncio-${sanitizeHTML(anuncio.id)} .user`);
+    const insigniasPrincipales = document.querySelector(`#anuncio-${sanitizeHTML(anuncio.id)} .insignias-principales`);
+    const insigniasSecundarias = document.querySelector(`#anuncio-${sanitizeHTML(anuncio.id)} .insignias-secundarias-container`);
+
+    if (userSpan && insigniasPrincipales && insigniasSecundarias) {
+        // Asignar el nombre del usuario
+        userSpan.textContent = anuncio.user;
+
+        // Asignar las insignias principales
+        const usuario = usuarios[anuncio.user];
+        if (usuario) {
+            usuario.principales.forEach(insignia => {
+                const spanInsignia = document.createElement("span");
+                spanInsignia.classList.add("insignia", insignia);
+                insigniasPrincipales.appendChild(spanInsignia);
+            });
 
-                actualizarFechas(anuncio.uT, anuncio.actualizadoID);
+            // Asignar las insignias secundarias
+            usuario.secundarias.forEach(insignia => {
+                const spanInsignia = document.createElement("span");
+                spanInsignia.classList.add("insignia", insignia);
+                insigniasSecundarias.appendChild(spanInsignia);
             });
+        }
+    }
+
+    actualizarFechas(anuncio.uT, anuncio.actualizadoID);
+});
 
             anunciosCargados += anunciosParaCargar.length;