// Readout view — primary operator surface. Also contains receipt panel + walk-up modal.
const { useState, useEffect, useMemo, useRef } = React;
function ReadoutView({ t, density, currentRead, history, pendingUnknown, onSimulate, onPrint, onSelectRead, walkupOpen, setWalkupOpen, lastFlashKey, autoPrint, setAutoPrint, defaultTpl, setDefaultTpl, onEdit, onManualDnf, onUnDnf, onPickPending }) {
const isDense = density === 'high';
const isLow = density === 'low';
const [rcptTpl, setRcptTpl] = useState(defaultTpl || 'classic');
const [dnfOpen, setDnfOpen] = useState(false);
const [dnfReason, setDnfReason] = useState('Bröt loppet');
useEffect(() => { setDnfOpen(false); setDnfReason('Bröt loppet'); }, [currentRead && currentRead.cardNumber]);
useEffect(() => { if (defaultTpl) setRcptTpl(defaultTpl); }, [defaultTpl, currentRead && currentRead.cardNumber]);
return (
{/* Latest read */}
{t('ro.latest')}
{t('ro.feed.live')}
{!currentRead && (
SI ▢
{t('ro.waiting')}
{t('ro.waiting.desc')}
)}
{currentRead && currentRead.unknown && (
{currentRead.cardNumber}
⚠ {t('ro.unknownCard')}
{t('ro.card')} {currentRead.cardNumber}
{t('ro.time')} {currentRead.readTime}
)}
{currentRead && !currentRead.unknown && (
{currentRead.cardNumber}
{currentRead.name}
{t('ro.class')} {currentRead.cls}
{t('ro.club')} {currentRead.club}
{t('ro.start')} {currentRead.startTime}
{currentRead.elapsed}
{currentRead.place ? (<>{t('ro.place')} {currentRead.place} · ) : null}
{currentRead.punches && (
<>
{t('ro.course')}
{currentRead.punches.filter(p => p.ok).length}/{currentRead.punches.length}
{!isDense && (
{currentRead.punches.map((p, i) => (
{i+1}
{p.finish ? 'M' : p.code}
{p.split}
))}
)}
{isDense && (
| # |
{t('ro.code')} |
{t('ro.split')} |
{t('ro.cumul')} |
{currentRead.punches.map((p, i) => (
| {i+1} |
{p.finish ? 'M (mål)' : p.code} |
{p.split} |
{p.time} |
))}
)}
)}
)}
{currentRead && currentRead.punches && (
{dnfOpen && currentRead.status !== 'DNF' && (
e.stopPropagation()}>
setDnfReason(e.target.value)} maxLength={500} />
)}
Star TSP143 · /dev/usb/lp0
P skriv ut
)}
{/* Receipt mirror */}
{currentRead && currentRead.punches && (
{t('ro.printed')}
80mm thermal · ESC/POS
{autoPrint &&
AUTO}
{['classic', 'standing', 'top4', 'detailed', 'minimal', 'kids'].map(k => (
))}
)}
{pendingUnknown && pendingUnknown.length > 0 && (
⚠ {t('ro.pending.title')}
{pendingUnknown.length}
{t('ro.pending.desc')}
{pendingUnknown.map((cn, i) => (
))}
)}
{t('ro.history')}
{history.length}
{history.map((r, i) => {
const isActive = currentRead && currentRead.cardNumber === r.cardNumber && currentRead.readTime === r.readTime;
return (
);
})}
);
}
function StatusPill({ status, t, small }) {
// Status model in line with IOF / Eventor:
// OK · MP (missing punch) · DNF · DNS (did not start) · DQ (disqualified)
// · CANCEL · MAX (overtime / time cap)
// Fatal terminations group under .dnf; penalty/non-fatal under .mp; neutral under .pend.
const cls =
status === 'OK' ? 'ok'
: status === 'MP' || status === 'MAX' ? 'mp'
: status === 'DNF' || status === 'DNS' || status === 'DQ' ? 'dnf'
: 'pend';
return (
{status}
);
}
/* ---------- Skogis generator (kids receipt) ----------
Procedurally generates a tamagotchi-like "Skogis" forest critter from
stable inputs (cardNumber, name, club, class). Same runner always gets
the same critter; the race result drives stats and accessory only. */
function _skogisHash() {
let h = 2166136261 >>> 0;
for (let i = 0; i < arguments.length; i++) {
const s = String(arguments[i]);
for (let j = 0; j < s.length; j++) {
h ^= s.charCodeAt(j);
h = Math.imul(h, 16777619);
}
h ^= 0x9e3779b9;
}
return h >>> 0;
}
function _skogisRng(seed) {
let a = seed >>> 0;
return () => {
a = (a + 0x6D2B79F5) >>> 0;
let t = a;
t = Math.imul(t ^ (t >>> 15), t | 1);
t ^= t + Math.imul(t ^ (t >>> 7), t | 61);
return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
};
}
function _spick(rng, arr) { return arr[Math.floor(rng() * arr.length)]; }
function _sint(rng, lo, hi) { return lo + Math.floor(rng() * (hi - lo + 1)); }
const SKOGIS_PALETTES = [
{ body: '#6FA45C', belly: '#cfe2b9', accent: '#3d6a2e', name: 'Skog' }, // green
{ body: '#9C7A4F', belly: '#e7d6b8', accent: '#5e4724', name: 'Stig' }, // earth
{ body: '#C7615A', belly: '#f3cdc4', accent: '#7a2f29', name: 'Lingon' }, // berry red
{ body: '#5E8AB8', belly: '#cfdfee', accent: '#2f4f74', name: 'Bäck' }, // water
{ body: '#7d6fa4', belly: '#d8d2e7', accent: '#3f3464', name: 'Skymn' }, // dusk
{ body: '#d3a851', belly: '#f1deaa', accent: '#7a5d1d', name: 'Sol' }, // sun
{ body: '#5fa39c', belly: '#cfe6e2', accent: '#2c5e58', name: 'Mosse' }, // moss teal
{ body: '#8b8b94', belly: '#dadae0', accent: '#3f3f47', name: 'Sten' }, // stone gray
];
const SKOGIS_SPECIES = [
'Skogis', 'Stigis', 'Mossis', 'Tallis', 'Granis',
'Stenis', 'Bäckis', 'Tussis', 'Kompis', 'Lingis',
];
function skogisFromRead(read) {
const seed = _skogisHash(read.cardNumber || 0, read.name || '', read.club || '', read.cls || '');
const rng = _skogisRng(seed);
// identity (stable per runner)
const palette = _spick(rng, SKOGIS_PALETTES);
const species = _spick(rng, SKOGIS_SPECIES);
const bodyShape = _spick(rng, ['blob', 'tall', 'round', 'pear']);
const eyeStyle = _spick(rng, ['round', 'oval', 'sleepy', 'spark']);
const mouth = _spick(rng, ['smile', 'o', 'line', 'w', 'tongue']);
const ears = _spick(rng, ['tuft', 'bunny', 'antennae', 'leaf', 'horns']);
const pattern = _spick(rng, ['plain', 'plain', 'spots', 'stripes', 'belly']);
const hasArms = rng() > 0.4;
const blush = rng() > 0.55;
const baseLevel = ((read.cardNumber || 1) % 29) + 1;
// result-derived
const placeNum = typeof read.place === 'number' ? read.place : null;
const status = read.status || 'OK';
const accessory = (
placeNum === 1 ? 'crown' :
placeNum === 2 ? 'silver' :
placeNum === 3 ? 'bronze' :
(status === 'MP' || status === 'DNF' || status === 'DSQ') ? 'bandage' :
'flag'
);
// stats 1..5
const ctrls = (read.punches || []).filter(p => !p.finish).length;
// best legs / total → KART
const bestLegs = (read.punches || []).filter(p => p.legRank === 1).length;
const totalLegs = Math.max(1, (read.punches || []).length);
const kart = Math.max(1, Math.min(5, Math.round((bestLegs / totalLegs) * 5) + 1));
// FART: based on place vs starters
const starters = read.progress?.startersInClass || 6;
const placeFor = placeNum || starters;
const fart = Math.max(1, Math.min(5, 6 - Math.round((placeFor / starters) * 5)));
// STIG: count of controls, scaled
const stig = Math.max(1, Math.min(5, Math.round(ctrls / 3)));
// TUR: stable random
const tur = _sint(rng, 1, 5);
const levelBonus = (placeNum === 1 ? 5 : placeNum === 2 ? 3 : placeNum === 3 ? 2 : 0);
const level = baseLevel + levelBonus;
return { palette, species, bodyShape, eyeStyle, mouth, ears, pattern,
hasArms, blush, accessory, stats: { fart, stig, kart, tur }, level };
}
function SkogisFigure({ skogis, size = 180 }) {
const { palette, bodyShape, eyeStyle, mouth, ears, pattern, hasArms, blush, accessory } = skogis;
const W = 200, H = 210;
// body geometry
const cx = 100;
const cy = bodyShape === 'tall' ? 118 : 120;
const rx = bodyShape === 'tall' ? 56 : bodyShape === 'round' ? 70 : 66;
const ry = bodyShape === 'tall' ? 70 : bodyShape === 'round' ? 60 : bodyShape === 'pear' ? 68 : 62;
// eye anchor
const eyeY = cy - 12;
const eyeDX = bodyShape === 'tall' ? 16 : 20;
return (
);
}
function StatBar({ label, value, color }) {
return (
{label}
{[1,2,3,4,5].map(i => (
))}
);
}
function ReceiptMockup({ read, t, tpl = 'classic' }) {
const prog = read.progress || { place: read.place, finishedInClass: 1, startersInClass: 1, behind: null };
const isLeader = prog.place === 1;
const tornEdge = {
clipPath: 'polygon(0 0, 100% 0, 100% calc(100% - 6px), 96% 100%, 90% calc(100% - 4px), 84% 100%, 78% calc(100% - 4px), 72% 100%, 66% calc(100% - 4px), 60% 100%, 54% calc(100% - 4px), 48% 100%, 42% calc(100% - 4px), 36% 100%, 30% calc(100% - 4px), 24% 100%, 18% calc(100% - 4px), 12% 100%, 6% calc(100% - 4px), 0 100%)'
};
// ---------- CLASSIC ----------
if (tpl === 'classic') {
return (
{t('rcpt.title')}
Onsdagsträning2026-05-13
{read.name}{read.cardNumber}
{read.cls} · {read.club}{read.startTime}
{t('rcpt.controls')}
{read.punches.map((p, i) => (
| {i+1}. |
{p.finish ? 'M' : p.code} |
{p.split} |
{p.time} |
))}
{t('rcpt.total')}{read.elapsed} {read.status}
{read.place &&
{t('rcpt.place')} {read.cls}{read.place}
}
{t('rcpt.thanks')}
);
}
// ---------- CLASS STANDING ----------
if (tpl === 'standing') {
return (
{t('rcpt.title')}
Onsdagsträning2026-05-13
{read.name}{read.cardNumber}
{read.cls} · {read.club}{read.startTime}
{read.elapsed}
{t('rcpt.total')} · {read.status}
{read.status === 'OK' && read.place ? (
<>
{t('rcpt.place')} {read.cls}
{read.place} {t('rcpt.of')} {prog.finishedInClass} {t('rcpt.finished')}
{prog.startersInClass} {t('rcpt.starters')}
{isLeader ? '★ ' + t('rcpt.leader') : t('rcpt.behind')}
{isLeader ? '—' : (read.progress?.behind || '+0:00')}
) : (
Status{read.status}
)}
{t('rcpt.controls')}
{read.punches.map((p, i) => (
| {i+1}. |
{p.finish ? 'M' : p.code} |
{p.split} |
{p.time} |
))}
{t('rcpt.thanks')}
);
}
// ---------- DETAILED (MeOS-OZ style: per-leg rank + time lost) ----------
if (tpl === 'detailed') {
return (
{t('rcpt.title')}
Onsdagsträning2026-05-13
{read.name}{read.cardNumber}
{read.cls} · {read.club}{read.startTime}
| # | Kod | Sträcka | Pl | +/− |
{read.punches.map((p, i) => (
| {i+1}. |
{p.finish ? 'M' : p.code} |
{p.split} |
{p.legRank || '—'} |
{p.lost || '—'} |
))}
{t('rcpt.total')}{read.elapsed} {read.status}
{read.place && (
<>
{t('rcpt.place')}{read.place} {t('rcpt.of')} {prog.finishedInClass} {t('rcpt.finished')}
{isLeader ? t('rcpt.leader') : t('rcpt.behind')}{isLeader ? '—' : (prog.behind || '+0:00')}
)}
{t('rcpt.thanks')}
);
}
// ---------- TOP 4 (leaderboard slice) ----------
if (tpl === 'top4') {
const classResults = (window.MOCK_RESULTS?.[read.cls] || []).slice(0, 4);
const youInTop4 = classResults.some(r => r.name === read.name);
return (
{t('rcpt.title')}
Onsdagsträning2026-05-13
{read.name}{read.cardNumber}
{read.cls} · {read.club}{read.startTime}
{t('rcpt.total')}{read.elapsed} {read.status}
{read.place && (
{isLeader ? '★ ' + t('rcpt.leader') : t('rcpt.behind')}
{isLeader ? '—' : (prog.behind || '+0:00')}
)}
{t('rcpt.top.title').replace('{cls}', read.cls)}
{classResults.map((r, i) => {
const isYou = r.name === read.name;
return (
| {r.place || '—'} |
{r.name}{isYou ? ' ←' : ''} |
{r.status === 'PEND' ? t('rcpt.top.pending') : r.time} |
);
})}
{!youInTop4 && (
<>
{t('rcpt.top.yourow')}
| {read.place || '—'} |
{read.name} ← |
{read.elapsed} |
)}
{t('rcpt.thanks')}
);
}
// ---------- KIDS (Skogis collectible) ----------
if (tpl === 'kids') {
const skogis = skogisFromRead(read);
const ctrls = (read.punches || []).filter(p => !p.finish).length;
const placeNum = typeof read.place === 'number' ? read.place : null;
const subtitle = (
placeNum === 1 ? '★ Klassens snabbaste ★' :
placeNum === 2 ? 'Silvermedalj' :
placeNum === 3 ? 'Bronsmedalj' :
read.status === 'OK' ? 'Mål i skogen!' :
read.status === 'MP' ? 'Tappade bort en kontroll' :
read.status === 'DNF' ? 'Bröt loppet' :
'I full fart!'
);
return (
{t('rcpt.kids.title')}
{skogis.palette.name}{skogis.species.slice(skogis.species.length > 6 ? -3 : -2)}
{skogis.species} · {t('rcpt.kids.level')} {skogis.level}
{read.name}{read.cls}
{read.club}{t('rcpt.kids.born')} 2026-05-13
{subtitle}
{read.elapsed}
{read.status} · {ctrls} {t('rcpt.kids.controls')}{placeNum ? ' · ' + t('rcpt.place').toLowerCase() + ' ' + placeNum : ''}
{/* compact splits for kids — code + split only */}
{(read.punches || []).reduce((rows, p, i) => {
const ri = Math.floor(i / 2);
if (!rows[ri]) rows[ri] = [];
rows[ri].push(p);
return rows;
}, []).map((pair, i) => (
| {i*2+1}. {pair[0].finish ? 'M' : pair[0].code} |
{pair[0].split} |
{pair[1] ? ((i*2+2) + '. ' + (pair[1].finish ? 'M' : pair[1].code)) : ''} |
{pair[1] ? pair[1].split : ''} |
))}
{t('rcpt.kids.foot')}
);
}
// ---------- MINIMAL ----------
return (
{t('rcpt.title')}
{read.name}
{read.cls} · {read.club} · SI {read.cardNumber}
{read.elapsed}
{read.status === 'OK' && read.place ? (
<>{t('rcpt.place')} {read.place} {t('rcpt.of')} {prog.finishedInClass} {t('rcpt.finished')}
) : (
{read.status}
)}
{!isLeader && read.status === 'OK' && (
{prog.behind} {t('rcpt.behind')}
)}
{t('rcpt.thanks')}
);
}
function WalkupModal({ t, cardNumber, classes, onCancel, onSave }) {
const [name, setName] = useState('');
const [club, setClub] = useState('');
const [cls, setCls] = useState(classes[0]?.id || '');
const [card, setCard] = useState(cardNumber || '');
const [suggestions, setSuggestions] = useState([]);
const onClubChange = (v) => {
setClub(v);
if (v.length >= 2) {
const lc = v.toLowerCase();
setSuggestions((window.CLUBS || []).filter(c => c.toLowerCase().includes(lc)).slice(0, 4));
} else {
setSuggestions([]);
}
};
const valid = name.trim().length >= 2 && cls && card;
return (
e.stopPropagation()} style={{width: 'min(560px, 100%)'}}>
⚠
{t('walk.title')}
{t('walk.desc')}
);
}
// ---------- EditCompetitorModal ----------
// Mirrors apps/web/src/lib/components/EditCompetitorModal.svelte —
// operator edits name / club / class / card for an existing competitor.
// Backed by PATCH /api/competitors/:id/profile in the real app.
function EditCompetitorModal({ t, competitor, classes, onCancel, onSave }) {
const [name, setName] = useState(competitor?.name || '');
const [club, setClub] = useState(competitor?.club || '');
const [cls, setCls] = useState(competitor?.cls || classes[0]?.id || '');
const [card, setCard] = useState(competitor?.cardNumber || '');
const [saving, setSaving] = useState(false);
const dirty = (
name.trim() !== (competitor?.name || '') ||
club.trim() !== (competitor?.club || '') ||
cls !== competitor?.cls ||
String(card) !== String(competitor?.cardNumber || '')
);
const valid = name.trim().length >= 2 && cls && card;
const onSubmit = () => {
if (!dirty) { onCancel(); return; }
if (!valid) return;
setSaving(true);
// Simulate the round-trip — the real app PATCHes the bridge.
setTimeout(() => {
onSave({
...competitor,
name: name.trim(),
club: club.trim() || '—',
cls,
cardNumber: parseInt(card) || competitor?.cardNumber,
});
}, 320);
};
return (
e.stopPropagation()} style={{width: 'min(520px, 100%)'}}>
✎
{t('ro.editTitle')}
SI {competitor?.cardNumber}
);
}
Object.assign(window, { ReadoutView, StatusPill, WalkupModal, EditCompetitorModal });