Migrate from Vue 2 to Vue 3, and a few processing Typescript fixes

package.json

@@ -9,15 +9,17 @@
     "dev": "webpack serve",
     "build": "webpack --progress",
     "process": "cd process && npm run process",
-    "process-all": "cd process && npm run process -- download"
+    "process-all": "cd process && npm run process -- download",
+    "process-specific-sprites": "cd process && npm run process -- specific-sprites"
   },
   "dependencies": {
+    "@vueuse/head": "^2.0.0",
     "lodash": "^4.17.21",
     "pug": "^3.0.2",
-    "vue": "^2.7.16",
-    "vue-meta": "^2.4.0",
-    "vue-router": "^3.6.5",
-    "vue-tippy": "^2.1.3"
+    "style-loader": "^4.0.0",
+    "vue": "^3.4.38",
+    "vue-router": "^4.4.3",
+    "vue-tippy": "^6.4.4"
   },
   "browserslist": [
     "> 1%",
@@ -27,15 +29,15 @@
   "devDependencies": {
     "@babel/core": "^7.24.4",
     "@babel/preset-env": "^7.24.4",
+    "@vue/compiler-sfc": "^3.4.38",
     "ajv": "^8.12.0",
     "babel-loader": "^9.1.3",
     "cross-env": "^7.0.3",
     "css-loader": "^5.2.7",
     "file-loader": "^6.2.0",
     "sass": "^1.75.0",
     "sass-loader": "^14.2.1",
-    "vue-loader": "^15.11.1",
-    "vue-template-compiler": "^2.7.16",
+    "vue-loader": "^17.4.2",
     "webpack": "^5.91.0",
     "webpack-cli": "^5.1.4",
     "webpack-dev-server": "^5.0.4"

process/package.json

@@ -5,7 +5,8 @@
   "main": "process.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
-    "process": "npm i && node_modules/.bin/ts-node process"
+    "process": "node_modules/.bin/ts-node process",
+    "process-specific-sprites": "node_modules/.bin/ts-node process specific-sprites"
   },
   "author": "",
   "license": "ISC",

process/process.ts

@@ -8,6 +8,22 @@ import {MainProcessor} from './src/MainProcessor';
 
 const processor = new MainProcessor(__dirname);
 
+if (process.argv.includes('specific-sprites')) {
+  let objects_str = process.argv[process.argv.indexOf('specific-sprites') + 1];
+  if (!objects_str) {
+    console.log("Please provide a comma-separated list of object IDs.")
+    process.exit(1);
+  }
+  let objects = objects_str.split(',');
+  if (objects.length === 0) {
+    console.error("No valid object IDs found.");
+    process.exit(1);
+  }
+  processor.processSpecificObjects(objects);
+  process.exit(0);
+}
+
+
 processor.doDownload = process.argv.includes('download');
 processor.doSprites = processor.doDownload || process.argv.includes('sprites');
 processor.doSounds = processor.doDownload || process.argv.includes('sounds');

process/src/GameData.ts

@@ -176,6 +176,59 @@ class GameData {
     if (!fs.existsSync(path)) fs.mkdirSync(path);
   }
 
+  importSpecificObjects(ids: string[]): void {
+    this.eachFileContent("objects", ".txt", (content, _filename) => {
+      const object = new GameObject(content);
+      // console.log("object = ", object ? object?.id : "NULL");
+      if (object.id && ids.includes(object.id)) {
+        this.objects[object.id] = object;
+      }
+    });
+  }
+
+  convertSpecificSpriteImages(): void {
+    const spriteIds :string[] = [];
+
+    // Collect all sprite IDs from the objects
+    for (let id in this.objects) {
+      const object = this.objects[id];
+      if (object.data.sprites) {
+        for (let i = 0; i < object.data.sprites.length; i++) {
+          if (!spriteIds.includes(object.data.sprites[i].id)) {
+            spriteIds.push(object.data.sprites[i].id);
+          }
+        }
+      }
+    }
+
+    console.log("Converting " + spriteIds.length + " sprites for " + Object.keys(this.objects).length + " objects");
+
+    const dir = this.dataDir + "/sprites";
+    for (let i = 0; i < spriteIds.length; i++) {
+      const spriteId = spriteIds[i];
+      const tgaFile = `${dir}/${spriteId}.tga`;
+      const txtFile = `${dir}/${spriteId}.txt`;
+
+      if (!fs.existsSync(tgaFile)) {
+        console.error(`Error: Missing TGA file for sprite ID ${spriteId}`);
+        continue;
+      }
+
+      if (!fs.existsSync(txtFile)) {
+        console.error(`Error: Missing TXT file for sprite ID ${spriteId}`);
+        continue;
+      }
+
+      const outPath = this.staticDir + `/sprites/sprite_${spriteId}.png`;
+      spawnSync("convert", [tgaFile, outPath]);
+    }
+  }
+
+  processSpecificSprites(): void {
+    const processor = new SpriteProcessor(this.dataDir + "/sprites", this.staticDir + "/sprites");
+    processor.process(this.objects);
+  }
+
   // Allow any so we can save any object/array/value we want
   saveJSON(path: string, data: any): void {
     const minPath = this.staticDir + "/" + path;

process/src/GameObject.ts

@@ -116,7 +116,6 @@ class GameObject {
      || data.includes("invisHolding")
      || data.includes("invisCont")
      || data.includes("spritesDrawnBehind")
-     || data.includes("spritesAdditiveBlend")
      || data.includes("ignoredCont")
     ) {
       return true;

process/src/MainProcessor.ts

@@ -27,7 +27,29 @@ class MainProcessor {
     return process.env.ONETECH_PROCESS_GIT_URL || "https://github.com/twohoursonelife/OneLifeData7.git";
   }
 
-  process(version: ChangeLogVersion): ChangeLogVersion {
+  processSpecificObjects(ids: string[]): void {
+    const gameData = new GameData(this.processDir, this.dataDir(), this.staticDir(false));
+    console.time("Processing specific objects took");
+
+    console.log("\nImporting specific objects...");
+    console.time("Importing specific objects took");
+    gameData.importSpecificObjects(ids);
+    console.timeEnd("Importing specific objects took");
+
+    console.log("\nConverting specific sprite images...");
+    console.time("Converting specific sprite images took");
+    gameData.convertSpecificSpriteImages();
+    console.timeEnd("Converting specific sprite images took");
+
+    console.log("\nProcessing specific sprites...");
+    console.time("Processing specific sprites took");
+    gameData.processSpecificSprites();
+    console.timeEnd("Processing specific sprites took");
+
+    console.timeEnd("Processing specific objects took");
+  }
+
+  process(version: ChangeLogVersion | null): ChangeLogVersion {
     // double-equals used to cover undefined case too.
     const gameData = new GameData(this.processDir, this.dataDir(), this.staticDir(version == null));
     console.time("Processing took");

process/src/Sprite.ts

@@ -26,7 +26,6 @@ class Sprite {
   parent: number;
   invisCont: number;
   spritesDrawnBehind: number[];
-  spritesAdditiveBlend: number[];
   ignoredCont: number[];
 
   constructor(lines: string[], index: number, object: GameObject) {
@@ -88,8 +87,6 @@ class Sprite {
       this.invisCont = parseInt(values[0]);
     } else if (attribute === "spritesDrawnBehind") {
       this.spritesDrawnBehind = values.map(v => parseInt(v));
-    } else if (attribute === "spritesAdditiveBlend") {
-      this.spritesAdditiveBlend = values.map(v => parseInt(v));
     } else if (attribute === "ignoredCont") {
       this.ignoredCont = values.map(v => parseInt(v));
     } else {