jigsaw-bot
jigsaw-bot copied to clipboard
plasmoapp
Turn any image into a Jigsaw Puzzle and solve it together with friends without leaving Telegram
Jigsaw Puzzle Bot
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
https://github.com/plasmoapp/jigsaw-bot/assets/27863947/33d762f9-6c69-4896-9314-4dc6cb318ad7
Project overview
jigsaw-generator
- 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
jigsaw-bot
- 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
jigsaw-game
- Made with Godot Engine
- Frontend of the Mini App
- Uses version 3.5 of Godot because version 4.x has worse HTML support
jigsaw-backend
- 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
jigsaw-common
- Common Rust module shared between all other Rust modules
Documentation
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
Mini App authorization flow on WebSockets
- /jigsaw-game/components/web_socket_client/web_socket_manager.gd
- /jigsaw-backend/src/websocket/unauthorized_handler.rs
- Read Telegram Docs on Validating data
Custom HTML shell for Godot
The shell affects how the loading screen looks. This custom shell will match Telegram theme
- /jigsaw-game/custom_shell.html
- Read more on Godot Custom HTML Page
Sync Godot Theme with Telegram Theme
- /jigsaw-game/global/theme_manager/theme_manager.gd
Access Telegram startParam inside of Godot
- /jigsaw-game/components/game_manager/game_manager.gd#L30
How to setup a developer enviroment
1. Download Docker
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
2. Setup Ngrok
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 3030
Keep the URL that looks like this: https://<something>-<something>.ngrok-free.app
3. Create a Telegram Bot and a Web 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
4. Clone the repo
git clone https://github.com/plasmoapp/jigsaw-bot.git
cd jigsaw-bot
5. Create .env file inside of the cloned repo
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=DEBUG
6. Start the containers
docker-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
Keep in mind
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
Planned features
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 😊
plasmoapp