wip

apps/website/components/leagues/LeagueDecalPlacementEditor.tsx

@@ -0,0 +1,417 @@
+'use client';
+
+import { useState, useRef, useCallback } from 'react';
+import Card from '@/components/ui/Card';
+import Button from '@/components/ui/Button';
+import { 
+  Move, 
+  RotateCw, 
+  ZoomIn, 
+  ZoomOut, 
+  Save, 
+  Trash2,
+  Plus,
+  Image,
+  Target
+} from 'lucide-react';
+
+interface DecalPlacement {
+  id: string;
+  sponsorType: 'main' | 'secondary-1' | 'secondary-2';
+  sponsorName: string;
+  x: number; // 0-1 normalized
+  y: number; // 0-1 normalized
+  width: number; // 0-1 normalized
+  height: number; // 0-1 normalized
+  rotation: number; // 0-360 degrees
+}
+
+interface LeagueDecalPlacementEditorProps {
+  leagueId: string;
+  seasonId: string;
+  carId: string;
+  carName: string;
+  baseImageUrl?: string;
+  existingPlacements?: DecalPlacement[];
+  onSave?: (placements: DecalPlacement[]) => void;
+}
+
+const DEFAULT_PLACEMENTS: Omit<DecalPlacement, 'id'>[] = [
+  {
+    sponsorType: 'main',
+    sponsorName: 'Main Sponsor',
+    x: 0.3,
+    y: 0.15,
+    width: 0.4,
+    height: 0.15,
+    rotation: 0,
+  },
+  {
+    sponsorType: 'secondary-1',
+    sponsorName: 'Secondary Sponsor 1',
+    x: 0.05,
+    y: 0.5,
+    width: 0.15,
+    height: 0.1,
+    rotation: 0,
+  },
+  {
+    sponsorType: 'secondary-2',
+    sponsorName: 'Secondary Sponsor 2',
+    x: 0.8,
+    y: 0.5,
+    width: 0.15,
+    height: 0.1,
+    rotation: 0,
+  },
+];
+
+export default function LeagueDecalPlacementEditor({
+  leagueId,
+  seasonId,
+  carId,
+  carName,
+  baseImageUrl,
+  existingPlacements,
+  onSave,
+}: LeagueDecalPlacementEditorProps) {
+  const canvasRef = useRef<HTMLDivElement>(null);
+  const [placements, setPlacements] = useState<DecalPlacement[]>(
+    existingPlacements ?? DEFAULT_PLACEMENTS.map((p, i) => ({ ...p, id: `decal-${i}` }))
+  );
+  const [selectedDecal, setSelectedDecal] = useState<string | null>(null);
+  const [isDragging, setIsDragging] = useState(false);
+  const [zoom, setZoom] = useState(1);
+  const [saving, setSaving] = useState(false);
+
+  const selectedPlacement = placements.find(p => p.id === selectedDecal);
+
+  const handleDecalClick = (id: string) => {
+    setSelectedDecal(id === selectedDecal ? null : id);
+  };
+
+  const updatePlacement = useCallback((id: string, updates: Partial<DecalPlacement>) => {
+    setPlacements(prev => prev.map(p => 
+      p.id === id ? { ...p, ...updates } : p
+    ));
+  }, []);
+
+  const handleMouseDown = (e: React.MouseEvent, decalId: string) => {
+    e.stopPropagation();
+    setSelectedDecal(decalId);
+    setIsDragging(true);
+  };
+
+  const handleMouseMove = useCallback((e: React.MouseEvent) => {
+    if (!isDragging || !selectedDecal || !canvasRef.current) return;
+
+    const rect = canvasRef.current.getBoundingClientRect();
+    const x = (e.clientX - rect.left) / rect.width;
+    const y = (e.clientY - rect.top) / rect.height;
+
+    // Clamp to canvas bounds
+    const clampedX = Math.max(0, Math.min(1, x));
+    const clampedY = Math.max(0, Math.min(1, y));
+
+    updatePlacement(selectedDecal, { x: clampedX, y: clampedY });
+  }, [isDragging, selectedDecal, updatePlacement]);
+
+  const handleMouseUp = () => {
+    setIsDragging(false);
+  };
+
+  const handleRotate = (id: string, delta: number) => {
+    const placement = placements.find(p => p.id === id);
+    if (placement) {
+      const newRotation = (placement.rotation + delta + 360) % 360;
+      updatePlacement(id, { rotation: newRotation });
+    }
+  };
+
+  const handleResize = (id: string, scaleFactor: number) => {
+    const placement = placements.find(p => p.id === id);
+    if (placement) {
+      const newWidth = Math.max(0.05, Math.min(0.5, placement.width * scaleFactor));
+      const newHeight = Math.max(0.03, Math.min(0.3, placement.height * scaleFactor));
+      updatePlacement(id, { width: newWidth, height: newHeight });
+    }
+  };
+
+  const handleSave = async () => {
+    setSaving(true);
+    try {
+      // Alpha: In-memory save simulation
+      console.log('Saving decal placements:', {
+        leagueId,
+        seasonId,
+        carId,
+        placements,
+      });
+      await new Promise(resolve => setTimeout(resolve, 500));
+      onSave?.(placements);
+      alert('Decal placements saved successfully.');
+    } catch (err) {
+      console.error('Save failed:', err);
+      alert('Failed to save placements.');
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const getSponsorTypeColor = (type: DecalPlacement['sponsorType']) => {
+    switch (type) {
+      case 'main':
+        return { border: 'border-primary-blue', bg: 'bg-primary-blue/20', text: 'text-primary-blue' };
+      case 'secondary-1':
+        return { border: 'border-purple-500', bg: 'bg-purple-500/20', text: 'text-purple-400' };
+      case 'secondary-2':
+        return { border: 'border-purple-500', bg: 'bg-purple-500/20', text: 'text-purple-400' };
+    }
+  };
+
+  return (
+    <div className="space-y-6">
+      {/* Header */}
+      <div className="flex items-center justify-between">
+        <div>
+          <h3 className="text-lg font-semibold text-white">{carName}</h3>
+          <p className="text-sm text-gray-400">Position sponsor decals on this car's template</p>
+        </div>
+        <div className="flex items-center gap-2">
+          <Button
+            variant="secondary"
+            onClick={() => setZoom(z => Math.max(0.5, z - 0.25))}
+            disabled={zoom <= 0.5}
+          >
+            <ZoomOut className="w-4 h-4" />
+          </Button>
+          <span className="text-sm text-gray-400 min-w-[3rem] text-center">{Math.round(zoom * 100)}%</span>
+          <Button
+            variant="secondary"
+            onClick={() => setZoom(z => Math.min(2, z + 0.25))}
+            disabled={zoom >= 2}
+          >
+            <ZoomIn className="w-4 h-4" />
+          </Button>
+        </div>
+      </div>
+
+      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+        {/* Canvas */}
+        <div className="lg:col-span-2">
+          <div 
+            ref={canvasRef}
+            className="relative aspect-video bg-deep-graphite rounded-lg border border-charcoal-outline overflow-hidden cursor-crosshair"
+            style={{ transform: `scale(${zoom})`, transformOrigin: 'top left' }}
+            onMouseMove={handleMouseMove}
+            onMouseUp={handleMouseUp}
+            onMouseLeave={handleMouseUp}
+          >
+            {/* Base Image or Placeholder */}
+            {baseImageUrl ? (
+              <img
+                src={baseImageUrl}
+                alt="Livery template"
+                className="w-full h-full object-cover"
+                draggable={false}
+              />
+            ) : (
+              <div className="w-full h-full flex flex-col items-center justify-center">
+                <Image className="w-16 h-16 text-gray-600 mb-2" />
+                <p className="text-sm text-gray-500">No base template uploaded</p>
+                <p className="text-xs text-gray-600">Upload a template image first</p>
+              </div>
+            )}
+
+            {/* Decal Placeholders */}
+            {placements.map((placement) => {
+              const colors = getSponsorTypeColor(placement.sponsorType);
+              return (
+                <div
+                  key={placement.id}
+                  onMouseDown={(e) => handleMouseDown(e, placement.id)}
+                  onClick={() => handleDecalClick(placement.id)}
+                  className={`absolute cursor-move border-2 rounded flex items-center justify-center text-xs font-medium transition-all ${
+                    selectedDecal === placement.id
+                      ? `${colors.border} ${colors.bg} ${colors.text} shadow-lg`
+                      : `${colors.border} ${colors.bg} ${colors.text} opacity-70 hover:opacity-100`
+                  }`}
+                  style={{
+                    left: `${placement.x * 100}%`,
+                    top: `${placement.y * 100}%`,
+                    width: `${placement.width * 100}%`,
+                    height: `${placement.height * 100}%`,
+                    transform: `translate(-50%, -50%) rotate(${placement.rotation}deg)`,
+                  }}
+                >
+                  <div className="text-center truncate px-1">
+                    <div className="text-[10px] uppercase tracking-wide opacity-70">
+                      {placement.sponsorType === 'main' ? 'Main' : 'Secondary'}
+                    </div>
+                    <div className="truncate">{placement.sponsorName}</div>
+                  </div>
+                  
+                  {/* Drag handle indicator */}
+                  {selectedDecal === placement.id && (
+                    <div className="absolute -top-1 -left-1 w-3 h-3 bg-white rounded-full border-2 border-primary-blue" />
+                  )}
+                </div>
+              );
+            })}
+
+            {/* Grid overlay when dragging */}
+            {isDragging && (
+              <div className="absolute inset-0 pointer-events-none">
+                <div className="w-full h-full" style={{
+                  backgroundImage: 'linear-gradient(to right, rgba(255,255,255,0.05) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,0.05) 1px, transparent 1px)',
+                  backgroundSize: '10% 10%',
+                }} />
+              </div>
+            )}
+          </div>
+
+          <p className="text-xs text-gray-500 mt-2">
+            Click a decal to select it, then drag to reposition. Use controls on the right to adjust size and rotation.
+          </p>
+        </div>
+
+        {/* Controls Panel */}
+        <div className="space-y-4">
+          {/* Decal List */}
+          <Card className="p-4">
+            <h4 className="text-sm font-semibold text-white mb-3">Sponsor Slots</h4>
+            <div className="space-y-2">
+              {placements.map((placement) => {
+                const colors = getSponsorTypeColor(placement.sponsorType);
+                return (
+                  <button
+                    key={placement.id}
+                    onClick={() => setSelectedDecal(placement.id)}
+                    className={`w-full p-3 rounded-lg border text-left transition-all ${
+                      selectedDecal === placement.id
+                        ? `${colors.border} ${colors.bg}`
+                        : 'border-charcoal-outline bg-iron-gray/30 hover:bg-iron-gray/50'
+                    }`}
+                  >
+                    <div className="flex items-center justify-between">
+                      <div>
+                        <div className={`text-xs font-medium uppercase ${colors.text}`}>
+                          {placement.sponsorType === 'main' ? 'Main Sponsor' : `Secondary ${placement.sponsorType.split('-')[1]}`}
+                        </div>
+                        <div className="text-xs text-gray-500 mt-0.5">
+                          {Math.round(placement.x * 100)}%, {Math.round(placement.y * 100)}% • {placement.rotation}°
+                        </div>
+                      </div>
+                      <Target className={`w-4 h-4 ${selectedDecal === placement.id ? colors.text : 'text-gray-500'}`} />
+                    </div>
+                  </button>
+                );
+              })}
+            </div>
+          </Card>
+
+          {/* Selected Decal Controls */}
+          {selectedPlacement && (
+            <Card className="p-4">
+              <h4 className="text-sm font-semibold text-white mb-3">Adjust Selected</h4>
+              
+              {/* Position */}
+              <div className="mb-4">
+                <label className="block text-xs text-gray-400 mb-2">Position</label>
+                <div className="grid grid-cols-2 gap-2">
+                  <div>
+                    <label className="block text-xs text-gray-500 mb-1">X</label>
+                    <input
+                      type="range"
+                      min="0"
+                      max="100"
+                      value={selectedPlacement.x * 100}
+                      onChange={(e) => updatePlacement(selectedPlacement.id, { x: parseInt(e.target.value) / 100 })}
+                      className="w-full h-2 bg-charcoal-outline rounded-lg appearance-none cursor-pointer accent-primary-blue"
+                    />
+                  </div>
+                  <div>
+                    <label className="block text-xs text-gray-500 mb-1">Y</label>
+                    <input
+                      type="range"
+                      min="0"
+                      max="100"
+                      value={selectedPlacement.y * 100}
+                      onChange={(e) => updatePlacement(selectedPlacement.id, { y: parseInt(e.target.value) / 100 })}
+                      className="w-full h-2 bg-charcoal-outline rounded-lg appearance-none cursor-pointer accent-primary-blue"
+                    />
+                  </div>
+                </div>
+              </div>
+
+              {/* Size */}
+              <div className="mb-4">
+                <label className="block text-xs text-gray-400 mb-2">Size</label>
+                <div className="flex gap-2">
+                  <Button
+                    variant="secondary"
+                    onClick={() => handleResize(selectedPlacement.id, 0.9)}
+                    className="flex-1"
+                  >
+                    <ZoomOut className="w-4 h-4 mr-1" />
+                    Smaller
+                  </Button>
+                  <Button
+                    variant="secondary"
+                    onClick={() => handleResize(selectedPlacement.id, 1.1)}
+                    className="flex-1"
+                  >
+                    <ZoomIn className="w-4 h-4 mr-1" />
+                    Larger
+                  </Button>
+                </div>
+              </div>
+
+              {/* Rotation */}
+              <div className="mb-4">
+                <label className="block text-xs text-gray-400 mb-2">Rotation: {selectedPlacement.rotation}°</label>
+                <div className="flex items-center gap-2">
+                  <input
+                    type="range"
+                    min="0"
+                    max="360"
+                    step="15"
+                    value={selectedPlacement.rotation}
+                    onChange={(e) => updatePlacement(selectedPlacement.id, { rotation: parseInt(e.target.value) })}
+                    className="flex-1 h-2 bg-charcoal-outline rounded-lg appearance-none cursor-pointer accent-primary-blue"
+                  />
+                  <Button
+                    variant="secondary"
+                    onClick={() => handleRotate(selectedPlacement.id, 90)}
+                    className="px-2"
+                  >
+                    <RotateCw className="w-4 h-4" />
+                  </Button>
+                </div>
+              </div>
+            </Card>
+          )}
+
+          {/* Save Button */}
+          <Button
+            variant="primary"
+            onClick={handleSave}
+            disabled={saving}
+            className="w-full"
+          >
+            <Save className="w-4 h-4 mr-2" />
+            {saving ? 'Saving...' : 'Save Placements'}
+          </Button>
+
+          {/* Help Text */}
+          <div className="p-3 rounded-lg bg-iron-gray/30 border border-charcoal-outline/50">
+            <p className="text-xs text-gray-500">
+              <strong className="text-gray-400">Tip:</strong> Main sponsor gets the largest, most prominent placement.
+              Secondary sponsors get smaller positions. These decals will be burned onto all driver liveries.
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}