wip(22w7g): add forceBg to glitch

public/assets/css/style.css

@@ -26,7 +26,18 @@ body {
     background-color: rgba(var(--color-base), .7);
     background-size: cover;
     background-blend-mode: overlay;
-    background-position: fixed;
+    background-position: center;
+    background-attachment: fixed;
+}
+
+html {
+    height: 100vh;
+    overflow: hidden;
+}
+
+body {
+    overflow-y: scroll;
+    height: 100vh;
 }
 
 picture {
@@ -155,7 +166,7 @@ body > div {
     }
 }
 
-@media (min-aspect-ratio: 14/9) and (min-height: 450px) {
+@media (min-aspect-ratio: 14/9) and (min-height: 600px) {
     body {
         display: grid;
         grid-template-columns: repeat(2, 1fr);

public/assets/js/glitch/Generator.mjs

@@ -6,7 +6,7 @@ class Generator {
 			_image: null,
 			_dir: location,
 			_dir_rel: "assets/media/b64/",
-			count: 3,
+			count: 4,
 			// Get or set current background
 			get current () { return this._image; },
 			set current (image) {

public/assets/js/glitch/GlitchWorker.js

@@ -16,10 +16,6 @@ class GlitchWorker extends Generator {
 		self.postMessage("READY");
 	}
 
-	test() {
-		console.log("yes");
-	}
-
 	// Run a scoped function on a random interval between
 	queue(func) {
 		clearTimeout(this._timers[func]);
@@ -29,6 +25,16 @@ class GlitchWorker extends Generator {
 		this[func]?.();
 	}
 
+	// Set background by id and stop randBg animation
+	async forceBg(id) {
+		clearTimeout(this._timers.randBg);
+
+		const image = await this.fetchBg(id);
+		this.bg.current = image;
+
+		this.setBg(image);
+	}
+
 	// Event handler for messages from parent thread
 	message(event) {
 		const data = typeof event.data === "object" ? event.data : [event.data];