bacc-ui-wasm

Rust/WebAssembly visualization primitives for baccarat data produced by bacc-rs and bacc-ts.

The crate exposes three categories of building blocks:

• Card renderer -- generates a standalone SVG for any playing card or card back, given a Cactus Kev u32 card integer.
• Road renderers -- generate standalone SVGs for the bead plate, big road, and the three derived roads (big eye boy, small road, cockroach pig). Road state is held in a module-level singleton updated via update_scoreboard.
• Prediction renderer -- generates a standalone SVG showing derived road prediction icons for the next player and banker outcomes.

The www/ directory contains a reference frontend that wires these primitives to a game source, using bacc-ts as the client-side engine.

Prerequisites

• rustup (do not use Homebrew rustc)
• wasm32 target: rustup target add wasm32-unknown-unknown
• wasm-pack: cargo install wasm-pack
• Node.js and npm

Setup

# 1. Build the WASM package
PATH="$HOME/.cargo/bin:$PATH" ~/.cargo/bin/wasm-pack build --target bundler

# 2. Install JS dependencies
cd www && npm install

Run

cd www && npm start

Opens the dev server at http://localhost:8080. By default the frontend runs fully client-side using bacc-ts.

Test

cargo test

After git clean -xdf

Both pkg/ and node_modules/ are removed by a clean. Re-run the full setup steps above to restore them.

WASM API

Card rendering

render_card(card: number, corners: boolean): string

Returns a standalone SVG string for the given card.

• card -- Cactus Kev u32: ((suit << 4) | rank) << 8
  • suit: 0x1=spades, 0x2=hearts, 0x4=diamonds, 0x8=clubs
  • rank: 0=2 .. 8=10, 9=J, 10=Q, 11=K, 12=A
  • card=0 (or invalid suit): renders the card back
• corners -- when true, renders corner rank labels and corner suit pips in standard positions. When false, produces the card face used during the baccarat peeling ritual: a dealt card sits face-down and the player peels from the bottom-right corner, which is the bottom-right of the face-up side. In this mode the corner suit pip and rank label are removed from that corner so that neither the suit nor the rank is revealed as the corner or side is gradually exposed.

Scoreboard state

update_scoreboard(hex: string): void

Updates the module-level scoreboard singleton from a hex-encoded bead plate string (bacc-core-rs format). Applies new bead words incrementally when hex extends the current state; reconstructs from scratch on gap or reset.

Road rendering

render_bead_plate(cols: number): string
render_big_road(cols: number): string
render_derived_road(cols: number, idx: number): string

Each returns a standalone SVG string sized to cols * 24 x 6 * 24 pixels, reading from the singleton updated by update_scoreboard.

• idx -- derived road selector: 0=big eye boy, 1=small road, 2=cockroach pig

Prediction rendering

render_prediction(vertical: boolean): string

Returns a standalone SVG showing derived road prediction icons for the next outcome, reading from the singleton updated by update_scoreboard.

Horizontal layout (vertical=false): 4 cols x 2 rows (4*24 x 2*24 px).

• Row 0 (banker): [B label | BEB-B | SR-B | CP-B]
• Row 1 (player): [P label | BEB-P | SR-P | CP-P]

Vertical layout (vertical=true): 2 cols x 4 rows (2*24 x 4*24 px).

• Col 0 (banker): [B label, BEB-B, SR-B, CP-B]
• Col 1 (player): [P label, BEB-P, SR-P, CP-P]

Each icon uses the derived road marker for its road (big eye boy = hollow circle, small road = filled circle, cockroach pig = slash). Red = trending, blue = chaotic, empty = insufficient data (fewer than 2 big road columns).

Using a bacc-server as the data source

The GameSource class (defined in www/api.ts, wrapping bacc-ts internals) abstracts over local and remote data. To switch from the bacc-ts local engine to a running bacc-server instance, change the GameSource constructor call in www/main.ts:

-const source = new GameSource()
+const source = new GameSource("http://localhost:3000")

bacc-server setup

git clone https://github.com/soltez/bacc-server
cd bacc-server
cargo build --release
./target/release/bacc-server
# Listening on http://0.0.0.0:3000

Endpoints

POST /round/next -- advances the shoe and returns the round:

{
  "encoded_hex": "<hex>"
}

GET /scoreboard -- returns the current bead plate state:

{
  "encoded_hex": "<hex>"
}

Both values use the bacc-core-rs hex encoding. encoded_hex in the round response is a 16-character hex string encoding the full card sequence and metadata as a big-endian u64. encoded_hex in the scoreboard response is a variable-length hex string of packed bead words (4 hex chars per round, oldest first), compatible with update_scoreboard.

bacc-server must be built with CORS enabled (tower-http with CorsLayer::permissive()) to allow requests from the webpack dev server at http://localhost:8080.