@almadar/cli 1.0.5 → 1.0.7

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

@@ -1,230 +0,0 @@
-/**
- * InventoryPanel Component
- *
- * Grid-based inventory UI with item selection and tooltips.
- */
-
-import React, { useState, useCallback } from 'react';
-import { cn } from '../../../lib/cn';
-
-export interface InventoryItem {
-  id: string;
-  type: string;
-  quantity: number;
-  sprite?: string;
-  name?: string;
-  description?: string;
-}
-
-export interface InventoryPanelProps {
-  /** Array of items in inventory */
-  items: InventoryItem[];
-  /** Total number of slots */
-  slots: number;
-  /** Number of columns in grid */
-  columns: number;
-  /** Currently selected slot index */
-  selectedSlot?: number;
-  /** Called when a slot is selected */
-  onSelectSlot: (index: number) => void;
-  /** Called when an item is used (double-click or Enter) */
-  onUseItem?: (item: InventoryItem) => void;
-  /** Called when an item is dropped */
-  onDropItem?: (item: InventoryItem) => void;
-  /** Show item tooltips on hover */
-  showTooltips?: boolean;
-  /** Optional className */
-  className?: string;
-  /** Slot size in pixels */
-  slotSize?: number;
-}
-
-/**
- * Inventory panel component with grid layout
- *
- * @example
- * ```tsx
- * <InventoryPanel
- *   items={playerInventory}
- *   slots={20}
- *   columns={5}
- *   selectedSlot={selectedSlot}
- *   onSelectSlot={setSelectedSlot}
- *   onUseItem={(item) => console.log('Used:', item.name)}
- *   showTooltips
- * />
- * ```
- */
-export function InventoryPanel({
-  items,
-  slots,
-  columns,
-  selectedSlot,
-  onSelectSlot,
-  onUseItem,
-  onDropItem,
-  showTooltips = true,
-  className,
-  slotSize = 48,
-}: InventoryPanelProps): JSX.Element {
-  const [hoveredSlot, setHoveredSlot] = useState<number | null>(null);
-  const [tooltipPosition, setTooltipPosition] = useState({ x: 0, y: 0 });
-
-  // Create slot array with items mapped to indices
-  const slotArray = Array.from({ length: slots }, (_, index) => {
-    return items[index] ?? null;
-  });
-
-  const rows = Math.ceil(slots / columns);
-
-  const handleSlotClick = useCallback((index: number) => {
-    onSelectSlot(index);
-  }, [onSelectSlot]);
-
-  const handleSlotDoubleClick = useCallback((index: number) => {
-    const item = slotArray[index];
-    if (item && onUseItem) {
-      onUseItem(item);
-    }
-  }, [slotArray, onUseItem]);
-
-  const handleKeyDown = useCallback((e: React.KeyboardEvent, index: number) => {
-    const item = slotArray[index];
-
-    switch (e.key) {
-      case 'Enter':
-      case ' ':
-        if (item && onUseItem) {
-          e.preventDefault();
-          onUseItem(item);
-        }
-        break;
-      case 'Delete':
-      case 'Backspace':
-        if (item && onDropItem) {
-          e.preventDefault();
-          onDropItem(item);
-        }
-        break;
-      case 'ArrowRight':
-        e.preventDefault();
-        onSelectSlot(Math.min(index + 1, slots - 1));
-        break;
-      case 'ArrowLeft':
-        e.preventDefault();
-        onSelectSlot(Math.max(index - 1, 0));
-        break;
-      case 'ArrowDown':
-        e.preventDefault();
-        onSelectSlot(Math.min(index + columns, slots - 1));
-        break;
-      case 'ArrowUp':
-        e.preventDefault();
-        onSelectSlot(Math.max(index - columns, 0));
-        break;
-    }
-  }, [slotArray, onUseItem, onDropItem, onSelectSlot, columns, slots]);
-
-  const handleMouseEnter = useCallback((e: React.MouseEvent, index: number) => {
-    if (showTooltips && slotArray[index]) {
-      setHoveredSlot(index);
-      setTooltipPosition({
-        x: e.clientX + 10,
-        y: e.clientY + 10,
-      });
-    }
-  }, [showTooltips, slotArray]);
-
-  const handleMouseLeave = useCallback(() => {
-    setHoveredSlot(null);
-  }, []);
-
-  const hoveredItem = hoveredSlot !== null ? slotArray[hoveredSlot] : null;
-
-  return (
-    <div className={cn('relative', className)}>
-      {/* Inventory Grid */}
-      <div
-        className="grid gap-1 bg-gray-900 p-2 rounded-lg border border-gray-700"
-        style={{
-          gridTemplateColumns: `repeat(${columns}, ${slotSize}px)`,
-          gridTemplateRows: `repeat(${rows}, ${slotSize}px)`,
-        }}
-      >
-        {slotArray.map((item, index) => (
-          <button
-            key={index}
-            type="button"
-            className={cn(
-              'relative flex items-center justify-center',
-              'bg-gray-800 border rounded transition-colors',
-              'hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500',
-              selectedSlot === index
-                ? 'border-yellow-400 bg-gray-700'
-                : 'border-gray-600'
-            )}
-            style={{ width: slotSize, height: slotSize }}
-            onClick={() => handleSlotClick(index)}
-            onDoubleClick={() => handleSlotDoubleClick(index)}
-            onKeyDown={(e) => handleKeyDown(e, index)}
-            onMouseEnter={(e) => handleMouseEnter(e, index)}
-            onMouseLeave={handleMouseLeave}
-            tabIndex={0}
-            aria-label={item ? `${item.name || item.type}, quantity: ${item.quantity}` : `Empty slot ${index + 1}`}
-          >
-            {item && (
-              <>
-                {/* Item sprite or placeholder */}
-                {item.sprite ? (
-                  <img
-                    src={item.sprite}
-                    alt={item.name || item.type}
-                    className="w-8 h-8 object-contain"
-                    style={{ imageRendering: 'pixelated' }}
-                  />
-                ) : (
-                  <div className="w-8 h-8 bg-gray-600 rounded flex items-center justify-center text-xs text-gray-300">
-                    {item.type.charAt(0).toUpperCase()}
-                  </div>
-                )}
-
-                {/* Quantity badge */}
-                {item.quantity > 1 && (
-                  <span className="absolute bottom-0 right-0 bg-black bg-opacity-70 text-white text-xs px-1 rounded-tl">
-                    {item.quantity}
-                  </span>
-                )}
-              </>
-            )}
-          </button>
-        ))}
-      </div>
-
-      {/* Tooltip */}
-      {showTooltips && hoveredItem && (
-        <div
-          className="fixed z-50 bg-gray-900 border border-gray-600 rounded-lg p-2 shadow-lg pointer-events-none"
-          style={{
-            left: tooltipPosition.x,
-            top: tooltipPosition.y,
-            maxWidth: 200,
-          }}
-        >
-          <div className="font-semibold text-white">
-            {hoveredItem.name || hoveredItem.type}
-          </div>
-          {hoveredItem.description && (
-            <div className="text-sm text-gray-400 mt-1">
-              {hoveredItem.description}
-            </div>
-          )}
-          <div className="text-xs text-gray-500 mt-1">
-            Quantity: {hoveredItem.quantity}
-          </div>
-        </div>
-      )}
-    </div>
-  );
-}
-
-export default InventoryPanel;

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

@@ -1,236 +0,0 @@
-import * as React from 'react';
-import { useNavigate } from 'react-router-dom';
-import { cn } from '../../../lib/cn';
-
-export interface LevelData {
-  /** Unique level identifier */
-  id: string;
-  /** Level ID (alternative to id) */
-  levelId?: string;
-  /** Level number */
-  number?: number;
-  /** Level name/title */
-  name?: string;
-  /** Stars earned (0-3) */
-  stars?: number;
-  /** Difficulty level */
-  difficulty?: 'easy' | 'medium' | 'hard' | string;
-  /** Whether the level is locked */
-  isLocked?: boolean;
-  /** Best score on this level */
-  bestScore?: number;
-  /** Thumbnail image URL */
-  thumbnail?: string;
-  /** Allow additional properties from schema */
-  [key: string]: unknown;
-}
-
-export interface LevelFieldDisplay {
-  /** Field name */
-  field?: string;
-  /** Display type */
-  display?: 'title' | 'number' | 'stars' | 'locked' | 'thumbnail' | string;
-}
-
-export interface LevelSelectProps {
-  /** Level data */
-  levels?: LevelData[];
-  /** Entity name (schema config) */
-  entity?: string;
-  /** Layout variant */
-  layout?: 'grid' | 'list' | 'carousel' | string;
-  /** Fields to display per level */
-  fields?: LevelFieldDisplay[];
-  /** Event to emit on selection (schema config) */
-  selectEvent?: string;
-  /** Called when a level is selected */
-  onSelect?: (level: LevelData) => void;
-  /** Path to navigate to on selection. Supports :id, :levelId, :number placeholders */
-  navigatesTo?: string;
-  /** Currently selected level ID */
-  selectedId?: string;
-  /** Maximum stars possible per level */
-  maxStars?: number;
-  /** Additional CSS classes */
-  className?: string;
-  /** Title above the level grid */
-  title?: string;
-}
-
-function StarRating({ stars, max = 3 }: { stars: number; max?: number }) {
-  return (
-    <div className="flex gap-1">
-      {Array.from({ length: max }).map((_, i) => (
-        <span
-          key={i}
-          className={cn(
-            'text-lg transition-colors',
-            i < stars ? 'text-yellow-400' : 'text-gray-600'
-          )}
-        >
-          ★
-        </span>
-      ))}
-    </div>
-  );
-}
-
-function LevelCard({
-  level,
-  fields,
-  maxStars,
-  selected,
-  onSelect,
-}: {
-  level: LevelData;
-  fields: LevelFieldDisplay[];
-  maxStars: number;
-  selected: boolean;
-  onSelect: () => void;
-}) {
-  const showNumber = fields.some((f) => f.display === 'number' || f.field === 'number');
-  const showStars = fields.some((f) => f.display === 'stars' || f.field === 'stars' || f.field === 'difficulty');
-  const showTitle = fields.some((f) => f.display === 'title' || f.field === 'name' || f.field === 'title');
-  const showThumbnail = fields.some((f) => f.display === 'thumbnail' || f.field === 'thumbnail');
-
-  return (
-    <button
-      onClick={onSelect}
-      disabled={level.isLocked}
-      className={cn(
-        'relative flex flex-col items-center justify-center',
-        'w-24 h-24 rounded-xl border-2',
-        'transition-all duration-200',
-        'focus:outline-none focus:ring-4 focus:ring-blue-500/50',
-        level.isLocked
-          ? 'bg-gray-800 border-gray-700 opacity-50 cursor-not-allowed'
-          : selected
-          ? 'bg-blue-600 border-blue-400 scale-110 shadow-lg shadow-blue-500/25'
-          : 'bg-gray-700 border-gray-600 hover:bg-gray-600 hover:scale-105'
-      )}
-    >
-      {/* Lock Icon */}
-      {level.isLocked && (
-        <div className="absolute inset-0 flex items-center justify-center bg-black/50 rounded-xl">
-          <span className="text-3xl">🔒</span>
-        </div>
-      )}
-
-      {/* Thumbnail Background */}
-      {showThumbnail && level.thumbnail && (
-        <div
-          className="absolute inset-0 rounded-xl bg-cover bg-center opacity-50"
-          style={{ backgroundImage: `url(${level.thumbnail})` }}
-        />
-      )}
-
-      {/* Level Number */}
-      {showNumber && (
-        <span className="text-3xl font-bold text-white z-10">
-          {level.number}
-        </span>
-      )}
-
-      {/* Level Name */}
-      {showTitle && level.name && (
-        <span className="text-xs text-gray-300 mt-1 truncate max-w-full px-2 z-10">
-          {level.name}
-        </span>
-      )}
-
-      {/* Stars */}
-      {showStars && !level.isLocked && (
-        <div className="absolute -bottom-1 left-1/2 -translate-x-1/2">
-          <StarRating stars={level.stars ?? 0} max={maxStars} />
-        </div>
-      )}
-    </button>
-  );
-}
-
-export function LevelSelect({
-  levels = [],
-  entity: _entity,
-  layout = 'grid',
-  fields = [{ field: 'number', display: 'number' }],
-  selectEvent: _selectEvent,
-  onSelect = () => {},
-  navigatesTo,
-  selectedId,
-  maxStars = 3,
-  className,
-  title,
-}: LevelSelectProps) {
-  const navigate = useNavigate();
-
-  const handleLevelSelect = React.useCallback(
-    (level: LevelData) => {
-      // Call the onSelect callback first
-      onSelect(level);
-
-      // Handle navigation if navigatesTo is specified
-      if (navigatesTo) {
-        const levelId = level.id || level.levelId || String(level.number);
-        const path = navigatesTo
-          .replace(':id', levelId)
-          .replace(':levelId', level.levelId || levelId)
-          .replace(':number', String(level.number ?? ''));
-        navigate(path);
-      }
-    },
-    [onSelect, navigatesTo, navigate]
-  );
-
-  const layoutClasses: Record<string, string> = {
-    grid: 'grid grid-cols-4 md:grid-cols-6 lg:grid-cols-8 gap-4',
-    list: 'flex flex-col gap-2',
-    carousel: 'flex gap-4 overflow-x-auto pb-4 snap-x snap-mandatory',
-  };
-
-  return (
-    <div
-      className={cn(
-        'min-h-screen w-full flex flex-col items-center p-8',
-        'bg-gradient-to-b from-gray-900 to-gray-950',
-        className
-      )}
-    >
-      {/* Title */}
-      {title && (
-        <h1 className="text-4xl font-bold text-white mb-8 tracking-tight">
-          {title}
-        </h1>
-      )}
-
-      {/* Level Grid */}
-      <div className={cn('w-full max-w-4xl', layoutClasses[layout] || layoutClasses.grid)}>
-        {levels.map((level) => {
-          const levelKey = level.id || level.levelId || String(level.number);
-          return (
-            <div
-              key={levelKey}
-              className={layout === 'carousel' ? 'snap-center flex-shrink-0' : ''}
-            >
-              <LevelCard
-                level={level}
-                fields={fields as LevelFieldDisplay[]}
-                maxStars={maxStars}
-                selected={selectedId === levelKey}
-                onSelect={() => !level.isLocked && handleLevelSelect(level)}
-              />
-            </div>
-          );
-        })}
-      </div>
-
-      {/* Navigation hint */}
-      {layout === 'carousel' && (
-        <p className="mt-4 text-gray-500 text-sm">
-          Swipe to browse levels
-        </p>
-      )}
-    </div>
-  );
-}
-
-LevelSelect.displayName = 'LevelSelect';

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

@@ -1,233 +0,0 @@
-/**
- * TilemapRenderer Component
- *
- * Canvas-based tilemap renderer with culling and parallax support.
- */
-
-import React, { useEffect, useRef, useCallback } from 'react';
-
-export interface TileLayer {
-  name: string;
-  data: number[];
-  width: number;
-  height: number;
-  visible?: boolean;
-}
-
-export interface Tileset {
-  url: string;
-  tileWidth: number;
-  tileHeight: number;
-  columns: number;
-}
-
-export interface ParallaxConfig {
-  layer: string;
-  factor: number; // 0.5 = half speed, 1 = normal, 2 = double speed
-}
-
-export interface TilemapRendererProps {
-  /** Tile layers to render */
-  layers: TileLayer[];
-  /** Tileset configuration */
-  tileset: Tileset;
-  /** Camera position */
-  camera: { x: number; y: number };
-  /** Viewport width in pixels */
-  viewportWidth: number;
-  /** Viewport height in pixels */
-  viewportHeight: number;
-  /** Enable pixel art rendering (no smoothing) */
-  pixelArt?: boolean;
-  /** Parallax configuration per layer */
-  parallaxLayers?: ParallaxConfig[];
-  /** Optional className */
-  className?: string;
-  /** Scale factor for rendering */
-  scale?: number;
-  /** Show debug grid */
-  debug?: boolean;
-}
-
-/**
- * Tilemap renderer component with efficient canvas-based rendering
- *
- * @example
- * ```tsx
- * <TilemapRenderer
- *   layers={levelData.layers}
- *   tileset={{
- *     url: '/tilesets/terrain.png',
- *     tileWidth: 16,
- *     tileHeight: 16,
- *     columns: 16
- *   }}
- *   camera={{ x: playerX - 160, y: playerY - 120 }}
- *   viewportWidth={320}
- *   viewportHeight={240}
- *   pixelArt
- *   scale={2}
- * />
- * ```
- */
-export function TilemapRenderer({
-  layers,
-  tileset,
-  camera,
-  viewportWidth,
-  viewportHeight,
-  pixelArt = true,
-  parallaxLayers = [],
-  className,
-  scale = 1,
-  debug = false,
-}: TilemapRendererProps): JSX.Element {
-  const canvasRef = useRef<HTMLCanvasElement>(null);
-  const tilesetImageRef = useRef<HTMLImageElement | null>(null);
-  const tilesetLoadedRef = useRef(false);
-
-  // Load tileset image
-  useEffect(() => {
-    const img = new Image();
-    img.onload = () => {
-      tilesetImageRef.current = img;
-      tilesetLoadedRef.current = true;
-    };
-    img.onerror = () => {
-      console.error(`Failed to load tileset: ${tileset.url}`);
-    };
-    img.src = tileset.url;
-
-    return () => {
-      tilesetImageRef.current = null;
-      tilesetLoadedRef.current = false;
-    };
-  }, [tileset.url]);
-
-  // Get parallax factor for a layer
-  const getParallaxFactor = useCallback((layerName: string): number => {
-    const config = parallaxLayers.find(p => p.layer === layerName);
-    return config?.factor ?? 1;
-  }, [parallaxLayers]);
-
-  // Render tilemap
-  const render = useCallback(() => {
-    const canvas = canvasRef.current;
-    const tilesetImage = tilesetImageRef.current;
-    if (!canvas || !tilesetImage || !tilesetLoadedRef.current) return;
-
-    const ctx = canvas.getContext('2d');
-    if (!ctx) return;
-
-    // Configure rendering
-    ctx.imageSmoothingEnabled = !pixelArt;
-
-    // Clear canvas
-    ctx.clearRect(0, 0, canvas.width, canvas.height);
-
-    // Apply scale
-    ctx.save();
-    ctx.scale(scale, scale);
-
-    // Render each visible layer
-    for (const layer of layers) {
-      if (layer.visible === false) continue;
-
-      const parallaxFactor = getParallaxFactor(layer.name);
-      const offsetX = camera.x * parallaxFactor;
-      const offsetY = camera.y * parallaxFactor;
-
-      // Calculate visible tile range (with some padding for smooth scrolling)
-      const startTileX = Math.max(0, Math.floor(offsetX / tileset.tileWidth) - 1);
-      const startTileY = Math.max(0, Math.floor(offsetY / tileset.tileHeight) - 1);
-      const endTileX = Math.min(
-        layer.width,
-        Math.ceil((offsetX + viewportWidth / scale) / tileset.tileWidth) + 1
-      );
-      const endTileY = Math.min(
-        layer.height,
-        Math.ceil((offsetY + viewportHeight / scale) / tileset.tileHeight) + 1
-      );
-
-      // Render visible tiles
-      for (let y = startTileY; y < endTileY; y++) {
-        for (let x = startTileX; x < endTileX; x++) {
-          const tileIndex = y * layer.width + x;
-          const tileId = layer.data[tileIndex];
-
-          // Skip empty tiles (ID 0)
-          if (tileId === 0) continue;
-
-          // Calculate source position in tileset (tileId is 1-based in Tiled)
-          const adjustedTileId = tileId - 1;
-          const srcX = (adjustedTileId % tileset.columns) * tileset.tileWidth;
-          const srcY = Math.floor(adjustedTileId / tileset.columns) * tileset.tileHeight;
-
-          // Calculate destination position
-          const destX = x * tileset.tileWidth - offsetX;
-          const destY = y * tileset.tileHeight - offsetY;
-
-          // Draw tile
-          ctx.drawImage(
-            tilesetImage,
-            srcX,
-            srcY,
-            tileset.tileWidth,
-            tileset.tileHeight,
-            destX,
-            destY,
-            tileset.tileWidth,
-            tileset.tileHeight
-          );
-        }
-      }
-
-      // Debug: draw grid
-      if (debug) {
-        ctx.strokeStyle = 'rgba(255, 0, 0, 0.3)';
-        ctx.lineWidth = 1 / scale;
-
-        for (let y = startTileY; y <= endTileY; y++) {
-          for (let x = startTileX; x <= endTileX; x++) {
-            const destX = x * tileset.tileWidth - offsetX;
-            const destY = y * tileset.tileHeight - offsetY;
-            ctx.strokeRect(destX, destY, tileset.tileWidth, tileset.tileHeight);
-          }
-        }
-      }
-    }
-
-    ctx.restore();
-  }, [layers, tileset, camera, viewportWidth, viewportHeight, pixelArt, scale, debug, getParallaxFactor]);
-
-  // Re-render when dependencies change
-  useEffect(() => {
-    render();
-  }, [render]);
-
-  // Also re-render when tileset loads
-  useEffect(() => {
-    const checkAndRender = () => {
-      if (tilesetLoadedRef.current) {
-        render();
-      } else {
-        requestAnimationFrame(checkAndRender);
-      }
-    };
-    checkAndRender();
-  }, [render]);
-
-  return (
-    <canvas
-      ref={canvasRef}
-      width={viewportWidth}
-      height={viewportHeight}
-      className={className}
-      style={{
-        imageRendering: pixelArt ? 'pixelated' : 'auto',
-      }}
-    />
-  );
-}
-
-export default TilemapRenderer;