Skip to content

Commit 44a654b

Browse files
ToolboxAidToolboxAid
committed
Improve Admin Infrastructure image zoom and storage path variable visibility - PR_26168_219-admin-infrastructure-image-storage-path
1 parent cf4c39f commit 44a654b

9 files changed

Lines changed: 512 additions & 259 deletions

‎.env.example‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,3 +26,4 @@ GAMEFOUNDRY_STORAGE_ACCESS_KEY_ID=
2626
GAMEFOUNDRY_STORAGE_SECRET_ACCESS_KEY=
2727
GAMEFOUNDRY_STORAGE_BUCKET=
2828
GAMEFOUNDRY_STORAGE_PROJECTS_PREFIX=
29+
GAMEFOUNDRY_ASSET_STORAGE_PATH=

‎admin/infrastructure.html‎

Lines changed: 19 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -56,23 +56,35 @@ <h2>Admin</h2>
5656
<h2 id="admin-infrastructure-title">Game Foundry Infrastructure</h2>
5757
</div>
5858
<figure class="content-stack">
59-
<img src="assets/GFS-Infrastructure v1-3.png" alt="Game Foundry Studio infrastructure diagram version 1-3">
59+
<button class="image-zoom-trigger" type="button" data-image-zoom-target="admin-infrastructure-image-zoom" aria-haspopup="dialog" aria-controls="admin-infrastructure-image-zoom" aria-label="Open Game Foundry infrastructure diagram zoom view">
60+
<img src="assets/GFS-Infrastructure v1-3.png" alt="Game Foundry Studio infrastructure diagram version 1-3">
61+
</button>
6062
<figcaption>GFS-Infrastructure v1-3.png</figcaption>
6163
</figure>
64+
<dialog class="image-zoom-dialog" id="admin-infrastructure-image-zoom" data-image-zoom-dialog aria-labelledby="admin-infrastructure-image-zoom-title">
65+
<div class="image-zoom-dialog__header">
66+
<h3 id="admin-infrastructure-image-zoom-title">Game Foundry Infrastructure</h3>
67+
<form method="dialog">
68+
<button class="btn btn--compact" type="submit" value="close">Close</button>
69+
</form>
70+
</div>
71+
<img src="assets/GFS-Infrastructure v1-3.png" alt="Zoomed Game Foundry Studio infrastructure diagram version 1-3">
72+
</dialog>
6273
<div class="table-wrapper">
6374
<table class="data-table" aria-label="Project storage path reference">
64-
<caption>Project Asset Storage Paths</caption>
75+
<caption>Project Asset Storage Paths use <code>GAMEFOUNDRY_ASSET_STORAGE_PATH</code></caption>
6576
<thead>
6677
<tr>
6778
<th scope="col">Lane</th>
6879
<th scope="col">Path</th>
80+
<th scope="col">.env variable</th>
6981
</tr>
7082
</thead>
7183
<tbody>
72-
<tr><td>DEV</td><td>/dev/projects/</td></tr>
73-
<tr><td>IST</td><td>/ist/projects/</td></tr>
74-
<tr><td>UAT</td><td>/uat/projects/</td></tr>
75-
<tr><td>PROD</td><td>/prod/projects/</td></tr>
84+
<tr><td>DEV</td><td>/dev/projects/</td><td><code>GAMEFOUNDRY_ASSET_STORAGE_PATH</code></td></tr>
85+
<tr><td>IST</td><td>/ist/projects/</td><td><code>GAMEFOUNDRY_ASSET_STORAGE_PATH</code></td></tr>
86+
<tr><td>UAT</td><td>/uat/projects/</td><td><code>GAMEFOUNDRY_ASSET_STORAGE_PATH</code></td></tr>
87+
<tr><td>PROD</td><td>/prod/projects/</td><td><code>GAMEFOUNDRY_ASSET_STORAGE_PATH</code></td></tr>
7688
</tbody>
7789
</table>
7890
</div>
@@ -107,6 +119,7 @@ <h2>Inspector</h2>
107119
<div data-partial="footer"></div>
108120
<script src="assets/theme-v2/js/gamefoundry-partials.js" defer></script>
109121
<script src="assets/theme-v2/js/tool-display-mode.js" defer></script>
122+
<script src="assets/theme-v2/js/image-zoom-dialog.js" defer></script>
110123
</body>
111124

112125
</html>

‎assets/theme-v2/css/dialogs.css‎

Lines changed: 62 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,62 @@
1-
/* Home migration does not require reusable dialog patterns yet. */
1+
.image-zoom-trigger {
2+
display: block;
3+
width: 100%;
4+
padding: var(--space-0);
5+
border: var(--border-standard);
6+
border-radius: var(--radius-md);
7+
background: var(--panel-overlay);
8+
color: inherit;
9+
cursor: pointer;
10+
overflow: hidden
11+
}
12+
13+
.tool-center-panel .image-zoom-trigger img {
14+
width: 100%;
15+
height: auto;
16+
object-fit: contain;
17+
display: block;
18+
margin: var(--space-0)
19+
}
20+
21+
.image-zoom-trigger:focus-visible {
22+
outline: var(--border-standard);
23+
outline-offset: var(--space-3)
24+
}
25+
26+
.image-zoom-dialog {
27+
width: calc(100% - var(--container-gutter));
28+
max-width: var(--tool-wide-container-max);
29+
max-height: calc(100vh - var(--container-gutter));
30+
padding: var(--space-18);
31+
border: var(--border-standard);
32+
border-radius: var(--radius-lg);
33+
background: var(--dialog-bg);
34+
color: var(--text);
35+
box-shadow: var(--shadow-lg)
36+
}
37+
38+
.image-zoom-dialog::backdrop {
39+
background: color-mix(in srgb, var(--foundry-space) 82%, transparent)
40+
}
41+
42+
.image-zoom-dialog__header {
43+
display: flex;
44+
flex-wrap: wrap;
45+
align-items: center;
46+
justify-content: space-between;
47+
gap: var(--space-12);
48+
margin-bottom: var(--space-16)
49+
}
50+
51+
.image-zoom-dialog__header h3 {
52+
margin: var(--space-0);
53+
color: var(--gold);
54+
font-size: var(--font-size-lg)
55+
}
56+
57+
.image-zoom-dialog img {
58+
width: 100%;
59+
max-height: calc(100vh - var(--container-gutter) - var(--space-78));
60+
object-fit: contain;
61+
border-radius: var(--radius-sm)
62+
}

‎assets/theme-v2/js/image-zoom-dialog.js‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
class ImageZoomDialog {
2+
constructor(dialog) {
3+
this.dialog = dialog;
4+
this.triggers = Array.from(document.querySelectorAll(`[data-image-zoom-target="${dialog.id}"]`));
5+
}
6+
7+
init() {
8+
if (!this.dialog.id || typeof this.dialog.showModal !== "function") {
9+
return;
10+
}
11+
this.triggers.forEach((trigger) => {
12+
trigger.addEventListener("click", () => this.open());
13+
});
14+
this.dialog.addEventListener("click", (event) => {
15+
if (event.target === this.dialog) {
16+
this.dialog.close();
17+
}
18+
});
19+
}
20+
21+
open() {
22+
if (!this.dialog.open) {
23+
this.dialog.showModal();
24+
}
25+
}
26+
}
27+
28+
document.addEventListener("DOMContentLoaded", () => {
29+
document.querySelectorAll("[data-image-zoom-dialog]").forEach((dialog) => {
30+
new ImageZoomDialog(dialog).init();
31+
});
32+
});

‎docs_build/dev/reports/PR_26168_219-admin-infrastructure-image-storage-path.md‎

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
# PR_26168_219-admin-infrastructure-image-storage-path
2+
3+
## Branch Validation
4+
5+
PASS: current branch is `main`.
6+
7+
- Expected branch: `main`
8+
- Current branch: `main`
9+
- Local branches found: `main`
10+
11+
## Scope Summary
12+
13+
PASS: PR219 is scoped to the Admin Infrastructure image/storage-path surface.
14+
15+
- Admin Infrastructure image now fills the available content width inside a Theme V2 zoom trigger.
16+
- The image opens a native dialog zoom view through external JavaScript only.
17+
- Project Asset Storage Paths copy now identifies `GAMEFOUNDRY_ASSET_STORAGE_PATH`.
18+
- `.env.example` includes the tracked non-secret variable contract.
19+
- Ignored local copy-source files `.env.dev`, `.env.ist`, `.env.uat`, and `.env.prd` were updated locally with the matching non-secret path values.
20+
21+
## Requirement Checklist
22+
23+
| Requirement | Status | Evidence |
24+
| --- | --- | --- |
25+
| Read `docs_build/dev/PROJECT_INSTRUCTIONS.md` first | PASS | Instructions were read before branch guard or edits. |
26+
| Hard stop unless current branch is `main` | PASS | `git branch --show-current` returned `main`; `git branch --list` showed `* main`. |
27+
| Update `admin/infrastructure.html` so the image uses 100% of available content space | PASS | Theme V2 `.image-zoom-trigger` and `.tool-center-panel .image-zoom-trigger img` set the image to full control/content width; Playwright measured image width within the trigger border box. |
28+
| Make the infrastructure image clickable and open a zoom view | PASS | External `assets/theme-v2/js/image-zoom-dialog.js` opens the native dialog; Playwright clicked the image trigger, verified the dialog image, and closed it. |
29+
| Keep displaying only `assets/GFS-Infrastructure v1-3.png` | PASS | Static and Playwright checks confirm v1-3 is used and v1-2 is absent. |
30+
| Update Project Asset Storage Paths copy to identify `GAMEFOUNDRY_ASSET_STORAGE_PATH` | PASS | Table caption and path rows include the variable name. |
31+
| Add `GAMEFOUNDRY_ASSET_STORAGE_PATH` to appropriate `.env` copy-source files if missing | PASS | `.env.example` is tracked with the contract; ignored local `.env.dev`, `.env.ist`, `.env.uat`, and `.env.prd` each contain exactly one non-secret variable entry. |
32+
| Do not expose secrets | PASS | No secret values were added to tracked files, reports, or artifacts; ignored `.env.<target>` files are not packaged. |
33+
| Use Theme V2 only | PASS | Styling is in `assets/theme-v2/css/dialogs.css`; page keeps Theme V2 stylesheet only. |
34+
| No inline styles, script blocks, style blocks, or inline event handlers | PASS | Static HTML check passed for `style=`, `<style>`, inline script blocks, and `on*=` handlers. |
35+
| Put JavaScript in external files only | PASS | Zoom behavior lives in `assets/theme-v2/js/image-zoom-dialog.js`; HTML only references external scripts. |
36+
| Do not add unrelated Admin, storage, or promotion behavior | PASS | Changes are limited to image zoom, storage path copy, env contract, and targeted test coverage. |
37+
| Do not run full samples smoke | PASS | Full samples smoke was skipped by instruction and because no sample surface changed. |
38+
39+
## Validation Lane Report
40+
41+
PASS: `node --check assets/theme-v2/js/image-zoom-dialog.js`
42+
43+
PASS: `node --check tests/playwright/tools/AdminPlatformToolsWireframes.spec.mjs`
44+
45+
PASS: Admin Infrastructure HTML static check
46+
47+
- Checked no `<style>` blocks.
48+
- Checked no inline `style=` attributes.
49+
- Checked no inline script blocks.
50+
- Checked no inline event handlers.
51+
- Checked `assets/GFS-Infrastructure v1-3.png` is present.
52+
- Checked `assets/GFS-Infrastructure v1-2.png` is absent.
53+
- Checked `GAMEFOUNDRY_ASSET_STORAGE_PATH` copy is present.
54+
- Checked external zoom script reference is present.
55+
56+
PASS: changed CSS brace check for `assets/theme-v2/css/dialogs.css`
57+
58+
PASS: env asset storage path static check
59+
60+
- `.env.example`: `GAMEFOUNDRY_ASSET_STORAGE_PATH=`
61+
- `.env.dev`: `GAMEFOUNDRY_ASSET_STORAGE_PATH=/dev/projects/`
62+
- `.env.ist`: `GAMEFOUNDRY_ASSET_STORAGE_PATH=/ist/projects/`
63+
- `.env.uat`: `GAMEFOUNDRY_ASSET_STORAGE_PATH=/uat/projects/`
64+
- `.env.prd`: `GAMEFOUNDRY_ASSET_STORAGE_PATH=/prod/projects/`
65+
66+
PASS: `npx playwright test tests/playwright/tools/AdminPlatformToolsWireframes.spec.mjs -g "Infrastructure Admin wireframe preserves template structure"`
67+
68+
- Result: 1 passed.
69+
- Behavior validated: Theme V2 Admin Infrastructure structure, v1-3-only image usage, storage path copy, full-width image trigger, zoom dialog open/close, no inline style/script/event handlers, and no page failures.
70+
71+
PASS: Playwright V8 coverage report produced at `docs_build/dev/reports/playwright_v8_coverage_report.txt`.
72+
73+
- `(100%) assets/theme-v2/js/image-zoom-dialog.js` covered by browser V8 coverage.
74+
75+
## Manual Validation Notes
76+
77+
PASS: Static inspection confirmed Admin Infrastructure still references only `assets/GFS-Infrastructure v1-3.png` and not `assets/GFS-Infrastructure v1-2.png`.
78+
79+
PASS: The image is a keyboard-focusable button with `aria-haspopup="dialog"` and `aria-controls="admin-infrastructure-image-zoom"`.
80+
81+
PASS: The zoom view uses a native `<dialog>` with an external JS opener and a visible Close button.
82+
83+
PASS: The tracked env example and ignored local env copy-source files contain only the non-secret `GAMEFOUNDRY_ASSET_STORAGE_PATH` variable addition for this PR.
84+
85+
SKIP: Full samples smoke was not run because this PR only affects the Admin Infrastructure page, Theme V2 zoom styling/JS, and env copy-source documentation; sample JSON and sample runtime behavior were untouched.

‎docs_build/dev/reports/codex_changed_files.txt‎

Lines changed: 15 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,20 @@
11
# git status --short
2-
M docs_build/dev/reports/playwright_v8_coverage_report.txt
3-
M src/dev-runtime/server/local-api-router.mjs
4-
M tests/playwright/tools/InputMappingV2Tool.spec.mjs
5-
M toolbox/controls/controls.js
6-
?? docs_build/dev/reports/PR_26168_218-project-workspace-validation-cleanup.md
2+
M .env.example
3+
M admin/infrastructure.html
4+
M assets/theme-v2/css/dialogs.css
5+
M docs_build/dev/reports/playwright_v8_coverage_report.txt
6+
M tests/playwright/tools/AdminPlatformToolsWireframes.spec.mjs
7+
?? assets/theme-v2/js/image-zoom-dialog.js
8+
?? docs_build/dev/reports/PR_26168_219-admin-infrastructure-image-storage-path.md
79

810
# git ls-files --others --exclude-standard
9-
docs_build/dev/reports/PR_26168_218-project-workspace-validation-cleanup.md
11+
assets/theme-v2/js/image-zoom-dialog.js
12+
docs_build/dev/reports/PR_26168_219-admin-infrastructure-image-storage-path.md
1013

1114
# git diff --stat
12-
.../dev/reports/playwright_v8_coverage_report.txt | 76 ++++------------------
13-
src/dev-runtime/server/local-api-router.mjs | 2 +-
14-
tests/playwright/tools/InputMappingV2Tool.spec.mjs | 36 +---------
15-
toolbox/controls/controls.js | 13 +---
16-
4 files changed, 19 insertions(+), 108 deletions(-)
15+
.env.example | 1 +
16+
admin/infrastructure.html | 25 ++++++---
17+
assets/theme-v2/css/dialogs.css | 63 +++++++++++++++++++++-
18+
.../dev/reports/playwright_v8_coverage_report.txt | 18 +++----
19+
.../tools/AdminPlatformToolsWireframes.spec.mjs | 18 ++++++-
20+
5 files changed, 105 insertions(+), 20 deletions(-)

0 commit comments

Comments
 (0)