// bottle.jsx — Serenoil bottle, drawn as composable SVG/CSS layers so we can
// animate the cap, pipette, and oil level independently of the bottle body.
// The full bottle is sized inside a 320×640 box. Pieces are positioned
// absolutely inside a wrapper so callers can transform them individually.
//
// Pieces:
// — amber glass + label
// — black ribbed cap + bulb (the "lid")
// — glass tube hidden under the cap
//
// Callers pass transforms via wrapper divs.
const AMBER_DARK = '#3a1a09';
const AMBER_MID = '#6b2e10';
const AMBER_HI = '#a85a26';
const AMBER_GLOW = '#d98b4a';
const LABEL_BG = '#e8dec6';
const LABEL_INK = '#1f3a2e';
const CAP_DARK = '#0d0d0d';
const CAP_MID = '#1f1f1f';
const CAP_HI = '#3a3a3a';
// — Bottle body (glass + label). No cap. —
function BottleBody({ oilLevel = 0.78 }) {
// oilLevel: 0..1 fraction of bottle filled (visual only)
return (
);
}
// — Cap (black ribbed grip + rubber bulb on top). Sits at the top of the bottle. —
// Anchor point: bottom-center of cap = (160, 130) in bottle coords.
function BottleCap() {
return (
);
}
// — Pipette (clear glass tube with amber oil inside). Hidden under the cap.
// Tube is 6px wide, ~140 long, with rounded tip. Top is the threaded collar.
function Pipette({ oilLevel = 0.7 }) {
return (
);
}
Object.assign(window, { BottleBody, BottleCap, Pipette });