Retro Games React App

TLDR: Play the games

Continuing my journey into Full-Stack Development I'm happy to share my very first React Application that pulls together 7 Retro Games coded in JavaScript and makes them available for play on a single page.

What does the application do?

The React App provides a great overview of the games available through small icons depicting the games on the left hand side. Upon clicking on an icon the game is displayed in the center of the page and ready to be played.

Games available

• Memory
• Whack The Mole
• Connect Four
• Space Invaders
• Snake
• Frogger
• Tetris

Technical Details

The application was created with Create React App, a JavaScript library for building user interfaces. I separated the different moving parts of the application and put them into the following React components.

• header: displayed vertically like a navbar containing the game icons
• gameIcon: returns a figure containing a caption and an icon based on data received through props and handles click events
• gameBox: centerpiece of the page where the games are being played by use of iframe
• gameData: JS object containing all relevant games data

In App.js all threads come together, state for the currently selected game is handled, relevant game data is imported and stored in a file and the various components of the web application are being returned.

import React, { useState } from 'react';
import './App.css';
import {games} from './components/gameData';
import Header from './components/header';
import GameBox from './components/gameBox';

function App() {

  const [selectedGame, setSelectedGame] = useState("Select Game To Play");
  const onSelectGameHandler = newGame => {
    setSelectedGame(newGame);
    console.log(selectedGame);
    console.log(games[selectedGame]);
  };

  let figures = [];
  for (const game in games) {
    figures.push({id: game, src: games[game].src, name: games[game].name, alt: games[game].alt, href: games[game].href});
  }

  return (
    <>
      <h1>RETRO GAMES</h1>
      <div className="App">
        <header className="App-header">    
          <Header handler={onSelectGameHandler} data={figures} />
        </header>
        <section className="Game-box">
          {games[selectedGame] ? <GameBox game={games[selectedGame].alt} src={games[selectedGame].href} /> : <h2>Select Game To Play</h2>}
        </section>
      </div>
    </>
  );
}

export default App;

Finally, I deployed the Retro Games React App on GitHub Pages, where all the games can be played.

Download Link

Explore the full codebase on GitHub.

Conclusion

Finishing a project for me always means that I have a lot of ideas for how and what to improve in future projects. In this case, I particularly look forward to version 2 in which I would like to integrate the games as React Components and make use of React Router to display them, refine the styling and separate it into one CSS file per component and have the scores of your current playing session displayed per game.

Acknowledgements

The JavaScript games were inspired by a Ania Kubów.