Slide Puzzle

This is a slide puzzle game initially created for a Techtonica assignment. I am still working on basic functionality so the game can actually be played; currently, the app shuffles a random image into pieces but there is no user ability to move those pieces around.

Installation

1. Clone the repository to your local machine.
2. Create a developer account at Unsplash and follow their instructions to get your own API key.
3. Remove the "example" part of the example.env file and paste in your API key (note: this is labeled as the access key in the developer dashboard, not the secret key).
4. Navigate to the server directory and run npm install, then run npm run start.
5. Navigate to the client directory and run npm install again, then npm run dev.
6. Open the port that the terminal window displays when you run the client and open it in your browser.

Usage

The user may select a category for their puzzle and a random image will be displayed based on the category selected when the user clicks "get puzzle". The "shuffle puzzle" button will mix pieces of the image into smaller 4 by 4 images.

Components

• Puzzle
• RandomImage
• ShufflePuzzle
• Tile

Testing

This project currently does not have any testing.

To Do

• Chain server start to client start so only one command is needed to get both running (issue)
• Double check that setup instructions will install all dependencies correctly
• Add ability to move tiles with arrow keys (issue)
• Add ability to move tiles by clicking with mouse (issue)
• Add win screen if user solves the puzzle with "play again" button (issue)
• Add testing

Reference

• This project uses Unsplash's API server side to fetch both images and image descriptions.