diff --git a/app/global.css b/app/global.css
index 9eaaf5f..b61e0bb 100644
--- a/app/global.css
+++ b/app/global.css
@@ -24,7 +24,9 @@ body {
flex-direction: column;
margin: 0;
padding: 0;
- min-height: 100vh;
+ height: 100vh;
+ max-height: 100vh;
+ overflow: hidden;
background-color: #699697;
background-image: url("../public/noise.png"),
linear-gradient(to bottom, #5be9ee 0%, #1e4172 100%);
diff --git a/docs/404.html b/docs/404.html
index f6aa109..942c2df 100644
--- a/docs/404.html
+++ b/docs/404.html
@@ -1 +1 @@
-404: This page could not be found. VL2 Forge 404
This page could not be found. 404: This page could not be found. VL2 Forge 404
This page could not be found. 404: This page could not be found. VL2 Forge 404
This page could not be found. 404: This page could not be found. VL2 Forge 404
This page could not be found. VL2 Forge VL2 Forge
+ {icon} {" "}
+ {
+ let newPath = window.prompt(`Rename file (${file.path}):`, file.path);
+ if (newPath) {
+ newPath = newPath
+ .trim()
+ .replace(/\/+/g, "/")
+ .replace(/^\//, "")
+ .replace(/\/$/, "")
+ .trim();
+ if (newPath && newPath !== file.path) {
+ onRename(file.path, newPath);
+ }
+ }
+ }}
+ >
+ {file.path}
+
+ {
+ onDelete(file.path);
+ }}
+ >
+
+
+ );
+}
diff --git a/src/Forge.module.css b/src/Forge.module.css
index 846e73c..464d75d 100644
--- a/src/Forge.module.css
+++ b/src/Forge.module.css
@@ -1,24 +1,25 @@
.Forge {
- flex: 1 0 auto;
+ flex: 1 1 100%;
display: grid;
grid-template-columns: auto 1fr;
- grid-template-rows: 1fr;
+ grid-template-rows: 1fr auto;
align-content: stretch;
font-family: var(--font-departure), monospace;
color: #fff;
- text-shadow: 2px 1px 0 rgba(0, 0, 0, 1);
padding: 20px;
gap: 20px;
+ overflow: auto;
}
.Footer {
position: relative;
+ grid-column: span 2;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 12px;
- padding: 40px;
+ padding: 32px 40px;
background: rgba(59, 55, 49, 0.8);
border-image-slice: 18 26 26 23;
@@ -60,84 +61,15 @@
pointer-events: none;
}
-.Footer form {
- display: flex;
- align-items: center;
- justify-content: center;
- flex-wrap: wrap;
- gap: 12px;
- margin: 0 auto;
-}
-
-.NameInput {
- position: relative;
- font-size: 18px;
- font-family: var(--font-lora);
- font-weight: 500;
- font-style: italic;
- line-height: 1.25;
-}
-
-.NameInput input {
- display: block;
- min-width: 240px;
- max-width: 100%;
- min-height: 46px;
- background: #fff;
- color: #333;
- font-size: inherit;
- font-family: inherit;
- font-weight: inherit;
- font-style: inherit;
- line-height: inherit;
- padding: 2px 50px 2px 0;
- text-indent: 10px;
-}
-
-.NameInput::after {
- display: grid;
- place-content: center;
- content: ".vl2";
- position: absolute;
- top: 0;
- right: 0;
- bottom: 0;
- width: 50px;
- color: #999;
-}
-
-.DownloadButton {
- border: 0;
- margin: 0;
- padding: 0 12px 0 12px;
- min-width: 128px;
- min-height: 46px;
- font-family: var(--font-alagard), monospace;
- font-size: 24px;
- font-style: normal;
- font-weight: normal;
- line-height: 1;
- border-radius: 2px;
- background: url("../public/button.png") transparent;
- background-repeat: no-repeat;
- background-size: 150% 190%;
- background-position: 50% 50%;
- border-top: 3px solid rgba(255, 145, 105, 0.5);
- border-left: 3px solid rgba(255, 178, 150, 0.5);
- border-right: 3px solid rgba(36, 14, 14, 0.7);
- border-bottom: 3px solid rgba(36, 14, 14, 0.7);
- color: #ffffff;
- text-shadow: 0 0 5px rgba(255, 226, 82, 0.358), 2px 3px 0 rgba(0, 0, 0, 0.5);
- cursor: pointer;
-}
-
.ListArea {
- display: flex;
+ position: relative;
+ display: grid;
align-items: center;
- justify-content: center;
+ justify-content: stretch;
padding: 32px;
background: rgba(2, 2, 84, 0.252);
border-radius: 12px;
+ overflow: auto;
}
.FileList {
@@ -148,10 +80,10 @@
margin: 0;
padding: 0;
list-style: none;
+ text-shadow: 2px 1px 0 rgba(0, 0, 0, 1);
}
.EmptyMessage {
- align-self: center;
text-align: center;
text-wrap: balance;
line-height: 1.75;
@@ -191,57 +123,6 @@
gap: 40px;
}
-.File {
- display: flex;
- align-items: center;
- gap: 12px;
-}
-
-.DeleteButton {
- flex: 0 0 auto;
- border: 0;
- background: transparent;
- display: grid;
- place-content: center;
- font-size: 24px;
- margin: 0;
- padding: 0;
- color: rgba(0, 0, 0, 0.4);
- cursor: pointer;
-}
-
-.DeleteButton:hover {
- color: rgb(255, 89, 89);
-}
-
-.DeleteButton svg {
- pointer-events: none;
-}
-
-.IconContainer {
- flex: 0 0 auto;
- display: grid;
- place-content: center;
- width: 24px;
- font-size: 22px;
- color: rgba(255, 255, 255, 0.9);
-}
-
-.PreviewIcon {
- width: auto;
- height: auto;
- max-width: 100%;
- max-height: 24px;
- border: 1px solid black;
-}
-
-.Path {
- background: rgba(0, 0, 0, 0.3);
- padding: 3px 8px;
- border-radius: 8px;
- user-select: none;
-}
-
.HeaderLink {
display: none;
margin-left: 0;
@@ -268,7 +149,7 @@
@media (max-width: 767px) {
.Forge {
grid-template-columns: 1fr;
- grid-template-rows: auto 1fr;
+ grid-template-rows: auto 1fr auto;
padding: 12px;
gap: 12px;
}
@@ -286,6 +167,10 @@
display: grid;
}
+ .Footer {
+ grid-column: span 1;
+ }
+
.FooterLink {
display: none;
}
diff --git a/src/Forge.tsx b/src/Forge.tsx
index 53963c4..6fe9fa7 100644
--- a/src/Forge.tsx
+++ b/src/Forge.tsx
@@ -1,267 +1,22 @@
"use client";
-import { useCallback, useMemo, useState } from "react";
+import { useCallback, useMemo, useState, useTransition } from "react";
import { useDropzone } from "react-dropzone";
-import JSZip from "jszip";
-import { saveAs } from "file-saver";
import orderBy from "lodash.orderby";
-import { FaTrashAlt, FaGithub } from "react-icons/fa";
-import { MdCastle, MdTerrain } from "react-icons/md";
-import { LuScrollText } from "react-icons/lu";
-import { FaClipboardList, FaMapPin } from "react-icons/fa6";
-import { HiMiniSpeakerWave } from "react-icons/hi2";
+import { FaGithub } from "react-icons/fa";
+import { Loading } from "./Loading";
+import { FileItem } from "./FileItem";
+import { DownloadForm } from "./DownloadForm";
+import { handleInputFile } from "./utils";
import styles from "./Forge.module.css";
-import { base64ArrayBuffer } from "./utils";
-
-function detectBestPath(path) {
- const parts = path.split("/");
- let folder = "";
- let basename = "";
- if (parts.length > 1) {
- folder = parts.slice(0, -1).join("/");
- basename = parts[parts.length - 1];
- } else {
- folder = "";
- basename = parts[0];
- }
- if (folder) {
- return `${folder}/${basename}`;
- }
- if (
- /\.(l|m|h)(male|female|bioderm)\.png$/i.test(basename) ||
- /^(vehicle|weapon)_.+png$/i.test(basename) ||
- /^dcase\d\d\.png$/i.test(basename)
- ) {
- folder = "textures/skins";
- } else if (/\.(ter|spn)$/i.test(basename)) {
- folder = "terrains";
- } else if (/\.mis$/i.test(basename)) {
- folder = "missions";
- } else if (/\.dif$/i.test(basename)) {
- folder = "interiors";
- }
- if (folder) {
- return `${folder}/${basename}`;
- } else {
- return basename;
- }
-}
-
-function detectFileType(file): FileType | null {
- if (file.type) {
- if (/^image\//i.test(file.type)) {
- return { mimeType: file.type, genericType: "image" };
- } else if (/^audio\//i.test(file.type)) {
- return { mimeType: file.type, genericType: "audio" };
- }
- }
- if (/\.png$/i.test(file.name)) {
- return { mimeType: "image/png", genericType: "image" };
- } else if (/\.jpg$/i.test(file.name)) {
- return { mimeType: "image/jpeg", genericType: "image" };
- } else if (/\.bmp$/i.test(file.name)) {
- return { mimeType: "image/bmp", genericType: "image" };
- } else if (/\.webp$/i.test(file.name)) {
- return { mimeType: "image/webp", genericType: "image" };
- } else if (/\.gif$/i.test(file.name)) {
- return { mimeType: "image/gif", genericType: "image" };
- } else if (/\.tiff$/i.test(file.name)) {
- return { mimeType: "image/tiff", genericType: "image" };
- } else if (/\.svg$/i.test(file.name)) {
- return { mimeType: "image/svg+xml", genericType: "image" };
- } else if (/\.wav$/i.test(file.name)) {
- return { mimeType: "audio/wav", genericType: "audio" };
- } else if (/\.mp3$/i.test(file.name)) {
- return { mimeType: "audio/mpeg", genericType: "audio" };
- }
- if (file.type) {
- return {
- mimeType: file.type,
- genericType: null,
- };
- }
- return null;
-}
-
-function FilePreview({ file, onDelete, onRename }) {
- let icon = null;
- if (file.dataUri && file.type?.genericType === "image") {
- icon = (
-
- {icon} {" "}
- {
- let newPath = window.prompt(`Rename file (${file.path}):`, file.path);
- if (newPath) {
- newPath = newPath
- .trim()
- .replace(/\/+/g, "/")
- .replace(/^\//, "")
- .replace(/\/$/, "")
- .trim();
- if (newPath && newPath !== file.path) {
- onRename(file.path, newPath);
- }
- }
- }}
- >
- {file.path}
-
- {
- onDelete(file.path);
- }}
- >
-
-
- );
-}
-
-type FileType = {
- mimeType: string;
- genericType: string | null;
-};
-
-type FileEntry = {
- path: string;
- buffer: ArrayBuffer;
- dataUri: string | null;
- date: Date | null;
- unixPermissions: string | number | null;
- dosPermissions: number | null;
- type: FileType | null;
-};
-
-async function handleZipFile(file) {
- const zip = await JSZip.loadAsync(file);
- const map = new Map();
- for (let path in zip.files) {
- const fileObj = zip.files[path];
- if (!fileObj.dir) {
- path = detectBestPath(path);
- const buffer = await fileObj.async("arraybuffer");
- const fileEntry = {
- path,
- buffer: buffer,
- dataUri: null,
- date: fileObj.date,
- unixPermissions: fileObj.unixPermissions,
- dosPermissions: fileObj.dosPermissions,
- type: detectFileType(fileObj),
- };
- if (
- fileEntry.type?.genericType === "image" ||
- fileEntry.type?.genericType === "audio"
- ) {
- const base64String = await fileObj.async("base64");
- fileEntry.dataUri = `data:${fileEntry.type.mimeType};base64,${base64String}`;
- }
- map.set(path, fileEntry);
- }
- }
- return map;
-}
-
-async function handleOtherFile(file) {
- const map = new Map();
- let path;
- if (file.path) {
- path = file.path;
- if (path.startsWith("/")) {
- path = path.slice(1);
- }
- } else if (file.name) {
- path = file.name;
- } else {
- return map;
- }
- path = detectBestPath(path);
- const buffer = await new Promise((resolve, reject) => {
- const reader = new FileReader();
- reader.addEventListener("load", (event) => {
- resolve(event.target.result as ArrayBuffer);
- });
- reader.readAsArrayBuffer(file);
- });
- const fileEntry = {
- path,
- buffer,
- dataUri: 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}`;
- }
- map.set(path, fileEntry);
- return map;
-}
-
-async function handleInputFile(file) {
- if (/\.(zip|vl2)$/i.test(file.name)) {
- return handleZipFile(file);
- } else {
- return handleOtherFile(file);
- }
-}
-
-export function createZipFile(files: Array) {
- const zip = new JSZip();
- for (const file of files) {
- zip.file(file.path, file.buffer, {
- date: file.date,
- dosPermissions: file.dosPermissions,
- unixPermissions: file.unixPermissions,
- });
- }
- return zip;
-}
-
-export async function saveZipFile(zip: JSZip, name: string) {
- const blob = await zip.generateAsync({
- type: "blob",
- mimeType: "application/octet-stream",
- });
- saveAs(blob, name);
-}
export function Forge() {
+ const [isPending, startTransition] = useTransition();
+ const [loadingCount, setLoadingCount] = useState(0);
const [actionLog, setActionLog] = useState(() => []);
const [files, setFiles] = useState(() => new Map());
const onDrop = useCallback(async (acceptedFiles) => {
+ setLoadingCount((count) => count + 1);
const actionLog = [];
const finalMap = new Map();
const allFiles: Array> = await Promise.all(
@@ -278,13 +33,16 @@ export function Forge() {
finalMap.set(path, file);
});
});
- setFiles((prevMap) => {
- return new Map([
- ...Array.from(prevMap.entries()),
- ...Array.from(finalMap.entries()),
- ]);
+ startTransition(() => {
+ setFiles((prevMap) => {
+ return new Map([
+ ...Array.from(prevMap.entries()),
+ ...Array.from(finalMap.entries()),
+ ]);
+ });
+ setActionLog((prevLog) => [...prevLog, ...actionLog]);
});
- setActionLog((prevLog) => [...prevLog, ...actionLog]);
+ setLoadingCount((count) => count - 1);
}, []);
const { getRootProps, getInputProps, open, isDragActive } = useDropzone({
noClick: true,
@@ -331,49 +89,51 @@ export function Forge() {
});
}, []);
+ const showLoading = isPending || loadingCount > 0;
+
return (
- <>
-
-
-
-
-
-
- {fileList.length ? (
-
- {fileList.map((file) => {
- return (
-
-
- );
- })}
-
- ) : (
-
- Drop files onto the page or press the add button. No need to
- extract existing .vl2 files first – just drop ‘em in and it’ll do
- that for you!
-
- )}
-
+
+
+
+
+
+
+ {showLoading ?
: null}
+ {fileList.length ? (
+
+ {fileList.map((file) => {
+ return (
+
+
+ );
+ })}
+
+ ) : showLoading ? null : (
+
+ Drop files onto the page or press the add button. No need to extract
+ existing .vl2 files first – just drop ‘em in and it’ll take care of
+ that!
+
+ )}
+
);
}
diff --git a/src/Loading.module.css b/src/Loading.module.css
new file mode 100644
index 0000000..93a67e5
--- /dev/null
+++ b/src/Loading.module.css
@@ -0,0 +1,30 @@
+.LoadingBackdrop {
+ display: flex;
+ align-items: stretch;
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ width: 400px;
+ height: 120px;
+ transform: translate(-50%, -50%);
+ background: url("../public/fire1.gif");
+ background-repeat: no-repeat;
+ background-size: 100% 100%;
+ border-radius: 10px;
+ z-index: 2;
+ text-align: center;
+ overflow: hidden;
+}
+
+.LoadingText {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 100%;
+ color: rgb(232, 194, 154);
+ background: rgba(0, 0, 0, 0.95);
+ mix-blend-mode: hard-light;
+ font-family: var(--font-alagard);
+ font-size: 40px;
+ text-shadow: 0 -3px 10px rgb(251, 82, 30);
+}
diff --git a/src/Loading.tsx b/src/Loading.tsx
new file mode 100644
index 0000000..f63a7a3
--- /dev/null
+++ b/src/Loading.tsx
@@ -0,0 +1,9 @@
+import styles from "./Loading.module.css";
+
+export function Loading() {
+ return (
+
+ );
+}
diff --git a/src/utils.ts b/src/utils.ts
index 965f9fa..5406413 100644
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -1,3 +1,21 @@
+import JSZip from "jszip";
+import { saveAs } from "file-saver";
+
+export type FileType = {
+ mimeType: string;
+ genericType: string | null;
+};
+
+export type FileEntry = {
+ path: string;
+ buffer: ArrayBuffer;
+ dataUri: string | null;
+ date: Date | null;
+ unixPermissions: string | number | null;
+ dosPermissions: number | null;
+ type: FileType | null;
+};
+
// Converts an ArrayBuffer directly to base64, without any intermediate 'convert to string then
// use window.btoa' step. According to my tests, this appears to be a faster approach:
// http://jsperf.com/encoding-xhr-image-data/5
@@ -47,3 +65,172 @@ export function base64ArrayBuffer(arrayBuffer) {
}
return base64;
}
+
+export function detectBestPath(path) {
+ const parts = path.split("/");
+ let folder = "";
+ let basename = "";
+ if (parts.length > 1) {
+ folder = parts.slice(0, -1).join("/");
+ basename = parts[parts.length - 1];
+ } else {
+ folder = "";
+ basename = parts[0];
+ }
+ if (folder) {
+ return `${folder}/${basename}`;
+ }
+ if (
+ /\.(l|m|h)(male|female|bioderm)\.png$/i.test(basename) ||
+ /^(vehicle|weapon)_.+png$/i.test(basename) ||
+ /^dcase\d\d\.png$/i.test(basename)
+ ) {
+ folder = "textures/skins";
+ } else if (/\.(ter|spn)$/i.test(basename)) {
+ folder = "terrains";
+ } else if (/\.mis$/i.test(basename)) {
+ folder = "missions";
+ } else if (/\.dif$/i.test(basename)) {
+ folder = "interiors";
+ }
+ if (folder) {
+ return `${folder}/${basename}`;
+ } else {
+ return basename;
+ }
+}
+
+export function detectFileType(file): FileType | null {
+ if (file.type) {
+ if (/^image\//i.test(file.type)) {
+ return { mimeType: file.type, genericType: "image" };
+ } else if (/^audio\//i.test(file.type)) {
+ return { mimeType: file.type, genericType: "audio" };
+ }
+ }
+ if (/\.png$/i.test(file.name)) {
+ return { mimeType: "image/png", genericType: "image" };
+ } else if (/\.jpg$/i.test(file.name)) {
+ return { mimeType: "image/jpeg", genericType: "image" };
+ } else if (/\.bmp$/i.test(file.name)) {
+ return { mimeType: "image/bmp", genericType: "image" };
+ } else if (/\.webp$/i.test(file.name)) {
+ return { mimeType: "image/webp", genericType: "image" };
+ } else if (/\.gif$/i.test(file.name)) {
+ return { mimeType: "image/gif", genericType: "image" };
+ } else if (/\.tiff$/i.test(file.name)) {
+ return { mimeType: "image/tiff", genericType: "image" };
+ } else if (/\.svg$/i.test(file.name)) {
+ return { mimeType: "image/svg+xml", genericType: "image" };
+ } else if (/\.wav$/i.test(file.name)) {
+ return { mimeType: "audio/wav", genericType: "audio" };
+ } else if (/\.mp3$/i.test(file.name)) {
+ return { mimeType: "audio/mpeg", genericType: "audio" };
+ }
+ if (file.type) {
+ return {
+ mimeType: file.type,
+ genericType: null,
+ };
+ }
+ return null;
+}
+
+export async function handleZipFile(file) {
+ const zip = await JSZip.loadAsync(file);
+ const map = new Map();
+ for (let path in zip.files) {
+ const fileObj = zip.files[path];
+ if (!fileObj.dir) {
+ path = detectBestPath(path);
+ const buffer = await fileObj.async("arraybuffer");
+ const fileEntry = {
+ path,
+ buffer: buffer,
+ dataUri: null,
+ date: fileObj.date,
+ unixPermissions: fileObj.unixPermissions,
+ dosPermissions: fileObj.dosPermissions,
+ type: detectFileType(fileObj),
+ };
+ if (
+ fileEntry.type?.genericType === "image" ||
+ fileEntry.type?.genericType === "audio"
+ ) {
+ const base64String = await fileObj.async("base64");
+ fileEntry.dataUri = `data:${fileEntry.type.mimeType};base64,${base64String}`;
+ }
+ map.set(path, fileEntry);
+ }
+ }
+ return map;
+}
+
+export async function handleOtherFile(file) {
+ const map = new Map();
+ let path;
+ if (file.path) {
+ path = file.path;
+ if (path.startsWith("/")) {
+ path = path.slice(1);
+ }
+ } else if (file.name) {
+ path = file.name;
+ } else {
+ return map;
+ }
+ path = detectBestPath(path);
+ const buffer = await new Promise((resolve, reject) => {
+ const reader = new FileReader();
+ reader.addEventListener("load", (event) => {
+ resolve(event.target.result as ArrayBuffer);
+ });
+ reader.readAsArrayBuffer(file);
+ });
+ const fileEntry = {
+ path,
+ buffer,
+ dataUri: 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}`;
+ }
+ map.set(path, fileEntry);
+ return map;
+}
+
+export async function handleInputFile(file) {
+ if (/\.(zip|vl2)$/i.test(file.name)) {
+ return handleZipFile(file);
+ } else {
+ return handleOtherFile(file);
+ }
+}
+
+export function createZipFile(files: Array) {
+ const zip = new JSZip();
+ for (const file of files) {
+ zip.file(file.path, file.buffer, {
+ date: file.date,
+ dosPermissions: file.dosPermissions,
+ unixPermissions: file.unixPermissions,
+ });
+ }
+ return zip;
+}
+
+export async function saveZipFile(zip: JSZip, name: string) {
+ const blob = await zip.generateAsync({
+ type: "blob",
+ mimeType: "application/octet-stream",
+ });
+ saveAs(blob, name);
+}
