Simulador de apuestas de Euromillones usando Javascript

Después de mi primer trabajo serio en la industria -en el que aprendí muchas cosas como por ejemplo que nadie es imprescindible- recibí una compensación económica de 1.800€. En aquel momento me pareció muy buena idea invertir todo ese mismo día en el sorteo de Euromillones, de modo que podía multiplicarlo fácilmente, y si lo perdía, bueno, por suerte no lo necesitaba. Además, creía que en ningún otro momento de mi vida podría dilapidar esa cantidad de dinero tan a la ligera.

Pero no aposté. Acepté el consejo de quienes me rodeaban, aunque siempre me quedé con la inquietud de qué hubiese pasado.

OJO: No tengo la certeza, pero tampoco tengo ninguna duda, de que lo hubiese perdido todo.

Las probabilidades

No hace falta hacer ningún cálculo para saber que la probabilidad es muy baja -alrededor de 1 entre 140 millones- pero, ¿exactamente cuánto es esto?.

Yo no me podía hacer a la idea, y aunque la cifra es clara y plasmado sobre un gráfico, muy revelador, no era capaz de entender la magnitud de esta posibilidad, así que decidí a hacer un pequeño simulador para poder apostar virtualmente -y de forma segura- y sacar conclusiones.

Puedes probarlo aquí abajo o en https://bet-simulator.surge.sh/ y seguir leyendo el artículo después.

HTML

La interfaz es muy sencilla pero destacaría:

Tablas

Las table no son los elementos más flexibles ni los más visuales pero tienen su caso de uso; proveen de una estructura ideal para mostar datos tabulados.

En nuestro caso, tienen aplicación para mostrar el balance del juego: el desglose de lo apostado, lo ganado y el resultado total, y para listar el reparto de premios y las apuestas acertadas.

Recuerda que los th se pueden utilizar fuera de los thead, por lo que podemos usarlos como compañeros de otros td si la lectura del dato es en formato fila, añadiendo el atributo scope con valor row.

<table>
  <th scope="row">Cabecera</th>
  <tr>Dato</tr>
</table>

Formularios

Los formularios no son tampoco los elementos más populares de HTML, sin embargo, proveen de algunas funcionalidades básicas muy importantes, como la de permitir a un usuario interactuar con un algoritmo usando un mecanismo para la entrada de datos que él decide.

Así que en este caso, era la mejor opción para poder indicar lo que se quiere apostar y de escuchar el evento de envío del formulario para empezar a calcular las apuestas y los premios.

Data-*

Las etiquetas HTML pueden utilizar atributos globales (disponibles para todas las etiquetas) o propios de la etiqueta, que la dotan de diferentes capacidades, pero además, en HTML5 se introdujo el concepto de atributos personalizables, que tienen que cumplir la condición de empezar su nombre por data-, y son muy útiles para guardar datos o seleccionar nodos con JavaScript sin tener que usar una clase como gancho, lo cual nos permite de un vistazo saber que las clases aplicadas a etiquetas aportan estilos, y no funcionalidades.

En este ejemplo los utilizaremos con ambos fines, para guardar datos en crudo sin divisas, y para seleccionar nodos que después se van a manipular

CSS

Hay poco remarcable, apenas una estructura básica usando grid y custom properties con su fallback. De todas formas, si te apetece comentar esta parte, deja un comentario debajo o escríbenos a hola@mamutlove.com

Javascript

El planteamiento es sencillo. Se recoge el valor indicado en el formulario y se realizan N apuestas en base a esta cantidad. Se genera la apuesta premiada y se comparan para sacar el listado de las premiadas y posteriormente se actualizan los contadores del balance.

Esta parte ha sido bastante divertida porque me ha permitido descrubrir el formateo de cantidades con divisas de forma nativa usando Intl.NumberFormat, la actualización de los números elegibles después de la creación de cada apuesta eliminando los ya seleccionados, o el tener que convertir varias veces los números entre string y number para realizar operaciones.

Conclusiones

En lo personal, ahora tengo más claro que es muy difícil ganar y me sorprende lo rápido que el balance aumenta negativamente… Es justo lo que necesitaba. Espero que te ayude a ti también si tenías esta misma inquietud.

En lo profesional, cuando estaba probando la funcionalidad me surgió la necesidad de aprender a escribir test unitarios para estresar el simulador convenientemente. Hubiese sido muy útil y probablemente será uno de los siguientes pasos.

Como anécdota, aposté 130 millones de euros (no de golpe porque cuelgas el navegador) que era el premio máximo de hace unas semanas, y por supuesto no recuperé lo invertido.

Simulacion

comments powered by Disqus

Si te ha parecido interesante

Tanto si tienes alguna duda o quieres charlar sobre este tema, como si el contenido o nuestros perfiles te parecen interesantes y crees que pdemos hacer algo juntos, no dudes en ponerte en contacto con nosotros a través de twitter o en el email hola@mamutlove.com