Janken
janken
janken is a fun and interactive rock-paper-scissors game where you play against the computer. It has smooth animations, a clean interface, and tracks your match history in real time. No login is needed — just open the app and start playing!
This project was built to explore full-stack development with Svelte, Firebase, and Tauri, organized using a monorepo structure.
What's New
- The project now includes a native desktop app built with Tauri, with builds located in bundle folder.
- The codebase has been migrated to a monorepo structure using pnpm, organizing both web and desktop apps under the
/appsdirectory.
Features
- Instant Play: Play right away without creating an account.
- Optional Save: Save session with one click using anonymous Firebase Auth.
- Easy Data Deletion: Users can delete your progress anytime, or by clearing your browser.
- Game History: View all past rounds with detailed win/loss results.
- Fun Toast Messages: Random victory messages or banters after every round.
- Responsive UI: Mobile-first design that works on all screen sizes.
- Native Desktop Version: Built with Tauri for Windows, macOS, and Linux.
- Monorepo Setup: Organized using npm workspaces for better project structure.
- Firebase Analytics: Tracks basic user interactions (like gameplay and saving).
- Tested with Playwright: Automated end-to-end testing for reliability.
Technologies Used
- canvas-confetti: Renders fun celebration animations after a win.
- Firebase Analytics: Event tracking.
- Firebase Auth (Anonymous): Supports per-session account creation.
- Firebase Firestore: Stores game data.
- Playwright: For end-to-end browser testing.
- pnpm workspaces: Manages web and desktop apps in a monorepo setup.
- Svelte: Front-end framework for building reactive web applications.
- SvelteKit: A powerful framework for building Svelte applications.
- Tailwind CSS 3: A utility-first CSS framework.
- Tauri: Cross-platform desktop app builder (Rust + WebView).
- TypeScript: For type-safe JavaScript.
- unplugin-icons: Easy integration of icons.
- Vite: A fast and modern build tool for development.
- Vitest: A fast and lightweight test runner.
Analytics Events
This app uses Firebase Analytics to track user engagement and behavior. Here are the custom events currently being logged:
| Event Name | Description |
|---|---|
app_loaded |
Fired when the app is initialized and ready. |
game_round_played |
Fired after each completed round (win/lose/draw). |
save_progress_clicked |
Fired when the user clicks the "Save my progress" button. |
account_deleted |
Fired when the user deletes their saved progress. |
sidebar_opened |
Fired when the sidebar (game logs, score, and account actions) is opened. |
save_modal_opened |
Fired when the save progress modal is opened. |
delete_modal_opened |
Fired when the delete confirmation modal is shown. |
info_modal_opened |
Fired when the app info modal is opened. |
These events help understand how users interact with the app while respecting their privacy (no PII is collected).
Project Status
This project is partially complete. Core features are implemented and functional, but there are still improvements and planned additions in progress. Future updates may include more game logic, animations, polish, or feature experiments as part of ongoing learning.
License
This project is licensed under the MIT License. You are free to use, modify, and distribute the code for personal or commercial use — attribution is appreciated.
