docs(readme): replace screenshots with neutral demo data

Old screenshots showed a real account. Retake them from the local
stack with 30 demo games and persona "Dev". Add a dashboard shot and
docs/screenshots/README.md.
Refs Lobo_Corp/ToBePlayed-Deployment#12
This commit is contained in:
lobo committed 2026-10-13 12:03:56 +02:00
1 parent ad6f5575d2
commit c599054059
7 files changed
+72 -4

No files matched your search

+68
View File
@@ -0,0 +1,68 @@
# README screenshots
The screenshots in the main README show a neutral demo library (30 games, persona "Dev"), never real user data.
They come from the local stack with the WireMock mocks of `ToBePlayed-Core/local/wiremock`.
## Start
1. Start the stack as in the main README, section "Local development without keys".
2. Open the app in a desktop browser, log in with `dev@localhost` / `password123`, pass the welcome page.
3. Settings: dark mode on, language English, public profile on.
4. Dashboard: "Sync now". Wait about one minute: the achievements load one Steam call per second.
5. Set three things by hand (the sync cannot):
- No Man's Sky: status Dropped.
- Slay the Spire: "Set to 100%".
- Celeste: rating 4 stars, note "Chapter 7 next."
6. Reload the dashboard and close the "games imported" banner.
## Capture
Set the viewport (browser DevTools device toolbar, or Playwright) to the size in the table. Take a viewport PNG, no
scaling, not full page.
| File | Viewport | Page and state |
|---|---|---|
| `library-desktop-dark.png` | 1280x1022 | `/library`, filter All, sort "Most played", 20 per page |
| `detail-desktop-dark.png` | 1280x1414 | `/library/504230` (Celeste) |
| `dashboard-desktop-dark.png` | 1280x1100 | `/dashboard`, banner closed, mouse away from the cards |
| `library-mobile-dark.png` | 390x1036 | `/library`, same state as desktop |
| `profile-desktop-dark.png` | 1280x1288 | log out, then `/u/Dev` |
## From the Claude box
The box is itself a container, so the stack differs from the main README. Traps first: the WireMock `-v` path is
resolved on the Docker host (the mock then loads 0 mappings), and the box reaches sibling containers only through
the shared network, not through `localhost`.
```
docker run -d --name tbp_auth_db_local -e POSTGRES_DB=tbp_auth -e POSTGRES_USER=tbp_user -e POSTGRES_PASSWORD=local_secret_password postgres:17-alpine
docker run -d --name tbp_core_db_local -e POSTGRES_DB=tbp_core -e POSTGRES_USER=tbp_user -e POSTGRES_PASSWORD=local_secret_password postgres:17-alpine
docker run -d --name tbp_core_mocks_local wiremock/wiremock:3.9.1
for c in tbp_auth_db_local tbp_core_db_local tbp_core_mocks_local; do docker network connect ai_default $c; done
docker cp /workspace/private/tbp/ToBePlayed-Core/local/wiremock/. tbp_core_mocks_local:/home/wiremock/
curl -X POST tbp_core_mocks_local:8080/__admin/mappings/reset
```
Repeat the `docker cp` and the reset after every mock change. Run the built jars (`target/`) and Vite:
- Auth: `java -jar target/auth-service-0.0.1-SNAPSHOT.jar --spring.profiles.active=local --spring.docker.compose.enabled=false`
plus `--spring.datasource.url=jdbc:postgresql://tbp_auth_db_local:5432/tbp_auth`, `--spring.datasource.username=tbp_user`
and `--spring.datasource.password=local_secret_password`.
- Core: the same with `tbp_core_db_local` and `tbp_core`, plus `--app.steam.base-url=$M/steam`,
`--app.igdb.base-url=$M/igdb`, `--app.igdb.token-base-url=$M/twitch`, `--app.psn.auth-base-url=$M/psn/auth`,
`--app.psn.api-base-url=$M/psn` and `--app.speedrun.base-url=$M/speedrun`. `M` is `http://<mock container IP>:8080`
(`docker inspect tbp_core_mocks_local`): Java rejects the underscore in the container name.
- Frontend: `VITE_API_URL=http://localhost:8080 VITE_CORE_API_URL=http://localhost:8090 npx vite --port 5173`.
When done, stop the three processes and `docker rm -f` the three containers.
## Rules
- Only the demo persona may appear: name "Dev", Steam ID `76561198000000001`, the default avatar.
- Keep the file names. Keep each file below about 500 KB.
- Look at every image before you commit it.
## Data
The 30 games, their achievements and the profile are in `ToBePlayed-Core/local/wiremock`.
`LocalMocksParseTest` checks that the files fit the Core types and that every achievement stub belongs to an owned game.
Binary file not shown.

After

Width:  |  Height:  |  Size: 433 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 185 KiB

After

Width:  |  Height:  |  Size: 289 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 158 KiB

After

Width:  |  Height:  |  Size: 200 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 99 KiB

After

Width:  |  Height:  |  Size: 113 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 330 KiB

After

Width:  |  Height:  |  Size: 458 KiB