shrynx / dots-game

Dot shooting game

Dots Game

A dots shooting game loosely based on specifications

• App URL
• Screenshots
• Notes
• Setup
• Built With
• Commands
• Tooling
• Stats
• Influence
• Further Improvements

App URL

Demo

Screenshots

Mobile

Desktop

Notes

• This app is made using dom with react and not canvas to demonstrate skills specifically in react.
• Although canvas can play well with react, but to keep things simple dom is used.
• Even though dom nodes are used, the performance characteristic of the app is still good enough.
• Although the perceived visual performance can be better with canvas implementation.

Setup

Clone the repository to your projects folder and change the directory to downloaded folder.

[e-mail]:shrynx/dots-game.git && cd dots-game

and install all the dependencies.

yarn install

Built With

• React

  for managing views.

• Styled Components

  for managing component based css via js.

Commands

• start

  yarn run start
  

  start the development server.

• build

  yarn run build
  

  build the project.

  NOTE: Final build is produced in the build folder.

• test

  yarn run test
  

  run unit tests the project in watch mode.

• test:coverage

  yarn run test:coverage
  

  run unit tests and get test coverage report of the project.

• test:e2e

  yarn run test:e2e
  

  run end to end test using cypress.

• test:viz

  yarn run test:viz
  

  open cypress ui for manually running e2e test.

• flow

  yarn run flow
  

  run flow to type check javascript.

• flow:coverage

  yarn run flow:coverage
  

  outputs flow coverage of src files.

• lint

  yarn run lint
  

  eslint to check all linting errors.

• format

  yarn run format
  

  run prettier and eslint to format all javascript files.

Tooling

• create-react-app

  for bootstrapping react based projects.

• jest

  for unit testing javascript.

• react-testing-library

  for testing react components.

• cypress

  for end to end testing application.

• eslint

  for enforcing rules for writing javascript.

• prettier

  for formatting code with specified rules with help of eslint.

• flow

  for type checking javascript.

• husky

  for adding git hooks.

• lint-staged

  for processing git staged files

Stats

• Build Size

  55kb (gzipped)

• Memory Footprint

  average: 15mb - 20mb

  see notes

Details

• Flow Coverage

  100% type coverage.

Details

filename	annotation	percent	total	covered	uncovered
src/App.js	flow	100 %	198	198	0
src/components/Dot.js	flow	100 %	19	19	0
src/components/GameArea.js	flow	100 %	6	6	0
src/components/GameControl.js	flow	100 %	27	27	0
src/components/GameInfo.js	flow	100 %	5	5	0
src/components/GameWrapper.js	flow	100 %	5	5	0
src/components/InGameText.js	flow	100 %	18	18	0
src/components/InfoGroup.js	flow	100 %	5	5	0
src/components/InfoLabel.js	flow	100 %	5	5	0
src/components/RangeInput.js	flow	100 %	17	17	0
src/components/Score.js	flow	100 %	6	6	0
src/components/Speed.js	flow	100 %	6	6	0
src/index.js	flow	100 %	12	12	0
src/styles/colors.js	flow	100 %	16	16	0
src/styles/global.js	flow	100 %	2	2	0
src/utils/calc.js	flow	100 %	47	47	0
src/utils/random.js	flow	100 %	80	80	0

Percent	Total	Covered	Uncovered
100 %	474	474	0

---

• Test Coverage

  • Full end to end test coverage

    end to end test coverage using cypress.

    Open End to End Test Results in Cypress

  • 100 % unit test coverage.

Details

File	% Stmts	% Branch	% Funcs	% Lines	Uncovered Line #s
All files	100	100	100	100
src	100	100	100	100
App.js	100	100	100	100
src/components	100	100	100	100
Dot.js	100	100	100	100
GameArea.js	100	100	100	100
GameControl.js	100	100	100	100
GameInfo.js	100	100	100	100
GameWrapper.js	100	100	100	100
InGameText.js	100	100	100	100
InfoGroup.js	100	100	100	100
InfoLabel.js	100	100	100	100
RangeInput.js	100	100	100	100
Score.js	100	100	100	100
Speed.js	100	100	100	100
src/styles	100	100	100	100
colors.js	100	100	100	100
global.js	0	0	0	0
src/utils	100	100	100	100
calc.js	100	100	100	100
random.js	100	100	100	100

---

Influence

• color scheme copied inspired from Two Dots

Further Improvements

• Tracking High Scores

• Game Modes

  • Practice Mode ( current implementation )
  • Challenge Mode ( Automatically increase speed based on score and time elapsed )