Deploy

app/global.css

@@ -21,14 +21,14 @@ html {
 
 body {
   display: flex;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
   flex-direction: column;
   margin: 0;
   padding: 0;
-  height: 100vh;
-  max-height: 100vh;
   overflow: hidden;
   background-color: #699697;
-  background-image: url("../public/noise.png"),
-    linear-gradient(to bottom, #5be9ee 0%, #1e4172 100%);
-  background-repeat: repeat, repeat;
 }

docs/index.txt

@@ -1,6 +1,6 @@
-2:I[2967,["665","static/chunks/f97e080b-dd5f2930cdd62ec6.js","51","static/chunks/795d4814-41e831b7c57cc385.js","212","static/chunks/59650de3-d12eb82ab0e85613.js","516","static/chunks/f7333993-8f32bf8e5c1e3f32.js","675","static/chunks/b563f954-107b6adade962249.js","240","static/chunks/53c13509-84be3322852db000.js","699","static/chunks/8e1d74a4-2e60cc37d7b04363.js","634","static/chunks/634-fc7f40d81b6d4544.js","931","static/chunks/app/page-8bfd722117a9a7d9.js"],"Forge"]
+2:I[2967,["665","static/chunks/f97e080b-dd5f2930cdd62ec6.js","51","static/chunks/795d4814-41e831b7c57cc385.js","212","static/chunks/59650de3-d12eb82ab0e85613.js","516","static/chunks/f7333993-8f32bf8e5c1e3f32.js","675","static/chunks/b563f954-107b6adade962249.js","240","static/chunks/53c13509-84be3322852db000.js","699","static/chunks/8e1d74a4-2e60cc37d7b04363.js","634","static/chunks/634-fc7f40d81b6d4544.js","931","static/chunks/app/page-e66009e34e76f13e.js"],"Forge"]
 3:I[4707,[],""]
 4:I[6423,[],""]
-0:["d1IhGb8z70Loo4_E-WAtv",[[["",{"children":["__PAGE__",{}]},"$undefined","$undefined",true],["",{"children":["__PAGE__",{},[["$L1",["$","$L2",null,{}],[["$","link","0",{"rel":"stylesheet","href":"/vl2-forge/_next/static/css/e296810e160012c4.css","precedence":"next","crossOrigin":"$undefined"}]]],null],null]},[[[["$","link","0",{"rel":"stylesheet","href":"/vl2-forge/_next/static/css/50e7680c75095ce4.css","precedence":"next","crossOrigin":"$undefined"}]],["$","html",null,{"lang":"en","className":"__variable_6dd175 __variable_60c549 __variable_b97ccf","children":["$","body",null,{"children":["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L4",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":[["$","title",null,{"children":"404: This page could not be found."}],["$","div",null,{"style":{"fontFamily":"system-ui,\"Segoe UI\",Roboto,Helvetica,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\"","height":"100vh","textAlign":"center","display":"flex","flexDirection":"column","alignItems":"center","justifyContent":"center"},"children":["$","div",null,{"children":[["$","style",null,{"dangerouslySetInnerHTML":{"__html":"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}"}}],["$","h1",null,{"className":"next-error-h1","style":{"display":"inline-block","margin":"0 20px 0 0","padding":"0 23px 0 0","fontSize":24,"fontWeight":500,"verticalAlign":"top","lineHeight":"49px"},"children":"404"}],["$","div",null,{"style":{"display":"inline-block"},"children":["$","h2",null,{"style":{"fontSize":14,"fontWeight":400,"lineHeight":"49px","margin":0},"children":"This page could not be found."}]}]]}]}]],"notFoundStyles":[]}]}]}]],null],null],["$L5",null]]]]
+0:["ESD_kf-gb_uy2iubrKiy_",[[["",{"children":["__PAGE__",{}]},"$undefined","$undefined",true],["",{"children":["__PAGE__",{},[["$L1",["$","$L2",null,{}],[["$","link","0",{"rel":"stylesheet","href":"/vl2-forge/_next/static/css/f1ea3743fc784e98.css","precedence":"next","crossOrigin":"$undefined"}]]],null],null]},[[[["$","link","0",{"rel":"stylesheet","href":"/vl2-forge/_next/static/css/d80ab0a0f2784fed.css","precedence":"next","crossOrigin":"$undefined"}]],["$","html",null,{"lang":"en","className":"__variable_6dd175 __variable_60c549 __variable_b97ccf","children":["$","body",null,{"children":["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L4",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":[["$","title",null,{"children":"404: This page could not be found."}],["$","div",null,{"style":{"fontFamily":"system-ui,\"Segoe UI\",Roboto,Helvetica,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\"","height":"100vh","textAlign":"center","display":"flex","flexDirection":"column","alignItems":"center","justifyContent":"center"},"children":["$","div",null,{"children":[["$","style",null,{"dangerouslySetInnerHTML":{"__html":"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}"}}],["$","h1",null,{"className":"next-error-h1","style":{"display":"inline-block","margin":"0 20px 0 0","padding":"0 23px 0 0","fontSize":24,"fontWeight":500,"verticalAlign":"top","lineHeight":"49px"},"children":"404"}],["$","div",null,{"style":{"display":"inline-block"},"children":["$","h2",null,{"style":{"fontSize":14,"fontWeight":400,"lineHeight":"49px","margin":0},"children":"This page could not be found."}]}]]}]}]],"notFoundStyles":[]}]}]}]],null],null],["$L5",null]]]]
 5:[["$","meta","0",{"name":"viewport","content":"width=device-width, initial-scale=1"}],["$","meta","1",{"charSet":"utf-8"}],["$","title","2",{"children":"VL2 Forge"}],["$","meta","3",{"name":"description","content":"Create .vl2 files for Tribes 2"}],["$","meta","4",{"name":"next-size-adjust"}]]
 1:null

src/FileItem.tsx

@@ -10,11 +10,11 @@ import styles from "./FileItem.module.css";
 
 export function FileItem({ file, onDelete, onRename }) {
   const icon = useMemo(() => {
-    if (file.dataUri && file.type?.genericType === "image") {
+    if (file.blobUri && file.type?.genericType === "image") {
       return (
         <img
           className={styles.PreviewIcon}
-          src={file.dataUri}
+          src={file.blobUri}
           width={24}
           alt=""
         />

src/Forge.module.css

@@ -9,6 +9,9 @@
   padding: 20px;
   gap: 20px;
   overflow: auto;
+  background-image: url("../public/noise.png"),
+    linear-gradient(to bottom, #5be9ee 0%, #1e4172 100%);
+  background-repeat: repeat, repeat;
 }
 
 .Footer {

src/Forge.tsx

@@ -44,8 +44,10 @@ export function Forge() {
     });
     setLoadingCount((count) => count - 1);
   }, []);
+
   const { getRootProps, getInputProps, open, isDragActive } = useDropzone({
     noClick: true,
+    noKeyboard: true,
     onDrop,
   });
 

src/Loading.module.css

@@ -22,7 +22,7 @@
   justify-content: center;
   width: 100%;
   color: rgb(232, 194, 154);
-  background: rgba(0, 0, 0, 0.95);
+  background: #000;
   mix-blend-mode: hard-light;
   font-family: var(--font-alagard);
   font-size: 40px;

src/utils.ts

@@ -9,7 +9,7 @@ export type FileType = {
 export type FileEntry = {
   path: string;
   buffer: ArrayBuffer;
-  dataUri: string | null;
+  blobUri: string | null;
   date: Date | null;
   unixPermissions: string | number | null;
   dosPermissions: number | null;
@@ -146,8 +146,8 @@ export async function handleZipFile(file) {
       const buffer = await fileObj.async("arraybuffer");
       const fileEntry = {
         path,
-        buffer: buffer,
-        dataUri: null,
+        buffer,
+        blobUri: null,
         date: fileObj.date,
         unixPermissions: fileObj.unixPermissions,
         dosPermissions: fileObj.dosPermissions,
@@ -157,8 +157,12 @@ export async function handleZipFile(file) {
         fileEntry.type?.genericType === "image" ||
         fileEntry.type?.genericType === "audio"
       ) {
-        const base64String = await fileObj.async("base64");
-        fileEntry.dataUri = `data:${fileEntry.type.mimeType};base64,${base64String}`;
+        // const base64String = await fileObj.async("base64");
+        // fileEntry.dataUri = `data:${fileEntry.type.mimeType};base64,${base64String}`;
+        const blob = new Blob([buffer], {
+          type: fileEntry.type?.mimeType ?? "",
+        });
+        fileEntry.blobUri = URL.createObjectURL(blob);
       }
       map.set(path, fileEntry);
     }
@@ -190,18 +194,15 @@ export async function handleOtherFile(file) {
   const fileEntry = {
     path,
     buffer,
-    dataUri: null,
+    blobUri: null,
     date: null,
     unixPermissions: null,
     dosPermissions: null,
     type: detectFileType(file),
   };
-  if (
-    fileEntry.type?.genericType === "image" ||
-    fileEntry.type?.genericType === "audio"
-  ) {
-    const base64String = base64ArrayBuffer(buffer);
-    fileEntry.dataUri = `data:${fileEntry.type.mimeType};base64,${base64String}`;
+  if (fileEntry.type?.genericType === "image") {
+    // const base64String = base64ArrayBuffer(buffer);
+    fileEntry.blobUri = URL.createObjectURL(file);
   }
   map.set(path, fileEntry);
   return map;