Add settings sliders

src/page/collapsible-panel-animator.ts

@@ -6,20 +6,14 @@ export class CollapsiblePanelAnimator {
 
   public constructor(
     infoButton: HTMLButtonElement,
-    private readonly infoPage: HTMLElement
+    private readonly infoPage: HTMLElement,
+    ignoreForCloseOnClick: HTMLElement
   ) {
     infoButton.addEventListener('click', this.toggle.bind(this));
-    window.addEventListener('click', (event) => {
-      if ([infoButton, this.infoPage].includes(event.target as HTMLElement)) {
-        return;
-      }
-
-      if (this.infoPage.contains(event.target as Node)) {
-        return;
-      }
-
-      this.close();
-    });
+    window.addEventListener(
+      'click',
+      (event) => !ignoreForCloseOnClick.contains(event.target as Node) && this.close()
+    );
   }
 
   public open() {

src/page/set-up-settings-page.ts

@@ -0,0 +1,65 @@
+import { settings } from '../settings';
+import { SettingsSlider, ValueScaling } from '../utils/settings-slider';
+
+export const setUpSettingsPage = (
+  settingsPage: HTMLDivElement,
+  maxAgentCount: number
+) => {
+  const sliders = [
+    [
+      new SettingsSlider(settings, 'agentCount', {
+        min: 1,
+        max: maxAgentCount,
+        scaling: ValueScaling.Logarithmic,
+        rounding: Math.round,
+      }),
+
+      new SettingsSlider(settings, 'aggressionFactor', {
+        min: 0,
+        max: 10,
+      }),
+
+      new SettingsSlider(settings, 'nextGenerationSpawnRadius', {
+        min: 1,
+        max: 1000,
+      }),
+
+      new SettingsSlider(settings, 'nextGenerationSpawnInterval', {
+        min: 0.1,
+        max: 600,
+      }),
+
+      new SettingsSlider(settings, 'moveSpeed', {
+        min: 10,
+        max: 500,
+      }),
+    ],
+    [
+      new SettingsSlider(settings, 'brushWidth', {
+        min: 1,
+        max: 60,
+      }),
+
+      new SettingsSlider(settings, 'brushWidthRandomness', {
+        min: 0,
+        max: 1,
+      }),
+    ],
+    [
+      new SettingsSlider(settings, 'clarity', {
+        min: 0.1,
+        max: 8,
+      }),
+    ],
+  ];
+
+  sliders.forEach((sliderContainer) => {
+    const sliderContainerElement = document.createElement('div');
+
+    sliderContainer.forEach((slider) => {
+      sliderContainerElement.appendChild(slider.element);
+    });
+
+    settingsPage.querySelector('section').appendChild(sliderContainerElement);
+  });
+};