@almadar/cli 0.3.2 → 0.3.3

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

@@ -0,0 +1,241 @@
+import * as React from "react";
+import { cn } from "../../../lib/cn";
+import { StatBadge } from "../../molecules/game/StatBadge";
+import {
+  useEventBus,
+  type EventBusContextType,
+} from "../../../hooks/useEventBus";
+
+export interface GameOverStat {
+  /** Stat label */
+  label: string;
+  /** Stat value (required if bind is not provided) */
+  value?: number | string;
+  /**
+   * Schema-style data binding (e.g., "player.score").
+   * Alternative to value - used when stats come from schema render_ui effects.
+   * Component will display 0 as placeholder since runtime binding is not implemented.
+   */
+  bind?: string;
+  /** Display format */
+  format?: "number" | "time" | "text";
+  /** Icon */
+  icon?: React.ReactNode;
+}
+
+export interface GameOverAction {
+  /** Display label */
+  label: string;
+  /** Event to emit on click */
+  event?: string;
+  /** Page to navigate to */
+  navigatesTo?: string;
+  /** Button variant */
+  variant?: "primary" | "secondary" | "ghost";
+}
+
+export interface GameOverScreenProps {
+  /** Screen title (e.g., "Game Over", "Victory!") */
+  title: string;
+  /** Optional message */
+  message?: string;
+  /** Stats to display */
+  stats?: GameOverStat[];
+  /** Action buttons */
+  actions?: GameOverAction[];
+  /** Alias for actions (schema compatibility) */
+  menuItems?: GameOverAction[];
+  /** Called when an action is selected (legacy callback, prefer event bus) */
+  onAction?: (action: GameOverAction) => void;
+  /** Event bus for emitting UI events (optional, uses hook if not provided) */
+  eventBus?: EventBusContextType;
+  /** Victory or defeat variant */
+  variant?: "victory" | "defeat" | "neutral";
+  /** High score (optional, shows "NEW HIGH SCORE!" if exceeded) */
+  highScore?: number | string;
+  /** Current score for high score comparison (accepts string for schema bindings) */
+  currentScore?: number | string;
+  /** Additional CSS classes */
+  className?: string;
+}
+
+const variantColors = {
+  victory: {
+    bg: "from-green-900/90 to-emerald-950/90",
+    title: "text-green-400",
+    accent: "border-green-500",
+  },
+  defeat: {
+    bg: "from-red-900/90 to-gray-950/90",
+    title: "text-red-400",
+    accent: "border-red-500",
+  },
+  neutral: {
+    bg: "from-gray-900/90 to-gray-950/90",
+    title: "text-white",
+    accent: "border-gray-500",
+  },
+};
+
+const buttonVariants = {
+  primary: "bg-blue-600 hover:bg-blue-500 text-white border-blue-400",
+  secondary: "bg-gray-700 hover:bg-gray-600 text-white border-gray-500",
+  ghost: "bg-transparent hover:bg-white/10 text-white border-white/20",
+};
+
+function formatTime(ms: number): string {
+  const seconds = Math.floor(ms / 1000);
+  const minutes = Math.floor(seconds / 60);
+  const remainingSeconds = seconds % 60;
+  return `${minutes}:${remainingSeconds.toString().padStart(2, "0")}`;
+}
+
+export function GameOverScreen({
+  title,
+  message,
+  stats = [],
+  actions,
+  menuItems,
+  onAction,
+  eventBus: eventBusProp,
+  variant = "neutral",
+  highScore,
+  currentScore,
+  className,
+}: GameOverScreenProps) {
+  // Resolve alias: menuItems → actions
+  const resolvedActions = actions ?? menuItems ?? [];
+  // Use provided eventBus or get from context (with fallback for outside provider)
+  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;
+
+  const handleActionClick = React.useCallback(
+    (action: GameOverAction) => {
+      // Emit event to event bus for closed circuit pattern
+      if (action.event && eventBus) {
+        eventBus.emit(`UI:${action.event}`, { action });
+      }
+
+      // Call legacy callback if provided
+      if (onAction) {
+        onAction(action);
+      }
+    },
+    [eventBus, onAction],
+  );
+
+  const colors = variantColors[variant];
+  // Convert string scores to numbers for comparison
+  const numericCurrentScore =
+    typeof currentScore === "string" ? parseFloat(currentScore) : currentScore;
+  const numericHighScore =
+    typeof highScore === "string" ? parseFloat(highScore) : highScore;
+  const isNewHighScore =
+    numericHighScore !== undefined &&
+    numericCurrentScore !== undefined &&
+    !isNaN(numericCurrentScore) &&
+    !isNaN(numericHighScore) &&
+    numericCurrentScore > numericHighScore;
+
+  return (
+    <div
+      className={cn(
+        "min-h-screen w-full flex flex-col items-center justify-center p-8",
+        "bg-gradient-to-b",
+        colors.bg,
+        className,
+      )}
+    >
+      {/* Victory/Defeat Animation */}
+      {variant === "victory" && (
+        <div className="absolute inset-0 pointer-events-none overflow-hidden">
+          <div className="absolute inset-0 bg-[radial-gradient(circle_at_center,rgba(34,197,94,0.2),transparent_70%)]" />
+        </div>
+      )}
+
+      {/* Title */}
+      <h1
+        className={cn(
+          "text-6xl md:text-8xl font-bold mb-4 tracking-tight animate-bounce-once",
+          colors.title,
+        )}
+        style={{ textShadow: "0 4px 20px rgba(0,0,0,0.5)" }}
+      >
+        {title}
+      </h1>
+
+      {/* Message */}
+      {message && (
+        <p className="text-xl text-gray-300 mb-8 text-center max-w-md">
+          {message}
+        </p>
+      )}
+
+      {/* New High Score Banner */}
+      {isNewHighScore && (
+        <div className="mb-6 px-6 py-2 bg-yellow-500/20 border-2 border-yellow-500 rounded-full animate-pulse">
+          <span className="text-yellow-400 font-bold text-lg tracking-wide">
+            🏆 NEW HIGH SCORE! 🏆
+          </span>
+        </div>
+      )}
+
+      {/* Stats */}
+      {stats.length > 0 && (
+        <div
+          className={cn(
+            "mb-8 p-6 rounded-xl border-2 bg-black/30",
+            colors.accent,
+          )}
+        >
+          <div className="grid grid-cols-2 md:grid-cols-3 gap-4">
+            {stats.map((stat, index) => {
+              // Use value if provided, or show placeholder for bind (runtime binding not implemented)
+              let displayValue: string | number = stat.value ?? 0;
+              if (stat.format === "time" && typeof displayValue === "number") {
+                displayValue = formatTime(displayValue);
+              }
+
+              return (
+                <div key={index} className="text-center">
+                  <div className="text-gray-400 text-sm mb-1">{stat.label}</div>
+                  <div className="text-white text-2xl font-bold flex items-center justify-center gap-2">
+                    {stat.icon && <span>{stat.icon}</span>}
+                    <span className="tabular-nums">{displayValue}</span>
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        </div>
+      )}
+
+      {/* Actions */}
+      <div className="flex flex-col sm:flex-row gap-4">
+        {resolvedActions.map((action, index) => (
+          <button
+            key={index}
+            onClick={() => handleActionClick(action)}
+            className={cn(
+              "px-8 py-4 rounded-xl border-2 font-bold text-lg",
+              "transition-all duration-200",
+              "hover:scale-105 active:scale-95",
+              "focus:outline-none focus:ring-4 focus:ring-white/25",
+              buttonVariants[action.variant ?? "secondary"],
+            )}
+          >
+            {action.label}
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+GameOverScreen.displayName = "GameOverScreen";

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

@@ -0,0 +1,158 @@
+import * as React from "react";
+import { cn } from "../../../lib/cn";
+import {
+  useEventBus,
+  type EventBusContextType,
+} from "../../../hooks/useEventBus";
+
+export interface PauseOption {
+  /** Display label */
+  label: string;
+  /** Event to emit on click */
+  event?: string;
+  /** Page to navigate to */
+  navigatesTo?: string;
+  /** Button variant */
+  variant?: "primary" | "secondary" | "ghost" | "destructive";
+}
+
+export interface GamePauseOverlayProps {
+  /** Pause menu options */
+  options?: PauseOption[];
+  /** Alias for options (schema compatibility) */
+  menuItems?: PauseOption[];
+  /** Called when an option is selected (legacy callback, prefer event bus) */
+  onSelect?: (option: PauseOption) => void;
+  /** Event bus for emitting UI events (optional, uses hook if not provided) */
+  eventBus?: EventBusContextType;
+  /** Title (default: "PAUSED") */
+  title?: string;
+  /** Additional CSS classes */
+  className?: string;
+  /** Whether the pause menu is visible */
+  visible?: boolean;
+  /** Called when clicking outside the menu */
+  onDismiss?: () => void;
+}
+
+const variantMap = {
+  primary: "bg-blue-600 hover:bg-blue-500 text-white border-blue-400",
+  secondary: "bg-gray-700 hover:bg-gray-600 text-white border-gray-500",
+  ghost: "bg-transparent hover:bg-white/10 text-white border-white/20",
+  destructive: "bg-red-600 hover:bg-red-500 text-white border-red-400",
+};
+
+export function GamePauseOverlay({
+  options,
+  menuItems,
+  onSelect,
+  eventBus: eventBusProp,
+  title = "PAUSED",
+  className,
+  visible = true,
+  onDismiss,
+}: GamePauseOverlayProps) {
+  // Resolve alias: menuItems → options
+  const resolvedOptions = options ?? menuItems ?? [];
+
+  // Use provided eventBus or get from context (with fallback for outside provider)
+  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;
+
+  const handleOptionClick = React.useCallback(
+    (option: PauseOption) => {
+      // Emit event to event bus for closed circuit pattern
+      if (option.event && eventBus) {
+        eventBus.emit(`UI:${option.event}`, { option });
+      }
+
+      // Call legacy callback if provided
+      if (onSelect) {
+        onSelect(option);
+      }
+    },
+    [eventBus, onSelect],
+  );
+
+  // Handle escape key to dismiss (also emits RESUME event)
+  React.useEffect(() => {
+    if (!visible) return;
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === "Escape") {
+        // Emit RESUME event on escape (matches pause overlay circuit contract)
+        if (eventBus) {
+          eventBus.emit("UI:RESUME", {});
+        }
+        if (onDismiss) {
+          onDismiss();
+        }
+      }
+    };
+
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [visible, onDismiss, eventBus]);
+
+  if (!visible) return null;
+
+  return (
+    <div
+      className={cn(
+        "absolute inset-0 z-50 flex items-center justify-center",
+        "bg-black/75 backdrop-blur-sm",
+        "animate-in fade-in duration-200",
+        className,
+      )}
+      onClick={(e) => {
+        if (e.target === e.currentTarget && onDismiss) {
+          onDismiss();
+        }
+      }}
+    >
+      <div className="bg-gray-900/90 border-2 border-gray-700 rounded-2xl p-8 min-w-80 shadow-2xl">
+        {/* Title */}
+        <h2
+          className="text-4xl font-bold text-white text-center mb-8 tracking-widest"
+          style={{ textShadow: "0 2px 8px rgba(0,0,0,0.5)" }}
+        >
+          {title}
+        </h2>
+
+        {/* Options */}
+        <div className="flex flex-col gap-3">
+          {resolvedOptions.map((option, index) => (
+            <button
+              key={index}
+              onClick={() => handleOptionClick(option)}
+              className={cn(
+                "w-full py-3 px-6 rounded-lg border-2 font-bold",
+                "transition-all duration-150",
+                "hover:scale-105 active:scale-95",
+                "focus:outline-none focus:ring-2 focus:ring-white/25",
+                variantMap[option.variant ?? "secondary"],
+              )}
+            >
+              {option.label}
+            </button>
+          ))}
+        </div>
+
+        {/* Hint */}
+        {onDismiss && (
+          <p className="mt-6 text-center text-gray-500 text-sm">
+            Press ESC to resume
+          </p>
+        )}
+      </div>
+    </div>
+  );
+}
+
+GamePauseOverlay.displayName = "GamePauseOverlay";

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

@@ -0,0 +1,161 @@
+/**
+ * InputListener - Invisible component that captures keyboard input
+ *
+ * Rendered by InputCapture trait via render_ui effect.
+ * Listens for keydown/keyup events and:
+ * 1. Updates the Input singleton entity
+ * 2. Emits INPUT:* events via event bus
+ *
+ * This follows the closed circuit pattern:
+ * Trait (render_ui) → Component (InputListener) → Events (INPUT:*) → Trait (state machine)
+ *
+ * @generated pattern component
+ */
+
+import { useEffect, useCallback } from 'react';
+import { useEventBus, type EventBusContextType } from '../../../hooks/useEventBus';
+import { updateSingleton, getSingleton, spawnEntity } from '../../../stores/entityStore';
+
+/**
+ * Input binding configuration
+ */
+export interface InputBinding {
+  /** Key code or key value (e.g., 'ArrowLeft', 'KeyA', 'Space') */
+  key: string;
+  /** Field name in the Input singleton (e.g., 'left', 'right', 'jump') */
+  field: string;
+  /** Optional custom event name (defaults to INPUT:{FIELD}_DOWN/UP) */
+  event?: string;
+}
+
+/**
+ * InputListener props
+ */
+export interface InputListenerProps {
+  /** Key bindings configuration */
+  bindings?: readonly InputBinding[];
+  /** Whether input listening is enabled */
+  enabled?: boolean;
+  /** Event bus for emitting events (optional, uses hook if not provided) */
+  eventBus?: EventBusContextType;
+}
+
+/**
+ * Default key bindings for platformer controls
+ */
+const DEFAULT_BINDINGS: InputBinding[] = [
+  { key: 'ArrowLeft', field: 'left' },
+  { key: 'KeyA', field: 'left' },
+  { key: 'ArrowRight', field: 'right' },
+  { key: 'KeyD', field: 'right' },
+  { key: 'ArrowUp', field: 'up' },
+  { key: 'KeyW', field: 'up' },
+  { key: 'ArrowDown', field: 'down' },
+  { key: 'KeyS', field: 'down' },
+  { key: 'Space', field: 'jump' },
+  { key: 'KeyZ', field: 'action' },
+];
+
+/**
+ * InputListener Component
+ *
+ * Invisible component that captures keyboard input and emits events.
+ * Designed to be rendered by the InputCapture trait via render_ui effect.
+ */
+export function InputListener({
+  bindings = DEFAULT_BINDINGS,
+  enabled = true,
+  eventBus: eventBusProp,
+}: InputListenerProps) {
+  // 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;
+
+  // Ensure Input singleton exists
+  useEffect(() => {
+    if (!enabled) return;
+
+    if (!getSingleton('Input')) {
+      spawnEntity({
+        id: 'input',
+        type: 'Input',
+        left: false,
+        right: false,
+        up: false,
+        down: false,
+        jump: false,
+        action: false,
+      });
+    }
+  }, [enabled]);
+
+  // Handle key down
+  const handleKeyDown = useCallback(
+    (e: KeyboardEvent) => {
+      if (!enabled) return;
+
+      const binding = bindings.find(b => b.key === e.code || b.key === e.key);
+      if (binding) {
+        e.preventDefault();
+
+        // Update Input singleton
+        updateSingleton('Input', { [binding.field]: true });
+
+        // Emit event
+        if (eventBus) {
+          const eventName = binding.event || `INPUT:${binding.field.toUpperCase()}_DOWN`;
+          eventBus.emit(eventName, { key: e.key, code: e.code, field: binding.field });
+        }
+      }
+    },
+    [bindings, enabled, eventBus]
+  );
+
+  // Handle key up
+  const handleKeyUp = useCallback(
+    (e: KeyboardEvent) => {
+      if (!enabled) return;
+
+      const binding = bindings.find(b => b.key === e.code || b.key === e.key);
+      if (binding) {
+        e.preventDefault();
+
+        // Update Input singleton
+        updateSingleton('Input', { [binding.field]: false });
+
+        // Emit event
+        if (eventBus) {
+          const eventName = binding.event
+            ? `${binding.event}_UP`
+            : `INPUT:${binding.field.toUpperCase()}_UP`;
+          eventBus.emit(eventName, { key: e.key, code: e.code, field: binding.field });
+        }
+      }
+    },
+    [bindings, enabled, eventBus]
+  );
+
+  // Attach event listeners
+  useEffect(() => {
+    if (!enabled) return;
+
+    window.addEventListener('keydown', handleKeyDown);
+    window.addEventListener('keyup', handleKeyUp);
+
+    return () => {
+      window.removeEventListener('keydown', handleKeyDown);
+      window.removeEventListener('keyup', handleKeyUp);
+    };
+  }, [enabled, handleKeyDown, handleKeyUp]);
+
+  // Invisible component - renders nothing
+  return null;
+}
+
+InputListener.displayName = 'InputListener';