Skip to main content
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.
PackageCreatesContext helpers
pixi-sveltestateAppsetContextApp / getContextApp
utils-event-emittereventEmittersetContextEventEmitter / getContextEventEmitter
utils-layoutstateLayout, stateLayoutDerivedsetContextLayout / getContextLayout
utils-xstatestateXstate, stateXstateDerivedsetContextXstate / getContextXstate
// apps/lines/src/game/context.ts
export const setContext = () => {
  setContextEventEmitter<EmitterEvent>({ eventEmitter });
  setContextXstate({ stateXstate, stateXstateDerived });
  setContextLayout({ stateLayout, stateLayoutDerived });
  setContextApp({ stateApp });
};

Build docs developers (and LLMs) love

Get started for freeTalk to us