${escapeHtml(clan.badge)}
${escapeHtml(clan.name)}
${escapeHtml(clan.description)}
diff --git a/ai/tasks/done/TASK-040-randomized-community-clans-section.md b/ai/tasks/done/TASK-040-randomized-community-clans-section.md
new file mode 100644
index 0000000..d546bb7
--- /dev/null
+++ b/ai/tasks/done/TASK-040-randomized-community-clans-section.md
@@ -0,0 +1,107 @@
+# TASK-040-randomized-community-clans-section
+
+## Goal
+Implementar una sección única de clanes/comunidades en la landing principal, mostrando los clanes indicados con sus logos y enlaces a Discord, en orden aleatorio en cada carga de página.
+
+## Context
+La home ya incorpora una sección de clanes/comunidad, pero ahora hay una definición concreta de qué clanes deben aparecer, qué logos deben usarse y qué Discord debe enlazarse en cada caso. La sección debe ser única, clara y mantenible, y el orden de los clanes debe variar aleatoriamente cada vez que se cargue la página.
+
+## Datos a usar
+Los clanes/comunidades que deben mostrarse son estos:
+
+1. LCM
+ - Discord: `https://discord.gg/9F9S353QZv`
+ - Logo: usar la imagen proporcionada para LCM
+
+2. La 129
+ - Discord: placeholder por ahora
+ - Logo: usar la imagen proporcionada para La 129
+
+3. 250 Hispania
+ - Discord: `https://discord.gg/3E62Yb6Aw3`
+ - Logo: usar solo el escudo de la imagen proporcionada, quitando la parte de texto `Historia de la 250` y quedándose únicamente con el emblema/escudo
+
+4. H9H
+ - Discord: `https://discord.gg/tYnXK7MQjB`
+ - Logo: placeholder por ahora
+
+5. BxB
+ - Discord: placeholder por ahora
+ - Logo: usar la imagen proporcionada para BxB
+
+6. 7dv
+ - Discord: `https://discord.gg/3sxNQZwrg6`
+ - Logo: usar la imagen proporcionada para 7dv
+
+## Steps
+1. Revisar la landing actual y la sección de clanes/comunidad ya existente.
+2. Ajustar la sección para que muestre exactamente estos 6 clanes/comunidades y no una lista distinta.
+3. Mantener toda la información de los clanes en una estructura de datos clara y mantenible, preferiblemente en JS si eso encaja mejor con el renderizado actual.
+4. Implementar la sección para mostrar, como mínimo, por cada clan:
+ - logo
+ - nombre
+ - botón o enlace a Discord
+5. Hacer que el orden de aparición de los clanes sea aleatorio en cada carga de página.
+6. Asegurar que la aleatorización no rompe la estructura visual ni genera duplicados.
+7. Para los clanes con Discord aún no definido (`La 129` y `BxB`), mostrar un estado coherente y no roto, por ejemplo:
+ - botón deshabilitado
+ - etiqueta `Próximamente`
+ - o equivalente visual claro y honesto
+8. Para los clanes con logo pendiente (`H9H`), usar un placeholder visual coherente con la estética de la web.
+9. Para `250 Hispania`, usar solo el escudo/emblema, sin el texto `Historia de la 250`.
+10. Mantener la sección como una única sección de comunidad/clanes en la home, sin duplicarla.
+11. Asegurar que la sección funciona correctamente en escritorio y móvil.
+12. Mantener la estética coherente con la landing actual.
+13. Al completar la implementación:
+ - dejar el repositorio consistente
+ - hacer commit
+ - hacer push al remoto si el entorno lo permite
+
+## Files to Read First
+- AGENTS.md
+- frontend/index.html
+- frontend/assets/css/styles.css
+- frontend/assets/js/main.js
+- cualquier archivo actual de datos/renderizado de la sección de clanes si ya existe
+- assets actuales relacionados con logos de comunidad
+
+## Expected Files to Modify
+- frontend/index.html
+- frontend/assets/css/styles.css
+- frontend/assets/js/main.js
+- opcionalmente un archivo de datos/config si mejora claridad, por ejemplo:
+ - frontend/assets/js/community-clans.js
+- opcionalmente nuevos assets referenciados correctamente si la implementación los necesita, por ejemplo dentro de:
+ - frontend/assets/img/clans/
+
+## Constraints
+- No romper la landing actual.
+- No crear varias secciones de clanes; debe quedar una sola.
+- No introducir frameworks nuevos.
+- No depender de widgets externos o iframes de Discord para esta sección.
+- No hacer cambios destructivos.
+- Mantener el trabajo centrado en la sección de clanes, su contenido real y el orden aleatorio por carga.
+
+## Validation
+- La home muestra una única sección de clanes/comunidades.
+- Aparecen exactamente estos 6 clanes/comunidades:
+ - LCM
+ - La 129
+ - 250 Hispania
+ - H9H
+ - BxB
+ - 7dv
+- El orden cambia aleatoriamente en cada carga de página.
+- Los enlaces de Discord correctos funcionan para:
+ - LCM
+ - 250 Hispania
+ - H9H
+ - 7dv
+- Los clanes sin enlace definitivo no muestran botones rotos.
+- `250 Hispania` usa solo el escudo/emblema, sin el texto lateral.
+- La sección sigue siendo visualmente coherente y responsive.
+- Los cambios quedan committeados y se hace push al remoto si el entorno lo permite.
+
+## Change Budget
+- Preferir menos de 6 archivos modificados o creados.
+- Preferir menos de 260 líneas cambiadas.
diff --git a/frontend/assets/css/styles.css b/frontend/assets/css/styles.css
index 8fcb7f7..9ecab70 100644
--- a/frontend/assets/css/styles.css
+++ b/frontend/assets/css/styles.css
@@ -790,6 +790,14 @@ h2 {
background: linear-gradient(180deg, rgba(19, 24, 16, 0.82), rgba(10, 13, 9, 0.66));
}
+.clan-card__logo--wide {
+ padding-inline: 8px;
+}
+
+.clan-card__logo--shield {
+ padding-inline: 18px;
+}
+
.clan-card__logo img {
width: auto;
height: auto;
@@ -798,6 +806,29 @@ h2 {
object-fit: contain;
}
+.clan-card__logo-placeholder {
+ width: 100%;
+ min-height: 84px;
+ display: grid;
+ place-items: center;
+ border: 1px dashed rgba(210, 182, 118, 0.22);
+ border-radius: 14px;
+ background:
+ linear-gradient(180deg, rgba(28, 32, 24, 0.88), rgba(12, 15, 11, 0.7)),
+ repeating-linear-gradient(
+ 135deg,
+ rgba(255, 255, 255, 0.02) 0,
+ rgba(255, 255, 255, 0.02) 10px,
+ transparent 10px,
+ transparent 20px
+ );
+ color: var(--accent-warm);
+ font-size: 0.88rem;
+ font-weight: 700;
+ letter-spacing: 0.18em;
+ text-transform: uppercase;
+}
+
.clan-card__copy {
display: grid;
gap: 8px;
@@ -831,6 +862,14 @@ h2 {
min-width: 180px;
}
+.server-action-link--disabled {
+ border-color: rgba(159, 168, 141, 0.18);
+ background: linear-gradient(180deg, rgba(42, 46, 39, 0.5), rgba(19, 22, 17, 0.7));
+ color: var(--muted);
+ cursor: default;
+ pointer-events: none;
+}
+
@media (max-width: 1120px) {
.hero__brand {
grid-template-columns: 1fr;
@@ -947,6 +986,10 @@ h2 {
justify-items: start;
}
+ .clan-card__logo {
+ width: 100%;
+ }
+
.clan-card__link {
width: 100%;
}
diff --git a/frontend/assets/img/clans/250hispania-shield.png b/frontend/assets/img/clans/250hispania-shield.png
new file mode 100644
index 0000000..a7adf08
Binary files /dev/null and b/frontend/assets/img/clans/250hispania-shield.png differ
diff --git a/frontend/assets/img/clans/250hispania.png b/frontend/assets/img/clans/250hispania.png
new file mode 100644
index 0000000..ff134fe
Binary files /dev/null and b/frontend/assets/img/clans/250hispania.png differ
diff --git a/frontend/assets/img/clans/7dv.png b/frontend/assets/img/clans/7dv.png
new file mode 100644
index 0000000..9c4595d
Binary files /dev/null and b/frontend/assets/img/clans/7dv.png differ
diff --git a/frontend/assets/img/clans/bxb.png b/frontend/assets/img/clans/bxb.png
new file mode 100644
index 0000000..9d2fd33
Binary files /dev/null and b/frontend/assets/img/clans/bxb.png differ
diff --git a/frontend/assets/img/clans/la129.png b/frontend/assets/img/clans/la129.png
new file mode 100644
index 0000000..3569c0b
Binary files /dev/null and b/frontend/assets/img/clans/la129.png differ
diff --git a/frontend/assets/img/clans/lcm.png b/frontend/assets/img/clans/lcm.png
new file mode 100644
index 0000000..2e77a97
Binary files /dev/null and b/frontend/assets/img/clans/lcm.png differ
diff --git a/frontend/assets/js/main.js b/frontend/assets/js/main.js
index e3c4189..de2e7a1 100644
--- a/frontend/assets/js/main.js
+++ b/frontend/assets/js/main.js
@@ -6,13 +6,70 @@ const SERVER_HISTORY_URLS = Object.freeze({
});
const COMMUNITY_CLANS = Object.freeze([
{
- name: "Comunidad Hispana HLL Vietnam",
- badge: "Comunidad anfitriona",
+ name: "LCM",
+ badge: "Comunidad aliada",
description:
- "Punto principal de reunion para escuadras, anuncios y acceso directo al Discord del proyecto.",
- logoSrc: "./assets/img/logo.png",
- logoAlt: "Logo de Comunidad Hispana HLL Vietnam",
- discordUrl: "https://discord.com/invite/PedEqZ2Xsa",
+ "Clan visible dentro de la red comunitaria hispana con acceso confirmado a Discord.",
+ logoSrc: "./assets/img/clans/lcm.png",
+ logoAlt: "Logo de LCM",
+ logoClassName: "",
+ discordUrl: "https://discord.gg/9F9S353QZv",
+ discordLabel: "Abrir Discord",
+ },
+ {
+ name: "La 129",
+ badge: "Discord pendiente",
+ description:
+ "Presencia confirmada para la seccion comunitaria mientras se publica su acceso definitivo.",
+ logoSrc: "./assets/img/clans/la129.png",
+ logoAlt: "Logo de La 129",
+ logoClassName: "clan-card__logo--wide",
+ discordUrl: "",
+ discordLabel: "Proximamente",
+ },
+ {
+ name: "250 Hispania",
+ badge: "Comunidad aliada",
+ description:
+ "Entrada mostrada con su emblema principal y acceso confirmado al Discord compartido.",
+ logoSrc: "./assets/img/clans/250hispania-shield.png",
+ logoAlt: "Escudo de 250 Hispania",
+ logoClassName: "clan-card__logo--shield",
+ discordUrl: "https://discord.gg/3E62Yb6Aw3",
+ discordLabel: "Abrir Discord",
+ },
+ {
+ name: "H9H",
+ badge: "Logo pendiente",
+ description:
+ "Comunidad incluida en la rotacion mientras se incorpora su identidad visual final.",
+ logoSrc: "",
+ logoAlt: "",
+ logoClassName: "",
+ discordUrl: "https://discord.gg/tYnXK7MQjB",
+ discordLabel: "Abrir Discord",
+ placeholderLabel: "H9H",
+ },
+ {
+ name: "BxB",
+ badge: "Discord pendiente",
+ description:
+ "Clan incorporado a la red visible con su emblema actual y enlace aun por confirmar.",
+ logoSrc: "./assets/img/clans/bxb.png",
+ logoAlt: "Logo de BxB",
+ logoClassName: "",
+ discordUrl: "",
+ discordLabel: "Proximamente",
+ },
+ {
+ name: "7dv",
+ badge: "Comunidad aliada",
+ description:
+ "Entrada activa dentro de la seccion con acceso disponible a su Discord comunitario.",
+ logoSrc: "./assets/img/clans/7dv.png",
+ logoAlt: "Logo de 7dv",
+ logoClassName: "",
+ discordUrl: "https://discord.gg/3sxNQZwrg6",
discordLabel: "Abrir Discord",
},
]);
@@ -246,37 +303,78 @@ function hydrateCommunityClans(listNode) {
return;
}
- listNode.innerHTML = COMMUNITY_CLANS.map((clan) => renderCommunityClanCard(clan)).join("");
+ listNode.innerHTML = shuffleItems(COMMUNITY_CLANS)
+ .map((clan) => renderCommunityClanCard(clan))
+ .join("");
}
function renderCommunityClanCard(clan) {
+ const logoMarkup = renderClanLogo(clan);
+ const discordMarkup = renderClanDiscordLink(clan);
+
return `
${escapeHtml(clan.badge)} ${escapeHtml(clan.description)}
-
${escapeHtml(clan.name)}
+
- Espacio para mantener visibles las comunidades y clanes con los que - compartimos actividad, eventos o coordinacion en Discord. + Clanes y comunidades activas de la escena hispana con presencia + confirmada o en preparacion para esta red compartida.
-
- Comunidad anfitriona
-- Punto principal de reunion para escuadras, anuncios y acceso - directo al Discord del proyecto. -
-