// Scent Alchemist — game logic & main screen // Globals expected: React, INGREDIENTS, RECIPES, CUSTOMER_TYPES, UPGRADES, // STARTING_STOCK, RESTOCK_BUNDLE, ingredientById, recipeById const { useState, useEffect, useRef, useMemo, useCallback } = React; // ───────────────────────────────────────────────────────────── // utilities // ───────────────────────────────────────────────────────────── function clamp(v, lo, hi) { return Math.max(lo, Math.min(hi, v)); } function fmtDrops(n) { // Show fractional only when needed (Brass Pipette half-drops); otherwise integer. if (n === undefined || n === null) return '0'; return Math.abs(n - Math.round(n)) < 0.01 ? String(Math.round(n)) : n.toFixed(1); } function totalUnits(mix) { return Object.values(mix).reduce((a, b) => a + b, 0); } function mixturePercents(mix) { const t = totalUnits(mix); if (!t) return {}; const out = {}; for (const [k, v] of Object.entries(mix)) out[k] = (v / t) * 100; return out; } function computeAccuracy(mix, recipe) { const actualP = mixturePercents(mix); const allKeys = new Set([...Object.keys(recipe.ratios), ...Object.keys(actualP)]); let dev = 0; for (const k of allKeys) dev += Math.abs((actualP[k] || 0) - (recipe.ratios[k] || 0)); return Math.max(0, Math.round(100 - dev / 2)); } function tierFor(score) { if (score >= 95) return { tier: 'Perfect Blend', payMul: 1.0, tipMul: 1.0, repGain: 3, color: '#2B7A4B', glow: '#7BD49B' }; if (score >= 85) return { tier: 'Great', payMul: 1.0, tipMul: 0.6, repGain: 2, color: '#3D6BA8', glow: '#8FB6E0' }; if (score >= 70) return { tier: 'Acceptable', payMul: 0.85,tipMul: 0, repGain: 1, color: '#8A6A2E', glow: '#E8C99D' }; if (score >= 50) return { tier: 'Weak', payMul: 0.5, tipMul: 0, repGain: 0, color: '#A35B3D', glow: '#E8A88A' }; return { tier: 'Failed', payMul: 0, tipMul: 0, repGain: -1, color: '#7A2D2D', glow: '#D49B9B' }; } // Mix → liquid color (weighted blend) function mixColor(mix) { const t = totalUnits(mix); if (!t) return { r: 230, g: 220, b: 200, a: 0 }; let r = 0, g = 0, b = 0; for (const [k, v] of Object.entries(mix)) { const ing = ingredientById(k); if (!ing) continue; const c = ing.color.replace('#', ''); const cr = parseInt(c.slice(0, 2), 16), cg = parseInt(c.slice(2, 4), 16), cb = parseInt(c.slice(4, 6), 16); r += cr * v; g += cg * v; b += cb * v; } return { r: r / t, g: g / t, b: b / t, a: clamp(t / 12, 0.1, 1) }; } // ───────────────────────────────────────────────────────────── // Customer generation // ───────────────────────────────────────────────────────────── function pickCustomer(reputation, day, ownedUpgrades = {}) { let pool; if (reputation < 5) pool = ['student', 'student', 'business', 'hasty']; else if (reputation < 15) pool = ['student', 'business', 'business', 'hasty', 'influencer']; else if (reputation < 30) pool = ['business', 'influencer', 'influencer', 'collector', 'mysterious', 'hasty']; else pool = ['influencer', 'collector', 'collector', 'mysterious', 'business']; // VIP Sofa decoration — boost premium customer appearance rate. if (ownedUpgrades.sofa) { pool = [...pool, 'influencer', 'collector', 'mysterious']; } const type = CUSTOMER_TYPES[pool[Math.floor(Math.random() * pool.length)]]; const eligible = RECIPES.filter(r => !r.locked || reputation >= r.repReq); const recipe = eligible[Math.floor(Math.random() * eligible.length)]; const basePat = 38 + Math.random() * 6; const patience = Math.round(basePat * type.patienceMul); const pay = Math.round(recipe.base * type.payMul); const tip = Math.round(recipe.base * type.tipMul); const quote = type.quotes[Math.floor(Math.random() * type.quotes.length)]; const blindBrief = type.blind ? buildBlindBrief(recipe) : null; return { id: `c${day}-${Math.random().toString(36).slice(2, 6)}`, type, recipe, patience, pay, tip, quote, minQuality: type.minQuality, blind: !!type.blind, blindBrief, }; } // ───────────────────────────────────────────────────────────── // Persistent default state // ───────────────────────────────────────────────────────────── const DEFAULT_STATE = { coins: 60, reputation: 0, day: 1, orderNumber: 1, stock: { ...STARTING_STOCK }, ownedUpgrades: {}, unlockedRecipes: { fresh: true, blue: true, sweet: true, oud: true, wolf: true }, idleBank: 0, }; const SAVE_KEY = 'scent-alchemist-save-v1'; function loadGame() { try { const s = JSON.parse(localStorage.getItem(SAVE_KEY)); return s ? { ...DEFAULT_STATE, ...s } : { ...DEFAULT_STATE }; } catch (e) { return { ...DEFAULT_STATE }; } } function saveGame(s) { try { localStorage.setItem(SAVE_KEY, JSON.stringify(s)); } catch (e) {} } // ───────────────────────────────────────────────────────────── // HUD bar (top) // ───────────────────────────────────────────────────────────── function Hud({ state, lowStock, hardMode, onWarn, onSettings, onMenu }) { return (
{onMenu && ( )}
); } function Pill({ icon, label, hint, tone }) { return (
{icon} {label} {hint}
); } // ───────────────────────────────────────────────────────────── // Customer / order panel // ───────────────────────────────────────────────────────────── function CustomerPanel({ customer, timeLeft, totalTime, animState, ownedUpgrades = {} }) { if (!customer) { return (
— next customer arriving —
); } const t = customer.type; const pct = clamp(timeLeft / totalTime, 0, 1); const danger = pct < 0.33; return (
{/* Antique apothecary backdrop — painted PNG fills the wall */}
{/* Visual decor overlays disabled — backdrop PNG carries the antique theme. Decor upgrades remain mechanically active (patience, tips, premium rate, etc.). */} {/* Customer body, peeking over the counter */}
{/* shoulders/torso */} {/* collar / shirt line */} {/* neck */} {/* hair back */} {/* face */} {/* fringe */} {/* ears */} {/* eyes */} {/* brows — angry tilts inward */} {animState === 'angry' ? ( <> ) : ( <> )} {/* mouth — varies by mood */} {animState === 'happy' && } {animState === 'sad' && } {animState === 'angry' && } {(animState === 'idle' || animState === 'enter') && } {/* Speech bubble */}
“{customer.quote}”
{/* Counter plank — front edge */}
{/* Order ticket sits on counter */}
{t.label} {'◆'.repeat(customer.recipe.difficulty)}{'◇'.repeat(4 - customer.recipe.difficulty)}
{customer.blind ? ( <>
??? BLIND
"{customer.blindBrief}"
) : ( <>
{customer.recipe.name}
{customer.recipe.tagline}
)}
✦{customer.pay} + tip ✦{customer.tip} ≥ {customer.minQuality}%
); } function PatienceBar({ pct, danger }) { return (
{[0.25, 0.5, 0.75].map(t =>
)}
); } // ───────────────────────────────────────────────────────────── // Flask / mixing visualization // ───────────────────────────────────────────────────────────── function FlaskView({ mix, target, recipeOpen, lastTap, shake }) { const total = totalUnits(mix); const c = mixColor(mix); const fillCap = 14; // visual cap const fillPct = clamp(total / fillCap, 0, 1); const fillH = fillPct * 100; // svg height of fill (max 100, sits in y range 100..200) const fillY = 200 - fillH; const liquidColor = `rgb(${Math.round(c.r)}, ${Math.round(c.g)}, ${Math.round(c.b)})`; const liquidColorDark = `rgb(${Math.round(c.r * 0.78)}, ${Math.round(c.g * 0.78)}, ${Math.round(c.b * 0.78)})`; const percents = mixturePercents(mix); return (
{/* cork / stopper */} {/* glass body */} {/* single blended liquid, clipped to flask */} {total > 0 && ( <> {/* meniscus / shimmer line */} {/* subtle wave overlay */} )} {/* highlight on glass */} {/* measurement ticks — follow the angled glass wall (slope from x=75 at y=78 to x=40 at y=188) */} {[0.25, 0.5, 0.75].map(t => { const y = 200 - t * 100; // left interior wall at this y const leftEdge = 75 - ((y - 78) * 35) / 110; return ( {Math.round(t * 100)} ); })} {/* sparkle particle when adding */} {lastTap && ( )} {/* readout */}
current mixture {fmtDrops(total)} drops
{INGREDIENTS.filter(i => i.id !== 'bottle').map(ing => { const cur = Math.round(percents[ing.id] || 0); const tgt = recipeOpen ? (target?.ratios[ing.id] || 0) : null; if (cur === 0 && (!tgt || tgt === 0)) return null; return (
{ing.short} {cur}% {tgt !== null && tgt > 0 && ( / {tgt}% )}
); })} {total === 0 &&
tap an ingredient to start mixing
}
); } // ───────────────────────────────────────────────────────────── // Ingredient bottle buttons // ───────────────────────────────────────────────────────────── function IngredientRow({ stock, onTap, bouncing, dim }) { // Bottle is the vessel, not an essence — it never appears as a tappable ingredient. const essences = INGREDIENTS.filter(i => i.id !== 'bottle'); return (
{essences.map(ing => { const out = stock[ing.id] <= 0; const low = stock[ing.id] > 0 && stock[ing.id] <= 3; return ( ); })}
); } // ───────────────────────────────────────────────────────────── // Antique apothecary backdrop (default shop wall) // ───────────────────────────────────────────────────────────── function AntiqueBackdrop() { // Painted PNG backdrop — generated externally, placed at assets/backdrop.png. // Covers the entire counter-bg area; bottom ~25% (wooden floor) is hidden by counter plank. return ( { e.currentTarget.style.display = 'none'; }} /> ); } // Fallback SVG (used if backdrop.png is missing — keeps shop visually intact) function AntiqueBackdropSVG() { const shelfBottles = [ // shelf 1 (top) [{ x: 60, c: '#E89BB4', h: 16, w: 7 }, { x: 73, c: '#F5C242', h: 18, w: 6 }, { x: 86, c: '#5D3A6B', h: 14, w: 8 }, { x: 100, c: '#8B5A3C', h: 20, w: 6 }, { x: 113, c: '#E8C99D', h: 16, w: 7 }, { x: 127, c: '#A8C5D9', h: 18, w: 6 }], // shelf 2 (middle) [{ x: 58, c: '#A8C5D9', h: 14, w: 7 }, { x: 71, c: '#8B5A3C', h: 18, w: 6 }, { x: 84, c: '#F5C242', h: 16, w: 8 }, { x: 98, c: '#E89BB4', h: 20, w: 6 }, { x: 111, c: '#5D3A6B', h: 14, w: 7 }, { x: 125, c: '#E8C99D', h: 18, w: 7 }], // shelf 3 (bottom) [{ x: 58, c: '#5D3A6B', h: 18, w: 8 }, { x: 73, c: '#E8C99D', h: 14, w: 7 }, { x: 86, c: '#A8C5D9', h: 20, w: 6 }, { x: 100, c: '#F5C242', h: 14, w: 8 }, { x: 115, c: '#8B5A3C', h: 18, w: 6 }, { x: 128, c: '#E89BB4', h: 16, w: 7 }], ]; const shelfYs = [38, 78, 118]; // top of each shelf in svg space return ( {/* Wall */} {/* Wall vertical paneling lines (subtle wood paneling effect) */} {[20, 50, 150, 180].map(x => ( ))} {/* Crown moulding strip at top */} {/* Wainscot panels along bottom */} {[26, 60, 94, 140, 174].map(x => ( ))} {/* Apothecary cabinet — arched top, centered */} {/* Outer frame */} {/* Inner panel (back of cabinet) */} {/* Warm interior glow */} {/* Shelves (3) */} {shelfYs.map(y => ( ))} {/* Bottles on each shelf */} {shelfBottles.map((bottles, si) => ( {bottles.map((b, i) => { const y = shelfYs[si]; const top = y - b.h; return ( {/* cork */} {/* neck */} {/* body */} {/* highlight */} {/* tiny label */} ); })} ))} {/* Cabinet top ornamental brass plate */} A {/* Brass cabinet handles */} {/* Framed apothecary label off to the side */} {/* Hanging brass scale on the other side */} ); } // ───────────────────────────────────────────────────────────── // Shop decoration overlays // ───────────────────────────────────────────────────────────── function NeonSign() { // Outlined neon tube with glow + flicker return (
{/* Tube outline */} PARFUM {/* Inner bright fill */} PARFUM
); } function GlassShelf() { // Floating display shelf with mini bottles — sits upper-left of the counter scene return ( {/* Upper tier bottles */} {[ { x: 8, c: '#E89BB4' }, { x: 20, c: '#F5C242' }, { x: 32, c: '#5D3A6B' }, { x: 44, c: '#8B5A3C' }, { x: 56, c: '#E8C99D' }, { x: 68, c: '#A8C5D9' }, ].map((b, i) => ( ))} {/* Lower tier bottles */} {[10, 22, 34, 46, 58, 70].map((x, i) => ( ))} ); } function VipSofa() { // Velvet chesterfield-style sofa with diamond tufting + throw pillows + gold legs return ( {/* Sofa back with rolled arms */} {/* Rolled arm highlights */} {/* Diamond tufting on back */} {[[22,22],[34,28],[46,22],[58,28],[70,22],[82,28]].map(([cx,cy],i) => ( ))} {[[28,28],[40,22],[52,28],[64,22],[76,28]].map(([cx,cy],i) => ( ))} {/* Seat cushion */} {/* Seat seam */} {/* Throw pillow left */} {/* Throw pillow right */} {/* Gold trim along the top */} {/* Brass legs */} ); } function Register() { // Brass cash register with paper receipt curling out of the top return ( {/* Paper receipt curling up + back */} {/* Top hood */} {/* Display window */} ✦ {/* Main body */} {/* Key matrix */} {/* Drawer line + handle */} {/* Stacked coins beside the register */} ); } // ───────────────────────────────────────────────────────────── // Floating coin/text rewards // ───────────────────────────────────────────────────────────── function Floaters({ items }) { return (
{items.map(f => (
{f.text}
))}
); } Object.assign(window, { computeAccuracy, tierFor, mixColor, mixturePercents, totalUnits, pickCustomer, loadGame, saveGame, DEFAULT_STATE, Hud, CustomerPanel, FlaskView, IngredientRow, Floaters, clamp, fmtDrops, });