mr.zeroandClaude Opus 5
cb8a28b156
The client had our store's config URL compiled into it, which meant a second store — or anybody else's site — needed a release of this app. It now asks `GET /api/stores` and installs what the site offers: one record and there is nothing to decide, several and the setup screen shows a picker. From a record the client works the rest out. `storeRepositoryUrl` gives the `config.json` to read, and that file stays the authority on how the store behaves; `catalogUrl` and `name` override its `store.base_url` and `store.name`, because the registry is what says which catalog a store is *for*. The store id — which names the store home and the folder games land in — comes from the repository name, so `ttg-desktop-store` becomes `ttg`. A repository with no `config.json` still installs: the engine merges whatever it is handed onto its own defaults, so the client writes a three-field config and the store behaves like the default one pointed at that catalog. That was worth having rather than an error, and it is tested. The registry address is now the single thing about a particular site left in the client, and `STORES_API` overrides it — which is how this was tested, against a local endpoint serving the same payload the site returns, with one store that has a config and one that has not. Both installed; the engine listed all ten titles with the synthesised config. `npm run uitest` now passes on either outcome — the grid when a store is present, the setup gate with a populated picker when there is none — and it reports both, so the gate cannot silently regress into an empty screen. Run with the registry unreachable it produces the retry gate, and fails, which is the honest verdict: a client that cannot reach the registry cannot set anything up. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
190 lines
5.2 KiB
CSS
190 lines
5.2 KiB
CSS
/* One dark theme, no assets: the box art is the only image the app loads. */
|
|
:root {
|
|
--bg: #11151c;
|
|
--panel: #182029;
|
|
--panel-2: #1e2732;
|
|
--line: #2a3440;
|
|
--ink: #e8eef5;
|
|
--ink-dim: #93a4b8;
|
|
--accent: #37b98a;
|
|
--accent-ink: #05130d;
|
|
--warn: #e0a44a;
|
|
--radius: 12px;
|
|
}
|
|
|
|
* { box-sizing: border-box; }
|
|
|
|
body {
|
|
margin: 0;
|
|
background: var(--bg);
|
|
color: var(--ink);
|
|
font: 14px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, sans-serif;
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100vh;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* --- top bar ------------------------------------------------------------ */
|
|
.bar {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 16px;
|
|
padding: 12px 18px;
|
|
background: var(--panel);
|
|
border-bottom: 1px solid var(--line);
|
|
flex: none;
|
|
}
|
|
.bar-title { display: flex; align-items: baseline; gap: 10px; font-weight: 700; }
|
|
.logo { color: var(--accent); font-size: 18px; }
|
|
.store-id {
|
|
font-weight: 500;
|
|
font-size: 12px;
|
|
color: var(--ink-dim);
|
|
border: 1px solid var(--line);
|
|
border-radius: 999px;
|
|
padding: 1px 8px;
|
|
}
|
|
.bar-actions { display: flex; align-items: center; gap: 8px; }
|
|
.progress { color: var(--ink-dim); font-size: 12px; font-variant-numeric: tabular-nums; }
|
|
|
|
/* --- controls ----------------------------------------------------------- */
|
|
.btn {
|
|
font: inherit;
|
|
font-weight: 600;
|
|
color: var(--ink);
|
|
background: var(--panel-2);
|
|
border: 1px solid var(--line);
|
|
border-radius: 8px;
|
|
padding: 7px 14px;
|
|
cursor: pointer;
|
|
transition: background .15s, border-color .15s, transform .05s;
|
|
}
|
|
.btn:hover:not(:disabled) { background: #26313e; border-color: #3a4757; }
|
|
.btn:active:not(:disabled) { transform: scale(.97); }
|
|
.btn:disabled { opacity: .45; cursor: default; }
|
|
.btn-primary { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
|
|
.btn-primary:hover:not(:disabled) { background: #45cd9b; }
|
|
.btn-ghost { background: transparent; color: var(--ink-dim); }
|
|
.btn-tiny { padding: 3px 9px; font-size: 12px; font-weight: 500; }
|
|
.select {
|
|
font: inherit;
|
|
color: var(--ink);
|
|
background: var(--panel-2);
|
|
border: 1px solid var(--line);
|
|
border-radius: 8px;
|
|
padding: 6px 8px;
|
|
}
|
|
.link { color: var(--accent); cursor: pointer; text-decoration: underline; }
|
|
|
|
/* --- gate (no python, or no store yet) ---------------------------------- */
|
|
.gate {
|
|
margin: auto;
|
|
max-width: 520px;
|
|
padding: 28px;
|
|
text-align: center;
|
|
}
|
|
.gate h1 { font-size: 20px; margin: 0 0 10px; }
|
|
.gate p { color: var(--ink-dim); white-space: pre-line; margin: 0 0 20px; word-break: break-all; }
|
|
.gate-actions { display: flex; gap: 14px; justify-content: center; align-items: center; flex-wrap: wrap; }
|
|
.gate-choice { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-dim); font-size: 13px; }
|
|
|
|
/* --- the grid ----------------------------------------------------------- */
|
|
.grid {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
|
|
gap: 14px;
|
|
padding: 18px;
|
|
align-content: start;
|
|
}
|
|
.empty { margin: auto; color: var(--ink-dim); }
|
|
|
|
.card {
|
|
background: var(--panel);
|
|
border: 1px solid var(--line);
|
|
border-radius: var(--radius);
|
|
overflow: hidden;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.card.is-installed { border-color: #2f5a49; }
|
|
|
|
.art {
|
|
aspect-ratio: 4 / 3;
|
|
background: #0d1117;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
overflow: hidden;
|
|
}
|
|
.art img { width: 100%; height: 100%; object-fit: cover; }
|
|
.art-glyph { font-size: 44px; font-weight: 700; color: #263341; }
|
|
|
|
.body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
|
|
.body h2 { font-size: 15px; margin: 0; }
|
|
.meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
|
|
.badge {
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
border-radius: 999px;
|
|
padding: 2px 8px;
|
|
border: 1px solid var(--line);
|
|
color: var(--ink-dim);
|
|
}
|
|
.badge-app { color: var(--accent); border-color: #2f5a49; }
|
|
.badge-web { color: var(--warn); border-color: #5a4a2f; }
|
|
.version { font-size: 12px; color: var(--ink-dim); margin-left: auto; }
|
|
.desc {
|
|
margin: 0;
|
|
font-size: 12.5px;
|
|
color: var(--ink-dim);
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 3;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
}
|
|
.actions { display: flex; gap: 8px; margin-top: auto; }
|
|
|
|
/* --- log ---------------------------------------------------------------- */
|
|
.log {
|
|
flex: none;
|
|
background: var(--panel);
|
|
border-top: 1px solid var(--line);
|
|
padding: 8px 18px 10px;
|
|
}
|
|
.log-toggle {
|
|
font: inherit;
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
color: var(--ink-dim);
|
|
background: none;
|
|
border: 0;
|
|
padding: 0 0 4px;
|
|
cursor: pointer;
|
|
}
|
|
.log-lines {
|
|
max-height: 150px;
|
|
overflow-y: auto;
|
|
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
|
|
font-size: 11.5px;
|
|
color: var(--ink-dim);
|
|
background: #0d1117;
|
|
border: 1px solid var(--line);
|
|
border-radius: 8px;
|
|
padding: 8px 10px;
|
|
margin-bottom: 6px;
|
|
}
|
|
.log-line { white-space: pre-wrap; word-break: break-all; }
|
|
.log-paths { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
|
|
.paths-line {
|
|
font-size: 11.5px;
|
|
color: var(--ink-dim);
|
|
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
|
|
word-break: break-all;
|
|
flex: 1;
|
|
min-width: 200px;
|
|
}
|