###### `mstu5003`
# MSTU 5003 Final Project: Typing Game

#### Team Members: Xiaoyan Qin, Junyu Wang, Rong Sang
#### Codepen Link: https://codepen.io/xq2206/pen/xxEgYEq

## 1. Define problems
**1.Practicing typing**
Computer novices usually have trouble finding the right keys quickly on their keyboard because they are not familiar with each letter's place on the keyboard. In this case, beginners have a friendly platform to practice typing. Based on their level, users can choose the mode from our options to improve their computer skill (typing:P).

**2.Learning English**
When kids first start studying English(any other Language using letters), they would start from the 26 letters. For little kids, especially those whose mother tongue is not English, for example, Asian kids, they may find English letters weird and hard to recognize. This game also aims to help kids/the elderly/whoever just starts studying English to recognize and memorize letters better. This game works in different scenarios such as kindergarten, school, training school, nursing home, etc.

**3.Improving hand-eye coordination**
Eye-hand coordination is the ability to do activities that require the simultaneous use of our hands and eyes, like an activity that uses the information our eyes perceive to guide our hands to carry out a movement. This game is designed to help people improve their hand-eye coordination as it calls for users to unite their visual(observe the letters on the screen by eyes) and motor skills(type the letters by hand).

**4.Relax and entertain**
People get tired and their attention drops after they sit in front of the computer for a long time. This easy and funny game helps people divert attention from their heavy work and take a break. This game is a lightweight mini-game that will not burden the computer to run. After this short game, people can work and study more efficiently.

## 2. A summary of the application

The typing game includes two levels of difficulty, and users can choose the easy mode or the hard mode to play. The easy mode is to help users to be familiar with the keyboard. In this mode, letters randomly selected from the alphabet will show on the screen one by one. Once what users typed is equal to the letter shown on the screen, the next letter will appear, and the catch score will increment by one. In every round, users have 60 seconds to play; the faster they type correctly, they will get more points.

Below is the user experience flow chart to see more clearly how the easy mode works:


When users think they get familiar with the keyboard, they can choose the "hard mode". The hard mode is to help users to type more letters and more accurately.
Below is what a user's experience will be like in hard mode:

## 3. Reflection summary
**Settle down our general idea**
First, we want to imitate a real and complex typing game in which letters/words can randomly display from the bottom of the screen to the top, and at the same time, users can match those letters/ words shown on the screen through typing. However, we found that it's hard for us to start. With Jin's help in the review session, we began to think about the logic behind the game step by step and try to achieve something based on our ability. It was a learning journey during the coding process because we need to learn some new concepts and keep experimenting to make certain functions work. When we finish a complete function, but it doesn't work, we always don't know where the problems are, so it's essential to check every step in the console to debug.

**1.How to lock the button.**
When we start the game by clicking on the "start" button, we found that we can click it again and again, and the game will restart again before the timer runs out. To fix this problem, we add the code **[startButton.disabled = false;]** inside the click event function so the button is "clocked" and we put **[startButton.disabled = true;]** inside the countdown function so when the 60 seconds run out, the user can click the button again.

**2.The timer goes to negative when the game is over.**

After creating the countdown function, the every time when the user starts the game it will count 60 seconds. However,when the game is over(if (seconds === 0)), the timer is still counting and the *second number* goes to negative and wont stop. When the user starts the game again the *second number* goes back to 60 (we set it at the beginning).
To solve the problem, we set the *second number* back to 60 when the game is over instead of when the game is restarted by adding these codes inside the function countdown().

**3. design of "hard mode"**
Firstly, we want to use time interval to increase the difficulty level in hard mode, as the function {showLetter(i)} did. But we met several problems: the first one is if users type faster than three seconds in an interval, they need to wait until the interval runs out, and it's not ideal for user experience. The second trouble is when users type wrongly and a three-second interval runs out, the next group of three letters will appear followed, it looks unclean on the screen and users don't know where they type wrongly.

To make the hard mode clearer and users can exercise more accurately, we give up the interval design and decide to check each letter within a group of three random letters. When users get all three letters in a group right, points will add one, and the next group of three random letters will show.If users type any letter wrong within a specific group of three letters, there is a pop-up window to remind users. To achieve this, we change the hard mode as the following picture shows:


**4.Add more visual effect ➕❤️!!**
At first, there is no ❤️emoji shows up when the user gets one point. Inspired by Jin's review lesson on Friday, I learned how to add "fish" to the basket! So here I adopted the method and created an empty string. When the user get one point, one❤️will be "pushed" into the string and it will show up on the div we created in HTML. In this way, the game is more exciting and users will have more motivation to continue the game.

**5. To call different functions when the user chooses different options**
We try to call the function of easy mode when the user chooses "Easy" option and call the hard mode function when the user selects "Hard" option. First we wrote it this way.
We put the event function inside two IF condition functions and try to call the function inside the condition. But this way somehow we could not call the click function by clicking the button(still puzzeld)and the code [startButton.addEventListener("click", function (e)] has been written twice which is unnecessary. So we changed the structure of the whole game function. By putting the condition function inside the click function,the game will first start and execute a certain mode based on what the user chooses from the level options.

**6.the conflict between two modes**
First, we built the easy version of this typing game.https://codepen.io/xq2206/pen/mdrRmeL
When the user typed the letter on the screen correctly, the next letter will show up and here we used the "typing()" function and it works well. Later, we built the hard version of this game, but only one of the typing() function can work normally when we put them in one codepen. After debugging this problem, we found we add event handler "onkeypress" and typing(e) in the body part, which means no matter which mode users choose, when they begin typing, the body will call "typing(e)." Also, the window.onkeydown is the same meaning.

Therefore, we remove them and add **[document.removeEventListener("keydown, fun1")]** and **[document.addEventListener("keydown, fun2") ]**to make sure only one of the typing function works when the game is running.


**7.Audio Effect**
To help users improve their hand-Ear-Eye coordination (HEE) in this game, we would like to add some audios to remind people if they type rightly. Or create another mode in which users should type the letter when they hear it instead of seeing it. We will learn how to add audio effects to the game to provide more flexible choices and a richer game experience for our users to make our game stand out from the other games.

**8.Other version**
After creating this English letter typing game, we are thinking of adapting this game to other languages to help people learn Chinese characters/Japanese Hiragana/European languages by adding the audio effect.

## 4. Code explanation
## (Articulate in computer language)

// Global vars
let catchscore = 0;
//let the variable catchscore equal to 0 (the mumber of right answers)
let seconds = 60;
//let the variable senconds equal to 60 (time length of the game)
var letter;
//craete a variable letter representing the letter in HTML
var newLetter;
//craete a variable newLetter representing a new random letter in JS
var index = 0;
//let the variable index equal to 0 (Letters array's index)


// DOM Elements
let startButton = document.querySelector("button");
//query the button element and get the element object in the document 
let time = document.querySelector(".time");
//query the time element and get the element object in the document 
let catchDiv = document.querySelector(".catch");
//query the catch element and get the element object in the document 
let words = document.querySelector("#words");
//query the words element and get the element object in the document 
let letters=["A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z"];
//Create an array of objects-letters from A to Z

// build the visual effect of adding ❤️into the page
let heart = [];
//create an empty array heart
function updateheart() {
// define the function which will be executed when the following happens
  let heartEl = document.querySelector("#heart");
  //query the heart div element and get the element object in the document 
  heartEl.textContent = "";
  //Change the textContent property of the heart element object to empty so there is nothing on the page now
  if (heart.length > 0) {
  //if the length of heart is bigger than 0
    for (let i = 0; i < heart.length; i++) {
    //loop through the collection using a for loop when the initial state is 0, when i<length(the number of elements in the arry) of heart, it plus one for each loop
      heartEl.textContent += "❤️";
      //let textcontent property of heart element aggregate "❤️" each time so one ❤️ shows up on the page
    }
  } else {
  //otherwise, If the conditions above is not met
    let el = document.querySelector("#heart");
    //query the heart div element and get the element object in the document 
    el.textContent = "";
    //set element's textContent property to empty
    el.className = "";
    //set element's className property to empty
  }
}

// define the easy mode
var fun1 = function (e) {
  if (e.keyCode == letter.charCodeAt(0)) {
  //str.charCodeAt(index)
  //The charCodeAt() method returns an integer between 0 and 65535 representing the UTF-16 code unit at the given index.
  //index: 0<=An integer <= the length of the string.
  //letter.charCodeAt(0)  // returns a number
  //if the letter user pressed on their keyboard matches the letter on the screen
  
    var random = Math.round(Math.random() * 25);
    //set random as a variable where the value is a random integer between 0 and 25
    newLetter = letters[random];
    //assign the random letter from letters array to newLetter variable
    //letters[random] means picking up a random letter from the Array letters
    words.innerHTML = newLetter;
    //display random letter in HTML
    letter = words.innerHTML;
    //assign the innerHTML property of words to letter
    catchscore++;  
    //add one point to the catchscore variable each time
    catchDiv.innerHTML = catchscore; 
    //display the catchscore on the screen
    heart.push("❤️"); //add one "❤️" in the Array heart
    updateheart();  
    //execute updateheart function
  } else {
  //otherwise
    alert("you typed it wrong! try again");
    //display alert "you typed it wrong! try again" string on the screen if what the user typed is different from the letter on the screen
  }
};

function typing_easy() {
//function typing_easy will be executed when the following happens
  var random = Math.round(Math.random() * 25);
  // set random as a variable where the value is a random integer between 0 and 25
  newLetter = letters[random];
  //set the newletter as a random number in letters array 
  words.innerHTML = newLetter;
  //let the variable newLetter display the words in HTML
  letter = words.innerHTML;
  //assign the innerHTML property of words to letter

  document.removeEventListener("keydown", fun2);
  //remove hard mode's event listener so only one event listener works in this program
  document.addEventListener("keydown", fun1);
  //add easy mode's event listener before playing so the fun1 will be executed when the user presses their keyboard
}




// The hard mode
// Users type letters & check if users are correct or not
function randomLetter() {
//function randomLetter will be executed when the following happens
  var random1 = Math.round(Math.random() * 25);
  //create a random variable 1 between 0 and 25
  var random2 = Math.round(Math.random() * 25);
  //create a random variable 2 between 0 and 25
  var random3 = Math.round(Math.random() * 25);
  //create a random variable 3 between 0 and 25

  return letters[random1] + letters[random2] + letters[random3]; 
  //return the value of randomLetter function by Concatenating the three random varaibles
}

var fun2 = function (e) {
  if (e.keyCode === letter.charCodeAt(index)) {
  //if keycode(letter user presses) matches to letter's charCode(letter on the screen)
    index++;
    //index plus one each time
    if (index === 3) { 
    //if the fourth index is added, it means the user clicked all the three letters correctly, then the program will generate new letters and go back to match from index 0 
      words.innerHTML = randomLetter(); 
      //let the randomLetter function display the words in HTML
      letter = words.innerHTML;
      //assign the innerHTML property of words to letter
      index = 0;
      //let varaible index equal to 0
      catchscore++;
      //let catchscore plus one
      catchDiv.innerHTML = catchscore;
      //display the catchscore on the screen
      heart.push("❤️");
      //add one "❤️" in the Array heart
      updateheart();
      //excute updateheart function
    }
  } else {
  //otherwise
    index = 0;
    //let variable index equal to 0 again
    alert("you typed it wrong! try again");
    //display alert string "you typed it wrong! try again"
  }
};

//Users type letters & check if users are correct or not
function typing_hard() {
//function typing_hard will be executed when the following happens
  words.innerHTML = randomLetter();
  //let the function randomLetter display the words in HTML
  letter = words.innerHTML;
  //assign the innerHTML property of words to letter
  index = 0;
  //let varaible index equal to 0
  document.removeEventListener("keydown", fun1);
  //remove the easy mode's event listener so only one event listener works in this program
  document.addEventListener("keydown", fun2);
  //add the hard mode's event listener so the func2 will be called inside the hard mode
}


// whole game function
startButton.addEventListener("click", function (e) {
//sets up a function that will be called whenever the user clicks the start button
  startButton.disabled = true;
  //disable start button so the user cannot click it when is game is running 
  countdown();
  //exexute the countdown function
  var mySelect = document.getElementById("mode");
  //query the select element and define it as the variable mySelect
  var selected = mySelect.options[mySelect.selectedIndex].text;
  //define the variable selcted as the text(Easy/Haard) in the two options
  //Index means which option
  catchscore = 0; 
  //let variable catchscore equal to 0
  if (selected === "Easy") {
  //if user selct easy mode
  //the text in the select element is "Easy"
    typing_easy();
    //execute typing_easy function so the game will go to the easy mode
  } else if (selected === "Hard") {
  //the text in the select element is "Easy"
  //otherwise, if user select hard mode
    typing_hard();
    //execute typing_hard function so the game will go to the hard mode
  }
};


// countdown timer
function countdown() {
//function countdown will be executed when the following happens
  var timer = setInterval(function () {
  //The setInterval() function calls the function() at specified intervals (in milliseconds).
    startButton.disabled = true;
    //start bubbton is disabled
    seconds--;
    //Decrease the seconds number by one
    time.innerHTML = seconds;
    //display seconds number on the page
    if (seconds === 0) {
    //condition if seconds equals to 0
      time.innerHTML = "0";
      //then display second as 0 on the page
      catchDiv.innerHTML = "0";
      //dispaly point number 0 on the page
      alert("Game over! Your point is " + catchscore + "❤️!");
      //display alert string "Game over! Your point is + catchscore + ❤️!" to remind the user how many points they get
      heart = [];
      //let the heart change back to an empty array
      updateheart();
      //exeute updateheart function
      words.innerHTML = "";
      //clear the letters on the page
      clearInterval(timer);
      //clear the timer so the computer will stop countdown the time
      document.removeEventListener("keydown", fun1);
      //remove easy mode's event listener so when the users press their keyboard, nothing would happen
      document.removeEventListener("keydown", fun2);
      //remove hard mode's event listener so when the users press their keyboard, nothing would happen
      seconds = 60;
      //set variable seconds back to 60
      time.innerHTML = "60";
      //display the text 60 in HTML
      startButton.disabled = false;
      //make start button be able to click so the uesr can restart the game again
    }
  }, 1000);
  //call the function every 1000 milliseconds(one second)
}