Refactor rendering

frontend/src/scripts/helper/autoscaler.ts

@@ -0,0 +1,47 @@
+import { mix } from './mix';
+import { clamp } from './clamp';
+
+export class Autoscaler {
+  // can have fractions
+  private index: number;
+
+  constructor(
+    private setters: Array<(value: number) => void>,
+    private targets: Array<Array<number>>,
+    startingIndex: number,
+    private scalingOptions: {
+      additiveIncrease: number;
+      multiplicativeDecrease: number;
+    }
+  ) {
+    this.index = startingIndex;
+    this.applyScaling();
+  }
+
+  public increase() {
+    this.index += this.scalingOptions.additiveIncrease;
+    this.applyScaling();
+  }
+
+  public decrease() {
+    this.index /= this.scalingOptions.multiplicativeDecrease;
+    this.applyScaling();
+  }
+
+  private applyScaling() {
+    this.index = clamp(this.index, 0, this.targets.length - 1);
+
+    const floor = Math.floor(this.index);
+    const fract = this.index - floor;
+
+    const previousTarget = this.targets[floor];
+    const nextTarget =
+      floor + 1 == this.targets.length
+        ? previousTarget
+        : this.targets[floor + 1];
+
+    this.setters.forEach((setter, i) =>
+      setter(mix(previousTarget[i], nextTarget[i], fract))
+    );
+  }
+}

frontend/src/scripts/helper/get-combinations.ts

@@ -0,0 +1,31 @@
+export const getCombinations = (
+  values: Array<Array<number>>
+): Array<Array<number>> => {
+  if (!values.every((a) => a.length > 0)) {
+    return [];
+  }
+
+  const result: Array<Array<number>> = [];
+  const counters = values.map((_) => 0);
+
+  const increaseCounter = (i: number) => {
+    if (i >= counters.length) {
+      return false;
+    }
+
+    counters[i]++;
+
+    if (counters[i] >= values[i].length) {
+      counters[i] = 0;
+      return increaseCounter(i + 1);
+    }
+
+    return true;
+  };
+
+  do {
+    result.push(values.map((v, i) => v[counters[i]]));
+  } while (increaseCounter(0));
+
+  return result;
+};