Add controller icon PNGs and tinting logic

Add per-platform controller PNGs and runtime tinting, hook them into prompts, and update deploy/stage scripts.

- Add many controller PNG assets under ui/Icons and copy them into browser/assets/icons on deploy/stage.
- New controller-glyphs.js: image-based glyph renderer that tints white pixels to the UI color via a canvas pixel pass, caches results, and supports platform selection.
- New controller-icons.js: adapter that forwards rendering to controller-glyphs.
- Update controller-prompts.js to render icon glyphs (and include LB/RB tab-switch prompts) and call hydrate after rendering.
- Call CO_ControllerGlyphs.onThemeApplied from theme.js so glyphs re-tint when theme changes.
- Include new scripts in index.html and add CSS rules for glyph image sizing in styles.css.
- Update docs/dev-log.md describing the change and testing/next steps.

This change replaces previous inline/SVG glyph handling with individual PNG icons and adds deploy-time copying so the repo keeps a single source for controller icons.

deploy-ui.bat

@@ -12,12 +12,20 @@ set "VIEWS_DIR=%DATA_DIR%\PrismaUI_F4\views"
 if not exist "%VIEWS_DIR%" mkdir "%VIEWS_DIR%"
 
 echo Copying PrismaUI views...
-xcopy /Y /E /I "%UI_SOURCE%\*" "%VIEWS_DIR%\"
+xcopy /Y /E /I "%UI_SOURCE%\*" "%VIEWS_DIR%\%"
 if errorlevel 1 (
     echo Failed to copy HTML views.
     exit /b 1
 )
 
+echo Copying controller icons...
+if not exist "%VIEWS_DIR%\CommonwealthOnline\browser\assets\icons" mkdir "%VIEWS_DIR%\CommonwealthOnline\browser\assets\icons"
+xcopy /Y /E /I "%SCRIPT_DIR%ui\Icons\*" "%VIEWS_DIR%\CommonwealthOnline\browser\assets\icons\"
+if errorlevel 1 (
+    echo Failed to copy controller icons.
+    exit /b 1
+)
+
 if not "%~2"=="" (
     set "PLUGIN_DLL=%~2"
     set "PLUGINS_DIR=%DATA_DIR%\F4SE\Plugins"

docs/dev-log.md

@@ -7,6 +7,117 @@ failed experiments, successful tests, and next steps.
 
 ---
 
+## 2026-06-18 - Individual controller icon PNGs from ui/Icons
+
+### Summary
+Switched footer controller prompts to the supplied individual PNG icons in `ui/Icons` (Xbox/PlayStation/Switch). Removed handcrafted inline SVG glyphs. Icons use multiply blend tinting so white pixels pick up `--co-green-soft` and black pixels stay black.
+
+### Files Changed
+- `ui/views/CommonwealthOnline/browser/components/controller-glyphs.js`
+- `ui/views/CommonwealthOnline/browser/styles.css`
+- `ui/views/CommonwealthOnline/browser/assets/icons/` (copied from `ui/Icons` on deploy)
+- `deploy-ui.bat`, `stage-mod.bat`
+- Removed `browser/assets/glyphs/icons/*.svg` and `xbox-glyphs.svg`
+
+### Details
+- Default platform is Xbox (`T_X_*` face buttons, `T_X_LB/RB` bumpers).
+- PlayStation and Switch mappings are wired; call `CO_ControllerGlyphs.setPlatform('Playstation'|'Switch')` when platform detection exists.
+- Deploy scripts copy `ui/Icons` into `browser/assets/icons/` so the repo keeps a single icon source.
+- Tint via canvas pixel pass: transparent pixels stay transparent, white pixels become `--co-green-soft`, black pixels stay black (no masks or blend modes).
+
+### Testing
+- Not run in-game; redeploy UI and verify footer prompts use the PNG glyphs with green-tinted white parts.
+
+### Known Issues
+- PC keyboard icons in `ui/Icons/PC/` are available but not mapped to prompts yet.
+
+### Next Steps
+- In-game mask check in Ultralight; add platform detection from plugin if needed.
+
+---
+
+## 2026-06-18 - Inline SVG controller glyphs (Ultralight fix)
+
+### Summary
+Fixed footer controller prompts rendering as solid green circles and plus signs in PrismaUI. Replaced CSS `mask-image` on the full spritesheet with inline per-glyph SVGs where dark fills stay fixed and white strokes/letters use `currentColor` for theme tinting. LB/RB bumper shapes are used for tab navigation (not D-pad).
+
+### Files Changed
+- `ui/views/CommonwealthOnline/browser/components/controller-glyphs.js`
+- `ui/views/CommonwealthOnline/browser/assets/glyphs/icons/*.svg`
+- `ui/views/CommonwealthOnline/browser/styles.css`
+
+### Details
+- Ultralight does not reliably mask external SVG spritesheets; inline SVG avoids that path.
+- Face buttons use white-variant paths from `ui/Icons/Xbox/Xbox-Glyph-Spritesheet.svg` (B at cx=58, X at cx=142, A at cx=100, Y at cx=16 on the white row).
+- Bumpers use LB/RB body paths at y≈337 with dark `#0F0E17` bodies and `currentColor` highlights.
+- `.co-prompt-key--glyph` sets `color: var(--co-green-soft)`; `--co-glyph-bg` keeps dark glyph areas untinted.
+
+### Testing
+- Not run in-game; redeploy UI (`deploy-ui.bat` or `stage-mod.bat`) and verify footer prompts show proper A/B/X/Y circles and LB/RB bumper icons with green-tinted white parts only.
+
+### Known Issues
+- None currently known pending in-game verification.
+
+### Next Steps
+- In-game check at 1080p; confirm PREV TAB / NEXT TAB show LB/RB bumpers, not D-pad or plus glyphs.
+
+---
+
+## 2026-06-18 - Spritesheet controller glyphs with UI tint
+
+### Summary
+Replaced hand-drawn prompt icons with white-variant glyphs from `ui/Icons/Xbox/Xbox-Glyph-Spritesheet.svg`, deployed as `browser/assets/glyphs/xbox-glyphs.svg`. Icons are CSS-masked and tinted with `--co-green-soft` so they follow the runtime UI theme.
+
+### Files Changed
+- `ui/views/CommonwealthOnline/browser/assets/glyphs/xbox-glyphs.svg` (copied from `ui/Icons/Xbox/`)
+- `ui/views/CommonwealthOnline/browser/components/controller-glyphs.js`
+- `ui/views/CommonwealthOnline/browser/components/controller-icons.js`
+- `ui/views/CommonwealthOnline/browser/styles.css`
+- `ui/views/CommonwealthOnline/browser/index.html`
+
+### Details
+- Face buttons (A/B/X/Y) and bumpers (LB/RB) use sprite positions on the 158×452 Xbox sheet.
+- Luminance masking shows the white glyph strokes filled with the UI green; dark sprite backgrounds are transparent.
+- Fallback text badges remain for unknown keys.
+
+### Testing
+- Not run in-game; open `index.html` in a browser or redeploy UI and verify footer prompts show tinted Xbox glyphs.
+
+### Known Issues
+- Xbox sheet only for now; PlayStation/Switch/PC sheets in `ui/Icons/` are available for future platform detection.
+
+### Next Steps
+- In-game check at 1080p; add platform-specific sheet selection if needed.
+
+---
+
+## 2026-06-18 - Larger controller prompt icons and bumper glyphs
+
+### Summary
+Enlarged the footer controller prompt icons on the multiplayer server browser and added dedicated left/right bumper SVG icons for tab switching. Bumper prompts now appear on every browser screen (not only when the left nav has focus), matching global LB/RB tab cycling.
+
+### Files Changed
+- `ui/views/CommonwealthOnline/browser/components/controller-icons.js`
+- `ui/views/CommonwealthOnline/browser/components/controller-prompts.js`
+- `ui/views/CommonwealthOnline/browser/styles.css`
+- `ui/views/CommonwealthOnline/browser/index.html`
+
+### Details
+- Face buttons (A/B/X/Y) increased from 18px to 28px circles with a thicker border.
+- LB/RB use inline SVG shoulder-bumper glyphs instead of plain text labels.
+- Tab-switch prompts (`Prev Tab` / `Next Tab`) are shown alongside context actions on server list, filters, direct connect, and nav focus.
+
+### Testing
+- Not run in-game; verify in browser or Fallout 4 with a controller that footer icons are larger and LB/RB bumpers render correctly on all tabs.
+
+### Known Issues
+- None currently known.
+
+### Next Steps
+- In-game controller check: LB/RB switch tabs from server list and filter rows; icons remain readable at 1080p/1440p.
+
+---
+
 ## 2026-06-18 - Fix PrismaUI Ultralight cursor in gamepad mode
 
 ### Summary

stage-mod.bat

@@ -74,6 +74,10 @@ if exist "%FRAMEWORK_DIR%\assets" (
 echo   PrismaUI_F4\views\
 xcopy /Y /E /I /Q "%SCRIPT_DIR%ui\views\*" "%VIEWS_DIR%\" >nul
 
+echo   PrismaUI controller icons
+if not exist "%VIEWS_DIR%\CommonwealthOnline\browser\assets\icons" mkdir "%VIEWS_DIR%\CommonwealthOnline\browser\assets\icons"
+xcopy /Y /E /I /Q "%SCRIPT_DIR%ui\Icons\*" "%VIEWS_DIR%\CommonwealthOnline\browser\assets\icons\" >nul
+
 if exist "%SCRIPT_DIR%ui\views\CommonwealthOnline\browser\assets\F4MouseCursor.png" (
     echo   PrismaUI_F4\misc\cursor.png
     copy /Y "%SCRIPT_DIR%ui\views\CommonwealthOnline\browser\assets\F4MouseCursor.png" "%MISC_DIR%\cursor.png" >nul

ui/views/CommonwealthOnline/browser/components/controller-glyphs.js

@@ -0,0 +1,223 @@
+(function () {
+  "use strict";
+
+  var KEY_ALIASES = {
+    LB: "lb",
+    RB: "rb",
+    A: "a",
+    B: "b",
+    X: "x",
+    Y: "y"
+  };
+
+  var GLYPH_SIZES = {
+    a: { w: 28, h: 28 },
+    b: { w: 28, h: 28 },
+    x: { w: 28, h: 28 },
+    y: { w: 28, h: 28 },
+    lb: { w: 34, h: 34 },
+    rb: { w: 34, h: 34 }
+  };
+
+  var PLATFORMS = {
+    Xbox: {
+      base: "./assets/icons/Xbox/",
+      files: {
+        a: "T_X_A_White_Alt.png",
+        b: "T_X_B_White_Alt.png",
+        x: "T_X_X_White_Alt.png",
+        y: "T_X_Y_White_Alt.png",
+        lb: "T_X_LB_Alt.png",
+        rb: "T_X_RB_Alt.png"
+      }
+    },
+    Playstation: {
+      base: "./assets/icons/Playstation/",
+      files: {
+        a: "T_P5_Cross_Alt.png",
+        b: "T_P5_Circle_Alt.png",
+        x: "T_P5_Square_Alt.png",
+        y: "T_P5_Triangle_Alt.png",
+        lb: "T_P5_L1_Alt.png",
+        rb: "T_P5_R1_Alt.png"
+      }
+    },
+    Switch: {
+      base: "./assets/icons/Switch/",
+      files: {
+        a: "T_S_A_Alt.png",
+        b: "T_S_B_Alt.png",
+        x: "T_S_X_Alt.png",
+        y: "T_S_Y_Alt.png",
+        lb: "T_S_LB_Alt.png",
+        rb: "T_S_RB_Alt.png"
+      }
+    }
+  };
+
+  var activePlatform = "Xbox";
+  var tintCache = {};
+  var WHITE_THRESHOLD = 200;
+  var BLACK_THRESHOLD = 40;
+
+  function glyphUrl(glyphId) {
+    var platform = PLATFORMS[activePlatform] || PLATFORMS.Xbox;
+    var file = platform.files[glyphId];
+    if (!file) {
+      return null;
+    }
+    return platform.base + file;
+  }
+
+  function getTintColor() {
+    var style = getComputedStyle(document.documentElement);
+    return {
+      r: parseInt(style.getPropertyValue("--co-r"), 10) || 18,
+      g: parseInt(style.getPropertyValue("--co-g"), 10) || 255,
+      b: parseInt(style.getPropertyValue("--co-b"), 10) || 21
+    };
+  }
+
+  function tintCacheKey(url, color) {
+    return url + "|" + color.r + "," + color.g + "," + color.b;
+  }
+
+  function classifyPixel(r, g, b) {
+    if (r >= WHITE_THRESHOLD && g >= WHITE_THRESHOLD && b >= WHITE_THRESHOLD) {
+      return "white";
+    }
+    if (r <= BLACK_THRESHOLD && g <= BLACK_THRESHOLD && b <= BLACK_THRESHOLD) {
+      return "black";
+    }
+    return "edge";
+  }
+
+  function tintImageData(imageData, color) {
+    var data = imageData.data;
+    var tr = color.r;
+    var tg = color.g;
+    var tb = color.b;
+
+    for (var i = 0; i < data.length; i += 4) {
+      var alpha = data[i + 3];
+      if (alpha < 4) {
+        data[i + 3] = 0;
+        continue;
+      }
+
+      var r = data[i];
+      var g = data[i + 1];
+      var b = data[i + 2];
+      var kind = classifyPixel(r, g, b);
+
+      if (kind === "white") {
+        data[i] = tr;
+        data[i + 1] = tg;
+        data[i + 2] = tb;
+      } else if (kind === "black") {
+        data[i] = 0;
+        data[i + 1] = 0;
+        data[i + 2] = 0;
+      } else {
+        var lum = (r + g + b) / (3 * 255);
+        data[i] = Math.round(lum * tr);
+        data[i + 1] = Math.round(lum * tg);
+        data[i + 2] = Math.round(lum * tb);
+      }
+    }
+
+    return imageData;
+  }
+
+  function tintImage(url, color, done) {
+    var key = tintCacheKey(url, color);
+    if (tintCache[key]) {
+      done(tintCache[key]);
+      return;
+    }
+
+    var img = new Image();
+    img.onload = function () {
+      var canvas = document.createElement("canvas");
+      canvas.width = img.naturalWidth;
+      canvas.height = img.naturalHeight;
+      var ctx = canvas.getContext("2d");
+      if (!ctx) {
+        done(null);
+        return;
+      }
+
+      ctx.drawImage(img, 0, 0);
+      var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+      ctx.putImageData(tintImageData(imageData, color), 0, 0);
+      var dataUrl = canvas.toDataURL("image/png");
+      tintCache[key] = dataUrl;
+      done(dataUrl);
+    };
+    img.onerror = function () {
+      done(null);
+    };
+    img.src = url;
+  }
+
+  function hydrateGlyphs(root) {
+    var scope = root || document;
+    var color = getTintColor();
+    var imgs = scope.querySelectorAll(".co-glyph-img[data-glyph-src]");
+
+    for (var i = 0; i < imgs.length; i++) {
+      (function (img) {
+        var src = img.getAttribute("data-glyph-src");
+        if (!src) {
+          return;
+        }
+        tintImage(src, color, function (dataUrl) {
+          if (dataUrl) {
+            img.src = dataUrl;
+          }
+        });
+      })(imgs[i]);
+    }
+  }
+
+  window.CO_ControllerGlyphs = {
+    setPlatform: function (platformName) {
+      if (PLATFORMS[platformName]) {
+        activePlatform = platformName;
+        tintCache = {};
+      }
+    },
+
+    getPlatform: function () {
+      return activePlatform;
+    },
+
+    hydrate: hydrateGlyphs,
+
+    onThemeApplied: function () {
+      tintCache = {};
+      hydrateGlyphs(document);
+    },
+
+    render: function (key) {
+      var glyphId = KEY_ALIASES[String(key || "").toUpperCase()];
+      if (!glyphId) {
+        return '<span class="co-prompt-key co-prompt-key--fallback">' + key + "</span>";
+      }
+
+      var size = GLYPH_SIZES[glyphId] || GLYPH_SIZES.a;
+      var url = glyphUrl(glyphId);
+      if (!url) {
+        return '<span class="co-prompt-key co-prompt-key--fallback">' + key + "</span>";
+      }
+
+      return (
+        '<span class="co-prompt-key co-prompt-key--glyph co-prompt-key--' + glyphId + '"' +
+        ' style="width:' + size.w + "px;height:" + size.h + 'px"' +
+        ' aria-hidden="true">' +
+        '<img class="co-glyph-img" data-glyph-src="' + url + '" src="' + url + '" alt="" draggable="false" />' +
+        "</span>"
+      );
+    }
+  };
+})();

ui/views/CommonwealthOnline/browser/components/controller-icons.js

@@ -0,0 +1,12 @@
+(function () {
+  "use strict";
+
+  window.CO_ControllerIcons = {
+    render: function (key) {
+      if (window.CO_ControllerGlyphs && CO_ControllerGlyphs.render) {
+        return CO_ControllerGlyphs.render(key);
+      }
+      return '<span class="co-prompt-key co-prompt-key--fallback">' + key + "</span>";
+    }
+  };
+})();

ui/views/CommonwealthOnline/browser/components/controller-prompts.js

@@ -1,6 +1,18 @@
 (function () {
   "use strict";
 
+  var TAB_SWITCH_PROMPTS = [
+    { key: "LB", label: "Prev Tab" },
+    { key: "RB", label: "Next Tab" }
+  ];
+
+  function renderIcon(key) {
+    if (window.CO_ControllerIcons && CO_ControllerIcons.render) {
+      return CO_ControllerIcons.render(key);
+    }
+    return '<span class="co-prompt-key">' + key + "</span>";
+  }
+
   window.CO_ControllerPrompts = {
     render: function (root, state) {
       var el = root.querySelector(".co-prompts");
@@ -10,11 +22,15 @@
       el.innerHTML = prompts.map(function (p) {
         return (
           '<div class="co-prompt">' +
-          '<span class="co-prompt-key">' + p.key + "</span>" +
+          renderIcon(p.key) +
           "<span>" + p.label + "</span>" +
           "</div>"
         );
       }).join("");
+
+      if (window.CO_ControllerGlyphs && CO_ControllerGlyphs.hydrate) {
+        CO_ControllerGlyphs.hydrate(el);
+      }
     },
 
     getPrompts: function (state) {
@@ -29,34 +45,32 @@
       }
 
       if (state.activeTab === "direct-connect") {
-        return [
+        return TAB_SWITCH_PROMPTS.concat([
           { key: "A", label: "Connect" },
           { key: "B", label: "Back" }
-        ];
+        ]);
       }
 
       if (state.focusZone === "filters") {
         var isReset = state.selectedFilterIndex === CO_Filters.FILTER_ROWS.length;
-        return [
+        return TAB_SWITCH_PROMPTS.concat([
           { key: "A", label: isReset ? "Reset" : "Change" },
           { key: "B", label: "Back" }
-        ];
+        ]);
       }
 
       if (state.focusZone === "tabs") {
-        return [
+        return TAB_SWITCH_PROMPTS.concat([
-          { key: "LB", label: "Prev Tab" },
-          { key: "RB", label: "Next Tab" },
           { key: "B", label: "Back" }
-        ];
+        ]);
       }
 
-      return [
+      return TAB_SWITCH_PROMPTS.concat([
         { key: "A", label: "Join" },
         { key: "X", label: "Refresh" },
         { key: "Y", label: "Favorite" },
         { key: "B", label: "Back" }
-      ];
+      ]);
     }
   };
 })();

ui/views/CommonwealthOnline/browser/components/theme.js

@@ -45,6 +45,10 @@
     applyHudRgb(root, "--co-bg", theme.hudBackground);
     applyCursorTint(root, hud);
 
+    if (window.CO_ControllerGlyphs && CO_ControllerGlyphs.onThemeApplied) {
+      CO_ControllerGlyphs.onThemeApplied();
+    }
+
     console.log(
       "[CO] Applied HUD theme rgb(" +
         clampByte(hud.r) + "," +

ui/views/CommonwealthOnline/browser/index.html

@@ -85,6 +85,8 @@
   <script src="./components/filters.js"></script>
   <script src="./components/server-list.js"></script>
   <script src="./components/server-details.js"></script>
+  <script src="./components/controller-glyphs.js"></script>
+  <script src="./components/controller-icons.js"></script>
   <script src="./components/controller-prompts.js"></script>
   <script src="./components/direct-connect.js"></script>
   <script src="./components/hover.js"></script>

ui/views/CommonwealthOnline/browser/styles.css

@@ -626,6 +626,23 @@ body {
   padding: 0 3px;
 }
 
+.co-prompt-key--glyph {
+  position: relative;
+  display: inline-block;
+  min-width: 0;
+  border: none;
+  border-radius: 0;
+  padding: 0;
+  flex-shrink: 0;
+  vertical-align: middle;
+}
+
+.co-prompt-key--glyph .co-glyph-img {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+
 .co-direct-connect {
   padding: 16px 20px;
   max-width: 480px;