// SwipeCard.jsx — One Tinder-style card. Pointer-drag right=yes, left=no,
// up=maybe, down=skip. Accessible keyboard arrows + explicit button row.
// Cards render different controls per `kind`: yesno | severity | chips | teeth | info.
const { useState: useSCs, useRef: useSCr, useEffect: useSCe } = React;
function SwipeCard({ card, value, onChange, onAnswer, mode = 'patient' }) {
const ref = useSCr(null);
const start = useSCr({ x: 0, y: 0, down: false });
const [drag, setDrag] = useSCs({ x: 0, y: 0 });
const [dir, setDir] = useSCs(null); // 'yes' | 'no' | 'maybe' | 'skip'
const finish = (d) => {
setDir(d);
// exit animation
const w = ref.current ? ref.current.getBoundingClientRect().width : 360;
const exit = d === 'yes' ? { x: w * 1.5, y: 40 }
: d === 'no' ? { x: -w * 1.5, y: 40 }
: d === 'maybe' ? { x: 0, y: -w }
: { x: 0, y: w };
setDrag(exit);
setTimeout(() => {
onAnswer && onAnswer(d, value);
setDir(null); setDrag({ x: 0, y: 0 });
}, 220);
};
const handleKey = (e) => {
if (e.target && (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA')) return;
if (e.key === 'ArrowRight') { e.preventDefault(); finish('yes'); }
else if (e.key === 'ArrowLeft') { e.preventDefault(); finish('no'); }
else if (e.key === 'ArrowUp') { e.preventDefault(); finish('maybe'); }
else if (e.key === 'ArrowDown') { e.preventDefault(); finish('skip'); }
};
// Cards that need value before advancing don't auto-finish on swipe yes;
// we still allow swipe but use the captured `value` from controls.
const onPointerDown = (e) => {
if (e.target.closest('button, input, select, textarea, [data-no-drag]')) return;
e.currentTarget.setPointerCapture(e.pointerId);
start.current = { x: e.clientX, y: e.clientY, down: true };
};
const onPointerMove = (e) => {
if (!start.current.down) return;
const dx = e.clientX - start.current.x;
const dy = e.clientY - start.current.y;
setDrag({ x: dx, y: dy });
};
const onPointerUp = () => {
if (!start.current.down) return;
start.current.down = false;
const { x, y } = drag;
const w = ref.current ? ref.current.getBoundingClientRect().width : 360;
const threshold = w * 0.32;
if (x > threshold) return finish('yes');
if (x < -threshold) return finish('no');
if (y < -threshold) return finish('maybe');
if (y > threshold) return finish('skip');
setDrag({ x: 0, y: 0 });
};
const transform = dir
? `translate(${drag.x}px, ${drag.y}px) rotate(${drag.x * 0.06}deg)`
: `translate(${drag.x}px, ${drag.y}px) rotate(${drag.x * 0.04}deg)`;
const ghostYes = drag.x > 30 ? Math.min(1, drag.x / 120) : 0;
const ghostNo = drag.x < -30 ? Math.min(1, -drag.x / 120) : 0;
const ghostUp = drag.y < -30 ? Math.min(1, -drag.y / 120) : 0;
const ghostDown = drag.y > 30 ? Math.min(1, drag.y / 120) : 0;
return (
{/* Ghost stamps */}
NOPE
YES
MAYBE
SKIP
{mode === 'clinician' ? 'Clinician triage' : 'Quick triage'} · card {card.id}
{card.prompt}
{card.sub &&
{card.sub}
}
{card.kind === 'info' ? 'Tap → to continue' : 'Swipe or tap a button'}
;
}
if (card.kind === 'severity') {
const v = typeof value === 'number' ? value : 0;
return (
);
}
if (card.kind === 'chips') {
const multi = !!card.multi;
const selected = multi ? (Array.isArray(value) ? value : []) : value;
const toggle = (slug) => {
if (!onChange) return;
if (multi) {
const arr = Array.isArray(value) ? value : [];
onChange(arr.includes(slug) ? arr.filter(x => x !== slug) : [...arr, slug]);
} else {
onChange(slug);
}
};
return (
{(card.chips || []).map(c => {
const on = multi ? selected.includes(c.slug) : selected === c.slug;
return (
);
})}
);
}
if (card.kind === 'teeth') {
const data = (value && typeof value === 'object') ? value : {};
const teeth = Object.keys(data).map(n => +n);
const update = ({ teeth: t, toothPain: tp }) => {
const next = {};
t.forEach(n => { next[n] = tp[n] ?? 5; });
onChange && onChange(next);
};
if (window.ToothChart) {
return
;
}
return Tooth chart loading…
;
}
return null;
}
window.SwipeCard = SwipeCard;