MemoCard

Web Component de carta coleccionable con efecto flip, shine por nivel de rareza y modo compacto para listados.

Uso

<script type="module" src="./src/index.js"></script>

<memo-card
  data-id="999"
  data-name="HuskyBot"
  data-description="Un husky insaciable que se alimenta de inteligencia artificial."
  data-image="https://cdn.memoraia.org/huskybot.png"
  data-category="kawaii"
  data-level="5"
  data-attack="75"
  data-defense="40"
  data-interactive
></memo-card>

Atributos

| Atributo | Tipo | Default | Descripcion | |---|---|---|---| | data-id | string | "0" | ID de la carta. Se muestra formateado como #001. | | data-name | string | "" | Nombre de la carta. Se muestra como titulo. | | data-description | string | "" | Descripcion de la carta. Se oculta en modo compacto (< 200px). | | data-image | string | "" | URL de la imagen de la carta. Usa loading="lazy". | | data-category | string | "" | Categoria. Valores: memento, meme, kawaii, game, limited. Muestra el icono correspondiente. | | data-level | number | 1 | Nivel de rareza (1-5). Controla la textura del efecto shine. Nivel 1 no tiene shine. | | data-attack | string | null | Valor de ataque. Si no se define, no se muestra. | | data-defense | string | null | Valor de defensa. Si no se define, no se muestra. | | data-flipped | boolean | - | Atributo booleano. Si esta presente, la carta inicia mostrando el reverso. | | data-interactive | boolean | - | Atributo booleano. Si esta presente, habilita el flip por click/teclado. |

Niveles de shine

| Nivel | Textura | Descripcion | |---|---|---| | 1 | Ninguna | Sin efecto shine | | 2 | metal.png | Metalico | | 3 | wave.png | Ondulado | | 4 | glitter.png | Brillante | | 5 | cosmos.png | Cosmico |

Metodos

flip()

Voltea la carta programaticamente. No requiere data-interactive — funciona siempre. Emite el evento memo-card:flip.

const card = document.querySelector("memo-card");
card.flip(); // voltea al reverso
card.flip(); // vuelve al frente

Eventos

memo-card:flip

Se dispara cuando la carta se voltea. Solo se emite si data-interactive esta presente.

• bubbles: true — se propaga hacia arriba en el DOM
• composed: true — cruza el Shadow DOM

| Propiedad | Tipo | Descripcion | |---|---|---| | detail.flipped | boolean | true si la carta muestra el reverso, false si muestra el frente |

card.addEventListener("memo-card:flip", (e) => {
  console.log(e.detail.flipped); // true | false
});

CSS Custom Properties

| Variable | Default | Descripcion | |---|---|---| | --size | 250px | Ancho de la carta | | --border-radius | 12px | Radio de los bordes | | --border-size | 2px | Grosor del borde | | --border-color | #2a2a3e | Color del borde | | --bgcolor | #1a1a2e | Color de fondo | | --text-color | #fff | Color del texto | | --category-color | #6c63ff | Color de la categoria (acepta gradientes) | | --font-family-primary | 'Trebuchet MS', sans-serif | Fuente del titulo | | --font-family-secondary | system-ui, sans-serif | Fuente de la descripcion | | --font-family-extra | monospace | Fuente del ID y stats | | --rainbow-gradient | linear-gradient(...) | Gradiente del borde de la imagen | | --grain-texture | - | Textura de grano superpuesta |

Modo compacto

Cuando la carta tiene un ancho menor a 200px, automaticamente:

• Oculta la descripcion
• Expande la imagen para llenar el espacio
• Reduce el badge de categoria

Esto se controla via container queries internas, no requiere configuracion.

Accesibilidad

• Con data-interactive: agrega role="button", tabindex="0" y aria-label dinamico
• Sin data-interactive: sin role ni tabindex (elemento pasivo)
• Soporte para Enter y Space para voltear
• prefers-reduced-motion: reduce desactiva la animacion del flip
• Focus visible con outline en modo interactivo

Ejemplos

Carta para stream overlay (interactiva, grande)

<memo-card
  data-interactive
  data-id="999"
  data-name="HuskyBot"
  data-description="Un husky insaciable..."
  data-image="https://cdn.memoraia.org/huskybot.png"
  data-category="kawaii"
  data-level="5"
  data-attack="75"
  data-defense="40"
  style="--size: 500px"
></memo-card>

Carta para listado (solo display, compacta)

<memo-card
  data-id="999"
  data-name="HuskyBot"
  data-description="Un husky insaciable..."
  data-image="https://cdn.memoraia.org/huskybot.png"
  data-category="kawaii"
  data-level="1"
  style="--size: 180px"
></memo-card>

Carta que inicia volteada

<memo-card
  data-interactive
  data-flipped
  data-id="999"
  data-name="HuskyBot"
  data-image="https://cdn.memoraia.org/huskybot.png"
  data-category="kawaii"
  data-level="3"
></memo-card>