@shadowdara/webgameengine 1.0.0

package/README.md

@@ -0,0 +1,127 @@
+# WebGameEngine 🎮
+
+**(Currently trying to make this into a lib)**
+
+**Use `bun tools/build.ts`**
+
+A lightweight, TypeScript-first web game engine framework for building 2D games.
+
+## Features
+
+- 🎯 Simple game loop management
+- 🎨 Rendering system with text and sprite support
+- ⌨️ Input handling (keyboard & mouse)
+- 📦 TypeScript support out of the box
+- 🛠️ Build tools included
+- 📝 Logging utilities
+- 💾 Save/Load system
+
+## Installation
+
+```bash
+npm install @yourusername/webgameengine
+```
+
+Or use directly from source:
+
+```bash
+bun install
+bun run dev
+```
+
+## Quick Start
+
+### Basic Game Loop
+
+```typescript
+import { startEngine, setupInput, dlog, renderText } from '@yourusername/webgameengine';
+
+const canvas = document.getElementById('gameCanvas') as HTMLCanvasElement;
+const ctx = canvas.getContext('2d')!;
+
+setupInput(canvas, 800, 600);
+
+function init() {
+  dlog('🎮 Game initialized!');
+}
+
+function gameLoop(dt: number) {
+  // Clear canvas
+  ctx.fillStyle = 'black';
+  ctx.fillRect(0, 0, canvas.width, canvas.height);
+  
+  // Your game logic here
+  renderText(ctx, `FPS: ${(1 / dt).toFixed(0)}`, 10, 20);
+}
+
+startEngine(init, gameLoop);
+```
+
+## Development & Building
+
+### Using Bun (local development)
+
+```bash
+bun tools/build.ts                    # Build main game
+bun tools/build.ts --entry main2      # Build specific entry
+bun tools/build.ts --release          # Production build
+
+
+```
+
+### Configuration
+
+Edit `project.ts` to configure your game:
+
+```typescript
+import { defineConfig } from './project';
+
+export function defineConfig() {
+  return {
+    entryname: 'main.ts',
+    outdir: 'dist',
+    // ... other config
+  };
+}
+```
+
+or
+
+```typescript
+// Project File for the Game
+
+import { type buildconfig, new_buildconfig } from "./engine/build/buildconfig";
+
+export function defineConfig(): buildconfig {
+    let config: buildconfig = new_buildconfig();
+    return config;
+}
+```
+
+## API Reference
+
+### Core Engine
+- `startEngine(init, gameLoop)` - Initialize game loop
+
+### Rendering
+- `renderText(ctx, text, x, y, color?, font?)` - Render text
+- `renderBitmapText()` - Render bitmap font text
+
+### Input System
+- `setupInput(canvas, width?, height?)` - Initialize input
+- `getKeyState(key)` - Check key state
+- Mouse state available via input module
+
+### Types
+- `Vector2D` / `Vector3D` - Vector mathematics
+- `Color` - Color management
+- `Rect` - Rectangle collision
+- Math utilities for game logic
+
+### Utilities
+- `dlog()` - Development logging
+- `startEngine()` - Manage game loop
+
+## License
+
+MIT

package/dist/build/buildconfig.d.ts

@@ -0,0 +1,8 @@
+export interface buildconfig {
+    htmlhead: string;
+    title: string;
+    show_fullscreen_button: boolean;
+    entryname: string;
+    outdir: string;
+}
+export declare function new_buildconfig(): buildconfig;

package/dist/build/buildconfig.js

@@ -0,0 +1,10 @@
+// Generate the HTML File
+export function new_buildconfig() {
+    return {
+        htmlhead: "",
+        title: "My new Game",
+        show_fullscreen_button: true,
+        entryname: "main",
+        outdir: "dist",
+    };
+}

package/dist/build/buildhelper.d.ts

@@ -0,0 +1,3 @@
+export declare const flog: (...args: any[]) => void;
+export declare function copyFolder(src: string, dest: string): Promise<void>;
+export declare function getContentType(path: string): "application/javascript" | "application/typescript" | "text/html" | "text/css" | "image/png" | "text/plain";

package/dist/build/buildhelper.js

@@ -0,0 +1,41 @@
+import { readdirSync, mkdirSync, promises as fsPromises } from "fs";
+import { join } from "path";
+export const flog = (...args) => {
+    const now = new Date();
+    const time = `[${now.getHours().toString().padStart(2, "0")}:` +
+        `${now.getMinutes().toString().padStart(2, "0")}:` +
+        `${now.getSeconds().toString().padStart(2, "0")}.` +
+        `${now.getMilliseconds().toString().padStart(3, "0")}]`;
+    console.log(time, ...args);
+};
+export async function copyFolder(src, dest) {
+    // Zielordner erstellen
+    mkdirSync(dest, { recursive: true });
+    const entries = readdirSync(src, { withFileTypes: true });
+    for (const entry of entries) {
+        const srcPath = join(src, entry.name);
+        const destPath = join(dest, entry.name);
+        if (entry.isDirectory()) {
+            await copyFolder(srcPath, destPath);
+        }
+        else if (entry.isFile()) {
+            // Datei mit Node.js schreiben
+            const data = await fsPromises.readFile(srcPath);
+            await fsPromises.writeFile(destPath, data);
+        }
+    }
+}
+// === Helper ===
+export function getContentType(path) {
+    if (path.endsWith(".js"))
+        return "application/javascript";
+    if (path.endsWith(".ts"))
+        return "application/typescript";
+    if (path.endsWith(".html"))
+        return "text/html";
+    if (path.endsWith(".css"))
+        return "text/css";
+    if (path.endsWith(".png"))
+        return "image/png";
+    return "text/plain";
+}

package/dist/build/exporthtml.d.ts

@@ -0,0 +1,2 @@
+import type { buildconfig } from "./buildconfig.js";
+export declare function GetDefaultHTML(config: buildconfig): string;

package/dist/build/exporthtml.js

@@ -0,0 +1,58 @@
+// Function to create the Export HTML for the Build
+export function GetDefaultHTML(config) {
+    let fullscreenbutton = "";
+    let fullscreenBtn = "";
+    if (config.show_fullscreen_button) {
+        fullscreenbutton = `#fullscreenBtn {
+    position: fixed;
+    top: 10px;
+    right: 10px;
+
+    padding: 10px 15px;
+    font-size: 16px;
+
+    background: rgba(0, 0, 0, 0.6);
+    color: white;
+    border: none;
+    border-radius: 6px;
+
+    cursor: pointer;
+    z-index: 1000;
+}
+
+#fullscreenBtn:hover {
+    background: rgba(0, 0, 0, 0.8);
+}`;
+        fullscreenBtn = `<!-- Button to make it fullscreen -->
+<button id="fullscreenBtn">⛶ Fullscreen</button>`;
+    }
+    const defaulthtml = `<!-- HTML Web Game made with webgameengine by Shadowdara -->
+<!-- DO NOT REMOVE THIS NOTE ! -->    
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <title>${config.title}</title>
+    <!-- Für Mobile Viewports -->
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      body {
+        overflow: hidden; /* 🔥 verhindert Scrollbars */
+      }
+${fullscreenbutton}
+</style>
+    </style>
+  </head>
+  <body>
+    ${fullscreenBtn}
+    <script type="module" src="${config.entryname}.js"></script>
+  </body>
+</html>
+`;
+    return defaulthtml;
+}

package/dist/build/index.d.ts

@@ -0,0 +1,2 @@
+export type { buildconfig } from "./buildconfig.js";
+export { new_buildconfig } from "./buildconfig.js";

package/dist/build/index.js

@@ -0,0 +1,2 @@
+// Buildconfig Export
+export { new_buildconfig } from "./buildconfig.js";

package/dist/build/tools/devserver/cli.d.ts

@@ -0,0 +1,2 @@
+#!/usr/bin/env node
+export {};

package/dist/build/tools/devserver/cli.js

@@ -0,0 +1,105 @@
+#!/usr/bin/env node
+// Shebang
+import { build as esbuild } from "esbuild";
+import { copyFolder, flog, getContentType } from "../../buildhelper.js";
+import { GetDefaultHTML } from "../../exporthtml.js";
+import { createServer } from "http";
+import { readFile, writeFile } from "fs/promises";
+import { watch } from "fs";
+import path from "path";
+import { WebSocketServer } from "ws";
+import { loadUserConfig } from "./config.js";
+const config = await loadUserConfig();
+// console.log("CONFIG:", config);
+let isBuilding = false;
+const isRelease = process.argv.includes("--release");
+const isDev = !isRelease;
+// ================= BUILD =================
+async function build(config) {
+    if (isBuilding)
+        return;
+    isBuilding = true;
+    flog("🔄 Baue neu...");
+    await esbuild({
+        entryPoints: ["./game/" + config.entryname],
+        outdir: "./" + config.outdir,
+        bundle: true,
+        platform: "browser",
+        minify: isRelease,
+        sourcemap: isDev,
+        define: {
+            "import.meta.env.DEV": JSON.stringify(isDev),
+        },
+    });
+    const html = GetDefaultHTML(config);
+    await writeFile("./dist/index.html", html);
+    await copyFolder("./resources", "./dist/resources");
+    flog("✅ Build fertig!");
+    isBuilding = false;
+}
+// ================= SERVER =================
+let sockets = new Set();
+function startServer() {
+    const server = createServer(async (req, res) => {
+        let url = req.url || "/";
+        let filePath = url === "/" ? "/index.html" : url;
+        try {
+            const fullPath = path.join(process.cwd(), "dist", filePath);
+            const file = await readFile(fullPath);
+            res.writeHead(200, {
+                "Content-Type": getContentType(filePath),
+            });
+            res.end(file);
+        }
+        catch {
+            res.writeHead(404);
+            res.end("Not Found");
+        }
+    });
+    const wss = new WebSocketServer({ server });
+    wss.on("connection", (ws) => {
+        sockets.add(ws);
+        ws.on("close", () => sockets.delete(ws));
+    });
+    server.listen(3000, () => {
+        flog("🚀 Dev Server läuft auf http://localhost:3000");
+    });
+    return server;
+}
+// ================= RELOAD =================
+function reloadClients() {
+    flog("🔄 Browser reload...");
+    for (const ws of sockets) {
+        ws.send("reload");
+    }
+}
+// ================= WATCH =================
+let restarting = false;
+let pendingRestart = false;
+async function restart() {
+    if (restarting) {
+        pendingRestart = true;
+        return;
+    }
+    restarting = true;
+    do {
+        pendingRestart = false;
+        flog("♻️ Restart...");
+        await build(config);
+        reloadClients();
+    } while (pendingRestart);
+    restarting = false;
+}
+// ================= START =================
+await build(config);
+if (isDev) {
+    startServer();
+    ["resources", "game"].forEach((dir) => {
+        watch(dir, { recursive: true }, async () => {
+            flog(`📁 Änderung erkannt in ${dir}`);
+            await restart();
+        });
+    });
+    flog("👀 Watcher aktiv...");
+}
+flog(`Build fertig! Modus: ${isRelease ? "Release" : "Dev"}`);

package/dist/build/tools/devserver/config.d.ts

@@ -0,0 +1,3 @@
+import "esbuild-register";
+import { buildconfig } from "../../buildconfig.js";
+export declare function loadUserConfig(): Promise<buildconfig>;

package/dist/build/tools/devserver/config.js

@@ -0,0 +1,18 @@
+import "esbuild-register";
+import path from "path";
+import { pathToFileURL } from "url";
+export async function loadUserConfig() {
+    const configPath = path.resolve(process.cwd(), "webgameengine.config.ts");
+    try {
+        const configUrl = pathToFileURL(configPath).href;
+        const mod = await import(configUrl);
+        const config = typeof mod.default === "function"
+            ? mod.default()
+            : mod.default;
+        return config;
+    }
+    catch (e) {
+        console.error(e);
+        throw new Error("❌ Konnte webgameengine.config.ts nicht laden\nPATH: " + configPath);
+    }
+}

package/dist/core.d.ts

@@ -0,0 +1,3 @@
+type GameLoop = (dt: number) => void;
+export declare function startEngine(start: () => void, gameLoop: GameLoop): void;
+export {};

package/dist/core.js

@@ -0,0 +1,13 @@
+let lastTime = 0;
+let loop;
+export function startEngine(start, gameLoop) {
+    loop = gameLoop;
+    start();
+    requestAnimationFrame(run);
+}
+function run(time) {
+    const dt = (time - lastTime) / 1000;
+    lastTime = time;
+    loop(dt);
+    requestAnimationFrame(run);
+}

package/dist/html.d.ts

@@ -0,0 +1,16 @@
+export type CanvasConfig = {
+    width?: number;
+    height?: number;
+    fullscreen?: boolean;
+    scaling?: "none" | "fit";
+    virtualWidth?: number;
+    virtualHeight?: number;
+};
+export declare function createCanvas(config?: CanvasConfig): {
+    canvas: HTMLCanvasElement;
+    ctx: CanvasRenderingContext2D;
+    applyScaling: () => void;
+};
+export declare function resizeCanvas(canvas: HTMLCanvasElement): void;
+export declare function enableFullscreen(canvas: HTMLCanvasElement): void;
+export declare function setupFullscreenButton(canvas: HTMLCanvasElement): void;

package/dist/html.js

@@ -0,0 +1,64 @@
+export function createCanvas(config = {}) {
+    const canvas = document.createElement("canvas");
+    const ctx = canvas.getContext("2d");
+    document.body.appendChild(canvas);
+    const virtualWidth = config.virtualWidth ?? 800;
+    const virtualHeight = config.virtualHeight ?? 800;
+    function resize() {
+        if (config.fullscreen) {
+            canvas.width = window.innerWidth;
+            canvas.height = window.innerHeight;
+        }
+        else {
+            canvas.width = config.width ?? 800;
+            canvas.height = config.height ?? 800;
+        }
+    }
+    window.addEventListener("resize", resize);
+    resize();
+    function applyScaling() {
+        if (config.scaling === "fit") {
+            const scale = Math.min(canvas.width / virtualWidth, canvas.height / virtualHeight);
+            const offsetX = (canvas.width - virtualWidth * scale) / 2;
+            const offsetY = (canvas.height - virtualHeight * scale) / 2;
+            ctx.setTransform(scale, 0, 0, scale, offsetX, offsetY);
+        }
+        else {
+            ctx.setTransform(1, 0, 0, 1, 0, 0);
+        }
+    }
+    return {
+        canvas,
+        ctx,
+        applyScaling,
+    };
+}
+export function resizeCanvas(canvas) {
+    canvas.width = window.innerWidth;
+    canvas.height = window.innerHeight;
+}
+export function enableFullscreen(canvas) {
+    window.addEventListener("keydown", (e) => {
+        if (e.key === "f") {
+            if (!document.fullscreenElement) {
+                canvas.requestFullscreen();
+            }
+            else {
+                document.exitFullscreen();
+            }
+        }
+    });
+}
+export function setupFullscreenButton(canvas) {
+    const btn = document.getElementById("fullscreenBtn");
+    if (!btn)
+        return;
+    btn.addEventListener("click", () => {
+        if (!document.fullscreenElement) {
+            canvas.requestFullscreen();
+        }
+        else {
+            document.exitFullscreen();
+        }
+    });
+}

package/dist/index.d.ts

@@ -0,0 +1,9 @@
+export { startEngine } from "./core.js";
+export { renderText, renderBitmapText } from "./renderer.js";
+export { setupInput, isKeyJustPressed, resetInput, getMouse } from "./input.js";
+export type { Mouse } from "./input.js";
+export { dlog } from "./logger.js";
+export { saveGame, loadGame, clearSave } from "./save.js";
+export { drawTexture, getTexture, type Texture, loadTextureAsync } from "./texture.js";
+export { createCanvas, enableFullscreen, setupFullscreenButton } from "./html.js";
+export { Key } from "./keys.js";

package/dist/index.js

@@ -0,0 +1,16 @@
+// Core Engine Exports
+export { startEngine } from "./core.js";
+// Rendering
+export { renderText, renderBitmapText } from "./renderer.js";
+// Input System
+export { setupInput, isKeyJustPressed, resetInput, getMouse } from "./input.js";
+// Logging
+export { dlog } from "./logger.js";
+// Save System
+export { saveGame, loadGame, clearSave } from "./save.js";
+// Texture Management
+export { drawTexture, getTexture, loadTextureAsync } from "./texture.js";
+// HTML Generation
+export { createCanvas, enableFullscreen, setupFullscreenButton } from "./html.js";
+// Keys Reference
+export { Key } from "./keys.js";

package/dist/input.d.ts

@@ -0,0 +1,15 @@
+export type Mouse = {
+    x: number;
+    y: number;
+    pressed: boolean;
+    justPressed: boolean;
+    justReleased: boolean;
+    rightPressed: boolean;
+    wheelDelta: number;
+};
+export declare function setupInput(canvas: HTMLCanvasElement, vWidth?: number, vHeight?: number): void;
+export declare function isKeyPressed(code: string): boolean;
+export declare function isKeyJustPressed(code: string): boolean;
+export declare function isKeyJustReleased(code: string): boolean;
+export declare function getMouse(): Readonly<Mouse>;
+export declare function resetInput(): void;

package/dist/input.js

@@ -0,0 +1,104 @@
+const keys = {};
+const mouse = {
+    x: 0,
+    y: 0,
+    // for Left Buttons
+    pressed: false,
+    justPressed: false,
+    justReleased: false,
+    // TODO
+    // do the same for the right Buttons
+    rightPressed: false,
+    wheelDelta: 0,
+};
+let canvasRef;
+// 👉 optional: für scaling (kannst du später aus deiner engine holen)
+let virtualWidth = 800;
+let virtualHeight = 800;
+export function setupInput(canvas, vWidth = 800, vHeight = 800) {
+    canvasRef = canvas;
+    virtualWidth = vWidth;
+    virtualHeight = vHeight;
+    // ===== KEYBOARD =====
+    window.addEventListener("keydown", (e) => {
+        if (!keys[e.code]) {
+            keys[e.code] = { pressed: false, justPressed: false, justReleased: false };
+        }
+        const key = keys[e.code];
+        if (!key.pressed)
+            key.justPressed = true;
+        key.pressed = true;
+    });
+    window.addEventListener("keyup", (e) => {
+        if (!keys[e.code]) {
+            keys[e.code] = { pressed: false, justPressed: false, justReleased: false };
+        }
+        const key = keys[e.code];
+        key.pressed = false;
+        key.justReleased = true;
+    });
+    // ===== MOUSE =====
+    canvas.addEventListener("mousedown", (e) => {
+        if (e.button === 0) {
+            if (!mouse.pressed)
+                mouse.justPressed = true;
+            mouse.pressed = true;
+        }
+        if (e.button === 2) {
+            mouse.rightPressed = true;
+        }
+    });
+    canvas.addEventListener("mouseup", (e) => {
+        if (e.button === 0) {
+            mouse.pressed = false;
+            mouse.justReleased = true;
+        }
+        if (e.button === 2) {
+            mouse.rightPressed = false;
+        }
+    });
+    // 👉 wichtig: verhindert context menu bei right click
+    canvas.addEventListener("contextmenu", (e) => e.preventDefault());
+    // ===== MOUSE MOVE (mit scaling fix 🔥) =====
+    canvas.addEventListener("mousemove", (e) => {
+        const rect = canvas.getBoundingClientRect();
+        const scale = Math.min(canvas.width / virtualWidth, canvas.height / virtualHeight);
+        const offsetX = (canvas.width - virtualWidth * scale) / 2;
+        const offsetY = (canvas.height - virtualHeight * scale) / 2;
+        mouse.x = (e.clientX - rect.left - offsetX) / scale;
+        mouse.y = (e.clientY - rect.top - offsetY) / scale;
+    });
+    // ===== MOUSE WHEEL =====
+    canvas.addEventListener("wheel", (e) => {
+        mouse.wheelDelta = e.deltaY;
+    });
+    // 👉 Fix: wenn Maus Canvas verlässt
+    canvas.addEventListener("mouseleave", () => {
+        mouse.pressed = false;
+        mouse.rightPressed = false;
+    });
+}
+// ===== KEY HELPERS =====
+export function isKeyPressed(code) {
+    return keys[code]?.pressed || false;
+}
+export function isKeyJustPressed(code) {
+    return keys[code]?.justPressed || false;
+}
+export function isKeyJustReleased(code) {
+    return keys[code]?.justReleased || false;
+}
+// ===== MOUSE =====
+export function getMouse() {
+    return { ...mouse };
+}
+// ===== RESET =====
+export function resetInput() {
+    for (const k in keys) {
+        keys[k].justPressed = false;
+        keys[k].justReleased = false;
+    }
+    mouse.justPressed = false;
+    mouse.justReleased = false;
+    mouse.wheelDelta = 0;
+}

package/dist/keys.d.ts

@@ -0,0 +1,52 @@
+export declare enum Key {
+    ArrowUp = "ArrowUp",
+    ArrowDown = "ArrowDown",
+    ArrowLeft = "ArrowLeft",
+    ArrowRight = "ArrowRight",
+    Space = "Space",
+    Enter = "Enter",
+    Escape = "Escape",
+    Tab = "Tab",
+    ShiftLeft = "ShiftLeft",
+    ShiftRight = "ShiftRight",
+    ControlLeft = "ControlLeft",
+    ControlRight = "ControlRight",
+    AltLeft = "AltLeft",
+    AltRight = "AltRight",
+    KeyA = "KeyA",
+    KeyB = "KeyB",
+    KeyC = "KeyC",
+    KeyD = "KeyD",
+    KeyE = "KeyE",
+    KeyF = "KeyF",
+    KeyG = "KeyG",
+    KeyH = "KeyH",
+    KeyI = "KeyI",
+    KeyJ = "KeyJ",
+    KeyK = "KeyK",
+    KeyL = "KeyL",
+    KeyM = "KeyM",
+    KeyN = "KeyN",
+    KeyO = "KeyO",
+    KeyP = "KeyP",
+    KeyQ = "KeyQ",
+    KeyR = "KeyR",
+    KeyS = "KeyS",
+    KeyT = "KeyT",
+    KeyU = "KeyU",
+    KeyV = "KeyV",
+    KeyW = "KeyW",
+    KeyX = "KeyX",
+    KeyY = "KeyY",
+    KeyZ = "KeyZ",
+    Digit0 = "Digit0",
+    Digit1 = "Digit1",
+    Digit2 = "Digit2",
+    Digit3 = "Digit3",
+    Digit4 = "Digit4",
+    Digit5 = "Digit5",
+    Digit6 = "Digit6",
+    Digit7 = "Digit7",
+    Digit8 = "Digit8",
+    Digit9 = "Digit9"
+}

package/dist/keys.js

@@ -0,0 +1,55 @@
+// keys.ts
+// to view the Keys easily with the Autocomplete Feature
+export var Key;
+(function (Key) {
+    Key["ArrowUp"] = "ArrowUp";
+    Key["ArrowDown"] = "ArrowDown";
+    Key["ArrowLeft"] = "ArrowLeft";
+    Key["ArrowRight"] = "ArrowRight";
+    Key["Space"] = "Space";
+    Key["Enter"] = "Enter";
+    Key["Escape"] = "Escape";
+    Key["Tab"] = "Tab";
+    Key["ShiftLeft"] = "ShiftLeft";
+    Key["ShiftRight"] = "ShiftRight";
+    Key["ControlLeft"] = "ControlLeft";
+    Key["ControlRight"] = "ControlRight";
+    Key["AltLeft"] = "AltLeft";
+    Key["AltRight"] = "AltRight";
+    Key["KeyA"] = "KeyA";
+    Key["KeyB"] = "KeyB";
+    Key["KeyC"] = "KeyC";
+    Key["KeyD"] = "KeyD";
+    Key["KeyE"] = "KeyE";
+    Key["KeyF"] = "KeyF";
+    Key["KeyG"] = "KeyG";
+    Key["KeyH"] = "KeyH";
+    Key["KeyI"] = "KeyI";
+    Key["KeyJ"] = "KeyJ";
+    Key["KeyK"] = "KeyK";
+    Key["KeyL"] = "KeyL";
+    Key["KeyM"] = "KeyM";
+    Key["KeyN"] = "KeyN";
+    Key["KeyO"] = "KeyO";
+    Key["KeyP"] = "KeyP";
+    Key["KeyQ"] = "KeyQ";
+    Key["KeyR"] = "KeyR";
+    Key["KeyS"] = "KeyS";
+    Key["KeyT"] = "KeyT";
+    Key["KeyU"] = "KeyU";
+    Key["KeyV"] = "KeyV";
+    Key["KeyW"] = "KeyW";
+    Key["KeyX"] = "KeyX";
+    Key["KeyY"] = "KeyY";
+    Key["KeyZ"] = "KeyZ";
+    Key["Digit0"] = "Digit0";
+    Key["Digit1"] = "Digit1";
+    Key["Digit2"] = "Digit2";
+    Key["Digit3"] = "Digit3";
+    Key["Digit4"] = "Digit4";
+    Key["Digit5"] = "Digit5";
+    Key["Digit6"] = "Digit6";
+    Key["Digit7"] = "Digit7";
+    Key["Digit8"] = "Digit8";
+    Key["Digit9"] = "Digit9";
+})(Key || (Key = {}));

package/dist/logger.d.ts

@@ -0,0 +1 @@
+export declare const dlog: (...args: any[]) => void;

package/dist/logger.js

@@ -0,0 +1,16 @@
+// Debug Log Function
+export const dlog = 
+// (import.meta.env?.DEV ?? true) // Default true, falls undefined
+// ? (...args: any[]) => {
+//     const now = new Date();
+//     const time =
+//         `[${now.getHours().toString().padStart(2, "0")}:` +
+//         `${now.getMinutes().toString().padStart(2, "0")}:` +
+//         `${now.getSeconds().toString().padStart(2, "0")}.` +
+//         `${now.getMilliseconds().toString().padStart(3, "0")}]`;
+//     console.log(time, ...args);
+// }
+// :
+(...args) => { }; // Release: nichts loggen
+// Dlog in Release Mode:
+// export const dlog = () => {};

package/dist/renderer.d.ts

@@ -0,0 +1,5 @@
+import { type Rect } from "./types/rectangle";
+export declare function renderText(ctx: CanvasRenderingContext2D, text: string, x: number, y: number, color?: string, font?: string): void;
+type CharMap = Record<string, Rect>;
+export declare function renderBitmapText(ctx: CanvasRenderingContext2D, text: string, x: number, y: number, sprite: HTMLImageElement, charMap: CharMap, scale?: number): void;
+export {};

package/dist/renderer.js

@@ -0,0 +1,17 @@
+// Function to render Text
+export function renderText(ctx, text, x, y, color = "white", font = "20px Arial") {
+    ctx.fillStyle = color;
+    ctx.font = font;
+    ctx.textBaseline = "top";
+    ctx.fillText(text, x, y);
+}
+export function renderBitmapText(ctx, text, x, y, sprite, charMap, scale = 1) {
+    let offsetX = 0;
+    for (const c of text) {
+        const rect = charMap[c];
+        if (!rect)
+            continue;
+        ctx.drawImage(sprite, rect.x, rect.y, rect.width, rect.height, x + offsetX, y, rect.width * scale, rect.height * scale);
+        offsetX += rect.width * scale;
+    }
+}

package/dist/save.d.ts

@@ -0,0 +1,5 @@
+type SaveData = Record<string, any>;
+export declare function saveGame(data: SaveData): void;
+export declare function loadGame(): SaveData | null;
+export declare function clearSave(): void;
+export {};

package/dist/save.js

@@ -0,0 +1,27 @@
+const SAVE_KEY = "my_game_save";
+export function saveGame(data) {
+    try {
+        const json = JSON.stringify(data);
+        localStorage.setItem(SAVE_KEY, json);
+        console.log("Game saved!");
+    }
+    catch (err) {
+        console.error("Save failed:", err);
+    }
+}
+export function loadGame() {
+    try {
+        const json = localStorage.getItem(SAVE_KEY);
+        if (!json)
+            return null;
+        return JSON.parse(json);
+    }
+    catch (err) {
+        console.error("Load failed:", err);
+        return null;
+    }
+}
+export function clearSave() {
+    localStorage.removeItem(SAVE_KEY);
+    console.log("Save cleared!");
+}

package/dist/texture.d.ts

@@ -0,0 +1,4 @@
+export type Texture = HTMLImageElement | undefined;
+export declare function loadTextureAsync(src: string): Promise<HTMLImageElement>;
+export declare function getTexture(src: string): Texture;
+export declare function drawTexture(ctx: CanvasRenderingContext2D, texture: Texture, x: number, y: number, width?: number, height?: number): void;

package/dist/texture.js

@@ -0,0 +1,46 @@
+import { dlog } from "./logger";
+const textures = {};
+function getresourcepath(path) {
+    return "resources/" + path;
+}
+// Function to load a Texture Async
+export function loadTextureAsync(src) {
+    return new Promise((resolve, reject) => {
+        // Wenn schon geladen
+        const existing = getTexture(src);
+        if (existing)
+            return resolve(existing);
+        const img = new Image();
+        // 🔹 Hier Pfad modifizieren, z.B. Prefix hinzufügen
+        let finalSrc = getresourcepath(src);
+        img.onload = () => {
+            // Cache speichern
+            textures[finalSrc] = img; // optional: Original-Pfad oder finalSrc?
+            resolve(img);
+        };
+        img.onerror = () => {
+            const msg = `❌ Failed to load texture: ${finalSrc}`;
+            console.error(msg);
+            reject(new Error(msg));
+        };
+        // 🔹 Bild laden mit finalem Pfad
+        img.src = finalSrc;
+    });
+}
+export function getTexture(src) {
+    return textures[getresourcepath(src)];
+}
+export function drawTexture(ctx, texture, x, y, width, height) {
+    if (!texture) {
+        dlog("Texture not found");
+        ctx.fillStyle = "magenta";
+        ctx.fillRect(x, y, width ?? 32, height ?? 32);
+        return;
+    }
+    if (width && height) {
+        ctx.drawImage(texture, x, y, width, height);
+    }
+    else {
+        ctx.drawImage(texture, x, y);
+    }
+}

package/dist/types/color.d.ts

@@ -0,0 +1,8 @@
+export type Color = {
+    r: number;
+    g: number;
+    b: number;
+    a?: number;
+};
+export declare function invertcolor(color: Color): Color;
+export declare function invertHexColor(hex: string): string;

package/dist/types/color.js

@@ -0,0 +1,18 @@
+export function invertcolor(color) {
+    return {
+        r: 255 - color.r,
+        g: 255 - color.g,
+        b: 255 - color.b,
+        ...(color.a !== undefined ? { a: color.a } : {}) // optional alpha behalten
+    };
+}
+export function invertHexColor(hex) {
+    // Entferne das führende #
+    const cleanHex = hex.replace('#', '');
+    // Wandeln in R, G, B
+    const r = 255 - parseInt(cleanHex.slice(0, 2), 16);
+    const g = 255 - parseInt(cleanHex.slice(2, 4), 16);
+    const b = 255 - parseInt(cleanHex.slice(4, 6), 16);
+    // Zurück in Hex-String
+    return '#' + [r, g, b].map(x => x.toString(16).padStart(2, '0')).join('');
+}

package/dist/types/index.d.ts

@@ -0,0 +1,5 @@
+export type { Vector2d } from "./vector2d.js";
+export type { Vector3d } from "./vector3d.js";
+export type { Color } from "./color.js";
+export type { Rect } from "./rectangle.js";
+export { isRectClicked } from "./rectangle.js";

package/dist/types/index.js

@@ -0,0 +1,4 @@
+// Types Export
+export { isRectClicked } from "./rectangle.js";
+// Math Utilities
+// export * from "./math-utils.js";

package/dist/types/math-utils.d.ts

@@ -0,0 +1,3 @@
+export declare function clamp(input: number, min: number, max: number): number;
+export declare function lerp(start: number, end: number, t: number): number;
+export declare function map(value: number, inMin: number, inMax: number, outMin: number, outMax: number): number;

package/dist/types/math-utils.js

@@ -0,0 +1,12 @@
+// Clamp
+export function clamp(input, min, max) {
+    return Math.min(Math.max(input, min), max);
+}
+// Lerp
+export function lerp(start, end, t) {
+    return (start + (end - start) * t);
+}
+// Map
+export function map(value, inMin, inMax, outMin, outMax) {
+    return (outMax - outMin) * ((value - inMin) / (inMax - inMin)) + outMin;
+}

package/dist/types/rectangle.d.ts

@@ -0,0 +1,14 @@
+import { Mouse } from "../input";
+import { type Vector2d } from "./vector2d";
+export type Rect = {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+};
+export declare function centerRectX(rect: Rect): number;
+export declare function centerRectY(rect: Rect): number;
+export declare function centerRect(rect: Rect): Vector2d;
+export declare function isPointInRect(x: number, y: number, rect: Rect): boolean;
+export declare function isMouseInRect(mouse: Mouse, rect: Rect): boolean;
+export declare function isRectClicked(mouse: Mouse, rect: Rect): boolean;

package/dist/types/rectangle.js

@@ -0,0 +1,31 @@
+// Rectangle Type for Hitboxes
+// Function to get the Center of the Width of the Object
+export function centerRectX(rect) {
+    return (rect.x + (rect.width / 2));
+}
+// Function to get the Center of the Height of the Object
+export function centerRectY(rect) {
+    return (rect.y + (rect.height / 2));
+}
+// Get the Center of a Rectangle
+export function centerRect(rect) {
+    let vector = { x: centerRectX(rect), y: centerRectY(rect) };
+    return vector;
+}
+// Check if a Point in the Rectangle
+export function isPointInRect(x, y, rect) {
+    return (x >= rect.x &&
+        x <= rect.x + rect.width &&
+        y >= rect.y &&
+        y <= rect.y + rect.height);
+}
+export function isMouseInRect(mouse, rect) {
+    return (mouse.x >= rect.x &&
+        mouse.x <= rect.x + rect.width &&
+        mouse.y >= rect.y &&
+        mouse.y <= rect.y + rect.height);
+}
+// Function to check if a Rectangle is clicked  
+export function isRectClicked(mouse, rect) {
+    return isMouseInRect(mouse, rect) && mouse.justPressed;
+}

package/dist/types/vector2d.d.ts

@@ -0,0 +1,7 @@
+export type Vector2d = {
+    x: number;
+    y: number;
+};
+export declare function normalize2d(vector: Vector2d): Vector2d;
+export declare function clamp2d(vector: Vector2d, min: Vector2d, max: Vector2d): Vector2d;
+export declare function lerp2d(start: Vector2d, end: Vector2d, t: Vector2d): Vector2d;

package/dist/types/vector2d.js

@@ -0,0 +1,29 @@
+// 2 Dimensional Vector Type
+import { clamp, lerp } from "./math-utils";
+// Function to normalize a Vector 2d
+export function normalize2d(vector) {
+    // Check if the Vector is zero because then you dont need to
+    // calculate sth
+    if (vector.x == 0 && vector.y == 0) {
+        return vector;
+    }
+    let produkt = vector.x * vector.x + vector.y * vector.y;
+    let root = Math.sqrt(produkt);
+    vector.x = vector.x / root;
+    vector.y = vector.y / root;
+    return vector;
+}
+// Function to clamp a Vector 2d
+export function clamp2d(vector, min, max) {
+    return {
+        x: clamp(vector.x, min.x, max.x),
+        y: clamp(vector.y, min.y, max.y),
+    };
+}
+// Lerp for a 2d Vector
+export function lerp2d(start, end, t) {
+    return {
+        x: lerp(start.x, end.x, t.x),
+        y: lerp(start.y, end.y, t.y),
+    };
+}

package/dist/types/vector3d.d.ts

@@ -0,0 +1,8 @@
+export type Vector3d = {
+    x: number;
+    y: number;
+    z: number;
+};
+export declare function normalize3d(vector: Vector3d): Vector3d;
+export declare function clamp3d(vector: Vector3d, min: Vector3d, max: Vector3d): Vector3d;
+export declare function lerp3d(start: Vector3d, end: Vector3d, t: Vector3d): Vector3d;

package/dist/types/vector3d.js

@@ -0,0 +1,32 @@
+// 3d Vector
+import { clamp, lerp } from "./math-utils";
+// Function to normalize a Vector 2d
+export function normalize3d(vector) {
+    // Check if the Vector is zero because then you dont need to
+    // calculate sth
+    if (vector.x == 0 && vector.y == 0 && vector.z) {
+        return vector;
+    }
+    let produkt = vector.x * vector.x + vector.y * vector.y + vector.z * vector.z;
+    let root = Math.sqrt(produkt);
+    vector.x = vector.x / root;
+    vector.y = vector.y / root;
+    vector.z = vector.z / root;
+    return vector;
+}
+// Function to clamp a Vector 2d
+export function clamp3d(vector, min, max) {
+    return {
+        x: clamp(vector.x, min.x, max.x),
+        y: clamp(vector.y, min.y, max.y),
+        z: clamp(vector.y, min.y, max.y),
+    };
+}
+// Lerp for a 2d Vector
+export function lerp3d(start, end, t) {
+    return {
+        x: lerp(start.x, end.x, t.x),
+        y: lerp(start.y, end.y, t.y),
+        z: lerp(start.y, end.y, t.y),
+    };
+}

package/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "@shadowdara/webgameengine",
+  "version": "1.0.0",
+  "description": "A TypeScript game library to make HTML Games",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "sideEffects": false,
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsc",
+    "pack": "npm run build && npm pack"
+  },
+  "bin": {
+    "webgameengine": "dist/build/tools/devserver/cli.js"
+  },
+  "exports": {
+    ".": "./dist/index.js",
+    "./build": "./dist/build/index.js",
+    "./types": "./dist/types/index.js"
+  },
+  "keywords": [
+    "game",
+    "typescript"
+  ],
+  "author": "Shadowdara",
+  "license": "MIT",
+  "devDependencies": {
+    "@types/node": "^25.5.2",
+    "@types/ws": "^8.18.1",
+    "typescript": "^6.0.2"
+  },
+  "dependencies": {
+    "esbuild": "^0.28.0",
+    "esbuild-register": "^3.6.0",
+    "mime": "^4.1.0",
+    "ws": "^8.20.0"
+  }
+}