Pipes Puzzle

Pipes Puzzle is a great game to kill time while training your brain!
View Demo · Report Bug · Request Feature

Pipes puzzle also known as FreeNet is a logic puzzle with simple rules and challenging solutions that allows you to keep problem-solving skills in training. 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. Click a tile with the mouse to rotate it. Once you have created a valid puzzle you can go to the next round. There are 6 levels available, with increasing size and thus increasing complexity.

• React.js

• TypeScript

• React Redux

• Redux Toolkit

  (back to top)

This is an example of how you may give instructions on setting up your project locally. To get a local copy up and running follow these simple example steps.

We use npm to manage the dependencies, so we recommend using it to you too.

• npm

  npm install npm@latest -g

1. Clone the repo

   git clone https://github.com/babakjalilian/pipes-puzzle/

2. Navigate into the local repository and install NPM packages (might take a few minutes).

   npm install

3. Run npm run start for a dev server. Navigate to http:https://localhost:3000/pipes-puzzle/. The app will automatically reload if you change any of the source files. You will also see any lint errors in the console.

There is only a few tests due to lack of time. Core functionalities have tests written for them. (Others, WIP)

# lint
npm run lint

# test
npm run test

This repository is using GitHub Actions for the build and deployment. (From main to the github-pages branch.)

(back to top)

level 1 : JustWarmingUp;

level 2 : DefinitelyWarm;

level 3 : ❌

level 4 : ❌

level 5 : ❌

level 6 : ❌

Due to the heavy load and high number of cells in levels 5 and 6, the UX is not as smooth as other levels. Optimization has minimized lagging, but not completely removed it.

• In levels 5 and 6, with high number of cells, some performance and rendering issues emerged. They were optimized using React Virtualized Package.

• To reduce server calls and, hence, optimize server load, rotations are handled on the client side as queues. Every 50 rotation (50 is adjustable to any number in the code), the rotations are synced with the server under a single request in the background and without involving the user or disturbing the flow of the game.

  The other advantage is that in higher levels where the server takes a bit longer to respond, the user faces no lagging in rotations and doesn’t have to wait after each rotation they make to a cell.

• The queued rotations are analyzed before syncing with the server and if one cell is rotated 4 times, which means it is back to its start position, its rotations are deleted. This further optimizes the requests sent to the server.

(back to top)

Distributed under the MIT License. See LICENSE.txt for more information.

(back to top)

Email: [email protected]

LinkedIn: https://www.linkedin.com/in/babak-jalilian/

(back to top)