Implement Split-Panel Combat UI (Pattern A) for SHINOBI WAY game. Use when user wants to create the horizontal confrontation combat layout, character panels, action dock, phase header, VS divider, or any component from the Pattern A combat UI system. Guides through component creation following the established architecture.
This skill guides implementation of the Split-Panel Combat UI, transforming the vertical theater mode into a horizontal confrontation layout.
┌───────────────────────────────────────────────────┐
│ TURN INDICATOR │ PHASE PIPELINE │ MODIFIERS │ ← PhaseHeader
├──────────────────┴───────┬───────────┴────────────┤
│ │ │
│ PLAYER PANEL │ ENEMY PANEL │ ← ConfrontationZone
│ (CharacterPanel) │ (CharacterPanel) │
│ │ │
├──────────────────────────┴────────────────────────┤
│ QUICK ACTIONS (SIDE/TOGGLE) │ MAIN ACTIONS │ ← ActionDock
└───────────────────────────────┴───────────────────┘
Combat.tsx (scene orchestrator)
├── CombatLayout.tsx (CSS Grid container)
│ ├── PhaseHeader.tsx (top status bar)
│ │ ├── TurnIndicator
│ │ ├── PhasePipeline
│ │ ├── SideActionCounter
│ │ └── ApproachModifier
│ │
│ ├── ConfrontationZone.tsx (battle area)
│ │ ├── CharacterPanel.tsx (player variant)
│ │ │ ├── CharacterSprite
│ │ │ ├── IdentityBar
│ │ │ ├── ResourceBars (HP/CP)
│ │ │ └── BuffBar
│ │ │
│ │ ├── VSDivider.tsx (center emblem)
│ │ │
│ │ └── CharacterPanel.tsx (enemy variant)
│ │ ├── CharacterSprite
│ │ ├── IdentityBar (name, tier, element)
│ │ ├── HealthBar
│ │ ├── DefenseStats
│ │ └── BuffBar
│ │
│ └── ActionDock.tsx (skill bar)
│ ├── QuickActionsSection
│ │ ├── QuickActionCard (SIDE skills)
│ │ └── QuickActionCard (TOGGLE skills)
│ ├── MainActionsSection
│ │ └── MainActionCard (MAIN skills)
│ └── ControlButtons (Auto, End Turn)
│
└── FloatingTextLayer (z-50, unchanged)
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
Ask user which component to implement:
Based on selection, load the appropriate reference:
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>
);
};
After component creation:
components/combat/index.tsCombat.tsx# 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
// 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';