INCOMPLETE version selector

the version selector works but we need to rework the converter code (nbt_or_json.ts)

Author: Silabear

src/lib/stores.ts

@@ -0,0 +1,7 @@
+import { writable } from "svelte/store";
+
+export const outputVersion = writable({
+    friendly: "1.21.9+", 
+    description: "'object' type added, allowing you to use non-character sprites",
+    index: 2
+})

src/lib/text/nbt_or_json.ts

@@ -12,6 +12,10 @@ import {
 	trueMarkOrUndefined,
 	unescapeUnicode,
 } from "./general";
+import { outputVersion } from "$lib/stores";
+import { get } from "svelte/store";
+
+let exportVersion = get(outputVersion)
 
 const styleProps = [
 	"color",
@@ -34,14 +38,13 @@ const styleProps = [
  * @param current current text component
  * @param c the current editor JSON
  * @param includeInteractivity should it have click and hover events
- * @param exportVersion the version to export to
+ * @param outputVersion the version to export to
  * @returns the current component with new properties
  */
 export function addTypeSpecificValues(
 	current: MinecraftText,
 	c: JSONContent,
 	includeInteractivity = true,
-	exportVersion: "new" | "old" = "new",
 ) {
 	switch (c.type) {
 		case "text":
@@ -84,13 +87,10 @@ export function addTypeSpecificValues(
 	}
 
 	if (includeInteractivity) {
-		switch (exportVersion) {
-			case "new":
-				newApplyInteractiveValues(current, c);
-				break;
-			case "old":
-				oldApplyInteractiveValues(current, c);
-				break;
+		if (exportVersion.index >= 1) {
+			newApplyInteractiveValues(current, c);
+		} else {
+			oldApplyInteractiveValues(current, c);
 		}
 	}
 
@@ -315,18 +315,18 @@ export function optimise(arr: StringyMCText[], lore = false): StringyMCText[] {
 	return out;
 }
 
+
 /**
  * Converts the JSON content of the editor to an NBT string.
  */
 export function convert(
 	jsonContent: JSONContent,
 	exportType: "standard" | "item_lore" = "standard",
-	exportVersion: "new" | "old" = "new",
 	optimise: boolean,
 	force_json: boolean = false,
 ): string {
-	let out = translateJSON(jsonContent, { exportVersion, exportType, optimise });
-	if (exportVersion == "new" && !force_json) {
+	let out = translateJSON(jsonContent, { exportType, optimise });
+	if (exportVersion.index >= 1 && !force_json) {
 		// only remove strings
 		out = out.replace(/(?<=[{,]\s*)"[^"]*"\s*:/g, (match) =>
 			match.replace(/"/g, ""),
@@ -372,7 +372,6 @@ export function translateJSON(
 					current,
 					c,
 					true,
-					options.exportVersion,
 				);
 				data.push(current);
 			}
@@ -422,7 +421,6 @@ export function translateJSON(
 					currentComponent,
 					c,
 					false,
-					options.exportVersion,
 				);
 				currentLine.push(currentComponent);
 			}

src/lib/types.ts

@@ -1,3 +1,25 @@
+export type Version = {
+	friendly: string,
+	description: string,
+	index: number
+}
+export const versions = [
+	{
+		friendly: "pre-1.21.5", 
+		description: "uses json text components",
+		index: 0
+	},
+	{
+		friendly: "1.21.5-8", 
+		description: "uses nbt as text components, changes to syntax and names",
+		index: 1
+	},
+	{
+		friendly: "1.21.9+", 
+		description: "'object' type added, allowing you to use non-character sprites",
+		index: 2
+	},
+]
 export type BaseMinecraftText = Pick<
 	MinecraftText,
 	| "text"
@@ -114,7 +136,6 @@ export type MCTextKey = keyof MinecraftText;
 export type TranslateOptions = Partial<{
 	indent: boolean;
 	indentSize: number;
-	exportVersion: "old" | "new";
 	optimise: boolean;
 	exportType: "standard" | "item_lore";
 }>;

src/routes/+page.svelte

@@ -56,6 +56,8 @@
 	import { openDataStore } from "$lib/db";
 	import { fontLUT } from "$lib/tiptap/extensions/fonts";
 	import { tooltip } from "$lib/tooltip";
+	import { versions, type Version } from "$lib/types";
+	import { outputVersion } from "$lib/stores";
 
 	let tiptapJSON: JSONContent = $state()!;
 
@@ -65,7 +67,7 @@
 	let colorDialog: Modal = $state()!;
 
 	let outputDialog: Modal = $state()!;
-	let outputVersion: "new" | "old" = $state("new");
+	let versionPopup: boolean = $state(false);
 
 	let doesContentExist: boolean = $state(false);
 	let shouldOptimise = $state(true);
@@ -323,21 +325,6 @@
 			editor!.commands.unsetAllMarks();
 		}
 	}
-
-	function getTextComponentCount() {
-		const components = JSON.parse(
-			translateJSON(editor!.getJSON(), {
-				exportType: "standard",
-				indent: false,
-				exportVersion: outputVersion,
-				optimise: shouldOptimise,
-			}),
-		);
-		if (Array.isArray(components)) {
-			return components.length;
-		}
-		return 1;
-	}
 </script>
 
 <svelte:window onkeydown={clearMarksHandler} />
@@ -533,7 +520,6 @@
 							convert(
 								editor!.getJSON(),
 								"standard",
-								outputVersion,
 								shouldOptimise,
 							),
 						);
@@ -550,14 +536,14 @@
 					<code id="outputbox" class="inline break-all">
 						<!-- {editor ? translateMOTD(tiptapJSON) : "Loading..."} -->
 						{editor
-							? convert(tiptapJSON!, "standard", outputVersion, shouldOptimise)
+							? convert(tiptapJSON!, "standard", shouldOptimise)
 							: "Loading..."}
 					</code>
 				</p>
 			</div>
 			{#if doesContentExist}
 				<div class="mt-2 flex items-center space-x-2 select-none">
-					<p class="font-lexend nomob text-xs text-white/60">
+					<!-- <p class="font-lexend nomob text-xs text-white/60">
 						{editor
 							? convert(tiptapJSON!, "standard", outputVersion, shouldOptimise)
 									.length
@@ -567,23 +553,41 @@
 						{getTextComponentCount()} components
 					</p>
 
-					<p class="font-lexend nomob text-xs text-white/60">•</p>
+					<p class="font-lexend nomob text-xs text-white/60">•</p> -->
 
 					<p class="font-lexend text-xs text-white/60">
 						click to change output settings:
 					</p>
-					<button
-						{@attach tooltip}
-						class="ml-1 rounded-md bg-zinc-800 px-1 font-mono select-none hover:bg-zinc-700"
-						aria-label="Click to toggle the output version. 1.21.5 drastically changed the format of text components, so make sure you select the correct version."
-						onclick={() => {
-							const ov = outputVersion;
-							if (ov == "new") {
-								outputVersion = "old";
-							} else {
-								outputVersion = "new";
-							}
-						}}>{outputVersion == "new" ? "1.21.5+" : "pre 1.21.5"}</button>
+
+					<div class="relative inline-block">
+						{#if versionPopup}
+						<div class="absolute bottom-full mb-2 left-1/2 -translate-x-1/2 bg-zinc-900 w-[400px] shadow-md shadow-zinc-950 px-2 py-2 rounded-md z-10 flex flex-col space-y-1">
+							<div class="flex items-center ml-[0.3rem]">
+								<span class="w-1/4 text-sm">version</span>
+								<span class="w-3/4 text-sm">description</span>
+							</div>
+							{#each versions as v}
+							<button 
+							class="rounded-md bg-zinc-800 p-2 select-none hover:bg-zinc-700 text-left flex items-center w-full"
+							onclick={() => {
+								$outputVersion = v;
+								versionPopup = false;
+							}}>
+								<b class="w-1/4">{v.friendly}</b>
+								<span class="w-3/4 text-xs">{v.description}</span>
+							</button>
+							{/each}
+						</div>
+						{/if}
+
+						<button
+							class="ml-1 rounded-md bg-zinc-800 px-1 font-mono select-none hover:bg-zinc-700"
+							aria-label="Click to toggle the output version."
+							onclick={() => {
+								versionPopup = !versionPopup;
+						}}>{$outputVersion.friendly}</button>
+					</div>
+					
 					<button
 						{@attach tooltip}
 						class="ml-1 rounded-md bg-zinc-800 px-1 font-mono select-none hover:bg-zinc-700"
@@ -721,13 +725,13 @@
 		</div>
 	</Modal>
 
-	{#await import("$lib/components/modals/ExportModal.svelte") then modal}
+	<!-- {#await import("$lib/components/modals/ExportModal.svelte") then modal}
 		<modal.default
 			bind:outputDialog
 			bind:outputVersion
 			{editor}
 			{recentlyCopied} />
-	{/await}
+	{/await} -->
 
 	<Modal title="Import from NBT" bind:this={importDialog} key="I">
 		<div class="flex w-full flex-col space-y-2">