Refactor

src/page/background/animation.ts

@@ -1,40 +0,0 @@
-import { Vec2 } from './vec2';
-
-export class Animation {
-  private _value: Vec2;
-  private elapsedTime = 0;
-
-  public constructor(
-    private from: Vec2,
-    private to: Vec2,
-    private intervalInMs: number,
-    private onChange?: (currentValue: Vec2) => void
-  ) {}
-
-  public step(deltaTimeInMs: number) {
-    if (this.elapsedTime === this.intervalInMs) {
-      return;
-    }
-
-    this.elapsedTime = Math.min(
-      this.elapsedTime + deltaTimeInMs,
-      this.intervalInMs
-    );
-    const q = this.elapsedTime / this.intervalInMs;
-
-    this._value = new Vec2(
-      Animation.interpolate(this.from.x, this.to.x, q),
-      Animation.interpolate(this.from.y, this.to.y, q)
-    );
-
-    this.onChange?.call(null, this._value);
-  }
-
-  private static interpolate(from: number, to: number, q: number): number {
-    return from + q * (to - from);
-  }
-
-  public get value(): Vec2 {
-    return this._value;
-  }
-}

src/page/background/background.html.ts

@@ -1,5 +1,5 @@
-import { html } from "../../model/misc";
-import "./background.scss";
+import { html } from '../../model/misc';
+import './background.scss';
 
 export const generate = (): html => `
     <section id="background-container">

src/page/background/background.scss

@@ -1,5 +1,5 @@
-@import "../../style/vars";
-@import "../../style/mixins";
+@import '../../style/vars';
+@import '../../style/mixins';
 
 #background-container {
   position: fixed;

src/page/background/background.ts

@@ -12,8 +12,7 @@ export class PageBackground extends PageElement {
   private readonly blobSpacing = 350;
 
   public constructor(private start: PageElement, private end: PageElement) {
-    super();
-    this.setElement(createElement(generate()));
+    super(createElement(generate()));
     Blob.initialize(10, 30, 5);
   }
 
@@ -28,18 +27,16 @@ export class PageBackground extends PageElement {
   private bindListeners(parent: PageElement) {
     window.addEventListener('resize', () => this.resize(parent));
     window.addEventListener('load', () => this.resize(parent));
-    parent
-      .getElement()
-      .addEventListener(
-        'scroll',
-        () => (this.getElement().scrollTop = parent.getElement().scrollTop)
-      );
+    parent.element.addEventListener(
+      'scroll',
+      () => (this.element.scrollTop = parent.element.scrollTop)
+    );
   }
 
   private resize(parent: PageElement, heightChange?: number) {
     const siblings: Array<HTMLElement> = this.getSiblings(parent);
 
-    const width = parent.getElement().clientWidth;
+    const width = parent.element.clientWidth;
     let height = sum(siblings.map(getHeight));
     if (heightChange) {
       height += heightChange;
@@ -67,10 +64,10 @@ export class PageBackground extends PageElement {
         b.transform(
           random,
           width,
-          parent.getElement().clientHeight,
+          parent.element.clientHeight,
           height,
-          getHeight(this.start.getElement()),
-          getHeight(this.end.getElement())
+          getHeight(this.start.element),
+          getHeight(this.end.element)
         );
         b.show();
       }
@@ -79,7 +76,7 @@ export class PageBackground extends PageElement {
 
   private getSiblings(parent: PageElement): Array<HTMLElement> {
     return Array.prototype.slice
-      .call(parent.getElement().children)
-      .filter(e => e !== this.getElement());
+      .call(parent.element.children)
+      .filter(e => e !== this.element);
   }
 }

src/page/background/blob.ts

@@ -1,4 +1,4 @@
-import { mixColors } from '../../framework/helper/color-mixer';
+import { mixColors } from '../../framework/helper/mix-colors';
 import { createElement } from '../../framework/helper/create-element';
 import { Random } from '../../framework/helper/random';
 

src/page/background/vec2.ts

@@ -1,17 +0,0 @@
-export class Vec2 {
-  public static readonly Zero = new Vec2(0, 0);
-
-  public constructor(public readonly x: number, public readonly y: number) {}
-
-  public add(other: Vec2): Vec2 {
-    return new Vec2(this.x + other.x, this.y + other.y);
-  }
-
-  public subtract(other: Vec2): Vec2 {
-    return new Vec2(this.x - other.x, this.y - other.y);
-  }
-
-  public multiply(other: Vec2): Vec2 {
-    return new Vec2(this.x * other.x, this.y * other.y);
-  }
-}

src/page/background/vec3.ts

@@ -1,23 +0,0 @@
-import { Vec2 } from './vec2';
-
-export class Vec3 {
-  public static readonly Zero = new Vec3(0, 0, 0);
-
-  public static from(vec2: Vec2, z: number): Vec3 {
-    return new Vec3(vec2.x, vec2.y, z);
-  }
-
-  public constructor(
-    public readonly x: number,
-    public readonly y: number,
-    public readonly z: number
-  ) {}
-
-  public add(other: Vec3): Vec3 {
-    return new Vec3(this.x + other.x, this.y + other.y, this.z + other.z);
-  }
-
-  public multiply(other: Vec3): Vec3 {
-    return new Vec3(this.x * other.x, this.y * other.y, this.z * other.z);
-  }
-}