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.
This commit is contained in:
+111
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user