DEV Community: Confidence Nwalozie

Build Your First Typing Game with JavaScript - Part 3

Confidence Nwalozie — Tue, 19 Nov 2024 15:11:10 +0000

If you're not quite sure how we got here, refer to the starter section of the series and follow through to the previous part where we created Modules for the game, discussed the Window storage property, explained Ternary operators, and briefly introduced Event triggers.

Also, here's the link to the files in the tutorial's current working directory.

The game is still unplayable at this stage and we'll focus on bringing it to life, mostly in script.js. This file serves as the module assembly location where we'll implement the game's main logic.

💡 Heads Up: With concept assimilation in focus, there will be a few instances where you'll be expected to engage in exercises that reinforce what is being explained. Feel free to play around, break things, and add functionalities that reflect your preferences.

Step 1 - Importing Modules

We've previously addressed how module contents can be exported with the export keyword, but how do you use them in another part of a project?

The Javascript import syntax calls the components of a module in a relative path in the state in which they were exported.

For example, the following illustrates importing module components exported as objects.

import { export1 }  from "module-name"; // singular module entity import
import { export1, export2, ... }  from "module-name"; // multiple module entity import

There are a number of scenarios where you write the import statement differently depending on the nature of the external module or how you want to access its components, all covered in this documentation.

We'll import the quotes array variable from quotes.js and the functions we defined in the highscores.js module.

Open script.js on a new tab in VS Code and insert the following atop the empty page.

// ./script.js
import { quotes } from './modules/quotes.js';
import {
  saveHighScore,
  displayHighScores,
  clearHighScores,
} from './modules/highscores.js';

Great!

Ideally, you should only import entities that handle specific functionalities within a file component. It is not unusual to dive right into the component's algorithm and then occasionally scroll to the top of the file to import the required modules as you go.

Step 2 - DOM Element selection

HTML documents consist of a collection of nodes that make up the DOM tree, also known as the building block of web applications. These nodes represent all existing HTML components and could be elements (such as divs, paragraphs, headings, buttons, etc.), texts, or attributes.

To interact with the DOM with Javascript, you'll typically use the following methods to select node elements:

The document.getElementById() method lets you select a single element by its unique ID.

For example, this selects the start button assigned to the ID start in index.html.
```
const startButton = document.getElementById('start');
```
Fancy a challenge? Here's a simple exercise for you.

Below is a list of IDs and their proposed variable names.

Use the document.getElementById() method to select each element assuming the example syntax above goes by 'start as startButton':
- prompt_start as promptStart
- prompt_again as promptAgain
- typed-value as typedValueElement
- quote as quoteElement
- timer as timerElement
- welcome as welcome
- reset as resetBtn
- reset-div as resetDiv
The document.getElementsByClassName() method selects all elements featuring a specific class name and returns an HTMLCollection of the elements, which can be accessed by their index.

We select the form element with the class name form. By doing this, we can change the display state of the input textbox.
```
const form = document.getElementsByClassName('form');
```
The document.querySelector() method is more versatile; you use it to select the first element that matches any specified CSS selector.

For example, to select the first element in a DOM with the class myClass or the ID myId, you use document.querySelector('.myClass') and document.querySelector('#myId') respectively.

The major difference with the previous methods is the prefix annotation in the parameter names, as you've noticed with the dot(.) for classes and the hash(#) for IDs in the above example.

Select the <div> with the class quotes.
```
const quotesDiv = document.querySelector('.quotes');
```

The DOM API provides various methods and properties for interacting with HTML documents. We've just mentioned a few popular ones but the list is inexhaustive.

If you completed the challenge exercise correctly, coupled with the two other element selection methods listed, you should now have the following in script.js.

import { quotes } from './modules/quotes.js';
import {
  saveHighScore,
  displayHighScores,
  clearHighScores,
} from './modules/highscores.js';

// Selected HTML elements
const quoteElement = document.getElementById('quote');
const typedValueElement = document.getElementById('typed-value');
const promptStart = document.getElementById('prompt_start');
const promptAgain = document.getElementById('prompt_again');
const startButton = document.getElementById('start');
const timerElement = document.getElementById('timer');
const welcome = document.getElementById('welcome');
const resetBtn = document.getElementById('reset');
const resetDiv = document.getElementById('reset-div');
const form = document.getElementsByClassName('form');
const quotesDiv = document.querySelector('.quotes');

Step 3: Display State Handlers

The following establishes key functions to handle the display state of the selected HTML elements in the different phases of player interaction.

Add these under the selected HTML elements.

....

// Function to hide the prompt and related elements  
const hidePrompt_Button = () => {  
  promptStart.className = 'none'; // Hides the promptStart element
  promptAgain.classList.add('none'); // Adds 'none' class to promptAgain 
  startButton.style.visibility = 'hidden'; // Hides the start button  
  welcome.style.display = 'none'; // Hides the welcome message  
  resetDiv.style.display = 'none'; // Hides the reset button div  
};  

// Function to show prompt and related elements  
const showPrompt_Button = () => {  
  promptAgain.classList.remove('none'); // Removes 'none' class to show promptAgain  
  startButton.style.visibility = 'visible'; // Makes the start button visible  
  resetDiv.style.display = 'inline-block'; // Shows the reset button div  
};  

// Function to display the form element  
const showForm = () => {  
  form[0].style.display = 'block'; // Shows the first(and only) form element
  quotesDiv.classList.add('active'); // Adds the class 'active' to quotesDiv 
};  

// Function to hide the form  
const hideForm = () => {  
  form[0].style.display = 'none'; // Sets the first(and only) form element display to hidden 
  quotesDiv.classList.remove('active'); // Removes the class 'active' from quotesDiv  
};  

// Function to show the timer  
const showTimer = () => {  
  timerElement.classList.remove('none'); // Removes 'none' class to show the timer  
  timerElement.style.display = 'inline-block'; // Sets the timer to display as inline-block  
  timerElement.innerText = '0'; // Initializes the timer text with number '0'

// Disable input text box and default attributes
typedValueElement.disabled = true;
typedValueElement.setAttribute('autocomplete', 'off');
typedValueElement.setAttribute('autocorrect', 'off');
};

Note: .... indicates unchanged code.

We've just grouped the various elements' respective visibility states under functions that can be parsed as event handlers. When called, these functions dynamically change the display of their components as defined.

We also disabled the input text box and modified some of its default attributes.

You'll appreciate this grouping better from Step 5 onwards, where we nest these functions in event listeners. You can always scroll back to this section to reference each function where necessary.

Step 4: Timer Countdown Logic

Next, we implement a timer that tracks how long a player has been typing and create another function that stops the timer.

....

// Initializes variables to track the start time and calculate the elapsed typing time
let startTime = Date.now(); // variable initialized as the current date and time in milliseconds
let timerInterval = 0; // variable initialized for the timer interval as integer '0'

// Function to start the timer
const startTimer = () => {
  startTime = Date.now(); // Resets the start time to the current date and time

  // Sets an interval to update the elapsed time every second
  timerInterval = setInterval(() => {
  const elapsedTime = ((Date.now() - startTime) / 1000).toFixed(0); // Calculates the elapsed time in seconds and round to the nearest whole number
  timerElement.innerText = `${elapsedTime}`; // Updates the timer element's text to display the elapsed time
}, 1000); // interval set to 1000 milliseconds (1 second)
};

// Function to stop the timer
const stopTimer = () => {
  clearInterval(timerInterval); // clears the interval to stop the timer updates
};

The startTimer() function when invoked, continually calculates the elapsed time through the setInterval function. The elapsed time is displayed in the timerElement, updating every second until the stopTimer() function is called.

The stopTimer() function halts the count and clears the timer interval.

That's all there is to the timer logic.

Event Listeners

Event listeners are essential for creating interactive web experiences. By attaching event listeners to markup elements, we can instruct web pages to respond in a specific way when users perform certain actions.

Implementing Event Listeners

The event listener syntax executes a function when a specific event occurs on an HTML element. The function executed is commonly described as an Event Handler.

We typically use the addEventListener method to implement an event listener in Javascript.

<element>.addEventListener(event, function, useCapture?);

Here's a breakdown of the syntax properties:

element: This is the targeted HTML element (e.g. A button). We already covered how they can be selected under the DOM element selection section.
event: A string representing the event type, such as 'click', 'mouseover', 'scroll', 'keydown' and several others.
function: The callback function(s) that executes when the event occurs on the HTML element. This can be a named function, an anonymous function (unnamed), or an arrow function.
useCapture (optional, hence the question mark): A boolean value indicating how the event should be captured. The default value is false.

An experimental example of how to use the addEventListener method to listen for a click event on a button is illustrated below. We'll dynamically change the style setting of our form element with the showForm display state handler.

Add this line of code to script.js. Save the file and start up live server.

startButton.addEventListener('click', showForm);

After the project loads in the browser, click the Start button.

You'll notice that the form displays but you cannot type anything into it. This is because the input area was previously disabled.

Let's fix this.

Erase the above event listener and replace it with the following.

startButton.addEventListener('click', () => {
  showForm();
  typedValueElement.disabled = false;
  typedValueElement.focus();
}
);

Save the changes and click the Start button again.

In this example, we've seen two different event handler cases.

In case 1, we call the showForm function on the 'click' event as the only event handler without parentheses.

However, in case 2, we use an arrow function as a callback to show the form, enable the input field, and focus on it immediately after the form is displayed.

So, yes, you can execute multiple functions and statements in response to an event. Just take note of the parentheses () usage in both cases, as they determine how functions are invoked.

Game Mechanics

Now that you understand how event listeners work, clear the above experimental lines of code.

The game's mechanics entail the entire series of events that occur between when the player starts the game and when they complete typing the group of words presented in the randomly selected quote. You can type just about anything into a form; however, we want what is being typed to align with the quote that needs to be matched.

We have the task of preparing the interactive space for the player and imposing checks that evaluate the player's input to verify its correctness.

Step 5: Start Button Event Listener

To prepare the game's interactive space, begin by replacing the cleared experimental code with the following.

// Initializes the word list variable and word index variable to track the current word  
let words = [];  // variable initialized as an empty array
let wordIndex = 0; // variable initialized as an integer zero
let isTimerStarted = false; // flag to control the startTimer funtion

This initializes three crucial variables the start button event listener will utilize:

The variable words will store the word list extracted from the selected quote.
The wordIndex variable will track the player's current word position in the word list.
Because we do not want to call the startTimer function incorrectly/prematurely, we use a boolean flag isTimerStarted to effectively control when it is called into action.

Below the initialized variables, we encapsulate the functions and statements that should execute when you click the start button.

....

startButton.addEventListener('click', () => {  
  // Hides unneeded elements when the game starts  
  hidePrompt_Button();  

  // Generates a random index to select a quote from the quotes array  
  const quoteIndex = Math.floor(Math.random() * quotes.length); // Takes the quotes length (20) and selects a random number within range
  let quote = quotes[quoteIndex]; // Assigns the selected item value quoteIndex represents to the variable 'quote'

  words = quote.split(' ');  // Splits the selected quote into an array of individual words 
  wordIndex = 0; // Set wordIndex to zero

  // Creates an array of span elements for each word to allow for individual highlighting  
  const spanWords = words.map((word) => `<span> ${word} </span>`);  

  // Sets the inner HTML of the quote element to the formatted words  
  quoteElement.innerHTML = spanWords.join('');  
  quoteElement.classList.add('quote'); // Adds the class 'quote' to style the quote element
  quoteElement.childNodes[0].className = 'highlight'; // Sets the class of the first word to 'highlight'

  // Show the timer, show the form
  showTimer();     
  showForm();

  isTimerStarted = false; // Timer not started yet  
  typedValueElement.value = ''; // Clear previous input, if any
  typedValueElement.disabled = false; // Enable the input field  
  typedValueElement.focus(); // Set focus on the input field for typing  
});

On clicking the start button we immediately hide the elements we do not need by parsing and calling the hidePrompt_Button() function first.

We then use the Math.floor(Math.Random()...) methods to randomly select a quote from the quotes array, assigning the resulting value to the variable quote.

The selected quote is split into a list of individual words and the new word list is assigned to the initially empty array words.

This word array is then transformed from an array of single-word strings into an array of HTML span elements with the .map() method.

We join the now HTML-transformed words, parse them into the quoteElement, add the 'quote' CSS class to it for some animation, and highlight the first child of the element (the first word span element).

We then display the timer element and the form, specify that the timer should not start immediately, and finally, enable and focus the input text box.

Okay. That was a lot to take in.

💡 Pro Tip: When working with unfamiliar code, there's a tendency you may still be uncertain of what value a variable hold despite the description(s) accompanying them. You can always use the console.log(<variable>) method to inspect variable values and behavior in your browser's console.

Step 6: Typed Value Element Helper Functions

Moving forward, the following helper functions facilitate the game flow and validate player inputs. We will go over them in detail.

....

// Validates the typed word against the current word and the current typed word.
function validateTypedWord(typedValue, currentWord, currentTypedWord) {  
  if (typedValue.endsWith(' ') && currentTypedWord !== currentWord) {  
    return false;  // Returns false if the typed value ends with a space and does not match the current word,
  }  
  if (typedValue.length < currentTypedWord.length) {  
    return false; // Returns false if the typed value is shorter than the current typed word.
  }  
  return currentWord.startsWith(currentTypedWord); // Returns true if the current word starts with the current typed word.
}

// Highlights the currently typed word in the quote 
function highlightCurrentWord() {  
  for (const wordElement of quoteElement.children) {  
    wordElement.className = '';  // Clears the previously highlighted word(s)
  }  
  quoteElement.children[wordIndex].className = 'highlight'; // Applies the class 'highlight' to the current word element.
}

// Advances to the next word in the quote.
function advanceToNextWord() {  
  wordIndex++;  // Increments the word index
  const completedText = words.slice(0, wordIndex).join(' ') + ' ';  
  typedValueElement.value = completedText; // Updates the typed value to include all the completed words

  highlightCurrentWord(); // Calls the highlightCurrentWord functions on the current word.
}

// Function to handle the game completion
function endGame() {  
  stopTimer();  // Stops the timer
  showPrompt_Button(); // Shows the prompt button
  hideForm(); // Hides the input form
  typedValueElement.disabled = true; // Disables the input area.
  quoteElement.innerHTML = ""; // Clears the quote element


  const elapsedTime = ((new Date().getTime() - startTime) / 1000).toFixed(2); // Calculates the elapsed time
  const message = `🎉CONGRATULATIONS! You finished in ${elapsedTime} seconds.`; // Displays congratulatory message 

  // Checks if elapsedTime falls in top score category (Top 10)
  const isTopScore = saveHighScore(elapsedTime); 
  const highScoreMessage = displayHighScores(null, isTopScore ? elapsedTime : null); 

  alert(message + '\n' + highScoreMessage); // Displays high scores.
}

The validateTypedWord(typedValue, currentWord, currentTypedWord) function takes three parameters whose respective values we will define. Essentially, this function compares the typed input with the current word in the quote to ascertain its validity.

If the word being typed corresponds with or is on track to match the current word from the word index, it returns a true value.

However, it returns false if:
- The typed value ends with a space and the currently typed word does not match the current word in the quote (indicating an incorrect entry).
- The length of the typed value is less than that of the current typed word (indicating an incomplete word).
The highlightCurrentWord() function provides visual feedback that helps players track their progress by highlighting the HTML span element representing the currently typed word in the quote.
The advanceToNextWord() function progresses the game to the next word. It increments the word index and calls the highlightCurrentWord() function to highlight the latest word.
Finally, the endGame() function handles what happens when the game ends. It
- Stops the timer.
- Displays the 'play again' prompt message and related elements like the reset and start buttons.
- Hides and disables the input form.
- Clears the quote element.
- Calculates the elapsed typing time and formats the result to two decimal places.
- Displays a congratulatory message.
- Displays the current score and all saved high scores accordingly.

Step 7: Typed Value Element Event Listener - Logic Flow, Success and Error Handling

We're almost done now. Writing the required helper functions was the first step in the player input validation puzzle.

If you try typing anything into the text box at this point, nothing still happens. This is because we have yet to;

Assign a value to each of the validateTypeWord function parameters.
Construct conditionals that logically utilize the helper functions in the input element's event listener.

The following code resolves all of these.

....

// Initialize an error flag to track input errors  
let errorFlag = false;  

// Adds an event listener for input on the typedValueElement  
typedValueElement.addEventListener('input', () => { 

  // Conditional to start the timer  
  if (!isTimerStarted) {  
    startTimer(); // Start the timer  
    isTimerStarted = true; // Set the flag to indicate the timer has started  
  }  

  // validateTypedWord function parameter definitions
  const typedValue = typedValueElement.value; // Gets the current value typed by the user 
  const currentWord = words[wordIndex]; // Gets the current word from the quote that needs to be typed 
  const typedWords = typedValue.trim().split(' '); // Splits the typed value into words and trim any trailing space
  const currentTypedWord = typedWords[typedWords.length - 1] || ''; // Gets the last typed word (the current word being typed)

  // Validates the typed word against the current word  
  if (validateTypedWord(typedValue, currentWord, currentTypedWord)) {  
    // If valid, reset the error class and flag  
    typedValueElement.className = '';  
    errorFlag = false;  

    // Checks if the current typed word matches the current word  
    if (currentTypedWord === currentWord) {  
      // If it's the last word, end the game  
      if (wordIndex === words.length - 1) {  
        endGame();  
      }   
      // If the user typed a space after the current word, move to the next word  
      else if (typedValue.endsWith(' ')) {  
        advanceToNextWord();  
      }  
    }  
  } else {  
    // If the typed word is invalid, set the error class and flag  
    typedValueElement.className = 'error';  
    errorFlag = true;  
  }  
});

The timer initiates the count only after the player's first input. This is because we have called the startTimer() function in a conditional where isTimerStarted is not equal to false.

The conditionals that follow incorporate all the pre-defined helper functions.

Any return of false in the validateTypedWord() function indicates an error, which sets the error flag to true and applies the 'error' CSS style to the input text box.

However, if the validateTypeWord function returns a true value (meaning correct word typing), then it;

Clears the 'error' CSS style and resets the error flag to false.
Goes further to check if the most recently completed word is the last word on the quote's word list.
- If that is the case, it calls the endGame() function.
- However, if the most recently completed word is not the last on the word list and is followed by a space, it moves to the next word by calling the advanceToNextWord() function.

Fantastic!

Step 8 - Typed Value Element Keydown Event Listener

You might not have noticed yet, but there's a slight bottleneck in the typing experience.

Earlier, we saw a few ways to alter the default attributes of a form element but there's one more we haven't addressed.

Consider yourself in the player's shoes for another moment. While typing, you could accidentally hit the Enter key and trigger the default response behavior associated with pressing that key - usually submitting the form and refreshing the page. A page refresh effectively means starting the game afresh.

The player will most likely be unaware of this, and as the developer, you want to curb potential interruptions that mar their playing experience.

The following event listener attached to typedValueElement listens for the 'Enter' 'keydown' event and prevents this unintentional form submission from happening.

// Adds an event listener to prevent the default action when the Enter key is pressed
typedValueElement.addEventListener('keydown', (event) => {
    if (event.key === 'Enter') {
        event.preventDefault();
    }
});

Awesome!

Our game is now at least 95% functional. All that’s left is to sort the Reset Button's functionality.

Step 9 - Reset Button Event Listener

The following sets up an event listener for the reset button element resetBtn to listen for a 'click' event.

// Adds an event listener to the reset button to handle high score reset
resetBtn.addEventListener('click', () => {
    const userConfirmed = confirm( 'Are you sure you want to reset all high scores? This action cannot be undone.');

    if (userConfirmed) {
        clearHighScores();
        alert('High scores have been successfully reset.');
    }
});

On clicking the reset button, the web page responds with a confirmation dialog message. If the player confirms the action, it calls the function clearHighScores() from the highscore.js module to clear the scores and displays an alert notifying the user of the score reset success.

Here’s a quick way to test this functionality.

Go to style.css. Under the class reset-div, disable the display setting with comments and Save the file.

/* ./style.css */
....
.reset-btn {
  position: relative;
}

.reset-div {
  position: relative;
  display: inline-flex;
  align-items: center;
/* display: none; */ /* hidden display setting deactivated */
}
....

Expectedly, the reset button shows up on the web page above the welcome message.

Now click the reset button and verify that the event listener works as described.

Revert to the previous display setting of reset-div afterward by removing the CSS code comment and saving the file.

Wrap Up

And there you have it. You have created a fully functional typing game!

Here's the full demo.

Resources and Further Reading

You'll find the complete code in this repository.
Web development tutorial reference from Microsoft.

Additional Tasks

A simple challenge to stimulate your analytical and problem-solving capacity using your new-found Javascript knowledge. Give it a try.

👉 Use a modal to display the typing completion message instead of the built-in Windows dialog box.

You can learn about creating modals from this tutorial by Traversy Media.

Your solution should be similar to what we have here; however, you can customize the colors and themes to suit your preference.

💡 Task Hint:
I. You'll structure a modal HTML element in index.html.
II. Select the new modal elements (with IDs and classes) in script.js
III. For the modal message render logic, you'll make modifications to:

The displayHighscores() function in highscores.js and

The endGame() function in script.js

To submit:

Confirm that the new feature works on your browser.
Bundle your project folder with the working code in a compressed format (.zip, .rar, etc.).
Send over the bundled file to kingstondoesitall@gmail.com with the email subject Typing-Game Modal Message Solution by <your_name>.

You'll get your submission reviewed and a feedback from us within 24hrs.

Credits

This guide builds on Microsoft's typing-game reference documentation. Huge credits and a big 'thank you' go to pioneer author Christopher Harrison without whose expertise and guidance all of this may not have been possible.

And also to you, the energetic, enthusiastic, and dedicated knowledge seeker who persevered through this action-packed tutorial, we are incredibly honored to help you demystify the developer path through series like these. We enjoyed putting this guide together with you in mind and can't wait to see you progress even further. ❤

If you found this tutorial helpful, you can support us:

Buy TheTechED Junction Coffee ☕
Share this resource with friends and colleagues 📩.
Follow us on Linkedin and engage with our growing community 🤼.

Build Your First Typing Game with JavaScript - Part 2

Confidence Nwalozie — Tue, 29 Oct 2024 20:58:09 +0000

This is a continuation of the Build your first typing game with Javascript series.

In the first part of the tutorial, we laid out the game's functional requirements and structured the webpage to display a portion of its interactive content.

You'll find the files in the current working directory from part one here.

We will proceed by delegating the game's functional components to separate units that handle fractions of the game's logic. These units are generally described as modules.

Modules; what are they?

A module is a self-contained unit of code that can be imported and used in other files within a project.

Modules could feature functions, variables, classes, or objects that perform a specific task or set of related tasks.

Once a module is created, you can "invite" or import it into other project parts whenever you need to handle a specific functionality it emits.

This is a common practice in web development because it allows for:

Better organization: As code is broken into manageable pieces.
Reliable testing: Individual modules can be tested in isolation to ensure their functionality before integrating with other modules.
Ease of maintenance: You can update or debug specific modules without affecting the rest of the project.
Code reusability: Modules can be reused in different parts of a project, or even across entirely different projects as libraries.

Creating a Module

Now that you have been introduced to the concept of modules, let's create one.

Quotes Module

In the root directory, create a new folder named modules and add a new file quotes.js.

We need 20 random quotes for the module content.

Quotes Module - Variable Definition

Draft quotes from your favorite philosophers (eg. Professor Dumbledore, Sherlock Holmes) or prompt a Large Language Model like ChatGPT to generate them within a specific sentence length limit.

Use the following prompt (without the quotation):

'Generate 20 Quotes from *philosopher_name* with a sentence range of 10 - 12 words.
 Present the quotes in a Javascript string array format.'

Or use the sample response below. Copy the response into the newly created file and ensure the variable name is defined as quotes.

//./modules/quotes.js
export const quotes = [  
    "Happiness can be found even in the darkest of times.",  
    "Words are, in my not-so-humble opinion, our most inexhaustible source.",  
    "It matters not what someone is born, but what they grow to be.",  
    "It is our choices, far more than our abilities, that show who we are.",  
    "You must be the change you wish to see in the world.",  
    "The truth is a wonderful yet terrible thing, and should therefore be treated with caution.",  
    "Do not pity the dead, Harry. Pity the living.",  
    "The greatest magic is the magic of love and friendship.",  
    "We are only as strong as we are united, as weak as we are divided.",  
    "You will find the world is full of unusual things.",  
    "The best of us must sometimes eat our words.",  
    "It is the quality of one's convictions that determines success.",  
    "Perhaps those who are best suited to power are those who never sought it.",  
    "To have been loved so deeply will give us some protection.",  
    "A good man's life should be measured by his kindness.",  
    "Sometimes you must choose between love and duty, each has its cost.",  
    "The future is unwritten. It is ours to shape.",  
    "The long term is the key to understanding our short-term actions.",  
    "Fear of a name increases fear of the thing itself.",  
    "Even the smallest person can change the course of the future.",  
    "A man who is a master of patience is a master of everything else."  
];

Notice the inclusion of an export term before the variable declaration? The export keyword is used to expose the contents of a module so they are accessible by other parts of a project.

Note: The concept of modules is based on the principle of dependability. A file component qualifies as a module only when it has shared its functionality and provided value to another component.

Awesome. Now we have a module holding an array of quotes that will be utilized in the game.

Windows Storage Property

Recall that one of the expectations for our game is to track and (possibly) retain typing records after each play session. These typing records will typically be stored on the web browser in a compartment known as Local Storage.

An alternative location for storing this kind of data (A.K.A Web tokens) is the Window Session Storage, which is similar to local storage but only available for the duration of a user's current browsing session.

We would use the Local storage option to store the player's high scores so that the records persist even after the user exits the page.

Highscores Module

Create a new file named highscores.js in the modules folder.

In this file, we define four functions to store, fetch, display, discard, and erase typing records as needed within the game.

N/B: A score refers to the time it takes a player to finish typing a quote and a list of accumulated scores makes up the typing records.

We want to store at most 10 scores per time.

Highscores Module - Function Definitions

This saveHighScore(param*) function takes a score parameter and does four things.

It adds the score to the list of highscores in local storage.
Ranks all highscores (including the newly added score) in ascending order - quickest to slowest.
Stores only the top 10 scores after sorting.
Returns a Boolean value indicating whether the new score was retained (True) or not (False).

function saveHighScore(score) {
    let highScores = getHighScores(); // Gets all highscores in local storage
    highScores.push(score); //Adds the new score to the list of highscores
    highScores.sort((a, b) => a - b); // Sorts scores in ascending order
    if (highScores.length > 10) {
        highScores = highScores.slice(0, 10); // Keeps only the top 10 scores
    }
    localStorage.setItem('highScores', JSON.stringify(highScores)); //saves top 10 scores to local storage
    return highScores.includes(score); // Returns true if the current score is in the top 10
}

The getHighScores() function retrieves an array of highscores in JSON format from the browser's local storage.

Notice the use of ternary operators (? and :)? Ternary operators serve as a concise alternative to traditional conditional statements.
```
function getHighScores() {
    const highScores = localStorage.getItem('highScores');
    /* Checks if there are any high scores stored.
    Parses the JSON string into an array if true; else, returns an empty array.*/
    return highScores ? JSON.parse(highScores) : []; // concisely written conditional
}
```
Without ternaries, the above return line would read:
```
// traditional conditional
if (highScores) {
  return JSON.parse(highScores);
} else {
  return [];
}
```
⚠️ Ternary operators are not direct substitutes for if-else statements; they do not serve in all cases and are best suited for simple, clear-cut scenarios where concision is justifiable.

We'll use another function displayHighScores() to handle how scores are displayed after each game session.

function displayHighScores() {
  const highScores = getHighScores(); // Gets all highscores in local storage

  // Formats the highscores into a numbered list
  const formattedScores = highScores
  .map((score, index) => `${index + 1}. ${score} seconds`)
  .join('\n');

  // Returns the formatted scores as a single string element
  return formattedScores;
}

Finally, the clearHighScores() function erases all typing records from the browser's local storage.

function clearHighScores() {
  localStorage.removeItem('highScores');  // clear all high scores from local storage
}

Note: These are top-level functions and do not need to be arranged chronologically.

For reference, here's the order we've gone with.

// ./modules/highscores.js
export function displayHighScores() { // in-line function export
  const highScores = getHighScores();

  const formattedScores = highScores
    .map((score, index) => `${index + 1}. ${score} seconds`)
    .join('\n');

  return formattedScores;
}

function saveHighScore(score) {
  let highScores = getHighScores();
  highScores.push(score);
  highScores.sort((a, b) => a - b);
  if (highScores.length > 10) {
    highScores = highScores.slice(0, 10); 
  }
  localStorage.setItem('highScores', JSON.stringify(highScores));
  return highScores.includes(score); 
}

function getHighScores() {
  const highScores = localStorage.getItem('highScores');
  return highScores ? JSON.parse(highScores) : [];
}

function clearHighScores() {
  localStorage.removeItem('highScores');
}

export { clearHighScores, getHighScores, saveHighScore }; // functions exported as objects

💡 Pro Tip: Exporting functions as objects work the same as in-line export statements. However, the latter is usually preferred for smaller modules while the former is ideal for larger modules requiring additional control and organisation.

Excellent!

Now that we have both quotes.js and highscores.js modules set up, we have a solid base to get the game fully functional.

The game's main logic consists of triggers that signal the browser what to do and when to do what as players interact with the web page elements.

For example, in this demo, you see the page elements change when the start button is clicked. Some hidden elements become visible, while those initially visible disappear as the game moves to its second phase.

This transition is made possible by the click event trigger.

Event triggers are an integral part of Event Listeners, and in the next and final part of the tutorial, we will explore the concept, its syntax, and its implementation.

Build Your First Typing Game with JavaScript - Part 1

Confidence Nwalozie — Mon, 28 Oct 2024 15:40:05 +0000

This is a step-by-step beginner's guide to building a minimalist typing game with JavaScript.

You'll learn how to set up an intuitive interface and manipulate the Document Object Model (DOM) with key concepts like modules, event listeners, event handlers, and dynamic styling which constitute the backbone of responsive and engaging webpages.

By the end of the tutorial, you'll have built a fun, interactive game and acquired an enhanced practical understanding of the fundamentals of Javascript.

The tutorial is split into three (3) parts:

Part one covers the following:
- Pre-requisites
- Project environment setup
- Project Deliverables
- Project structure
- Page markup and layout of interactive elements
Part two discusses Modules, why they are important in web development and establishes key functionalities in module components.
Part three focuses on building the game's logic, integrating the established modules, and ensuring the game works as expected.

💡 Tip: You can navigate to any part of interest. Each part includes a link to starter files representative of the tutorial's progress from the preceding section.

Pre-requisites

We presume you have (at least) prior theoretical HTML, CSS, and Javascript exposure.

It would be particularly advantageous if you're familiar with:

Creating a form and a submit button (HTML)
Styling elements using classes and IDs (CSS)
the following Javascript concepts:
- Creating and manipulating Arrays
- Conditionals and conditional statements
- Getting a Random number
- Getting the current time

Tools You’ll Need

An IDE (Integrated Development Environment): We will use Visual Studio Code alongside helper extensions.
A Web Browser: Install MS Edge, Chrome, Firefox, or any other modern browser to view and test the output of your code.

Project Environment Set Up

Before beginning any project, it is conventionally regarded as good practice to organize the development environment in a way that eases general workflow. Setting this up could involve downloading assets, installing required components, and sorting configuration files.

Installing VS Code Extensions

Extensions are assets that assist development processes. They provide essential technical support so you have a smooth and efficient programming experience.

Install the following VS Code extensions:

Prettier - Code Formatter: Enhances code readability with consistent formatting styles.
ESLint (Code Linter): Identifies and fixes common errors.
Live Server: For real-time, development-phase code test.

Here, we illustrate the extension installation process with ESLint.

To install any extension,

Click on the Extensions icon on the left sidebar of VS code or press Ctrl + Shift + X.
Enter the extension name in the search bar and click on the most relevant result (usually the one with the most downloads).
Click "Install".

We recommend restarting Visual Studio code after installation for proper IDE integration, although some extensions may not require it.

Project Deliverables

Pause for a minute and think about the features that make up a typing game. If you have played one in the past or used any typing tool, you will concur that they primarily:

Provide an intuitive and interactive interface to the user or player.
Display a randomly generated word, quote, or sentence for the player to type.
Track and compare the player's input against the presented text or group of texts.
Highlight correct and incorrect submissions, and signal erroneous input in real-time.
Alert the player upon game completion and report tracked data.
Store typing records.

More advanced features could include measuring typing accuracy and typing speed in Words Per Minute (WPM); however, we'll focus on the elementary.

Now that we are clear on the game's deliverables, let's begin by initiating a basic project structure.

Creating the Project Structure

Start up a new project folder and create the following files:

index.html
style.css
script.js

index.html houses all our markup. It is the file the web browser loads by default, and the resulting webpage which players interact with.

style.css serves as our webpage stylesheet.

script.js will hold all the underlying logic governing the typing game's behaviour.

Marking up with HTML and CSS

Open the index.html file in a new tab.

In VS code, use the exclamation mark (!) Emmet Abbreviation on the newly created HTML document. This automatically populates the page with a basic HTML boilerplate.

If you use an IDE different from VS Code without the emmet abbreviation feature, you can grab and use the code snippet below.

Head Element

An HTML head is a vital part of an HTML document. It contains essential metadata like the webpage title, logo, description, links to stylesheets, scripts, and other resources that help define how the page behaves and how it is displayed in the browser to users.

Modify the page title to suit the project's purpose and use this image as the page logo. Download and save the image as favicon.jpg in the project's root location.

<!-- index.html -->
    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Typing Game | My First Typing Game with JavaScript</title>
        <link rel="icon" type="image/png" sizes="32x32" href="./favicon.jpg" />
      </head>
      <body class="container">
      <!-- Interactive content goes in here -->
      </body>

Below the <head> element we instantiate the HTML body with the class container. This is where all the interactive content will be embedded, starting with the page header.

Header Element

The header HTML section comprises a collection of information (mostly) statically positioned at the top of a webpage. It is typically used to convey a website's theme, display announcements, promotions, and useful links for easy navigation.

We, however, do not use the header element optimally here; it is solely used to maintain semantic convention.

Copy the following code block and insert it in the body element:

.... 
<body class="container">
    <header>
        <nav class="reset-btn">
          <div class="reset-div" id="reset-div">
            <p id="reset-msg">reset typing records</p>
            <button id="reset">
              <i class="ri-reset-left-fill"></i>
            </button>
          </div>
        </nav>
        <h1 id="welcome">Welcome to typing game!</h1>
        <h1><time id="timer" class="timer none" datetime=""></time></h1>
      </header>
....

Note: .... indicates unchanged code.

The above header represents the initial set of the game's interactive content and has three notable elements:

A h1 element to display a welcome message to the player.
Since the game will store typing records as mentioned in the deliverables, we include a reset button within the nav element so a player can erase all records and revert to a clean slate when they want to.
Lastly, a second h1 element that wraps the element <time>. This h1 element holds the timer value, and will only be displayed when the game begins.

The <i> tag implements a reset button icon sourced from a third-party style package called remixicon.

Style Sheet and Reset Button Icon Import

We'll look at what we have done so far, but before that, let's add some styles to make our webpage look appealing.

Head to the style sheet and implement all the styles here. Copy everything in the code space and paste it inside your style.css file.

/*./styles.css

/* Base Styles */
body {
background-color: #fefeff;
color: hsl(210, 10%, 20%);
text-align: center;
margin: 1.5em;
font-size: 130%;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
display: flex;

}
.container {
justify-content: center;
align-items: center;
display: flex;
flex-direction: column;
height: 100vh;
margin: auto;
}

/* Header Styling */

/*....(truncated)

Next, revisit the HTML document and link the stylesheet in the head element.

Also, include the link to the remixicon webpack. This lets us use the custom reset button icon within our markup.

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Typing Game | My First Typing Game with JavaScript</title>
    <link rel="icon" type="image/png" sizes="32x32" href="./favicon.jpg" />
    <!-- style.css file linked!-->
    <link rel="stylesheet" href="style.css" />
    <!-- Remix icons imported!-->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/remixicon@4.3.0/fonts/remixicon.css"/>
  </head>
  ....

Having imported the required styles, let's see what our webpage looks like.

On the bottom right of VS code, click Go live to run live server. This should load up all the content in index.html.

If the page does not load automatically, open your web browser and go to this address http://127.0.0.1:5500/.

You should see this in the browser window:

Keep the browser and live server running as we'll need them for feedback as we progress.

Prompt and Quote Elements

Back to our markup in VS code, add the following directly under the header element:

....
<div class="quotes">
  <div>
    <p id="prompt_start">
      Practice your typing skills with a quote from Professor Dumbledore.
      <br />
      Click the <strong>Start button</strong> to begin!
    </p>
    <p id="prompt_again" class="none">
      Click the <strong>Start button</strong> to play again!
    </p>
    <p id="quote" class="quote"></p>
  </div>
</div>

Here, the paragraph with the ID prompt_start provides instructions to the player on how to start the game.

There is also a secondary paragraph with the ID prompt_again (set to hidden with the class none). This element becomes visible at the end of each game session and prompts the user to play another game.

An empty paragraph with the ID quote displays a random quote fetched from a quote module.

Summarily, the above code block contains elements that guide user interaction.

Typing Area and Start Button

The typing area of the webpage is a form with the class form, designated for players to type into as they attempt to match a presented quote.

Beneath the form, we place the start button which a player clicks to initiate the game.

Insert the following code under the <div> with class quotes

....
<div class="input">
  <form action="" class="form">
    <input
      type="text"
      aria-label="current word"
      id="typed-value"
      class="form-input"
    />
  </form>
  <button type="button" id="start" class="form-btn">Start</button>
</div>

The typed-value ID assigned to the text input field is crucial in the game's context. It will enable tracking of the characters a player is typing or has already typed. The corresponding typed value determines the player's in-game and typing completion status.

Here's what the webpage should look like at this point.

Note: Live server automatically reloads the webpage and displays the updated content whenever the project gets modified.

Notice the missing element in the just-added code?

One dominant feature in the game's logic is the alternating display of most components when the game is being played and when it is in a non-active state.

In this case, we set the form element directly to hidden without using the class none as we did with a few elements earlier (timer, prompt_again, etc.). Here's a peek at the CSS statement in the stylesheet.

/* ./styles.css

....

/* Hidden Elements */
  .none {
      display: none;
    }

/* Form Element*/
.form {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3rem;
  margin-top: 2rem;
  display: none;
  background-color: hsl(201, 30%, 89%,);
}

/*....(truncated)

The idea of having a style identifier for the 'no-display' purpose is reusability, so, whenever you need to make an element invisible, you apply the class none to it.

Although both methods have their respective use cases, these properties can all be accessed and changed dynamically as we will learn subsequently.

Recap

So far, we have established a solid foundation for our typing game.

We outlined the game's core deliverables, set up the development environment, and integrated helper tools like Prettier, Eslint, and Live Server in our IDE.

We designed the game's layout defining the header section, quote section, and typing area in index.html.

Finally, we styled the page in style.css and attached the necessary external links to the markup. With all of these in place, we can begin implementing the game's functionalities as we move to work with Javascript in part two of the tutorial.