417 lines
15 KiB
TypeScript
417 lines
15 KiB
TypeScript
'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>
|
|
);
|
|
} |