refactor: split CommandCard into focused components and hooks

src/components/game/CommandCard/CommandGrid.tsx

@@ -0,0 +1,81 @@
+'use client';
+
+import { memo, useCallback } from 'react';
+import { getWorkerBridge } from '@/engine/workers';
+import { CommandButton } from '@/components/ui/CommandButton';
+import { EmptySlot } from '@/components/ui/EmptySlot';
+import { getCommandIcon } from '@/utils/commandIcons';
+import { CommandButtonData } from './types';
+
+interface CommandGridProps {
+  commands: CommandButtonData[];
+  minerals: number;
+  plasma: number;
+  supply: number;
+  maxSupply: number;
+  hoveredCmd: string | null;
+  setHoveredCmd: (id: string | null) => void;
+}
+
+/**
+ * Grid layout for command buttons (4 columns, 3 rows).
+ */
+function CommandGridInner({
+  commands,
+  minerals,
+  plasma,
+  supply,
+  maxSupply,
+  hoveredCmd,
+  setHoveredCmd,
+}: CommandGridProps) {
+  // Handle clicks on disabled buttons to play resource alerts
+  const handleDisabledClick = useCallback(
+    (cmd: CommandButtonData) => {
+      if (!cmd.isDisabled || !cmd.cost) return;
+
+      const bridge = getWorkerBridge();
+      if (!bridge) return;
+
+      if (cmd.cost.minerals > 0 && minerals < cmd.cost.minerals) {
+        bridge.eventBus.emit('alert:notEnoughMinerals', {});
+      } else if (cmd.cost.plasma > 0 && plasma < cmd.cost.plasma) {
+        bridge.eventBus.emit('alert:notEnoughPlasma', {});
+      } else if (cmd.cost.supply && cmd.cost.supply > 0 && supply + cmd.cost.supply > maxSupply) {
+        bridge.eventBus.emit('alert:supplyBlocked', {});
+      }
+    },
+    [minerals, plasma, supply, maxSupply]
+  );
+
+  return (
+    <div className="grid grid-cols-4 gap-1.5">
+      {commands.map((cmd) => (
+        <div
+          key={cmd.id}
+          className="relative"
+          onMouseEnter={() => setHoveredCmd(cmd.id)}
+          onMouseLeave={() => setHoveredCmd(null)}
+        >
+          <CommandButton
+            icon={getCommandIcon(cmd.id)}
+            label={cmd.label}
+            shortcut={cmd.shortcut}
+            onClick={cmd.action}
+            onDisabledClick={() => handleDisabledClick(cmd)}
+            isDisabled={cmd.isDisabled}
+            hasCost={!!cmd.cost}
+            isBackButton={cmd.id === 'back'}
+          />
+        </div>
+      ))}
+
+      {/* Empty slots */}
+      {Array.from({ length: Math.max(0, 12 - commands.length) }).map((_, i) => (
+        <EmptySlot key={`empty-${i}`} />
+      ))}
+    </div>
+  );
+}
+
+export const CommandGrid = memo(CommandGridInner);

src/components/game/CommandCard/constants.ts

@@ -0,0 +1,40 @@
+/**
+ * Basic structures (no tech requirements)
+ */
+export const BASIC_BUILDINGS = [
+  'headquarters',
+  'supply_cache',
+  'extractor',
+  'infantry_bay',
+  'tech_center',
+  'garrison',
+  'defense_turret',
+];
+
+/**
+ * Advanced structures (tech requirements)
+ */
+export const ADVANCED_BUILDINGS = [
+  'forge',
+  'arsenal',
+  'hangar',
+  'power_core',
+  'ops_center',
+  'radar_array',
+];
+
+/**
+ * Wall buildings
+ */
+export const WALL_BUILDINGS = ['wall_segment', 'wall_gate'];
+
+/**
+ * Research available at each building type.
+ */
+export const BUILDING_RESEARCH_MAP: Record<string, string[]> = {
+  tech_center: ['infantry_weapons_1', 'infantry_armor_1'],
+  arsenal: ['vehicle_weapons_1', 'vehicle_armor_1'],
+  infantry_bay: ['combat_stim', 'combat_shield'],
+  forge: ['bombardment_systems'],
+  hangar: ['cloaking_field'],
+};

src/components/game/CommandCard/hooks/index.ts

@@ -0,0 +1,3 @@
+export { useUnitCommands } from './useUnitCommands';
+export { useBuildingCommands } from './useBuildingCommands';
+export { useCommandKeyboard } from './useCommandKeyboard';