First Commit

src/App.tsx

@@ -0,0 +1,167 @@
+import { useEffect, useRef } from "react"
+import { Hammer } from "./classes/Hammer";
+
+function App() {
+
+    // ? elements
+    // * Canvas
+    const canvas = useRef(null);
+
+    // * Buttons
+    const button_set_tilesheet = useRef(null);
+    const button_import_map = useRef(null);
+
+    // * Divs
+    const div_progress_bar = useRef(null);
+    const div_progress = useRef(null);
+    const div_view_tiles = useRef(null);
+
+    // * Input (a part)
+    const inputFileTilesheet = useRef<HTMLInputElement>(null);
+    const inputFileMap = useRef<HTMLInputElement>(null);
+
+    // ? hammer
+    const hammerRef = useRef<Hammer | null>(null);
+
+    useEffect(() => {
+        hammerRef.current = new Hammer();
+        hammerRef.current.helements.setElement("canvas", canvas.current);
+        hammerRef.current.helements.setElement("button_set_tilesheet", button_set_tilesheet.current);
+        hammerRef.current.helements.setElement("button_import_map", button_import_map.current);
+        hammerRef.current.helements.setElement("div_progress_bar", div_progress_bar.current);
+        hammerRef.current.helements.setElement("div_progress", div_progress.current);
+        hammerRef.current.helements.setElement("div_view_tiles", div_view_tiles.current);
+        return () => {
+            hammerRef.current?.hevent.destroy();
+        }
+    }, []);
+
+    // ? functions
+    const handleLoadTilesheet = () => {
+        if (hammerRef.current != null) {
+            const files = inputFileTilesheet.current?.files;
+            if (files && files?.length > 0) {
+                hammerRef.current.loadTileSheet(files[0]);
+            }
+        }
+    }
+    const handleLoadMap = async () => {
+        if (hammerRef.current != null) {
+            const files = inputFileMap.current?.files;
+            if (files && files.length > 0) {
+                hammerRef.current.hconsole.push("Importing the current map...");
+                // ? Verif du format
+                let filenameSplit = files[0].name.split(".");
+                if (!["tmpx"].includes(filenameSplit[filenameSplit.length - 1])) {
+                    return hammerRef.current.hconsole.push("File format invalid !", "ERROR")
+                };
+                try {
+                    let reader = new FileReader();
+                    reader.readAsText(files[0], "UTF-8");
+                    reader.onload = (evt) => {
+                        if (evt.target) {
+                            const data = JSON.parse(evt.target.result 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;
+                                    }
+                                };
+
+                            }
+                        }
+                    }
+                } catch (error) {
+                    hammerRef.current.hconsole.push("Error importing map.", "ERROR");
+                }
+            }
+        }
+    }
+
+    return (
+        <>
+            <div ref={div_progress_bar} className="progress-bar nodisplay">
+                <div ref={div_progress} className="progress"></div>
+            </div>
+
+
+            <div className="div-hammer-container">
+                <div className="tools">
+
+                    <button onClick={() => inputFileMap.current?.click()} ref={button_import_map}><img src="/src/assets/images/import.png" alt="import" />
+                        <span>Import Map (I)</span>
+                        <input type="file" id="inputFileMap" ref={inputFileMap} onChange={handleLoadMap} className="nodisplay" accept=".tmpx" />
+                    </button>
+
+                    <button onClick={() => { hammerRef.current && hammerRef.current.mapToJson() }}>
+                        <img src="/src/assets/images/save.png" alt="save" />
+                        <span>Save local copy (ctrl + s)</span>
+                    </button>
+
+                    <hr />
+
+                    <button onClick={() => inputFileTilesheet.current?.click()} ref={button_set_tilesheet}>
+                        <img src="/src/assets/images/palet.png" alt="palet" />
+                        <span>Upload Tilesheet (U)</span>
+                        <input type="file" id="inputFileTS" ref={inputFileTilesheet} onChange={handleLoadTilesheet} className="nodisplay"  accept="image/png, image/jpg, image/jpeg" />
+                    </button>
+
+                    <button onClick={() => { if (hammerRef.current) { hammerRef.current.tool = "draw"; } }}>
+                        <img src="/src/assets/images/pen.png" alt="pen" />
+                        <span>Draw (D)</span>
+                    </button>
+
+                    <button onClick={() => { if (hammerRef.current) { hammerRef.current.tool = "eraser"; } }}>
+                        <img src="/src/assets/images/erase.png" alt="erase" />
+                        <span>Erase (E)</span>
+                    </button>
+
+                    <button>
+                        <img src="/src/assets/images/bucket.png" alt="bucket" />
+                        <span>Bucket (B)</span>
+                    </button>
+
+                    <button>
+                        <img src="/src/assets/images/rect.png" alt="rect" />
+                        <span>Rectangle (R)</span>
+                    </button>
+
+                    <button>
+                        <img src="/src/assets/images/measure.png" alt="measure" />
+                        <span>Measure (M)</span>
+                    </button>
+
+                    <hr />
+
+                    <button>
+                        <img src="/src/assets/images/center.png" alt="center" onClick={() => hammerRef.current && hammerRef.current.centerView()} />
+                        <span>Center view (C)</span>
+                    </button>
+
+                </div>
+                <div className="div-container-map">
+                    <div className="container-tiles">
+                        <div ref={div_view_tiles} className="div-scroll-tiles">
+
+                        </div>
+                    </div>
+                    <div className="div-container-view">
+                        <div className="div-canvas-container">
+                            <canvas ref={canvas} id="canvasHammer"></canvas>
+                        </div>
+
+                        <div className="div-console" contentEditable="true">
+                        </div>
+                    </div>
+                </div>
+
+            </div>
+
+        </>
+    )
+}
+
+export default App

src/classes/CanvasManager.ts

@@ -0,0 +1,176 @@
+import { FloorToMultiple } from "../utils/math";
+import type { EditorManager } from "./EditorManager";
+import type { EventsManager } from "./EventManager";
+import type { HammerConsole } from "./HammerConsole";
+import type { Tile } from "./Tile";
+
+export class CanvasManager {
+
+    canvas: HTMLCanvasElement | null = null;
+    hevent: EventsManager;
+    hconsole: HammerConsole;
+    heditor: EditorManager;
+    zoom: number = 0.5;
+
+    canvasOffset = { x: 0, y: 0 };
+    CanvasRectSelectPosition: { x: number, y: number } | null = null
+
+    realMousePosition: { x: number, y: number } | null = null;
+    mousePositionMap: { x: number, y: number } | null = null;
+
+    canvasMoveClick: boolean = false;
+
+    constructor(hevent: EventsManager, hconsole : HammerConsole, heditor : EditorManager) {
+        this.hevent = hevent;
+        this.hconsole = hconsole;
+        this.heditor = heditor;
+    }
+
+    setCanvas(canvas: HTMLCanvasElement) {
+        this.canvas = canvas;
+        this.hevent.addEvent(this.canvas, "mouseleave", () => this.CanvasRectSelectPosition = null);
+        this.hevent.addEvent(this.canvas, "mousemove", (e) => {
+            this.updateCursor(e.clientX, e.clientY);
+            let pos = { x: e.clientX, y: e.clientY };
+            if (this.realMousePosition != null && this.canvasMoveClick) {
+                this.canvasOffset.x += Math.round((pos.x - this.realMousePosition.x) * this.zoom);
+                this.canvasOffset.y += Math.round((pos.y - this.realMousePosition.y) * this.zoom);
+            }
+            this.realMousePosition = { x: pos.x, y: pos.y };
+        });
+
+        // ? Gerer le zoom
+        this.hevent.addEvent(this.canvas, "wheel", (e) => {
+            e.preventDefault();
+            const zoomIntensity = 0.009  ;
+            const delta = e.deltaY < 0 ? 1 - zoomIntensity : 1 + zoomIntensity;
+            this.zoom *= delta;
+            console.log(this.zoom);
+            if (this.zoom > 1.5) {
+                this.zoom = 1.5;
+            }
+            if (this.zoom < 0.05) {
+                this.zoom = 0.05;
+            }
+            this.updateCursor(e.clientX, e.clientY);
+        });
+
+        // ? Activer le mouvement du monde
+        this.hevent.addEvent(this.canvas, "mousedown", (e) => this.canvasMoveClick = e.button == 2 && true);
+        // ? Desactiver le mouvement du monde
+        this.hevent.addEvent(document.body, "mouseup", (e) => this.canvasMoveClick = e.button == 2 && false);
+        // ? Gestion des clicks pour les tools
+        this.hevent.addEvent(this.canvas, "click", () => {
+            if (this.heditor.tool == "draw") {
+                const tilespos = this.heditor.tileMap.filter((t) => (t.x == this.mousePositionMap?.x && t.y == this.mousePositionMap?.y));
+                if (this.mousePositionMap && tilespos.length < 2) {
+                    if (tilespos.length == 1 && tilespos[0].tile == this.heditor.selected_tile) return;
+                    this.heditor.tileMap.push({ tile: this.heditor.selected_tile, x: this.mousePositionMap.x, y: this.mousePositionMap.y });
+                    this.hconsole.push(`Tile (${this.mousePositionMap.x / 16}, ${this.mousePositionMap.y / 16}) placed !`);
+                }
+            } else if (this.heditor.tool == "eraser") {
+                this.heditor.tileMap = this.heditor.tileMap.filter((t) => !(t.x == this.mousePositionMap?.x && t.y == this.mousePositionMap?.y));
+                if (this.mousePositionMap) {
+                    this.hconsole.push(`Tile (${this.mousePositionMap.x / 16}, ${this.mousePositionMap.y / 16}) deleted !`);
+                }
+            }
+        });
+    }
+
+    updateCursor(x: number, y: number) {
+        if (this.canvas) {
+            const pos = {
+                x: ((x - this.canvas.getClientRects()[0].left) * this.zoom) - (this.canvasOffset.x % 16),
+                y: ((y - this.canvas.getClientRects()[0].top) * this.zoom) - (this.canvasOffset.y % 16)
+            }
+
+            this.CanvasRectSelectPosition = FloorToMultiple(pos, 16, 16);
+
+            const pos1 = {
+                x: ((x - this.canvas.getClientRects()[0].left) * this.zoom) - this.canvasOffset.x,
+                y: ((y - this.canvas.getClientRects()[0].top) * this.zoom) - this.canvasOffset.y
+            }
+
+            this.mousePositionMap = FloorToMultiple(pos1, 16, 16);
+        }
+    }
+
+    update() {
+        if (this.canvas) {
+            this.canvas.style.cursor = this.canvasMoveClick ? "grab" : ""
+
+            const width = this.canvas.getClientRects()[0].width;
+            const height = this.canvas.getClientRects()[0].height;
+            this.canvas.width = width * this.zoom;
+            this.canvas.height = height * this.zoom;
+            this.canvas.style.width = `${width}px`;
+            this.canvas.style.height = `${height}px`;
+        }
+    }
+
+    draw(tiles: Tile[], tileMap: { x: number, y: number, tile: number }[], emptyTile: Tile) {
+        if (this.canvas) {
+
+            const ctx = this.canvas.getContext("2d");
+            const width = this.canvas.getClientRects()[0].width;
+            const height = this.canvas.getClientRects()[0].height;
+
+            if (ctx) {
+                // ? Reset le canvas
+                ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
+
+                // ? afficher le centre de la map
+                ctx.strokeStyle = "white";
+                ctx.globalAlpha = 0.3;
+                ctx.beginPath();
+                ctx.moveTo(0 + this.canvasOffset.x, 0 + this.canvasOffset.y - 32);
+                ctx.lineTo(0 + this.canvasOffset.x, 0 + this.canvasOffset.y + 32);
+                ctx.stroke();
+                ctx.moveTo(0 + this.canvasOffset.x - 32, 0 + this.canvasOffset.y);
+                ctx.lineTo(0 + this.canvasOffset.x + 32, 0 + this.canvasOffset.y);
+                ctx.stroke();
+
+                // ? Gestion des tiles  
+                ctx.globalAlpha = 1;
+                // * Exemple :  
+                // if (this.tiles.length > 0) {
+                //     if (this.emptyTile && this.emptyTile.tile) {
+                //         ctx.drawImage(this.emptyTile.tile, (16 * 0) + this.canvasOffset.x, (16 * 0) + this.canvasOffset.y, 16, 16);
+                //     }
+                // }
+                if (tiles.length !== 0) {
+                    tileMap.forEach((t) => {
+                        if (t.x + this.canvasOffset.x >= -16 && t.x + this.canvasOffset.x <= width * this.zoom && t.y + this.canvasOffset.y >= -16 && t.y + this.canvasOffset.y <= height * this.zoom) {
+                            if (tiles.length >= t.tile + 1) {
+                                const ti = tiles[t.tile].tile;
+                                if (ti) {
+                                    ctx.drawImage(ti, t.x + this.canvasOffset.x, t.y + this.canvasOffset.y, 16, 16);
+                                }
+                            } else {
+                                if (emptyTile && emptyTile.tile) {
+                                    ctx.drawImage(emptyTile.tile, t.x + this.canvasOffset.x, t.y + this.canvasOffset.y, 16, 16);
+                                }
+                            }
+                        }
+                    });
+                }
+
+                // ? Afficher la position du curseur :
+                if (this.CanvasRectSelectPosition != null) {
+                    ctx.fillStyle = "white";
+                    ctx.globalAlpha = 0.2
+                    ctx.fillRect(this.CanvasRectSelectPosition.x + (this.canvasOffset.x % 16), this.CanvasRectSelectPosition.y + (this.canvasOffset.y % 16), 16, 16);
+                }
+            }
+        }
+    }
+
+    centerView() {
+        if (this.canvas) {
+            const width = this.canvas.getClientRects()[0].width;
+            const height = this.canvas.getClientRects()[0].height;
+            this.canvasOffset.x = Math.round(width / 2 * this.zoom);
+            this.canvasOffset.y = Math.round(height / 2 * this.zoom);
+        }
+    }
+}

src/classes/EditorManager.ts

@@ -0,0 +1,6 @@
+export class EditorManager {
+    tool : "draw" | "eraser" = "draw";
+    selected_tile: number = 0;
+    displayImageEaster: boolean = false;
+    tileMap: { x: number, y: number, tile: number }[] = [];
+}

src/classes/ElementManager.ts

@@ -0,0 +1,32 @@
+import type { EventsManager } from "./EventManager";
+
+export class ElementManager {
+    loaded = false;
+    elements: {
+        canvas : HTMLCanvasElement | null;
+
+        button_set_tilesheet: HTMLButtonElement | null;
+        button_import_map: HTMLButtonElement | null;
+
+        div_progress_bar : HTMLDivElement | null;
+        div_progress : HTMLDivElement | null;
+        div_view_tiles: HTMLDivElement | null;
+    } = {
+        canvas: null,
+        button_set_tilesheet: null,
+        button_import_map: null,
+        div_progress_bar: null,
+        div_progress: null,
+        div_view_tiles: null,
+    };
+
+    constructor(eventManager: EventsManager) {
+        eventManager.addEvent(document, "DOMContentLoaded", () => {
+            this.loaded = true;
+        });
+    }
+
+    setElement(name: keyof ElementManager["elements"], el: null) {
+        this.elements[name] = el;
+    }
+}

src/classes/EventManager.ts

@@ -0,0 +1,17 @@
+export class EventsManager {
+    events: { target: EventTarget, type: string, handler: EventListenerOrEventListenerObject }[] = [];
+
+    addEvent<K extends keyof DocumentEventMap>(target: EventTarget, type: K, handler: (e: DocumentEventMap[K]) => void) {
+
+        // @ts-expect-error
+        this.events.push({ target, type, handler });
+        // @ts-expect-error
+        target.addEventListener(type, handler);
+    }
+
+    destroy() {
+        this.events.forEach((e) => {
+            e.target.removeEventListener(e.type, e.handler);
+        });
+    }
+}

src/classes/Hammer.ts

@@ -0,0 +1,176 @@
+import { DownloadTextFile, IsFilenameFormat } from "../utils/file";
+import { ImageToString, WaitImgByFile } from "../utils/image";
+import { CanvasManager } from "./CanvasManager";
+import { EditorManager } from "./EditorManager";
+import { ElementManager } from "./ElementManager";
+import { EventsManager } from "./EventManager";
+import { HammerConsole } from "./HammerConsole";
+import { HammerLoader } from "./HammerLoader";
+import { Tile } from "./Tile";
+
+
+export class Hammer {
+    canvas: HTMLCanvasElement | null = null;
+    inputTileSheet: HTMLInputElement | null = null;
+
+    tilesheet: HTMLImageElement | null = null;
+    tiles: Tile[] = [];
+    emptyTile: Tile | null = null;
+
+    // * utils
+    hconsole: HammerConsole = new HammerConsole();
+    hevent: EventsManager = new EventsManager();
+    helements: ElementManager = new ElementManager(this.hevent);
+    hloader: HammerLoader = new HammerLoader(this.helements);
+    heditor : EditorManager = new EditorManager();
+    hcanvas: CanvasManager = new CanvasManager(this.hevent, this.hconsole, this.heditor);
+
+    constructor() {
+        // ? Desactiver le context menu
+        this.hevent.addEvent(document, "contextmenu", (e) => e.preventDefault());
+
+        // ? Raccourcis clavier
+        this.hevent.addEvent(document, "keydown", (e: KeyboardEvent) => {
+            const keypress = e.key;
+            if (keypress === "c") {
+                e.preventDefault();
+                this.hcanvas.centerView();
+            } else if (keypress === "u") {
+                e.preventDefault();
+                this.helements.elements.button_set_tilesheet?.click();
+            } else if (keypress === "e") {
+                e.preventDefault();
+                this.heditor.tool = "eraser";
+            } else if (keypress === "d") {
+                e.preventDefault();
+                this.heditor.tool = "draw";
+            } else if (keypress === "F9") {
+                e.preventDefault();
+                this.heditor.displayImageEaster = !this.heditor.displayImageEaster;
+                this.hconsole.push("It's a Easter egg! Value : " + this.heditor.displayImageEaster, "DEBUG");
+            } else if (e.ctrlKey && keypress == "s") {
+                e.preventDefault();
+                this.mapToJson();
+            }
+        });
+
+        // ? Lancer l'affichage du canvas
+        this.resetTiles();
+        this.displayCanvas();
+
+        // ? Load de la tile empty
+        const imgemp = new Image();
+        imgemp.src = "/src/assets/images/missing_texture.png";
+
+        imgemp.onload = async () => {
+            this.emptyTile = new Tile(0, 0, imgemp);
+            await this.emptyTile.loadTile();
+        };
+    }
+
+    mapToJson() {
+        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");
+        else
+            return this.hconsole.push("An error has occurred !", "ERROR");
+    }
+
+
+
+    resetTiles() {
+        if (this.helements.elements.div_view_tiles)
+            this.helements.elements.div_view_tiles.innerHTML = "";
+        this.tiles = [];
+        this.tilesheet = null;
+    }
+
+    async displayCanvas() {
+        if (this.canvas != null && this.emptyTile) {
+            // ? Update le canvas
+            this.hcanvas.update();
+
+            // ? Affichage des datas
+            this.hcanvas.draw(this.tiles, this.heditor.tileMap, this.emptyTile);
+        } else {
+
+            // ? charger le canvas
+            this.canvas = this.helements.elements.canvas;
+            if (this.canvas != null) {
+                this.hcanvas.setCanvas(this.canvas);
+                this.hcanvas.centerView();
+            }
+        }
+
+        // ? Relancer la function
+        requestAnimationFrame(this.displayCanvas.bind(this));
+    }
+
+
+    async loadTileSheet(file: File) {
+        // ? Verif du format
+        if (!IsFilenameFormat(["png", "jpg", "jpeg"], file.name)) {
+            this.hloader.reset();
+            return this.hconsole.push("File format invalid !", "ERROR")
+        };
+
+        // ? Generer une image sur base du fichier
+        await this.setTileSheet(await WaitImgByFile(file));
+    }
+
+    async setTileSheet(img: HTMLImageElement) {
+        // ? Save le tilesheet
+        this.tilesheet = img;
+
+        // ? desactiver le bouton pour add des ts
+        if (this.helements.elements.button_set_tilesheet)
+            this.helements.elements.button_set_tilesheet.disabled = true;
+        if (this.helements.elements.button_import_map)
+            this.helements.elements.button_import_map.disabled = true;
+
+        // ? Reset l'ancien ts
+        this.resetTiles();
+
+        // ? Recup le nombre
+        const tilesMax = Math.floor(img.width / 16) * Math.floor(img.height / 16);
+        this.hloader.loadingMax = tilesMax;
+        this.hloader.setValue(0);
+
+        // ? Loader les tiles
+        let i = 0;
+        for (let x = 0; x < img.width; x += 16) {
+            for (let y = 0; y < img.height; y += 16) {
+                const t = new Tile(x, y, img);
+                await t.loadTile();
+                if (!t.fullyTransparent) {
+                    this.tiles.push(t);
+                    if (this.heditor.displayImageEaster) {
+                        this.heditor.tileMap.push({ tile: this.tiles.length - 1, x, y });
+                    }
+
+                    const tile = t.tile;
+                    if (tile) {
+                        const id = this.tiles.length - 1;
+                        tile.id = "t_" + id;
+                        tile.addEventListener("click", () => {
+                            this.heditor.selected_tile = id;
+                        });
+                        t.tile && this.helements.elements.div_view_tiles?.appendChild(tile);
+                    }
+                }
+                i++;
+                this.hconsole.push("Loading tile (" + i + "/" + tilesMax + ")", "INFO", "LOADER");
+                this.hloader.setValue(i);
+            }
+        }
+
+        // ? Log et remettre tous correctement
+        this.hconsole.push(`TileSheet Loaded ! (${this.tiles.length} tiles)`, "INFO");
+        this.hloader.reset();
+        if (this.helements.elements.button_set_tilesheet)
+            this.helements.elements.button_set_tilesheet.disabled = false;
+        if (this.helements.elements.button_import_map)
+            this.helements.elements.button_import_map.disabled = false;
+    }
+}

src/classes/HammerConsole.ts

@@ -0,0 +1,38 @@
+export class HammerConsole {
+    div: HTMLDivElement | null = null;
+    initialHeight: number = 0;
+    lastP: HTMLParagraphElement | null = null;
+
+    constructor() {
+        this.div = document.querySelector(".div-console");
+        if (this.div) {
+            this.initialHeight = this.div.scrollHeight;
+        }
+    }
+
+    push(text: string, status: "INFO" | "ERROR" | "WARN" | "DEBUG" = "INFO", type: "NORMAL" | "LOADER" = "NORMAL") {
+
+        if (this.div == null) {
+            this.div = document.querySelector(".div-console");
+        }
+
+        let p = this.lastP;
+        if (this.lastP == null || type == "NORMAL") {
+            p = document.createElement("p");
+        } else {
+            p = this.lastP;
+        }
+
+        p.style.color = (
+            status == "INFO" ? 'white' :
+                status == "DEBUG" ? 'blue' :
+                    status == "ERROR" ? 'red' : 'yellow'
+        );
+        p.textContent = `[${status}] ` + text;
+        this.lastP = type == "LOADER" ? p : null;
+        this.div?.appendChild(p);
+        if (this.div) {
+            this.div.scrollTop = this.div.scrollHeight;
+        }
+    }
+}

src/classes/HammerLoader.ts

@@ -0,0 +1,31 @@
+import type { ElementManager } from "./ElementManager";
+
+export class HammerLoader {
+    loadingMax: number = 0;
+    loadingValue: number = 0;
+    elements: ElementManager;
+
+    constructor(elements : ElementManager) {
+        this.elements = elements;
+    }
+
+    setValue(value: number) {
+        this.loadingValue = value;
+        const progress = this.elements.elements.div_progress;
+        const progressValue = this.elements.elements.div_progress_bar;
+        if (progress && progressValue) {
+            progressValue.classList.remove("nodisplay");
+            progress.style.width = ((this.loadingValue / this.loadingMax) * 100) + "%";
+        }
+    }
+
+    reset() {
+        this.loadingValue = 0;
+        const progress = this.elements.elements.div_progress;
+        const progressValue = this.elements.elements.div_progress_bar;
+        if (progress && progressValue) {
+            progressValue.classList.add("nodisplay");
+            progress.style.width = "0%";
+        }
+    }
+}

src/classes/Tile.ts

@@ -0,0 +1,36 @@
+export class Tile {
+    x: number;
+    y: number;
+    tilesheet: HTMLImageElement;
+    tile: HTMLImageElement | null = null;
+    fullyTransparent: boolean = true;
+
+    constructor(x: number, y: number, tilesheet: HTMLImageElement) {
+        this.x = x;
+        this.y = y;
+        this.tilesheet = tilesheet;
+    }
+
+    async loadTile() {
+        const canvas = new OffscreenCanvas(16, 16);
+        const ctx = canvas.getContext("2d");
+
+        ctx?.drawImage(this.tilesheet, this.x, this.y, 16, 16, 0, 0, 16, 16);
+        const img = document.createElement("img");
+        const blob = await canvas.convertToBlob();
+        img.src = URL.createObjectURL(blob);
+        // img.loading = "eager";
+
+        this.tile = img;
+
+        if (ctx) {
+            const data = ctx.getImageData(0, 0, 16, 16).data;
+            for (let i = 3; i < data.length; i += 4) {
+                if (data[i] !== 0) {
+                    this.fullyTransparent = false;
+                    break;
+                }
+            }
+        }
+    }
+}

src/index.css

@@ -0,0 +1,287 @@
+* {
+    margin: 0;
+    padding: 0;
+    text-decoration: none;
+}
+
+body {
+    background: black;
+    font-family: Arial, Helvetica, sans-serif;
+}
+
+.div-hammer-container {
+    display: flex;
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    flex-direction: column;
+    gap: 0;
+}
+
+
+
+.tools {
+    position: relative;
+    background: #2e2e2e;
+    padding: 8px;
+
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 8px;
+    z-index: 2;
+}
+
+.tools button {
+    height: 100%;
+    border: none;
+    outline: none;
+    padding: 4px;
+    z-index: 2;
+    cursor: pointer;
+    width: 42px;
+    height: 42px;
+    position: relative;
+    background: #575757;
+}
+
+.tools button:hover {
+    background: #555555;
+    box-shadow: inset 0px 0px 0px 2.5px #6b6b6b;
+}
+.tools button.select {
+    background: #868686;
+    box-shadow: inset 0px 0px 0px 2.5px #353535;
+}
+.tools button img {
+    width: 32px;
+    height: 32px;
+    image-rendering: pixelated;
+}
+
+.tools button span {
+    display: none;
+    position: absolute;
+    top: 50px;
+    left: 0;
+     white-space: nowrap;
+    background: #2b2b2b;
+    padding: 4px;
+    color: #e4e4e4;
+    font-size: 12px;
+}
+
+.tools button:hover span {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    flex-direction: row;
+}
+
+.tools hr {
+    height: 100%;
+    width: 1px;
+    border: none;
+    border-radius: 0;
+    background-color: white;
+}
+
+
+.div-container-map {
+    position: relative;
+    flex-direction: row;
+    display: flex;
+    flex: 1 0 0;
+    gap: 0;
+}
+
+.div-container-map .container-tiles {
+    position: relative;
+    padding: 16px;
+
+    width: calc(350px - 16px * 2);
+    min-width: 350px;
+    background: #222222;
+}
+
+.div-container-map .container-tiles .div-scroll-tiles {
+    width: 100%;
+    height: 500px;
+    position: relative;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    align-items: flex-start;
+    justify-items: flex-start;
+    justify-content: flex-start;
+    align-content: flex-start;
+    overflow: hidden;
+    overflow-y: auto;
+}
+
+.div-container-map .container-tiles .div-scroll-tiles:empty::after {
+    content: "Add a tileSheet to your scene";
+    position: absolute;
+    color: #777;
+    font-style: italic;
+    padding: 1rem;
+    text-align: center;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+}
+
+body {
+    --sb-track-color: #222222;
+    --sb-thumb-color: #adadad;
+    --sb-size: 14px;
+}
+
+.div-container-map .container-tiles .div-scroll-tiles::-webkit-scrollbar {
+    width: var(--sb-size)
+}
+
+.div-container-map .container-tiles .div-scroll-tiles::-webkit-scrollbar-track {
+    background: var(--sb-track-color);
+    border-radius: 1px;
+}
+
+.div-container-map .container-tiles .div-scroll-tiles::-webkit-scrollbar-thumb {
+    background: var(--sb-thumb-color);
+    border-radius: 1px;
+
+}
+
+@supports not selector(::-webkit-scrollbar) {
+    .div-container-map .container-tiles .div-scroll-tiles {
+        scrollbar-color: var(--sb-thumb-color) var(--sb-track-color);
+    }
+}
+
+.div-container-map .container-tiles .div-scroll-tiles img {
+    width: calc(100% / 5);
+    aspect-ratio: 1 / 1;
+
+    image-rendering: pixelated;
+}
+
+.div-container-map .container-tiles .div-scroll-tiles img:hover {
+    box-shadow: inset 0px 0px 0px 2.5px #6b6b6b;
+    opacity: .8;
+    background: #424242;
+}
+
+.div-container-map .container-tiles .div-scroll-tiles img:active {
+    box-shadow: inset 0px 0px 0px 2.5px #888888;
+    background: #5a5a5a;
+}
+
+.div-container-map .div-container-view {
+    flex: 1 0 0;
+    display: flex;
+    position: relative;
+    flex-direction: column;
+    gap: 0;
+}
+
+canvas {
+    position: relative;
+    image-rendering: pixelated;
+    flex: 1 0 0;
+    background: url(/src/assets/images/bg.png);
+    background-size: 16px;
+    background-repeat: repeat;
+    box-sizing: border-box;
+}
+
+.div-canvas-container {
+    flex: 1 0 0;
+    display: flex;
+}
+
+.div-container-map .div-container-view .div-console {
+    background-color: black;
+    flex: 1 0 0;
+    display: flex;
+    position: relative;
+    flex-direction: column;
+    outline: none;
+    max-height: 350px;
+    overflow: hidden;
+    overflow-y: auto;
+    padding: 8px;
+    color: white;
+}
+
+.div-container-map .div-container-view .div-console img {
+    width: 50px;
+    image-rendering: pixelated;
+}
+
+.div-container-map .div-container-view .div-console:empty::after {
+    content: "Oh no, meow… the catsole is empti~ :3";
+    position: absolute;
+    color: #777;
+    font-style: italic;
+    padding: 1rem;
+    text-align: center;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+}
+
+body {
+    --sb-track-console-color: #000000;
+    --sb-thumb-console-color: rgb(255, 255, 255);
+    --sb-size-console: 14px;
+}
+
+.div-container-map .div-container-view .div-console::-webkit-scrollbar {
+    width: var(--sb-size-console)
+}
+
+.div-container-map .div-container-view .div-console::-webkit-scrollbar-track {
+    background: var(--sb-track-console-color);
+    border-radius: 1px;
+}
+
+.div-container-map .div-container-view .div-console::-webkit-scrollbar-thumb {
+    background: var(--sb-thumb-console-color);
+    border-radius: 1px;
+
+}
+
+.nodisplay {
+    display: none !important;
+}
+
+.progress-bar {
+    position: fixed;
+    pointer-events: none;
+    user-select: none;
+    background-color: rgb(19, 19, 19);
+    width: 100%;
+    height: 25px;
+    left: 0;
+    z-index: 2;
+    bottom: 0;
+}
+
+.progress-bar .progress {
+    width: 0%;
+    height: 100%;
+    position: absolute;
+    left: 0;
+    transition: width 300ms linear;
+    top: 0;
+    background: rgb(114, 114, 255);
+}
+
+button:disabled {
+    cursor: not-allowed;
+    opacity: .5;
+}

src/main.tsx

@@ -0,0 +1,10 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.tsx'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)

src/utils/file.ts

@@ -0,0 +1,16 @@
+export function DownloadTextFile(content : string, name : string) {
+    const blob = new Blob([content], { type: "application/json" });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = name;
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    URL.revokeObjectURL(url);
+}
+
+export function IsFilenameFormat(format : string[], filename : string) {
+    const filenameSplit = filename.split(".");
+    return format.includes(filenameSplit[filenameSplit.length - 1]);
+}

src/utils/image.ts

@@ -0,0 +1,21 @@
+export function WaitImgByFile(file : File) : Promise < HTMLImageElement > {
+    return new Promise((resolv, reject) => {
+        const img = new Image();
+        img.src = URL.createObjectURL(file);
+        img.onload = () => resolv(img);
+        img.onerror = reject;
+    });
+}
+
+export function ImageToString(img : HTMLImageElement) {
+    const canvas = document.createElement("canvas");
+    canvas.width = img.width;
+    canvas.height = img.height;
+    const ctx = canvas.getContext("2d");
+    if(!ctx) 
+        return null;
+
+    ctx.drawImage(img, 0, 0);
+
+    return canvas.toDataURL();
+}

src/utils/math.ts

@@ -0,0 +1,6 @@
+export function FloorToMultiple(vec2: { x: number, y: number }, multipleX = 16, multipleY = 16) {
+    return {
+        x: Math.floor(vec2.x / multipleX) * multipleX,
+        y: Math.floor(vec2.y / multipleY) * multipleY
+    };
+}

src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />