@almadar/cli 0.3.2 → 0.3.3

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

@@ -0,0 +1,173 @@
+import * as React from "react";
+import { cn } from "../../../lib/cn";
+import { DPad, type DPadDirection } from "../../molecules/game/DPad";
+import {
+  ActionButtons,
+  type ActionButtonConfig,
+} from "../../molecules/game/ActionButtons";
+import { ControlButton } from "../../atoms/game/ControlButton";
+
+export interface GameControl {
+  /** Unique identifier */
+  id?: string;
+  /** Alias for id (schema compatibility) */
+  key?: string;
+  /** Event to emit on press */
+  event: string;
+  /** Display label */
+  label?: string;
+  /** Icon component or emoji */
+  icon?: React.ReactNode;
+  /** Button variant */
+  variant?: "primary" | "secondary" | "ghost" | string;
+}
+
+export interface GameControlsProps {
+  /** Control layout type */
+  layout: "dpad" | "joystick" | "buttons" | "custom" | string;
+  /** Position on screen */
+  position: "bottom-left" | "bottom-right" | "bottom-center" | "split" | string;
+  /** Controls to display - accepts readonly for compatibility with generated const arrays */
+  controls?: readonly GameControl[];
+  /** Called when control is pressed/released */
+  onControl?: (event: string, pressed: boolean) => void;
+  /** Size variant */
+  size?: "sm" | "md" | "lg";
+  /** Additional CSS classes */
+  className?: string;
+  /** Whether controls are visible */
+  visible?: boolean;
+  /** Opacity when visible */
+  opacity?: number;
+}
+
+/** Resolve control id, supporting both id and key aliases */
+const resolveControlId = (control: GameControl): string =>
+  control.id ?? control.key ?? control.event;
+
+const positionMap: Record<string, string> = {
+  "bottom-left": "absolute bottom-4 left-4",
+  "bottom-right": "absolute bottom-4 right-4",
+  "bottom-center": "absolute bottom-4 left-1/2 -translate-x-1/2",
+  split: "absolute bottom-4 left-0 right-0 flex justify-between px-4",
+};
+
+export function GameControls({
+  layout,
+  position,
+  controls = [],
+  onControl = () => {},
+  size = "md",
+  className,
+  visible = true,
+  opacity = 0.9,
+}: GameControlsProps) {
+  if (!visible) return null;
+
+  // Direction mapping for DPad
+  const directionToEvent: Record<DPadDirection, string | undefined> = {
+    up: controls.find((c) => resolveControlId(c) === "up")?.event,
+    down: controls.find((c) => resolveControlId(c) === "down")?.event,
+    left: controls.find((c) => resolveControlId(c) === "left")?.event,
+    right: controls.find((c) => resolveControlId(c) === "right")?.event,
+  };
+
+  const handleDirection = (direction: DPadDirection, pressed: boolean) => {
+    const event = directionToEvent[direction];
+    if (event) {
+      onControl(event, pressed);
+    }
+  };
+
+  // Separate directional and action controls
+  const directionControls = controls.filter((c) =>
+    ["up", "down", "left", "right"].includes(resolveControlId(c)),
+  );
+  const actionControls = controls.filter(
+    (c) => !["up", "down", "left", "right"].includes(resolveControlId(c)),
+  );
+
+  // Split layout: DPad on left, actions on right
+  if (position === "split") {
+    return (
+      <div className={cn(positionMap[position], className)} style={{ opacity }}>
+        {/* Left side: DPad or direction buttons */}
+        {layout === "dpad" && directionControls.length > 0 ? (
+          <DPad size={size} onDirection={handleDirection} />
+        ) : (
+          <div className="flex gap-2">
+            {directionControls.map((control) => (
+              <ControlButton
+                key={resolveControlId(control)}
+                icon={control.icon}
+                label={control.label}
+                size={size}
+                variant={control.variant ?? "secondary"}
+                onPress={() => onControl(control.event, true)}
+                onRelease={() => onControl(control.event, false)}
+              />
+            ))}
+          </div>
+        )}
+
+        {/* Right side: Action buttons */}
+        <ActionButtons
+          buttons={actionControls.map((c) => ({
+            id: resolveControlId(c),
+            label: c.label,
+            icon: c.icon,
+            variant: c.variant,
+          }))}
+          onAction={(id, pressed) => {
+            const control = actionControls.find(
+              (c) => resolveControlId(c) === id,
+            );
+            if (control) onControl(control.event, pressed);
+          }}
+          layout={actionControls.length === 4 ? "diamond" : "horizontal"}
+          size={size}
+        />
+      </div>
+    );
+  }
+
+  // Non-split layouts
+  if (layout === "dpad") {
+    return (
+      <div className={cn(positionMap[position], className)} style={{ opacity }}>
+        <DPad size={size} onDirection={handleDirection} />
+      </div>
+    );
+  }
+
+  if (layout === "buttons" || layout === "custom") {
+    return (
+      <div className={cn(positionMap[position], className)} style={{ opacity }}>
+        <div className="flex gap-2 flex-wrap">
+          {controls.map((control) => (
+            <ControlButton
+              key={resolveControlId(control)}
+              icon={control.icon}
+              label={control.label}
+              size={size}
+              variant={control.variant ?? "secondary"}
+              onPress={() => onControl(control.event, true)}
+              onRelease={() => onControl(control.event, false)}
+            />
+          ))}
+        </div>
+      </div>
+    );
+  }
+
+  // Joystick layout (future: implement virtual joystick)
+  return (
+    <div className={cn(positionMap[position], className)} style={{ opacity }}>
+      <div className="w-24 h-24 rounded-full bg-gray-700/50 border-4 border-gray-600 flex items-center justify-center">
+        <div className="w-12 h-12 rounded-full bg-gray-500" />
+      </div>
+    </div>
+  );
+}
+
+GameControls.displayName = "GameControls";

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

@@ -0,0 +1,135 @@
+import * as React from "react";
+import { cn } from "../../../lib/cn";
+import { StatBadge, type StatBadgeProps } from "../../molecules/game/StatBadge";
+
+export interface GameHudStat extends Omit<StatBadgeProps, "size"> {
+  /** Data source entity name */
+  source?: string;
+  /** Field name in the source */
+  field?: string;
+}
+
+/**
+ * Schema-style HUD element definition.
+ * Used when elements are passed from schema render_ui effects.
+ */
+export interface GameHudElement {
+  type: string;
+  bind?: string;
+  position?: string;
+  label?: string;
+}
+
+export interface GameHudProps {
+  /** Position of the HUD */
+  position?: "top" | "bottom" | "corners" | string;
+  /** Stats to display - accepts readonly for compatibility with generated const arrays */
+  stats?: readonly GameHudStat[];
+  /** Alias for stats (schema compatibility) */
+  items?: readonly GameHudStat[];
+  /**
+   * Schema-style elements array (alternative to stats).
+   * Converted to stats internally for backwards compatibility.
+   */
+  elements?: readonly GameHudElement[];
+  /** Size variant */
+  size?: "sm" | "md" | "lg";
+  /** Additional CSS classes */
+  className?: string;
+  /** Whether to use a semi-transparent background */
+  transparent?: boolean;
+}
+
+const positionMap: Record<string, string> = {
+  top: "top-0 left-0 right-0 flex justify-between items-start p-4",
+  bottom: "bottom-0 left-0 right-0 flex justify-between items-end p-4",
+  corners: "inset-0 pointer-events-none",
+};
+
+/**
+ * Convert schema-style elements to GameHudStat format.
+ */
+function convertElementsToStats(
+  elements: readonly GameHudElement[],
+): GameHudStat[] {
+  return elements.map((el) => {
+    // Parse bind format: "entity.field" -> source + field
+    const [source, field] = el.bind?.split(".") ?? [];
+
+    // Map element type to stat label
+    const labelMap: Record<string, string> = {
+      "health-bar": "Health",
+      "score-display": "Score",
+      lives: "Lives",
+      timer: "Time",
+    };
+
+    return {
+      label: el.label || labelMap[el.type] || el.type,
+      source,
+      field,
+    };
+  });
+}
+
+export function GameHud({
+  position: propPosition,
+  stats: propStats,
+  items,
+  elements,
+  size = "md",
+  className,
+  transparent = true,
+}: GameHudProps) {
+  // Convert elements to stats if provided, with items as alias for stats
+  const stats =
+    propStats ?? items ?? (elements ? convertElementsToStats(elements) : []);
+
+  // Determine position from props or derive from elements
+  const position = propPosition ?? "corners";
+
+  if (position === "corners") {
+    // Split stats between corners
+    const leftStats = stats.slice(0, Math.ceil(stats.length / 2));
+    const rightStats = stats.slice(Math.ceil(stats.length / 2));
+
+    return (
+      <div className={cn("absolute", positionMap[position], className)}>
+        {/* Top-left */}
+        <div className="absolute top-4 left-4 flex flex-col gap-2 pointer-events-auto">
+          {leftStats.map((stat, i) => (
+            <StatBadge key={i} {...stat} size={size} />
+          ))}
+        </div>
+
+        {/* Top-right */}
+        <div className="absolute top-4 right-4 flex flex-col gap-2 items-end pointer-events-auto">
+          {rightStats.map((stat, i) => (
+            <StatBadge key={i} {...stat} size={size} />
+          ))}
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className={cn(
+        "absolute z-10",
+        positionMap[position],
+        transparent && "bg-gradient-to-b from-black/50 to-transparent",
+        position === "bottom" &&
+          "bg-gradient-to-t from-black/50 to-transparent",
+        className,
+      )}
+    >
+      <div className="flex gap-4">
+        {stats.map((stat, i) => (
+          <StatBadge key={i} {...stat} size={size} />
+        ))}
+      </div>
+    </div>
+  );
+}
+
+GameHud.displayName = "GameHud";

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

@@ -0,0 +1,188 @@
+import * as React from "react";
+import { useNavigate } from "react-router-dom";
+import { cn } from "../../../lib/cn";
+import {
+  useEventBus,
+  type EventBusContextType,
+} from "../../../hooks/useEventBus";
+
+export interface MenuOption {
+  /** Optional ID (generated from index if not provided) */
+  id?: string;
+  /** Display label */
+  label: string;
+  /** Event to emit on click */
+  event?: string;
+  /** Page to navigate to */
+  navigatesTo?: string;
+  /** Button variant */
+  variant?: "primary" | "secondary" | "ghost" | string;
+  /** Whether the option is disabled */
+  disabled?: boolean;
+  /** Sub-label or description */
+  subLabel?: string;
+  /** Action identifier (alternative to event) */
+  action?: string;
+}
+
+export interface GameMenuProps {
+  /** Menu title */
+  title: string;
+  /** Optional subtitle or version */
+  subtitle?: string;
+  /** Menu options - accepts readonly for compatibility with generated const arrays */
+  options?: readonly MenuOption[];
+  /** Alias for options (schema compatibility) */
+  menuItems?: readonly MenuOption[];
+  /** Called when an option is selected (legacy callback, prefer event bus) */
+  onSelect?: (option: MenuOption) => void;
+  /** Event bus for emitting UI events (optional, uses hook if not provided) */
+  eventBus?: EventBusContextType;
+  /** Background image or gradient */
+  background?: string;
+  /** Logo image URL */
+  logo?: string;
+  /** Additional CSS classes */
+  className?: string;
+}
+
+const variantMap = {
+  primary:
+    "bg-blue-600 hover:bg-blue-500 text-white border-blue-400 shadow-lg shadow-blue-500/25",
+  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",
+};
+
+/**
+ * Safe navigation hook that works outside Router context.
+ * Returns a no-op function if not in Router context.
+ */
+function useSafeNavigate(): (to: string) => void {
+  try {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const navigate = useNavigate();
+    return navigate;
+  } catch {
+    // Outside Router context - return no-op
+    return () => {};
+  }
+}
+
+export function GameMenu({
+  title,
+  subtitle,
+  options,
+  menuItems,
+  onSelect,
+  eventBus: eventBusProp,
+  background,
+  logo,
+  className,
+}: GameMenuProps) {
+  // Resolve alias: menuItems → options
+  const resolvedOptions = options ?? menuItems ?? [];
+  const navigate = useSafeNavigate();
+
+  // 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: MenuOption) => {
+      // 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);
+      }
+
+      // Handle navigation if navigatesTo is specified
+      if (option.navigatesTo) {
+        navigate(option.navigatesTo);
+      }
+    },
+    [eventBus, onSelect, navigate],
+  );
+
+  return (
+    <div
+      className={cn(
+        "min-h-screen w-full flex flex-col items-center justify-center p-8",
+        className,
+      )}
+      style={{
+        background:
+          background ??
+          "linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f0e17 100%)",
+      }}
+    >
+      {/* Logo/Title Section */}
+      <div className="text-center mb-12 animate-fade-in">
+        {logo && (
+          <img
+            src={logo}
+            alt={title}
+            className="h-24 w-auto mx-auto mb-6 drop-shadow-2xl"
+          />
+        )}
+        <h1
+          className="text-5xl md:text-7xl font-bold text-white tracking-tight"
+          style={{
+            textShadow: "0 4px 12px rgba(0,0,0,0.5)",
+          }}
+        >
+          {title}
+        </h1>
+        {subtitle && (
+          <p className="mt-2 text-lg text-gray-400 tracking-widest uppercase">
+            {subtitle}
+          </p>
+        )}
+      </div>
+
+      {/* Menu Options */}
+      <div className="flex flex-col gap-4 w-full max-w-md">
+        {resolvedOptions.map((option, index) => (
+          <button
+            key={index}
+            onClick={() => handleOptionClick(option)}
+            disabled={option.disabled}
+            className={cn(
+              "w-full py-4 px-8 rounded-xl border-2 font-bold text-lg",
+              "transition-all duration-200 transform",
+              "hover:scale-105 active:scale-95",
+              "focus:outline-none focus:ring-4 focus:ring-white/25",
+              variantMap[
+                (option.variant ?? "secondary") as keyof typeof variantMap
+              ] ?? variantMap.secondary,
+              option.disabled &&
+                "opacity-50 cursor-not-allowed hover:scale-100",
+            )}
+            style={{
+              animationDelay: `${index * 100}ms`,
+            }}
+          >
+            {option.label}
+          </button>
+        ))}
+      </div>
+
+      {/* Decorative Elements */}
+      <div className="absolute inset-0 pointer-events-none overflow-hidden">
+        <div className="absolute top-1/4 left-1/4 w-64 h-64 bg-blue-500/10 rounded-full blur-3xl" />
+        <div className="absolute bottom-1/4 right-1/4 w-96 h-96 bg-purple-500/10 rounded-full blur-3xl" />
+      </div>
+    </div>
+  );
+}
+
+GameMenu.displayName = "GameMenu";