feat: let the reader mark an event as repeating daily
Dailiness was read off the source's wording alone, which is wrong in both directions: a grind that resets every day but whose page never prints "daily" got no checklist, and a banner whose blurb mentions "daily login rewards" got one nobody could dismiss. The reader's answer now wins. The control sits exactly where the checklist goes — the one place the answer visibly matters — so marking an event and ticking today off are the same gesture in the same place. An override is stored only when it disagrees with detection. Recording agreement would freeze today's guess into the reader's own data, so a later parser improvement could never reach that event. Marked events also join today's dailies at the top of the page, beside the per-game chores: at 23:50 a login campaign and a commission run are the same job, and ticking one should not mean opening a sheet to find its checklist. Co-Authored-By: Claude Opus 5 (1M context) <[email protected]>
This commit is contained in:
Lucas Winther
co-authored by
Claude Opus 5
Claude Opus 5
parent
6177633abc
commit
7f384eb9db
@@ -1,6 +1,6 @@
|
||||
import { dailiesId, dayKey, msUntilReset, streakOf } from "../../shared/daily.ts";
|
||||
import { gameMeta } from "../../shared/games.ts";
|
||||
import type { GameId, Region } from "../../shared/schema.ts";
|
||||
import type { GachaEvent, GameId, Region } from "../../shared/schema.ts";
|
||||
import { formatRemaining } from "../../shared/time.ts";
|
||||
|
||||
/**
|
||||
@@ -12,32 +12,42 @@ import { formatRemaining } from "../../shared/time.ts";
|
||||
* than feed data. Ticking one is stored in exactly the same day log an event's
|
||||
* checklist uses, so streaks and exports work the same way for both.
|
||||
*
|
||||
* Running events that repeat sit here too, so ticking today off never means
|
||||
* opening a sheet to find the checklist. The checklist is still where the whole
|
||||
* run lives — this is just today's line of it.
|
||||
*
|
||||
* Sits above the event list because it is the one part of the page that is
|
||||
* answerable in ten seconds and expires tonight.
|
||||
*/
|
||||
export function Dailies({
|
||||
games,
|
||||
events,
|
||||
region,
|
||||
now,
|
||||
daysFor,
|
||||
onToggleDay,
|
||||
}: {
|
||||
games: GameId[];
|
||||
/** Live events that repeat daily — detected, or marked by the reader. */
|
||||
events: GachaEvent[];
|
||||
region: Region;
|
||||
now: number;
|
||||
daysFor: (id: string) => string[];
|
||||
onToggleDay: (id: string, day: string) => void;
|
||||
}) {
|
||||
if (games.length === 0) return null;
|
||||
if (games.length === 0 && events.length === 0) return null;
|
||||
|
||||
const today = dayKey(now, region);
|
||||
const doneEvents = events.filter((e) => daysFor(e.id).includes(today));
|
||||
const done = games.filter((g) => daysFor(dailiesId(g)).includes(today));
|
||||
const total = games.length + events.length;
|
||||
const complete = done.length + doneEvents.length;
|
||||
|
||||
return (
|
||||
<section className="border-b border-hairline px-4 py-4">
|
||||
<div className="flex items-baseline justify-between gap-3">
|
||||
<h2 className="eyebrow">
|
||||
Today's dailies · {done.length}/{games.length}
|
||||
Today's dailies · {complete}/{total}
|
||||
</h2>
|
||||
<p className="tnum text-[0.6875rem] text-faint">
|
||||
resets in {formatRemaining(msUntilReset(now, region))}
|
||||
@@ -48,61 +58,108 @@ export function Dailies({
|
||||
{games.map((id) => {
|
||||
const game = gameMeta(id);
|
||||
const key = dailiesId(id);
|
||||
const days = daysFor(key);
|
||||
const isDone = days.includes(today);
|
||||
const streak = streakOf(days, today);
|
||||
|
||||
return (
|
||||
<li key={id}>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => onToggleDay(key, today)}
|
||||
aria-pressed={isDone}
|
||||
aria-label={`${game.name} dailies — ${game.dailyTasks}${
|
||||
isDone ? ", done today" : ", not done today"
|
||||
}`}
|
||||
<li key={key}>
|
||||
<TickChip
|
||||
label={game.short}
|
||||
hue={game.hue}
|
||||
title={game.dailyTasks}
|
||||
className="flex items-center gap-2 rounded-full border px-3 py-1.5 text-xs font-medium transition-colors"
|
||||
style={{
|
||||
borderColor: isDone ? game.hue : "var(--color-hairline)",
|
||||
color: isDone ? game.hue : "var(--color-faint)",
|
||||
background: isDone
|
||||
? `color-mix(in srgb, ${game.hue} 14%, transparent)`
|
||||
: "transparent",
|
||||
}}
|
||||
>
|
||||
<svg viewBox="0 0 16 16" aria-hidden className="size-3">
|
||||
<path
|
||||
d="M2.5 8.5l3.5 3.5 7.5-8"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2.2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
opacity={isDone ? 1 : 0.3}
|
||||
/>
|
||||
</svg>
|
||||
{game.short}
|
||||
{streak > 1 && (
|
||||
<span className="tnum text-[0.625rem] opacity-70">
|
||||
{streak}d
|
||||
</span>
|
||||
)}
|
||||
</button>
|
||||
ariaLabel={`${game.name} dailies — ${game.dailyTasks}`}
|
||||
days={daysFor(key)}
|
||||
today={today}
|
||||
onToggle={() => onToggleDay(key, today)}
|
||||
/>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
|
||||
{events.map((event) => {
|
||||
const game = gameMeta(event.game);
|
||||
return (
|
||||
<li key={event.id}>
|
||||
<TickChip
|
||||
label={event.title}
|
||||
hue={game.hue}
|
||||
title={`${game.name} — ${event.title}`}
|
||||
ariaLabel={`${event.title} (${game.name})`}
|
||||
days={daysFor(event.id)}
|
||||
today={today}
|
||||
onToggle={() => onToggleDay(event.id, today)}
|
||||
/>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
|
||||
<p className="mt-2 text-[0.6875rem] leading-relaxed text-faint">
|
||||
{done.length === games.length
|
||||
{complete === total
|
||||
? "All done. Nothing else expires tonight."
|
||||
: `${waiting(games.length - done.length)} still waiting on you today.`}
|
||||
: `${waiting(total - complete)} still waiting on you today.`}
|
||||
</p>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* One thing to tick off today.
|
||||
*
|
||||
* The same pill whether it is a game's standing chore or an event that repeats:
|
||||
* to the reader at 23:50 they are the same job, and the distinction between
|
||||
* "the app knows about this" and "a wiki published it" is ours, not theirs.
|
||||
*/
|
||||
function TickChip({
|
||||
label,
|
||||
hue,
|
||||
title,
|
||||
ariaLabel,
|
||||
days,
|
||||
today,
|
||||
onToggle,
|
||||
}: {
|
||||
label: string;
|
||||
hue: string;
|
||||
title: string;
|
||||
ariaLabel: string;
|
||||
days: string[];
|
||||
today: string;
|
||||
onToggle: () => void;
|
||||
}) {
|
||||
const isDone = days.includes(today);
|
||||
const streak = streakOf(days, today);
|
||||
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
onClick={onToggle}
|
||||
aria-pressed={isDone}
|
||||
aria-label={`${ariaLabel}${isDone ? ", done today" : ", not done today"}`}
|
||||
title={title}
|
||||
className="flex max-w-[15rem] items-center gap-2 rounded-full border px-3 py-1.5 text-xs font-medium transition-colors"
|
||||
style={{
|
||||
borderColor: isDone ? hue : "var(--color-hairline)",
|
||||
color: isDone ? hue : "var(--color-faint)",
|
||||
background: isDone ? `color-mix(in srgb, ${hue} 14%, transparent)` : "transparent",
|
||||
}}
|
||||
>
|
||||
<svg viewBox="0 0 16 16" aria-hidden className="size-3 shrink-0">
|
||||
<path
|
||||
d="M2.5 8.5l3.5 3.5 7.5-8"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2.2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
opacity={isDone ? 1 : 0.3}
|
||||
/>
|
||||
</svg>
|
||||
<span className="truncate">{label}</span>
|
||||
{streak > 1 && (
|
||||
<span className="tnum shrink-0 text-[0.625rem] opacity-70">{streak}d</span>
|
||||
)}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
function waiting(n: number): string {
|
||||
return n === 1 ? "One game" : `${n} games`;
|
||||
return n === 1 ? "One thing" : `${n} things`;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user