Creamos una tarjeta para jugar CLUE

Resulta que mi esposa doñaJuegosDeMesa3000 me presentó el CLUE y unos meses después conocimos el CLUE DE BOLSILLO, la verdad es que es un gran juego y super adictivo, para todas las edades.

Si quieres ver más sobre el juego dale click acá para ver la descripción desde su autor

Un día jugando me pareció demasiado pequeño el tamaño de las tarjetitas y pensé “si de todos modos estoy pegado al pinche celular ¿por qué no tener la tarjetita con la interacción?”

Así que aprovechando la noche de insomnio me propuse a crear una tarjeta para jugar Clue

Bueno bueno ¿y la parte técnica qué onda?

Para quien le llame la atención sepa que “está super papa” como dijera mi querida Maestra Lorelí.

La estructura

La base del html está formada con Bootstrap 4 – Cards, la cual nos permite tener un header (card-header) y un body (card-body)

<div class="card mb-2">
	<div class="card-header">
		Sospechosos
	</div>
	<div class="card-body">
		<div class="row no-gutters mb-2">
			<div class="col-9 d-flex flex-column">
				<p class="my-auto">
					Coronel Mostaza
				</p>
			</div>
			<div class="col-3">
				<a href="" class="btn btn-warning">
					<i class="fa fa-caret-down"></i>
				</a>
			</div>
		</div>
	</div>
</div>

La funcionalidad

Para la funcionalidad utilizamos jQuery y lo único que hace es CONVERTIR UN BOTÓN de botón básico de Bootstrap 4 para que tenga 3 estados.

Inicialmente en la estructura el elemento a tiene las clases .btn.btn-warning y dentro de este elemento tenemos un elemento i el cual nos ayudará a ponerle un ícono usando fontAwesome así que la funcionalidad consta en alternar las clases declaradas para que pase de .btn.btn-warning –> .btn.btn-danger –> .btn.btn-success

jQuery(document).ready(function($) {
	
	jQuery('.btn').on('click', function(event) {
		event.preventDefault();
		var classes = ['btn btn-warning','btn btn-danger','btn btn-success'];
		var classes_i = ['fa fa-times','fa fa-check', 'fa fa-caret-down'];
		var icon = jQuery(this).find('i');
    	jQuery( this ).prop('class', classes[($.inArray(this.className, classes)+1)%classes.length])
    	jQuery( icon ).prop('class', classes_i[($.inArray( jQuery(icon).prop('class'), classes_i)+1)%classes_i.length])
	});

});