Skip to content

Two player game where players connect dots turn by turn to make boxes and the one with most boxes wins.

Notifications You must be signed in to change notification settings

PaliwalSparsh/dots-and-boxes

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

29 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Build Status Storybook

Dots-and-boxes

Game demo link: https://dots-and-boxes.netlify.com/

Storybook link: https://5c7525e30b10e7d8d0526fa5--dots-and-boxes.netlify.com

In storybook you can view all components used to make this game and play with knobs to understand their behaviour.

Requirements

Creating the game dots and boxes. Players take turns joining two horizontally or vertically adjacent dots by a line. A player that completes the fourth side of a square (a box) colors that box and must play again. When all boxes have been colored, the game ends and the player who has colored more boxes wins.

Approach

Game constitutes mainly of grid. The grid is made up of smaller blocks GridBlock(component). It composed of a box div (component) with a bar div (component) one on its left and another on its top. ( you can view these in storybook for better understanding )

These GridBlocks put side-by-side create rows and columns for Grid. When a user clicks on a bar in a GridBlock we dispatch an action UPDATE_GRID with payload { row, column, type }. Row and column define the position of GridBlock and type tells is it the top bar or left bar of the GridBlock. Based on if it is bar on top or bar on left of GridBlock we check if enabling this bar leads to completion of current box or adjacent boxes. We swap turns and wait until total score of both players becomes equal to max score possible and finish the game.

Technologies used

  1. React ( hooks, useReducer used to setup Redux like action, reducer lifecycle. )
  2. Storybook - can be used to view all basic components used to create app.
  3. create-react-app
  4. Netlify for deployment - BONUS POINTS 😄
  5. Travis CI for continuous integration - It runs tests and check if the build is stable.

Getting started

  1. npm start To run the app in the development mode . Browse to http://localhost:3000 to view it in the browser. The page will reload if you make edits. You will also see any lint errors in the console.

  2. npm test Launches the test runner in the watch mode. It will run the following - a) unit tests - For actions, reducers and utils using jest. b) snapshot tests - For structural testing components using storyshot addon of storybook.

  3. npm run build Builds the app for production to the build folder.

  4. npm run storybook To start the storybook development server.

About

Two player game where players connect dots turn by turn to make boxes and the one with most boxes wins.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published