docs(design): specify download progress treatment
Document and mock the redesigned downloading state for the launcher. The reference now replaces the action button slot with a dedicated progress primitive, covers both card and detail-modal layouts, and records the sizing, number formatting, container-query fallback, and sample-data expectations that implementation work should follow. This commit keeps the design package separate from application code so the next UI/backend changes can be reviewed against a stable reference. Test Plan: - git diff --cached --check Refs: local design reference update
This commit is contained in:
@@ -72,11 +72,16 @@ function App() {
|
||||
initialFilter="local" initialSort="az"
|
||||
initialOpenGame={GAMES.find(g => g.id === 'cod4mw')}/>
|
||||
</DCArtboard>
|
||||
<DCArtboard id="detail-modal-downloading" label="E · Detail overlay (downloading)" width={1340} height={840}>
|
||||
<Launcher variant="two" tweaks={t} setTweak={setTweak}
|
||||
initialFilter="local" initialSort="state"
|
||||
initialOpenGame={GAMES.find(g => g.id === 'avp')}/>
|
||||
</DCArtboard>
|
||||
</DCSection>
|
||||
|
||||
<DCSection id="settings" title="Settings dialog"
|
||||
subtitle="Same controls as the dev Tweaks panel, surfaced as an in-app preferences dialog. Open via top-bar menu → Settings.">
|
||||
<DCArtboard id="settings-open" label="E · Settings dialog (open)" width={1340} height={840}>
|
||||
<DCArtboard id="settings-open" label="F · Settings dialog (open)" width={1340} height={840}>
|
||||
<Launcher variant="single" tweaks={t} setTweak={setTweak}
|
||||
initialFilter="all" initialSort="recent"
|
||||
initialSettingsOpen={true}/>
|
||||
|
||||
@@ -84,9 +84,12 @@ function StateChip({ state }) {
|
||||
}
|
||||
|
||||
// ────────────────────────────────────────────────────────────────────
|
||||
// Action button — Play / Install / Download
|
||||
// Action button — Play / Install / Download / [Downloading progress]
|
||||
// ────────────────────────────────────────────────────────────────────
|
||||
function ActionButton({ state, accent, size = 'md', onClick, full = false }) {
|
||||
function ActionButton({ state, accent, size = 'md', onClick, full = false, game }) {
|
||||
if (state === 'downloading' && game) {
|
||||
return <DownloadProgress game={game} accent={accent} size={size} full={full}/>;
|
||||
}
|
||||
const action = ACTION_FOR_STATE[state];
|
||||
const cls = `act-btn act-${action.kind} ${size === 'lg' ? 'act-lg' : ''} ${full ? 'act-full' : ''}`;
|
||||
const icon = action.kind === 'play' ? <Icon.play/>
|
||||
@@ -100,6 +103,91 @@ function ActionButton({ state, accent, size = 'md', onClick, full = false }) {
|
||||
);
|
||||
}
|
||||
|
||||
// ────────────────────────────────────────────────────────────────────
|
||||
// Live download progress — animates from initial progress upward,
|
||||
// jitters speed slightly. Two layouts:
|
||||
// md → card tile. Container-query: shows %+speed, falls back to % only.
|
||||
// lg → detail overlay. Two-line stats + percentage on the right.
|
||||
// ────────────────────────────────────────────────────────────────────
|
||||
function useLiveDownload(game) {
|
||||
const [p, setP] = useState(game.progress ?? 0.1);
|
||||
const [speed, setSpeed] = useState(game.speed ?? 30);
|
||||
useEffect(() => {
|
||||
const id = setInterval(() => {
|
||||
setP(prev => {
|
||||
// step proportional to current speed so smaller games finish faster
|
||||
const stepGb = (speed / 1024) * 0.6; // 600ms tick
|
||||
const next = prev + stepGb / game.size;
|
||||
return next >= 0.985 ? (game.progress ?? 0.1) : next;
|
||||
});
|
||||
setSpeed(prev => {
|
||||
const target = (game.speed ?? 30);
|
||||
const drift = (Math.random() - 0.5) * 6;
|
||||
return Math.max(2, target * 0.85 + prev * 0.15 + drift);
|
||||
});
|
||||
}, 600);
|
||||
return () => clearInterval(id);
|
||||
}, [game.id, game.size, game.speed, game.progress]);
|
||||
return { progress: p, speed };
|
||||
}
|
||||
|
||||
function DownloadProgress({ game, accent, size = 'md', full = false }) {
|
||||
const { progress, speed } = useLiveDownload(game);
|
||||
const pct = Math.min(99, Math.round(progress * 100));
|
||||
const downloadedGb = game.size * progress;
|
||||
const remainingGb = Math.max(0, game.size - downloadedGb);
|
||||
const etaSec = remainingGb * 1024 / Math.max(speed, 0.1);
|
||||
const isLg = size === 'lg';
|
||||
|
||||
const onCancel = (e) => { e.stopPropagation(); /* mock */ };
|
||||
|
||||
if (isLg) {
|
||||
return (
|
||||
<div className={`dl dl-lg ${full ? 'dl-full' : ''}`}
|
||||
role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow={pct}
|
||||
aria-label={`Downloading ${game.title}`}>
|
||||
<div className="dl-fill" style={{ width: `${pct}%` }}/>
|
||||
<div className="dl-lg-grid">
|
||||
<div className="dl-lg-primary">
|
||||
<span className="dl-pulse" aria-hidden="true"/>
|
||||
<span className="dl-label">Downloading</span>
|
||||
</div>
|
||||
<div className="dl-lg-secondary">
|
||||
<span className="dl-bytes">
|
||||
<strong>{fmtBytes(downloadedGb)}</strong>
|
||||
<span className="dl-of"> / {fmtBytes(game.size)}</span>
|
||||
</span>
|
||||
<span className="dl-sep">·</span>
|
||||
<span className="dl-speed">{fmtSpeed(speed)}</span>
|
||||
<span className="dl-sep dl-sep-eta">·</span>
|
||||
<span className="dl-eta">{fmtEta(etaSec)} left</span>
|
||||
</div>
|
||||
<div className="dl-lg-pct">{pct}<span className="dl-pct-sym">%</span></div>
|
||||
<button className="dl-cancel" onClick={onCancel} aria-label="Cancel download">
|
||||
<Icon.close/>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={`dl dl-md ${full ? 'dl-full' : ''}`}
|
||||
role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow={pct}
|
||||
aria-label={`Downloading ${game.title}`}
|
||||
title={`${pct}% · ${fmtSpeed(speed)} · ${fmtEta(etaSec)} left`}>
|
||||
<div className="dl-fill" style={{ width: `${pct}%` }}/>
|
||||
<div className="dl-md-row">
|
||||
<span className="dl-pct">
|
||||
<span className="dl-pulse" aria-hidden="true"/>
|
||||
{pct}<span className="dl-pct-sym">%</span>
|
||||
</span>
|
||||
<span className="dl-speed">{fmtSpeedShort(speed)}</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ────────────────────────────────────────────────────────────────────
|
||||
// Game card
|
||||
// ────────────────────────────────────────────────────────────────────
|
||||
@@ -120,7 +208,7 @@ function GameCard({ game, accent, aspect, onOpen }) {
|
||||
<span className="card-dot">·</span>
|
||||
<span>{game.tags[0]}</span>
|
||||
</div>
|
||||
<ActionButton state={game.state} accent={accent} full/>
|
||||
<ActionButton state={game.state} accent={accent} full game={game}/>
|
||||
</div>
|
||||
</article>
|
||||
);
|
||||
@@ -298,6 +386,7 @@ function KebabMenu({ items }) {
|
||||
function GameDetailModal({ game, accent, onClose }) {
|
||||
if (!game) return null;
|
||||
const action = ACTION_FOR_STATE[game.state];
|
||||
const showCancel = game.state === 'downloading';
|
||||
return (
|
||||
<div className="modal-scrim" onClick={onClose}>
|
||||
<div className="modal" onClick={(e) => e.stopPropagation()}>
|
||||
@@ -336,13 +425,16 @@ function GameDetailModal({ game, accent, onClose }) {
|
||||
</div>
|
||||
<p className="modal-desc">{game.desc}</p>
|
||||
<div className="modal-actions">
|
||||
<ActionButton state={game.state} accent={accent} size="lg"/>
|
||||
<ActionButton state={game.state} accent={accent} size="lg" game={game}/>
|
||||
{game.state === 'installed' && (
|
||||
<button className="ghost-btn ghost-danger"><Icon.trash/><span>Uninstall</span></button>
|
||||
)}
|
||||
{game.state === 'local' && (
|
||||
<button className="ghost-btn ghost-danger"><Icon.trash/><span>Delete from disk</span></button>
|
||||
)}
|
||||
{showCancel && (
|
||||
<button className="ghost-btn ghost-danger"><Icon.close/><span>Cancel</span></button>
|
||||
)}
|
||||
{game.state !== 'none' && <div className="modal-actions-spacer"/>}
|
||||
<button className="ghost-btn">View files</button>
|
||||
</div>
|
||||
@@ -465,7 +557,7 @@ function SettingsDialog({ settings, onChange, onClose }) {
|
||||
}
|
||||
|
||||
Object.assign(window, {
|
||||
Icon, GameCover, StateChip, ActionButton, GameCard,
|
||||
Icon, GameCover, StateChip, ActionButton, DownloadProgress, GameCard,
|
||||
SegmentedFilters, UnderlineFilters, SearchField, SortMenu,
|
||||
StorageMeter, DirectoryButton, KebabMenu, GameDetailModal,
|
||||
SettingsDialog,
|
||||
|
||||
@@ -18,7 +18,7 @@ const GAMES = [
|
||||
{
|
||||
id: 'avp', title: 'Aliens vs. Predator', size: 35.0, version: '2019.10.01',
|
||||
desc: "Three campaigns, three nightmares. Be the alien stalking the dark, the predator hunting both, or the marine just trying to make it home with a working flashlight.",
|
||||
state: 'none', players: '2–16', tags: ['FPS', 'Horror', 'Multiplayer'],
|
||||
state: 'downloading', progress: 0.32, speed: 49.4, players: '2–16', tags: ['FPS', 'Horror', 'Multiplayer'],
|
||||
cover: { c1: '#064e3b', c2: '#020617', accent: '#34d399', mood: 'dark' },
|
||||
},
|
||||
{
|
||||
@@ -120,7 +120,7 @@ const GAMES = [
|
||||
{
|
||||
id: 'quake3', title: 'Quake III Arena', size: 0.5, version: '2010.08.15',
|
||||
desc: "Arena FPS in its most distilled form. Rocket jumps, rail-gun duels, and a netcode that's still the benchmark.",
|
||||
state: 'none', players: '2–16', tags: ['FPS', 'Arena', 'LAN'],
|
||||
state: 'downloading', progress: 0.71, speed: 12.8, players: '2–16', tags: ['FPS', 'Arena', 'LAN'],
|
||||
cover: { c1: '#7f1d1d', c2: '#0a0a0a', accent: '#fbbf24', mood: 'dark' },
|
||||
},
|
||||
{
|
||||
@@ -152,25 +152,45 @@ const GAMES = [
|
||||
// Helpers
|
||||
const fmtSize = (gb) => gb < 1 ? `${Math.round(gb * 1024)} MB` : `${gb.toFixed(1)} GB`;
|
||||
const STATE_META = {
|
||||
installed: { label: 'Installed', dot: '#22c55e' },
|
||||
local: { label: 'Local', dot: '#f59e0b' },
|
||||
none: { label: '', dot: 'transparent' },
|
||||
installed: { label: 'Installed', dot: '#22c55e' },
|
||||
local: { label: 'Local', dot: '#f59e0b' },
|
||||
downloading: { label: 'Downloading', dot: 'var(--accent)' },
|
||||
none: { label: '', dot: 'transparent' },
|
||||
};
|
||||
const ACTION_FOR_STATE = {
|
||||
installed: { label: 'Play', kind: 'play' },
|
||||
local: { label: 'Install', kind: 'install' },
|
||||
none: { label: 'Download', kind: 'download' },
|
||||
installed: { label: 'Play', kind: 'play' },
|
||||
local: { label: 'Install', kind: 'install' },
|
||||
downloading: { label: 'Downloading', kind: 'downloading' },
|
||||
none: { label: 'Download', kind: 'download' },
|
||||
};
|
||||
|
||||
// Format helpers for download UI
|
||||
const fmtSpeed = (mbps) => mbps >= 100 ? `${Math.round(mbps)} MB/s` : `${mbps.toFixed(1)} MB/s`;
|
||||
const fmtSpeedShort = (mbps) => `${Math.round(mbps)} MB/s`;
|
||||
const fmtBytes = (gb) => {
|
||||
if (gb < 1) return `${Math.round(gb * 1024)} MB`;
|
||||
// No trailing zeros: 35 GB, 11.4 GB, 2.35 GB
|
||||
if (gb >= 10) return `${gb.toFixed(1).replace(/\.0$/,'')} GB`;
|
||||
return `${gb.toFixed(2).replace(/0$/,'').replace(/\.$/,'')} GB`;
|
||||
};
|
||||
const fmtEta = (sec) => {
|
||||
if (!isFinite(sec) || sec <= 0) return '—';
|
||||
if (sec < 60) return `${Math.round(sec)} s`;
|
||||
const m = Math.round(sec / 60);
|
||||
if (m < 60) return `${m} min`;
|
||||
return `${Math.floor(m/60)} h ${m%60} min`;
|
||||
};
|
||||
|
||||
const isLocalish = (s) => s === 'installed' || s === 'local' || s === 'downloading';
|
||||
const countByFilter = (games) => ({
|
||||
all: games.length,
|
||||
local: games.filter(g => g.state === 'installed' || g.state === 'local').length,
|
||||
local: games.filter(g => isLocalish(g.state)).length,
|
||||
installed: games.filter(g => g.state === 'installed').length,
|
||||
});
|
||||
|
||||
const filterGames = (games, key) => {
|
||||
if (key === 'all') return games;
|
||||
if (key === 'local') return games.filter(g => g.state === 'installed' || g.state === 'local');
|
||||
if (key === 'local') return games.filter(g => isLocalish(g.state));
|
||||
if (key === 'installed') return games.filter(g => g.state === 'installed');
|
||||
return games;
|
||||
};
|
||||
@@ -189,4 +209,8 @@ window.ACTION_FOR_STATE = ACTION_FOR_STATE;
|
||||
window.countByFilter = countByFilter;
|
||||
window.filterGames = filterGames;
|
||||
window.fmtSize = fmtSize;
|
||||
window.fmtSpeed = fmtSpeed;
|
||||
window.fmtSpeedShort = fmtSpeedShort;
|
||||
window.fmtBytes = fmtBytes;
|
||||
window.fmtEta = fmtEta;
|
||||
window.STORAGE = STORAGE;
|
||||
|
||||
@@ -630,6 +630,201 @@
|
||||
}
|
||||
.act-download:hover { background: rgba(255,255,255,0.12); border-color: var(--bd-3); }
|
||||
|
||||
/* ─── Download progress (in place of action button when state === 'downloading') ─── */
|
||||
.dl {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border-radius: 7px;
|
||||
border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--bd-2));
|
||||
background: rgba(255,255,255,0.04);
|
||||
color: var(--t-1);
|
||||
font: inherit;
|
||||
font-variant-numeric: tabular-nums;
|
||||
container-type: inline-size;
|
||||
isolation: isolate;
|
||||
box-shadow: inset 0 1px 0 rgba(255,255,255,0.04),
|
||||
0 0 0 1px color-mix(in srgb, var(--accent) 16%, transparent);
|
||||
}
|
||||
.dl-full { width: 100%; }
|
||||
.dl-fill {
|
||||
position: absolute; inset: 0 auto 0 0;
|
||||
width: 0%;
|
||||
background:
|
||||
linear-gradient(180deg,
|
||||
color-mix(in srgb, var(--accent) 38%, transparent) 0%,
|
||||
color-mix(in srgb, var(--accent) 26%, transparent) 100%);
|
||||
border-right: 1px solid color-mix(in srgb, var(--accent) 75%, transparent);
|
||||
box-shadow: 2px 0 8px color-mix(in srgb, var(--accent) 35%, transparent);
|
||||
transition: width 480ms cubic-bezier(.4,0,.2,1);
|
||||
z-index: 0;
|
||||
}
|
||||
/* shimmering scanline on top of the fill so it reads as 'live' */
|
||||
.dl-fill::after {
|
||||
content: '';
|
||||
position: absolute; inset: 0;
|
||||
background:
|
||||
repeating-linear-gradient(115deg,
|
||||
transparent 0 14px,
|
||||
rgba(255,255,255,0.05) 14px 22px);
|
||||
background-size: 200% 100%;
|
||||
animation: dl-stripe 1.4s linear infinite;
|
||||
mix-blend-mode: screen;
|
||||
opacity: 0.85;
|
||||
}
|
||||
@keyframes dl-stripe {
|
||||
from { background-position: 0% 0%; }
|
||||
to { background-position: -36px 0%; }
|
||||
}
|
||||
|
||||
/* live pulse dot */
|
||||
.dl-pulse {
|
||||
width: 7px; height: 7px; border-radius: 99px;
|
||||
background: var(--accent);
|
||||
box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 70%, transparent);
|
||||
animation: dl-pulse 1.4s ease-out infinite;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
@keyframes dl-pulse {
|
||||
0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 70%, transparent); }
|
||||
70% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 0%, transparent); }
|
||||
100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 0%, transparent); }
|
||||
}
|
||||
|
||||
/* ── md (card tile) ── */
|
||||
.dl-md {
|
||||
height: 32px;
|
||||
padding: 0 10px;
|
||||
}
|
||||
.dl-md-row {
|
||||
position: relative; z-index: 1;
|
||||
display: flex; align-items: center; justify-content: space-between;
|
||||
width: 100%; height: 100%;
|
||||
gap: 8px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.005em;
|
||||
}
|
||||
.dl-md .dl-pct {
|
||||
display: inline-flex; align-items: center;
|
||||
color: var(--t-1);
|
||||
}
|
||||
.dl-md .dl-pulse { margin-right: 6px; }
|
||||
.dl-md .dl-pct-sym { opacity: 0.55; font-weight: 600; margin-left: 1px; }
|
||||
.dl-md .dl-speed {
|
||||
color: var(--t-2);
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
/* Container-query graceful degradation: when the tile is narrow,
|
||||
drop the speed and centre the percentage so nothing truncates. */
|
||||
@container (max-width: 132px) {
|
||||
.dl-md .dl-speed { display: none; }
|
||||
.dl-md-row { justify-content: center; gap: 6px; }
|
||||
}
|
||||
@container (max-width: 96px) {
|
||||
.dl-md .dl-pulse { display: none; }
|
||||
}
|
||||
|
||||
/* Density tuning — match the existing button heights */
|
||||
.density-compact .dl-md { height: 30px; padding: 0 9px; }
|
||||
.density-compact .dl-md-row { font-size: 11.5px; }
|
||||
.density-compact .dl-md .dl-speed { font-size: 10.5px; }
|
||||
.density-large .dl-md { height: 34px; padding: 0 12px; }
|
||||
.density-large .dl-md-row { font-size: 13px; }
|
||||
.density-large .dl-md .dl-speed { font-size: 11.5px; }
|
||||
|
||||
/* ── lg (detail overlay) ── */
|
||||
.dl-lg {
|
||||
height: 56px;
|
||||
padding: 0;
|
||||
border-radius: 9px;
|
||||
flex: 1 1 auto;
|
||||
min-width: 260px;
|
||||
}
|
||||
.dl-lg-grid {
|
||||
position: relative; z-index: 1;
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) auto auto;
|
||||
grid-template-rows: auto auto;
|
||||
grid-template-areas:
|
||||
"primary pct cancel"
|
||||
"secondary pct cancel";
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
padding: 0 14px 0 16px;
|
||||
column-gap: 14px;
|
||||
row-gap: 2px;
|
||||
}
|
||||
.dl-lg-primary {
|
||||
grid-area: primary;
|
||||
display: flex; align-items: center; gap: 8px;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.02em;
|
||||
text-transform: uppercase;
|
||||
color: color-mix(in srgb, var(--accent) 80%, white);
|
||||
min-width: 0;
|
||||
}
|
||||
.dl-lg-primary .dl-label { white-space: nowrap; }
|
||||
.dl-lg-secondary {
|
||||
grid-area: secondary;
|
||||
display: flex; align-items: center; gap: 7px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
color: var(--t-2);
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
.dl-lg-secondary .dl-bytes {
|
||||
color: var(--t-1);
|
||||
font-weight: 600;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.dl-lg-secondary .dl-bytes .dl-of { color: var(--t-2); font-weight: 500; }
|
||||
.dl-lg-secondary .dl-speed { color: var(--t-1); font-weight: 600; white-space: nowrap; }
|
||||
.dl-lg-secondary .dl-eta { white-space: nowrap; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
|
||||
.dl-sep { opacity: 0.45; }
|
||||
|
||||
/* Gracefully drop the ETA when the modal is narrow */
|
||||
@container (max-width: 380px) {
|
||||
.dl-lg-secondary .dl-eta,
|
||||
.dl-lg-secondary .dl-sep-eta { display: none; }
|
||||
}
|
||||
|
||||
.dl-lg-pct {
|
||||
grid-area: pct;
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.01em;
|
||||
color: var(--t-1);
|
||||
font-variant-numeric: tabular-nums;
|
||||
line-height: 1;
|
||||
}
|
||||
.dl-lg-pct .dl-pct-sym {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
opacity: 0.55;
|
||||
margin-left: 1px;
|
||||
}
|
||||
.dl-cancel {
|
||||
grid-area: cancel;
|
||||
display: inline-flex; align-items: center; justify-content: center;
|
||||
width: 28px; height: 28px;
|
||||
border-radius: 6px;
|
||||
border: 1px solid var(--bd-2);
|
||||
background: rgba(255,255,255,0.04);
|
||||
color: var(--t-2);
|
||||
cursor: pointer;
|
||||
transition: background .15s, border-color .15s, color .15s;
|
||||
}
|
||||
.dl-cancel:hover {
|
||||
background: rgba(239,68,68,0.12);
|
||||
border-color: rgba(239,68,68,0.40);
|
||||
color: #fca5a5;
|
||||
}
|
||||
|
||||
/* Ghost / secondary */
|
||||
.ghost-btn {
|
||||
display: inline-flex; align-items: center; gap: 7px;
|
||||
|
||||
Reference in New Issue
Block a user