/* app/project-window.jsx — generic personal-project window ported from
index_old (final-windows.jsx: ProjectWindow + ProjShot + ProjLightbox),
reused by every Personal desk project (Art now, others as their icons get
wired). Desktop: hero + write-up on the left, screenshots in a tall column
on the right. Responsive (`stack`): screenshots drop to a mosaic below the
write-up. The screenshot grid always uses an auto-fill mosaic so the
window's own height/width just fits however many shots a project has —
no oversized empty grid for a 2-shot project.
Requires window.FlowWindow and window.PixelIcon. */
function ProjShot({ hue, label, file, dims, tag, big, compact, src, fit }) {
const h = hue;
if (src) return (
{tag && {tag}}
);
return (
{tag && {tag}}
{label}
{file && !compact &&
{file} · {dims}
}
);
}
/* click-to-play YouTube frame: shows YT's own thumbnail until clicked, so the
page never loads the player on mount. */
function ProjVideo({ id, label }) {
const [on, setOn] = React.useState(false);
if (on) return (
);
return (
);
}
function ProjLightbox({ shots, index, setIndex, onClose, previewAspect }) {
const s = shots[index];
if (!s) return null;
const go = (d) => setIndex((index + d + shots.length) % shots.length);
React.useEffect(() => {
const onKey = (e) => {
if (e.key === 'ArrowLeft') { e.preventDefault(); go(-1); }
else if (e.key === 'ArrowRight') { e.preventDefault(); go(1); }
else if (e.key === 'Escape') onClose();
};
window.addEventListener('keydown', onKey);
return () => window.removeEventListener('keydown', onKey);
}, [index, shots.length]);
const tri = (dir) => ({ width: 0, height: 0, borderTop: '6px solid transparent', borderBottom: '6px solid transparent',
[dir === 'r' ? 'borderLeft' : 'borderRight']: '9px solid #1d1d1d' });
/* one fixed box per gallery (project-declared) so the preview window never
resizes while stepping through the mosaic; the image scales to fit. */
const pa = previewAspect || (s.src ? 3 / 2 : 16 / 9);
const aspect = typeof pa === 'string'
? (function () { const p = pa.split('/').map(Number); return p.length === 2 && p[1] ? p[0] / p[1] : 3 / 2; })()
: pa;
/* fit the placeholder render into the real viewport (minus taskbar and modal
chrome/padding) via CSS min()/calc() — no fixed design-canvas constants. */
const availW = 'calc(100vw - 64px)';
const availH = 'calc(100vh - var(--tb-h) - 168px)';
const w = `min(${availW}, calc(${availH} * ${aspect}))`;
const h = `min(${availH}, calc(${availW} / ${aspect}))`;
/* portalled to so it covers the whole viewport (above the desk stage
and any window it was opened from) instead of being clipped by its mount. */
return ReactDOM.createPortal((
e.stopPropagation()}>
{'Image Preview \u2014 ' + s.file}
{index + 1}/{shots.length}
{s.label}{s.dims} · {s.file}
), document.body);
}
/* real destinations for the project link buttons; labels with no entry here
stay inert (no public page yet). */
const PROJ_LINKS = { GitHub: 'https://github.com/Arghonot', Instagram: 'https://www.instagram.com/argrafix' };
function ProjLinkBtn({ label }) {
const href = PROJ_LINKS[label];
const st = { display: 'inline-flex', alignItems: 'center', gap: 5, fontSize: 16, padding: '4px 10px', textDecoration: 'none', color: 'var(--w98-text)' };
return href
? {label} ↗
: ;
}
function ProjectWindow({ proj, onClose, onZoom, stack }) {
const NOTE_MENUS = ['File', 'Edit', 'View', 'Tools', 'Help'];
const n = proj.tech ? proj.tech.length : 0;
const noBorderFrom = n - (n % 2 === 0 ? 2 : 1);
const hasShots = proj.shots && proj.shots.length > 0;
const twoCol = hasShots && !stack;
const left = (
{proj.hero.youtube
?
: }
{proj.label}
{proj.kind}
{proj.links.map((l) => )}
{proj.download && (
)}
{(Array.isArray(proj.desc) ? proj.desc : [proj.desc]).map((para, i, arr) => (