###### Versión online: https://hackmd.io/@YdTv1mcjT2ecp6FwvPugAA/HJFiPumUa

# Juego de Mecanografía en JavaScript

## Variables y Elementos del DOM:

var temp = document.querySelector('.time');
var button = document.querySelector("button");
var words = document.querySelector(".words");
var timerDiv = document.querySelector(".time");
var scoreDiv = document.querySelector(".score");
var points = 0;
var spans;
var typed;
var seconds = 60;
var spark = new Audio("http://k003.kiwi6.com/hotlink/qdpr7bioht/spark.mp3");

* temp: Referencia al elemento con la clase 'time'.
* button: Referencia al botón del juego.
* words: Referencia al elemento con la clase 'words'.
* timerDiv: Referencia al elemento con la clase 'time'.
* scoreDiv: Referencia al elemento con la clase 'score'.
* points: Puntuación del juego.
* spans: Almacena las letras del juego.
* typed: Almacena la letra introducida por el usuario.
* seconds: Contador de tiempo para el juego.
* spark: Objeto de audio para reproducir un sonido.

### Funcion 'countdown'

function countdown() {
    points = 0;
    var timer = setInterval(function(){
        button.disabled = true;
        seconds--;
        temp.innerHTML = seconds;
        if (seconds === 0) {
            alert("Has conseguido: " + scoreDiv.innerHTML); 
            scoreDiv.innerHTML = "0";
            words.innerHTML = "";
            button.disabled = false;
            clearInterval(timer);
            seconds = 60;
            timerDiv.innerHTML = "60";
            button.disabled = false;
        }
    }, 1000);
}

Esta función inicia una cuenta regresiva de 60 segundos y realiza acciones específicas cuando el tiempo se agota.

### Función 'random'

function random() {
    words.innerHTML = "";
    var random = Math.floor(Math.random() * (1943 - 0 + 1)) + 0;
    var wordArray = list[random].split("");
    for (var i = 0; i < wordArray.length; i++) { // Construyendo palabras con spans alrededor de las letras
        var span = document.createElement("span");
        span.classList.add("span");
        span.innerHTML = wordArray[i];
        words.appendChild(span);
    }
    spans = document.querySelectorAll(".span");
}

Genera y muestra palabras aleatorias del array list.

### Array 'list'

const list = ['ACCOUNT','ACCURATE','ACRES','ACROSS','ACT','ACTION','ACTIVE','ACTIVITY',
    'ACTUAL','ACTUALLY','ADD','ADDITION','ADDITIONAL','ADJECTIVE','ADULT','ADVENTURE',
    'ADVICE','AFFECT','AFRAID','AFTER','AFTERNOON','AGAIN','AGAINST','AGE',
    'AGO','AGREE','AHEAD','AID','AIR','AIRPLANE','ALIKE','ALIVE',
    'ALL','ALLOW','ALMOST','ALONE','ALONG','ALOUD','ALPHABET','ALREADY',
    'ALSO','ALTHOUGH','AM','AMONG','AMOUNT','ANCIENT','ANGLE','ANGRY',
    'ANIMAL','ANNOUNCED','ANOTHER','ANSWER','ANTS','ANY','ANYBODY','ANYONE',
    'ANYTHING','ANYWAY','ANYWHERE','APART','APARTMENT','APPEARANCE','APPLE','APPLIED',
    'APPROPRIATE','ARE','AREA','ARM','ARMY','AROUND','ARRANGE','ARRANGEMENT',
    'ARRIVE','ARROW','ART','ARTICLE','AS','ASIDE','ASK','ASLEEP',
    'AT','ATE','ATMOSPHERE','ATOM','ATOMIC','ATTACHED','ATTACK','ATTEMPT',
    'ATTENTION','AUDIENCE','AUTHOR','AUTOMOBILE','AVAILABLE','AVERAGE','AVOID','AWARE',
    'AWAY','BABY','BACK','BAD','BADLY','BAG','BALANCE','BALL', (...)];

Contiene una extensa lista de palabras que se utilizan en el juego. (1942 palabras)

### Evento del botón 'button'

button.addEventListener("click", function(e){
    countdown();
    random();
    button.disabled = true;
});

Inicia el juego al hacer clic en el botón, llamando a las funciones countdown y random.

### Función 'typing'

function typing(e) {
    document.getElementById("thockAudio").play();

    typed = String.fromCharCode(e.which);
    for (var i = 0; i < spans.length; i++) {
        if (spans[i].innerHTML === typed) {
            if (spans[i].classList.contains("bg")) {
                continue;
            } else if (spans[i].classList.contains("bg") === false && (spans[i-1] === undefined || spans[i-1].classList.contains("bg") !== false)) {
                spans[i].classList.add("bg");
                break;
            }
        }
    }
    var checker = 0;
    for (var j = 0; j < spans.length; j++) { // Chequea si todas las letras han sido escritas
        if (spans[j].className === "span bg") {
            checker++;
        }
        if (checker === spans.length) { //Si es así, anima las palabras con animate.css
            spark.pause();
            spark.currentTime = 0;
            spark.play();
            words.classList.add("animated");
            words.classList.add("fadeOut");
            points++; // Incrementamos los pointos
            scoreDiv.innerHTML = points; //Añadimos los puntos al div
            document.removeEventListener("keydown", typing, false);
            setTimeout(function(){
                words.className = "words"; // Reiniciamos las clases
                random(); // Da otra palabra aleatoria
                document.addEventListener("keydown", typing, false);
            }, 400);
        }

    }
}

Gestiona la entrada del usuario, verifica las letras introducidas y actualiza la interfaz del juego.

## Guía de contenidos de la hoja de estilos

### Reset de Estilos globales:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

### Estilos del cuerpo ('body')

body {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    margin: 0;
}

### Estilos del contenedor principal('container')

.container {
    max-width: 600px; /* Ancho máximo del contenedor */
}

### Estilos del contenedor del vídeo ('#video-container')

#video-container {
    margin-bottom: 20px; 
}

### Estilos del vídeo ('#video')

#video {
    width: 100%;
    height: 100%;
}

### Estilos del contenedor del botón ('#button-container')

#button-container {
    margin-top: 20px;
}

### Estilos del contenedor principal('wrapper')

.wrapper {
    max-width: 600px;
    margin: 0 auto;
    width: 100%;
    text-align: center;
    padding: 2%;
    height: 500px;
}

### Estilos del párrafo después del título principal ('h1+p')

h1 + p {
    margin-bottom: 5%;
    color: #3498db;
}

### Estilos de envoltura exterior ('outerWrap')

h1 + p {
    margin-bottom: 5%;
    color: #3498db;
}

### Estilos del botón

button {
    border: none;
    background-color: #FF7373;
    box-shadow: 0px 5px 0px 0px #CE4646;
    outline: none;
    border-radius: 5px;
    padding: 10px 15px;
    font-size: 22px;
    text-decoration: none;
    margin: 20px;
    color: #fff;
    position: relative;
    display: inline-block;
    cursor: pointer;
}

### Estilos del botón en estado activo ('button:active')

button:active {
    transform: translate(0px, 5px);
    -webkit-transform: translate(0px, 5px);
    box-shadow: 0px 1px 0px 0px;
}

### Estilos de puntuación y tiempo('scoreWrap','timeWrap')

.scoreWrap p, .scoreWrap span, .timeWrap p, .timeWrap span {
    font-size: 30px;
    color: #FF7373;
}

### Estilos del contenedor palabras ('wordsWrap')

.wordsWrap {
    margin-top: 50px;
}

### Estilos de palabras('words span')

.words span {
    font-size: 60px;
    letter-spacing: 1px;
    color: #ECF0F1;
}

### Estilos del pop-up

#popup {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 20px;
    background-color: black;
    border: 1px solid #FF7373;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    z-index: 1000;
}

### Estilos del overlay('#overlay')

#overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 999;
}