Curso de React | Juego de las parejas

Por 9.99€ al mes tendrás acceso completo a todos los cursos. Sin matrícula ni permanencia.

1. Crear un fichero api.js dentro de la carpeta app que consultará la api de Ricky Morty.

https://rickandmortyapi.com/api/character

Del array de personajes obtenido…

export const getRandom = (arr, n) => {
    var result = new Array(n),
        len = arr.length,
        taken = new Array(len);
    if (n > len)
        throw new RangeError("getRandom: more elements taken than available");
    while (n--) {
        var x = Math.floor(Math.random() * len);
        result[n] = arr[x in taken ? taken[x] : x];
        taken[x] = --len in taken ? taken[len] : len;
    }
    return result;
}

const newArr = [...arr, ...arr]

export const shuffleArray = (array) => {
    let counter = array.length;

    // While there are elements in the array
    while (counter > 0) {
        // Pick a random index
        let index = Math.floor(Math.random() * counter);

        // Decrease counter by 1
        counter--;

        // And swap the last element with it
        let temp = array[counter];
        array[counter] = array[index];
        array[index] = temp;
    }

    return array;
}

Finalmente, haremos un log del resultado obtenido.

2. Guarda el resultado obtenido en un estado y recórrelo en el JSX. De momento, imprime la ruta de cada imagen.

3. Crea el componente Card, que mostrará un cuadrado negro inicialmente.

4. Este componente Card tendrá un estado isActive que cuando valga true mostrará la imagen de Ricky y Morty que hemos recibido como prop. Alternaremos entre mostrar o no mostrar la imagen cuando hagamos click sobre la misma.

5. Además al pulsar en un Card, llamaremos a un método cardClicked definido en App.js. De momento, esta función mostrará un mensaje de alerta.

6. En el método cardClicked, iremos añadiendo en un array, que además será un estado (cardsRaised) las cartas que pulsemos.

7. Cuando en el array cardsRaised haya dos elementos, debemos comprobar si son iguales. Pueden pasar dos cosas:

• Que las cartas sean iguales → Mostraremos un alert diciendo exito.
• Que las cartas no sean iguales → Mostraremos un alert diciendo fracaso.

8. Elaboraremos un poco más la gestión de si las cartas son iguales o no, que hicimos en el paso anterior:

• Que las cartas sean iguales → introduciremos la url de las imágenes en un nuevo estado llamado activeImages. Este array se lo pasaremos como prop al componente Card, de tal forma que si la url de la imagen del componente Card esta dentro del array activeImages, siempre se mostrará la imagen.
• Que las cartas no sean iguales → lanzaremos un timeOut para volver a ocultarlas en dos segundos.