gptbot/0ad
1
0
Fork 0
forked from mirrors/0ad
Code Pull Requests Activity

Make the colormixer a module

Browse Source 
Modules don't expose global symbols. Because of that not all functions
have to be cramed in to one class. The functions can now be split in a
more readable way.

Ref: #8081
This commit is contained in:
phosit
2025-07-02 18:25:40 +02:00
committed by Phosit
parent 46d44bbc14
commit 6c481d4811
2 changed files with 71 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files
binaries/data/mods/mod/gui/colormixer/colormixer.js
+70 -77
View File
@@ -1,85 +1,78 @@
/**
* @class ColorMixer
* This class allows to mix color using sliders one for each of three channels in range of 0 to 255 with step of 1, returning sanitized color when closing
* This page allows to mix color using sliders one for each of three channels in range of 0 to 255 with
* step of 1, returning sanitized color when closing
*/
class ColorMixer
const labels = [translate("Red"), translate("Green"), translate("Blue")];
const captions = [translate("Cancel"), translate("Save")];
function resizeChanel(i)
{
constructor()
{
this.panel = Engine.GetGUIObjectByName("main");
this.colorDisplay = Engine.GetGUIObjectByName("colorDisplay");
const object0 = Engine.GetGUIObjectByName("color[0]");
const height0 = object0.size.bottom - object0.size.top;
const object = Engine.GetGUIObjectByName("color[" + i + "]");
this.color = [0, 0, 0];
this.sliders = [];
this.valuesText = [];
}
/**
* @param {String} color - initial color as RGB string e.g. 100 0 200
*/
async run(color)
{
Engine.GetGUIObjectByName("titleBar").caption = translate("Color");
Engine.GetGUIObjectByName("infoLabel").caption = translate("Move the sliders to change the Red, Green and Blue components of the Color");
const cancelHotkey = Engine.GetGUIObjectByName("cancelHotkey");
const button = [];
const closePromise =
setButtonCaptionsAndVisibility(button, this.captions, cancelHotkey, "cmButton");
distributeButtonsHorizontally(button, this.captions);
const c = color.split(" ");
const object0 = Engine.GetGUIObjectByName("color[0]");
const height0 = object0.size.bottom - object0.size.top;
for (let i = 0; i < this.color.length; i++)
{
this.color[i] = Math.floor(+c[i] || 0);
const object = Engine.GetGUIObjectByName("color[" + i + "]");
if (!object)
continue;
object.size.top = i * height0;
object.size.bottom = (i + 1) * height0;
this.sliders[i] = Engine.GetGUIObjectByName("colorSlider[" + i + "]");
const slider = this.sliders[i];
slider.min_value = 0;
slider.max_value = 255;
slider.value = this.color[i];
slider.onValueChange = () => {this.updateFromSlider(i);};
this.valuesText[i] = Engine.GetGUIObjectByName("colorValue[" + i + "]");
this.valuesText[i].caption = this.color[i];
Engine.GetGUIObjectByName("colorLabel[" + i + "]").caption = this.labels[i];
}
this.updateColorPreview();
// Update return color on cancel to prevent malformed values from initial input.
color = this.color.join(" ");
return await closePromise === 0 ? color : this.color.join(" ");
}
updateFromSlider(index)
{
this.color[index] = Math.floor(this.sliders[index].value);
this.valuesText[index].caption = this.color[index];
this.updateColorPreview();
}
updateColorPreview()
{
this.colorDisplay.sprite = "color:" + this.color.join(" ");
}
object.size.top = i * height0;
object.size.bottom = (i + 1) * height0;
}
ColorMixer.prototype.labels = [translate("Red"), translate("Green"), translate("Blue")];
ColorMixer.prototype.captions = [translate("Cancel"), translate("Save")];
function init(color)
function initializeButtons()
{
return new ColorMixer().run(color);
const button = [];
const prom = setButtonCaptionsAndVisibility(button, captions,
Engine.GetGUIObjectByName("cancelHotkey"), "cmButton");
distributeButtonsHorizontally(button, captions);
return prom;
}
/**
* @param {String} initialColor - initial color as RGB string e.g. 100 0 200
*/
export async function init(initialColor)
{
Engine.GetGUIObjectByName("titleBar").caption = translate("Color");
Engine.GetGUIObjectByName("infoLabel").caption =
translate("Move the sliders to change the Red, Green and Blue components of the Color");
const color = [0, 0, 0];
const sliders = [];
const valuesText = [];
const closePromise = initializeButtons();
const updateColorPreview = () => {
const colorDisplay = Engine.GetGUIObjectByName("colorDisplay");
colorDisplay.sprite = "color:" + color.join(" ");
};
const updateFromSlider = index => {
color[index] = Math.floor(sliders[index].value);
valuesText[index].caption = color[index];
updateColorPreview();
};
const c = initialColor.split(" ");
for (let i = 0; i < color.length; i++)
{
color[i] = Math.floor(+c[i] || 0);
resizeChanel(i);
sliders[i] = Engine.GetGUIObjectByName("colorSlider[" + i + "]");
const slider = sliders[i];
slider.min_value = 0;
slider.max_value = 255;
slider.value = color[i];
slider.onValueChange = () => {updateFromSlider(i);};
valuesText[i] = Engine.GetGUIObjectByName("colorValue[" + i + "]");
valuesText[i].caption = color[i];
Engine.GetGUIObjectByName("colorLabel[" + i + "]").caption = labels[i];
}
updateColorPreview();
// Update return color on cancel to prevent malformed values from initial input.
const sanitizedColor = color.join(" ");
return await closePromise === 0 ? sanitizedColor : color.join(" ");
}
binaries/data/mods/mod/gui/colormixer/colormixer.xml
+1 -1
View File
@@ -3,7 +3,7 @@
<objects>
<script directory="gui/common/"/>
<script directory="gui/colormixer/"/>
<script module="gui/colormixer/colormixer.js"/>
<!-- Fade out the background because it's non-interactable -->
<object sprite="ModernFade" type="image"/>