This project was bootstrapped with Create React App.
- Level 1: JustWarmingUp
- Level 2: DefinitelyWarm
- Level 3: GettingTooHot
There was no error handling added.
The application does not handle any invalid inputs or unexpected behavior by the user.
The autosolver will be executed when the Hint button is clicked.
Please note however that this will not solve the entire puzzle.
Instead, it will only solve most of the pipes (straight-lines, elbows, and tees) along the edges of the board.
It will also solve single-ended or straight-line pipes that are adjacent to cross pipes.
At first, I was not considering to use an external state management library as I belive that I would be able to mannage the state inside the components themselves.
But after reading this line from the instructions,
If possible, your design should be such that makes adding other similar games less difficult.
I have decided to use Redux Toolkit, which holds the state that could possibly be shared by other components (or new games) as the applicatin grows.
This makes the application more dynamic and highly scalable.
To add a new game, simply add a new object inside the games array in the games.ts file, and then develop the components or reuse existing components necessary for the new game.
I have no experience creating something with Canvas 2D or WebGL yet (but I am very much willing to learn it!), so I just went with creating simple strokes in SVG for visual representation of the pipes.
The SVG files are located in the public assets folder.
Go to the live website deployed in Netlify.
-
Clone the repository:
git clone https://github.com/sjkayle/frontend-pipes.git -
Go to the directory:
cd frontend-pipes -
Install the node modules:
npm install -
Run the application:
npm start -
Open http://localhost:3000 to view it in the browser.