/* Main app: assembles the board. Positions are computed once on mount from viewport size so the layout fits any screen. Drag positions stay in component state from there. */ const { useState: useStateApp, useEffect: useEffectApp, useMemo, useCallback: useCallbackApp } = React; const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{ "palette": "cream", "lang": "en" } /*EDITMODE-END*/; const PALETTES = [ { id: "cream", name: "Krem", swatch: ["#efe9dc", "#e94f2e", "#f0ff3d"] }, { id: "cobalt", name: "Kobalt", swatch: ["#ecebe2", "#2956d8", "#e9ff3d"] }, { id: "forest", name: "Las", swatch: ["#eee9d8", "#2f6b3c", "#f0ff3d"] }, { id: "ink", name: "Atrament", swatch: ["#131210", "#ff6a3d", "#e8ff45"] }]; /* Per-case wiring: a thumbnail image + a case-study id make a card clickable. Cases with a null id are not yet clickable. */ const CASE_THUMBS = ["uploads/1-case-study-thumbnail.jpg", "uploads/Thumbnail2.jpg", "uploads/Thumbnail.jpg"]; const CASE_IDS = ["mattereum", "blackkeycard", "flownow"]; function bringToTopFactory() { let z = 10; return () => ++z; } /* Position the board for the current viewport. Returns initial coords per element. */ function computeLayout() { const W = Math.max(window.innerWidth, 320); const H = Math.max(window.innerHeight, 600); const right = W; const bottom = H; // Viewport mode: under 900px we switch to a scrollable vertical layout // with section dividers. Above 900px we keep the hand-arranged board. const isMobile = W < 900; // Sizes (kept in sync with CSS) — case photo is now square (1:1) const caseW = 268; const caseH = 372; // ~ square photo + caption + bottom padding const polaroidW = 268; const contactW = 260; const stickyW = 200; // ── Case studies: a tight fanned STACK in the top-left corner. const caseAnchorX = 96; const caseAnchorY = 96; // ── Testimonials: 3 fanned cards in the bottom-left, each independently // draggable. Anchor is the back-left card; the others sit forward + offset. const tstackX = 64; const tstackBaseY = Math.max(bottom - 260 - 80, caseAnchorY + caseH + 24); return { isMobile, polaroid: { x: right - polaroidW - 56, y: 80, rot: 3.5 }, contact: { x: right - contactW - 56, y: bottom - 240, rot: -2.5 }, case1: { x: caseAnchorX + 0, y: caseAnchorY + 4, rot: -7 }, case2: { x: caseAnchorX + 38, y: caseAnchorY + 18, rot: 4 }, case3: { x: caseAnchorX + 72, y: caseAnchorY - 2, rot: -2 }, testimonial1: { x: tstackX + 0, y: tstackBaseY + 24, rot: -8 }, testimonial2: { x: tstackX + 36, y: tstackBaseY + 12, rot: 5 }, testimonial3: { x: tstackX + 78, y: tstackBaseY + 0, rot: -2 }, arrow: { labelX: W / 2, labelY: 38, tipX: caseAnchorX + caseW + 72 + 70, tipY: caseAnchorY + 6 }, showArrow: W >= 900, showStickies: W >= 900 && H >= 720 }; } function App() { const [layout, setLayout] = useStateApp(() => computeLayout()); const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS); const [openIdx, setOpenIdx] = useStateApp(null); const [openCaseId, setOpenCaseId] = useStateApp(null); const bringToTop = useMemo(bringToTopFactory, []); // Re-compute layout once per viewport-resize (debounced via rAF) useEffectApp(() => { let frame; const onResize = () => { cancelAnimationFrame(frame); frame = requestAnimationFrame(() => setLayout(computeLayout())); }; window.addEventListener("resize", onResize); return () => window.removeEventListener("resize", onResize); }, []); // Apply palette via data attribute on useEffectApp(() => { document.documentElement.dataset.palette = tweaks.palette; }, [tweaks.palette]); const t = I18N[tweaks.lang] || I18N.pl; // Long-form case studies for the current language. Only ids present here // are clickable; the modal opens for whichever id is set. const caseStudies = window.CASE_STUDIES && (window.CASE_STUDIES[tweaks.lang] || window.CASE_STUDIES.en) || {}; const openStudy = openCaseId ? caseStudies[openCaseId] : null; const closeCase = useCallbackApp(() => setOpenCaseId(null), []); const caseModal = openStudy ? : null; // Modal navigation — loops infinitely. const closeModal = useCallbackApp(() => setOpenIdx(null), []); const nextModal = useCallbackApp(() => { setOpenIdx((i) => i == null ? null : (i + 1) % t.testimonials.length); }, [t.testimonials.length]); const prevModal = useCallbackApp(() => { setOpenIdx((i) => i == null ? null : (i - 1 + t.testimonials.length) % t.testimonials.length); }, [t.testimonials.length]); // ── Shared pieces ───────────────────────────────────────────── const authorPolaroid = ; const centerpiece =

{t.product} {t.designer}

{t.heroTagline}

; const chrome =

{t.chromeL} {t.chromeR && {t.chromeR}}

; const tweaksPanel =

{PALETTES.map((p) => { const on = tweaks.palette === p.id; return ( ); })}

setTweak("lang", v)} /> ; // ───────────── MOBILE / TABLET ───────────── if (layout.isMobile) { return (

{chrome}

{authorPolaroid}

{centerpiece}

{t.cases.map((c, i) => { const caseId = CASE_IDS[i]; const thumb = CASE_THUMBS[i]; return ( : } title={c.title} meta={c.meta} tags={c.tags} tape={c.tape} width="100%" clickable={!!caseId} onOpen={caseId ? () => setOpenCaseId(caseId) : undefined} readLabel={t.readCase} /> ); })}

{t.testimonials.map((tt, i) => setOpenIdx(i)} /> )}

{t.available}

{caseModal} {tweaksPanel} ); } // ───────────── DESKTOP ───────────── return (

{chrome} {centerpiece} {layout.showArrow && } {authorPolaroid} : } title={t.cases[0].title} meta={t.cases[0].meta} tags={t.cases[0].tags} tape={t.cases[0].tape} clickable={!!CASE_IDS[0]} onOpen={CASE_IDS[0] ? () => setOpenCaseId(CASE_IDS[0]) : undefined} readLabel={t.readCase} /> : } title={t.cases[1].title} meta={t.cases[1].meta} tags={t.cases[1].tags} tape={t.cases[1].tape} clickable={!!CASE_IDS[1]} onOpen={CASE_IDS[1] ? () => setOpenCaseId(CASE_IDS[1]) : undefined} readLabel={t.readCase} /> : } title={t.cases[2].title} meta={t.cases[2].meta} tags={t.cases[2].tags} tape={t.cases[2].tape} clickable={!!CASE_IDS[2]} onOpen={CASE_IDS[2] ? () => setOpenCaseId(CASE_IDS[2]) : undefined} readLabel={t.readCase} /> {layout.showStickies && {t.testimonials.map((tt, i) => { // First testimonial (Kate) sits in the front slot and on top of the // stack; the last (Patrick) goes to the back. Slots/z run in reverse // of the array order so the array reads front-to-back. const n = t.testimonials.length; const layoutKey = `testimonial${n - i}`; const slot = layout[layoutKey]; return ( setOpenIdx(i)} /> ); })} } {caseModal} {tweaksPanel} ); } ReactDOM.createRoot(document.getElementById("root")).render();