// ============================================================ // Enba Recycling — Kullanıcı Profili (Profile Module) // ============================================================ function ProfileModule({ user, onUpdate }) { const [formData, setFormData] = React.useState({ name: user.name || "", email: user.email || "", phone: user.phone || "", bio: user.bio || "", avatar: user.avatar || "" }); const [status, setStatus] = React.useState({ loading: false, success: false }); const [isAnalyzing, setIsAnalyzing] = React.useState(false); // -- Interactive Crop States -- const [rawImage, setRawImage] = React.useState(null); // original image object const [showCropper, setShowCropper] = React.useState(false); const [cropPos, setCropPos] = React.useState({ x: 0, y: 0 }); const [zoom, setZoom] = React.useState(1); const [isDragging, setIsDragging] = React.useState(false); const [dragStart, setDragStart] = React.useState({ x: 0, y: 0 }); const handleFileChange = (e) => { const file = e.target.files[0]; if (!file) return; setIsAnalyzing(true); const reader = new FileReader(); reader.onload = (event) => { const img = new Image(); img.onload = () => { setRawImage(img); // Başlangıçta yine bir yüz tespiti dene (opsiyonel otomatik hizalama için) autoDetectInitialPos(img); }; img.src = event.target.result; }; reader.readAsDataURL(file); }; const autoDetectInitialPos = (img) => { if (!window.tracking || !window.tracking.ObjectTracker) { setCropPos({ x: 0, y: 0 }); setZoom(1); setShowCropper(true); return; } const tracker = new tracking.ObjectTracker('face'); const tempCanvas = document.createElement('canvas'); tempCanvas.width = img.width; tempCanvas.height = img.height; const tempCtx = tempCanvas.getContext('2d'); tempCtx.drawImage(img, 0, 0); tracker.on('track', (event) => { if (event.data.length > 0) { const face = event.data[0]; const scale = 300 / face.width / 2; // initial best guess zoom setZoom(Math.max(0.5, Math.min(3, scale))); setCropPos({ x: -(face.x + face.width/2) * scale + 150, y: -(face.y + face.height/2) * scale + 150 }); } else { const initZoom = 300 / Math.min(img.width, img.height); setZoom(initZoom); setCropPos({ x: 0, y: 0 }); } setIsAnalyzing(false); setShowCropper(true); }); tracking.track(tempCanvas, tracker); }; const handleMouseDown = (e) => { setIsDragging(true); setDragStart({ x: e.clientX - cropPos.x, y: e.clientY - cropPos.y }); }; const handleMouseMove = (e) => { if (!isDragging) return; setCropPos({ x: e.clientX - dragStart.x, y: e.clientY - dragStart.y }); }; const handleMouseUp = () => setIsDragging(false); const finalizeCrop = () => { const canvas = document.createElement('canvas'); canvas.width = 400; canvas.height = 400; const ctx = canvas.getContext('2d'); // Calculate source rectangle based on current visual state // Visual viewport is 300x300. Map to 400x400. // pos.x / zoom is original image coordinate ctx.fillStyle = '#fff'; ctx.fillRect(0,0,400,400); // DrawImage(img, sx, sy, sw, sh, dx, dy, dw, dh) // Bizim mantığımız: CSS'deki transform transform: translate(x,y) scale(z) // Canvas karşılığı: const drawScale = zoom * (400 / 300); ctx.drawImage(rawImage, 0, 0, rawImage.width, rawImage.height, cropPos.x * (400/300), cropPos.y * (400/300), rawImage.width * drawScale, rawImage.height * drawScale ); setFormData(prev => ({ ...prev, avatar: canvas.toDataURL('image/jpeg', 0.85) })); setShowCropper(false); }; const handleSave = (e) => { e.preventDefault(); setStatus({ loading: true, success: false }); setTimeout(() => { const allUsers = JSON.parse(localStorage.getItem('enba_users_data') || '[]'); const updatedUsers = allUsers.map(u => { if (u.id === user.id) { return { ...u, ...formData }; } return u; }); localStorage.setItem('enba_users_data', JSON.stringify(updatedUsers)); // Güncel kullanıcı objesini router'a bildir if (onUpdate) onUpdate({ ...user, ...formData }); setStatus({ loading: false, success: true }); setTimeout(() => setStatus(prev => ({ ...prev, success: false })), 3000); }, 800); }; return (
{/* Header */}

Profilim

Kişisel bilgilerinizi ve profil fotoğrafınızı yönetin.

KİŞİSEL HESAP
{/* Sol Taraf: Avatar */}
{formData.avatar ? ( ) : (
{formData.name.split(' ').map(n=>n[0]).join('')}
)} {isAnalyzing && (
ANALİZ EDİLİYOR...
)}
{/* Sağ Taraf: Form */}
setFormData({...formData, name: e.target.value})} required onFocus={window.selectOnFocus} />
setFormData({...formData, email: e.target.value})} onFocus={window.selectOnFocus} />
setFormData({...formData, phone: e.target.value})} placeholder="+90 5XX XXX XX XX" onFocus={window.selectOnFocus} />