Tetris

Uso

Ejemplo de Implementación

A continuación, se muestra cómo puedes importar y utilizar el componente Tetris en una página o componente de Vue 3.

<template lang="pug">
Tetris(
  squareColor="#3B82F6"
  :base="12"
  class="h-[300px]"
)
</template>

<script setup lang="ts">
// No se requiere lógica adicional para la implementación básica
</script>

Ejemplo con Tema Personalizado

El componente permite personalizar el color base de la cuadrícula:

<template lang="pug">
div.flex.flex-col.gap-4
  h3 Cuadrícula Animada - Tema Rojo
  Tetris(
    squareColor="#EF4444" 
    :base="8"
    class="h-[200px] rounded-lg overflow-hidden border"
  )
  
  h3 Cuadrícula Animada - Tema Verde
  Tetris(
    squareColor="#10B981" 
    :base="12"
    class="h-[250px] rounded-lg overflow-hidden border shadow-md"
  )
</template>

Props

Comportamiento

• Cuadrícula Adaptable: Se ajusta automáticamente al ancho del contenedor padre.
• Animación Automática: Genera continuamente nuevas celdas en la parte superior que caen hacia abajo.
• Interactividad: Al hacer clic en una celda coloreada, esta desaparece.
• Tema Dinámico: Deriva automáticamente una paleta de colores a partir del color base proporcionado.
• Soporte para Modo Oscuro: Incluye variantes oscuras de los colores para compatibilidad con temas dark.
• Efecto Tetris: Cuando una fila se llena completamente, se eliminan todas las celdas de esa fila.

Detalles Técnicos

El componente utiliza varios mecanismos avanzados:

• VueUse: Aprovecha useElementSize para responder a cambios de tamaño.
• Generación de Paletas: Utiliza theme-colors para generar variantes de color a partir del color base.
• Variables CSS Personalizadas: Implementa propiedades calculadas para el tamaño de celda y colores.
• Transiciones: Incluye animaciones de aparición/desaparición mediante la API de transiciones de Vue.

Notas

• Para un funcionamiento óptimo, es recomendable establecer una altura específica en el contenedor del componente.
• El componente limpia correctamente sus intervalos al desmontarse para evitar fugas de memoria.
• Las celdas tienen un efecto hover que cambia ligeramente su color al pasar el cursor por encima.
• La densidad de la cuadrícula puede ajustarse modificando la prop base (valores más altos crean celdas más pequeñas).