Combat Ui Pattern A

File Structure

src/components/combat/
├── index.ts                  # Barrel exports
├── CombatLayout.tsx          # Grid container
├── PhaseHeader.tsx           # Top status bar
├── ConfrontationZone.tsx     # Player vs Enemy area
├── CharacterPanel.tsx        # Reusable character display
├── VSDivider.tsx             # Center VS emblem
├── ActionDock.tsx            # Bottom skill bar
├── QuickActionCard.tsx       # Compact SIDE/TOGGLE card
└── MainActionCard.tsx        # Large MAIN skill card

Implementation Workflow

Step 1: Identify Target Component

Ask user which component to implement:

1. CombatLayout - Start here for new implementation
2. PhaseHeader - Top status bar
3. ConfrontationZone - Battle area with both panels
4. CharacterPanel - Individual character display
5. VSDivider - Center emblem and effects
6. ActionDock - Bottom skill bar
7. QuickActionCard - Compact skill card variant
8. MainActionCard - Large skill card variant

Step 2: Load Component Reference

Based on selection, load the appropriate reference:

• Layout/Structure: See layout-specs.md
• Component Props: See component-interfaces.md
• Styling Guide: See styling-tokens.md
• Animation Specs: See animations.md

Step 3: Generate Component Code

Follow the component template pattern:

import React from 'react';
import { cn } from '@/lib/utils'; // if using cn utility

interface ComponentNameProps {
  // Props from component-interfaces.md
}

export const ComponentName: React.FC<ComponentNameProps> = ({
  // destructured props
}) => {
  return (
    <div className={cn(
      // Base styles from styling-tokens.md
      // Conditional styles
    )}>
      {/* Component content */}
    </div>
  );
};

Step 4: Wire to Combat.tsx

After component creation:

1. Export from components/combat/index.ts
2. Import in Combat.tsx
3. Replace corresponding section
4. Pass required props from existing state

Quick Implementation Commands

Create All Files (Scaffolding)

# Create directory
mkdir -p src/components/combat

# Create all component files
touch src/components/combat/{index,CombatLayout,PhaseHeader,ConfrontationZone,CharacterPanel,VSDivider,ActionDock,QuickActionCard,MainActionCard}.tsx

Barrel Export Template

// src/components/combat/index.ts
export { CombatLayout } from './CombatLayout';
export { PhaseHeader } from './PhaseHeader';
export { ConfrontationZone } from './ConfrontationZone';
export { CharacterPanel } from './CharacterPanel';
export { VSDivider } from './VSDivider';
export { ActionDock } from './ActionDock';
export { QuickActionCard } from './QuickActionCard';
export { MainActionCard } from './MainActionCard';

Props Mapping from Existing Code

From App.tsx → Combat.tsx (unchanged)