Add split converter to website (#13)

* Add libresplit-converter submodule

* Add wasm-pack dependency

* Set up wasm compilation

* Add converter to website

* Remove wasm-pack

* Remove submodule in favour of `npm link`

* Add @libresplit/libresplit-converter dependency

* Make dev server load wasm properly

---------

Co-authored-by: Jack Tench <[email protected]>

Author: wins1ey

package-lock.json

@@ -11,6 +11,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@libresplit/libresplit-converter": "^0.1.2",
     "@radix-ui/react-dropdown-menu": "^2.1.16",
     "@radix-ui/react-navigation-menu": "^1.2.14",
     "@radix-ui/react-slot": "^1.2.3",

package.json

@@ -1,7 +1,91 @@
+import React, { useState } from "react";
+
+import init, { convert } from "@libresplit/libresplit-converter";
+import wasmUrl from "@libresplit/libresplit-converter/libresplit_converter_bg.wasm?url";
+
 export function Converter() {
+  const [selectedFile, setSelectedFile] = useState<File | null>(null);
+  const [result, setResult] = useState<string | null>(null);
+
+  const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0] || null;
+    setSelectedFile(file);
+  };
+
+  const handleSubmit = async () => {
+    if (!selectedFile) {
+      alert("Please select a file before submitting!");
+      return;
+    }
+
+    try {
+      const text = await selectedFile.text();
+
+      await init(wasmUrl);
+
+      const converted = convert(text);
+
+      setResult(converted);
+    } catch (error) {
+      console.error("Error processing file: ", error);
+      alert("Failed to process file. See console for details.");
+    }
+  };
+
+  const handleDownload = () => {
+    if (!result || !selectedFile) return;
+
+    const fileName = selectedFile.name.replace(/\.[^/.]+$/, ".json");
+
+    const blob = new Blob([result], { type: "application/json" });
+    const url = URL.createObjectURL(blob);
+
+    const link = document.createElement("a");
+    link.href = url;
+    link.download = fileName;
+    link.click();
+
+    URL.revokeObjectURL(url);
+  };
+
   return (
-    <div className="flex h-screen w-screen items-center justify-center">
-      <p className="text-gray-500">Placeholder page for converter.</p>
+    <div className="flex min-h-screen items-center justify-center bg-linear-to-tr from-gray-700 to-sky-900 p-6">
+      <div className="w-full max-w-lg space-y-6 rounded-lg bg-gray-800 p-6 shadow-lg">
+        <h1 className="text-center text-2xl font-bold text-white">
+          LibreSplit Converter
+        </h1>
+        <div className="space-y-4">
+          <input
+            type="file"
+            accept=".lss"
+            onChange={handleFileChange}
+            className="block w-full rounded-md border border-white px-3 py-2 text-white focus:ring focus:ring-indigo-500 focus:outline-none"
+          />
+          <button
+            onClick={handleSubmit}
+            disabled={!selectedFile}
+            className={
+              '${selectedFile ? "bg-indigo-600 hover:bg-indigo-700" : "bg-gray-400 cursor-not-allowed"} w-full rounded-md px-4 py-2 font-semibold text-white'
+            }
+          >
+            Convert
+          </button>
+        </div>
+        {result && (
+          <div className="space-y-4">
+            <p className="text-center font-medium text-green-600">
+              Conversion successful! Click the button below to download your
+              LibreSplit file.
+            </p>
+            <button
+              onClick={handleDownload}
+              className="w-full rounded-md bg-green-600 px-4 py-2 font-semibold text-white hover:bg-green-700"
+            >
+              Download
+            </button>
+          </div>
+        )}
+      </div>
     </div>
   );
 }

src/app/converter.tsx

@@ -26,7 +26,7 @@ export function AppNav() {
 
           <NavigationMenuItem>
             <NavigationMenuLink asChild>
-              <a href="https://converter.libresplit.org/">Converter</a>
+              <Link to="/converter">Converter</Link>
             </NavigationMenuLink>
           </NavigationMenuItem>
         </NavigationMenuList>

src/components/libresplit/AppNav.tsx

@@ -11,4 +11,9 @@ export default defineConfig({
       "@": path.resolve(__dirname, "./src"),
     },
   },
+  server: {
+    fs: {
+      allow: [".."],
+    },
+  },
 });