Packages Overview

All local packages in the Stake Engine Web SDK monorepo

The Stake Engine Web SDK is organized as a TurboRepo monorepo. All game apps live in /apps, and all reusable code lives in /packages. Apps and packages can consume any sibling package directly without publishing to npm — the dependency is declared with workspace:* in package.json.

// apps/lines/package.json
{
  "name": "lines",
  "dependencies": {
    "pixi-svelte": "workspace:*",
    "constants-shared": "workspace:*",
    "state-shared": "workspace:*",
    "utils-shared": "workspace:*",
    "components-shared": "workspace:*"
  },
  "devDependencies": {
    "config-ts": "workspace:*"
  }
}

Naming convention

Every package name follows the pattern <PACKAGE_TYPE>-<SPECIAL_DEPENDENCY or USAGE>.

For example, components-pixi is a components package whose special dependency is pixi-svelte, and utils-sound is a utils package whose special dependency is howler.

*-shared packages are an exception: instead of a special dependency they are designed to have a minimum set of dependencies and a broad set of use cases so they can be imported almost everywhere.

Monorepo structure

root
├── apps/
│   ├── cluster/
│   ├── lines/
│   ├── price/
│   ├── scatter/
│   └── ways/
└── packages/
    ├── config-*
    ├── constants-*
    ├── state-*
    ├── utils-*
    ├── components-*
    ├── pixi-*
    ├── rgs-fetcher/
    └── rgs-requests/

Package groups

config-*

Reusable toolchain configurations shared across apps and packages.

• config-lingui — lingui i18n config
• config-storybook — Storybook config
• config-svelte — Svelte compiler config
• config-ts — TypeScript tsconfig base
• config-vite — Vite config

pixi-*

Svelte 5 + PixiJS 8 integration layer.

• pixi-svelte — declarative Svelte components wrapping PixiJS primitives; also published to npm
• pixi-svelte-storybook — Storybook for pixi-svelte components

constants-*

Global compile-time constants with no runtime dependencies.

• constants-shared — bet multipliers, z-index values, time helpers, color constants, particle configs

state-*

Global reactive Svelte $state objects shared across packages.

• state-shared — stateBet, stateSound, stateUrl, stateModal, stateMeta, stateConfig, stateUi, stateI18n

utils-*

Utility functions and types organized by dependency or use case.

• utils-book — book event processing (playBookEvents, playBookEvent)
• utils-event-emitter — type-safe event bus (createEventEmitter)
• utils-xstate — XState finite state machine for bet flows
• utils-layout — responsive canvas layout system
• utils-slots — reel and board spin mechanics
• utils-sound — audio management via Howler.js
• utils-fetcher — wrapper around the Fetch API
• utils-shared — miscellaneous helpers (no lodash/lingui dependency)
• utils-resize-observer — ResizeObserver utilities
• utils-bet — bet-related types and helpers

components-*

Reusable Svelte components organized by rendering layer.

• components-layout — layout components (depend on utils-layout)
• components-pixi — PixiJS game components (depend on pixi-svelte)
• components-shared — HTML-based shared components
• components-storybook — Storybook helper components
• components-ui-pixi — PixiJS UI components (bet button, balance, etc.)
• components-ui-html — HTML UI components (modals, version overlay, etc.)

rgs-*

Remote Game Server (RGS) communication layer.

• rgs-fetcher — low-level HTTP fetch utilities for RGS endpoints
• rgs-requests — typed request functions (requestBet, requestEndRound, etc.)

Context-providing packages

Four packages create Svelte context that child components can read with a getContext*() call. setContext*() must be called at the app entry level (e.g. +page.svelte) before any child tries to consume it.

Package	Creates	Context helpers
pixi-svelte	stateApp	setContextApp / getContextApp
utils-event-emitter	eventEmitter	setContextEventEmitter / getContextEventEmitter
utils-layout	stateLayout, stateLayoutDerived	setContextLayout / getContextLayout
utils-xstate	stateXstate, stateXstateDerived	setContextXstate / getContextXstate

// apps/lines/src/game/context.ts
export const setContext = () => {
  setContextEventEmitter<EmitterEvent>({ eventEmitter });
  setContextXstate({ stateXstate, stateXstateDerived });
  setContextLayout({ stateLayout, stateLayoutDerived });
  setContextApp({ stateApp });
};