@almadar/cli 1.0.6 → 1.0.7

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

@@ -1,241 +0,0 @@
-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

@@ -1,158 +0,0 @@
-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

@@ -1,161 +0,0 @@
-/**
- * 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';