@almadar/cli 0.3.2 → 0.3.3

package/shells/typescript-shell/packages/client/src/components/organisms/debug/tabs/TraitsTab.tsx

@@ -0,0 +1,102 @@
+/**
+ * TraitsTab - Displays active traits and their state machines
+ * Uses existing component library atoms/molecules.
+ */
+
+import * as React from 'react';
+import type { TraitDebugInfo } from '../../../../lib/traitRegistry';
+import { Accordion } from '../../../molecules/Accordion';
+import { Badge } from '../../../atoms/Badge';
+import { Typography } from '../../../atoms/Typography';
+import { Stack } from '../../../atoms/Stack';
+import { EmptyState } from '../../../molecules/EmptyState';
+
+interface TraitsTabProps {
+    traits: TraitDebugInfo[];
+}
+
+export function TraitsTab({ traits }: TraitsTabProps) {
+    if (traits.length === 0) {
+        return (
+            <EmptyState
+                title="No active traits"
+                description="Traits will appear when components using them are mounted"
+                className="py-8"
+            />
+        );
+    }
+
+    const accordionItems = traits.map(trait => ({
+        id: trait.id,
+        header: (
+            <div className="flex items-center gap-2 w-full">
+                <Typography variant="body" weight="semibold" className="text-purple-600 dark:text-purple-400">
+                    {trait.name}
+                </Typography>
+                <Badge variant="success" size="sm">{trait.currentState}</Badge>
+                <Typography variant="small" className="text-gray-500 ml-auto">
+                    {trait.transitionCount} transitions
+                </Typography>
+            </div>
+        ),
+        content: (
+            <Stack gap="sm">
+                {/* States */}
+                <div>
+                    <Typography variant="small" weight="medium" className="text-gray-500 mb-2">States</Typography>
+                    <div className="flex flex-wrap gap-1">
+                        {trait.states.map(state => (
+                            <Badge
+                                key={state}
+                                variant={state === trait.currentState ? 'success' : 'default'}
+                                size="sm"
+                            >
+                                {state}
+                            </Badge>
+                        ))}
+                    </div>
+                </div>
+
+                {/* Transitions */}
+                {trait.transitions.length > 0 && (
+                    <div>
+                        <Typography variant="small" weight="medium" className="text-gray-500 mb-2">Transitions</Typography>
+                        <Stack gap="xs">
+                            {trait.transitions.map((t, i) => (
+                                <Typography key={i} variant="small" className="font-mono">
+                                    {t.from} → {t.to} <span className="text-gray-500">({t.event})</span>
+                                    {t.guard && <span className="text-amber-500"> [{t.guard}]</span>}
+                                </Typography>
+                            ))}
+                        </Stack>
+                    </div>
+                )}
+
+                {/* Guards */}
+                {trait.guards.length > 0 && (
+                    <div>
+                        <Typography variant="small" weight="medium" className="text-gray-500 mb-2">Guards</Typography>
+                        <Stack gap="xs">
+                            {trait.guards.map((g, i) => (
+                                <div key={i} className="flex items-center justify-between">
+                                    <Typography variant="small">{g.name}</Typography>
+                                    <Badge variant={g.lastResult === true ? 'success' : g.lastResult === false ? 'danger' : 'default'} size="sm">
+                                        {g.lastResult === undefined ? '?' : g.lastResult ? '✓' : '✗'}
+                                    </Badge>
+                                </div>
+                            ))}
+                        </Stack>
+                    </div>
+                )}
+            </Stack>
+        ),
+    }));
+
+    return (
+        <div className="debug-tab debug-tab--traits">
+            <Accordion items={accordionItems} multiple />
+        </div>
+    );
+}
+
+TraitsTab.displayName = 'TraitsTab';

package/shells/typescript-shell/packages/client/src/components/organisms/game/CollisionDetector.tsx

@@ -0,0 +1,195 @@
+/**
+ * CollisionDetector - Invisible component that runs collision detection
+ *
+ * Rendered by Collision2DSystem trait via render_ui effect.
+ * Runs AABB collision checks each frame and emits collision events.
+ *
+ * This follows the closed circuit pattern:
+ * Trait (render_ui) → Component (CollisionDetector) → Events (COLLISION_*) → Trait (state machine)
+ *
+ * @generated pattern component
+ */
+
+import { useEffect, useRef, useCallback } from 'react';
+import { useEventBus, type EventBusContextType } from '../../../hooks/useEventBus';
+import { getByType, type Entity } from '../../../stores/entityStore';
+
+/**
+ * Collision rule configuration
+ */
+export interface CollisionRule {
+  /** Entity type A */
+  typeA: string;
+  /** Entity type B */
+  typeB: string;
+  /** Whether this is a trigger (pass-through) or solid collision */
+  isTrigger?: boolean;
+  /** Custom event name to emit (defaults to COLLISION_ENTER/TRIGGER_ENTER) */
+  event?: string;
+}
+
+/**
+ * CollisionDetector props
+ */
+export interface CollisionDetectorProps {
+  /** Collision detection algorithm */
+  algorithm?: 'aabb' | 'circle';
+  /** Collision rules to check */
+  rules?: readonly CollisionRule[];
+  /** Whether collision detection is enabled */
+  enabled?: boolean;
+  /** Event bus for emitting events (optional, uses hook if not provided) */
+  eventBus?: EventBusContextType;
+}
+
+/**
+ * Default collision rules for platformer
+ */
+const DEFAULT_RULES: CollisionRule[] = [
+  { typeA: 'Player', typeB: 'Platform', isTrigger: false },
+  { typeA: 'Player', typeB: 'Coin', isTrigger: true, event: 'COLLECT' },
+  { typeA: 'Player', typeB: 'Enemy', isTrigger: true, event: 'TAKE_DAMAGE' },
+];
+
+/**
+ * AABB collision check
+ */
+function checkAABB(a: Entity, b: Entity): boolean {
+  const ax = (a.x as number) ?? 0;
+  const ay = (a.y as number) ?? 0;
+  const aw = (a.width as number) ?? 32;
+  const ah = (a.height as number) ?? 32;
+
+  const bx = (b.x as number) ?? 0;
+  const by = (b.y as number) ?? 0;
+  const bw = (b.width as number) ?? 32;
+  const bh = (b.height as number) ?? 32;
+
+  return ax < bx + bw && ax + aw > bx && ay < by + bh && ay + ah > by;
+}
+
+/**
+ * Circle collision check
+ */
+function checkCircle(a: Entity, b: Entity): boolean {
+  const ax = (a.x as number) ?? 0;
+  const ay = (a.y as number) ?? 0;
+  const ar = a.radius != null ? (a.radius as number) : a.width != null ? (a.width as number) / 2 : 16;
+
+  const bx = (b.x as number) ?? 0;
+  const by = (b.y as number) ?? 0;
+  const br = b.radius != null ? (b.radius as number) : b.width != null ? (b.width as number) / 2 : 16;
+
+  const dx = ax - bx;
+  const dy = ay - by;
+  const distance = Math.sqrt(dx * dx + dy * dy);
+
+  return distance < ar + br;
+}
+
+/**
+ * CollisionDetector Component
+ *
+ * Invisible component that runs collision detection each frame and emits events.
+ * Designed to be rendered by the Collision2DSystem trait via render_ui effect.
+ */
+export function CollisionDetector({
+  algorithm = 'aabb',
+  rules = DEFAULT_RULES,
+  enabled = true,
+  eventBus: eventBusProp,
+}: CollisionDetectorProps) {
+  // Get event bus from context or prop
+  let eventBusFromHook: EventBusContextType | null = null;
+  try {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    eventBusFromHook = useEventBus();
+  } catch {
+    // Outside EventBusProvider context - will use prop or skip emission
+  }
+  const eventBus = eventBusProp || eventBusFromHook;
+
+  // Track active collisions to detect enter/exit
+  const activeCollisionsRef = useRef<Set<string>>(new Set());
+
+  // Get collision check function based on algorithm
+  const checkCollision = algorithm === 'circle' ? checkCircle : checkAABB;
+
+  // Collision detection tick
+  const tick = useCallback(() => {
+    if (!enabled || !eventBus) return;
+
+    const activeCollisions = activeCollisionsRef.current;
+    const newCollisions = new Set<string>();
+
+    // Check each rule
+    for (const rule of rules) {
+      const entitiesA = getByType(rule.typeA);
+      const entitiesB = getByType(rule.typeB);
+
+      for (const a of entitiesA) {
+        for (const b of entitiesB) {
+          // Skip self-collision
+          if (a.id === b.id) continue;
+
+          const colliding = checkCollision(a, b);
+          const pairKey = `${a.id}:${b.id}`;
+          const reversePairKey = `${b.id}:${a.id}`;
+
+          if (colliding) {
+            // Use consistent key ordering
+            const key = pairKey < reversePairKey ? pairKey : reversePairKey;
+            newCollisions.add(key);
+
+            if (!activeCollisions.has(key)) {
+              // New collision - emit ENTER event
+              const eventName = rule.isTrigger
+                ? rule.event || 'TRIGGER_ENTER'
+                : rule.event || 'COLLISION_ENTER';
+
+              eventBus.emit(eventName, {
+                entityA: a,
+                entityB: b,
+                typeA: rule.typeA,
+                typeB: rule.typeB,
+                isTrigger: rule.isTrigger ?? false,
+              });
+            }
+          }
+        }
+      }
+    }
+
+    // Check for collision exits
+    for (const key of activeCollisions) {
+      if (!newCollisions.has(key)) {
+        eventBus.emit('COLLISION_EXIT', { pairKey: key });
+      }
+    }
+
+    activeCollisionsRef.current = newCollisions;
+  }, [enabled, eventBus, rules, checkCollision]);
+
+  // Run collision detection loop
+  useEffect(() => {
+    if (!enabled) return;
+
+    let animationId: number;
+
+    const loop = () => {
+      tick();
+      animationId = requestAnimationFrame(loop);
+    };
+
+    animationId = requestAnimationFrame(loop);
+
+    return () => {
+      cancelAnimationFrame(animationId);
+    };
+  }, [enabled, tick]);
+
+  // Invisible component - renders nothing
+  return null;
+}
+
+CollisionDetector.displayName = 'CollisionDetector';

package/shells/typescript-shell/packages/client/src/components/organisms/game/DialogueBox.tsx

@@ -0,0 +1,279 @@
+/**
+ * DialogueBox Component
+ *
+ * NPC dialogue display with typewriter effect and choices.
+ */
+
+import React, { useState, useEffect, useCallback, useRef } from 'react';
+import { cn } from '../../../lib/cn';
+
+export interface DialogueChoice {
+  text: string;
+  action?: string;
+  next?: string;
+  disabled?: boolean;
+}
+
+export interface DialogueNode {
+  id?: string;
+  speaker: string;
+  text: string;
+  portrait?: string;
+  choices?: DialogueChoice[];
+  autoAdvance?: number; // ms to auto-advance, undefined = wait for input
+}
+
+export interface DialogueBoxProps {
+  /** Current dialogue node to display */
+  dialogue: DialogueNode;
+  /** Typewriter speed in ms per character (0 = instant) */
+  typewriterSpeed?: number;
+  /** Position of dialogue box */
+  position?: 'top' | 'bottom';
+  /** Called when text animation completes */
+  onComplete?: () => void;
+  /** Called when a choice is selected */
+  onChoice?: (choice: DialogueChoice) => void;
+  /** Called when dialogue is advanced (no choices) */
+  onAdvance?: () => void;
+  /** Optional className */
+  className?: string;
+}
+
+/**
+ * Dialogue box component with typewriter effect
+ *
+ * @example
+ * ```tsx
+ * <DialogueBox
+ *   dialogue={{
+ *     speaker: "Old Man",
+ *     text: "It's dangerous to go alone! Take this.",
+ *     portrait: "/portraits/oldman.png",
+ *     choices: [
+ *       { text: "Thank you!", action: "ACCEPT_ITEM" },
+ *       { text: "No thanks", next: "decline_node" }
+ *     ]
+ *   }}
+ *   typewriterSpeed={30}
+ *   onChoice={(choice) => handleChoice(choice)}
+ *   position="bottom"
+ * />
+ * ```
+ */
+export function DialogueBox({
+  dialogue,
+  typewriterSpeed = 30,
+  position = 'bottom',
+  onComplete,
+  onChoice,
+  onAdvance,
+  className,
+}: DialogueBoxProps): JSX.Element {
+  const [displayedText, setDisplayedText] = useState('');
+  const [isTyping, setIsTyping] = useState(false);
+  const [selectedChoice, setSelectedChoice] = useState(0);
+  const textRef = useRef(dialogue.text);
+  const charIndexRef = useRef(0);
+  const autoAdvanceTimerRef = useRef<NodeJS.Timeout | null>(null);
+
+  // Reset when dialogue changes
+  useEffect(() => {
+    textRef.current = dialogue.text;
+    charIndexRef.current = 0;
+    setDisplayedText('');
+    setSelectedChoice(0);
+
+    if (typewriterSpeed === 0) {
+      // Instant display
+      setDisplayedText(dialogue.text);
+      setIsTyping(false);
+      onComplete?.();
+    } else {
+      setIsTyping(true);
+    }
+
+    return () => {
+      if (autoAdvanceTimerRef.current) {
+        clearTimeout(autoAdvanceTimerRef.current);
+      }
+    };
+  }, [dialogue, typewriterSpeed, onComplete]);
+
+  // Typewriter effect
+  useEffect(() => {
+    if (!isTyping || typewriterSpeed === 0) return;
+
+    const interval = setInterval(() => {
+      if (charIndexRef.current < textRef.current.length) {
+        charIndexRef.current++;
+        setDisplayedText(textRef.current.slice(0, charIndexRef.current));
+      } else {
+        setIsTyping(false);
+        clearInterval(interval);
+        onComplete?.();
+
+        // Auto-advance if configured
+        if (dialogue.autoAdvance && !dialogue.choices?.length) {
+          autoAdvanceTimerRef.current = setTimeout(() => {
+            onAdvance?.();
+          }, dialogue.autoAdvance);
+        }
+      }
+    }, typewriterSpeed);
+
+    return () => clearInterval(interval);
+  }, [isTyping, typewriterSpeed, dialogue.autoAdvance, dialogue.choices, onComplete, onAdvance]);
+
+  // Skip to end of text
+  const skipTypewriter = useCallback(() => {
+    if (isTyping) {
+      charIndexRef.current = textRef.current.length;
+      setDisplayedText(textRef.current);
+      setIsTyping(false);
+      onComplete?.();
+    }
+  }, [isTyping, onComplete]);
+
+  // Handle click/tap
+  const handleClick = useCallback(() => {
+    if (isTyping) {
+      skipTypewriter();
+    } else if (!dialogue.choices?.length) {
+      onAdvance?.();
+    }
+  }, [isTyping, skipTypewriter, dialogue.choices, onAdvance]);
+
+  // Handle keyboard input
+  const handleKeyDown = useCallback((e: React.KeyboardEvent) => {
+    if (isTyping) {
+      if (e.key === ' ' || e.key === 'Enter') {
+        e.preventDefault();
+        skipTypewriter();
+      }
+      return;
+    }
+
+    if (dialogue.choices?.length) {
+      const enabledChoices = dialogue.choices.filter(c => !c.disabled);
+
+      switch (e.key) {
+        case 'ArrowUp':
+          e.preventDefault();
+          setSelectedChoice(prev => Math.max(0, prev - 1));
+          break;
+        case 'ArrowDown':
+          e.preventDefault();
+          setSelectedChoice(prev => Math.min(enabledChoices.length - 1, prev + 1));
+          break;
+        case 'Enter':
+        case ' ':
+          e.preventDefault();
+          const choice = enabledChoices[selectedChoice];
+          if (choice) {
+            onChoice?.(choice);
+          }
+          break;
+        case '1':
+        case '2':
+        case '3':
+        case '4':
+          const choiceIndex = parseInt(e.key) - 1;
+          if (choiceIndex < enabledChoices.length) {
+            e.preventDefault();
+            onChoice?.(enabledChoices[choiceIndex]);
+          }
+          break;
+      }
+    } else {
+      if (e.key === ' ' || e.key === 'Enter') {
+        e.preventDefault();
+        onAdvance?.();
+      }
+    }
+  }, [isTyping, skipTypewriter, dialogue.choices, selectedChoice, onChoice, onAdvance]);
+
+  const enabledChoices = dialogue.choices?.filter(c => !c.disabled) ?? [];
+
+  return (
+    <div
+      className={cn(
+        'fixed left-0 right-0 z-40',
+        position === 'top' ? 'top-0' : 'bottom-0',
+        className
+      )}
+      onClick={handleClick}
+      onKeyDown={handleKeyDown}
+      tabIndex={0}
+      role="dialog"
+      aria-label="Dialogue"
+    >
+      <div className="mx-4 my-4 bg-gray-900 bg-opacity-95 border-2 border-gray-600 rounded-lg overflow-hidden">
+        <div className="flex">
+          {/* Portrait */}
+          {dialogue.portrait && (
+            <div className="flex-shrink-0 p-4 border-r border-gray-700">
+              <img
+                src={dialogue.portrait}
+                alt={dialogue.speaker}
+                className="w-24 h-24 object-contain"
+                style={{ imageRendering: 'pixelated' }}
+              />
+            </div>
+          )}
+
+          {/* Content */}
+          <div className="flex-1 p-4">
+            {/* Speaker name */}
+            <div className="text-yellow-400 font-bold mb-2">
+              {dialogue.speaker}
+            </div>
+
+            {/* Dialogue text */}
+            <div className="text-white text-lg leading-relaxed min-h-[60px]">
+              {displayedText}
+              {isTyping && (
+                <span className="animate-pulse">▌</span>
+              )}
+            </div>
+
+            {/* Choices */}
+            {!isTyping && enabledChoices.length > 0 && (
+              <div className="mt-4 space-y-2">
+                {enabledChoices.map((choice, index) => (
+                  <button
+                    key={index}
+                    type="button"
+                    className={cn(
+                      'block w-full text-left px-4 py-2 rounded transition-colors',
+                      'hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-yellow-400',
+                      selectedChoice === index
+                        ? 'bg-gray-700 text-yellow-400'
+                        : 'bg-gray-800 text-white'
+                    )}
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      onChoice?.(choice);
+                    }}
+                  >
+                    <span className="text-gray-500 mr-2">{index + 1}.</span>
+                    {choice.text}
+                  </button>
+                ))}
+              </div>
+            )}
+
+            {/* Continue indicator */}
+            {!isTyping && !dialogue.choices?.length && (
+              <div className="mt-4 text-gray-500 text-sm animate-pulse">
+                Press SPACE or click to continue...
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default DialogueBox;