Frontend Architecture

web-app/
├── src/
│   ├── app/                 # Next.js App Router pages
│   │   ├── page.tsx        # Home page
│   │   ├── game/           # Game page
│   │   ├── sessions/       # Session management
│   │   ├── leaderboard/    # Rankings
│   │   └── relics/         # Relic shop
│   │
│   ├── components/          # React components
│   │   ├── SlotGrid.tsx    # 5x3 slot display
│   │   ├── PatternOverlay   # Pattern animations
│   │   ├── modals/         # Modal components
│   │   └── providers/      # Context providers
│   │
│   ├── hooks/              # Custom React hooks
│   │   ├── useController   # Cartridge integration
│   │   └── useGameContract # Contract interactions
│   │
│   └── utils/              # Utility functions
│       ├── abyssContract   # Contract calls
│       ├── patternDetector # Pattern logic
│       └── GameConfig      # Game constants
│
└── public/
    └── images/             # Game assets

<SlotGrid 
    grid={grid}           // Array of 15 symbol IDs
    isSpinning={spinning} // Trigger spin animation
/>

<PatternOverlay
    patterns={patterns}   // Detected patterns
    onPatternShow={() => playSound('win')}
/>

const {
    account,        // Starknet account
    address,        // Wallet address
    username,       // Controller username
    isConnected,    // Connection status
    connect,        // Connect function
    disconnect,     // Disconnect function
    openProfile,    // Open Controller profile
} = useController();

const {
    requestSpin,
    getSessionData,
    buyItem,
    refreshMarket,
    optimisticItems,
    // ... more functions
} = useAbyssGame();

// Core game state
const [score, setScore] = useState(0);
const [level, setLevel] = useState(1);
const [spinsRemaining, setSpinsRemaining] = useState(5);
const [grid, setGrid] = useState<number[]>([]);
const [isSpinning, setIsSpinning] = useState(false);

// Relic state
const [equippedRelic, setEquippedRelic] = useState(null);
const [relicCooldownRemaining, setRelicCooldownRemaining] = useState(0);
const [scoreMultiplier, setScoreMultiplier] = useState(1);

const patterns = detectPatterns(grid, undefined, scoreBonuses);

const playSound = (sound: string, delay?: number) => {
    setTimeout(() => {
        const audio = new Audio(`/sounds/${sound}.mp3`);
        audio.play();
    }, delay || 0);
};