@betorigami/game-ui-wheel

The Wheel game's Lit components and its GameUiModule. It is a library: importing it defines the Wheel elements and exports wheelUiModule and WheelGame, and the host that loads it registers the module.

import { registerGameUiModule } from '@betorigami/game-ui-shared';
import { wheelUiModule } from '@betorigami/game-ui-wheel';

registerGameUiModule(wheelUiModule);

Today @betorigami/games is that host and bundles this package with every other game. A standalone Wheel bundle later is the same three lines with only this module.

Standalone bundle

dist/standalone.mjs is the same package built as a deployable: the kit, the host element, Lit and this module in one file, self-registering. A page loads it in place of the games bundle to serve Wheel on its own:

<script type="module" src="https://cdn.jsdelivr.net/npm/@betorigami/game-ui-wheel@<version>/dist/standalone.min.mjs"></script>
<origami-game-provider-wrapper origamiGame="WHEEL" ...></origami-game-provider-wrapper>

A page loads either this or the games bundle, never both. The verifier's base URL is read from VITE_PROVABLY_FAIR_VERIFIER_URL at build time, as games does.

Dependencies

lit, @lit/context and big.js are peer dependencies: exactly one copy of each may exist on a page, and the host supplies it. @betorigami/game-ui-shared is an ordinary dependency, linked through the workspace and published as the exact kit version this package was released with; every kit release also releases this package and games on that same version, so a page still holds one kit. @betorigami/game-wheel and @betorigami/game-engine are ordinary dependencies, pinned to the same versions the server runs so the multipliers and probabilities the UI discloses are the ones the engine pays; a host must pin the same engine versions.

Theming

The wheel's colours are read from CSS custom properties named --wheel-color-*, whose defaults live in the hosted theme stylesheet (themes/default.css on the assets domain), not in this package. Partners override them there. --wheel-color-zero, and one property per prize slot letter, are the contract; see src/wheel.constants.ts for the full list.