Turn any image into a Jigsaw Puzzle and solve it together with friends without leaving Telegram
Made with Rust 🚀, Godot and Redis
Try it out now: @jigsawpuzzlebot
demo.mp4
- Made with Rust
- Subscribed for a Redis PubSub request to generate a puzzle from an image
- Stores processed images in the file system and puzzle state in Redis
- Publishes a Redis PubSub event when a puzzle is generated. Or when it fails to generate a puzzle
- Made with Teloxide Rust framework
- An entry point of the Mini App
- Takes images from users and publishes a Redis PubSub request to jigsaw-generator to generate a puzzle
- Notifies users when a puzzle finished or failed generating
- Allows users to share puzzles with friends using Inline Query
- Made with Godot Engine
- Frontend of the Mini App
- Uses version 3.5 of Godot because version 4.x has worse HTML support
- Made with Axum Rust framework
- HTTP and WebSocket server
- Serves images generated by jigsaw-generator
- Serves jigsaw-game exported as HTML
- Real-time multiplayer powered by WebSockets
- Common Rust module shared between all other Rust modules
Most of the code has comments so if you're feeling courageous – clone the repo and jump straight into it
Here is also a list of specific features you might want to use in your project
- /jigsaw-game/components/web_socket_client/web_socket_manager.gd
- /jigsaw-backend/src/websocket/unauthorized_handler.rs
- Read Telegram Docs on Validating data
The shell affects how the loading screen looks. This custom shell will match Telegram theme
Docker Compose will allow us to install dependencies and launch multiple processes with one simple command
Install Docker Engine: https://docs.docker.com/engine/install/#desktop
You need a secure HTTP connection for a Telegram Web App. To test the app locally you can use ngrok
Download: https://ngrok.com/download
Then use this command to open a tunnel
ngrok http 3030Keep the URL that looks like this: https://<something>-<something>.ngrok-free.app
Create a bot using @BotFather. Don't forget to copy and save the bot token as you will need it later
/newbot
Enable Inline Mode
/setinline
Create a Web App. Set URL to the one you got from ngrok. The app can have any name
/newapp
git clone https://github.com/plasmoapp/jigsaw-bot.git
cd jigsaw-bot
touch .env# URL of the Web App
CONFIG.WEB_APP_URL=https://<something>-<something>.ngrok-free.app
# Name of the bot. Like in @<bot_name> or t.me/<bot_name>
CONFIG.BOT_NAME=jigsawpuzzlebot
# Name of the Telegram Web App. Like in t.me/<bot_name>/<app_name>
CONFIG.WEB_APP_NAME=game
# Bot Token
CONFIG.BOT_TOKEN=<bot_token>
# Enable logs
RUST_LOG=DEBUGdocker-compose up --build -d# View status of the containers
docker-compose ps -a
# View logs
docker-compose logs -f
# Build a specific container
docker-compose up --build -d backend
docker-compose up --build -d bot
docker-compose up --build -d generator
# Stop everything
docker-compose stop
# If you want to build it in the release mode use this instead
docker-compose -f docker-compose-release.yaml up --build -d jigsaw-game project is built inside of the jigsaw-backend Dockerfile
After you've made changed to the jigsaw-game project – you need to restart the backend container
App runs on the port 3030. You can change it in docker-compose.yaml
I've made a list of features that I wanted to implement but didn't have time because of the contest deadline
Probably will work on them eventually but I also welcome contributions 😊
