@almadar/cli 0.3.1 → 0.3.3

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

@@ -0,0 +1,230 @@
+/**
+ * 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

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

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