405 lines
16 KiB
TypeScript
405 lines
16 KiB
TypeScript
'use client';
|
|
|
|
import { useState, useRef, useEffect } from 'react';
|
|
import { useRouter } from 'next/navigation';
|
|
import Card from '@/components/ui/Card';
|
|
import Button from '@/components/ui/Button';
|
|
import { Upload, Check, AlertTriangle, Car, RotateCw, Gamepad2 } from 'lucide-react';
|
|
|
|
interface DecalPosition {
|
|
id: string;
|
|
type: 'name' | 'number' | 'rank';
|
|
x: number;
|
|
y: number;
|
|
width: number;
|
|
height: number;
|
|
rotation: number;
|
|
}
|
|
|
|
interface GameOption {
|
|
id: string;
|
|
name: string;
|
|
}
|
|
|
|
interface CarOption {
|
|
id: string;
|
|
name: string;
|
|
manufacturer: string;
|
|
gameId: string;
|
|
}
|
|
|
|
// Mock data - in production these would come from API
|
|
const GAMES: GameOption[] = [
|
|
{ id: 'iracing', name: 'iRacing' },
|
|
{ id: 'acc', name: 'Assetto Corsa Competizione' },
|
|
{ id: 'ac', name: 'Assetto Corsa' },
|
|
{ id: 'rf2', name: 'rFactor 2' },
|
|
{ id: 'ams2', name: 'Automobilista 2' },
|
|
{ id: 'lmu', name: 'Le Mans Ultimate' },
|
|
];
|
|
|
|
const CARS: CarOption[] = [
|
|
// iRacing cars
|
|
{ id: 'ir-porsche-911-gt3r', name: '911 GT3 R', manufacturer: 'Porsche', gameId: 'iracing' },
|
|
{ id: 'ir-ferrari-296-gt3', name: '296 GT3', manufacturer: 'Ferrari', gameId: 'iracing' },
|
|
{ id: 'ir-bmw-m4-gt3', name: 'M4 GT3', manufacturer: 'BMW', gameId: 'iracing' },
|
|
{ id: 'ir-mercedes-amg-gt3', name: 'AMG GT3 Evo', manufacturer: 'Mercedes-AMG', gameId: 'iracing' },
|
|
{ id: 'ir-audi-r8-gt3', name: 'R8 LMS GT3 Evo II', manufacturer: 'Audi', gameId: 'iracing' },
|
|
{ id: 'ir-dallara-f3', name: 'F3', manufacturer: 'Dallara', gameId: 'iracing' },
|
|
{ id: 'ir-dallara-ir18', name: 'IR-18', manufacturer: 'Dallara', gameId: 'iracing' },
|
|
// ACC cars
|
|
{ id: 'acc-porsche-911-gt3r', name: '911 GT3 R', manufacturer: 'Porsche', gameId: 'acc' },
|
|
{ id: 'acc-ferrari-296-gt3', name: '296 GT3', manufacturer: 'Ferrari', gameId: 'acc' },
|
|
{ id: 'acc-bmw-m4-gt3', name: 'M4 GT3', manufacturer: 'BMW', gameId: 'acc' },
|
|
{ id: 'acc-mercedes-amg-gt3', name: 'AMG GT3 Evo', manufacturer: 'Mercedes-AMG', gameId: 'acc' },
|
|
{ id: 'acc-lamborghini-huracan-gt3', name: 'Huracán GT3 Evo2', manufacturer: 'Lamborghini', gameId: 'acc' },
|
|
{ id: 'acc-aston-martin-v8-gt3', name: 'V8 Vantage GT3', manufacturer: 'Aston Martin', gameId: 'acc' },
|
|
// AC cars
|
|
{ id: 'ac-porsche-911-gt3r', name: '911 GT3 R', manufacturer: 'Porsche', gameId: 'ac' },
|
|
{ id: 'ac-ferrari-488-gt3', name: '488 GT3', manufacturer: 'Ferrari', gameId: 'ac' },
|
|
{ id: 'ac-lotus-exos', name: 'Exos 125', manufacturer: 'Lotus', gameId: 'ac' },
|
|
// rFactor 2 cars
|
|
{ id: 'rf2-porsche-911-gt3r', name: '911 GT3 R', manufacturer: 'Porsche', gameId: 'rf2' },
|
|
{ id: 'rf2-bmw-m4-gt3', name: 'M4 GT3', manufacturer: 'BMW', gameId: 'rf2' },
|
|
// AMS2 cars
|
|
{ id: 'ams2-porsche-911-gt3r', name: '911 GT3 R', manufacturer: 'Porsche', gameId: 'ams2' },
|
|
{ id: 'ams2-mclaren-720s-gt3', name: '720S GT3', manufacturer: 'McLaren', gameId: 'ams2' },
|
|
// LMU cars
|
|
{ id: 'lmu-porsche-963', name: '963 LMDh', manufacturer: 'Porsche', gameId: 'lmu' },
|
|
{ id: 'lmu-ferrari-499p', name: '499P', manufacturer: 'Ferrari', gameId: 'lmu' },
|
|
{ id: 'lmu-toyota-gr010', name: 'GR010', manufacturer: 'Toyota', gameId: 'lmu' },
|
|
];
|
|
|
|
export default function LiveryUploadPage() {
|
|
const router = useRouter();
|
|
const fileInputRef = useRef<HTMLInputElement>(null);
|
|
const [uploadedFile, setUploadedFile] = useState<File | null>(null);
|
|
const [previewUrl, setPreviewUrl] = useState<string | null>(null);
|
|
const [selectedGame, setSelectedGame] = useState<string>('');
|
|
const [selectedCar, setSelectedCar] = useState<string>('');
|
|
const [filteredCars, setFilteredCars] = useState<CarOption[]>([]);
|
|
const [decals, setDecals] = useState<DecalPosition[]>([
|
|
{ id: 'name', type: 'name', x: 0.1, y: 0.8, width: 0.2, height: 0.05, rotation: 0 },
|
|
{ id: 'number', type: 'number', x: 0.8, y: 0.1, width: 0.15, height: 0.15, rotation: 0 },
|
|
{ id: 'rank', type: 'rank', x: 0.05, y: 0.1, width: 0.1, height: 0.1, rotation: 0 },
|
|
]);
|
|
const [activeDecal, setActiveDecal] = useState<string | null>(null);
|
|
const [submitting, setSubmitting] = useState(false);
|
|
|
|
// Filter cars when game changes
|
|
useEffect(() => {
|
|
if (selectedGame) {
|
|
const cars = CARS.filter(car => car.gameId === selectedGame);
|
|
setFilteredCars(cars);
|
|
setSelectedCar(''); // Reset car selection when game changes
|
|
} else {
|
|
setFilteredCars([]);
|
|
setSelectedCar('');
|
|
}
|
|
}, [selectedGame]);
|
|
|
|
const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
const file = e.target.files?.[0];
|
|
if (file) {
|
|
setUploadedFile(file);
|
|
const url = URL.createObjectURL(file);
|
|
setPreviewUrl(url);
|
|
}
|
|
};
|
|
|
|
const handleDrop = (e: React.DragEvent) => {
|
|
e.preventDefault();
|
|
const file = e.dataTransfer.files?.[0];
|
|
if (file) {
|
|
setUploadedFile(file);
|
|
const url = URL.createObjectURL(file);
|
|
setPreviewUrl(url);
|
|
}
|
|
};
|
|
|
|
const handleSubmit = async () => {
|
|
if (!uploadedFile || !selectedGame || !selectedCar) return;
|
|
|
|
setSubmitting(true);
|
|
|
|
try {
|
|
// Alpha: In-memory only
|
|
console.log('Livery upload:', {
|
|
file: uploadedFile.name,
|
|
gameId: selectedGame,
|
|
carId: selectedCar,
|
|
decals,
|
|
});
|
|
|
|
await new Promise(resolve => setTimeout(resolve, 1000));
|
|
|
|
alert('Livery uploaded successfully.');
|
|
router.push('/profile/liveries');
|
|
} catch (err) {
|
|
console.error('Upload failed:', err);
|
|
alert('Upload failed. Try again.');
|
|
} finally {
|
|
setSubmitting(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="max-w-4xl mx-auto py-12">
|
|
{/* Header */}
|
|
<div className="mb-8">
|
|
<div className="flex items-center gap-3 mb-4">
|
|
<div className="flex h-12 w-12 items-center justify-center rounded-xl bg-primary-blue/10">
|
|
<Upload className="w-6 h-6 text-primary-blue" />
|
|
</div>
|
|
<div>
|
|
<h1 className="text-2xl font-bold text-white">Upload Livery</h1>
|
|
<p className="text-sm text-gray-400">Add a new livery to your collection</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
|
{/* Upload Section */}
|
|
<Card>
|
|
<h2 className="text-lg font-semibold text-white mb-4">Livery File</h2>
|
|
|
|
{/* Game Selection */}
|
|
<div className="mb-4">
|
|
<label className="block text-sm font-medium text-gray-300 mb-2">
|
|
<div className="flex items-center gap-2">
|
|
<Gamepad2 className="w-4 h-4" />
|
|
Select Game
|
|
</div>
|
|
</label>
|
|
<select
|
|
value={selectedGame}
|
|
onChange={(e) => setSelectedGame(e.target.value)}
|
|
className="w-full rounded-lg border border-charcoal-outline bg-iron-gray px-3 py-2 text-sm text-white focus:border-primary-blue focus:outline-none"
|
|
>
|
|
<option value="">Choose a game...</option>
|
|
{GAMES.map((game) => (
|
|
<option key={game.id} value={game.id}>
|
|
{game.name}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
|
|
{/* Car Selection */}
|
|
<div className="mb-6">
|
|
<label className="block text-sm font-medium text-gray-300 mb-2">
|
|
<div className="flex items-center gap-2">
|
|
<Car className="w-4 h-4" />
|
|
Select Car
|
|
</div>
|
|
</label>
|
|
<select
|
|
value={selectedCar}
|
|
onChange={(e) => setSelectedCar(e.target.value)}
|
|
disabled={!selectedGame}
|
|
className="w-full rounded-lg border border-charcoal-outline bg-iron-gray px-3 py-2 text-sm text-white focus:border-primary-blue focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed"
|
|
>
|
|
<option value="">{selectedGame ? 'Choose a car...' : 'Select a game first...'}</option>
|
|
{filteredCars.map((car) => (
|
|
<option key={car.id} value={car.id}>
|
|
{car.manufacturer} {car.name}
|
|
</option>
|
|
))}
|
|
</select>
|
|
{selectedGame && filteredCars.length === 0 && (
|
|
<p className="text-xs text-gray-500 mt-1">No cars available for this game</p>
|
|
)}
|
|
</div>
|
|
|
|
{/* File Upload */}
|
|
<div
|
|
onClick={() => fileInputRef.current?.click()}
|
|
onDrop={handleDrop}
|
|
onDragOver={(e) => e.preventDefault()}
|
|
className={`border-2 border-dashed rounded-lg p-8 text-center cursor-pointer transition-colors ${
|
|
previewUrl
|
|
? 'border-performance-green/50 bg-performance-green/5'
|
|
: 'border-charcoal-outline hover:border-primary-blue/50 hover:bg-primary-blue/5'
|
|
}`}
|
|
>
|
|
<input
|
|
ref={fileInputRef}
|
|
type="file"
|
|
accept=".png,.dds"
|
|
onChange={handleFileChange}
|
|
className="hidden"
|
|
/>
|
|
|
|
{previewUrl ? (
|
|
<div className="space-y-3">
|
|
<Check className="w-12 h-12 text-performance-green mx-auto" />
|
|
<p className="text-sm text-white font-medium">{uploadedFile?.name}</p>
|
|
<p className="text-xs text-gray-500">Click to replace</p>
|
|
</div>
|
|
) : (
|
|
<div className="space-y-3">
|
|
<Upload className="w-12 h-12 text-gray-500 mx-auto" />
|
|
<p className="text-sm text-gray-400">
|
|
Drop your livery here or click to browse
|
|
</p>
|
|
<p className="text-xs text-gray-500">PNG or DDS, max 5MB</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Validation Warning */}
|
|
<div className="mt-4 p-3 rounded-lg bg-warning-amber/10 border border-warning-amber/30">
|
|
<div className="flex items-start gap-2">
|
|
<AlertTriangle className="w-4 h-4 text-warning-amber shrink-0 mt-0.5" />
|
|
<p className="text-xs text-gray-400">
|
|
<strong className="text-warning-amber">No logos or text allowed.</strong>{' '}
|
|
Your base livery must be clean. Sponsor logos are added by league admins.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
|
|
{/* Decal Editor */}
|
|
<Card>
|
|
<h2 className="text-lg font-semibold text-white mb-4">Position Decals</h2>
|
|
<p className="text-sm text-gray-400 mb-4">
|
|
Drag to position your driver name, number, and rank badge.
|
|
</p>
|
|
|
|
{/* Preview Canvas */}
|
|
<div className="relative aspect-video bg-deep-graphite rounded-lg border border-charcoal-outline overflow-hidden mb-4">
|
|
{previewUrl ? (
|
|
<img
|
|
src={previewUrl}
|
|
alt="Livery preview"
|
|
className="w-full h-full object-cover"
|
|
/>
|
|
) : (
|
|
<div className="w-full h-full flex items-center justify-center">
|
|
<Car className="w-20 h-20 text-gray-600" />
|
|
</div>
|
|
)}
|
|
|
|
{/* Decal Placeholders */}
|
|
{decals.map((decal) => (
|
|
<div
|
|
key={decal.id}
|
|
onClick={() => setActiveDecal(decal.id === activeDecal ? null : decal.id)}
|
|
className={`absolute cursor-move border-2 rounded flex items-center justify-center text-xs font-medium transition-all ${
|
|
activeDecal === decal.id
|
|
? 'border-primary-blue bg-primary-blue/20 text-primary-blue'
|
|
: 'border-white/30 bg-black/30 text-white/70'
|
|
}`}
|
|
style={{
|
|
left: `${decal.x * 100}%`,
|
|
top: `${decal.y * 100}%`,
|
|
width: `${decal.width * 100}%`,
|
|
height: `${decal.height * 100}%`,
|
|
transform: `rotate(${decal.rotation}deg)`,
|
|
}}
|
|
>
|
|
{decal.type === 'name' && 'NAME'}
|
|
{decal.type === 'number' && '#'}
|
|
{decal.type === 'rank' && 'RANK'}
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
{/* Decal Controls */}
|
|
<div className="grid grid-cols-3 gap-3">
|
|
{decals.map((decal) => (
|
|
<button
|
|
key={decal.id}
|
|
onClick={() => setActiveDecal(decal.id === activeDecal ? null : decal.id)}
|
|
className={`p-3 rounded-lg border text-center transition-all ${
|
|
activeDecal === decal.id
|
|
? 'border-primary-blue bg-primary-blue/10 text-primary-blue'
|
|
: 'border-charcoal-outline bg-iron-gray/30 text-gray-400 hover:border-primary-blue/50'
|
|
}`}
|
|
>
|
|
<div className="text-xs font-medium capitalize mb-1">{decal.type}</div>
|
|
<div className="text-xs text-gray-500">
|
|
{Math.round(decal.x * 100)}%, {Math.round(decal.y * 100)}%
|
|
</div>
|
|
<div className="text-xs text-gray-600">
|
|
{decal.rotation}°
|
|
</div>
|
|
</button>
|
|
))}
|
|
</div>
|
|
|
|
{/* Rotation Controls */}
|
|
{activeDecal && (
|
|
<div className="mt-4 p-3 rounded-lg bg-iron-gray/50 border border-charcoal-outline">
|
|
<div className="flex items-center justify-between mb-2">
|
|
<span className="text-xs font-medium text-gray-300 capitalize">
|
|
{decals.find(d => d.id === activeDecal)?.type} Rotation
|
|
</span>
|
|
<span className="text-xs text-gray-500">
|
|
{decals.find(d => d.id === activeDecal)?.rotation}°
|
|
</span>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<input
|
|
type="range"
|
|
min="0"
|
|
max="360"
|
|
step="15"
|
|
value={decals.find(d => d.id === activeDecal)?.rotation ?? 0}
|
|
onChange={(e) => {
|
|
const rotation = parseInt(e.target.value, 10);
|
|
setDecals(decals.map(d =>
|
|
d.id === activeDecal ? { ...d, rotation } : d
|
|
));
|
|
}}
|
|
className="flex-1 h-2 bg-charcoal-outline rounded-lg appearance-none cursor-pointer accent-primary-blue"
|
|
/>
|
|
<button
|
|
onClick={() => {
|
|
setDecals(decals.map(d =>
|
|
d.id === activeDecal ? { ...d, rotation: (d.rotation + 90) % 360 } : d
|
|
));
|
|
}}
|
|
className="p-2 rounded-lg border border-charcoal-outline bg-iron-gray/30 hover:bg-iron-gray/50 transition-colors"
|
|
title="Rotate 90°"
|
|
>
|
|
<RotateCw className="w-4 h-4 text-gray-400" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
<p className="text-xs text-gray-500 mt-4">
|
|
Click a decal above, then drag on preview to reposition. Use the slider or button to rotate.
|
|
</p>
|
|
</Card>
|
|
</div>
|
|
|
|
{/* Actions */}
|
|
<div className="mt-6 flex gap-3">
|
|
<Button
|
|
variant="primary"
|
|
onClick={handleSubmit}
|
|
disabled={!uploadedFile || !selectedGame || !selectedCar || submitting}
|
|
>
|
|
{submitting ? 'Uploading...' : 'Upload Livery'}
|
|
</Button>
|
|
<Button
|
|
variant="secondary"
|
|
onClick={() => router.back()}
|
|
disabled={submitting}
|
|
>
|
|
Cancel
|
|
</Button>
|
|
</div>
|
|
|
|
{/* Alpha Notice */}
|
|
<div className="mt-6 rounded-lg bg-warning-amber/10 border border-warning-amber/30 p-4">
|
|
<p className="text-xs text-gray-400">
|
|
<strong className="text-warning-amber">Alpha Note:</strong> Livery upload is demonstration-only.
|
|
Decal positioning and image validation are not functional in this preview.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
} |