diff --git a/package-lock.json b/package-lock.json index 501caab..d9f5392 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,11 +8,13 @@ "name": "hammer", "version": "0.0.0", "dependencies": { + "pako": "^2.1.0", "react": "^19.1.0", "react-dom": "^19.1.0" }, "devDependencies": { "@eslint/js": "^9.30.1", + "@types/pako": "^2.0.3", "@types/react": "^19.1.8", "@types/react-dom": "^19.1.6", "@vitejs/plugin-react": "^4.6.0", @@ -1406,6 +1408,13 @@ "dev": true, "license": "MIT" }, + "node_modules/@types/pako": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/@types/pako/-/pako-2.0.3.tgz", + "integrity": "sha512-bq0hMV9opAcrmE0Byyo0fY3Ew4tgOevJmQ9grUhpXQhYfyLJ1Kqg3P33JT5fdbT2AjeAjR51zqqVjAL/HMkx7Q==", + "dev": true, + "license": "MIT" + }, "node_modules/@types/react": { "version": "19.1.9", "resolved": "https://registry.npmjs.org/@types/react/-/react-19.1.9.tgz", @@ -2745,6 +2754,12 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/pako": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/pako/-/pako-2.1.0.tgz", + "integrity": "sha512-w+eufiZ1WuJYgPXbV/PO3NCMEc3xqylkKHzp8bxp1uW4qaSNQUkwmLLEc3kKsfz8lpV1F8Ht3U1Cm+9Srog2ug==", + "license": "(MIT AND Zlib)" + }, "node_modules/parent-module": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz", diff --git a/package.json b/package.json index b2460c8..f93de01 100644 --- a/package.json +++ b/package.json @@ -10,11 +10,13 @@ "preview": "vite preview" }, "dependencies": { + "pako": "^2.1.0", "react": "^19.1.0", "react-dom": "^19.1.0" }, "devDependencies": { "@eslint/js": "^9.30.1", + "@types/pako": "^2.0.3", "@types/react": "^19.1.8", "@types/react-dom": "^19.1.6", "@vitejs/plugin-react": "^4.6.0", diff --git a/src/App.tsx b/src/App.tsx index bf4ef12..384762c 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,5 +1,6 @@ import { useEffect, useRef } from "react" import { Hammer } from "./classes/Hammer"; +import pako from "pako"; function App() { @@ -57,17 +58,20 @@ function App() { }; try { let reader = new FileReader(); - reader.readAsText(files[0], "UTF-8"); + reader.readAsArrayBuffer(files[0]); reader.onload = (evt) => { if (evt.target) { - const data = JSON.parse(evt.target.result as string); + // @ts-expect-error + const uncompressed_data = pako.inflate(evt.target.result, {to: "string"}); + console.log(uncompressed_data) + const data = JSON.parse(uncompressed_data as string); if (hammerRef.current) { const tl = new Image(); tl.src = data.tilesheet; tl.onload = () => { if (hammerRef.current) { hammerRef.current.setTileSheet(tl); - hammerRef.current.tileMap = data.map; + hammerRef.current.heditor.tileMap = data.map; } }; diff --git a/src/classes/Hammer.ts b/src/classes/Hammer.ts index 5c8a402..ed9e439 100644 --- a/src/classes/Hammer.ts +++ b/src/classes/Hammer.ts @@ -7,7 +7,7 @@ import { EventsManager } from "./EventManager"; import { HammerConsole } from "./HammerConsole"; import { HammerLoader } from "./HammerLoader"; import { Tile } from "./Tile"; - +import pako from "pako"; export class Hammer { canvas: HTMLCanvasElement | null = null; @@ -72,7 +72,8 @@ export class Hammer { if (this.tilesheet == null) return this.hconsole.push("Tilesheet not exist !", "ERROR"); const tilesheet_string = ImageToString(this.tilesheet); if (tilesheet_string) - DownloadTextFile(JSON.stringify({ tilesheet: tilesheet_string, map: this.heditor.tileMap }), "my_map.tmpx"); + // @ts-expect-error + DownloadTextFile(pako.deflate(JSON.stringify({ tilesheet: tilesheet_string, map: this.heditor.tileMap })), "my_map.tmpx"); else return this.hconsole.push("An error has occurred !", "ERROR"); } @@ -120,8 +121,6 @@ export class Hammer { } async setTileSheet(img: HTMLImageElement) { - // ? Save le tilesheet - this.tilesheet = img; // ? desactiver le bouton pour add des ts if (this.helements.elements.button_set_tilesheet) @@ -132,6 +131,9 @@ export class Hammer { // ? Reset l'ancien ts this.resetTiles(); + // ? Save le tilesheet + this.tilesheet = img; + // ? Recup le nombre const tilesMax = Math.floor(img.width / 16) * Math.floor(img.height / 16); this.hloader.loadingMax = tilesMax;