andrew
fb4e238fcc
Introduce runtime-driven UI theming for the server browser - Expose PushUITheme() in F4TServerBrowserBridge and implement ColorToJson + PushUIThemeInternal to serialize HUD colors and invoke a JS hook. - Call PushUITheme on UI initialization and when the browser is shown so the webview receives current HUD colors. - Add frontend handler for "uiTheme" in app.js and a new components/theme.js that implements window.applyCoTheme to set CSS vars and tint the cursor SVG. - Update styles.css to use RGB component CSS variables (--co-r/--co-g/--co-b and background equivalents) so colors can be overridden at runtime. - Update index.html to include the new theme script and tweak cursor SVG stroke width; cursor asset updated as well. This enables the plugin to synchronize the in-game HUD colors with the browser UI dynamically.
56 lines
1.5 KiB
JavaScript
56 lines
1.5 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);
|
|
|
|
console.log(
|
|
"[CO] Applied HUD theme rgb(" +
|
|
clampByte(hud.r) + "," +
|
|
clampByte(hud.g) + "," +
|
|
clampByte(hud.b) + ")"
|
|
);
|
|
};
|
|
})();
|