// Bodyslam mall — storefront polish pass. // // Decorates the inner-facing walls of the four sealed shop blocks (NW/NE/SW/SE) // with individually designed 90s mall storefronts. Pure visual; the structural // walls in scripts/mall-shell.js still exist and still collide. We mount glass, // trim, sign bands, blade signs, and fake parallax interiors against the // existing wall plane. // // This script is attached to the mall-shell root so all geometry parents under // the same entity and lives/dies with it. const p = require("builtin/primitives"); const WALL_H = 8; // matches mall-shell const WALL_T = 1.5; // matches mall-shell wall thickness // Block extents copied from mall-shell.js — keep in sync. const NW = { xMin: -59.6, xMax: -7, zMin: -68, zMax: 18 }; const NE = { xMin: 7, xMax: 59.6, zMin: -68, zMax: 18 }; const SW = { xMin: -59.6, xMax: -7, zMin: 40, zMax: 68 }; const SE = { xMin: 7, xMax: 59.6, zMin: 40, zMax: 68 }; // ------------------------------------------------------------------------- // Materials // ------------------------------------------------------------------------- // Translucent storefront glass — slight cool tint, low opacity so the interior // reads through. depthWrite:false stops it from hiding the warm backlight box. const GLASS_MAT = { color: "oklch(0.92 0.02 220)", opacity: 0.10, transparent: true, roughness: 0.05, metalness: 0.0, depthWrite: false, }; // Slightly darker glass for "shuttered" stores — the closed-for-the-night beat. const GLASS_DARK_MAT = { color: "oklch(0.28 0.02 240)", opacity: 0.55, transparent: true, roughness: 0.4, depthWrite: false, }; // Interior floor (a strip of mall-style tile right behind the glass, gives the // parallax interior a "ground"). const INTERIOR_FLOOR_MAT = { color: "oklch(0.78 0.012 80)", texture: "/cdn/moodboard-bodyslam-mall90s/texture-floor-shop-interior-90s-checker-cream-and-mauve.png", repeat: [4, 4], roughness: 0.6, }; // Generic shelf primitive — pale veneer. const SHELF_MAT = { color: "oklch(0.72 0.04 70)", roughness: 0.7, }; // Generic ceiling soffit above the storefront (above the sign band). const SOFFIT_MAT = { color: "oklch(0.55 0.02 60)", roughness: 0.85, }; // Kickplate (base of glass, matches trim but darker). function kickplateMat(trimHex) { return { color: trimHex, roughness: 0.7, metalness: 0.15 }; } // Trim mat (mullions, sign band frame). function trimMat(trimHex) { return { color: trimHex, roughness: 0.4, metalness: 0.5 }; } // Sign band background (slightly emissive so name is readable at a glance). function signBandMat(bandHex) { return { color: bandHex, emissive: bandHex, emissiveIntensity: 0.6, roughness: 0.55, }; } // Blade sign material — neon-tinted but tame. High emissive blooms the plate // so badly that any text on it washes out and reads as a halo. We keep a soft // emissive (color glow) but step back so glyphs survive. function bladeMat(neonHex) { return { color: neonHex, emissive: neonHex, emissiveIntensity: 0.55, roughness: 0.45, }; } // Interior backlight — warm tungsten glow. function backlightMat(warmHex, dark) { return { color: warmHex, emissive: warmHex, emissiveIntensity: dark ? 0.35 : 1.6, roughness: 0.9, }; } // Product cube mat — picks varied saturated colors. function productMat(hex) { return { color: hex, roughness: 0.6 }; } // Closed security grate (metallic dark mesh look) for "shuttered" stores. const GRATE_MAT = { color: "oklch(0.32 0.005 250)", roughness: 0.55, metalness: 0.7, }; // ------------------------------------------------------------------------- // Palettes — pick to keep adjacent stores visually distinct. // Format: { trim, band, neon, warm, accent } // ------------------------------------------------------------------------- const PALETTES = [ // hot pink / magenta { trim: "oklch(0.68 0.22 350)", band: "oklch(0.62 0.24 350)", neon: "oklch(0.78 0.28 350)", warm: "oklch(0.84 0.14 60)", accent: "oklch(0.95 0.06 90)" }, // teal / cyan { trim: "oklch(0.62 0.13 200)", band: "oklch(0.55 0.14 200)", neon: "oklch(0.82 0.18 200)", warm: "oklch(0.86 0.11 80)", accent: "oklch(0.92 0.05 95)" }, // mustard / amber { trim: "oklch(0.72 0.16 85)", band: "oklch(0.68 0.18 85)", neon: "oklch(0.85 0.2 85)", warm: "oklch(0.88 0.13 70)", accent: "oklch(0.42 0.06 60)" }, // royal purple { trim: "oklch(0.45 0.18 300)", band: "oklch(0.4 0.2 300)", neon: "oklch(0.7 0.25 300)", warm: "oklch(0.82 0.12 60)", accent: "oklch(0.92 0.04 90)" }, // forest / emerald { trim: "oklch(0.48 0.14 150)", band: "oklch(0.42 0.16 150)", neon: "oklch(0.78 0.22 145)", warm: "oklch(0.84 0.12 70)", accent: "oklch(0.92 0.05 90)" }, // tomato / orange { trim: "oklch(0.62 0.2 35)", band: "oklch(0.58 0.22 35)", neon: "oklch(0.78 0.24 35)", warm: "oklch(0.86 0.13 65)", accent: "oklch(0.36 0.05 60)" }, // cobalt / electric blue { trim: "oklch(0.42 0.18 260)", band: "oklch(0.38 0.2 260)", neon: "oklch(0.72 0.25 250)", warm: "oklch(0.85 0.13 70)", accent: "oklch(0.92 0.04 90)" }, // mint { trim: "oklch(0.78 0.1 165)", band: "oklch(0.72 0.13 165)", neon: "oklch(0.85 0.18 160)", warm: "oklch(0.86 0.12 70)", accent: "oklch(0.32 0.05 200)" }, // salmon { trim: "oklch(0.74 0.15 25)", band: "oklch(0.68 0.17 25)", neon: "oklch(0.82 0.2 25)", warm: "oklch(0.86 0.13 60)", accent: "oklch(0.92 0.05 90)" }, // chrome / silver (90s tech vibe) { trim: "oklch(0.82 0.005 250)", band: "oklch(0.6 0.01 250)", neon: "oklch(0.88 0.16 220)", warm: "oklch(0.82 0.11 75)", accent: "oklch(0.32 0.04 60)" }, // black / yellow (Spence's vibe) { trim: "oklch(0.22 0.01 70)", band: "oklch(0.85 0.18 95)", neon: "oklch(0.88 0.22 95)", warm: "oklch(0.82 0.12 60)", accent: "oklch(0.95 0.06 90)" }, // pastel lavender { trim: "oklch(0.78 0.08 310)", band: "oklch(0.72 0.1 310)", neon: "oklch(0.84 0.18 310)", warm: "oklch(0.86 0.12 65)", accent: "oklch(0.92 0.04 90)" }, ]; // ------------------------------------------------------------------------- // Store catalog // ------------------------------------------------------------------------- // Variety of names — knockoff brands, absurd self-aware, classic 90s riffs. const STORE_NAMES = [ "SOLE LOCKER", "SAM GROOVY", "SUNSHORE VIDEO", "DAIRE'S", "AUNTIE JAN'S", "WALDENREADS", "SPENCE'S GIFTS", "BATH & BODY WORDS", "PRETZEL TRAPEZOID", "SUNCOAST VIBEOS", "RADIOSHARK", "TOYZRWE", "THE LIMITED TIME", "MOVIES MOVIES MOVIES!!!", "GENERIC SHOP", "STUFF 4 U", "WE SELL THINGS", "DISCOUNT EVERYTHING", "THE STORE", "JUST CHAIRS", "BANKRUPT", "NOT A FRONT", "OPEN SOMETIMES", "TWO STORES IN ONE", "ALL GREEN STORE", "MIDWEST AIRPORT BOOKS", "ELECTRONICZ", "FANTASTIC SAMS-ISH", "CINNABUN ADJACENT", "MAYBE PIZZA", "GREAT AMERICAN COOKIEISH", "JCPENNYS-ISH", "ORANGE JULIO", "WICKS 'N' STIX", "DEB", "REGAL EAGLE OPTICAL", "GAMESTOP MAYBE", "MRS. FIELDISH", "PAPYRUS-LIKE", "BORDERZ", "CIRCUIT TOWN", "K B TOYS PROBABLY", "AFTERTHOUGHT", "OFF MALL", "I AM A STORE", "STORE NAME HERE", "FOR LEASE (NOT)", "SECRET STORE", "EXIT ONLY", "ALMOST CLOSED", ]; // Tag bursts ("SALE", "GRAND OPENING", "70% OFF") — sparse. const SALE_TAGS = ["SALE", "GRAND OPENING", "70% OFF!", "BUY 1 GET 1", "CLEARANCE"]; // ------------------------------------------------------------------------- // Sign style profiles — each storefront in a real mall hired a different sign // shop, so each sign feels designed by a different person for a different // brand. The engine ships one bundled font (Geist Pixel) and per-spec font // overrides are intentionally ignored (engine/render_v2/state/text.ts:352). // So personality has to come from CASE, letter spacing, outline weight, // outline color, ornaments, and size multiplier — the things that actually // differentiate a Foot Locker from a Banana Republic from a Spencer's at // corridor distance. // // Important: ornaments and labels must be ASCII printable. Special glyphs // (★ ♪ → 🎬 etc.) render as missing-glyph placeholders in Geist Pixel and // look like a broken-image icon — explicitly forbidden here. // ------------------------------------------------------------------------- const SIGN_PROFILES = [ // Personality lives in case + letterSpacing + sizeMul + ornaments. // outlineWidth stays <= 0.04: above that, Geist Pixel reads as a blob plate, not an edge. // 0 athletic — Foot Locker / Sole Locker. Bold, tight. { id: "athletic", case: "upper", letterSpacing: -0.04, outlineWidth: 0.04, sizeMul: 1.18, ornL: "", ornR: "" }, // 1 serif-book — Waldenbooks / Borderz. Title Case, no outline, slight airy spacing. { id: "serif-book", case: "title", letterSpacing: 0.06, outlineWidth: 0.00, sizeMul: 0.92, ornL: "", ornR: "" }, // 2 soft-round — Bath & Body Works. Title Case, no outline, wider spacing. { id: "soft-round", case: "title", letterSpacing: 0.10, outlineWidth: 0.00, sizeMul: 1.00, ornL: "", ornR: "" }, // 3 techy — RadioShack / Circuit Town. Brackets, mono-ish spacing. { id: "techy", case: "upper", letterSpacing: 0.04, outlineWidth: 0.02, sizeMul: 1.05, ornL: "[", ornR: "]" }, // 4 shout-mega — Toys R Us discount loud. Big size carries the shout. { id: "shout-mega", case: "upper", letterSpacing: 0.00, outlineWidth: 0.04, sizeMul: 1.26, ornL: "", ornR: "!" }, // 5 absurd — Pretzel Trapezoid. Wide spacing, double-colon wrap. { id: "absurd", case: "upper", letterSpacing: 0.18, outlineWidth: 0.00, sizeMul: 1.00, ornL: ":: ", ornR: " ::" }, // 6 boring — Generic Shop. Plain, slightly small. { id: "boring", case: "upper", letterSpacing: 0.00, outlineWidth: 0.00, sizeMul: 0.85, ornL: "", ornR: "" }, // 7 wide-elegant — The Limited. Airy upper-case, no outline. { id: "wide-elegant", case: "upper", letterSpacing: 0.24, outlineWidth: 0.00, sizeMul: 0.95, ornL: "", ornR: "" }, // 8 title-soft — Mrs. Fields / Auntie Anne's. Title Case, clean. { id: "title-soft", case: "title", letterSpacing: 0.04, outlineWidth: 0.00, sizeMul: 1.00, ornL: "", ornR: "" }, // 9 stars — Claire's / Spencer's. Asterisk-star wrap (ASCII-safe). { id: "stars", case: "upper", letterSpacing: 0.06, outlineWidth: 0.02, sizeMul: 1.00, ornL: "* ", ornR: " *" }, //10 dots — Suncoast / video-store dot-spaced. { id: "dots", case: "upper", letterSpacing: 0.22, outlineWidth: 0.00, sizeMul: 0.90, ornL: "", ornR: "" }, //11 lowercase-chic — Papyrus-like / boutique. all lowercase, airy. { id: "lowercase-chic", case: "lower", letterSpacing: 0.06, outlineWidth: 0.00, sizeMul: 1.05, ornL: "", ornR: "" }, //12 marquee — Movies Movies Movies. Big shout with !! tail. { id: "marquee", case: "upper", letterSpacing: 0.00, outlineWidth: 0.04, sizeMul: 1.22, ornL: "", ornR: "!!" }, //13 discount-blare — Discount Everything / Bankrupt. Big and pushy. { id: "discount-blare", case: "upper", letterSpacing: 0.00, outlineWidth: 0.04, sizeMul: 1.24, ornL: "", ornR: "!" }, //14 slash-neon — Suncoast Vibeos. Forward-slash wrap. { id: "slash-neon", case: "upper", letterSpacing: 0.04, outlineWidth: 0.02, sizeMul: 1.05, ornL: "// ", ornR: " //" }, //15 tight-mono — Sam Groovy / Just Chairs. Tight monospace feel. { id: "tight-mono", case: "upper", letterSpacing: -0.02, outlineWidth: 0.00, sizeMul: 1.00, ornL: "", ornR: "" }, ]; const PROFILE_BY_ID = (() => { const m = {}; for (const p of SIGN_PROFILES) m[p.id] = p; return m; })(); // Curated per-store profile assignments — the brand voice for each shop. // Ordered loosely against STORE_NAMES so consecutive entries never repeat. const CURATED_PROFILES = { "SOLE LOCKER": "athletic", "SAM GROOVY": "tight-mono", "SUNSHORE VIDEO": "dots", "DAIRE'S": "stars", "AUNTIE JAN'S": "title-soft", "WALDENREADS": "serif-book", "SPENCE'S GIFTS": "stars", "BATH & BODY WORDS": "soft-round", "PRETZEL TRAPEZOID": "absurd", "SUNCOAST VIBEOS": "slash-neon", "RADIOSHARK": "techy", "TOYZRWE": "shout-mega", "THE LIMITED TIME": "wide-elegant", "MOVIES MOVIES MOVIES!!!": "marquee", "GENERIC SHOP": "boring", "STUFF 4 U": "shout-mega", "WE SELL THINGS": "boring", "DISCOUNT EVERYTHING": "discount-blare", "THE STORE": "boring", "JUST CHAIRS": "tight-mono", "BANKRUPT": "discount-blare", "NOT A FRONT": "boring", "OPEN SOMETIMES": "lowercase-chic", "TWO STORES IN ONE": "absurd", "ALL GREEN STORE": "boring", "MIDWEST AIRPORT BOOKS": "serif-book", "ELECTRONICZ": "techy", "FANTASTIC SAMS-ISH": "stars", "CINNABUN ADJACENT": "soft-round", "MAYBE PIZZA": "shout-mega", "GREAT AMERICAN COOKIEISH":"title-soft", "JCPENNYS-ISH": "wide-elegant", "ORANGE JULIO": "marquee", "WICKS 'N' STIX": "lowercase-chic", "DEB": "wide-elegant", "REGAL EAGLE OPTICAL": "tight-mono", "GAMESTOP MAYBE": "techy", "MRS. FIELDISH": "title-soft", "PAPYRUS-LIKE": "lowercase-chic", "BORDERZ": "serif-book", "CIRCUIT TOWN": "techy", "K B TOYS PROBABLY": "shout-mega", "AFTERTHOUGHT": "lowercase-chic", "OFF MALL": "boring", "I AM A STORE": "tight-mono", "STORE NAME HERE": "boring", "FOR LEASE (NOT)": "discount-blare", "SECRET STORE": "lowercase-chic", "EXIT ONLY": "shout-mega", "ALMOST CLOSED": "lowercase-chic", }; // Stable hash → profile index, so any uncurated name still gets a stable style. function styleHash(str) { let h = 2166136261; for (let i = 0; i < str.length; i++) { h ^= str.charCodeAt(i); h = (h * 16777619) >>> 0; } return h; } // Resolve a profile for a store, never repeating the prev profile id when we // have a choice. Curated table wins; if the curated pick collides with the // previous store, we walk to the next-best stable hash that doesn't collide. function profileFor(storeName, prevId) { const curated = CURATED_PROFILES[storeName]; if (curated && curated !== prevId) return PROFILE_BY_ID[curated]; // Either uncurated, or curated collides with previous — pick by hash and // skip prev. Iterate deterministically. const baseIdx = styleHash(storeName) % SIGN_PROFILES.length; for (let i = 0; i < SIGN_PROFILES.length; i++) { const p = SIGN_PROFILES[(baseIdx + i) % SIGN_PROFILES.length]; if (p.id !== prevId) return p; } return SIGN_PROFILES[baseIdx]; } // Legacy entry point (still used by buildBlade fallback). Prefer profileFor. function pickProfile(storeName) { return profileFor(storeName, null); } // ------------------------------------------------------------------------- // Blade signs — the perpendicular flag over the entrance. // // 1992 malls had wildly inconsistent blade signs because every storefront // hired a different sign shop. Some stores skipped the blade entirely and // just had a band. We mirror that: ~55% of stores get a blade, and each // blade variant is hash-assigned so it's stable per store name. // ------------------------------------------------------------------------- // Stable hash bucket — different multiplier than styleHash so blade choice // is independent of sign profile choice (otherwise every "stars" sign would // always be the same blade shape). function bladeHash(str) { let h = 0x811c9dc5; for (let i = 0; i < str.length; i++) { h ^= str.charCodeAt(i); h = Math.imul(h, 0x01000193); } return h >>> 0; } // ~55% of stores get a blade. Threshold tuned so the corridor rhythm reads // as: flag, nothing, flag, flag, nothing, flag — feels curated, not // cookie-cutter. function shouldHaveBlade(storeName) { return (bladeHash(storeName + "blade?") % 100) < 55; } // Blade archetypes — 7 distinct shapes. Each carries its own proportions, // mount style, and label policy. The blade plate itself is built with // placeBox so it stays a solid physics collider (nickd's ragdoll bounces off // the flag — keep that intact for every variant). const BLADE_ARCHETYPES = [ "tall-flag", // current default: tall narrow rectangular flag "wide-banner", // short wide horizontal flag "disc", // circular seal (octagon-approximated via stacked plates) "diamond", // rotated square "pennant", // triangular pennant tapered outward "double-stack", // two small horizontal plaques stacked "letter-stack", // tall column with one letter per row ]; function pickBladeArchetype(storeName) { return BLADE_ARCHETYPES[bladeHash(storeName + "archetype") % BLADE_ARCHETYPES.length]; } // Curated logo-style abbreviations for known names. Anything not in the table // falls through to derivedBladeLabel(). Hand-pick the ones we want to read // as a real shop logo, not just a chopped string. // // HARD RULE: ASCII printable letters/digits/&/'/! only. The engine ships one // bundled font (Geist Pixel); any glyph outside its coverage renders as a // missing-glyph placeholder rectangle (the "broken image icon"). No ★ ♪ → $ // emoji or ? marks on blade labels. const CURATED_BLADE_LABELS = { "SOLE LOCKER": "SOLE", "SAM GROOVY": "SG", "SUNSHORE VIDEO": "VIDEO", "DAIRE'S": "D", "AUNTIE JAN'S": "AJ", "WALDENREADS": "W", "SPENCE'S GIFTS": "SG", "BATH & BODY WORDS": "B&B", "PRETZEL TRAPEZOID": "PT", "SUNCOAST VIBEOS": "SV", "RADIOSHARK": "RS", "TOYZRWE": "TOYS", "THE LIMITED TIME": "LTD", "MOVIES MOVIES MOVIES!!!": "MMM", "GENERIC SHOP": "G", "STUFF 4 U": "4U", "WE SELL THINGS": "WST", "DISCOUNT EVERYTHING": "DSC", "THE STORE": "THE", "JUST CHAIRS": "JC", "BANKRUPT": "BNK", "NOT A FRONT": "NAF", "OPEN SOMETIMES": "OS", "TWO STORES IN ONE": "2N1", "ALL GREEN STORE": "AGS", "MIDWEST AIRPORT BOOKS": "MAB", "ELECTRONICZ": "EZ", "FANTASTIC SAMS-ISH": "FS", "CINNABUN ADJACENT": "CB", "MAYBE PIZZA": "PIZZA", "GREAT AMERICAN COOKIEISH":"GAC", "JCPENNYS-ISH": "JCP", "ORANGE JULIO": "OJ", "WICKS 'N' STIX": "W&S", "DEB": "DEB", "REGAL EAGLE OPTICAL": "REO", "GAMESTOP MAYBE": "GS", "MRS. FIELDISH": "MF", "PAPYRUS-LIKE": "P", "BORDERZ": "B", "CIRCUIT TOWN": "CT", "K B TOYS PROBABLY": "KBT", "AFTERTHOUGHT": "AT", "OFF MALL": "OM", "I AM A STORE": "IAM", "STORE NAME HERE": "TBD", "FOR LEASE (NOT)": "LEAS", "SECRET STORE": "SHH", "EXIT ONLY": "EXIT", "ALMOST CLOSED": "AC", }; // ASCII-only sanitizer for any label text — strips characters Geist Pixel // can't render, leaving the safe set: // A-Z a-z 0-9 space & ' ! . , - / : [ ] ( ) // Profile ornaments use brackets and colons, so they must be in the allowlist. function asciiSafe(text) { return String(text || "").replace(/[^A-Za-z0-9 &'!.,\-\/:\[\]()]/g, "").trim(); } // Fallback derivation: take initials, or first short word, or first 3 chars. function derivedBladeLabel(storeName) { const cleaned = storeName.replace(/[^A-Za-z0-9& '!?-]/g, "").trim(); const words = cleaned.split(/\s+/).filter(Boolean); if (words.length === 1) { return words[0].length <= 5 ? words[0].toUpperCase() : words[0].slice(0, 4).toUpperCase(); } // Multi-word: monogram from initials (first 2-3 letters) const initials = words .filter((w) => w.length > 1 || /[A-Z0-9&]/.test(w[0])) .slice(0, 3) .map((w) => w[0].toUpperCase()) .join(""); return initials || words[0].slice(0, 3).toUpperCase(); } function bladeLabelFor(storeName) { const raw = CURATED_BLADE_LABELS[storeName] || derivedBladeLabel(storeName); // Run every blade label through the ASCII safety net so we never spawn a // missing-glyph placeholder regardless of upstream changes. const safe = asciiSafe(raw); return safe || "?"; } // Title-case a name like "SUNCOAST VIBEOS" → "Suncoast Vibeos". function toTitle(s) { return s.toLowerCase().replace(/(^|\s|['-])([a-z])/g, (_, p, c) => p + c.toUpperCase()); } // Apply profile case + ornaments to display string. asciiSafe strips any // missing-font glyphs so they never reach the band as broken-image boxes. function applyCase(name, profile) { let body; if (profile.case === "title") body = toTitle(name); else if (profile.case === "lower") body = String(name).toLowerCase(); else body = String(name).toUpperCase(); return asciiSafe(profile.ornL + body + profile.ornR); } // Pick an outline color that BLENDS into the band rather than fighting it. // We want edge-thickening, never a separate halo color. So we nudge the band // color slightly darker (or lighter, when the band is already very dark) and // return that — small outlineWidth + band-tinted color reads as weight, not plate. function outlineColorFor(_textColor, bandColor) { const m = /oklch\(\s*(\d*\.?\d+)\s+(\d*\.?\d+)\s+(\d*\.?\d+)/.exec(bandColor || ""); if (!m) return "oklch(0.20 0.02 60)"; const L = parseFloat(m[1]); const C = parseFloat(m[2]); const H = parseFloat(m[3]); // Very dark band → outline a touch lighter; otherwise pull L down a step. const L2 = L < 0.30 ? Math.min(0.95, L + 0.10) : Math.max(0.05, L - 0.18); return "oklch(" + L2.toFixed(3) + " " + C.toFixed(3) + " " + H.toFixed(1) + ")"; } // Deterministic prng so layout is stable across reloads. function mkRand(seed) { let s = seed | 0; return () => { s = (s * 1664525 + 1013904223) | 0; return ((s >>> 0) % 100000) / 100000; }; } function pick(arr, rng) { return arr[Math.floor(rng() * arr.length)]; } // ------------------------------------------------------------------------- // Layout planning // ------------------------------------------------------------------------- // Split a face length into a stable list of varied widths. function planWidths(totalLen, rng) { const widths = []; let remaining = totalLen; while (remaining > 7.0) { // Most stores 8–14m; occasional anchor 14–18m. const anchor = rng() < 0.18 && remaining > 16; let w = anchor ? 14 + rng() * 4 : 8 + rng() * 6; if (w > remaining) w = remaining; // If the leftover after this slot would be too small to be a store, // absorb it into the current slot. if (remaining - w < 7.0) w = remaining; widths.push(w); remaining -= w; } if (remaining > 0.01 && widths.length > 0) widths[widths.length - 1] += remaining; return widths; } // ------------------------------------------------------------------------- // Blade builder — invoked from inside buildStorefront. Receives the // storefront's local-frame placeBox helper so all geometry lands in the // correct (axis, along, plane, facing) frame. Each archetype shapes the // blade differently but they all share: // - solid placeBox-built plate(s) so the ragdoll ball bounces off // - a short logo-style label (NOT the full store name) on both sides // - a mount arm tying the blade back into the wall above the sign band // ------------------------------------------------------------------------- function buildBlade(placeBox, objectApi, P, tag, axis, along, plane, facing, palette, storeName, SIGN_BOT, glassOffset, bladeProfileOverride) { const archetype = pickBladeArchetype(storeName); // Reuse the band's resolved profile when provided so blade text matches the // band's case/spacing/ornaments — same brand voice on both signs. const bladeProfile = bladeProfileOverride || pickProfile(storeName); const label = bladeLabelFor(storeName); const accentTrim = trimMat(palette.accent); const baseTrim = trimMat(palette.trim); const plateMat = bladeMat(palette.neon); // Slightly different plate variant for stacked/canopy variants so they // contrast against the band color underneath. const altPlateMat = { color: palette.band, emissive: palette.band, emissiveIntensity: 1.6, roughness: 0.5, }; // Sign material for label boards mounted directly on the blade plate. // MUST match the blade plate's emissive intensity (2.2) so the label panel // blends into the blade instead of reading as a dimmer rectangle. const labelBoardMat = bladeMat(palette.neon); // Pick blade-label text color & outline that READS on this neon plate. // White on bright neon (yellow, peach, etc) washes out. So we measure the // plate's L and choose dark ink for light plates, bright ink for dark. function pickBladeInk(neonColor) { const m = /oklch\(\s*(\d*\.?\d+)\s+(\d*\.?\d+)\s+(\d*\.?\d+)/.exec(neonColor || ""); const L = m ? parseFloat(m[1]) : 0.7; const C = m ? parseFloat(m[2]) : 0.05; const H = m ? parseFloat(m[3]) : 60; if (L > 0.62) { // Light/bright plate → near-black ink, slight outline darker still. return { text: "oklch(0.14 " + Math.min(C, 0.06).toFixed(3) + " " + H.toFixed(1) + ")", outlineColor: "oklch(0.05 0.02 " + H.toFixed(1) + ")", outlineWidth: 0.02, }; } // Dark/saturated plate → near-white ink, hair-thin dark outline for edge. return { text: "oklch(0.98 0.02 95)", outlineColor: "oklch(0.10 0.02 " + H.toFixed(1) + ")", outlineWidth: 0.03, }; } const bladeInk = pickBladeInk(palette.neon); // Helper to spawn a flat sign on a blade face. // `a`, `y`, `d` are local coords (along, height, depth-from-wall). // `face` is the direction the label looks toward: "alongPlus" (label faces // +a, i.e. the corridor "incoming" side) or "alongMinus" (faces -a). // We always spawn two opposing labels so both directions of travel read. // boardW spans the blade's depth axis (d), boardH is the blade's tall axis. // `rotRoll` lets diamond variants rotate the label 45° so it lays flat on // a rotated plate. function spawnBladeLabel(name, aOff, y, dOff, faceSign, boardW, boardH, fontSize, text, rotRoll) { let worldX, worldZ, yaw; // For axis='z': blade's flat sides face ±X. Sign text glyphs render on // the local +Z face. yaw=90 rotates local +Z → world +X (glyphs face +X), // yaw=270 → world -X. So faceSign=+1 (text should face +X) needs yaw 90. // For axis='x': blade's flat sides face ±Z. yaw=0 keeps glyphs facing +Z, // yaw=180 flips them to face -Z. if (axis === "z") { worldX = along + aOff; worldZ = plane + facing * dOff; yaw = faceSign > 0 ? 90 : 270; } else { worldZ = along + aOff; worldX = plane + facing * dOff; yaw = faceSign > 0 ? 0 : 180; } const rotation = { yaw }; if (rotRoll) rotation.roll = rotRoll; // Same engine quirk as placeSignLabel — text.offset is world-space. Push // the text ~0.03m in front of the blade panel along the player-facing axis. const BLADE_FORWARD = 0.03; const ENGINE_Z_DEFAULT = 0.022; let bOffX = 0; let bOffZ = -ENGINE_Z_DEFAULT; if (axis === "z") { // Blade faces ±X depending on faceSign bOffX += BLADE_FORWARD * faceSign; } else { // Blade faces ±Z depending on faceSign bOffZ += BLADE_FORWARD * faceSign; } objectApi.spawn({ id: tag + "-" + name, parent: P, properties: { feetPosition: { x: worldX, y: y - boardH / 2, z: worldZ }, rotation, sign: { width: boardW, height: boardH, depth: 0.03, material: labelBoardMat, text: { content: text, size: fontSize, color: bladeInk.text, align: "center", anchor: [0.5, 0.5], // No outline — color contrast carries the read now that the plate // bloom is dialed back. Any outline at all reads as a halo here. outlineWidth: 0, offset: [bOffX, 0, bOffZ], }, }, }, }); } // Mount arm tying the blade to the wall above the band. function mountArm(dStart, dEnd, halfWidth, yTop, thickness) { placeBox("blade-mount", -halfWidth, yTop - thickness, dStart, halfWidth, yTop, dEnd, baseTrim); } // -- Archetype builders -------------------------------------------------- if (archetype === "tall-flag") { // The OG: tall narrow rectangular flag, mounted just below the sign band. const bladeTopY = SIGN_BOT - 0.2; const bladeBotY = bladeTopY - 2.4; const halfT = 0.12; const dStart = glassOffset + 0.05; const dEnd = glassOffset + 1.6; placeBox("blade", -halfT, bladeBotY, dStart, halfT, bladeTopY, dEnd, plateMat); placeBox("blade-edge-bot", -halfT - 0.06, bladeBotY - 0.04, dStart, halfT + 0.06, bladeBotY + 0.04, dEnd + 0.05, accentTrim); placeBox("blade-edge-top", -halfT - 0.06, bladeTopY - 0.04, dStart, halfT + 0.06, bladeTopY + 0.04, dEnd + 0.05, accentTrim); mountArm(-0.02, glassOffset + 0.2, 0.06, bladeTopY + 0.18, 0.13); // Two stacked labels reading down the blade (vertical orientation). // Board spans the blade DEPTH (1.55m) and HEIGHT (~2.2m). With ALL CAPS // jersey10 and a short label like "SV" or "VIDEO" we get big readable // letters even at corridor distance. const boardW = 1.5; // along blade depth const boardH = 2.0; // along blade height const text = label.toUpperCase(); const font = Math.max(0.6, Math.min(1.4, 4.2 / Math.max(2, text.length))) * bladeProfile.sizeMul; const midY = (bladeBotY + bladeTopY) / 2; const midD = (dStart + dEnd) / 2; spawnBladeLabel("blade-text-1", 0.14, midY, midD, +1, boardW, boardH, font, text); spawnBladeLabel("blade-text-2", -0.14, midY, midD, -1, boardW, boardH, font, text); return; } if (archetype === "wide-banner") { // Short wide horizontal flag — half the height of the tall flag, hung // off the wall by a single arm. Reads like a Marshalls / Old Navy // horizontal sign. Depth tightened from 2.4 → 1.9 so the cantilever // reads honest on a single arm. const bladeTopY = SIGN_BOT - 0.15; const bladeBotY = bladeTopY - 1.3; const halfT = 0.10; const dStart = glassOffset + 0.05; const dEnd = glassOffset + 1.9; placeBox("blade", -halfT, bladeBotY, dStart, halfT, bladeTopY, dEnd, plateMat); // Thick top/bottom rails for a chunky banner feel. placeBox("blade-rail-top", -halfT - 0.08, bladeTopY - 0.10, dStart - 0.02, halfT + 0.08, bladeTopY + 0.05, dEnd + 0.05, accentTrim); placeBox("blade-rail-bot", -halfT - 0.08, bladeBotY - 0.05, dStart - 0.02, halfT + 0.08, bladeBotY + 0.10, dEnd + 0.05, accentTrim); // Mount: one stout arm from the wall back to the blade root. The old // build also added a second mount arm at the FAR end of the banner // (where there is no wall) — that hovered in mid-corridor with nothing // to attach to. Removed; the single wall-side arm carries the banner // honestly. mountArm(-0.02, dStart + 0.18, 0.06, bladeTopY + 0.12, 0.13); const boardW = 2.0; const boardH = 1.05; const text = label.toUpperCase(); const font = Math.max(0.55, Math.min(0.95, 3.6 / Math.max(2, text.length))) * bladeProfile.sizeMul; const midY = (bladeBotY + bladeTopY) / 2; const midD = (dStart + dEnd) / 2; spawnBladeLabel("blade-text-1", 0.13, midY, midD, +1, boardW, boardH, font, text); spawnBladeLabel("blade-text-2", -0.13, midY, midD, -1, boardW, boardH, font, text); return; } if (archetype === "disc") { // Circular seal — built from three stacked plates approximating an // octagon silhouette. Hub box at the center holds the label. const centerY = SIGN_BOT - 1.3; const cD = glassOffset + 1.1; // center depth out from wall const R = 1.1; const halfT = 0.11; // Build the disc as five horizontal slabs of varying width to get a // round-ish vertical profile. const slabs = [ { yLo: centerY - R * 0.95, yHi: centerY - R * 0.55, hw: R * 0.55 }, { yLo: centerY - R * 0.55, yHi: centerY - R * 0.18, hw: R * 0.88 }, { yLo: centerY - R * 0.18, yHi: centerY + R * 0.18, hw: R }, { yLo: centerY + R * 0.18, yHi: centerY + R * 0.55, hw: R * 0.88 }, { yLo: centerY + R * 0.55, yHi: centerY + R * 0.95, hw: R * 0.55 }, ]; for (let i = 0; i < slabs.length; i++) { const s = slabs[i]; placeBox("disc-" + i, -halfT, s.yLo, cD - s.hw, halfT, s.yHi, cD + s.hw, plateMat); } // Accent rim — same silhouette pushed out 0.06m on each face. for (let i = 0; i < slabs.length; i++) { const s = slabs[i]; placeBox("disc-rim-" + i, -halfT - 0.05, s.yLo - 0.03, cD - s.hw - 0.04, halfT + 0.05, s.yLo + 0.02, cD + s.hw + 0.04, accentTrim); placeBox("disc-rim-t-" + i, -halfT - 0.05, s.yHi - 0.02, cD - s.hw - 0.04, halfT + 0.05, s.yHi + 0.03, cD + s.hw + 0.04, accentTrim); } // Mount: stout horizontal arm from wall to the back edge of the disc. mountArm(-0.02, cD - R + 0.1, 0.08, centerY + 0.15, 0.18); const boardW = R * 1.6; const boardH = R * 1.6; const text = label.toUpperCase(); const font = Math.max(0.65, Math.min(1.5, 3.8 / Math.max(1, text.length))) * bladeProfile.sizeMul; // y = vertical CENTER of the text label (anchor [0.5, 0.5] inside spawnBladeLabel). // Pass centerY directly so the text sits in the disc's middle, not above it. spawnBladeLabel("blade-text-1", 0.13, centerY, cD, +1, boardW, boardH, font, text); spawnBladeLabel("blade-text-2", -0.13, centerY, cD, -1, boardW, boardH, font, text); return; } if (archetype === "diamond") { // Rotated-square plate built as overlapping horizontal slabs forming a // diamond profile. Label printed level (un-rotated) on the face so it // reads even though the plate is tilted. const centerY = SIGN_BOT - 1.35; const cD = glassOffset + 1.0; const R = 1.1; const halfT = 0.10; // 7 slabs from bottom to top, each centered on cD, width = R * (1 - |t|) const N = 9; for (let i = 0; i < N; i++) { const t = (i / (N - 1)) * 2 - 1; // -1..+1 const hw = R * (1 - Math.abs(t)) + 0.04; const y = centerY + t * R; const yStep = (2 * R) / (N - 1); placeBox("diam-" + i, -halfT, y - yStep * 0.55, cD - hw, halfT, y + yStep * 0.55, cD + hw, plateMat); } // Accent border ring approximated with 4 edge bars at top/bottom/sides. placeBox("diam-tip-top", -halfT - 0.04, centerY + R - 0.08, cD - 0.18, halfT + 0.04, centerY + R + 0.10, cD + 0.18, accentTrim); placeBox("diam-tip-bot", -halfT - 0.04, centerY - R - 0.10, cD - 0.18, halfT + 0.04, centerY - R + 0.08, cD + 0.18, accentTrim); placeBox("diam-tip-left", -halfT - 0.04, centerY - 0.18, cD - R - 0.10, halfT + 0.04, centerY + 0.18, cD - R + 0.08, accentTrim); placeBox("diam-tip-right", -halfT - 0.04, centerY - 0.18, cD + R - 0.08, halfT + 0.04, centerY + 0.18, cD + R + 0.10, accentTrim); mountArm(-0.02, cD - R + 0.15, 0.07, centerY + R + 0.05, 0.14); const boardW = R * 1.2; const boardH = R * 1.2; const text = label.toUpperCase(); const font = Math.max(0.6, Math.min(1.3, 3.0 / Math.max(1, text.length))) * bladeProfile.sizeMul; // y = vertical center of the label; pass the diamond center directly. spawnBladeLabel("blade-text-1", 0.12, centerY, cD, +1, boardW, boardH, font, text); spawnBladeLabel("blade-text-2", -0.12, centerY, cD, -1, boardW, boardH, font, text); return; } if (archetype === "pennant") { // Triangular pennant — wide at the wall, tapered to a point outward. // Built from a few short horizontal plates that step inward in depth. const topY = SIGN_BOT - 0.2; const botY = topY - 1.6; const halfT = 0.10; const dStart = glassOffset + 0.05; const dEnd = glassOffset + 1.9; // Build 6 vertical strips along the depth axis; each strip's Y extent // shrinks linearly so the silhouette tapers to a point at dEnd. const N = 6; for (let i = 0; i < N; i++) { const tStart = i / N; const tEnd = (i + 1) / N; const d1 = dStart + (dEnd - dStart) * tStart; const d2 = dStart + (dEnd - dStart) * tEnd; const tMid = (tStart + tEnd) / 2; const halfH = (1 - tMid) * (topY - botY) / 2; const cy = (topY + botY) / 2; placeBox("penn-" + i, -halfT, cy - halfH, d1, halfT, cy + halfH, d2, plateMat); } // Accent top + bottom edge running the full pennant length. placeBox("penn-edge-top", -halfT - 0.05, topY - 0.03, dStart, halfT + 0.05, topY + 0.04, dStart + (dEnd - dStart) * 0.5, accentTrim); placeBox("penn-edge-bot", -halfT - 0.05, botY - 0.04, dStart, halfT + 0.05, botY + 0.03, dStart + (dEnd - dStart) * 0.5, accentTrim); mountArm(-0.02, dStart + 0.2, 0.06, topY + 0.12, 0.12); // Label sits in the fat half of the pennant (closer to the wall). const labelMidD = dStart + (dEnd - dStart) * 0.28; const boardW = (dEnd - dStart) * 0.55; const boardH = (topY - botY) * 0.75; const text = label.toUpperCase(); const font = Math.max(0.55, Math.min(1.1, 3.4 / Math.max(2, text.length))) * bladeProfile.sizeMul; const midY = (botY + topY) / 2; spawnBladeLabel("blade-text-1", 0.12, midY, labelMidD, +1, boardW, boardH, font, text); spawnBladeLabel("blade-text-2", -0.12, midY, labelMidD, -1, boardW, boardH, font, text); return; } if (archetype === "double-stack") { // Two small horizontal plaques stacked with a small gap between. Reads // like a sub-shop or "STORE / EST 1992" pair. const halfT = 0.10; const dStart = glassOffset + 0.05; const dEnd = glassOffset + 1.5; const topPlateTop = SIGN_BOT - 0.2; const topPlateBot = topPlateTop - 0.85; const gap = 0.2; const botPlateTop = topPlateBot - gap; const botPlateBot = botPlateTop - 0.7; placeBox("stack-top", -halfT, topPlateBot, dStart, halfT, topPlateTop, dEnd, plateMat); placeBox("stack-bot", -halfT, botPlateBot, dStart, halfT, botPlateTop, dEnd, altPlateMat); // Accent rim around each plate. placeBox("stack-top-rim-t", -halfT - 0.04, topPlateTop - 0.04, dStart - 0.02, halfT + 0.04, topPlateTop + 0.04, dEnd + 0.04, accentTrim); placeBox("stack-top-rim-b", -halfT - 0.04, topPlateBot - 0.04, dStart - 0.02, halfT + 0.04, topPlateBot + 0.04, dEnd + 0.04, accentTrim); placeBox("stack-bot-rim-b", -halfT - 0.04, botPlateBot - 0.04, dStart - 0.02, halfT + 0.04, botPlateBot + 0.04, dEnd + 0.04, accentTrim); mountArm(-0.02, dStart + 0.15, 0.06, topPlateTop + 0.10, 0.12); // Vertical strap between the two plates (the "hanging" feel). placeBox("stack-strap-l", -halfT - 0.02, botPlateTop, dStart + 0.15, -halfT + 0.02, topPlateBot, dStart + 0.25, baseTrim); placeBox("stack-strap-r", halfT - 0.02, botPlateTop, dEnd - 0.25, halfT + 0.02, topPlateBot, dEnd - 0.15, baseTrim); // Top plate gets the main label, bottom plate gets a tagline. const boardW = 1.25; const text = label.toUpperCase(); const sub = "EST '92"; const fontTop = Math.max(0.5, Math.min(0.85, 2.9 / Math.max(2, text.length))) * bladeProfile.sizeMul; const fontBot = 0.35; const midDStack = (dStart + dEnd) / 2; // y = vertical center of each plate; pass plate-center directly. const topMidY = (topPlateBot + topPlateTop) / 2; const botMidY = (botPlateBot + botPlateTop) / 2; spawnBladeLabel("blade-text-1", 0.12, topMidY, midDStack, +1, boardW, 0.7, fontTop, text); spawnBladeLabel("blade-text-2", -0.12, topMidY, midDStack, -1, boardW, 0.7, fontTop, text); spawnBladeLabel("blade-sub-1", 0.12, botMidY, midDStack, +1, boardW, 0.55, fontBot, sub); spawnBladeLabel("blade-sub-2", -0.12, botMidY, midDStack, -1, boardW, 0.55, fontBot, sub); return; } if (archetype === "letter-stack") { // Vertical letter column — like an old hotel sign. One letter per row. // Limited to 4 letters max so it fits between sign band and head height. const rawText = label.toUpperCase().replace(/[^A-Z0-9&!?$★→♪]/g, ""); const letters = (rawText || "?").slice(0, 4).split(""); const halfT = 0.11; const dStart = glassOffset + 0.05; const dEnd = glassOffset + 1.1; const rowH = 0.6; const totalH = letters.length * rowH; const topY = SIGN_BOT - 0.25; const botY = topY - totalH; // Backing plate runs the full vertical column. placeBox("blade", -halfT, botY, dStart, halfT, topY, dEnd, plateMat); // Per-letter "tile" rim — accent dividers between letters. for (let i = 1; i < letters.length; i++) { const yDiv = topY - i * rowH; placeBox("ls-div-" + i, -halfT - 0.05, yDiv - 0.04, dStart - 0.02, halfT + 0.05, yDiv + 0.04, dEnd + 0.04, accentTrim); } // Top and bottom rim. placeBox("ls-rim-top", -halfT - 0.06, topY - 0.05, dStart - 0.02, halfT + 0.06, topY + 0.05, dEnd + 0.06, accentTrim); placeBox("ls-rim-bot", -halfT - 0.06, botY - 0.05, dStart - 0.02, halfT + 0.06, botY + 0.05, dEnd + 0.06, accentTrim); mountArm(-0.02, dStart + 0.15, 0.06, topY + 0.12, 0.12); // One label per row, on each side. const midD = (dStart + dEnd) / 2; const boardW = dEnd - dStart - 0.05; const boardH = rowH * 0.92; const font = 0.55; for (let i = 0; i < letters.length; i++) { // cy is the row's vertical CENTER (mid between its two divider lines). // spawnBladeLabel expects y as the text center too — pass cy directly so // each letter sits in its row middle and dividers fall above/below, not through. const cy = topY - (i + 0.5) * rowH; spawnBladeLabel("ls-text-1-" + i, 0.12, cy, midD, +1, boardW, boardH, font, letters[i]); spawnBladeLabel("ls-text-2-" + i, -0.12, cy, midD, -1, boardW, boardH, font, letters[i]); } return; } // Fallback (should never hit, but defensive): tall flag. const bladeTopY = SIGN_BOT - 0.2; const bladeBotY = bladeTopY - 2.4; placeBox("blade", -0.12, bladeBotY, glassOffset + 0.05, 0.12, bladeTopY, glassOffset + 1.6, plateMat); mountArm(-0.02, glassOffset + 0.2, 0.06, bladeTopY + 0.18, 0.13); } // ------------------------------------------------------------------------- // Storefront builder // ------------------------------------------------------------------------- // Build one storefront against a wall face. // Args: // objectApi, P (parent id), tag (unique string prefix), nameIndex // axis: 'z' if the wall plane is perpendicular to z (face spans along x), // 'x' if the wall plane is perpendicular to x (face spans along z). // along: position of the storefront's center along the wall's spanning axis. // width: storefront width along the wall. // plane: z (for axis='z') or x (for axis='x') of the wall plane. // facing: +1 if the storefront faces +plane direction, -1 if -plane direction. // palette: palette object. // storeName: name string. // options: { deeperEntry?: bool, dark?: bool, saleTag?: string|null, // panelCount?: number, hasBlade?: bool } function buildStorefront(objectApi, P, tag, axis, along, width, plane, facing, palette, storeName, options) { const opts = options || {}; const dark = !!opts.dark; const panelCount = opts.panelCount || (width > 12 ? 4 : 3); const deeper = !!opts.deeperEntry; const saleTag = opts.saleTag || null; const hasBlade = opts.hasBlade !== false; // Geometry of the storefront pocket. Depth `d` in placeBox is measured from // the wall centerline outward into the corridor (multiplied by `facing`). // d = 0 → wall centerline // d = wallHalf → wall's corridor-facing finish // d = glassOffset → glass plane (the window) // Glass is pushed out 1.4m past the wall face so there's a real diorama // pocket between the wall and the glass. The fake interior parallax // (backlight, shelves, gondolas, products, floor tile, side soffits, grate // bars) all live INSIDE this pocket — between `pocketBackD` and // `pocketFrontD` — so when the player looks through the glass they see a // shallow 3D shop, not floating shapes out in the corridor. const wallHalf = WALL_T / 2; // 0.75 const glassOffset = wallHalf + 1.4; // 2.15 — glass plane const pocketBackD = wallHalf + 0.02; // 0.77 — flush against wall const pocketFrontD = glassOffset - 0.08; // 2.07 — just behind glass const pocketMidD = (pocketBackD + pocketFrontD) / 2; // 1.42 — mid pocket const recessDepth = deeper ? 1.0 : 0.0; // alcove cut depth (in pocket) // Heights const KICK_H = 0.55; // base kickplate const SIGN_TOP = WALL_H - 0.05; // sign band top sits just below ceiling const SIGN_H = 1.5; // sign band height const SIGN_BOT = SIGN_TOP - SIGN_H; // 6.45 const GLASS_BOT_Y = KICK_H; const GLASS_TOP_Y = SIGN_BOT - 0.05; // Helpers: build a box in WORLD coords aligned to face frame. // For axis='z' (wall plane = z=plane), the face spans along x. // For axis='x' (wall plane = x=plane), the face spans along z. // // We work in (a, d) where a = along-axis offset from `along`, d = depth from // the wall plane toward the corridor (positive d = corridor side when // facing=+1; we multiply by `facing` to get world delta on the plane axis). function placeBox(name, a1, y1, d1, a2, y2, d2, mat, extra) { // Convert to world. if (axis === "z") { const x1 = along + Math.min(a1, a2); const x2 = along + Math.max(a1, a2); const z1 = plane + Math.min(d1 * facing, d2 * facing); const z2 = plane + Math.max(d1 * facing, d2 * facing); p.box(objectApi, tag + "-" + name, x1, y1, z1, x2, y2, z2, mat, { parent: P, ...(extra || {}) }); } else { const z1 = along + Math.min(a1, a2); const z2 = along + Math.max(a1, a2); const x1 = plane + Math.min(d1 * facing, d2 * facing); const x2 = plane + Math.max(d1 * facing, d2 * facing); p.box(objectApi, tag + "-" + name, x1, y1, z1, x2, y2, z2, mat, { parent: P, ...(extra || {}) }); } } // Spawn a text label as a child sign on the band. // `boardW` is the readable board width along the wall, `boardH` is the board // height. `text` is the string to print. // `style` (optional): { letterSpacing, outlineWidth, outlineColor, lineHeight, maxWidth } function placeSignLabel(name, a, y, d, text, color, boardW, boardH, fontSize, boardColor, style) { let worldX, worldZ, yaw; if (axis === "z") { worldX = along + a; worldZ = plane + d * facing; // Sign text emits from the board's local +Z face. We need that face to // point AT the player (i.e. world +Z when facing=+1, world -Z when -1). // yaw=0 leaves local +Z aligned with world +Z; yaw=180 flips it. yaw = facing > 0 ? 0 : 180; } else { worldZ = along + a; worldX = plane + d * facing; // facing=+1 wants text face → +X (yaw=90); facing=-1 wants -X (yaw=270). yaw = facing > 0 ? 90 : 270; } const st = style || {}; // ENGINE QUIRK: text.offset is added to text position in WORLD space (not // rotated by the object's quaternion — see render_v2/state/text.ts). The // engine auto-adds [0, height/2, depth/2 + bias] to whatever userOffset we // pass. That default only pushes text forward of the sign panel for yaw=0. // For other yaws (180/90/270) the +Z push either drops text behind the // panel or rakes it sideways. We compensate so text sits ~0.04m in front // of the panel in the player-facing direction in WORLD coords. const FORWARD = 0.04; // how far in front of the panel to float text const ENGINE_Z_DEFAULT = 0.022; // depth*0.5 (0.02) + bias (0.002) let offX = 0; let offZ = -ENGINE_Z_DEFAULT; // start by zeroing the engine's auto Z push if (axis === "z") { offZ += FORWARD * facing; // push toward corridor } else { offX += FORWARD * facing; // push toward corridor along X } const textSpec = { content: text, size: fontSize, color: color || "oklch(0.98 0 0)", align: "center", anchor: [0.5, 0.5], offset: [offX, 0, offZ], }; if (st.letterSpacing !== undefined) textSpec.letterSpacing = st.letterSpacing; if (st.outlineWidth !== undefined && st.outlineWidth > 0) { textSpec.outlineWidth = st.outlineWidth; textSpec.outlineColor = st.outlineColor || "oklch(0.18 0.02 60)"; } if (st.lineHeight !== undefined) textSpec.lineHeight = st.lineHeight; if (st.maxWidth !== undefined) textSpec.maxWidth = st.maxWidth; // Sign panel material MUST match the band material exactly — otherwise // the panel reads as a darker rectangle floating in front of the band // (which is what nickd called "a dark box behind the text"). signBandMat // uses emissiveIntensity 0.6; matching it makes the panel disappear into // the band visually. const panelMat = signBandMat(boardColor || "oklch(0.15 0.02 60)"); objectApi.spawn({ id: tag + "-" + name, parent: P, properties: { feetPosition: { x: worldX, y: y - boardH / 2, z: worldZ }, rotation: { yaw }, sign: { width: boardW, height: boardH, depth: 0.04, material: panelMat, text: textSpec, }, }, }); } // --- 1. Sign band over the entrance --- // Sign band sits ON the corridor face of the wall (not buried in the wall // thickness). Wall corridor face is at d = wallHalf; mount the band starting // there and extending slightly into the corridor. const bandMountD = wallHalf; placeBox("signband-bg", -width / 2, SIGN_BOT, bandMountD, width / 2, SIGN_TOP, bandMountD + 0.18, signBandMat(palette.band)); // Top trim cap on sign band. placeBox("signband-cap", -width / 2 - 0.05, SIGN_TOP - 0.08, bandMountD - 0.02, width / 2 + 0.05, SIGN_TOP + 0.05, bandMountD + 0.22, trimMat(palette.trim)); // Bottom trim of sign band. placeBox("signband-base", -width / 2 - 0.05, SIGN_BOT - 0.05, bandMountD - 0.02, width / 2 + 0.05, SIGN_BOT + 0.05, bandMountD + 0.22, trimMat(palette.trim)); // Big readable store name on the sign band. // Per-store style profile drives case, spacing, outline weight, ornaments. // Size aims big for corridor readability; long names wrap to 2 lines via // maxWidth instead of shrinking into illegibility. We prefer the profile // the caller resolved (with adjacency-uniqueness already applied) over the // raw curated/hash pick. const profile = opts.profile || profileFor(storeName, null); // Sanitize the visible name to ASCII printable so we never spawn a // missing-glyph placeholder on the band even if a curated name gains a // special character upstream. const displayName = asciiSafe(applyCase(storeName, profile)) || storeName; // Readable region: pull in slightly from the band edges so text breathes. const boardW = width - 0.6; const boardH = SIGN_H - 0.15; // jersey10 sizing: the `size` value is the font's EM height. Cap height is // roughly 0.55 of EM and visible glyph height roughly 0.62 of EM. To fill // ~85% of the band height we need size ≈ boardH * 1.4. Char advance for // jersey10 caps is ~0.55 * size; add profile letterSpacing as a fraction. const CHAR_ADVANCE = 0.55; const advancePerChar = CHAR_ADVANCE + (profile.letterSpacing || 0); const usableW = boardW * 0.94; const fitOneLine = usableW / Math.max(5, displayName.length) / advancePerChar; const heightCap = boardH * 1.4; // size that gives cap-height ≈ 0.85 * boardH // sizeMul is a PREFERENCE — it can push toward the height cap, but it must // never push past the one-line width fit, or the band wraps to two lines // (the bug nickd just caught with athletic/shout profiles on long names). let charSize = Math.min(heightCap, fitOneLine) * profile.sizeMul; charSize = Math.min(charSize, fitOneLine, heightCap); let lineHeight = 1.0; let wantWrap = false; // If we'd shrink below ~1.0 to fit one line, wrap to two lines so the name // stays bold and readable from corridor distance. if (charSize < 1.0 && displayName.includes(" ")) { const twoLineFit = usableW / Math.max(5, displayName.length / 2) / advancePerChar; charSize = Math.min(boardH * 0.78, twoLineFit * profile.sizeMul); charSize = Math.min(charSize, twoLineFit); lineHeight = 0.95; wantWrap = true; } charSize = Math.max(0.85, Math.min(2.4, charSize)); // Only pass maxWidth when we DELIBERATELY want wrapping. Otherwise leave it // unset so a slight overrun doesn't snap a name to two lines. const maxWidth = wantWrap ? usableW : undefined; placeSignLabel("name", 0, SIGN_BOT + SIGN_H / 2, bandMountD + 0.21, displayName, palette.accent, boardW, boardH, charSize, palette.band, { letterSpacing: profile.letterSpacing, outlineWidth: profile.outlineWidth, outlineColor: outlineColorFor(palette.accent, palette.band), lineHeight, maxWidth, }); // --- 2. Kickplate (base trim) --- placeBox("kick", -width / 2, 0, 0, width / 2, KICK_H, 0.16, kickplateMat(palette.trim)); // --- 3. Glass facade — divided into panels by vertical mullions --- // If `deeper`, the middle panel is recessed inward; an alcove with side glass. const glassMat = dark ? GLASS_DARK_MAT : GLASS_MAT; const mullionT = 0.18; const mullionMat = trimMat(palette.trim); if (deeper && panelCount >= 3) { // Two side glass panels + recessed alcove in the middle. const sideW = (width - 4.0) / 2; // 4m wide entry alcove const alcoveHalfW = 2.0; // Left glass panel placeBox("glass-l", -width / 2 + mullionT, GLASS_BOT_Y, glassOffset - 0.02, -alcoveHalfW - mullionT / 2, GLASS_TOP_Y, glassOffset + 0.02, glassMat); // Right glass panel placeBox("glass-r", alcoveHalfW + mullionT / 2, GLASS_BOT_Y, glassOffset - 0.02, width / 2 - mullionT, GLASS_TOP_Y, glassOffset + 0.02, glassMat); // Alcove geometry: the central entry cuts INWARD from the glass plane by // `recessDepth` into the pocket. Alcove back is at `glassOffset - // recessDepth`, alcove front lines up with the rest of the glass at // `glassOffset`. const alcoveBackD = glassOffset - recessDepth; // 1.15 — pocket-side const alcoveFrontD = glassOffset; // 2.15 — glass plane // Vertical mullions framing the alcove opening (run from alcove back to // the glass plane). placeBox("mul-al-l", -alcoveHalfW - mullionT, KICK_H, alcoveBackD, -alcoveHalfW, SIGN_BOT, alcoveFrontD + 0.04, mullionMat); placeBox("mul-al-r", alcoveHalfW, KICK_H, alcoveBackD, alcoveHalfW + mullionT, SIGN_BOT, alcoveFrontD + 0.04, mullionMat); // Alcove side walls — angled trim from glass plane back into the pocket. placeBox("alcove-side-l", -alcoveHalfW - 0.05, KICK_H, alcoveBackD + 0.02, -alcoveHalfW + 0.08, SIGN_BOT, alcoveFrontD, trimMat(palette.trim)); placeBox("alcove-side-r", alcoveHalfW - 0.08, KICK_H, alcoveBackD + 0.02, alcoveHalfW + 0.05, SIGN_BOT, alcoveFrontD, trimMat(palette.trim)); // Outer mullions on the glass plane (frame edges of the side glass panels). placeBox("mul-out-l", -width / 2, KICK_H, glassOffset - 0.02, -width / 2 + mullionT, SIGN_BOT, glassOffset + 0.04, mullionMat); placeBox("mul-out-r", width / 2 - mullionT, KICK_H, glassOffset - 0.02, width / 2, SIGN_BOT, glassOffset + 0.04, mullionMat); // Alcove floor pad — tile from alcove back forward to glass plane. placeBox("alcove-floor", -alcoveHalfW, 0.0, alcoveBackD + 0.02, alcoveHalfW, 0.04, alcoveFrontD, INTERIOR_FLOOR_MAT); // Mid horizontal mullion (transom) on the side panels only const transomY = KICK_H + (GLASS_TOP_Y - KICK_H) * 0.55; placeBox("transom-l", -width / 2 + mullionT, transomY - mullionT / 2, glassOffset - 0.02, -alcoveHalfW - mullionT / 2, transomY + mullionT / 2, glassOffset + 0.04, mullionMat); placeBox("transom-r", alcoveHalfW + mullionT / 2, transomY - mullionT / 2, glassOffset - 0.02, width / 2 - mullionT, transomY + mullionT / 2, glassOffset + 0.04, mullionMat); } else { // Flat glass with panelCount vertical mullions. const innerW = width; for (let i = 0; i <= panelCount; i++) { const a = -innerW / 2 + (innerW * i) / panelCount; placeBox("mul-" + i, a - mullionT / 2, KICK_H, glassOffset - 0.02, a + mullionT / 2, SIGN_BOT, glassOffset + 0.04, mullionMat); } for (let i = 0; i < panelCount; i++) { const a1 = -innerW / 2 + (innerW * i) / panelCount + mullionT / 2; const a2 = -innerW / 2 + (innerW * (i + 1)) / panelCount - mullionT / 2; placeBox("glass-" + i, a1, GLASS_BOT_Y, glassOffset - 0.01, a2, GLASS_TOP_Y, glassOffset + 0.02, glassMat); } // Mid horizontal mullion (transom) const transomY = KICK_H + (GLASS_TOP_Y - KICK_H) * 0.55; placeBox("transom", -width / 2 + mullionT, transomY - mullionT / 2, glassOffset - 0.02, width / 2 - mullionT, transomY + mullionT / 2, glassOffset + 0.04, mullionMat); } // --- 4. Closed security gate for dark/shuttered stores --- // The grate sits inside the pocket, just behind the glass plane, so the // player sees bars on the inside of the locked window. if (dark) { const grateBackD = glassOffset - 0.18; const grateFrontD = glassOffset - 0.10; // Tight bars: a row of thin vertical cylinders just behind the glass. const barCount = Math.max(5, Math.round(width / 0.4)); for (let i = 0; i < barCount; i++) { const a = -width / 2 + 0.4 + (i / (barCount - 1)) * (width - 0.8); placeBox("bar-" + i, a - 0.04, KICK_H, grateBackD, a + 0.04, GLASS_TOP_Y, grateFrontD, GRATE_MAT); } // Crossbar placeBox("bar-cross", -width / 2 + 0.3, KICK_H + 1.6, grateBackD, width / 2 - 0.3, KICK_H + 1.75, grateFrontD, GRATE_MAT); } // --- 5. Fake parallax interior (inside the pocket, BEHIND the glass) --- // All these pieces live between `pocketBackD` (flush against the wall) and // `pocketFrontD` (just behind the glass plane). Items closer to the wall // sit at smaller d, items closer to the glass sit at larger d. We need the // pocket even for "dark" stores so the security grate has a backdrop. // Interior floor strip — tile band covering the full pocket depth. placeBox("int-floor", -width / 2 + 0.2, 0.0, pocketBackD, width / 2 - 0.2, 0.05, pocketFrontD, INTERIOR_FLOOR_MAT); // Back wall — warm-tinted emissive panel flush against the wall face. This // is the "interior glow" you see deepest into the shop. placeBox("backlight", -width / 2 + 0.4, KICK_H, pocketBackD, width / 2 - 0.4, SIGN_BOT - 0.4, pocketBackD + 0.05, backlightMat(palette.warm, dark)); // Side walls (soft tint), span the full pocket depth along each side. placeBox("int-side-l", -width / 2 + 0.1, KICK_H, pocketBackD, -width / 2 + 0.18, SIGN_BOT - 0.2, pocketFrontD, SOFFIT_MAT); placeBox("int-side-r", width / 2 - 0.18, KICK_H, pocketBackD, width / 2 - 0.1, SIGN_BOT - 0.2, pocketFrontD, SOFFIT_MAT); // Ceiling soffit inside the pocket. placeBox("int-ceil", -width / 2 + 0.1, SIGN_BOT - 0.25, pocketBackD, width / 2 - 0.1, SIGN_BOT - 0.18, pocketFrontD, SOFFIT_MAT); // Shelves at varying depths. Back shelves hug the wall; gondolas sit in the // middle of the pocket. const shelfBack = pocketBackD + 0.10; // 0.87 — just in front of backlight const shelfMid = pocketMidD; // 1.42 — mid pocket // Back shelf (long, full width) placeBox("shelf-back-low", -width / 2 + 0.6, 0.6, shelfBack, width / 2 - 0.6, 0.7, shelfBack + 0.30, SHELF_MAT); placeBox("shelf-back-mid", -width / 2 + 0.6, 1.8, shelfBack, width / 2 - 0.6, 1.9, shelfBack + 0.30, SHELF_MAT); // Mid shelf — gondola-style islands in the middle of the pocket. const gondolaCount = Math.max(1, Math.round(width / 4.5)); for (let i = 0; i < gondolaCount; i++) { const cx = -width / 2 + (width * (i + 0.5)) / gondolaCount; placeBox("gondola-" + i, cx - 0.5, 0.05, shelfMid - 0.22, cx + 0.5, 1.45, shelfMid + 0.22, SHELF_MAT); } // Products on the shelves — colored cubes. const productColors = [ palette.neon, palette.warm, palette.band, palette.accent, palette.trim, "oklch(0.85 0.18 25)", "oklch(0.8 0.16 195)", "oklch(0.9 0.18 95)", "oklch(0.7 0.2 320)", "oklch(0.78 0.14 145)", ]; const productRowCount = Math.floor(width / 0.65); for (let i = 0; i < productRowCount; i++) { const a = -width / 2 + 0.7 + i * 0.62 + (i % 3) * 0.05; if (a > width / 2 - 0.7) break; const c1 = productColors[(i * 7) % productColors.length]; const c2 = productColors[(i * 11 + 3) % productColors.length]; // Back-shelf bottom row product (sits on top of the low back shelf) placeBox("prod-bl-" + i, a - 0.13, 0.7, shelfBack + 0.03, a + 0.13, 1.05 + ((i * 13) % 7) * 0.04, shelfBack + 0.27, productMat(c1)); // Back-shelf mid row product (sits on top of the mid back shelf) placeBox("prod-bm-" + i, a - 0.13, 1.9, shelfBack + 0.03, a + 0.13, 2.2 + ((i * 17) % 5) * 0.05, shelfBack + 0.27, productMat(c2)); } // Gondola products — stacked on top of each gondola island. for (let i = 0; i < gondolaCount; i++) { const cx = -width / 2 + (width * (i + 0.5)) / gondolaCount; for (let j = 0; j < 3; j++) { const dx = (j - 1) * 0.30; const c = productColors[((i * 5) + j * 3) % productColors.length]; placeBox("gp-" + i + "-" + j, cx + dx - 0.12, 1.45, shelfMid - 0.15, cx + dx + 0.12, 1.75 + ((i + j) % 3) * 0.06, shelfMid + 0.15, productMat(c)); } } // --- 6. Blade sign (perpendicular flag over the entrance) --- // The hasBlade decision is now hash-deterministic per store name (set in // populateFace), so ~55% of stores get a blade. The archetype is also // hash-picked so each storefront's blade reads as "the sign shop the owner // chose" rather than the same cookie-cutter flag every time. if (hasBlade) { buildBlade( placeBox, objectApi, P, tag, axis, along, plane, facing, palette, storeName, SIGN_BOT, glassOffset, profile, ); } // --- 7. Sale/grand-opening callout taped to glass (sparse) --- if (saleTag) { // Small angled sign mounted on the glass. const cx = (rng2(tag) - 0.5) * (width * 0.4); const tagY = 2.4 + rng2(tag + "y") * 1.5; placeBox("sale-bg", cx - 0.9, tagY - 0.45, glassOffset + 0.03, cx + 0.9, tagY + 0.45, glassOffset + 0.06, { color: "oklch(0.95 0.2 95)", emissive: "oklch(0.92 0.22 95)", emissiveIntensity: 0.4, roughness: 0.6 }); // Sale text let saleWorldX, saleWorldZ, saleYaw; if (axis === "z") { saleWorldX = along + cx; saleWorldZ = plane + facing * (glassOffset + 0.07); saleYaw = facing > 0 ? 180 : 0; } else { saleWorldZ = along + cx; saleWorldX = plane + facing * (glassOffset + 0.07); saleYaw = facing > 0 ? 270 : 90; } objectApi.spawn({ id: tag + "-saletag", parent: P, properties: { feetPosition: { x: saleWorldX, y: tagY - 0.45, z: saleWorldZ }, rotation: { yaw: saleYaw, roll: -8 }, sign: { width: 1.7, height: 0.85, depth: 0.02, material: { color: "oklch(0.95 0.2 95)", roughness: 0.55, emissive: "oklch(0.95 0.22 95)", emissiveIntensity: 0.4 }, text: { content: saleTag, size: 0.45, color: "oklch(0.18 0.08 25)", align: "center", anchor: [0.5, 0.5], }, }, }, }); } } // Mini deterministic noise for in-storefront jitter (sale callouts etc). function rng2(seed) { let h = 2166136261; for (let i = 0; i < seed.length; i++) { h ^= seed.charCodeAt(i); h = Math.imul(h, 16777619); } return ((h >>> 0) % 100000) / 100000; } // ------------------------------------------------------------------------- // Face populator // ------------------------------------------------------------------------- function populateFace(objectApi, P, faceTag, axis, alongMin, alongMax, plane, facing, seed, nameCursor) { const rng = mkRand(seed); const totalLen = alongMax - alongMin; const widths = planWidths(totalLen, rng); let cursor = alongMin; let lastPaletteIdx = -1; let lastProfileId = null; let count = 0; for (let i = 0; i < widths.length; i++) { const w = widths[i]; const centerAlong = cursor + w / 2; // Palette — never the same as the previous. let paletteIdx; let attempts = 0; do { paletteIdx = Math.floor(rng() * PALETTES.length); attempts++; } while (paletteIdx === lastPaletteIdx && attempts < 6); lastPaletteIdx = paletteIdx; const palette = PALETTES[paletteIdx]; // Name — pick deterministically off the global name cursor so we don't // repeat across faces. nameCursor is a ref object {v:n}. const storeName = STORE_NAMES[nameCursor.v % STORE_NAMES.length]; nameCursor.v++; // Resolve the sign typography profile once per store. Curated table // first; falls back to a stable hash, skipping the previous neighbor's // profile so adjacent storefronts on the same face never share a font // personality. const profile = profileFor(storeName, lastProfileId); lastProfileId = profile.id; // Options const deeperEntry = rng() < 0.28 && w >= 9.5; const dark = rng() < 0.10; // ~10% shuttered const saleTag = (!dark && rng() < 0.18) ? pick(SALE_TAGS, rng) : null; const panelCount = w > 12 ? (rng() < 0.5 ? 4 : 3) : (rng() < 0.5 ? 2 : 3); // Blade decision: hash-based so ~55% of stores get a blade and the // pattern is stable across reloads (SUNCOAST always gets one, GENERIC // SHOP never does — or whatever the hash assigns). This gives the // corridor that "different small business made different choices" feel // — flag, nothing, flag, flag, nothing, flag — instead of every shop // screaming. let hasBlade = shouldHaveBlade(storeName); // Hard override: suppress the blade near the rotunda even if the hash // said yes — the flag would poke into the curved rotunda wall. if (axis === "z" && (plane === 18 || plane === 40)) { if (Math.abs(centerAlong) < 12.5) hasBlade = false; } buildStorefront( objectApi, P, faceTag + "-s" + i, axis, centerAlong, w, plane, facing, palette, storeName, { deeperEntry, dark, saleTag, panelCount, hasBlade, profile } ); cursor += w; count++; } return count; } // ------------------------------------------------------------------------- // Main spawn entry // ------------------------------------------------------------------------- export function onSpawn(objectApi) { const P = objectApi.id; const nameCursor = { v: 0 }; const counts = {}; // --- MID CORRIDOR (hero) --- // NW south face: z=18, x ∈ [-59.6, -7], facing +Z (toward mid corridor). counts.nwS = populateFace(objectApi, P, "nw-S", "z", NW.xMin, NW.xMax, NW.zMax, +1, 9001, nameCursor); // NE south face: z=18, x ∈ [7, 59.6], facing +Z. counts.neS = populateFace(objectApi, P, "ne-S", "z", NE.xMin, NE.xMax, NE.zMax, +1, 9002, nameCursor); // SW north face: z=40, x ∈ [-59.6, -7], facing -Z. counts.swN = populateFace(objectApi, P, "sw-N", "z", SW.xMin, SW.xMax, SW.zMin, -1, 9003, nameCursor); // SE north face: z=40, x ∈ [7, 59.6], facing -Z. counts.seN = populateFace(objectApi, P, "se-N", "z", SE.xMin, SE.xMax, SE.zMin, -1, 9004, nameCursor); // --- SIDE CHANNELS --- // NW west face: x=-59.6, z ∈ [-68, 18], facing -X (toward x=-75 channel). counts.nwW = populateFace(objectApi, P, "nw-W", "x", NW.zMin, NW.zMax, NW.xMin, -1, 9005, nameCursor); // NE east face: x=59.6, z ∈ [-68, 18], facing +X. counts.neE = populateFace(objectApi, P, "ne-E", "x", NE.zMin, NE.zMax, NE.xMax, +1, 9006, nameCursor); // SW west face: x=-59.6, z ∈ [40, 68], facing -X. counts.swW = populateFace(objectApi, P, "sw-W", "x", SW.zMin, SW.zMax, SW.xMin, -1, 9007, nameCursor); // SE east face: x=59.6, z ∈ [40, 68], facing +X. counts.seE = populateFace(objectApi, P, "se-E", "x", SE.zMin, SE.zMax, SE.xMax, +1, 9008, nameCursor); // --- N/S CONCOURSES --- // NW north face: z=-68, x ∈ [-59.6, -7], facing -Z (toward north concourse). counts.nwN = populateFace(objectApi, P, "nw-N", "z", NW.xMin, NW.xMax, NW.zMin, -1, 9009, nameCursor); // NE north face: z=-68, x ∈ [7, 59.6], facing -Z. counts.neN = populateFace(objectApi, P, "ne-N", "z", NE.xMin, NE.xMax, NE.zMin, -1, 9010, nameCursor); // SW south face: z=68, x ∈ [-59.6, -7], facing +Z. counts.swS = populateFace(objectApi, P, "sw-S", "z", SW.xMin, SW.xMax, SW.zMax, +1, 9011, nameCursor); // SE south face: z=68, x ∈ [7, 59.6], facing +Z. counts.seS = populateFace(objectApi, P, "se-S", "z", SE.xMin, SE.xMax, SE.zMax, +1, 9012, nameCursor); objectApi.setState({ storefrontCounts: counts, total: nameCursor.v }); }