lemmoor / jigsaw-svelte

A web app where you can solve a jigsaw puzzle with a random image or your own.

Jigsaw puzzle game

A web app where you can solve a jigsaw puzzle with a random image or your own.
Star the repo if you like it! ⭐
Live Demo

Table of Contents

• Getting Started
• Contributing
• License
• Acknowledgments

Getting started

To run the application on your local machine, follow the steps given below:

1. Download and install Node.js

2. Clone the repository.

   git clone https://github.com/lemmoor/jigsaw-svelte.git

3. Enter the local directory

cd jigsaw-svelte

4. Install the required npm packages

npm install

5. Run the application

npm run dev

Contributing

You are welcome to contribute and improve this project, I made it a while ago to learn svelte. Feel free to open an issue/PR :)

License

This project is licensed under the MIT License - see the LICENSE.md file for details

Acknowledgments

• This project was inspired by this tutorial

jigsaw-svelte's Issues

Improve CSS

Improve overall look of the website, you can remove picocss link from index.html if you want.

Add sounds

Would be nice to have some kind of sound played when a puzzle piece is put in the correct place.

Add a reset button

• Add a reset button that resets all the pecies in some random place
• Also one thing I noticed that once the puzzle is solved, peices remain in that state on generation of a new puzzle. So reset should be called everytime on generation of new puzzle

Check when the puzzle is solved

Check when the puzzle is solved and show some kind of popup after that? Any other ideas are welcome

Add difficulty modes

Before start, add dificulty modes (easy, medium, hard) which change the amount of puzzle pieces. The default one shoud be easy.

Add Congratulatory message

• Add Congratulatory message after solving the jigsaw puzzle
• also show the time it took to solve the puzzle and give some score based on that

Fix mobile touch events

The touch events to move puzzle pieces (touchstart, touchmove, touchend) are there but they don't work properly.

Add switch to toggle reference image

All current modes show the dimmed image behind the pieces, there could be an option to remove it, making the puzzle harder.

Dockerize Svelte app

Let's add Dockerfile, .dockerignore, and docker-compose.yml to your project.
More information in the article -> https://medium.com/@alpercitak/dockerize-sveltekit-1323771a12b1
I'm going to follow it step by step. Please assign me to this task.

Read here to learn more about what is Docker and why it's used https://www.docker.com/why-docker/

Add github link

Add a link to this github repo somewhere on the page.
You can make a navbar and put it there or just add a github icon somewhere on the side.