diff --git a/README.md b/README.md index 37d6868..3aa80d0 100644 --- a/README.md +++ b/README.md @@ -5,9 +5,9 @@ you finished. The UI is in German and English, with light and dark mode. ![Library](docs/screenshots/library-desktop-dark.png) -| Game detail | Public profile | Mobile | -|---|---|---| -| ![Game detail](docs/screenshots/detail-desktop-dark.png) | ![Public profile](docs/screenshots/profile-desktop-dark.png) | ![Mobile library](docs/screenshots/library-mobile-dark.png) | +| Dashboard | Game detail | Public profile | Mobile | +|---|---|---|---| +| ![Dashboard](docs/screenshots/dashboard-desktop-dark.png) | ![Game detail](docs/screenshots/detail-desktop-dark.png) | ![Public profile](docs/screenshots/profile-desktop-dark.png) | ![Mobile library](docs/screenshots/library-mobile-dark.png) | To Be Played is split into three repositories: @@ -365,7 +365,7 @@ other, then start them in this order (Core also starts without Auth and finds it 3. **Frontend**: in `ToBePlayed-Frontend`, `npm install`, then `npm run dev`, and open `http://localhost:5173` (`localhost`, not `127.0.0.1`, so the browser sends the login cookies to every local port). The development values must be `VITE_API_URL=http://localhost:8080` and `VITE_CORE_API_URL=http://localhost:8090`. -4. **Log in** with `dev@localhost` / `password123`. On the dashboard, start a Steam sync: the library fills with 8 +4. **Log in** with `dev@localhost` / `password123`. On the dashboard, start a Steam sync: the library fills with 30 games, achievements, time to beat, moods, a wishlist and one speedrun game from recorded answers. The dev user is `PLATFORM_ADMIN`, so user, auditor and admin pages can all be tried ("View as" in the menu diff --git a/docs/screenshots/README.md b/docs/screenshots/README.md new file mode 100644 index 0000000..02cb44a --- /dev/null +++ b/docs/screenshots/README.md @@ -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://: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. diff --git a/docs/screenshots/dashboard-desktop-dark.png b/docs/screenshots/dashboard-desktop-dark.png new file mode 100644 index 0000000..b8819e5 Binary files /dev/null and b/docs/screenshots/dashboard-desktop-dark.png differ diff --git a/docs/screenshots/detail-desktop-dark.png b/docs/screenshots/detail-desktop-dark.png index e94de47..1e0e22d 100644 Binary files a/docs/screenshots/detail-desktop-dark.png and b/docs/screenshots/detail-desktop-dark.png differ diff --git a/docs/screenshots/library-desktop-dark.png b/docs/screenshots/library-desktop-dark.png index 4d43c75..8478f9b 100644 Binary files a/docs/screenshots/library-desktop-dark.png and b/docs/screenshots/library-desktop-dark.png differ diff --git a/docs/screenshots/library-mobile-dark.png b/docs/screenshots/library-mobile-dark.png index 336163c..43873c0 100644 Binary files a/docs/screenshots/library-mobile-dark.png and b/docs/screenshots/library-mobile-dark.png differ diff --git a/docs/screenshots/profile-desktop-dark.png b/docs/screenshots/profile-desktop-dark.png index 1012c29..57f7eef 100644 Binary files a/docs/screenshots/profile-desktop-dark.png and b/docs/screenshots/profile-desktop-dark.png differ