refactor: sprite gen polish

package-lock.json

@@ -51,6 +51,7 @@
         "eslint-plugin-jsx-a11y": "^6.7.1",
         "eslint-plugin-react": "^7.33.2",
         "eslint-plugin-react-hooks": "^4.6.0",
+        "image-size": "^1.1.1",
         "storybook": "^8.1.6",
         "vite": "^5.1.0",
         "vitest": "^1.6.0"
@@ -11355,6 +11356,21 @@
         "node": ">= 4"
       }
     },
+    "node_modules/image-size": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/image-size/-/image-size-1.1.1.tgz",
+      "integrity": "sha512-541xKlUw6jr/6gGuk92F+mYM5zaFAc5ahphvkqvNe2bQ6gVBkd6bfrmVJ2t4KDAfikAYZyIqTnktX3i6/aQDrQ==",
+      "dev": true,
+      "dependencies": {
+        "queue": "6.0.2"
+      },
+      "bin": {
+        "image-size": "bin/image-size.js"
+      },
+      "engines": {
+        "node": ">=16.x"
+      }
+    },
     "node_modules/import-fresh": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
@@ -15196,6 +15212,15 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/queue": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/queue/-/queue-6.0.2.tgz",
+      "integrity": "sha512-iHZWu+q3IdFZFX36ro/lKBkSvfkztY5Y7HMiPlOUjhupPcG2JMfst2KKEpu5XndviX/3UhFbRngUPNKtgvtZiA==",
+      "dev": true,
+      "dependencies": {
+        "inherits": "~2.0.3"
+      }
+    },
     "node_modules/queue-microtask": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",

package.json

@@ -58,6 +58,7 @@
     "eslint-plugin-jsx-a11y": "^6.7.1",
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
+    "image-size": "^1.1.1",
     "storybook": "^8.1.6",
     "vite": "^5.1.0",
     "vitest": "^1.6.0"

public/assets/tileset.js

@@ -6,16 +6,25 @@ import {basename, dirname, extname, join} from 'node:path';
 import imageSize from 'image-size';
 
 const tileset = process.argv[2];
-const w = parseInt(process.argv[3]);
-const h = parseInt(process.argv[4]);
+let w = parseInt(process.argv[3]);
+let h = parseInt(process.argv[4]);
 
 const {width, height} = imageSize(tileset);
 
+if (0 === w) {
+  w = width;
+}
+if (0 === h) {
+  h = height;
+}
+
+const total = (width / w) * (height / h);
+
 const json = {
   frames: {},
   meta: {
     format: 'RGBA8888',
-    image: tileset,
+    image: ['.', basename(tileset)].join('/'),
     scale: 1,
     size: {w: width, h: height},
   },
@@ -26,7 +35,7 @@ const extlessPath = join(dirname(tileset), basename(tileset, extname(tileset)));
 let i = 0;
 for (let y = 0; y < height; y += h) {
   for (let x = 0; x < width; x += w) {
-    json.frames[join(extlessPath, `${i++}`)] = {
+    json.frames[1 === total ? '' : join(extlessPath, `${i++}`)] = {
       frame: {x, y, w, h},
       spriteSourceSize: {x: 0, y: 0, w, h},
       sourceSize: {w, h},