● EDITING PROFILE
CHANGES NOT SAVED
{draftAvatar && (
)}
setDraftName(e.target.value)}
maxLength={40}
style={{
display: 'block', width: '100%', marginTop: 8,
background: 'transparent', border: 0, borderBottom: '2px solid rgba(255,255,255,0.3)',
color: '#fff', fontFamily: 'Archivo', fontWeight: 700, fontSize: 24,
padding: '8px 0', outline: 'none',
}}
onFocus={(e) => e.target.style.borderBottomColor = 'var(--accent)'}
onBlur={(e) => e.target.style.borderBottomColor = 'rgba(255,255,255,0.3)'}
/>
{draftName.length}/40
{email}
{errorMsg && (
{errorMsg}
)}
);
}
// ===== Avatar crop modal =====
// Canvas-based drag + zoom. Confirm renders a 256x256 JPEG data URL.
function AvatarCropModal({ file, onCancel, onConfirm }) {
const [img, setImg] = React.useState(null); // HTMLImageElement
const [imgError, setImgError] = React.useState(null);
const [scale, setScale] = React.useState(1); // relative to "fit to crop box"
const [offset, setOffset] = React.useState({ x: 0, y: 0 }); // image center offset from crop center, in screen px
const canvasRef = React.useRef(null);
const previewRef = React.useRef(null);
const dragRef = React.useRef(null);
const CROP_DISPLAY_SIZE = 300; // on-screen crop square (the white frame in canvas)
const OUTPUT_SIZE = 256; // final exported avatar size
// Load the file.
React.useEffect(() => {
const reader = new FileReader();
reader.onload = () => {
const image = new Image();
image.onload = () => setImg(image);
image.onerror = () => setImgError('Could not read that image.');
image.src = reader.result;
};
reader.onerror = () => setImgError('Could not read that file.');
reader.readAsDataURL(file);
}, [file]);
// Compute the "fit" scale so the shorter side of the image equals the crop box.
const baseFit = React.useMemo(() => {
if (!img) return 1;
const minSide = Math.min(img.width, img.height);
return CROP_DISPLAY_SIZE / minSide;
}, [img]);
// Clamp offset so the image always covers the crop box.
const clampOffset = React.useCallback((ox, oy, s) => {
if (!img) return { x: ox, y: oy };
const displayedW = img.width * baseFit * s;
const displayedH = img.height * baseFit * s;
const maxX = Math.max(0, (displayedW - CROP_DISPLAY_SIZE) / 2);
const maxY = Math.max(0, (displayedH - CROP_DISPLAY_SIZE) / 2);
return {
x: Math.max(-maxX, Math.min(maxX, ox)),
y: Math.max(-maxY, Math.min(maxY, oy)),
};
}, [img, baseFit]);
// Draw to canvas + live round preview.
React.useEffect(() => {
if (!img) return;
const canvas = canvasRef.current;
const preview = previewRef.current;
if (!canvas) return;
const dpr = window.devicePixelRatio || 1;
const cw = CROP_DISPLAY_SIZE + 80;
const ch = CROP_DISPLAY_SIZE + 80;
canvas.width = cw * dpr;
canvas.height = ch * dpr;
canvas.style.width = cw + 'px';
canvas.style.height = ch + 'px';
const ctx = canvas.getContext('2d');
ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
ctx.fillStyle = '#0a0a0a';
ctx.fillRect(0, 0, cw, ch);
const displayedW = img.width * baseFit * scale;
const displayedH = img.height * baseFit * scale;
const cx = cw / 2 + offset.x;
const cy = ch / 2 + offset.y;
ctx.drawImage(img, cx - displayedW / 2, cy - displayedH / 2, displayedW, displayedH);
// Dim outside the crop square.
const cropX = (cw - CROP_DISPLAY_SIZE) / 2;
const cropY = (ch - CROP_DISPLAY_SIZE) / 2;
ctx.fillStyle = 'rgba(10,10,10,0.7)';
ctx.fillRect(0, 0, cw, cropY);
ctx.fillRect(0, cropY + CROP_DISPLAY_SIZE, cw, cropY);
ctx.fillRect(0, cropY, cropX, CROP_DISPLAY_SIZE);
ctx.fillRect(cropX + CROP_DISPLAY_SIZE, cropY, cropX, CROP_DISPLAY_SIZE);
// Crop frame.
ctx.strokeStyle = '#fff';
ctx.lineWidth = 1.5;
ctx.strokeRect(cropX + 0.75, cropY + 0.75, CROP_DISPLAY_SIZE - 1.5, CROP_DISPLAY_SIZE - 1.5);
// Live preview (round): re-render just the crop area.
if (preview) {
const psize = 120;
preview.width = psize * dpr;
preview.height = psize * dpr;
preview.style.width = psize + 'px';
preview.style.height = psize + 'px';
const pctx = preview.getContext('2d');
pctx.setTransform(dpr, 0, 0, dpr, 0, 0);
pctx.clearRect(0, 0, psize, psize);
const ratio = psize / CROP_DISPLAY_SIZE;
const cxP = psize / 2 + offset.x * ratio;
const cyP = psize / 2 + offset.y * ratio;
pctx.drawImage(img, cxP - (displayedW * ratio) / 2, cyP - (displayedH * ratio) / 2, displayedW * ratio, displayedH * ratio);
}
}, [img, baseFit, scale, offset]);
const onMouseDown = (e) => {
dragRef.current = { startX: e.clientX, startY: e.clientY, ox: offset.x, oy: offset.y };
};
const onMouseMove = (e) => {
if (!dragRef.current) return;
const dx = e.clientX - dragRef.current.startX;
const dy = e.clientY - dragRef.current.startY;
setOffset(clampOffset(dragRef.current.ox + dx, dragRef.current.oy + dy, scale));
};
const onMouseUp = () => { dragRef.current = null; };
React.useEffect(() => {
const up = () => { dragRef.current = null; };
window.addEventListener('mouseup', up);
return () => window.removeEventListener('mouseup', up);
}, []);
const onWheel = (e) => {
e.preventDefault();
const delta = -e.deltaY * 0.002;
const next = Math.max(1, Math.min(4, scale + delta));
setScale(next);
setOffset(o => clampOffset(o.x, o.y, next));
};
const changeScale = (next) => {
const s = Math.max(1, Math.min(4, next));
setScale(s);
setOffset(o => clampOffset(o.x, o.y, s));
};
const confirm = () => {
if (!img) return;
const out = document.createElement('canvas');
out.width = OUTPUT_SIZE;
out.height = OUTPUT_SIZE;
const ctx = out.getContext('2d');
ctx.fillStyle = '#000';
ctx.fillRect(0, 0, OUTPUT_SIZE, OUTPUT_SIZE);
// Map the on-screen crop box back to source image pixels.
// displayedW corresponds to img.width on-canvas; source pixel per display px = 1 / (baseFit * scale)
const srcPerDisplay = 1 / (baseFit * scale);
const srcCropSize = CROP_DISPLAY_SIZE * srcPerDisplay;
// Image center on canvas is cw/2 + offset.x. Crop center on canvas is cw/2. Difference (-offset) maps to src units.
const srcCenterX = img.width / 2 - offset.x * srcPerDisplay;
const srcCenterY = img.height / 2 - offset.y * srcPerDisplay;
const srcX = srcCenterX - srcCropSize / 2;
const srcY = srcCenterY - srcCropSize / 2;
ctx.drawImage(img, srcX, srcY, srcCropSize, srcCropSize, 0, 0, OUTPUT_SIZE, OUTPUT_SIZE);
// Try progressively more aggressive quality until we fit under 200 KB.
let quality = 0.9;
let dataUrl = out.toDataURL('image/jpeg', quality);
while (dataUrlBytes(dataUrl) > 180 * 1024 && quality > 0.4) {
quality -= 0.1;
dataUrl = out.toDataURL('image/jpeg', quality);
}
onConfirm(dataUrl);
};
return (