Steam Roulette
Steam Roulette es una herramienta gratuita que elige aleatoriamente un juego de tu biblioteca de Steam, ayudándote a decidir a qué jugar a continuación.
Steam Roulette
Steam Roulette es una app web gratuita diseñada para resolver una pregunta muy común entre jugadores: ¿qué juego debería jugar ahora?
La aplicación se conecta con bibliotecas públicas de Steam, permite agregar uno o varios usuarios y selecciona aleatoriamente un juego mediante una ruleta visual inspirada en las animaciones de loot boxes de CS:GO. La experiencia combina utilidad, juego y presentación visual para hacer que elegir un juego sea más rápido y divertido.
El problema
Muchos usuarios tienen bibliotecas grandes en Steam, pero terminan jugando siempre los mismos títulos o pierden tiempo decidiendo qué abrir. El problema se vuelve todavía más común cuando varias personas quieren jugar juntas y necesitan encontrar un título que todos tengan disponible.
Steam Roulette fue creado para reducir esa fricción: el usuario agrega su perfil de Steam, aplica filtros si lo necesita y deja que la ruleta elija por él.
La solución
Steam Roulette permite ingresar Steam IDs o Vanity URLs, obtener la biblioteca de juegos y lanzar una ruleta animada que selecciona un juego disponible. También soporta múltiples usuarios, por lo que puede encontrar juegos compartidos entre varias bibliotecas.
La experiencia incluye:
- Agregar uno o varios perfiles de Steam.
- Resolver Vanity URLs automáticamente.
- Obtener bibliotecas públicas de Steam.
- Detectar juegos compartidos entre usuarios.
- Filtrar por tiempo mínimo de juego.
- Filtrar juegos cooperativos o multijugador.
- Mostrar imágenes de los juegos desde Steam.
- Ejecutar una animación tipo carrusel/loot box.
- Reproducir efectos de sonido durante la selección.
- Mostrar el ganador con confetti y acciones posteriores.
Características principales
| Característica | Descripción |
|---|---|
| Soporte multiusuario | Permite agregar varios perfiles de Steam para encontrar juegos compartidos. |
| Filtros avanzados | Incluye filtros por tiempo de juego y criterios de juego cooperativo/multijugador. |
| Ruleta animada | Usa una animación horizontal estilo CS:GO para hacer más emocionante la selección. |
| Integración con Steam | Obtiene bibliotecas, perfiles, imágenes y detalles desde Steam. |
| Experiencia gamificada | Incluye sonidos, confetti, transiciones y una presentación visual atractiva. |
| Responsive design | Funciona correctamente en desktop y mobile. |
Flujo de uso
- El usuario ingresa un Steam ID, Vanity URL o enlace de perfil.
- La app resuelve el identificador y obtiene el perfil.
- Se carga la biblioteca pública de juegos.
- Si hay múltiples usuarios, se calculan los juegos compartidos.
- El usuario puede aplicar filtros.
- La ruleta gira y selecciona un juego.
- El usuario puede abrir el juego, visitar su página en Steam o volver a girar.
Arquitectura
El proyecto está construido con Next.js usando App Router. La aplicación separa la experiencia en componentes, hooks, contexto global y rutas de API.
| Área | Rol |
|---|---|
components/UserInput.tsx | Maneja el ingreso y administración de usuarios de Steam. |
components/Filters.tsx | Permite filtrar por género, tiempo de juego y opciones de juego compartido. |
components/Roulette.tsx | Contiene la lógica visual y funcional de la ruleta. |
contexts/AppContext.tsx | Centraliza el estado global de usuarios, juegos, filtros y configuración. |
hooks/useSteamAPI.ts | Encapsula la integración con Steam y la lógica para obtener datos. |
hooks/useSound.ts | Administra efectos de sonido durante la experiencia. |
app/ | Contiene páginas, rutas y estructura del App Router de Next.js. |
Integración con Steam
Steam Roulette utiliza la Steam Web API para obtener la información necesaria de los usuarios y sus juegos. La app puede resolver Vanity URLs, cargar bibliotecas públicas, obtener datos de perfil y enriquecer información de juegos usando detalles de Steam Store.
| API / Endpoint | Uso |
|---|---|
ISteamUser/ResolveVanityURL | Convierte Vanity URLs en Steam IDs. |
IPlayerService/GetOwnedGames | Obtiene la biblioteca pública de juegos del usuario. |
| Steam Store API | Enriquece juegos con imágenes, categorías, géneros y detalles visuales. |
Lógica de selección
La ruleta trabaja sobre la lista de juegos disponibles después de aplicar filtros. Para un solo usuario, usa la biblioteca pública del perfil. Para múltiples usuarios, calcula la intersección entre bibliotecas y conserva solamente los juegos compartidos.
Además, la aplicación evita duplicados por appid y por nombre normalizado, lo que ayuda a limpiar casos donde Steam puede devolver versiones repetidas o entradas equivalentes.
Animación y experiencia
Uno de los diferenciales del proyecto es su presentación visual. En lugar de elegir un juego de forma instantánea, Steam Roulette usa una ruleta horizontal con aceleración, movimiento constante y desaceleración. Esta mecánica hace que la selección se sienta más como una experiencia de juego que como una simple utilidad.
La experiencia se complementa con:
- Sonido de giro.
- Sonido de parada.
- Efecto de victoria.
- Confetti.
- Modal de ganador.
- Imágenes de juegos desde Steam CDN.
- Transiciones suaves entre estados.
Tech stack
| Categoría | Tecnologías |
|---|---|
| Frontend | Next.js, React, TypeScript |
| Estilos | Tailwind CSS, shadcn/ui, Radix UI |
| Animaciones | GSAP, Framer Motion |
| Sonido y efectos | Howler.js, react-confetti |
| Backend / API proxy | Node.js, Express.js |
| APIs externas | Steam Web API, Steam Store API |
| Deploy | Vercel |
Resultado
Steam Roulette transforma una decisión cotidiana en una experiencia interactiva. El proyecto combina APIs externas, estado global, animaciones avanzadas, filtros útiles y una interfaz responsive para crear una herramienta simple pero memorable.
Es especialmente útil para jugadores con bibliotecas grandes o grupos de amigos que quieren encontrar rápidamente un juego en común sin revisar manualmente sus colecciones.