The goal of the puzzle is to rotate the tiles on the map to make all pipes connected in a single group, with no loops and no dangling pipes. When all pipes has blue color means that the goal has been achieved.
- JustWarmingUp
- DefinitelyWarm
- --
- --
- --
- --
To set up the project create react app was used because I don't need to learn and configure many build tools.
This app was built using React js 17 with Typescript 4.
- This game only have an assitant that help you when a correct move is make.
- When level game selected is greater than 2 the UI is not working (because of the dimensions of the map, this should be fixed...).
- The app is not tracking each state in each movement.
- The game assistant can not check if the puzzle can be solved.
- This app is not using any state managment library such as Redux and MobX, because the app does not have options like, save game, restore last status game, score ...
- Canvas 2D was used to draw game board instead of buttons, because there is not need to install any library. (I have not worked a lot with this tool, see the final key decision).
- Asistance Game was developed instead of "auto solver", because I realized the high complexity required to solve this and the high computation required to check each tile.
- Each rotation is tracked as a group of commands to send to the server to avoid hitting the server.
- Plain CSS was used and pretty basic UI was built, because I was more aware to build a functional game (I can improve this).
- Finally Konva with react-konva library was used to draw game board, because this tool allows me to draw easily graphics in canvas unlike vanilla canvas 2D.
- Node js must be installed in your local machine
- Go to the project folder in the terminal
- Install NPM packages:
npm install - Start the server:
npm startby default 3000 port will open at http://localhost:3000/.
- To run tests:
npm test - To build project:
npm build
This app is vailable here