From b99669d68900cc0ee75e87da07acf9ad1dab2450 Mon Sep 17 00:00:00 2001 From: Sameh Khamis Date: Sat, 12 Sep 2026 21:25:05 -0700 Subject: [PATCH] style: format Display controls and browser acceptance checks --- scripts/format-scope.json | 4 +- scripts/qa-visual-input.mjs | 81 +++++++++++++++++++++------------ src/ui/displayControls.js | 25 ++++++---- src/ui/displayControls.test.mjs | 49 +++++++++++++++----- 4 files changed, 108 insertions(+), 51 deletions(-) diff --git a/scripts/format-scope.json b/scripts/format-scope.json index a77bbdb9b..7f8717b16 100644 --- a/scripts/format-scope.json +++ b/scripts/format-scope.json @@ -134,5 +134,7 @@ "src/ui/styleParameters.js", "src/ui/visualInput.js", "src/ui/visualInput.test.mjs", - "scripts/qa-visual-input.mjs" + "scripts/qa-visual-input.mjs", + "src/ui/displayControls.js", + "src/ui/displayControls.test.mjs" ] diff --git a/scripts/qa-visual-input.mjs b/scripts/qa-visual-input.mjs index 7d9d47cd2..3117e1414 100644 --- a/scripts/qa-visual-input.mjs +++ b/scripts/qa-visual-input.mjs @@ -146,28 +146,43 @@ try { manager._bloomSlider.value = '80'; manager._bloomSlider.dispatchEvent(new Event('input', { bubbles: true })); manager._bloomSlider.focus(); - return { value: Number(manager._bloomSlider.value), contrast: manager._bloomStage.uniforms.contrast }; + return { + value: Number(manager._bloomSlider.value), + contrast: manager._bloomStage.uniforms.contrast, + }; }); await page.keyboard.press('ArrowRight'); - check('native Display slider updates effect state', await page.evaluate((before) => { - const manager = window.__godsEyeView.styleManager; - return Number(manager._bloomSlider.value) > before.value && manager._bloomStage.uniforms.contrast < before.contrast; - }, displayBefore)); - check('Display buttons toggle current state once', await page.evaluate(() => { - const manager = window.__godsEyeView.styleManager; - const before = manager.bloomEnabled; - manager._bloomBtn.click(); - const changed = manager.bloomEnabled !== before; - manager._bloomBtn.click(); - return changed && manager.bloomEnabled === before; - })); - check('Display rebind removes old listeners', await page.evaluate(() => { - const manager = window.__godsEyeView.styleManager; - manager._initUI(); - const before = manager.bloomEnabled; - manager._bloomBtn.click(); - return manager.bloomEnabled !== before; - })); + check( + 'native Display slider updates effect state', + await page.evaluate((before) => { + const manager = window.__godsEyeView.styleManager; + return ( + Number(manager._bloomSlider.value) > before.value && + manager._bloomStage.uniforms.contrast < before.contrast + ); + }, displayBefore), + ); + check( + 'Display buttons toggle current state once', + await page.evaluate(() => { + const manager = window.__godsEyeView.styleManager; + const before = manager.bloomEnabled; + manager._bloomBtn.click(); + const changed = manager.bloomEnabled !== before; + manager._bloomBtn.click(); + return changed && manager.bloomEnabled === before; + }), + ); + check( + 'Display rebind removes old listeners', + await page.evaluate(() => { + const manager = window.__godsEyeView.styleManager; + manager._initUI(); + const before = manager.bloomEnabled; + manager._bloomBtn.click(); + return manager.bloomEnabled !== before; + }), + ); fs.mkdirSync('qa-shots/visual-input', { recursive: true }); await page.screenshot({ path: 'qa-shots/visual-input/desktop.png' }); await page.setViewport({ width: 620, height: 900 }); @@ -212,16 +227,22 @@ try { ); }), ); - check('destroyed Display controls cannot change settings', await page.evaluate(() => { - const manager = window.__godsEyeView.styleManager; - manager._displayControls.destroy(); - const before = manager.bloomEnabled; - const contrast = manager._bloomStage.uniforms.contrast; - manager._bloomBtn.click(); - manager._bloomSlider.value = '15'; - manager._bloomSlider.dispatchEvent(new Event('input', { bubbles: true })); - return manager.bloomEnabled === before && manager._bloomStage.uniforms.contrast === contrast; - })); + check( + 'destroyed Display controls cannot change settings', + await page.evaluate(() => { + const manager = window.__godsEyeView.styleManager; + manager._displayControls.destroy(); + const before = manager.bloomEnabled; + const contrast = manager._bloomStage.uniforms.contrast; + manager._bloomBtn.click(); + manager._bloomSlider.value = '15'; + manager._bloomSlider.dispatchEvent(new Event('input', { bubbles: true })); + return ( + manager.bloomEnabled === before && + manager._bloomStage.uniforms.contrast === contrast + ); + }), + ); check('runtime has no uncaught browser errors', errors.length === 0); } finally { await browser.close(); diff --git a/src/ui/displayControls.js b/src/ui/displayControls.js index 77a4000c2..9e0c955b3 100644 --- a/src/ui/displayControls.js +++ b/src/ui/displayControls.js @@ -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() { diff --git a/src/ui/displayControls.test.mjs b/src/ui/displayControls.test.mjs index 28822f564..b93014fa1 100644 --- a/src/ui/displayControls.test.mjs +++ b/src/ui/displayControls.test.mjs @@ -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'));