lucasw89/gacha-event-tracker
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(daily): keep each game's colour on its chip, done or not

Browse Source 
The hue only appeared on completion, so the half of the strip a reader
actually scans — the unfinished half — was a row of identical grey pills
with nothing to say which game each belonged to.

Soft border and wash while outstanding, full strength once ticked. Done
is still legible without the colour: the tick, the stronger border and
the deeper wash all carry it.

Co-Authored-By: Claude Opus 5 (1M context) <[email protected]>
This commit is contained in:
Lucas Winther
2026-08-16 20:38:14 +02:00
co-authored by Claude Opus 5
parent e6e4f7085a
commit a0d0faf231
1 changed files with 15 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/client/components/Dailies.tsx
+15 -5
View File
@@ -120,6 +120,11 @@ export function Dailies({
* The same pill whether it is a game's standing chore or an event that repeats: * 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 * 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. * "the app knows about this" and "a wiki published it" is ours, not theirs.
*
* The game's hue is on the border in both states — softly when the job is
* outstanding, fully once it is done. A chip that only takes its colour on
* completion means the strip you actually scan, the unfinished one, is a row of
* identical grey pills with no clue which game each belongs to.
*/ */
function TickChip({ function TickChip({
label, label,
@@ -150,20 +155,25 @@ function TickChip({
title={title} 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" className="flex max-w-[15rem] items-center gap-2 rounded-full border px-3 py-1.5 text-xs font-medium transition-colors"
style={{ style={{
borderColor: isDone ? hue : "var(--color-hairline)", borderColor: isDone ? hue : `color-mix(in srgb, ${hue} 34%, transparent)`,
color: isDone ? hue : "var(--color-faint)", // Colour identifies the game; done-ness is carried by the tick, the
background: isDone ? `color-mix(in srgb, ${hue} 14%, transparent)` : "transparent", // full-strength border and the wash. Keeping the label readable matters
// more than saturating it, so an outstanding chip stays on muted ink.
color: isDone ? hue : "var(--color-muted)",
background: isDone
? `color-mix(in srgb, ${hue} 14%, transparent)`
: `color-mix(in srgb, ${hue} 5%, transparent)`,
}} }}
> >
<svg viewBox="0 0 16 16" aria-hidden className="size-3 shrink-0"> <svg viewBox="0 0 16 16" aria-hidden className="size-3 shrink-0">
<path <path
d="M2.5 8.5l3.5 3.5 7.5-8" d="M2.5 8.5l3.5 3.5 7.5-8"
fill="none" fill="none"
stroke="currentColor" stroke={isDone ? "currentColor" : hue}
strokeWidth="2.2" strokeWidth="2.2"
strokeLinecap="round" strokeLinecap="round"
strokeLinejoin="round" strokeLinejoin="round"
opacity={isDone ? 1 : 0.3} opacity={isDone ? 1 : 0.35}
/> />
</svg> </svg>
<span className="truncate">{label}</span> <span className="truncate">{label}</span>