// DiveDex — Screens A: Welcome, Levels, Dashboard, Log Dive, Sightings, Recap
const { useState, useEffect, useMemo } = React;
// Convert an ISO timestamp to/from the value expected by .
// datetime-local uses local time "YYYY-MM-DDTHH:MM" with no timezone.
function isoToDatetimeLocal(iso) {
if (!iso) return '';
const d = new Date(iso);
if (isNaN(d.getTime())) return '';
const pad = (n) => String(n).padStart(2, '0');
return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}T${pad(d.getHours())}:${pad(d.getMinutes())}`;
}
function datetimeLocalToIso(local) {
if (!local) return null;
const d = new Date(local); // browser parses as local time
if (isNaN(d.getTime())) return null;
return d.toISOString();
}
// LockScreen — first screen any non-authenticated user sees.
// Always offers a user-pick (Rick / Siet). Shows a password input only if
// the shared password is set. Once unlocked, state.locked → false and
// state.activeUserId → the picked user; persists, so a normal browser
// reload skips this screen until the user explicitly Locks from Settings.
function LockScreen() {
const { state, actions } = useDiveDex();
const rick = state.users.find(u => u.id === 'rick');
const siet = state.users.find(u => u.id === 'siet');
const [picked, setPicked] = useState(state.activeUserId || null);
const [password, setPassword] = useState('');
const [error, setError] = useState(null);
const needsPassword = !!state.authPassword;
// First-run affordance: when no password is set, offer to create one
// inline so users don't have to unlock-then-go-to-Settings.
const [addPwOpen, setAddPwOpen] = useState(false);
const [newPw, setNewPw] = useState('');
const [newPwConfirm, setNewPwConfirm] = useState('');
const handleUnlock = () => {
if (!needsPassword && addPwOpen) {
if (!newPw) {
setError('Type a password or close the password-setup card.');
return;
}
if (newPw !== newPwConfirm) {
setError('Passwords don\'t match.');
return;
}
const result = actions.unlockApp(picked, '', { setNewPassword: newPw });
if (!result.ok) setError(result.reason);
else setError(null);
return;
}
const result = actions.unlockApp(picked, password);
if (!result.ok) setError(result.reason);
else setError(null);
};
const onKey = (e) => { if (e.key === 'Enter') handleUnlock(); };
const userCard = (u) => {
const isOn = picked === u.id;
return (
);
};
return (
WHO'S DIVING
Pick a profile.
{needsPassword
? 'Choose your profile and enter the shared password to continue.'
: 'Choose your profile to continue. No password is set yet — anyone with this device can unlock. Add one below if you want to keep things private.'}
{expedition.target && Target · {expedition.target}}
{lastDive ? Tap to log similar : Tap to log}
{lastDive && lastDive.gas && {lastDive.gas} {lastDive.nitrox || ''}}
);
})()}
{/* Status chips — derived from real side-quest + Air Zen state */}
Status
{(() => {
const completedToday = state.sideQuests.filter(q => q.state === 'completed').length;
const activeQuests = state.sideQuests.filter(q => q.state === 'active');
const lockedQuests = state.sideQuests.filter(q => q.state === 'locked');
// Air Zen streak — count consecutive most-recent dives that earned the bonus
let zenStreak = 0;
for (let i = state.dives.length - 1; i >= 0; i--) {
if (state.dives[i].airZen) zenStreak++; else break;
}
const chips = [];
if (activeQuests.length > 0) chips.push(
{activeQuests.length} active side quest{activeQuests.length === 1 ? '' : 's'}
);
if (completedToday > 0) chips.push(
{completedToday} side quest{completedToday === 1 ? '' : 's'} done
);
if (zenStreak > 0) chips.push(
Air Zen streak ×{zenStreak}
);
if (lockedQuests.length > 0) chips.push(
{lockedQuests.length} locked
);
if (chips.length === 0) chips.push(
No status yet — log a dive or complete a side quest
);
return chips;
})()}
{/* Trip plan */}
Trip plan
{(() => {
// Build trip plan: real logged dives + upcoming placeholders.
const logged = state.dives.map(d => ({
...d, status: 'logged',
date: d.createdAt ? new Date(d.createdAt).toLocaleDateString(undefined, { month: 'short', day: 'numeric' }) : '',
xp: d.totalXp || 0, sightings: (state.sightings.filter(s => s.diveId === d.id).length),
}));
const remaining = Math.max(0, divesTotal - logged.length);
const upcoming = Array.from({ length: remaining }).map((_, i) => {
const isNext = i === 0;
return {
id: 'plan-' + i,
no: logged.length + i + 1,
// Next dive gets the "Hunt" hint; later placeholders just
// read "Dive N · —" so the trip plan doesn't show four
// identical "Hunt: Hammerhead" rows. The em-dash is the
// "TBD" placeholder for sites you haven't logged yet.
site: isNext
? (expedition.target ? `Hunt: ${expedition.target}` : 'Next dive')
: '—',
op: isNext ? (expedition.sub || 'Trip plan') : 'Upcoming',
date: '',
status: isNext ? 'next' : 'locked',
};
});
const rows = [...logged, ...upcoming];
return rows.length === 0 ? (
No dives planned yet. Log your first dive to start the trip plan.
) : rows.map((d, i) => (
{
if (d.status === 'locked') return;
if (d.status === 'logged') nav('recap', d.id);
else nav('log');
}}/>
));
})()}
{/* Side quests pull */}