// Shared kiosk atoms: StatusBar, Stepper, FaceMesh placeholder, sensor visualizations.
const { useState, useEffect, useMemo, useRef } = React;
// ── StatusBar (top of every screen post-idle) ─────────────────
function StatusBar({ stepIdx, location = 'Smile Dental · Bandra W', clock = true }) {
const [time, setTime] = useState(() => fmtTime());
useEffect(() => {
if (!clock) return;
const t = setInterval(() => setTime(fmtTime()), 1000 * 30);
return () => clearInterval(t);
}, [clock]);
function fmtTime() {
return new Date().toLocaleTimeString('en-IN', { hour: '2-digit', minute: '2-digit', hour12: false });
}
return (
{stepIdx != null && }
Kiosk 04 · {time} IST
);
}
// ── Stepper across major phases ────────────────────────────────
const PHASES = ['Check-in', 'Questions', 'Photos', 'Voice', 'Breath', 'Done'];
function Stepper({ idx = 0 }) {
return (
{PHASES.map((p, i) => (
{p}
{i < PHASES.length - 1 && }
))}
);
}
// ── FaceMesh placeholder (animated) ────────────────────────────
// Renders a faint face silhouette + ~70 mesh dots that subtly oscillate.
// Used for both the position screen and the photo-capture preview.
const MESH_NODES = (() => {
// hand-picked points outlining a face oval, eyes, nose, mouth.
// coords are in a 100×140 viewport, centered.
const oval = [];
const N = 26;
for (let i = 0; i < N; i++) {
const a = (i / N) * Math.PI * 2;
const x = 50 + Math.cos(a) * 30;
const y = 70 + Math.sin(a) * 42;
oval.push([x, y]);
}
const features = [
// eyes
[40, 60], [42, 62], [38, 62], [36, 60], [38, 58], [42, 58],
[60, 60], [62, 62], [64, 60], [62, 58], [58, 60], [58, 62],
// brows
[36, 53], [40, 51], [44, 53],
[56, 53], [60, 51], [64, 53],
// nose
[50, 65], [50, 70], [48, 75], [52, 75], [46, 78], [54, 78], [50, 78],
// mouth
[44, 88], [47, 87], [50, 87], [53, 87], [56, 88],
[44, 92], [47, 93], [50, 93], [53, 93], [56, 92],
// cheeks
[34, 76], [66, 76], [36, 84], [64, 84],
// chin
[50, 102], [46, 100], [54, 100],
];
return [...oval, ...features];
})();
function FaceMeshView({ status = 'aligned', drift = 0 }) {
// drift in px (visualizes "centering... +12px")
const [tick, setTick] = useState(0);
useEffect(() => {
const t = setInterval(() => setTick(v => v + 1), 80);
return () => clearInterval(t);
}, []);
const dx = Math.sin(tick / 8) * 0.5 + (drift || 0) * 0.08;
const dy = Math.cos(tick / 11) * 0.4;
// mouth is animated: opens/closes during capture
const mouthOpen = status === 'capturing' || status === 'aligned';
return (
);
}
// ── Camera frame chrome (used inside .cap-cam / .pos-cam) ─────
function CameraChrome({ status, statusLabel, recording = true, kiosk = 'cam0' }) {
return (
<>
{statusLabel}
{recording && (
REC · 30fps · 1080p · {kiosk}
)}
{new Date().toISOString().slice(0,19).replace('T',' ')}
);
}
// ── Countdown ring (3-2-1 capture) ────────────────────────────
function CountdownRing({ from = 3, onDone }) {
const [n, setN] = useState(from);
useEffect(() => {
if (n <= 0) { onDone?.(); return; }
const t = setTimeout(() => setN(v => v - 1), 1000);
return () => clearTimeout(t);
}, [n]);
const C = 2 * Math.PI * 34;
const offset = C * (1 - n / from);
return (
{n > 0 ? n : ''}
);
}
// ── Voice waveform (live bars) ────────────────────────────────
function VoiceBars({ active = true }) {
const [tick, setTick] = useState(0);
useEffect(() => {
if (!active) return;
const t = setInterval(() => setTick(v => v + 1), 90);
return () => clearInterval(t);
}, [active]);
const N = 32;
return (
{Array.from({ length: N }).map((_, i) => {
const phase = (i / N) * Math.PI * 2 + tick * 0.4;
const env = Math.sin((i + tick) * 0.27) * 0.5 + 0.5;
const h = active ? 10 + (Math.abs(Math.sin(phase)) * 0.7 + env * 0.3) * 90 : 4;
return ;
})}
);
}
// ── Generic countdown text ────────────────────────────────────
function useCountdown(seconds, active, onDone) {
const [t, setT] = useState(seconds);
useEffect(() => {
if (!active) { setT(seconds); return; }
if (t <= 0) { onDone?.(); return; }
const tm = setTimeout(() => setT(v => v - 1), 1000);
return () => clearTimeout(tm);
}, [active, t]);
return t;
}
// ── BreathLine: live H2S reading climbing then settling ───────
function BreathClimb({ active, target = 42, onDone }) {
const [val, setVal] = useState(0);
useEffect(() => {
if (!active) { setVal(0); return; }
let v = 0;
const t = setInterval(() => {
v = Math.min(target + (Math.random() - 0.5) * 4, v + 6 + Math.random() * 4);
if (v >= target) { v = target + (Math.random() - 0.5) * 2; }
setVal(Math.max(0, v));
}, 220);
const done = setTimeout(() => { clearInterval(t); setVal(target); onDone?.(); }, 8200);
return () => { clearInterval(t); clearTimeout(done); };
}, [active]);
return Math.round(val);
}
window.StatusBar = StatusBar;
window.Stepper = Stepper;
window.FaceMeshView = FaceMeshView;
window.CameraChrome = CameraChrome;
window.CountdownRing = CountdownRing;
window.VoiceBars = VoiceBars;
window.useCountdown = useCountdown;
window.BreathClimb = BreathClimb;
window.PHASES = PHASES;