React Masterminds

A basic game of guessing a number based on various degrees of difficulty. The objective of the game is to guess a number that is randomly generated by the game engine. On each guess, the game will indicate (using a message and color) how close (or far) your guess is from the actual generated number. Upon guessing the correct number, one is presented with the option to play again.

The game provides 3 difficulty level settings, namely, easy, medium, and hard. Based on the difficulty setting, the game engine will generate a random number that falls within a number range. For example:

• Easy - 0 -> 10
• Medium - 0 -> 100
• Difficult - 0 -> 1000

Go here for live demo.

The application is composed of a single Game component that uses a GuessEngine class to manage the game logic.

Component Diagram

Domain Service Diagram

This project also demonstrates:

• a typcial React project layout structure
• babel setup and configuration
• webpack setup and configuration
• eslint setup and configuration
• SCSS setup and configuration

Screenshots:

...	...

---

Developed With

• Node.js - Javascript runtime
• React - A javascript library for building user interfaces
• Babel - A transpiler for javascript
• Webpack - A module bundler
• SCSS - A css metalanguage
• Bootstrap 4 - Bootstrap is an open source toolkit for developing with HTML, CSS, and JS
• Surge - Static web publishing for Front-End Developers

---

Related Projects

• react-starter

  A basic template that consists of the essential elements that are required to start building a React application

• react-clicker

  A basic React app that allows one to increase, decrease, or reset a counter

• react-clock-basic

  A basic clock that displays the current date and time

• react-timer-basic

  A basic timer that will start a countdown based on an input of time in seconds

• react-timer-advanced

  A basic countdown timer that offers an advanced UI experience

• react-movie-cards

  A basic application that displays a list of movies as a list of cards

• react-calculator-standard

  A calculator that provides the essential arithmetic operations, an expression builder, and a complete history of all expressions

• react-bitcoin-monitor

  An app that monitors changes in the Bitcoin Price Index (BPI)

• react-weather-standard

  A weather application that displays the current weather, daily forecasts, and hourly forecasts based on your current geolocation

---

Getting Started

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes.

Prerequisites

The following software is required to be installed on your system:

• Node 8.x
• Npm 3.x

Type the following commands in the terminal to verify your node and npm versions

node -v
npm -v

Install

Follow the following steps to get development environment running.

• Clone 'react-masterminds' repository from GitHub

  git clone https://github.com/drminnaar/react-masterminds.git

  OR USING SSH

  git clone git@github.com:drminnaar/react-masterminds.git

• Install node modules

  cd react-masterminds
  npm install
  npm dedupe

Build

• Build application

  This command will also run ESLint as part of build process.

  npm run build

• Build application and start watching for changes

  This command will also run ESLint as part of build process.

  npm run build:watch

Run ESlint

• Lint project using ESLint

  npm run lint

• Lint project using ESLint, and autofix

  npm run lint:fix

Run

• Run start

  This will run the 'serve' npm task

  npm start

• Run webpack dev server

  npm run serve:dev

• Alternatively run live-server (simple development http server with live reload capability)

  npm run serve

---

Versioning

I use SemVer for versioning. For the versions available, see the tags on this repository.

Authors

• Douglas Minnaar - Initial work - drminnaar