move to offscreencanvas for worker

also temp fix of worker till epoxy is fixed

src/1.8.ts

@@ -189,7 +189,7 @@ export class EaglerProxy {
 							);
 						} else {
 							fakelogin.writeString(this.offlineUsername);
-							fakelogin.writeBytes(offlineUUID(username));
+							fakelogin.writeBytes(offlineUUID(this.offlineUsername));
 						}
 						await this.eagler.write(fakelogin);
 						return;
@@ -285,28 +285,26 @@ export class EaglerProxy {
 							else if (body.description.extra) {
 								response.data.motd = [chatToLegacyString(body.description)];
 							} else response.data.motd = [body.description.text];
-
+						
 						if (body.favicon) {
 							response.data.icon = true;
-							let image = new Image();
-							image.onload = () => {
-								let canvas = document.createElement("canvas");
-								canvas.width = image.width;
-								canvas.height = image.height;
-								let ctx = canvas.getContext("2d")!;
-								ctx.drawImage(image, 0, 0);
-								let pixels = ctx.getImageData(
-									0,
-									0,
-									canvas.width,
-									canvas.height,
-								).data;
-								this.eagler.write(new Buffer(new Uint8Array(pixels)));
-							};
-							image.src = body.favicon;
 						}
 
 						await this.eagler.write(JSON.stringify(response));
+
+						if (body.favicon) {
+							let image = await createImageBitmap(await (await fetch(body.favicon)).blob());
+							let canvas = new OffscreenCanvas(image.width, image.height);
+							let ctx = canvas.getContext("2d")!;
+							ctx.drawImage(image, 0, 0);
+							let pixels = ctx.getImageData(
+								0,
+								0,
+								canvas.width,
+								canvas.height,
+							).data;
+							this.eagler.write(new Buffer(new Uint8Array(pixels)));
+						}
 						break;
 					case Clientbound.PongResponse:
 						let time = packet.readLong();

src/connection/fakewebsocket.ts

@@ -3,7 +3,7 @@ import { Buffer } from "../buffer";
 import { showUI } from "../ui";
 // @ts-ignore typescript sucks
 import wispcraft from "./wispcraft.png";
-import DataWorker from "./loader";
+// import DataWorker from "./loader";
 
 class WispWS extends EventTarget {
 	url: string;
@@ -17,7 +17,8 @@ class WispWS extends EventTarget {
 		super();
 
 		this.url = uri;
-		this.worker = new Worker("data:text/javascript;base64," + DataWorker);
+		// this.worker = new Worker("data:text/javascript;base64," + DataWorker);
+		this.worker = new Worker("worker.js");
 
 		this.readyState = WebSocket.CONNECTING;
 		this.worker.onmessage = async ({ data }) => {
@@ -82,7 +83,6 @@ class WispWS extends EventTarget {
 		this.readyState = WebSocket.CLOSING;
 		try {
 			this.worker.postMessage({ close: true });
-			// terminate too?
 		} catch (err) {}
 		this.readyState = WebSocket.CLOSED;
 	}
@@ -119,19 +119,15 @@ class SettingsWS extends EventTarget {
 					}),
 				}),
 			);
-			let image = new Image();
-			image.src = wispcraft;
-			image.onload = () => {
-				let canvas = document.createElement("canvas");
-				canvas.width = image.width;
-				canvas.height = image.height;
+			fetch(wispcraft).then((response) => response.blob()).then((blob) => createImageBitmap(blob)).then((image) => {
+				let canvas = new OffscreenCanvas(image.width, image.height);
 				let ctx = canvas.getContext("2d")!;
 				ctx.drawImage(image, 0, 0);
 				let pixels = ctx.getImageData(0, 0, canvas.width, canvas.height).data;
 				this.dispatchEvent(
 					new MessageEvent("message", { data: new Uint8Array(pixels) }),
 				);
-			};
+			});
 		} else {
 			showUI();
 			let str = "Settings UI launched.";

src/skins.ts

@@ -91,10 +91,8 @@ async function funnyFetch(url: string): Promise<Tex> {
 }
 
 function makeImageData(width: number, height: number): ImageData {
-	const canvas = document.createElement("canvas");
-	canvas.width = width;
-	canvas.height = height;
-	return (canvas.getContext("2d") as CanvasRenderingContext2D).getImageData(
+	const canvas = new OffscreenCanvas(width, height);
+	return canvas.getContext("2d")!.getImageData(
 		0,
 		0,
 		width,
@@ -103,18 +101,11 @@ function makeImageData(width: number, height: number): ImageData {
 }
 
 async function blobToImageData(blob: Blob): Promise<ImageData> {
-	return await new Promise((r) => {
-		const canvas = document.createElement("canvas");
-		const ctx = canvas.getContext("2d") as CanvasRenderingContext2D;
-		const image = new Image();
-		image.onload = function () {
-			canvas.width = image.width;
-			canvas.height = image.height;
-			ctx.drawImage(image, 0, 0);
-			r(ctx.getImageData(0, 0, canvas.width, canvas.height));
-		};
-		image.src = URL.createObjectURL(blob);
-	});
+	const image = await createImageBitmap(blob);
+	const canvas = new OffscreenCanvas(image.width, image.height);
+	const ctx = canvas.getContext("2d")!;
+	ctx.drawImage(image, 0, 0);
+	return ctx.getImageData(0, 0, canvas.width, canvas.height);
 }
 
 function copyRawPixels(

src/worker.ts

@@ -8,11 +8,11 @@ self.onmessage = ({ data }) => {
 		return;
 	}
 	if (data.close) {
-		conn.eaglerIn.close();
+		conn.eaglerOut.cancel();
+		self.close();
 		return;
 	}
 
-	console.log(data);
 	conn = new Connection(data.uri, data.wisp, data.authstore);
 	conn.forward(() => {
 		self.postMessage(