First Commit

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;
+                }
+            }
+        }
+    }
+}