En unos meses planeo realizar un evento en el que reuniré muchos de mis proyectos antiguos y así lograr vender de inicio a fin una idea a un cliente por mi cuenta.
Uno de estos es el selector de peleadores que presenté hace ya un tiempo. En este post explicaré todo lo que conllevó realizarlo:
¿Cuál era el requerimiento?
En un landing page, deseaba promocionar streamers de twitch de una forma diferente y creativa, de este modo surge la idea de un selector estilo Street Fighter.
La Estructura
Lo primero fue pensar la estructura del sitio, es un clasico Hero Page simplificado:
![Estructura base](https://res-2.cloudinary.com/ngxcoder/image/upload/f_auto,q_auto/v1/blog-images/cwcbdiuvcwuv.png)
Los recursos
Los diversos creadores de contenido tienen un id bajo la plataforma de Twitch, de ese modo puedo extraer información sin preocuparme si actualizan su nombre o algun otro dato. A la final creo que no lo volví tan dinámico, pero para el próximo proyecto seguro que lo será.
![base de datos](https://res-3.cloudinary.com/ngxcoder/image/upload/f_auto,q_auto/v1/blog-images/Screen-Shot-2022-04-08-at-05.31.06.png)
La base del Selector
Consiste en un cuadriculado simple, cada vez que se selecciona un cuadrante aparece en grande en la zona de seleccionado para ver sus detalles:
![Diseño base del Selector](https://res-4.cloudinary.com/ngxcoder/image/upload/f_auto,q_auto/v1/blog-images/Screen-Shot-2022-04-08-at-05.39.55.png)
Recuerdo que el proyecto se apoya de los componentes de Material UI, sobretodo su sistema de grilla:
![Código de grilla](https://res-5.cloudinary.com/ngxcoder/image/upload/f_auto,q_auto/v1/blog-images/Screen-Shot-2022-04-08-at-05.35.31.png)
Detalles de los personajes
Me inspiré en Super Smash Bros y su efecto rasgado al seleccionar los personajes.
Desarrolle una simple lógica que captura el último personaje seleccionado y lo muestra con Redux. El código está algo desordenado, ya que simplemente practicaba.
![Toda la lógica de la pantalla](https://res-2.cloudinary.com/ngxcoder/image/upload/f_auto,q_auto/v1/blog-images/Screen-Shot-2022-04-08-at-06.05.46.png)
Finalmente le agregué un color primario a partir de sus imágenes, invertí la combinación de colores y este fue el resultado.
![Detalle de los personajes](https://res-5.cloudinary.com/ngxcoder/image/upload/f_auto,q_auto/v1/blog-images/Screen-Shot-2022-04-08-at-05.48.25.png)
Animación
Además le di una pequeña animación al hacer 'hover' sobre los nombres para resaltar un poco el diseño; unos cuantos keyframes sobre el textShadow y listo:
![Animación dinámica](https://res-1.cloudinary.com/ngxcoder/image/upload/f_auto,q_auto/v1/blog-images/Screen-Shot-2022-04-08-at-06.24.45.png)
Resultado
![Resultado](https://res-2.cloudinary.com/ngxcoder/image/upload/f_auto,q_auto/v1/blog-images/Screen-Shot-2022-04-08-at-05.42.52.png)
Proyecto Completo
![](https://res-4.cloudinary.com/ngxcoder/image/upload/f_auto,q_auto/v1/blog-images/Screen-Shot-2022-04-08-at-05.53.09.png)