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.
77 lines
2.0 KiB
JavaScript
77 lines
2.0 KiB
JavaScript
(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");
|
|
if (!el) return;
|
|
|
|
var prompts = CO_ControllerPrompts.getPrompts(state);
|
|
el.innerHTML = prompts.map(function (p) {
|
|
return (
|
|
'<div class="co-prompt">' +
|
|
renderIcon(p.key) +
|
|
"<span>" + p.label + "</span>" +
|
|
"</div>"
|
|
);
|
|
}).join("");
|
|
|
|
if (window.CO_ControllerGlyphs && CO_ControllerGlyphs.hydrate) {
|
|
CO_ControllerGlyphs.hydrate(el);
|
|
}
|
|
},
|
|
|
|
getPrompts: function (state) {
|
|
if (state.joinOverlay) {
|
|
if (state.joinOverlay.error) {
|
|
return [
|
|
{ key: "B", label: "Dismiss" },
|
|
{ key: "A", label: "Dismiss" }
|
|
];
|
|
}
|
|
return [];
|
|
}
|
|
|
|
if (state.activeTab === "direct-connect") {
|
|
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 TAB_SWITCH_PROMPTS.concat([
|
|
{ key: "A", label: isReset ? "Reset" : "Change" },
|
|
{ key: "B", label: "Back" }
|
|
]);
|
|
}
|
|
|
|
if (state.focusZone === "tabs") {
|
|
return TAB_SWITCH_PROMPTS.concat([
|
|
{ key: "B", label: "Back" }
|
|
]);
|
|
}
|
|
|
|
return TAB_SWITCH_PROMPTS.concat([
|
|
{ key: "A", label: "Join" },
|
|
{ key: "X", label: "Refresh" },
|
|
{ key: "Y", label: "Favorite" },
|
|
{ key: "B", label: "Back" }
|
|
]);
|
|
}
|
|
};
|
|
})();
|