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

drminnaar / react-masterminds