Reformat code

src/page/background/animation.ts

@@ -17,10 +17,7 @@ export class Animation<T> {
       return;
     }
 
-    this.elapsedTime = Math.min(
-      this.elapsedTime + deltaTimeInMs,
-      this.intervalInMs
-    );
+    this.elapsedTime = Math.min(this.elapsedTime + deltaTimeInMs, this.intervalInMs);
 
     const q = this.elapsedTime / this.intervalInMs;
     this._value = this.interpolator(this.from, this.to, q);

src/page/background/background.ts

@@ -51,22 +51,33 @@ export class PageBackground extends PageElement {
     return super.handleOnBodyDimensionsChangedEvent(event);
   }
 
-  public handleOnPageThemeChangedEvent(
-    event: OnPageThemeChangedEvent
-  ): OptionalEvent {
+  public handleOnPageThemeChangedEvent(event: OnPageThemeChangedEvent): OptionalEvent {
     Blob.changeTheme(event.isDark);
     this.blobs.forEach(b => b.decideColor());
     return super.handleOnPageThemeChangedEvent(event);
   }
 
   private bindListeners() {
-    window.addEventListener('resize', () => this.resize());
-    window.addEventListener('load', e => {
+    addEventListener('resize', () => this.resize());
+    addEventListener('load', e => {
       this.resize();
+      this.createBlobs();
       this.redraw(e.timeStamp);
     });
   }
 
+  private createBlobs() {
+    const requiredBlobCount = Math.max(
+      PageBackground.MIN_BLOB_COUNT,
+      (this.backgroundSize.value.x * this.backgroundSize.value.y) /
+        PageBackground.BLOB_SPACING ** 2
+    );
+
+    while (requiredBlobCount > this.blobs.length) {
+      this.blobs.push(new Blob());
+    }
+  }
+
   private resize(heightChange?: number) {
     this.resizeCanvas();
     this.resizeBackground(heightChange);
@@ -106,10 +117,7 @@ export class PageBackground extends PageElement {
                   q
             );
           const topOffset = variableOffset(getHeight(this.start.element), 1);
-          const topLeft = this.convertFrom2Dto3D(
-            new Vec2(0, topOffset),
-            blob.z
-          );
+          const topLeft = this.convertFrom2Dto3D(new Vec2(0, topOffset), blob.z);
 
           const bottomOffset = variableOffset(getHeight(this.end.element), 0.2);
 
@@ -137,19 +145,10 @@ export class PageBackground extends PageElement {
     this.blobs.forEach(b => b.step(deltaTime));
 
     this.scrollPosition = this.parent.element.scrollTop;
-    const requiredBlobCount = this.requiredBlobCount;
-
-    while (requiredBlobCount > this.blobs.length) {
-      this.blobs.push(new Blob());
-    }
 
     this.blobs.sort((b1, b2) => b2.z - b1.z);
 
-    this.blobs.forEach((blob, i) => {
-      if (i >= requiredBlobCount) {
-        return;
-      }
-
+    this.blobs.forEach(blob => {
       const topLeft = this.convertFrom3Dto2D(blob.topLeft);
       const bottomRight = this.convertFrom3Dto2D(
         blob.topLeft.add(Vec3.from(blob.size, 0))
@@ -160,23 +159,18 @@ export class PageBackground extends PageElement {
       }
     });
 
-    window.requestAnimationFrame(timestamp => this.redraw(timestamp));
+    requestAnimationFrame(timestamp => this.redraw(timestamp));
   }
 
   private getDeltaTime(timestamp: DOMHighResTimeStamp): number {
-    const deltaTime = this.previousTimestamp
-      ? timestamp - this.previousTimestamp
-      : 0;
+    const deltaTime = this.previousTimestamp ? timestamp - this.previousTimestamp : 0;
     this.previousTimestamp = timestamp;
     return Math.max(0, deltaTime);
   }
 
   private convertFrom3Dto2D(p: Vec3): Vec2 {
     const m = PageBackground.PERSPECTIVE / (PageBackground.PERSPECTIVE + p.z);
-    return new Vec2(
-      m * (p.z / 2 + p.x),
-      m * (p.z / 2 + p.y - this.scrollPosition)
-    );
+    return new Vec2(m * (p.z / 2 + p.x), m * (p.z / 2 + p.y - this.scrollPosition));
   }
 
   private convertFrom2Dto3D(p: Vec2, z: number, scrollPosition = 0): Vec2 {
@@ -192,14 +186,4 @@ export class PageBackground extends PageElement {
         (0 <= bottomRight.y && bottomRight.y <= this.canvas.height))
     );
   }
-
-  private get requiredBlobCount(): number {
-    return Math.max(
-      PageBackground.MIN_BLOB_COUNT,
-      Math.round(
-        (this.backgroundSize.value.x * this.backgroundSize.value.y) /
-          PageBackground.BLOB_SPACING ** 2
-      )
-    );
-  }
 }

src/page/background/blob.ts

@@ -32,10 +32,7 @@ export class Blob {
   private _positionScale = new Vec2(0, 0);
   private _positionOffset = new Vec2(0, 0);
 
-  private readonly _size = new Vec2(
-    140,
-    Blob.CREATOR_RANDOM.randomInInterval(260, 740)
-  );
+  private readonly _size = new Vec2(140, Blob.CREATOR_RANDOM.randomInInterval(260, 740));
 
   public constructor() {
     this.decideColor();
@@ -47,8 +44,7 @@ export class Blob {
       Blob.colorPickerRandom.choose(
         Blob.isDarkThemed ? Blob.DARK_COLORS : Blob.LIGHT_COLORS
       ),
-      (this.z - PageBackground.Z_MIN) /
-        (PageBackground.Z_MAX - PageBackground.Z_MIN)
+      (this.z - PageBackground.Z_MIN) / (PageBackground.Z_MAX - PageBackground.Z_MIN)
     );
 
     this.color = new Animation<string>(

src/page/image-viewer/image-viewer.ts

@@ -18,9 +18,7 @@ export class PageImageViewer extends PageElement {
 
     media
       .filter((e: HTMLElement) => e.parentElement !== this.element)
-      .forEach(
-        (e: HTMLImageElement) => (e.onclick = this.handleClick.bind(this))
-      );
+      .forEach((e: HTMLImageElement) => (e.onclick = this.handleClick.bind(this)));
     return super.handleOnLoadEvent(event);
   }
 

src/page/theme-switcher/theme-switcher.ts

@@ -21,8 +21,7 @@ export class PageThemeSwitcher extends PageElement {
     super(createElement(generate()));
 
     const storedIsDark = PageThemeSwitcher.loadFromLocalStorage();
-    const isDark =
-      storedIsDark !== null ? storedIsDark : isSystemLevelDarkModeEnabled();
+    const isDark = storedIsDark !== null ? storedIsDark : isSystemLevelDarkModeEnabled();
 
     if (isDark) {
       (this.element as HTMLInputElement).checked = true;
@@ -53,7 +52,7 @@ export class PageThemeSwitcher extends PageElement {
   }
 
   private static saveToLocalStorage(darkModeEnabled: boolean) {
-    window.localStorage?.setItem(
+    localStorage?.setItem(
       PageThemeSwitcher.LOCAL_STORAGE_KEY,
       JSON.stringify(darkModeEnabled)
     );
@@ -61,9 +60,7 @@ export class PageThemeSwitcher extends PageElement {
 
   private static loadFromLocalStorage(): boolean | null {
     try {
-      return JSON.parse(
-        window.localStorage?.getItem(PageThemeSwitcher.LOCAL_STORAGE_KEY)
-      );
+      return JSON.parse(localStorage?.getItem(PageThemeSwitcher.LOCAL_STORAGE_KEY));
     } catch {
       return null;
     }