@almadar/cli 1.0.5 → 1.0.7

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

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

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

@@ -1,188 +0,0 @@
-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";