Sansa Arcade Games

React SDK for embedding the Sansa arcade games in another React app. The repo also keeps the original Vite app as a local demo/playground.

Install

npm install @sansa/arcade-games

Import the SDK styles once in your app:

import "@sansa/arcade-games/styles.css";

Basic Usage

import { Tetris } from "@sansa/arcade-games";
import "@sansa/arcade-games/styles.css";

export function ArcadePage() {
  return (
    <Tetris
      onExit={() => console.log("exit")}
      onScoreChange={(event) => console.log(event)}
      onGameOver={(event) => console.log(event)}
    />
  );
}

Games

The package exports:

• Asteroids
• BlockBusterGame
• SpaceInvaders
• Tetris
• TokenSniperGame
• WordUpGame

It also exports shared types:

• ArcadeGameProps
• ArcadeRewardAdapter
• ArcadeRewardEvent
• GameId
• GameOverEvent
• ScoreChangeEvent

Exit Handling

Games do not depend on react-router-dom. Pass your own exit behavior:

import { TokenSniperGame } from "@sansa/arcade-games";

export function TokenSniperRoute() {
  return <TokenSniperGame onExit={() => window.history.back()} />;
}

Reward Adapter

Wallets and on-chain rewards are host-app concerns. The SDK accepts an optional adapter and stays playable when no adapter is provided.

import { BlockBusterGame, type ArcadeRewardAdapter } from "@sansa/arcade-games";

const rewardAdapter: ArcadeRewardAdapter = {
  isConnected: true,
  address: "0x...",
  async onReward(event) {
    await fetch("/api/rewards", {
      method: "POST",
      body: JSON.stringify(event),
    });
  },
};

export function RewardsArcade() {
  return <BlockBusterGame rewardAdapter={rewardAdapter} />;
}

Local Demo

npm install
npm run dev

The demo app still uses Vite routes, RainbowKit, Wagmi and the existing wallet gate where it already existed.

Build

Build the demo app:

npm run build

Build the SDK package:

npm run build:sdk

The SDK build emits JavaScript, CSS, assets and TypeScript declarations into dist.