/* global React */
const { useMemo } = React;
// ============================================================
// COZY ROOM — wide layout (1800×1000)
// Nightstand in left corner, bed flush against back wall,
// big window centered, desk flush against wall on right with
// HALF-HEIGHT monitor showing a mini desktop.
// ============================================================
// -- character --
function Sleeper({ visible }) {
if (!visible) return null;
return (
z
z
);
}
function Chair() {
return (
);
}
function Worker({ visible, onClick }) {
if (!visible) return null;
return (
{
if (onClick && (event.key === "Enter" || event.key === " ")) {
event.preventDefault();
onClick();
}
}}
role={onClick ? "button" : undefined}
tabIndex={onClick ? 0 : undefined}
aria-label={onClick ? "Enter Saaket's mind" : undefined}
>
);
}
// ---------- time-of-day helpers ----------
function _hex(h) { return [parseInt(h.slice(1,3),16), parseInt(h.slice(3,5),16), parseInt(h.slice(5,7),16)]; }
function _mix(c1, c2, f) {
const a = _hex(c1), b = _hex(c2);
const r = Math.round(a[0] + (b[0]-a[0])*f);
const g = Math.round(a[1] + (b[1]-a[1])*f);
const bl = Math.round(a[2] + (b[2]-a[2])*f);
return `rgb(${r},${g},${bl})`;
}
function skyAt(t) {
if (t >= 0 && t < 3) {
return { top: "#030817", mid: "#050d1f", bot: "#050d1f" };
}
const stops = [
[0, ["#050a1c", "#08122a", "#0a1730"]],
[4.5, ["#0a1a3a", "#1a2a4c", "#2a2a48"]],
[5.5, ["#2a2350", "#5a3a6a", "#a06a70"]],
[6.5, ["#ff8a5c", "#ffb47a", "#ffd9a8"]],
[7.5, ["#8fc6e5", "#bbe0f0", "#dceef5"]],
[12, ["#5fb6e8", "#8fcaea", "#bee7f5"]],
[16.5, ["#7fc0e0", "#cfe0ea", "#ffd6a8"]],
[18.5, ["#ff7a5c", "#ff9a6a", "#ffc890"]],
[19.5, ["#4a3270", "#8a4a72", "#c06a78"]],
[20.5, ["#1a2150", "#1a2348", "#2a2a4a"]],
[22, ["#0a1340", "#0a1730", "#0e1a36"]],
[24, ["#050a1c", "#08122a", "#0a1730"]],
];
for (let i = 0; i < stops.length - 1; i++) {
if (t >= stops[i][0] && t <= stops[i+1][0]) {
const span = stops[i+1][0] - stops[i][0];
const f = span === 0 ? 0 : (t - stops[i][0]) / span;
return {
top: _mix(stops[i][1][0], stops[i+1][1][0], f),
mid: _mix(stops[i][1][1], stops[i+1][1][1], f),
bot: _mix(stops[i][1][2], stops[i+1][1][2], f),
};
}
}
return { top: stops[0][1][0], mid: stops[0][1][1], bot: stops[0][1][2] };
}
function sunArc(t) {
if (t < 4.5 || t > 20.5) return null;
const frac = (t - 4.5) / 16;
return { frac };
}
function moonArc(t) {
let frac;
if (t >= 18) frac = (t - 18) / 13;
else if (t <= 7) frac = (t + 6) / 13;
else return null;
return { frac };
}
function nightAmount(t) {
const ease = (x) => x * x * (3 - 2 * x);
if (t <= 4.5) return 1;
if (t < 8.0) return 1 - ease((t - 4.5) / 3.5);
if (t <= 18) return 0;
if (t < 20.5) return ease((t - 18) / 2.5);
return 1;
}
function shootingStar(t, w, h, night) {
const hour = ((t % 24) + 24) % 24;
if (!(hour >= 0 && hour < 3)) return null;
if (night < 0.4) return null;
const totalSeconds = Math.floor(hour * 3600);
const slot = Math.floor(totalSeconds / 300);
const secondsIntoSlot = totalSeconds % 300;
const rand = (s) => { const v = Math.sin(s * 9301 + 49297) * 233280; return v - Math.floor(v); };
const activeStart = Math.floor(rand(slot + 23) * 260);
const activeDuration = 12;
if (secondsIntoSlot < activeStart || secondsIntoSlot > activeStart + activeDuration) return null;
const startX = -70 + rand(slot) * (w * 0.45);
const startY = 20 + rand(slot + 7) * (h * 0.38);
const dx = 260 + rand(slot + 13) * 120;
const dy = 95 + rand(slot + 19) * 70;
return {
slot, startX, startY, endX: startX + dx, endY: startY + dy,
tailX: -(85 + rand(slot + 31) * 35), tailY: -(28 + rand(slot + 37) * 18),
opacity: Math.min(1, (night - 0.4) / 0.4),
};
}
function cloudsForDay(dayKey) {
let seed = 0;
for (let i = 0; i < dayKey.length; i++) {
seed = (seed * 31 + dayKey.charCodeAt(i)) >>> 0;
}
const rand = () => {
seed = (seed * 1664525 + 1013904223) >>> 0;
return seed / 4294967296;
};
const sizes = [
{ label: "Small", w1: 46, w2: 34, h1: 10, h2: 10 },
{ label: "Med", w1: 64, w2: 46, h1: 12, h2: 12 },
{ label: "Large", w1: 86, w2: 62, h1: 14, h2: 14 },
];
const count = 3 + Math.floor(rand() * 2);
return Array.from({ length: count }, (_, i) => {
const size = sizes[Math.floor(rand() * sizes.length)];
return {
...size,
yOff: Math.round(72 + rand() * 160),
period: 10 + rand() * 6,
phase: (rand() + i / count) % 1,
};
});
}
// ---------- window contents — FIXED mountains ----------
function WindowView({ time, x, y, w, h }) {
const t = time.getHours() + time.getMinutes()/60 + time.getSeconds()/3600;
const sky = skyAt(t);
const sun = sunArc(t);
const moon = moonArc(t);
const night = nightAmount(t);
const dayKey = `${time.getFullYear()}-${time.getMonth()}-${time.getDate()}`;
const cloudDefs = useMemo(() => cloudsForDay(dayKey), [dayKey]);
const arcX = (frac) => x - 70 + frac * (w + 100);
const arcY = (frac) => y + 200 - Math.sin(Math.max(0, Math.min(1, frac)) * Math.PI) * 170;
const clipId = `winclip-${x}-${y}-${w}-${h}`;
// ridgeBase: the "ground horizon" line
const ridgeBase = y + h - 74;
const grassY = y + h - 46;
return (
{/* sky gradient */}
{/* ═══════════════════════════════════════════
MOUNTAINS — fully redrawn
• bg peaks defined with exact apex coords
• snow caps are isoceles triangles centered on each apex
• foreground polygon valleys sit at ridgeBase (not below)
and the polygon bottom extends to y+h — no sky gaps possible
═══════════════════════════════════════════ */}
{(() => {
const backFill = _mix("#8fa6ae", "#1b2d43", night);
const backDark = _mix("#5a7480", "#0e1c2c", night);
const frontFill = _mix("#4e6e76", "#0e1e28", night);
const frontDark = _mix("#324e58", "#08141c", night);
const snowFill = _mix("#e8f0f2", "#3b4d64", night);
const forestFill = _mix("#1e3828", "#060f0a", night);
const grassFill = _mix("#4a7040", "#0e1e14", night);
const grassTop = _mix("#62904e", "#172b1c", night);
const landscapeOpacity = 0.94 - night * 0.26;
// ── Background peak definitions: [xOffset, height above ridgeBase] ──
// 5 peaks with smooth connecting shoulders
const bgPts = [
[x - 30, ridgeBase ], // left ground
[x + 46, ridgeBase - 72 ], // bg peak A
[x + 100, ridgeBase - 38 ], // shoulder
[x + 160, ridgeBase - 108 ], // bg peak B (tall)
[x + 228, ridgeBase - 22 ], // valley
[x + 292, ridgeBase - 144 ], // bg peak C (tallest)
[x + 354, ridgeBase - 56 ], // shoulder
[x + 426, ridgeBase - 96 ], // bg peak D
[x + w + 50, ridgeBase ], // right ground
];
const bgPoints = bgPts.map(([px,py]) => `${px},${py}`).join(" ");
// ── Foreground peak definitions ──
// Valleys exactly at ridgeBase so background base is fully sealed.
// Bottom edge at y+h guarantees zero sky gaps.
const fgPts = [
[x - 30, ridgeBase ], // left at ridgeBase
[x + 78, ridgeBase - 62 ], // fg peak A
[x + 188, ridgeBase ], // valley — exactly at ridgeBase
[x + 308, ridgeBase - 78 ], // fg peak B
[x + 420, ridgeBase ], // valley — exactly at ridgeBase
[x + w + 40, ridgeBase - 60 ], // fg peak C (partially off-right)
[x + w + 40, y + h ], // seal bottom-right
[x - 30, y + h ], // seal bottom-left
];
const fgPoints = fgPts.map(([px,py]) => `${px},${py}`).join(" ");
const pt = ([x1, y1], [x2, y2], t) => [
x1 + (x2 - x1) * t,
y1 + (y2 - y1) * t,
];
const SnowCap = ({ peak, left, right, leftT, rightT, op = 0.9 }) => {
const [rx, ry] = pt(peak, right, rightT);
const [lx, ly] = pt(peak, left, leftT);
return (
);
};
// Shadow face: darkens the right-hand slope of each peak
const Shadow = ({ pts, op = 0.5 }) => (
);
const FgShadow = ({ pts, op = 0.5 }) => (
);
return (
{/* ── background mountains ── */}
{/* bg right-face shadows */}
{/* bg snow caps */}
{/* ── foreground mountains ── */}
{/* fg right-face shadows */}
{/* ── forest treeline ── */}
{/* ── grass ── */}
);
})()}
{/* stars */}
{night > 0.15 && [
[40, 30], [80, 80], [140, 50], [200, 110], [240, 40],
[60, 160], [110, 200], [180, 230], [330, 150], [370, 90],
[380, 200], [50, 240], [220, 260], [320, 230], [120, 130],
[260, 70], [400, 50], [100, 280], [350, 280], [430, 170],
[410, 240], [160, 290], [70, 320], [280, 310], [400, 320],
].filter(([dx, dy]) => dx < w - 8 && dy < h - 210).map(([dx, dy], i) => {
const cls = "star" + (i % 4 === 0 ? "" : i % 4 === 1 ? " s2" : i % 4 === 2 ? " s3" : " s4");
const sz = i % 5 === 0 ? 4 : 3;
return ;
})}
{/* shooting star */}
{(() => {
const s = shootingStar(t, w, h, night);
if (!s) return null;
return (
);
})()}
{/* moon */}
{moon && (() => {
const mx = arcX(moon.frac), my = arcY(moon.frac);
const moonCutoutFill = my < y + h * 0.33 ? sky.top : my < y + h * 0.66 ? sky.mid : sky.bot;
return (
);
})()}
{/* sun */}
{sun && (() => {
const sx = arcX(sun.frac), sy = arcY(sun.frac);
const high = Math.sin(Math.max(0, Math.min(1, sun.frac)) * Math.PI);
const sunCore = _mix("#ff7a3a", "#ffd000", high);
const sunRim = _mix("#ffb070", "#ffe14a", high);
return (
);
})()}
{/* clouds */}
{(() => {
const cloudOpacity = 0.85 - night * 0.75;
if (cloudOpacity <= 0.05) return null;
return (
{cloudDefs.map((c, i) => {
const frac = ((t / c.period + c.phase) % 1 + 1) % 1;
const cx = x - 100 + frac * (w + 200);
const cy = y + c.yOff;
return (
);
})}
);
})()}
);
}
// ---------- digital wall clock ----------
function DigitalClock({ time, x = 395, y = 160, mealLabel = null, showTime = false, onToggle }) {
const hours = time.getHours();
const ampm = hours >= 12 ? "PM" : "AM";
const hh = String(hours % 12 || 12).padStart(2, "0");
const mm = String(time.getMinutes()).padStart(2, "0");
const displayMeal = mealLabel && !showTime;
const label = displayMeal ? mealLabel : `${hh}:${mm} ${ampm}`;
const fontSize = displayMeal ? 46 : 42;
return (
{label}
);
}
// ---------- pixel desk lamp ----------
function DeskLamp({ on, onClick }) {
return (
{on && (
)}
);
}
// ---------- ROOM ----------
function Room({ scene, time, lampOn, monitorOn, snoozed, onPhoneClick, onMonitorClick, onLampClick, onWorkerClick }) {
const isNight = scene === "night";
const isAlarm = scene === "alarm";
const isWork = scene === "work";
const isLunch = scene === "lunch";
const isDinner = scene === "dinner";
const mealLabel = isLunch ? "LUNCH" : isDinner ? "DINNER" : null;
const [showTimeOverride, setShowTimeOverride] = React.useState(false);
React.useEffect(() => { setShowTimeOverride(false); }, [mealLabel]);
const [localLamp, setLocalLamp] = React.useState(lampOn);
React.useEffect(() => { setLocalLamp(lampOn); }, [lampOn]);
const handleLampToggle = (e) => {
setLocalLamp(!localLamp);
if (onLampClick) onLampClick(e);
};
const winX = 600, winY = 90, winW = 480, winH = 380;
const windowFrameFill = "#3f2817";
const windowSillFill = windowFrameFill;
const tHr = time.getHours() + time.getMinutes()/60 + time.getSeconds()/3600;
const roomNight = nightAmount(tHr);
const roomOverlayOpacity = roomNight * 0.8;
const windowDimOpacity = roomNight * 0.28;
const nightFrameFill = _mix(windowFrameFill, "#0f0c09", roomNight);
return (
);
}
// Mini desktop UI rendered inside the monitor screen.
function MiniDesktop({ time }) {
const SX = 1328, SY = 260, SW = 280, SH = 130;
const hours = time.getHours();
const ampm = hours >= 12 ? "PM" : "AM";
const hh = String(hours % 12 || 12).padStart(2, "0");
const mm = String(time.getMinutes()).padStart(2, "0");
const icons = [
{ y: 0, label: "about_me" },
{ y: 1, label: "projects" },
{ y: 2, label: "tools" },
{ y: 3, label: "books" },
];
return (
RoomOS
{hh}:{mm} {ampm}
{icons.map((ic, i) => {
const isAbout = ic.label === "about_me";
const isFile = isAbout || ic.label === "README_txt";
const iy = SY + 14 + i * 24;
return (
{isAbout ? (
) : isFile ? (
) : (
)}
{ic.label}
);
})}
~/term
$ ls
about projects
books tools
$ whoami
saaket@njit
$ _
{hh}:{mm} {ampm}
);
}
function BookRow({ y, idx }) {
const palettes = [
["#8b3a3a", "#2f5d8a", "#4a7a4a", "#c08b3e", "#6b4a8a", "#3a2614", "#c25d4a"],
["#2f5d8a", "#c08b3e", "#8b3a3a", "#4a7a4a", "#6b4a8a", "#c25d4a", "#3a2614"],
["#4a7a4a", "#6b4a8a", "#c08b3e", "#2f5d8a", "#8b3a3a", "#c25d4a"],
["#c08b3e", "#3a2614", "#2f5d8a", "#4a7a4a", "#8b3a3a", "#6b4a8a"],
];
const widths = [
[16, 14, 18, 14, 16, 14, 18, 14, 16],
[18, 14, 18, 16, 14, 18, 18, 14, 16],
[16, 14, 18, 14, 18, 16, 14, 14, 16],
[14, 18, 14, 18, 18, 14, 18, 16, 14],
];
const pal = palettes[idx % palettes.length];
const ws = widths[idx % widths.length];
let x = 1696;
const items = [];
let i = 0;
while (x < 1796 && i < ws.length) {
const ww = ws[i];
if (x + ww > 1796) break;
const c = pal[i % pal.length];
const h = 60 + ((i * 7) % 12) - 4;
items.push(
);
x += ww + 1;
i++;
}
return {items};
}
window.Room = Room;