Casino Jackpot Engine Web Component

Standalone web component wrapping the shared jackpot-engine-jackpots React feature (@flash/frameworks) via @r2wc/react-to-web-component, for embedding on the Zirvebet operator outside the Astro app (e.g. on legacy/foreign hosts).

Registers the custom element <casino-jackpot-engine-wc> with an open shadow root. The component's CSS (built from jackpot-engine-wc.css) is injected as an inline <style> tag inside the shadow root on connectedCallback.

Usage

<script type="module" src="https://cdn.example.com/@everymatrix/casino-jackpot-engine-wc/dist/build-jackpot-engine-wc.js"></script>

<casino-jackpot-engine-wc
  nwa-origin="https://example.com"
  country="TR"
  language="en"
  endpoint="/api/jackpots"
  category-url="/casino/slots"
  is-desktop="true"
  logo-url="https://example.com/logo.svg"
  games-columns-desktop="4"
  games-columns-mobile="2"
  game-url-template="/casino/{vendor}/{slug}/?prevRoute=%2Fcasino"
></casino-jackpot-engine-wc>

Or as an ESM import:

import '@everymatrix/casino-jackpot-engine-wc';
import '@everymatrix/casino-jackpot-engine-wc/styles.css';

Props / attributes

| Prop | Type | Required | Description | | ------------------- | --------- | -------- | --------------------------------------------------------- | | nwaOrigin | string | yes | NWA origin used to build locals / API base. | | country | string | yes | Country code passed to the jackpot feature. | | language | string | yes | Language/locale code. | | endpoint | string | yes | Jackpot API endpoint. | | categoryUrl | string | no | Fallback category segment for game URLs (default lobby). | | isDesktop | boolean | no | Switches platform/device variant (desktop vs iPhone/mobile). | | logoUrl | string | no | Operator logo shown in the widget. | | forceDialog | boolean | no | Forces the jackpot tiers dialog to render. | | gamesColumnsDesktop | number | no | Fixed column count for games grid on desktop. Default: auto-fit. | | gamesColumnsMobile | number | no | Fixed column count for games grid on mobile. Default: auto-fit. | | gameUrlTemplate | string | no | URL template for game links. Placeholders: {id}, {name}, {slug}, {vendor}. |

r2wc maps these camelCase props to kebab-case HTML attributes automatically.

Theming (CSS custom properties)

The shadow root has an open boundary, so :host styles cascade in normally. All overridable tokens are read from --wc-* custom properties set on the casino-jackpot-engine-wc element (with sensible defaults if unset):

casino-jackpot-engine-wc {
  /* colors */
  --wc-color-primary: #2dcb70;
  --wc-color-primary-hover: #47b877;
  --wc-color-secondary: #ffffff;
  --wc-color-secondary-hover: rgba(0, 0, 0, 15%);
  --wc-color-secondary-active: rgba(0, 0, 0, 25%);
  --wc-color-tertiary: #314662;
  --wc-color-tertiary-hover: #314662;
  --wc-color-accent: rgba(45, 203, 111, 0.2);
  --wc-color-accent-hover: rgba(45, 203, 111, 0.5);
  --wc-color-txt-primary: #ffffff;
  --wc-color-txt-primary-hover: rgba(255, 255, 255, 50%);
  --wc-color-txt-secondary: rgba(255, 255, 255, 65%);
  --wc-color-txt-tertiary: #2dcb70;
  --wc-color-bg-primary: #0d1c31;
  --wc-color-bg-secondary: #132846;
  --wc-color-bg-elements: #253b5b;
  --wc-color-border-elements: #374965;
  --wc-color-nav-bar: #10253f;
  --wc-color-notification: #2dcb70;
  --wc-color-error: #f3514b;
  --wc-color-success: #2dcb70;
  --wc-color-contrast-primary: #c9d6ff;
  --wc-color-info: #ffd21e;
  --wc-color-pending: #d9a80d;
  --wc-color-rollback: #5a88d7;
  --wc-custom-shadow: 4px 4px 4px 1px rgba(0, 0, 0, 0.25);

  /* button */
  --wc-color-btn-text: var(--wc-color-txt-primary);
  --wc-fw-btn-txt: normal;
  --wc-button-radius-md: var(--wc-radius-md);
  --wc-button-border-width: 0px;
  --wc-button-border-color: var(--wc-color-primary);

  /* jackpot card */
  --wc-je-card-border-width: 0px;
  --wc-je-card-border-color: var(--wc-color-bg-elements);
  --wc-je-games-container-padding: 1em; /* calc(var(--spacing) * 4) */
}

Spacing, font-size and radius scale

Tailwind's spacing/text/radius scale defaults to rem, which is relative to the host page's root font-size, not :host. This widget redeclares those tokens in em (relative to :host's own font-size, Tailwind's 1rem == 16px assumption as the 1em baseline) so sizing stays consistent regardless of the host page's root font-size, and exposes them as overridable --wc-* tokens.

:host's font-size is itself controlled by --wc-font-size (default 16px) -- bump that one variable and every spacing/text/radius token below scales proportionally:

casino-jackpot-engine-wc {
  --wc-font-size: 16px; /* scale knob -- everything below is relative to this */

  --wc-spacing: 0.25em; /* base unit; paddings/gaps/margins are multiples of this */
  --wc-spacing-7-5: 1.875em;
  --wc-spacing-15: 3.75em;
  --wc-spacing-18: 4.5em;

  --wc-text-xxs: 0.625em;
  --wc-text-xs: 0.75em;
  --wc-text-sm: 0.875em;
  --wc-text-base: 1em;
  --wc-text-lg: 1.125em;
  --wc-text-xl: 1.25em;
  --wc-text-2xl: 1.5em;
  --wc-text-3xl: 1.875em;
  --wc-text-4xl: 2.25em;
  --wc-text-5xl: 3em;

  --wc-radius-sm: 0.25em;
  --wc-radius-md: 0.375em;
  --wc-radius-lg: 0.5em;
  --wc-radius-xl: 0.75em;
  --wc-radius-2xl: 1em;
  --wc-radius-3xl: 1.5em;
  --wc-radius-4xl: 2em;
  --wc-radius-2-5: 0.625em;

  --wc-container-lg: 32em;
  --wc-container-xl: 36em;
  --wc-container-4xl: 56em;
}

Note: Tailwind breakpoints (sm/md/lg/xl/2xl) are still rem-based @media queries baked in at build time -- CSS custom properties can't be used inside media query conditions, so those remain relative to the host page's root font-size.

Build

pnpm build

This runs node ../../../../../scripts/build-r2wc-wrapper.cjs jackpot-engine zirvebet, which:

1. Ensures the zirvebet operator is built (cached via .build-cache/operator-build.json, rebuilt automatically when relevant sources change).

2. Bundles jackpot-engine-wc.css with Tailwind → dist/build-jackpot-engine-wc.css.

3. Bundles jackpot-engine-wc.tsx with esbuild (target es2019, minified) into:

   • dist/build-jackpot-engine-wc.js (ESM)
   • dist/build-jackpot-engine-wc.cjs (CJS)

   The CSS bundle is also inlined into the JS bundle via the __WC_CSS__ define, so the shadow root can self-style without an extra stylesheet request.

dist/ is wiped and regenerated on every build.