/* global React */
const { useState, useRef, useEffect } = React;
/* =========================================================
STICKERS — original SVG primitives (no branded mascots)
========================================================= */
window.Star = function Star({ size = 80, fill = '#ff5a3c', stroke = '#0c0c0c' }) {
const points = [];
const cx = 50, cy = 50;
for (let i = 0; i < 16; i++) {
const a = (i / 16) * Math.PI * 2 - Math.PI / 2;
const r = i % 2 === 0 ? 48 : 22;
points.push(`${cx + Math.cos(a) * r},${cy + Math.sin(a) * r}`);
}
return (
);
};
window.Smiley = function Smiley({ size = 64, fill = '#ffd34a', stroke = '#0c0c0c' }) {
return (
);
};
window.Flower = function Flower({ size = 70, fill = '#5ec6ff', stroke = '#0c0c0c' }) {
const petals = [];
for (let i = 0; i < 5; i++) {
const a = (i / 5) * Math.PI * 2 - Math.PI / 2;
petals.push();
}
return (
);
};
window.Butterfly = function Butterfly({ size = 78, fill = '#ff8fb0', stroke = '#0c0c0c' }) {
return (
);
};
window.Heart = function Heart({ size = 60, fill = '#ff5a3c', stroke = '#0c0c0c' }) {
return (
);
};
window.Squiggle = function Squiggle({ width = 120, color = '#ff5a3c' }) {
return (
);
};
window.Arrow = function Arrow({ width = 110, color = '#0c0c0c' }) {
return (
);
};
window.Burst = function Burst({ size = 110, fill = '#ff5a3c', stroke = '#0c0c0c', spikes = 14 }) {
const points = [];
const cx = 50, cy = 50;
for (let i = 0; i < spikes * 2; i++) {
const a = (i / (spikes * 2)) * Math.PI * 2 - Math.PI / 2;
const r = i % 2 === 0 ? 46 : 28;
points.push(`${cx + Math.cos(a) * r},${cy + Math.sin(a) * r}`);
}
return (
);
};
window.PaperClip = function PaperClip({ size = 70, color = '#0c0c0c' }) {
return (
);
};
/* Photo silhouette for the ID card — not anyone in particular */
window.PortraitGlyph = function PortraitGlyph() {
return (
);
};
/* Project thumbnails (abstract, original) */
window.ProjThumb = function ProjThumb({ kind, palette }) {
const [a, b, c] = palette;
if (kind === 'queue') {
return (
);
}
if (kind === 'resume') {
return (
);
}
if (kind === 'mac') {
return (
);
}
if (kind === 'browser') {
return (
);
}
if (kind === 'ml') {
return (
);
}
if (kind === 'menubar') {
return (
);
}
// default: abstract code
return (
);
};
/* =========================================================
STICKER — draggable wrapper
========================================================= */
window.Sticker = function Sticker({ children, top, left, right, bottom, rotate = 0, dragId }) {
const [pos, setPos] = useState({ x: 0, y: 0 });
const [drag, setDrag] = useState(null);
const onDown = (e) => {
e.preventDefault();
const start = { x: e.clientX, y: e.clientY };
setDrag(start);
};
useEffect(() => {
if (!drag) return;
const move = (e) => setPos({ x: e.clientX - drag.x, y: e.clientY - drag.y });
const up = () => setDrag(null);
window.addEventListener('mousemove', move);
window.addEventListener('mouseup', up);
return () => { window.removeEventListener('mousemove', move); window.removeEventListener('mouseup', up); };
}, [drag]);
const style = {
top, left, right, bottom,
transform: `translate(${pos.x}px, ${pos.y}px) rotate(${rotate}deg)`,
'--rot': `${rotate}deg`,
};
return (
{children}
);
};