"use client"; /** * One scene per status. Each is a stick figure with a photo for a head, the * props that go with what he's doing, an idle loop so the stage is never still, * and a `hit` variant for when a visitor does something to him. * * Two rules keep the scenes readable. Anatomy: head, then a neck, then a * shoulder point below it — arms always bend at an elbow that sits outside the * head circle, or the whole figure collapses into a triangle. Colour: strokes * are always `currentColor` and fills are either `currentColor` with an opacity * or a named accent, so the same drawing works on the cream day stages and the * indigo night ones. */ import { motion, type Transition } from "framer-motion"; import type { StatusPose } from "../../lib/wahab-status"; import { Face, GROUND_Y, HEAD_R, LIMB, Shout, THIN } from "./figure"; export type PosePhase = "idle" | "swing" | "hit"; export type PoseAction = { id: string; /** Button copy. */ label: string; emoji: string; /** The emoji face that replaces the photo when it lands. */ face: string; /** Line printed under the stage once it lands. */ note: string; /** `kind` actions get the soft button; mischief gets the ink one. */ tone: "kind" | "mischief"; }; export type SceneProps = { phase: PosePhase; /** Reaction emoji, or null while the photo face is showing. */ face: string | null; action: PoseAction | null; /** True when the visitor prefers reduced motion — idle loops go still. */ calm: boolean; clipId: string; }; export type PoseSpec = { id: StatusPose; label: string; emoji: string; /** Stage-direction line under the drawing. */ caption: string; sky: string; ink: string; actions: PoseAction[]; Scene: (props: SceneProps) => React.JSX.Element; }; const loop = (duration: number, delay = 0): Transition => ({ duration, delay, repeat: Infinity, ease: "easeInOut", }); /** The swing lands at `IMPACT_MS`, and the reaction face holds for `HOLD_MS`. */ export const IMPACT_MS = 320; export const HOLD_MS = 2100; function Ground({ from = 36, to = 284 }: { from?: number; to?: number }) { return ( ); } function NightSky({ calm }: { calm: boolean }) { const stars: Array<[number, number]> = [ [58, 52], [104, 36], [150, 60], [206, 40], [248, 68], [292, 50], ]; return ( <> 🌙 {stars.map(([x, y], i) => ( ))} ); } /* ------------------------------------------------------------------ sleeping */ function SleepingScene({ phase, face, calm, clipId }: SceneProps) { const hit = phase === "hit"; return ( <> {/* bed */} {/* neck, then the horizontal torso */} {/* blanket over the legs, then an arm resting on top of it */} {/* zzz */} {!hit && [0, 1, 2].map((i) => ( z ))} {/* the air horn, from the pillow side */} {phase !== "idle" ? ( 📢 ) : null} {hit ? ( <> {[0, 1, 2].map((i) => ( ))} ) : null} ); } /* ------------------------------------------------------------- doomscrolling */ function DoomscrollingScene({ phase, face, calm, clipId }: SceneProps) { const hit = phase === "hit"; const screenClip = `${clipId}-screen`; return ( <> {/* the phone's glow, spilling onto his face */} {/* the arm holding the phone up */} {[0, 1, 2, 3, 4, 5].map((i) => ( ))} {/* thumb, flicking forever */} {!hit ? ( ) : null} {/* the slap */} {phase !== "idle" ? ( ✋ ) : null} {hit ? : null} ); } /* ----------------------------------------------------------------------- gym */ function GymScene({ phase, face, calm, clipId }: SceneProps) { const hit = phase === "hit"; return ( <> {/* elbows swing wide and the forearms carry on outward, so the lift never closes into a diamond around his head */} {/* the bar sags once a visitor loads it */} {/* the plate a visitor slides on */} {phase !== "idle" ? ( <> ) : null} {hit ? ( <> {[0, 1, 2].map((i) => ( 💦 ))} ) : null} ); } /* ------------------------------------------------------------------ shipping */ function ShippingScene({ phase, face, action, calm, clipId }: SceneProps) { const unplugged = phase === "hit" && action?.id === "unplug"; const hit = phase === "hit"; return ( <> {/* chair */} {/* him, side on, hunched at the desk */} {/* the laptop, seen from behind the lid */} {!unplugged ? ( ) : null} {/* third coffee */} {/* desk, drawn last so it sits in front of him */} {/* code drifting off the screen while he works */} {phase === "idle" ? ["", "{ }", "npm"].map((glyph, i) => ( {glyph} )) : null} {/* pull the plug */} {action?.id === "unplug" && phase !== "idle" ? ( 🔌 ) : null} {unplugged ? : null} ); } /* ------------------------------------------------------------------- praying */ function PrayingScene({ phase, face, calm, clipId }: SceneProps) { const hit = phase === "hit"; return ( <> {/* prayer mat, lying flat under his feet */} {/* arms hang in a shallow V; the palms cup well below the elbows */} {/* the quiet glow, sitting just under his cupped hands */} {phase !== "idle" ? ( <> {[0, 1, 2].map((i) => ( ))} {[ [122, 106], [202, 98], [188, 132], ].map(([x, y], i) => ( ✨ ))} ) : null} {hit ? : null} ); } /* -------------------------------------------------------------------- eating */ function EatingScene({ phase, face, calm, clipId }: SceneProps) { const hit = phase === "hit"; return ( <> {/* dastarkhwan on the floor */} {/* sitting side-on, one leg folded under him */} {/* the eating arm: upper arm fixed, forearm swings to his mouth */} {!hit ? : null} {/* the plate */} 🍛 {/* steam */} {!hit ? [0, 1].map((i) => ( )) : null} {/* the snatch */} {phase !== "idle" ? ( 🤏 ) : null} {hit ? : null} ); } /* ----------------------------------------------------------------- catalogue */ export const POSES: Record = { doomscrolling: { id: "doomscrolling", label: "doomscrolling", emoji: "📱", caption: "flat on his back, phone six inches from his face, hour three.", sky: "oklch(27% 0.045 268)", ink: "oklch(94% 0.018 90)", actions: [ { id: "slap", label: "land a slap", emoji: "👋", face: "😭", note: "he cried. the phone survived. priorities.", tone: "mischief", }, ], Scene: DoomscrollingScene, }, sleeping: { id: "sleeping", label: "sleeping", emoji: "😴", caption: "out cold, blanket claimed, six alarms already snoozed.", sky: "oklch(30% 0.05 265)", ink: "oklch(94% 0.018 90)", actions: [ { id: "horn", label: "blast the horn", emoji: "📢", face: "😱", note: "half a second of terror, then straight back to sleep.", tone: "mischief", }, ], Scene: SleepingScene, }, gym: { id: "gym", label: "at the gym", emoji: "💪", caption: "one more rep, he says, to nobody in particular.", sky: "oklch(94% 0.05 95)", ink: "oklch(22% 0.02 55)", actions: [ { id: "plate", label: "add a plate", emoji: "⚫", face: "😫", note: "the bar bent. his ego bent further.", tone: "mischief", }, ], Scene: GymScene, }, shipping: { id: "shipping", label: "shipping", emoji: "💻", caption: "third coffee, one tab, something almost working.", sky: "oklch(93% 0.035 235)", ink: "oklch(22% 0.02 55)", actions: [ { id: "unplug", label: "pull the plug", emoji: "🔌", face: "😱", note: "two hours of unsaved work, gone in one tug.", tone: "mischief", }, ], Scene: ShippingScene, }, praying: { id: "praying", label: "praying", emoji: "🤲", caption: "hands up, phone down, five times a day.", sky: "oklch(92% 0.045 150)", ink: "oklch(22% 0.02 55)", actions: [ { id: "ameen", label: "say ameen", emoji: "🤲", face: "🥹", note: "you said ameen to a du'a you never heard. it still counts.", tone: "kind", }, ], Scene: PrayingScene, }, eating: { id: "eating", label: "eating", emoji: "🍛", caption: "on the floor, plate of biryani, zero distractions.", sky: "oklch(93% 0.04 25)", ink: "oklch(22% 0.02 55)", actions: [ { id: "snatch", label: "steal a bite", emoji: "🍗", face: "😠", note: "you took food off a Mumbai boy's plate. bold.", tone: "mischief", }, ], Scene: EatingScene, }, };