style: format Display controls and browser acceptance checks

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"
 ]

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) => {
+  check(
-    const manager = window.__godsEyeView.styleManager;
+    'native Display slider updates effect state',
-    return Number(manager._bloomSlider.value) > before.value && manager._bloomStage.uniforms.contrast < before.contrast;
+    await page.evaluate((before) => {
-  }, displayBefore));
+      const manager = window.__godsEyeView.styleManager;
-  check('Display buttons toggle current state once', await page.evaluate(() => {
+      return (
-    const manager = window.__godsEyeView.styleManager;
+        Number(manager._bloomSlider.value) > before.value &&
-    const before = manager.bloomEnabled;
+        manager._bloomStage.uniforms.contrast < before.contrast
-    manager._bloomBtn.click();
+      );
-    const changed = manager.bloomEnabled !== before;
+    }, displayBefore),
-    manager._bloomBtn.click();
+  );
-    return changed && manager.bloomEnabled === before;
+  check(
-  }));
+    'Display buttons toggle current state once',
-  check('Display rebind removes old listeners', await page.evaluate(() => {
+    await page.evaluate(() => {
-    const manager = window.__godsEyeView.styleManager;
+      const manager = window.__godsEyeView.styleManager;
-    manager._initUI();
+      const before = manager.bloomEnabled;
-    const before = manager.bloomEnabled;
+      manager._bloomBtn.click();
-    manager._bloomBtn.click();
+      const changed = manager.bloomEnabled !== before;
-    return 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(() => {
+  check(
-    const manager = window.__godsEyeView.styleManager;
+    'destroyed Display controls cannot change settings',
-    manager._displayControls.destroy();
+    await page.evaluate(() => {
-    const before = manager.bloomEnabled;
+      const manager = window.__godsEyeView.styleManager;
-    const contrast = manager._bloomStage.uniforms.contrast;
+      manager._displayControls.destroy();
-    manager._bloomBtn.click();
+      const before = manager.bloomEnabled;
-    manager._bloomSlider.value = '15';
+      const contrast = manager._bloomStage.uniforms.contrast;
-    manager._bloomSlider.dispatchEvent(new Event('input', { bubbles: true }));
+      manager._bloomBtn.click();
-    return manager.bloomEnabled === before && manager._bloomStage.uniforms.contrast === contrast;
+      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();

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'],
+    ['bloomButton', 'toggleBloom'],
-    ['scopeButton', 'toggleScope'], ['cleanViewButton', 'toggleCleanView'],
+    ['sharpenButton', 'toggleSharpen'],
-    ['cleanViewExitButton', 'exitCleanView'], ['celestialButton', 'toggleCelestial'],
+    ['scopeButton', 'toggleScope'],
-    ['hudButton', 'toggleHud'], ['detectionButton', 'cycleDetection'],
+    ['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() {

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: {
+  const control = bindDisplayControls({
-    setBloomIntensity: (value) => calls.push(value),
+    elements: { bloomSlider, hudLayout },
-    setHudLayout: (value) => calls.push(value),
+    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: {
+  const control = bindDisplayControls({
-    setStyle: (value) => calls.push(value), setAllocation: (value) => calls.push(value), setModelsMode: (value) => calls.push(value),
+    elements: {
-  } });
+      styleButtons: [style],
-  for (const el of [style, allocation, mode]) el.dispatchEvent(new Event('click'));
+      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 one = bindDisplayControls({
-  const two = bindDisplayControls({ elements: { fadeSliders: [b] }, actions: { setFade: () => calls.push('b') } });
+    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'));