andrew
102acd3340
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.
60 lines
1.6 KiB
JavaScript
60 lines
1.6 KiB
JavaScript
(function () {
|
|
"use strict";
|
|
|
|
function clampByte(value) {
|
|
return Math.max(0, Math.min(255, Math.round(value)));
|
|
}
|
|
|
|
function applyHudRgb(root, prefix, color) {
|
|
if (!color) {
|
|
return;
|
|
}
|
|
|
|
root.style.setProperty(prefix + "-r", String(clampByte(color.r)));
|
|
root.style.setProperty(prefix + "-g", String(clampByte(color.g)));
|
|
root.style.setProperty(prefix + "-b", String(clampByte(color.b)));
|
|
}
|
|
|
|
function applyCursorTint(root, color) {
|
|
if (!color) {
|
|
return;
|
|
}
|
|
|
|
var r = clampByte(color.r);
|
|
var g = clampByte(color.g);
|
|
var b = clampByte(color.b);
|
|
var svg =
|
|
'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32.3 31.24">' +
|
|
'<polygon fill="rgb(' + r + "," + g + "," + b + ')" stroke="#000" stroke-width="3.2" ' +
|
|
'stroke-miterlimit="10" points="17.4 30.41 31.46 15.9 1.2 1.14 17.4 30.41"/></svg>';
|
|
var url =
|
|
'url("data:image/svg+xml,' +
|
|
encodeURIComponent(svg) +
|
|
'") 1 1, default';
|
|
root.style.setProperty("--co-cursor", url);
|
|
}
|
|
|
|
window.applyCoTheme = function (theme) {
|
|
if (!theme) {
|
|
return;
|
|
}
|
|
|
|
var root = document.documentElement;
|
|
var hud = theme.hud || theme;
|
|
applyHudRgb(root, "--co", hud);
|
|
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) + "," +
|
|
clampByte(hud.g) + "," +
|
|
clampByte(hud.b) + ")"
|
|
);
|
|
};
|
|
})();
|