/* ────────────────────────────────────────────────────────────────── potionpost — SVG potion renderer Mirrors petalpost's /shared/bouquet.jsx in role: - export for the live preview - export window.INGREDIENT_VOCAB and window.VESSEL_VOCAB for the design panel's pickers (single source of truth for names + glyphs). ────────────────────────────────────────────────────────────────── */ // Seeded RNG (mulberry32) — deterministic per-card placement so the live // preview matches the printed card front, but each card looks different. function rng(seed){ let s = seed | 0; return () => { s |= 0; s = (s + 0x6D2B79F5) | 0; let t = s; t = Math.imul(t ^ (t >>> 15), 1 | t); t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t; return ((t ^ (t >>> 14)) >>> 0) / 4294967296; }; } // ────────────────────────────────────────────────────────────────── // VESSELS — each defines its outer silhouette, the inner liquid clip, // and how it sits in the 320x420 viewBox. cx,cy are the *liquid surface* // center so we can place floating ingredients consistently. // ────────────────────────────────────────────────────────────────── const VESSELS = { cauldron: { name: 'cauldron', lt: 'cast iron', // liquid surface ellipse: cx 160, cy 245, rx 92, ry 14 surface: { cx: 160, cy: 245, rx: 92, ry: 14 }, // inside polygon (for ingredient clipping) inside: 'M68,245 Q60,300 92,335 Q160,365 228,335 Q260,300 252,245 Z', // height of liquid column for the gradient body: { top: 230, bottom: 350 }, // picker glyph: simplified glyph: ( ), // SVG: back layer (behind liquid) + front layer (rim, handles) back: ( {/* base shadow on ground */} {/* legs / feet */} {/* body (back curve, behind liquid) */} {/* inner shadow at rim */} ), front: ( {/* rim ellipse — outer */} {/* rim band */} {/* handles */} {/* subtle highlight on body */} ), }, flask: { name: 'flask', lt: 'erlenmeyer', // ~70% full: the liquid surface sits down in the wide cone, and its top // corners ride the actual glass walls (138→96 left, 182→224 right over // y 238→335) so the brew never bulges past the slanted shoulders. surface: { cx: 160, cy: 272, rx: 36, ry: 7 }, inside: 'M124,272 L96,335 Q120,354 160,354 Q200,354 224,335 L196,272 Z', body: { top: 260, bottom: 350 }, glyph: ( ), back: ( {/* glass body — solid back fill */} {/* surface ellipse (behind liquid) — matches the lowered liquid level */} ), front: ( {/* glass outline */} {/* neck rim */} {/* glass shine */} ), }, vial: { name: 'vial', lt: 'test tube', surface: { cx: 160, cy: 220, rx: 22, ry: 5 }, inside: 'M138,220 L138,330 Q138,348 160,348 Q182,348 182,330 L182,220 Z', body: { top: 200, bottom: 348 }, glyph: ( ), back: ( ), front: ( {/* cork stopper */} {/* string tie around neck */} {/* shine */} ), }, gourd: { name: 'gourd', lt: 'calabash', surface: { cx: 160, cy: 250, rx: 38, ry: 7 }, inside: 'M122,250 Q104,300 124,340 Q160,360 196,340 Q216,300 198,250 Z', body: { top: 240, bottom: 355 }, glyph: ( ), back: ( {/* gourd body */} {/* upper bulb */} {/* tie line */} ), front: ( {/* cork */} {/* leather strap */} {/* highlight */} ), }, jar: { name: 'jar', lt: 'apothecary', surface: { cx: 160, cy: 240, rx: 56, ry: 8 }, inside: 'M104,240 L104,330 Q104,348 122,350 L198,350 Q216,348 216,330 L216,240 Z', body: { top: 230, bottom: 350 }, glyph: ( ), back: ( {/* jar body */} ), front: ( {/* lid */} {/* label */} tincture № vii {/* shine */} ), }, }; // ────────────────────────────────────────────────────────────────── // BREW colors. The "tint" is the body color; we derive a lighter top // for the meniscus and a darker bottom for depth. // ────────────────────────────────────────────────────────────────── const BREWS = { emerald: { name: 'emerald', top: '#6ec27a', mid: '#2f7a45', bot: '#0f3a26', glow: '#8de58d' }, violet: { name: 'violet', top: '#a884d6', mid: '#5e3a96', bot: '#291848', glow: '#c5a4ec' }, crimson: { name: 'crimson', top: '#d4506e', mid: '#9a2840', bot: '#3e0c1c', glow: '#f08aa4' }, midnight: { name: 'midnight', top: '#5870a8', mid: '#2a3a6a', bot: '#0c1230', glow: '#8aa0d4' }, gilded: { name: 'gilded', top: '#f1c970', mid: '#c08a26', bot: '#5a3a0c', glow: '#ffe2a0' }, pearl: { name: 'pearl', top: '#f4eedf', mid: '#d6c8a6', bot: '#8a7c5c', glow: '#ffffff' }, }; // ────────────────────────────────────────────────────────────────── // INGREDIENTS — small SVG glyphs (~30×30 in their local coords). // Each renders as a centered on (0,0); the renderer translates + // rotates them when placing inside or above the vessel. // ────────────────────────────────────────────────────────────────── const ING = { mandrake: { name: 'mandrake', lt: 'root', glyph: ( {/* gnarled root with two legs */} {/* leaf top */} {/* face */} ), }, toadstool: { name: 'toadstool', lt: 'fly-cap', glyph: ( {/* stem */} {/* cap */} {/* spots */} ), }, moonflower: { name: 'moonflower', lt: 'midnight bloom', glyph: ( {/* 5 petals */} {[0,72,144,216,288].map(a => ( ))} ), }, feather: { name: 'feather', lt: 'raven', glyph: ( {/* barbs */} ), }, scale: { name: 'dragon scale', lt: 'iridescent', glyph: ( ), }, crystal: { name: 'crystal', lt: 'quartz shard', glyph: ( ), }, eye: { name: 'owl eye', lt: 'observing', glyph: ( ), }, acorn: { name: 'acorn', lt: 'oak seed', glyph: ( {/* nut */} {/* cap */} {/* stem */} {/* cap dots */} ), }, bone: { name: 'bone', lt: 'small', glyph: ( ), }, bay: { name: 'bay leaf', lt: 'laurel', glyph: ( ), }, starshard: { name: 'starshard', lt: 'fallen', glyph: ( ), }, nightshade: { name: 'nightshade', lt: 'belladonna', glyph: ( {/* berries cluster */} {/* highlights */} {/* stem & leaves */} ), }, spiral: { name: 'newt tail', lt: 'twisted', glyph: ( ), }, petal: { name: 'rose petal', lt: 'pressed', glyph: ( ), }, wax: { name: 'wax seal', lt: 'pressed', glyph: ( p {/* drips */} ), }, }; // ────────────────────────────────────────────────────────────────── // ATMOSPHERE — decorations layered around the vessel. // id → { name, render(ctx) } where ctx carries the seed + vessel info. // ────────────────────────────────────────────────────────────────── const ATMOS = { steam: { name: 'steam', lt: 'curling', render: (rand, vessel) => { const { cx, cy } = vessel.surface; const wisps = []; const n = 3; for (let i = 0; i < n; i++) { const x = cx - 30 + i * 30 + (rand() - .5) * 16; const top = cy - 70 - rand() * 30; const sway = (rand() - .5) * 20; wisps.push( ); } return {wisps}; }, glyph: ( ), }, sparks: { name: 'sparks', lt: 'embered', render: (rand, vessel) => { const { cx, cy } = vessel.surface; const dots = []; for (let i = 0; i < 18; i++) { const angle = rand() * Math.PI * 2; const r = 60 + rand() * 80; const x = cx + Math.cos(angle) * r * (rand() > .5 ? 1 : .6); const y = cy - 30 + Math.sin(angle) * r * .6 - rand() * 30; const s = .8 + rand() * 1.6; dots.push(); } return {dots}; }, glyph: ( ), }, moth: { name: 'moth', lt: 'fluttering', render: (rand, vessel) => { const { cx, cy } = vessel.surface; const x = cx + (rand() > .5 ? 1 : -1) * (80 + rand() * 30); const y = cy - 50 - rand() * 30; return ( ); }, glyph: ( ), }, candle: { name: 'candle', lt: 'lit', render: (rand, vessel) => { const side = rand() > .5 ? 1 : -1; const baseX = vessel.surface.cx + side * 130; const baseY = 358; return ( {/* drips */} {/* wick */} {/* flame */} {/* glow */} ); }, glyph: ( ), }, bats: { name: 'bats', lt: 'silhouettes', render: (rand) => { const items = []; for (let i = 0; i < 3; i++) { const x = 30 + rand() * 260; const y = 30 + rand() * 80; const s = .6 + rand() * .6; items.push( ); } return {items}; }, glyph: ( ), }, raven: { name: 'raven', lt: 'perched', render: (rand, vessel) => { const side = rand() > .5 ? 1 : -1; const x = vessel.surface.cx + side * 140; const y = 100; return ( {/* body */} {/* head */} {/* beak */} {/* eye */} {/* tail */} {/* wing */} {/* legs */} ); }, glyph: ( ), }, moon: { name: 'crescent', lt: 'waxing', render: (rand) => { const side = rand() > .5 ? 1 : -1; const x = side === 1 ? 270 : 50; const y = 60; return ( {/* craters */} ); }, glyph: ( ), }, }; // ────────────────────────────────────────────────────────────────── // Public vocab — picker reads these (name, lt, glyph) for swatches. // ────────────────────────────────────────────────────────────────── window.INGREDIENT_VOCAB = Object.entries(ING).map(([type, v]) => ({ type, name: v.name, lt: v.lt, glyph: v.glyph })); window.VESSEL_VOCAB = Object.entries(VESSELS).map(([id, v]) => ({ id, name: v.name, lt: v.lt, glyph: v.glyph })); window.BREW_VOCAB = Object.entries(BREWS).map(([id, v]) => ({ id, name: v.name, top: v.top, mid: v.mid, bot: v.bot })); window.ATMOS_VOCAB = Object.entries(ATMOS).map(([id, v]) => ({ id, name: v.name, lt: v.lt, glyph: v.glyph })); // ────────────────────────────────────────────────────────────────── // — the live preview / print art. // Props: // vessel: id from VESSELS // brew: id from BREWS // ingredients: array of { id, type, isNew? } where type is an ING key // atmosphere: array of ATMOS keys // accentSeed: number — drives random placement (deterministic per card) // ────────────────────────────────────────────────────────────────── function Potion({ vessel, brew, ingredients, atmosphere, accentSeed }){ const V = VESSELS[vessel] || VESSELS.cauldron; const B = BREWS[brew] || BREWS.emerald; const ings = ingredients || []; const atm = atmosphere || []; const seed = (accentSeed | 0) || 1; // Ingredient placements. Every ingredient lives INSIDE the liquid (the group // below is clipped to V.inside), so a reshuffle re-rolls the arrangement but can // never fling one outside the brew. They spread down the liquid column (surface → // floor) and across a central band scaled to the vessel's surface width. // Computed once per (seed, vessel, ings.length) so positions are stable per card. const rand = rng(seed); const floor = (V.body && V.body.bottom) || (V.surface.cy + 90); const n = ings.length; const placements = ings.map((ing, i) => { const { cx, cy, rx } = V.surface; const top = cy + 14, bot = floor - 18; const halfW = Math.max(rx * 0.6, 14); const t = n <= 1 ? 0.5 : (i + 0.5) / n; // index → horizontal slot const x = cx + (t - 0.5) * 2 * halfW + (rand() - 0.5) * halfW * 0.5; const y = top + (bot - top) * rand(); // seeded depth in the column const rot = (rand() - 0.5) * 50; const sc = 0.7 + rand() * 0.22; return { ...ing, x, y, rot, sc }; }); // Liquid is a vertical gradient from top→bot using brew colors. // Always render the liquid so empty-ingredient vessels still feel filled. return ( ); } // expose for the other scripts window.Potion = Potion;