We would like you to build a sliding puzzle (example: https://en.wikipedia.org/wiki/Sliding_puzzle).
- A game field of 3x3 with 8 blocks and one gap; if a block is clicked that borders the gap, it moves into the gap
- Random start locations; but without any duplicate blocks
- The blocks are numbered; 1 to 8
- Responsiveness; the game size adjusts to screen size
- A counter tracking the number of moves
- Parts of an image instead of numbers in the blocks
- Win-condition; if successfully completed, give some kind of feedback
- Dynamic number of blocks; some kind of input whereby the size of the game (and number of blocks) can be increased from 3x3 to any dimension
The project has to be developed using ReactJS + TypeScript.
To complete the game has been used:
- node 18.16
- vite 4.2 using default settings
- ts 4.9
- react 18
- yarn 1.22
The js/ts codebase includes:
- a small library to manage the puzzle
- standard react components
- react context for props sharing
- styled components for the css
- The code base include some basic suggestion from AI for basic components
- AI has been used to verify some author solutions
- code optimization
on the terminal, run
yarnyarn dev- on the terminal open the URL
http://localhost:5173/
Future improvements that are missing:
- unit test and integration test (they are mandatory, missing for lack of time)
- the image is only available for 3x3 game (this require a css tweak)
- sliding animation
- cleaning app ts warning
- docker images