From 78dd507be45885a19a2023902e659d186d1c7176 Mon Sep 17 00:00:00 2001
From: Andras Schmelczer <andras@schmelczer.dev>
Date: Sun, 25 Sep 2022 18:08:55 +0200
Subject: [PATCH] Refactor and fix too long page bug

---
 src/helper/get-height.ts          |  9 +++++----
 src/helper/mix.ts                 |  2 +-
 src/page/background/background.ts | 16 +++++++++-------
 3 files changed, 15 insertions(+), 12 deletions(-)

diff --git a/src/helper/get-height.ts b/src/helper/get-height.ts
index 26d0582..2258643 100644
--- a/src/helper/get-height.ts
+++ b/src/helper/get-height.ts
@@ -1,11 +1,12 @@
 export const getHeight = (e: HTMLElement): number => {
   // ignores margin collapse
   const computedStyle = getComputedStyle(e);
+
   return (
     e.clientHeight +
-    parseInt(computedStyle.marginTop) +
-    parseInt(computedStyle.marginBottom) +
-    parseInt(computedStyle.borderTopWidth) +
-    parseInt(computedStyle.borderBottomWidth)
+    parseFloat(computedStyle.marginTop) +
+    parseFloat(computedStyle.marginBottom) +
+    parseFloat(computedStyle.borderTopWidth) +
+    parseFloat(computedStyle.borderBottomWidth)
   );
 };
diff --git a/src/helper/mix.ts b/src/helper/mix.ts
index a7ba2bd..d2c194a 100644
--- a/src/helper/mix.ts
+++ b/src/helper/mix.ts
@@ -1,2 +1,2 @@
 export const mix = (from: number, to: number, q: number): number =>
-  from * (1 - q) + to * q;
+  from + (to - from) * q;
diff --git a/src/page/background/background.ts b/src/page/background/background.ts
index 7271e5f..c3800c8 100644
--- a/src/page/background/background.ts
+++ b/src/page/background/background.ts
@@ -72,13 +72,18 @@ export class Background extends PageElement {
   private randomizeBlobs(topOffset: number, bottomOffset: number) {
     this.random.seed = 50;
     this.blobs.forEach((b) => {
-      const z = -Number.parseInt(b.style.zIndex);
-      const [x, y] = this.randomXY(z, topOffset, bottomOffset, parseInt(b.style.height));
+      const z = -parseFloat(b.style.zIndex);
+      const [x, y] = this.getRandomPosition(
+        z,
+        topOffset,
+        bottomOffset,
+        parseFloat(b.style.height)
+      );
       b.style.transform = `translate3D(${x}px, ${y}px, ${-z}px) rotate(-20deg)`;
     });
   }
 
-  private randomXY(
+  private getRandomPosition(
     z: number,
     topOffset: number,
     bottomOffset: number,
@@ -112,10 +117,7 @@ export class Background extends PageElement {
           z / Background.zMax
         )
       ),
-      this.random.inInterval(
-        mix(topOffset, farTop, z / Background.zMax),
-        mix(this.contentHeight - bottomOffset, farBottom, z / Background.zMax)
-      ),
+      this.random.inInterval(mix(topOffset, farTop, z / Background.zMax), farBottom),
     ];
   }
 }