Puzzle React

Mai Ubeid

Sajeda Ismail

What is our Game?

Its a puzzle expects you to sort some numbers inside a board in ascending way.

You can play by moving the possible cell, it will swap with the empty cell which is arround it. you can move it left, right, top or bottom based on its location to the empty cell.
If the empty cell doesnt locate around the targeted cell, that cell cant be moved!
In any time while playing, you can reset the game by randomly shuffle the numbers again.
Repeat this process until all the numbers are in the correct ascending sort.
Now you are the winner ;)

Yes! You can choose between three levels:

1- Beginner

You will start from 3*3 board size, and then move to more advanced levels by increasing that size as you win the previous board.

2- Meduim

You will start from 4*4 board size and then move to more advance levels by increasing that size as you win the previous board.

3- Hard

You will start from 5*5 board size and then move to more advanced levels by increasing that size as you win the previous board.

To practise Reactjs library for client-side rendering. Also, to be fammiliar with statefull class components and its lifecycle.

1- We chose the game idea. 2- Discussed that idea and planned on paper. 3- Create React app with its required modules and file structure.

4- Created the class Components (Puzzle, Board, Cell) with their required methods.

5- Rendered each component in its parent

 App{
   Puzzle{
      Board{
           Cell
                }}}

With using props to transfer the required properties and methods between components.

6- Tracking the updates which occur by the user on the mounted board, update the state according to them.

7- check the win state and show messages and pop up dialog to the user to let him move to the next levels,

8- then we call new game, render and mount it to let the user complete his playing journy!

9- Finally, we wrote this Readme to guide you how to play our game -_-

Enjoy! ^_^