npm
Screens

Victory

Result sheet, star burst, rewards, and the action dock.

Victory!
SCORE8,420
+120 +2 +1 boost
9:41▮▮▮
"use client";

import {
  Avatar,
  Body,
  Bolt,
  BottomStack,
  BundleCell,
  BundleCells,
  Button,
  Chrome,
  ChromeRow,
  Coin,
  CornerRibbon,
  Counter,
  Counters,
  Dim,
  Dock,
  FloatChrome,
  Gem,
  GroupKicker,
  Heart,
  LevelBadge,
  MapPin,
  MapScene,
  Meter,
  Pack,
  PackRow,
  Panel,
  PageDots,
  Podium,
  PodiumColumn,
  ProfileChip,
  RankRow,
  Ribbon,
  Screen,
  ScreenName,
  SettingsRow,
  ShopRow,
  StarBurst,
  Strike,
  Tab,
  TabBar,
  TimerPill,
  Toggle,
  TopRibbon,
  Slider,
  Version,
  Well,
  Wordmark,
  YouBadge,
} from "@objectifthunes/royal-games-ui";
import { useState, type ReactNode } from "react";

const ignoreAction = () => undefined;

interface ResourceCountersProps {
  interactive?: boolean;
  onAddCoins?: () => void;
  onAddGems?: () => void;
}

interface NavigationProps {
  onNavigate?: (value: string) => void;
}

function ResourceCounters({
  interactive = true,
  onAddCoins = ignoreAction,
  onAddGems = ignoreAction,
}: ResourceCountersProps) {
  return (
    <Counters aria-label="Player resources">
      {interactive ? (
        <>
          <Counter graphic={<Coin />} onAdd={onAddCoins} addLabel="Add coins">
            2,450
          </Counter>
          <Counter graphic={<Gem />} onAdd={onAddGems} addLabel="Add gems">
            12
          </Counter>
        </>
      ) : (
        <>
          <Counter graphic={<Coin />}>2,450</Counter>
          <Counter graphic={<Gem />}>12</Counter>
        </>
      )}
    </Counters>
  );
}

interface RoyalChromeProps {
  name: ReactNode;
  onAddCoins?: () => void;
  onAddGems?: () => void;
  onOpenSettings?: () => void;
}

function RoyalChrome({
  name,
  onAddCoins = ignoreAction,
  onAddGems = ignoreAction,
  onOpenSettings = ignoreAction,
}: RoyalChromeProps) {
  return (
    <Chrome>
      <ChromeRow tone="velvet">
        <ProfileChip
          avatar={
            <Avatar decorative size="small">
              ♛
            </Avatar>
          }
          name="Max"
          caption="LEVEL 12"
        />
        <ResourceCounters onAddCoins={onAddCoins} onAddGems={onAddGems} />
      </ChromeRow>
      <ChromeRow tone="stone">
        <ScreenName>{name}</ScreenName>
        <Button
          tone="primary"
          size="small"
          iconOnly
          aria-label="Settings"
          onClick={onOpenSettings}
        >
          ⚙
        </Button>
      </ChromeRow>
    </Chrome>
  );
}

interface RoyalTabsProps extends NavigationProps {
  initial: string;
}

function RoyalTabs({ initial, onNavigate = ignoreAction }: RoyalTabsProps) {
  const [tab, setTab] = useState(initial);

  const handleTabChange = (value: string) => {
    setTab(value);
    onNavigate(value);
  };

  return (
    <TabBar
      aria-label="Primary navigation"
      value={tab}
      onValueChange={handleTabChange}
    >
      <Tab value="shop" icon="🛒">
        Shop
      </Tab>
      <Tab value="ranks" icon="♛">
        Ranks
      </Tab>
      <Tab value="home" icon="⌂">
        Home
      </Tab>
      <Tab value="map" icon="⚑">
        Map
      </Tab>
      <Tab value="more" icon="⚙" dot>
        More
      </Tab>
    </TabBar>
  );
}

// SCREEN_RECIPE: VictoryScreen
export interface VictoryScreenProps {
  onContinue?: () => void;
  onReplay?: () => void;
  onShare?: () => void;
}

/** Copy-ready result recipe with an independent, non-overlapping action dock. */
export function VictoryScreen({
  onContinue = ignoreAction,
  onReplay = ignoreAction,
  onShare = ignoreAction,
}: VictoryScreenProps = {}) {
  return (
    <Screen aria-label="Victory results" tone="forest">
      <Dim intensity="strong" />
      <Body layout="result">
        <Ribbon size="large">Victory!</Ribbon>
        <Panel tone="paper">
          <StarBurst
            earned={3}
            total={3}
            label="Three out of three stars earned"
          />
          <Well>
            <SettingsRow
              variant="control"
              label="SCORE"
              control={<strong>8,420</strong>}
            />
          </Well>
          <Counters aria-label="Rewards" layout="center">
            <span>
              <Coin /> +120
            </span>
            <span>
              <Gem /> +2
            </span>
            <span>
              <Bolt /> +1 boost
            </span>
          </Counters>
          <Meter
            tone="positive"
            value={68}
            max={100}
            label="Level 12"
            valueText="68%"
          />
        </Panel>
      </Body>
      <BottomStack>
        <Dock tone="primary">
          <Button tone="positive" size="hero" width="wide" onClick={onContinue}>
            CONTINUE
          </Button>
          <Counters aria-label="Result actions" layout="spread">
            <Button tone="primary" size="small" width="full" onClick={onReplay}>
              ↻ REPLAY
            </Button>
            <Button tone="primary" size="small" width="full" onClick={onShare}>
              SHARE
            </Button>
          </Counters>
        </Dock>
      </BottomStack>
    </Screen>
  );
}

This is the exact component rendered above. The result card occupies the content slot while the action dock consumes real lower-screen space, so neither layer depends on guessed absolute offsets.