style: format Display controls and browser acceptance checks

This commit is contained in:
Sameh Khamis committed 2026-09-12 21:25:05 -07:00
1 parent ffc65dd844
commit b99669d689
4 files changed
+108 -51

No files matched your search

+17 -8
View File
@@ -14,16 +14,23 @@ export function bindDisplayControls({ elements, actions }) {
};
const integer = (element) => parseInt(element.value, 10);
for (const [name, action] of [
['bloomButton', 'toggleBloom'], ['sharpenButton', 'toggleSharpen'],
['scopeButton', 'toggleScope'], ['cleanViewButton', 'toggleCleanView'],
['cleanViewExitButton', 'exitCleanView'], ['celestialButton', 'toggleCelestial'],
['hudButton', 'toggleHud'], ['detectionButton', 'cycleDetection'],
['bloomButton', 'toggleBloom'],
['sharpenButton', 'toggleSharpen'],
['scopeButton', 'toggleScope'],
['cleanViewButton', 'toggleCleanView'],
['cleanViewExitButton', 'exitCleanView'],
['celestialButton', 'toggleCelestial'],
['hudButton', 'toggleHud'],
['detectionButton', 'cycleDetection'],
['modelsButton', 'toggleModels'],
]) listen(elements[name], 'click', action);
])
listen(elements[name], 'click', action);
for (const [name, action] of [
['bloomSlider', 'setBloomIntensity'], ['sharpenSlider', 'setSharpenIntensity'],
['bloomSlider', 'setBloomIntensity'],
['sharpenSlider', 'setSharpenIntensity'],
['scopeFeatherSlider', 'setScopeFeather'],
]) listen(elements[name], 'input', action, integer);
])
listen(elements[name], 'input', action, integer);
listen(elements.densitySlider, 'input', 'setDensity', (el) => el.value);
listen(elements.hudLayout, 'change', 'setHudLayout', (el) => el.value);
for (const el of elements.styleButtons || [])
@@ -31,7 +38,9 @@ export function bindDisplayControls({ elements, actions }) {
for (const el of elements.allocationButtons || [])
listen(el, 'click', 'setAllocation', (el) => el.dataset.allocation);
for (const el of elements.modelModeButtons || [])
listen(el, 'click', 'setModelsMode', (el) => el.dataset.mode === 'all' ? 'all' : 'proximity');
listen(el, 'click', 'setModelsMode', (el) =>
el.dataset.mode === 'all' ? 'all' : 'proximity',
);
for (const el of elements.fadeSliders || []) listen(el, 'input', 'setFade');
return {
destroy() {
+37 -12
View File
@@ -13,10 +13,13 @@ test('controls read current values without preventing native input behavior', ()
const bloomSlider = element('24');
const hudLayout = element('tactical');
const calls = [];
const control = bindDisplayControls({ elements: { bloomSlider, hudLayout }, actions: {
setBloomIntensity: (value) => calls.push(value),
setHudLayout: (value) => calls.push(value),
} });
const control = bindDisplayControls({
elements: { bloomSlider, hudLayout },
actions: {
setBloomIntensity: (value) => calls.push(value),
setHudLayout: (value) => calls.push(value),
},
});
const event = new Event('input', { cancelable: true });
bloomSlider.dispatchEvent(event);
bloomSlider.value = '37';
@@ -32,10 +35,16 @@ test('destroyed and replaced controls cannot issue stale actions', () => {
const bloomButton = element();
let oldCalls = 0;
let newCalls = 0;
const first = bindDisplayControls({ elements: { bloomButton }, actions: { toggleBloom: () => oldCalls++ } });
const first = bindDisplayControls({
elements: { bloomButton },
actions: { toggleBloom: () => oldCalls++ },
});
bloomButton.dispatchEvent(new Event('click'));
first.destroy();
const second = bindDisplayControls({ elements: { bloomButton }, actions: { toggleBloom: () => newCalls++ } });
const second = bindDisplayControls({
elements: { bloomButton },
actions: { toggleBloom: () => newCalls++ },
});
first.destroy();
bloomButton.dispatchEvent(new Event('click'));
assert.equal(oldCalls, 1);
@@ -53,10 +62,20 @@ test('style, allocation and model choices retain their current data attributes',
allocation.dataset.allocation = 'balanced';
mode.dataset.mode = 'all';
const calls = [];
const control = bindDisplayControls({ elements: { styleButtons: [style], allocationButtons: [allocation], modelModeButtons: [mode] }, actions: {
setStyle: (value) => calls.push(value), setAllocation: (value) => calls.push(value), setModelsMode: (value) => calls.push(value),
} });
for (const el of [style, allocation, mode]) el.dispatchEvent(new Event('click'));
const control = bindDisplayControls({
elements: {
styleButtons: [style],
allocationButtons: [allocation],
modelModeButtons: [mode],
},
actions: {
setStyle: (value) => calls.push(value),
setAllocation: (value) => calls.push(value),
setModelsMode: (value) => calls.push(value),
},
});
for (const el of [style, allocation, mode])
el.dispatchEvent(new Event('click'));
mode.dataset.mode = 'unknown';
mode.dispatchEvent(new Event('click'));
assert.deepEqual(calls, ['thermal', 'balanced', 'all', 'proximity']);
@@ -67,8 +86,14 @@ test('optional controls are absent safely and subscriptions stay instance-owned'
const calls = [];
const a = element();
const b = element();
const one = bindDisplayControls({ elements: { fadeSliders: [null, a] }, actions: { setFade: () => calls.push('a') } });
const two = bindDisplayControls({ elements: { fadeSliders: [b] }, actions: { setFade: () => calls.push('b') } });
const one = bindDisplayControls({
elements: { fadeSliders: [null, a] },
actions: { setFade: () => calls.push('a') },
});
const two = bindDisplayControls({
elements: { fadeSliders: [b] },
actions: { setFade: () => calls.push('b') },
});
one.destroy();
a.dispatchEvent(new Event('input'));
b.dispatchEvent(new Event('input'));