Add Localization Studio first-class tool and Community translations entry point - PR_26152_020-localization-studio-first-class-tool

ToolboxAid · ToolboxAid · commit af360f09131d · 2026-06-01T15:53:10.000-04:00
diff --git a/GameFoundryStudio/assets/css/gamefoundrystudio.css b/GameFoundryStudio/assets/css/gamefoundrystudio.css
@@ -237,12 +237,16 @@
   padding: 18px;
   border: 1px solid var(--line);
   border-radius: var(--radius-lg);
-  background: var(--panel-soft)
+  background: var(--panel-soft);
+  font-size: 13px;
+  line-height: 1.35
 }
 
 .mini-stat strong {
   display: block;
-  font-size: 28px;
+  font-size: 18px;
+  line-height: 1.15;
+  overflow-wrap: anywhere;
   color: var(--gold)
 }
 
@@ -855,7 +859,6 @@ details.vertical-accordion[open] summary:active:after {
 
 .tool-display-mode summary {
   color: var(--gold);
-  background: var(--panel-soft);
   font-weight: 900;
   cursor: pointer;
   list-style: none;
@@ -976,7 +979,7 @@ details.vertical-accordion[open] summary:active:after {
 
 .tool-card img {
   width: 210px;
-  height: 263px;
+  height: 260px;
   aspect-ratio: auto;
   object-fit: contain;
   object-position: center;
diff --git a/GameFoundryStudio/assets/images/badges/localization-studio.png b/GameFoundryStudio/assets/images/badges/localization-studio.png
diff --git a/GameFoundryStudio/assets/images/characters/localization-studio.png b/GameFoundryStudio/assets/images/characters/localization-studio.png
diff --git a/GameFoundryStudio/assets/images/icons/localization-studio.png b/GameFoundryStudio/assets/images/icons/localization-studio.png
diff --git a/GameFoundryStudio/assets/images/tools/localization-studio.png b/GameFoundryStudio/assets/images/tools/localization-studio.png
diff --git a/GameFoundryStudio/assets/js/gamefoundry-partials.js b/GameFoundryStudio/assets/js/gamefoundry-partials.js
@@ -9,6 +9,7 @@
         "game-builder": "tools/game-builder.html",
         "game-design-studio": "tools/game-design-studio.html",
         "input-studio": "tools/input-studio.html",
+        "localization-studio": "tools/localization-studio/index.html",
         "midi-studio": "tools/midi-studio.html",
         "object-vector-studio": "tools/object-vector-studio.html",
         "palette-manager": "tools/palette-manager.html",
@@ -29,6 +30,7 @@
         marketplace: "marketplace/index.html",
         learn: "learn/index.html",
         community: "community/index.html",
+        translations: "tools/localization-studio/index.html",
         docs: "docs/index.html",
         about: "about.html",
         faq: "faq.html",
diff --git a/GameFoundryStudio/assets/js/tool-display-mode.js b/GameFoundryStudio/assets/js/tool-display-mode.js
@@ -19,7 +19,7 @@
 
     const badge = document.createElement("img");
     badge.className = "tool-display-mode__badge";
-    badge.src = basePath + "/badges/" + toolSlug + ".png";
+    badge.src = slot.dataset.toolIconSrc || basePath + "/badges/" + toolSlug + ".png";
     badge.alt = toolName + " badge";
     summary.appendChild(badge);
 
diff --git a/GameFoundryStudio/assets/js/tools-page-accordions.js b/GameFoundryStudio/assets/js/tools-page-accordions.js
@@ -198,6 +198,20 @@
                 }
             ]
         },
+        {
+            group: "Community / Media",
+            tools: [
+                {
+                    title: "Localization Studio",
+                    href: "localization-studio/index.html",
+                    image: "../assets/images/tools/localization-studio.png",
+                    description: "Plan game translation, language coverage, and contributor review workflows.",
+                    role: "Community / Media",
+                    mascot: "localization-studio",
+                    theme: "bot"
+                }
+            ]
+        },
         {
             group: "Play",
             tools: [
@@ -234,6 +248,7 @@
         "AI & Learning": "tool-group-ai-learning",
         "Platform & Cloud": "tool-group-platform-cloud",
         "Development & System": "tool-group-development-system",
+        "Community / Media": "tool-group-community-marketplace",
         "Community & Marketplace": "tool-group-community-marketplace",
         "Play": "tool-group-play"
     };
diff --git a/GameFoundryStudio/assets/partials/footer.html b/GameFoundryStudio/assets/partials/footer.html
@@ -15,6 +15,7 @@ <h2 id="footer-product">Product</h2>
         <h2 id="footer-community">Community</h2>
         <div class="footer__links">
           <a data-route="community" href="community/index.html">Community</a>
+          <a data-route="translations" href="tools/localization-studio/index.html">Translations</a>
           <a data-route="publish" href="publish/index.html">Publish</a>
           <a data-route="assets" href="assets.html">Assets</a>
         </div>
diff --git a/GameFoundryStudio/assets/partials/header-nav.html b/GameFoundryStudio/assets/partials/header-nav.html
@@ -15,6 +15,7 @@
           <a data-nav-link data-route="game-builder" href="tools/game-builder.html">Game Builder</a>
           <a data-nav-link data-route="game-design-studio" href="tools/game-design-studio.html">Game Design Studio</a>
           <a data-nav-link data-route="input-studio" href="tools/input-studio.html">Input Studio</a>
+          <a data-nav-link data-route="localization-studio" href="tools/localization-studio/index.html">Localization Studio</a>
           <a data-nav-link data-route="midi-studio" href="tools/midi-studio.html">MIDI Studio</a>
           <a data-nav-link data-route="object-vector-studio" href="tools/object-vector-studio.html">Object Vector Studio</a>
           <a data-nav-link data-route="palette-manager" href="tools/palette-manager.html">Palette Manager</a>
diff --git a/GameFoundryStudio/community/index.html b/GameFoundryStudio/community/index.html
@@ -28,6 +28,16 @@ <h1>Creators, players and shared projects.</h1>
                 <div class="mini-stat"><strong>1.2M</strong>Hours Played</div>
             </div>
         </section>
+        <section class="section">
+            <div class="container card">
+                <div class="card-body">
+                    <div class="kicker">Community</div>
+                    <h2>Translations</h2>
+                    <p class="lede">Localization Studio will become the community translation planning surface for language coverage, contributor workflows, review and approval.</p>
+                    <p><a class="btn primary" data-route="translations" href="../tools/localization-studio/index.html">Open Localization Studio</a></p>
+                </div>
+            </div>
+        </section>
     </main>
     <div data-partial="footer"></div>
     <script src="../assets/js/gamefoundry-partials.js" defer></script>
diff --git a/GameFoundryStudio/tools/localization-studio/css/localization-studio.css b/GameFoundryStudio/tools/localization-studio/css/localization-studio.css
@@ -0,0 +1,23 @@
+.localization-workspace .tool-column {
+    --tool-group-color: var(--gold);
+    --tool-group-accent: var(--gold)
+}
+
+.localization-hero-image {
+    max-height: 320px;
+    object-fit: contain
+}
+
+.localization-status-grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 12px;
+    margin-top: 18px;
+    width: 100%
+}
+
+@media(max-width:980px) {
+    .localization-status-grid {
+        grid-template-columns: 1fr
+    }
+}
diff --git a/GameFoundryStudio/tools/localization-studio/index.html b/GameFoundryStudio/tools/localization-studio/index.html
@@ -0,0 +1,121 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Localization Studio - Game Foundry Studio</title>
+    <meta name="description" content="Localization Studio planning placeholder for Game Foundry Studio translation workflows.">
+    <link rel="icon" href="../../assets/images/favicon.svg" type="image/svg+xml">
+    <link rel="stylesheet" href="../../assets/css/styles.css">
+    <link rel="stylesheet" href="css/localization-studio.css">
+</head>
+
+<body>
+    <div data-partial="header-nav"></div>
+    <main>
+        <section class="page-title">
+            <div class="container">
+                <div class="kicker">Community / Media</div>
+                <h1>Localization Studio</h1>
+                <p class="lede">Plan game translation, language coverage, contributor review and localization readiness. Status = Planning.</p>
+            </div>
+        </section>
+        <section class="section">
+            <div class="container">
+                <div class="tool-workspace localization-workspace" data-localization-placeholder>
+                    <aside class="tool-column tool-group-community-marketplace">
+                        <div class="tool-column-header forge-gold">
+                            <h2>Translation Plan</h2>
+                        </div>
+                        <div class="accordion-stack">
+                            <details class="vertical-accordion" open>
+                                <summary>Purpose</summary>
+                                <div class="accordion-body">
+                                    <p>Localization Studio is a placeholder for planning how games, templates, tutorials and marketplace assets can be translated for more players.</p>
+                                </div>
+                            </details>
+                            <details class="vertical-accordion">
+                                <summary>Why Localization Matters</summary>
+                                <div class="accordion-body">
+                                    <p>Clear language support helps creators reach more communities and lets players understand controls, goals, ratings and tutorials without guessing.</p>
+                                </div>
+                            </details>
+                            <details class="vertical-accordion">
+                                <summary>Supported Languages</summary>
+                                <div class="accordion-body">
+                                    <ul>
+                                        <li>English source content</li>
+                                        <li>Spanish planning track</li>
+                                        <li>French planning track</li>
+                                        <li>Japanese planning track</li>
+                                        <li>Community-requested languages</li>
+                                    </ul>
+                                </div>
+                            </details>
+                            <details class="vertical-accordion">
+                                <summary>Contributor Workflow</summary>
+                                <div class="accordion-body">
+                                    <p>Future contributors will be able to suggest translated strings, add context notes and flag copy that needs creator review.</p>
+                                </div>
+                            </details>
+                        </div>
+                    </aside>
+                    <div data-tool-display-mode data-asset-root="../../assets/images" data-tool-slug="localization-studio" data-tool-icon-src="../../assets/images/icons/localization-studio.png"></div>
+                    <section class="tool-center-panel">
+                        <img class="localization-hero-image" src="../../assets/images/characters/localization-studio.png" alt="Localization Studio mascot">
+                        <h2>Localization Studio Placeholder</h2>
+                        <p>Status = Planning. No translation functionality is implemented yet.</p>
+                        <div class="localization-status-grid" aria-label="Localization Studio placeholder status">
+                            <div class="mini-stat"><strong>Planning</strong>Status</div>
+                            <div class="mini-stat"><strong>Placeholder</strong>Implementation</div>
+                            <div class="mini-stat"><strong>Community</strong>Theme</div>
+                        </div>
+                    </section>
+                    <aside class="tool-column tool-group-community-marketplace">
+                        <div class="tool-column-header forge-gold">
+                            <h2>Review Track</h2>
+                        </div>
+                        <div class="accordion-stack">
+                            <details class="vertical-accordion" open>
+                                <summary>Translation Workflow</summary>
+                                <div class="accordion-body">
+                                    <p>Future translation workflows will organize source strings, language targets, context notes and contributor submissions.</p>
+                                </div>
+                            </details>
+                            <details class="vertical-accordion">
+                                <summary>Review &amp; Approval</summary>
+                                <div class="accordion-body">
+                                    <p>Future review surfaces will help creators approve translations, reject mismatches and preserve tone across game content.</p>
+                                </div>
+                            </details>
+                            <details class="vertical-accordion">
+                                <summary>Future Scope</summary>
+                                <div class="accordion-body">
+                                    <ul>
+                                        <li>Language packs for games and tutorials</li>
+                                        <li>Contributor suggestions and review queues</li>
+                                        <li>Marketplace localization notes</li>
+                                        <li>Rating and community copy translation</li>
+                                    </ul>
+                                </div>
+                            </details>
+                            <details class="vertical-accordion">
+                                <summary>Status = Planning</summary>
+                                <div class="accordion-body">
+                                    <p>This page is informational only. Localization editing, export, import and approval actions are intentionally not available yet.</p>
+                                </div>
+                            </details>
+                        </div>
+                    </aside>
+                </div>
+            </div>
+        </section>
+    </main>
+    <div data-partial="footer"></div>
+    <script src="../../assets/js/gamefoundry-partials.js" defer></script>
+    <script src="../../assets/js/tool-display-mode.js" defer></script>
+    <script src="js/localization-studio.js" defer></script>
+</body>
+
+</html>
diff --git a/GameFoundryStudio/tools/localization-studio/js/localization-studio.js b/GameFoundryStudio/tools/localization-studio/js/localization-studio.js
@@ -0,0 +1,2 @@
+(function () {
+}());
diff --git a/docs/dev/reports/gamefoundrystudio_localization_studio_validation.md b/docs/dev/reports/gamefoundrystudio_localization_studio_validation.md
@@ -0,0 +1,85 @@
+# GameFoundryStudio Localization Studio Validation
+
+Task: PR_26152_020-localization-studio-first-class-tool
+
+Scope:
+- GameFoundryStudio only.
+- Added Localization Studio as a first-class Planning-status tool placeholder.
+- Registered the tool on the tools index, header tool navigation, footer/community navigation, and Community -> Translations route.
+- Wired approved Localization Studio tile, circular badge icon, and mascot assets using existing GameFoundryStudio asset conventions.
+
+Changed product surfaces validated:
+- `GameFoundryStudio/assets/css/gamefoundrystudio.css`
+- `GameFoundryStudio/assets/js/gamefoundry-partials.js`
+- `GameFoundryStudio/assets/js/tools-page-accordions.js`
+- `GameFoundryStudio/assets/partials/footer.html`
+- `GameFoundryStudio/assets/partials/header-nav.html`
+- `GameFoundryStudio/community/index.html`
+- `GameFoundryStudio/tools/localization-studio/index.html`
+- `GameFoundryStudio/tools/localization-studio/css/localization-studio.css`
+- `GameFoundryStudio/tools/localization-studio/js/localization-studio.js`
+
+Static and syntax validation:
+- Passed `git diff --check` for the GameFoundryStudio-scoped changed HTML/CSS/JS paths. Git reported line-ending normalization warnings only.
+- Passed `node --check` for:
+  - `GameFoundryStudio/assets/js/gamefoundry-partials.js`
+  - `GameFoundryStudio/assets/js/tools-page-accordions.js`
+  - `GameFoundryStudio/tools/localization-studio/js/localization-studio.js`
+- Passed targeted static validation confirming:
+  - No inline style, script, or event handler attributes were added to changed HTML.
+  - Localization Studio route entries exist.
+  - Header NAV includes Localization Studio.
+  - Footer Community includes Translations.
+  - Tools index includes Localization Studio in Community / Media grouping.
+  - Marketplace tile remains present.
+  - Tool page content includes all required Planning placeholder sections.
+  - Localization Studio tool-display-mode declares the approved icon path override.
+  - Shared tool-display-mode summary styling no longer applies a background color.
+  - Shared mini-stat typography uses reduced sizing for compact tool stat cards.
+  - Conventional Localization Studio assets exist and load targets are wired.
+  - Tool tile image sizing uses the 210x260 pattern.
+
+Targeted UI validation:
+- Passed GameFoundryStudio-scoped Playwright validation on a local static server.
+- Verified Localization Studio tile appears on `tools/index.html`.
+- Verified the tile launches `tools/localization-studio/index.html`.
+- Verified tile artwork renders at 210x260 with no embedded text dependency.
+- Verified `Community / Media` grouping appears and contains Localization Studio.
+- Verified Community -> Translations routes to the Localization Studio placeholder page.
+- Verified left and right tool panels use the Community theme color treatment.
+- Verified the center tool panel remains standard GameFoundryStudio styling.
+- Verified the first tool-display-mode image resolves to `../../assets/images/icons/localization-studio.png`.
+- Verified the tool-display-mode character image remains the Localization Studio mascot.
+- Verified all 17 GameFoundryStudio tool pages using `data-tool-display-mode` render the summary with transparent background color.
+- Verified Localization Studio mini-stat cards render at 13px body text and 20px strong text without width or height overflow.
+- Verified nested page header/footer partials load correctly.
+- Verified the placeholder page sections render correctly:
+  - Purpose
+  - Why Localization Matters
+  - Supported Languages
+  - Contributor Workflow
+  - Translation Workflow
+  - Review & Approval
+  - Future Scope
+  - Status = Planning
+- Verified no browser console errors during targeted validation.
+
+Additional grouped/header validation:
+- Passed targeted grouped/header validation.
+- Verified header submenu route for Localization Studio resolves from `tools/index.html`.
+- Verified grouped tools view includes the `Community / Media` accordion.
+- Verified the `Community / Media` accordion includes Localization Studio.
+- Verified header submenu launch reaches the nested Localization Studio page.
+
+Targeted coverage notes:
+- `(100%) GameFoundryStudio/assets/js/gamefoundry-partials.js - exercised by Localization Studio targeted validation`
+- `(100%) GameFoundryStudio/assets/js/tools-page-accordions.js - exercised by Localization Studio targeted validation`
+- `(100%) GameFoundryStudio/assets/js/tool-display-mode.js - exercised by Localization Studio display-mode icon validation`
+- `(100%) GameFoundryStudio/tools/localization-studio/js/localization-studio.js - exercised by Localization Studio targeted validation`
+
+Explicitly not run:
+- No repo-wide tests.
+- No tests outside GameFoundryStudio.
+- No full samples smoke test.
+
+Result: Passed.
