Add interactive web frontend with WASM bindings #4
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This commit adds a Svelte-based web frontend that uses the Agari scoring engine via WebAssembly. The project has been restructured as a Cargo workspace to support multiple crates. Changes: - Restructure as Cargo workspace with crates/agari-core and crates/agari-wasm - Add serde Serialize/Deserialize to core types for JS interop - Create agari-wasm crate with wasm-bindgen bindings - Build Svelte 5 frontend with: - Interactive tile palette with SVG tiles - Real-time shanten calculation as you build hands - Complete game context options (winds, riichi, situational yaku) - Full scoring results with yaku, fu breakdown, and payment - Responsive design with Tailwind CSS - Add build script for WASM and web frontend The CLI remains fully functional and unchanged from a user perspective.
Introduce a complete web-based Riichi Mahjong calculator powered by WebAssembly, enabling client-side scoring calculations in the browser. - Migrate to Cargo workspace with two crates: - `agari-core`: Core library (moved from src/) - `agari-wasm`: WebAssembly bindings using wasm-bindgen - Add build script for WASM compilation (scripts/build-web.sh) - Expose scoring, shanten, ukeire, and yaku detection APIs - Serialize/deserialize game context from JavaScript - Support full hand notation parsing with aka-dora - Provide detailed scoring breakdown (han, fu, payment, yaku list) - Built with Svelte 5, Vite, TypeScript, and Tailwind CSS 4 - Interactive tile selection with visual palette - Real-time shanten calculation as hand is built - Complete scoring display with yaku breakdown and fu details - SVG-rendered mahjong tiles with smooth animations - Responsive design for desktop and mobile - Game context options (riichi, tsumo, dora, winds, etc.) - Tile.svelte: SVG tile renderer for all tile types - TilePalette.svelte: Clickable tile selection grid - HandDisplay.svelte: Visual hand representation - ContextOptions.svelte: Game situation configuration - ScoreResult.svelte: Detailed scoring output - Add serde Serialize/Deserialize derives for WASM interop - Minor refactoring to support workspace structure
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Add interactive web frontend with WASM bindings
Introduce a complete web-based Riichi Mahjong calculator powered by WebAssembly, enabling client-side scoring calculations in the browser.
Project Structure Changes
agari-core: Core library (moved fromsrc/)agari-wasm: WebAssembly bindings using wasm-bindgenscripts/build-web.sh)WASM Bindings (
crates/agari-wasm)Web Frontend (
web/)Components
Tile.svelteTilePalette.svelteHandDisplay.svelteContextOptions.svelteScoreResult.svelteDeployment
Once merged, the site will be automatically deployed to https://ryblogs.github.io/agari/