add datapack store

Author: autumn-mck

src/datapack.ts

@@ -48,7 +48,7 @@ export async function loadDatapack(file: File): Promise<Datapack | string> {
 	if (modules.has(Modules.DPCONFIG)) config = await loadDpConfig(zip);
 
 	return {
-		id: mcmeta.pack.id,
+		id: mcmeta.pack.id || file.name,
 		name: mcmeta.pack.name,
 		description: mcmeta.pack.description,
 		icon,

src/datapackStore.ts

@@ -0,0 +1,46 @@
+import { type Datapack } from "./datapack";
+
+export class DatapacksChangedEvent extends CustomEvent<ReadonlyArray<Datapack>> {
+	constructor(datapacks: ReadonlyArray<Datapack>) {
+		super("datapacksChanged", { detail: datapacks });
+	}
+}
+
+class DatapackStore extends EventTarget {
+	private datapacks = new Map<string, Datapack>();
+
+	getAll(): ReadonlyArray<Datapack> {
+		return Array.from(this.datapacks.values());
+	}
+
+	add(dp: Datapack | Datapack[]) {
+		let changed = false;
+
+		for (const pack of Array.isArray(dp) ? dp : [dp]) {
+			if (!this.datapacks.has(pack.id)) {
+				this.datapacks.set(pack.id, pack);
+				changed = true;
+			}
+		}
+
+		if (changed) this.notifyChange();
+	}
+
+	remove(dp: string | string[]) {
+		let changed = false;
+
+		for (const id of Array.isArray(dp) ? dp : [dp]) {
+			if (this.datapacks.delete(id)) {
+				changed = true;
+			}
+		}
+
+		if (changed) this.notifyChange();
+	}
+
+	private notifyChange() {
+		this.dispatchEvent(new DatapacksChangedEvent(this.getAll()));
+	}
+}
+
+export const datapackStore = new DatapackStore();

src/main.ts

@@ -1,25 +1,32 @@
 import { type Datapack, loadDatapack } from "./datapack";
+import { DatapacksChangedEvent, datapackStore } from "./datapackStore";
 
 const fileUploadElement = document.getElementById("input")!;
 fileUploadElement.addEventListener("change", onFileUploaded, { passive: true });
+datapackStore.addEventListener("datapacksChanged", updateDatapackDisplay, { passive: true });
 
 async function onFileUploaded(e: Event) {
 	const fileList = (e.target as HTMLInputElement).files;
 	if (!fileList) return;
 
+	console.time("loadDatapacks");
 	const acceptedTypes = ["application/zip", "application/java-archive"];
 	const zipFiles = Array.from(fileList).filter((file) => acceptedTypes.includes(file.type));
 	const datapacks = await Promise.all(zipFiles.map(loadDatapack));
+	const validDatapacks = datapacks.filter((dp) => dp instanceof Object);
+	console.timeEnd("loadDatapacks");
 
-	console.log(datapacks);
+	datapackStore.add(validDatapacks);
+}
 
-	const dpDisplayElement = datapacks
-		.filter((dp) => dp instanceof Object)
-		.map(createDatapackDisplayElement);
+function updateDatapackDisplay(event: Event) {
+	const { detail } = event as DatapacksChangedEvent;
+	const dpDisplayElement = detail.map(createDatapackDisplayElement);
 
-	document.getElementById("datapack-display")!.innerHTML = "";
+	const datapackDisplay = document.getElementById("datapack-display")!;
+	datapackDisplay.innerHTML = "";
 	dpDisplayElement.forEach((element) => {
-		document.getElementById("datapack-display")!.appendChild(element);
+		datapackDisplay.appendChild(element);
 	});
 }