Build a Dynamic React Component for a Simple Interactive Typing Game

Written by

javascriptfundamentals

in

Are you a developer looking to sharpen your React skills while building something fun and engaging? Do you want to move beyond basic tutorials and create a dynamic, interactive web application? If so, you’re in the right place. In this comprehensive guide, we’ll walk through the process of building a simple, yet effective, typing game using React. This project offers a fantastic opportunity to solidify your understanding of React components, state management, event handling, and conditional rendering – all essential skills for any modern web developer.

Why Build a Typing Game with React?

Typing games are more than just a nostalgic pastime; they’re excellent learning tools. For developers, building one offers several benefits:

  • Practical Application: You’ll apply fundamental React concepts in a real-world scenario.
  • Skill Enhancement: You’ll improve your ability to manage state, handle user input, and update the UI dynamically.
  • Portfolio Piece: A typing game can be a great addition to your portfolio, showcasing your ability to build interactive applications.
  • Fun Factor: It’s a fun project! Learning is more enjoyable when you’re building something you can actually use and share.

We’ll break down the process into manageable steps, explaining each concept in detail and providing clear, commented code examples. By the end of this tutorial, you’ll have a fully functional typing game and a solid understanding of how to build interactive React applications.

Prerequisites

Before we begin, make sure you have the following:

  • Node.js and npm (or yarn) installed: These are essential for managing project dependencies and running the development server.
  • A basic understanding of HTML, CSS, and JavaScript: Familiarity with these languages will make it easier to follow along.
  • A text editor or IDE: Choose your preferred editor (VS Code, Sublime Text, Atom, etc.)
  • React knowledge: While this tutorial is geared towards beginners, some familiarity with React components, JSX, and props will be helpful.

Setting Up the React Project

Let’s get started by creating a new React project. Open your terminal and run the following command:

npx create-react-app typing-game
cd typing-game

This command uses Create React App to set up a new React project with all the necessary configurations. Once the project is created, navigate into the project directory using cd typing-game.

Project Structure

Create React App generates a basic project structure. We’ll be working primarily in the src directory. Here’s a simplified view of the structure we’ll be using:

typing-game/
├── src/
│   ├── components/
│   │   ├── TypingArea.js
│   │   ├── Stats.js
│   │   └── Timer.js
│   ├── App.js
│   ├── App.css
│   └── index.js
├── public/
└── package.json

Inside the src/components directory, we’ll create three components:

  • TypingArea.js: This component will handle the typing input and display the text.
  • Stats.js: This component will display the game statistics (WPM, accuracy, etc.).
  • Timer.js: This component will display and manage the game timer.

Building the TypingArea Component

Let’s start by creating the TypingArea.js component. This component will be responsible for displaying the text to be typed, handling user input, and providing feedback (e.g., highlighting correct and incorrect characters).

Create a new file named TypingArea.js inside the src/components directory and add the following code:

import React, { useState, useEffect } from 'react';
import './TypingArea.css'; // Import the CSS file

function TypingArea({ text, onComplete }) {
  const [userInput, setUserInput] = useState('');
  const [currentIndex, setCurrentIndex] = useState(0);
  const [startTime, setStartTime] = useState(null);
  const [endTime, setEndTime] = useState(null);
  const [isGameComplete, setIsGameComplete] = useState(false);

  useEffect(() => {
    if (isGameComplete) {
      onComplete(calculateWPM(), calculateAccuracy());
    }
  }, [isGameComplete, onComplete]);

  const handleInputChange = (event) => {
    const inputText = event.target.value;
    setUserInput(inputText);

    if (!startTime) {
      setStartTime(new Date());
    }

    if (inputText === text.substring(0, inputText.length)) {
      // Correct typing
      setCurrentIndex(inputText.length);
    } else {
      // Incorrect typing
      // No need to adjust currentIndex, it will be handled by the styling.
    }

    if (inputText === text) {
      setEndTime(new Date());
      setIsGameComplete(true);
    }
  };

  const calculateWPM = () => {
    if (!startTime || !endTime) return 0;
    const durationInMinutes = (endTime.getTime() - startTime.getTime()) / 60000;
    const wordsTyped = text.split(' ').length;
    return Math.round(wordsTyped / durationInMinutes);
  };

  const calculateAccuracy = () => {
    if (!startTime || !endTime) return 0;
    let correctChars = 0;
    for (let i = 0; i < userInput.length; i++) {
      if (userInput[i] === text[i]) {
        correctChars++;
      }
    }
    return Math.round((correctChars / userInput.length) * 100) || 0;
  };

  const renderText = () => {
    if (!text) return null;
    return (
      <div className="typing-text">
        {text.split('').map((char, index) => {
          let className = '';
          if (index < currentIndex) {
            className = userInput[index] === char ? 'correct' : 'incorrect';
          }
          return (
            <span key={index} className={className}>
              {char}
            </span>
          );
        })}
      </div>
    );
  };

  return (
    <div className="typing-area">
      {renderText()}
      <input
        type="text"
        value={userInput}
        onChange={handleInputChange}
        disabled={isGameComplete}
        autoFocus
      />
    </div>
  );
}

export default TypingArea;

Now, create TypingArea.css inside the src directory and add the following CSS styles:

.typing-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 20px;
}

.typing-text {
  font-size: 1.5rem;
  margin-bottom: 10px;
  word-break: break-word;
  width: 80%;
  text-align: left;
}

.typing-text span {
  padding: 0 2px;
}

.correct {
  color: green;
}

.incorrect {
  color: red;
  text-decoration: underline;
}

.typing-area input {
  padding: 10px;
  font-size: 1rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  width: 80%;
}

.typing-area input:focus {
  outline: none;
  border-color: #007bff;
  box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}

Let’s break down this component:

  • State Variables:
    • userInput: Stores the text the user has typed.
    • currentIndex: Keeps track of the current character the user is typing.
    • startTime: Records the start time of the game.
    • endTime: Records the end time of the game.
    • isGameComplete: A boolean to check if the game is over.
  • useEffect Hook:
    • This hook is used to trigger the calculations and call the onComplete prop function when the game is complete.
  • handleInputChange Function:
    • This function is called whenever the user types in the input field.
    • It updates the userInput state.
    • It starts the timer when the user types the first character.
    • It checks if the typed characters match the text and updates the currentIndex.
    • It sets isGameComplete to true when the user has typed the entire text.
  • calculateWPM Function:
    • Calculates the Words Per Minute (WPM) based on the start and end times, and the number of words in the text.
  • calculateAccuracy Function:
    • Calculates the typing accuracy based on the user input and the original text.
  • renderText Function:
    • Renders the text to be typed, highlighting correct and incorrect characters based on the user’s input.
  • JSX Structure:
    • Displays the text to be typed.
    • Renders an input field where the user can type. The input field is disabled when the game is complete.

Creating the Stats Component

The Stats.js component will display the game statistics such as Words Per Minute (WPM) and accuracy. Create a file named Stats.js inside the src/components directory and add the following code:

import React from 'react';
import './Stats.css';

function Stats({ wpm, accuracy }) {
  return (
    <div className="stats">
      <p>WPM: {wpm}</p>
      <p>Accuracy: {accuracy}%</p>
    </div>
  );
}

export default Stats;

Now, create Stats.css inside the src directory and add the following CSS styles:

.stats {
  margin-bottom: 20px;
  text-align: center;
}

.stats p {
  font-size: 1.2rem;
  margin: 5px 0;
}

This component is relatively simple. It receives wpm and accuracy as props and displays them in a formatted way.

Building the Timer Component

The Timer.js component will display and manage the game timer. Create a file named Timer.js inside the src/components directory and add the following code:

import React, { useState, useEffect } from 'react';
import './Timer.css';

function Timer({ startTime, endTime }) {
  const [timeElapsed, setTimeElapsed] = useState(0);

  useEffect(() => {
    let intervalId;
    if (startTime && !endTime) {
      intervalId = setInterval(() => {
        const now = new Date();
        setTimeElapsed(Math.floor((now.getTime() - startTime.getTime()) / 1000));
      }, 1000);
    }

    return () => {
      clearInterval(intervalId);
    };
  }, [startTime, endTime]);

  const formatTime = (seconds) => {
    const minutes = Math.floor(seconds / 60);
    const remainingSeconds = seconds % 60;
    return `${minutes}:${remainingSeconds < 10 ? '0' : ''}${remainingSeconds}`;
  };

  return (
    <div className="timer">
      {endTime ? 'Finished!' : formatTime(timeElapsed)}
    </div>
  );
}

export default Timer;

Now, create Timer.css inside the src directory and add the following CSS styles:

.timer {
  font-size: 1.2rem;
  text-align: center;
  margin-bottom: 10px;
}

Here’s how this component works:

  • State Variable:
    • timeElapsed: Stores the elapsed time in seconds.
  • useEffect Hook:
    • This hook starts a timer when the startTime prop is provided and endTime is not.
    • It updates the timeElapsed state every second.
    • It clears the interval when the component unmounts or when endTime is provided.
  • formatTime Function:
    • Formats the elapsed time into minutes and seconds.
  • JSX Structure:
    • Displays the formatted time or “Finished!” when the game is complete.

Integrating the Components in App.js

Now, let’s put all these components together in App.js. Open src/App.js and replace the existing code with the following:

import React, { useState } from 'react';
import TypingArea from './components/TypingArea';
import Stats from './components/Stats';
import Timer from './components/Timer';
import './App.css';

function App() {
  const [wpm, setWpm] = useState(0);
  const [accuracy, setAccuracy] = useState(0);
  const [text, setText] = useState(
    "The quick brown rabbit jumps over the lazy frogs with a smile."
  );

  const [gameStartTime, setGameStartTime] = useState(null);
  const [gameEndTime, setGameEndTime] = useState(null);

  const handleGameComplete = (wpm, accuracy) => {
    setWpm(wpm);
    setAccuracy(accuracy);
    setGameEndTime(new Date());
  };

  const handleGameStart = () => {
    setGameStartTime(new Date());
    setGameEndTime(null);
    setWpm(0);
    setAccuracy(0);
  };

  return (
    <div className="app">
      <h1>Typing Game</h1>
      <Timer startTime={gameStartTime} endTime={gameEndTime} />
      <TypingArea text={text} onComplete={handleGameComplete} />
      <Stats wpm={wpm} accuracy={accuracy} />
      <button onClick={handleGameStart} disabled={!gameEndTime}>
        {gameEndTime ? 'Play Again' : 'Start Game'}
      </button>
    </div>
  );
}

export default App;

And then add the following CSS to App.css:


.app {
  text-align: center;
  padding: 20px;
  font-family: sans-serif;
}

.app h1 {
  margin-bottom: 20px;
}

button {
  padding: 10px 20px;
  font-size: 1rem;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

button:hover {
  background-color: #0056b3;
}

button:disabled {
  background-color: #cccccc;
  cursor: not-allowed;
}

In this component:

  • We import the TypingArea, Stats, and Timer components.
  • We define state variables for WPM, accuracy, the text to be typed, and game start and end times.
  • handleGameComplete is a function that receives WPM and accuracy from the TypingArea component, updates the state, and sets the end time.
  • handleGameStart is a function that resets the game state.
  • We render the components, passing the necessary props.
  • A ‘Start Game’ or ‘Play Again’ button is displayed and enabled/disabled appropriately.

Running the Application

Now that we’ve built all the components, let’s run the application. In your terminal, make sure you’re in the project directory (typing-game) and run the following command:

npm start

This command will start the development server, and your typing game should open in your web browser at http://localhost:3000 (or a different port if 3000 is unavailable).

Common Mistakes and How to Fix Them

Here are some common mistakes and how to fix them:

  • Incorrect Character Highlighting: If the highlighting of correct/incorrect characters isn’t working correctly, double-check the logic in the renderText function within the TypingArea component. Make sure you’re comparing the user’s input with the correct characters from the original text. Also, verify that the currentIndex is being updated correctly.
  • Timer Issues: If the timer isn’t starting, stopping, or updating correctly, check the useEffect hook in the Timer component. Make sure the dependencies (startTime and endTime) are correctly set and that the interval is being cleared when the game ends.
  • WPM and Accuracy Calculation Errors: If the WPM or accuracy calculations seem off, carefully review the formulas in the calculateWPM and calculateAccuracy functions within the TypingArea component. Ensure you’re using the correct values (start time, end time, number of words, correct characters, etc.) in your calculations.
  • Input Field Not Focusing: The autoFocus attribute on the input field in the TypingArea component ensures that the input field is automatically focused when the game starts. If it isn’t working, make sure the attribute is correctly placed and that the component is rendered properly.
  • CSS Styling Issues: If the styling doesn’t appear as expected, check the import paths in the component files and ensure that the CSS files are correctly linked. Also, use your browser’s developer tools (right-click, ‘Inspect’) to check for any CSS errors or conflicts.

Enhancements and Next Steps

Here are some ideas to enhance your typing game:

  • Different Difficulty Levels: Allow users to select different difficulty levels (e.g., easy, medium, hard) by changing the text length or complexity.
  • Customizable Text: Enable users to type their own text or choose from a list of pre-defined texts.
  • Sound Effects: Add sound effects for correct and incorrect key presses, and for the game over event.
  • Scoreboard: Implement a scoreboard to track high scores.
  • User Authentication: Allow users to create accounts and save their scores.
  • Responsive Design: Ensure the game looks good on different screen sizes.

Summary / Key Takeaways

Congratulations! You’ve successfully built a dynamic typing game with React. You’ve learned how to:

  • Set up a React project using Create React App.
  • Create and structure React components.
  • Manage component state using the useState hook.
  • Handle user input and events.
  • Use the useEffect hook for side effects (timer).
  • Implement conditional rendering.
  • Calculate and display game statistics.

This project is an excellent foundation for building more complex interactive web applications. You can adapt the concepts learned here to create other types of games or interactive tools. Remember to practice regularly, experiment with different features, and explore the vast possibilities that React offers.

FAQ

Q: How can I change the text that is being typed?

A: You can change the text by modifying the text state variable in the App.js component. You could also fetch text from an API to make it dynamic.

Q: How do I add sound effects?

A: You can add sound effects by using the HTML5 <audio> element or a JavaScript audio library. Trigger the sounds based on events (e.g., correct/incorrect key presses, game over).

Q: How can I improve the accuracy calculation?

A: You could refine the accuracy calculation to handle backspaces or other editing actions more gracefully. For example, you might choose to only count the characters that are matched correctly, and ignore backspaces. You could also include a penalty for incorrect characters typed.

Q: How do I deploy this application?

A: You can deploy your React application to platforms like Netlify, Vercel, or GitHub Pages. These platforms provide free hosting and make it easy to deploy your projects.

Building this typing game is a significant step in your React journey. It combines fundamental concepts in a way that’s both educational and engaging. By understanding how the components interact, how state is managed, and how user input is handled, you’ve gained valuable skills that will serve you well in future React projects. Keep experimenting, keep learning, and most importantly, keep building. The world of React development is vast and exciting, and with each project, you’ll become more proficient and confident in your abilities.

More posts