ToBePlayed-Frontend/docs/screenshots/README.md

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.