@shadowdara/webgameengine 1.1.0 → 1.3.0

package/README.md

@@ -51,8 +51,10 @@ startEngine(init, gameLoop);
 ### Using Bun (local development)
 
 ```bash
-npx webgameengine                   # Build main game
+npx webgameengine                   # Start Dev Server
 npx webgameengine --release         # Production build
+npx webgameengine --new             # Create a new project with a simple Snake Clone as Template
+npx webgameengine --new-empty       # Create a new empty project
 ```
 
 ### Configuration

package/dist/build/cli/cli.js

@@ -0,0 +1,166 @@
+#!/usr/bin/env node
+import { build as esbuild } from "esbuild";
+import { createServer } from "http";
+import { readFile, writeFile, mkdir } from "fs/promises";
+import { watch } from "fs";
+import path from "path";
+import { WebSocketServer } from "ws";
+import { createProject } from "./new.js";
+import { copyFolder, flog, getContentType } from "../buildhelper.js";
+import { GetDefaultHTML } from "../exporthtml.js";
+import { loadUserConfig } from "./config.js";
+// ================= ARG PARSING =================
+function parseArgs() {
+    const args = process.argv.slice(2);
+    const options = {
+        release: false,
+        port: 3000,
+        newProject: null,
+        empty: false,
+    };
+    for (let i = 0; i < args.length; i++) {
+        const arg = args[i];
+        switch (arg) {
+            case "--release":
+            case "-r":
+                options.release = true;
+                break;
+            case "--port":
+            case "-p":
+                options.port = Number(args[i + 1]);
+                i++;
+                break;
+            case "--new":
+            case "-n":
+                options.newProject = args[i + 1];
+                i++;
+                break;
+            case "--new-empty":
+                options.empty = true;
+                break;
+            case "-h":
+            case "--help":
+                // TODO
+                // make the help Message here
+                console.log("Cli Tools for Webgameengine");
+            default:
+                console.warn(`⚠️ Unknown Argument: ${arg}`);
+        }
+    }
+    return options;
+}
+// ================= APP FACTORY =================
+function createCLIApp(args, config) {
+    const isRelease = args.release;
+    const isDev = !isRelease;
+    // 👉 State kapseln statt global
+    let isBuilding = false;
+    let restarting = false;
+    let pendingRestart = false;
+    const sockets = new Set();
+    // ================= BUILD =================
+    async function build() {
+        if (isBuilding)
+            return;
+        isBuilding = true;
+        flog("🔄 Building new ...");
+        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 finished!");
+        isBuilding = false;
+    }
+    // ================= SERVER =================
+    function startServer() {
+        const server = createServer(async (req, res) => {
+            const url = req.url || "/";
+            const 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(args.port, () => {
+            flog(`🚀 Dev Server is running on http://localhost:${args.port}`);
+        });
+        return server;
+    }
+    // ================= RELOAD =================
+    function reloadClients() {
+        flog("🔄 Browser reload...");
+        for (const ws of sockets) {
+            ws.send("reload");
+        }
+    }
+    // ================= RESTART =================
+    async function restart() {
+        if (restarting) {
+            pendingRestart = true;
+            return;
+        }
+        restarting = true;
+        do {
+            pendingRestart = false;
+            flog("♻️ Restart...");
+            await build();
+            reloadClients();
+        } while (pendingRestart);
+        restarting = false;
+    }
+    // ================= WATCH =================
+    function startWatcher() {
+        mkdir("resources", { recursive: true });
+        mkdir("game", { recursive: true });
+        ["resources", "game"].forEach((dir) => {
+            watch(dir, { recursive: true }, async () => {
+                flog(`📁 Change noticed in ${dir}`);
+                await restart();
+            });
+        });
+        flog("👀 Watcher active ...");
+    }
+    // ================= RUN =================
+    async function run() {
+        await build();
+        if (isDev) {
+            startServer();
+            startWatcher();
+        }
+        flog(`Build finished! Mode: ${isRelease ? "Release" : "Dev"}`);
+    }
+    return { run };
+}
+// ================= MAIN =================
+const args = parseArgs();
+// Create a bew Project
+if (args.newProject) {
+    await createProject(args.newProject, args.empty);
+    process.exit(0);
+}
+const config = await loadUserConfig();
+const app = createCLIApp(args, config);
+await app.run();

package/dist/build/{tools/devserver → cli}/config.d.ts

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

package/dist/build/{tools/devserver → cli}/config.js

@@ -13,6 +13,6 @@ export async function loadUserConfig() {
     }
     catch (e) {
         console.error(e);
-        throw new Error("❌ Konnte webgameengine.config.ts nicht laden\nPATH: " + configPath);
+        throw new Error("❌ Could not find 'webgameengine.config.ts - PATH: " + configPath);
     }
 }

package/dist/build/cli/new.d.ts

@@ -0,0 +1 @@
+export declare function createProject(name: string, empty: boolean): Promise<void>;

package/dist/build/cli/new.js

@@ -0,0 +1,192 @@
+import path from "path";
+import { writeFile, mkdir } from "fs/promises";
+import { flog } from "../buildhelper.js";
+// ================= NEW PROJECT =================
+export async function createProject(name, empty) {
+    const base = path.resolve(name);
+    flog(`📦 Erstelle neues Projekt: ${name}`);
+    await mkdir(base, { recursive: true });
+    await mkdir(path.join(base, "game"), { recursive: true });
+    await mkdir(path.join(base, "resources"), { recursive: true });
+    await mkdir(path.join(base, "dist"), { recursive: true });
+    let content = `
+// A empty Project with the Web Framework
+
+import { createCanvas, enableFullscreen, setupFullscreenButton } from "@shadowdara/webgameengine";
+import { setupInput, resetInput, getMouse } from "@shadowdara/webgameengine";
+import { startEngine } from "@shadowdara/webgameengine";
+
+const { canvas, ctx, applyScaling } = createCanvas({fullscreen: true, scaling: "fit", virtualWidth: window.innerWidth, virtualHeight: window.innerHeight});
+setupInput(canvas);
+
+enableFullscreen(canvas);
+setupFullscreenButton(canvas);
+
+async function gameStart() {
+    // Code which runs at the Game Start
+}
+
+function gameLoop(dt: number) {
+    // Code which runs every Frame
+
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+    const mouse = getMouse();
+
+    applyScaling();
+
+    resetInput();
+}
+
+// Because start Game is Async
+startEngine(() => { gameStart().then(() => {/* ready */}) }, gameLoop);
+`;
+    if (empty) {
+        content = `
+// A mini Snake Clone with my Webframework
+
+import { createCanvas } from "@shadowdara/webgameengine";
+import { setupInput, isKeyJustPressed, resetInput } from "@shadowdara/webgameengine";
+import { startEngine } from "@shadowdara/webgameengine";
+import { renderText } from "@shadowdara/webgameengine";
+import { Vector2d } from "@shadowdara/webgameengine/types";
+import { dlog } from "@shadowdara/webgameengine";
+import { Key } from "@shadowdara/webgameengine";
+
+const { canvas, ctx } = createCanvas({fullscreen: true, scaling: "fit", virtualWidth: window.innerWidth, virtualHeight: window.innerHeight});
+setupInput(canvas);
+
+let snake: Vector2d[] = [{ x: 10, y: 10 }];
+let dir: Vector2d = { x: 1, y: 0 };
+let food: Vector2d = { x: 15, y: 10 };
+let gridSize = 20;
+let lastMove = 0;
+let speed = 0.2; // seconds per cell
+let start = false;
+
+async function gameStart() {
+    dlog("Snake gestartet");
+}
+
+function gameLoop(dt: number) {
+    if (isKeyJustPressed(Key.Escape)) {
+        start = !start
+    }
+
+    if (!start) {
+        ctx.fillStyle = "white";
+        ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+        renderText(ctx, "Snake", 10, 10, "black", "24px Arial");
+        renderText(ctx, "Press ESC to start or Pause the Game!", 10, 50, "black", "24px Arial");
+
+        // return;
+    } else {
+
+        // Input
+        if (isKeyJustPressed(Key.ArrowUp) && dir.y === 0) dir = { x: 0, y: -1 };
+        if (isKeyJustPressed(Key.ArrowDown) && dir.y === 0) dir = { x: 0, y: 1 };
+        if (isKeyJustPressed(Key.ArrowLeft) && dir.x === 0) dir = { x: -1, y: 0 };
+        if (isKeyJustPressed(Key.ArrowRight) && dir.x === 0) dir = { x: 1, y: 0 };
+
+        lastMove += dt;
+
+        if (lastMove >= speed) {
+            lastMove = 0;
+            const head = { x: snake[0].x + dir.x, y: snake[0].y + dir.y };
+
+            // Kollision mit Walls
+            if (head.x < 0 || head.y < 0 || head.x >= canvas.width / gridSize || head.y >= canvas.height / gridSize) {
+                snake = [{ x: 10, y: 10 }];
+                dir = { x: 1, y: 0 };
+                dlog("Game Over");
+                return;
+            }
+
+            // Kollision mit sich selbst
+            if (snake.some(s => s.x === head.x && s.y === head.y)) {
+                snake = [{ x: 10, y: 10 }];
+                dir = { x: 1, y: 0 };
+                dlog(\`Game Over! Highscore: \${snake.length - 1}\`);
+                return;
+            }
+
+            snake.unshift(head);
+
+            // Food Check
+            if (head.x === food.x && head.y === food.y) {
+                food = { x: Math.floor(Math.random() * (canvas.width / gridSize)), y: Math.floor(Math.random() * (canvas.height / gridSize)) };
+            } else {
+                snake.pop();
+            }
+        }
+
+        // Zeichnen
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+        ctx.fillStyle = "black";
+        ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+        ctx.fillStyle = "green";
+        snake.forEach(s => ctx.fillRect(s.x * gridSize, s.y * gridSize, gridSize, gridSize));
+
+        ctx.fillStyle = "red";
+        ctx.fillRect(food.x * gridSize, food.y * gridSize, gridSize, gridSize);
+
+        renderText(ctx, "Score: " + (snake.length - 1), 10, 10, "yellow", "24px Arial");
+
+    }
+
+    // Reset Input
+    resetInput();
+}
+
+// Because start Game is Async
+startEngine(() => { gameStart().then(() => {/* ready */}) }, gameLoop);
+`;
+    }
+    // Basic game entry
+    await writeFile(path.join(base, "game", "main.ts"), content);
+    // Config
+    await writeFile(path.join(base, "webgameengine.config.js"), `
+// Project File for the Game
+
+import type { buildconfig } from "@shadowdara/webgameengine/build";
+import { new_buildconfig } from "@shadowdara/webgameengine/build";
+
+export default function defineConfig(): buildconfig {
+    let config: buildconfig = new_buildconfig();
+    return config;
+}
+`);
+    // package.json
+    // await writeFile(
+    //     path.join(base, "package.json"),
+    //     JSON.stringify(
+    //         {
+    //             name,
+    //             version: "1.0.0",
+    //             type: "module",
+    //             scripts: {
+    //                 dev: "mycli",
+    //                 build: "mycli --release",
+    //             },
+    //         },
+    //         null,
+    //         2
+    //     )
+    // );
+    flog("✅ Projekt created!");
+    // flog(`👉 cd ${name}`);
+    // flog(`👉 npm install`);
+    // flog(`👉 npm run dev`);
+    console.log(`Add to your package.json file:
+  "scripts": {
+    "dev": "npx webgameengine",
+    "build": "npx webgameengine --release"
+  },
+
+Run "npm run dev" to start the Dev Server and play a little Snake Clone
+`);
+    process.exit(0);
+}

package/dist/index.d.ts

@@ -1,9 +1,10 @@
 export { startEngine } from "./core.js";
-export { renderText, renderBitmapText } from "./renderer.js";
-export { setupInput, isKeyJustPressed, resetInput, getMouse } from "./input.js";
+export { renderText, renderBitmapText, drawRect, drawRectOutline, drawCircle, drawCircleOutline, drawTriangle, drawTriangleOutline, } from "./renderer.js";
 export type { Mouse } from "./input.js";
+export { setupInput, isKeyJustPressed, resetInput, getMouse } 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 type { Texture, TextureAtlas, Animation, } from "./texture.js";
+export { loadTextureAsync, getTexture, drawTexture, loadAtlas, drawAtlasFrame, AnimationPlayer, drawAnimation, getFlipFromDirection, } from "./texture.js";
 export { createCanvas, enableFullscreen, setupFullscreenButton } from "./html.js";
 export { Key } from "./keys.js";

package/dist/index.js

@@ -1,15 +1,13 @@
 // Core Engine Exports
 export { startEngine } from "./core.js";
 // Rendering
-export { renderText, renderBitmapText } from "./renderer.js";
-// Input System
+export { renderText, renderBitmapText, drawRect, drawRectOutline, drawCircle, drawCircleOutline, drawTriangle, drawTriangleOutline, } from "./renderer.js";
 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";
+export { loadTextureAsync, getTexture, drawTexture, loadAtlas, drawAtlasFrame, AnimationPlayer, drawAnimation, getFlipFromDirection, } from "./texture.js";
 // HTML Generation
 export { createCanvas, enableFullscreen, setupFullscreenButton } from "./html.js";
 // Keys Reference

package/dist/input.d.ts

@@ -5,6 +5,8 @@ export type Mouse = {
     justPressed: boolean;
     justReleased: boolean;
     rightPressed: boolean;
+    rightjustPressed: boolean;
+    rightjustReleased: boolean;
     wheelDelta: number;
 };
 export declare function setupInput(canvas: HTMLCanvasElement, vWidth?: number, vHeight?: number): void;

package/dist/input.js

@@ -9,6 +9,8 @@ const mouse = {
     // TODO
     // do the same for the right Buttons
     rightPressed: false,
+    rightjustPressed: false,
+    rightjustReleased: false,
     wheelDelta: 0,
 };
 let canvasRef;
@@ -45,6 +47,8 @@ export function setupInput(canvas, vWidth = 800, vHeight = 800) {
             mouse.pressed = true;
         }
         if (e.button === 2) {
+            if (!mouse.rightPressed)
+                mouse.rightjustPressed = true;
             mouse.rightPressed = true;
         }
     });
@@ -55,6 +59,7 @@ export function setupInput(canvas, vWidth = 800, vHeight = 800) {
         }
         if (e.button === 2) {
             mouse.rightPressed = false;
+            mouse.rightjustReleased = false;
         }
     });
     // 👉 wichtig: verhindert context menu bei right click
@@ -100,5 +105,7 @@ export function resetInput() {
     }
     mouse.justPressed = false;
     mouse.justReleased = false;
+    mouse.rightjustPressed = false;
+    mouse.rightjustReleased = false;
     mouse.wheelDelta = 0;
 }

package/dist/renderer.d.ts

@@ -1,5 +1,13 @@
 import { type Rect } from "./types/rectangle.js";
+import { type Circle } from "./types/circle.js";
+import { type Triangle } from "./types/triangle.js";
 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 declare function drawRect(ctx: CanvasRenderingContext2D, rect: Rect, color?: string): void;
+export declare function drawRectOutline(ctx: CanvasRenderingContext2D, rect: Rect, color?: string, lineWidth?: number): void;
+export declare function drawCircle(ctx: CanvasRenderingContext2D, circle: Circle, color?: string): void;
+export declare function drawCircleOutline(ctx: CanvasRenderingContext2D, circle: Circle, color?: string, lineWidth?: number): void;
+export declare function drawTriangle(ctx: CanvasRenderingContext2D, triangle: Triangle, color?: string): void;
+export declare function drawTriangleOutline(ctx: CanvasRenderingContext2D, triangle: Triangle, color?: string, lineWidth?: number): void;
 export {};

package/dist/renderer.js

@@ -15,3 +15,51 @@ export function renderBitmapText(ctx, text, x, y, sprite, charMap, scale = 1) {
         offsetX += rect.width * scale;
     }
 }
+// ===== SHAPE DRAWING =====
+// Function to draw a filled Rectangle
+export function drawRect(ctx, rect, color = "white") {
+    ctx.fillStyle = color;
+    ctx.fillRect(rect.x, rect.y, rect.width, rect.height);
+}
+// Function to draw a Rectangle outline
+export function drawRectOutline(ctx, rect, color = "white", lineWidth = 1) {
+    ctx.strokeStyle = color;
+    ctx.lineWidth = lineWidth;
+    ctx.strokeRect(rect.x, rect.y, rect.width, rect.height);
+}
+// Function to draw a filled Circle
+export function drawCircle(ctx, circle, color = "white") {
+    ctx.fillStyle = color;
+    ctx.beginPath();
+    ctx.arc(circle.x, circle.y, circle.radius, 0, Math.PI * 2);
+    ctx.fill();
+}
+// Function to draw a Circle outline
+export function drawCircleOutline(ctx, circle, color = "white", lineWidth = 1) {
+    ctx.strokeStyle = color;
+    ctx.lineWidth = lineWidth;
+    ctx.beginPath();
+    ctx.arc(circle.x, circle.y, circle.radius, 0, Math.PI * 2);
+    ctx.stroke();
+}
+// Function to draw a filled Triangle
+export function drawTriangle(ctx, triangle, color = "white") {
+    ctx.fillStyle = color;
+    ctx.beginPath();
+    ctx.moveTo(triangle.x1, triangle.y1);
+    ctx.lineTo(triangle.x2, triangle.y2);
+    ctx.lineTo(triangle.x3, triangle.y3);
+    ctx.closePath();
+    ctx.fill();
+}
+// Function to draw a Triangle outline
+export function drawTriangleOutline(ctx, triangle, color = "white", lineWidth = 1) {
+    ctx.strokeStyle = color;
+    ctx.lineWidth = lineWidth;
+    ctx.beginPath();
+    ctx.moveTo(triangle.x1, triangle.y1);
+    ctx.lineTo(triangle.x2, triangle.y2);
+    ctx.lineTo(triangle.x3, triangle.y3);
+    ctx.closePath();
+    ctx.stroke();
+}

package/dist/texture.d.ts

@@ -1,4 +1,29 @@
+import { Rect } from "./types/rectangle.js";
 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;
+export declare function drawTexture(ctx: CanvasRenderingContext2D, texture: Texture, x: number, y: number, width?: number, height?: number, rotation?: number, flipX?: boolean, flipY?: boolean): void;
+export type TextureAtlas = {
+    image: HTMLImageElement;
+    frames: Record<string, Rect>;
+};
+export declare function loadAtlas(imageSrc: string, dataSrc: string): Promise<TextureAtlas>;
+export declare function drawAtlasFrame(ctx: CanvasRenderingContext2D, atlas: TextureAtlas, frameName: string, x: number, y: number, width?: number, height?: number, rotation?: number, flipX?: boolean, flipY?: boolean): void;
+export declare class AnimationPlayer {
+    animation: Animation;
+    private time;
+    private currentFrameIndex;
+    private finished;
+    constructor(animation: Animation);
+    update(deltaTime: number): void;
+    getCurrentFrame(): string;
+    reset(): void;
+    isFinished(): boolean;
+}
+export type Animation = {
+    frames: string[];
+    fps: number;
+    loop?: boolean;
+};
+export declare function drawAnimation(ctx: CanvasRenderingContext2D, atlas: TextureAtlas, player: AnimationPlayer, x: number, y: number, width?: number, height?: number, rotation?: number, flipX?: boolean, flipY?: boolean): void;
+export declare function getFlipFromDirection(dir: number): boolean;

package/dist/texture.js

@@ -27,20 +27,138 @@ export function loadTextureAsync(src) {
         img.src = finalSrc;
     });
 }
+// Function to get the Texture
 export function getTexture(src) {
     return textures[getresourcepath(src)];
 }
-export function drawTexture(ctx, texture, x, y, width, height) {
+// Function to draw a texture to the Screen
+export function drawTexture(ctx, texture, x, y, width, height, rotation = 0, flipX = false, flipY = false) {
     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);
+    const w = width ?? texture.width;
+    const h = height ?? texture.height;
+    ctx.save();
+    const cx = x + w / 2;
+    const cy = y + h / 2;
+    ctx.translate(cx, cy);
+    ctx.rotate(rotation);
+    // 🔹 Flip anwenden
+    ctx.scale(flipX ? -1 : 1, flipY ? -1 : 1);
+    ctx.drawImage(texture, -w / 2, -h / 2, w, h);
+    ctx.restore();
+}
+// Funtion to load an Atlas
+//
+// JSON Format for the LoadAtlas Function
+//
+// {
+//   "frames": {
+//     "player_idle_0": { "x": 0, "y": 0, "w": 32, "h": 32 },
+//     "player_idle_1": { "x": 32, "y": 0, "w": 32, "h": 32 }
+//   }
+// }
+//
+export async function loadAtlas(imageSrc, dataSrc) {
+    const [image, data] = await Promise.all([
+        loadTextureAsync(imageSrc),
+        fetch(getresourcepath(dataSrc)).then(r => r.json())
+    ]);
+    return {
+        image,
+        frames: data.frames
+    };
+}
+export function drawAtlasFrame(ctx, atlas, frameName, x, y, width, height, rotation = 0, flipX = false, flipY = false) {
+    const frame = atlas.frames[frameName];
+    if (!frame) {
+        dlog(`Frame not found: ${frameName}`);
+        return;
+    }
+    const w = width ?? frame.width;
+    const h = height ?? frame.height;
+    ctx.save();
+    const cx = x + w / 2;
+    const cy = y + h / 2;
+    ctx.translate(cx, cy);
+    ctx.rotate(rotation);
+    // 🔹 Flip
+    ctx.scale(flipX ? -1 : 1, flipY ? -1 : 1);
+    ctx.drawImage(atlas.image, frame.x, frame.y, frame.width, frame.height, -w / 2, -h / 2, w, h);
+    ctx.restore();
+}
+//
+//
+// Animation Player
+//
+//
+//
+// // Define Animation
+// const walkAnimation: Animation = {
+//     frames: ["walk_0", "walk_1", "walk_2", "walk_3"],
+//     fps: 8,
+//     loop: true
+// };
+//
+// const player = new AnimationPlayer(walkAnimation);
+//
+// // Game Loop
+// function update(dt: number) {
+//     player.update(dt);
+// }
+//
+// function render(ctx: CanvasRenderingContext2D) {
+//     drawAnimation(ctx, atlas, player, 100, 100, 64, 64);
+// }
+//
+//
+// Animation Player Class
+export class AnimationPlayer {
+    // Konstruktor Function
+    constructor(animation) {
+        this.animation = animation;
+        this.time = 0;
+        this.currentFrameIndex = 0;
+        this.finished = false;
     }
-    else {
-        ctx.drawImage(texture, x, y);
+    update(deltaTime) {
+        if (this.finished)
+            return;
+        this.time += deltaTime;
+        const frameDuration = 1 / this.animation.fps;
+        while (this.time >= frameDuration) {
+            this.time -= frameDuration;
+            this.currentFrameIndex++;
+            if (this.currentFrameIndex >= this.animation.frames.length) {
+                if (this.animation.loop) {
+                    this.currentFrameIndex = 0;
+                }
+                else {
+                    this.currentFrameIndex = this.animation.frames.length - 1;
+                    this.finished = true;
+                }
+            }
+        }
     }
+    getCurrentFrame() {
+        return this.animation.frames[this.currentFrameIndex];
+    }
+    reset() {
+        this.time = 0;
+        this.currentFrameIndex = 0;
+        this.finished = false;
+    }
+    isFinished() {
+        return this.finished;
+    }
+}
+export function drawAnimation(ctx, atlas, player, x, y, width, height, rotation = 0, flipX = false, flipY = false) {
+    const frame = player.getCurrentFrame();
+    drawAtlasFrame(ctx, atlas, frame, x, y, width, height, rotation, flipX, flipY);
+}
+export function getFlipFromDirection(dir) {
+    return dir < 0; // links = true
 }

package/dist/types/circle.d.ts

@@ -0,0 +1,13 @@
+import { Mouse } from "../input.js";
+import { type Vector2d } from "./vector2d.js";
+export type Circle = {
+    x: number;
+    y: number;
+    radius: number;
+};
+export declare function centerCircle(circle: Circle): Vector2d;
+export declare function isPointInCircle(x: number, y: number, circle: Circle): boolean;
+export declare function isMouseInCircle(mouse: Mouse, circle: Circle): boolean;
+export declare function isCircleClicked(mouse: Mouse, circle: Circle): boolean;
+export declare function isCircleColliding(circle1: Circle, circle2: Circle): boolean;
+export declare function getCircleDistance(circle1: Circle, circle2: Circle): number;

package/dist/types/circle.js

@@ -0,0 +1,30 @@
+// Circle Type for Hitboxes
+// Function to get the Center of the Circle as Vector2d
+export function centerCircle(circle) {
+    return { x: circle.x, y: circle.y };
+}
+// Check if a Point is in the Circle
+export function isPointInCircle(x, y, circle) {
+    const distance = Math.sqrt((x - circle.x) * (x - circle.x) +
+        (y - circle.y) * (y - circle.y));
+    return distance <= circle.radius;
+}
+// Check if Mouse is in the Circle
+export function isMouseInCircle(mouse, circle) {
+    return isPointInCircle(mouse.x, mouse.y, circle);
+}
+// Function to check if a Circle is clicked
+export function isCircleClicked(mouse, circle) {
+    return isMouseInCircle(mouse, circle) && mouse.justPressed;
+}
+// Check if two Circles collide
+export function isCircleColliding(circle1, circle2) {
+    const distance = Math.sqrt((circle1.x - circle2.x) * (circle1.x - circle2.x) +
+        (circle1.y - circle2.y) * (circle1.y - circle2.y));
+    return distance <= (circle1.radius + circle2.radius);
+}
+// Check if Circle collides with Rectangle (imported from rectangle.ts would cause circular dependency)
+export function getCircleDistance(circle1, circle2) {
+    return Math.sqrt((circle1.x - circle2.x) * (circle1.x - circle2.x) +
+        (circle1.y - circle2.y) * (circle1.y - circle2.y));
+}

package/dist/types/index.d.ts

@@ -1,5 +1,7 @@
-export { type Vector2d, normalize2d, clamp2d, lerp2d, map2d } from "./vector2d.js";
-export { type Vector3d, normalize3d, clamp3d, lerp3d, map3d } from "./vector3d.js";
+export { type Vector2d, add2d, subtract2d, length2d, normalize2d, dot2d, distance2d, clamp2d, lerp2d, map2d } from "./vector2d.js";
+export { type Vector3d, add3d, subtract3d, length3d, normalize3d, dot3d, crossprodukt3d, distance3d, clamp3d, lerp3d, map3d } from "./vector3d.js";
 export { type Color, invertcolor, invertHexColor } from "./color.js";
 export { type Rect, centerRectX, centerRectY, centerRect, isPointInRect, isMouseInRect, isRectClicked } from "./rectangle.js";
+export { type Circle, centerCircle, isPointInCircle, isMouseInCircle, isCircleClicked, isCircleColliding, getCircleDistance } from "./circle.js";
+export { type Triangle, centerTriangle, isPointInTriangle, isMouseInTriangle, isTriangleClicked, getTrianglePerimeter, } from "./triangle.js";
 export { clamp, lerp, map } from "./math-utils.js";

package/dist/types/index.js

@@ -1,11 +1,15 @@
 // Types Export
 // Vector 2D
-export { normalize2d, clamp2d, lerp2d, map2d } from "./vector2d.js";
+export { add2d, subtract2d, length2d, normalize2d, dot2d, distance2d, clamp2d, lerp2d, map2d } from "./vector2d.js";
 // Vector 3D
-export { normalize3d, clamp3d, lerp3d, map3d } from "./vector3d.js";
+export { add3d, subtract3d, length3d, normalize3d, dot3d, crossprodukt3d, distance3d, clamp3d, lerp3d, map3d } from "./vector3d.js";
 // Color Type
 export { invertcolor, invertHexColor } from "./color.js";
 // Retangle Type
 export { centerRectX, centerRectY, centerRect, isPointInRect, isMouseInRect, isRectClicked } from "./rectangle.js";
+// Circle Type
+export { centerCircle, isPointInCircle, isMouseInCircle, isCircleClicked, isCircleColliding, getCircleDistance } from "./circle.js";
+// Triangle Type
+export { centerTriangle, isPointInTriangle, isMouseInTriangle, isTriangleClicked, getTrianglePerimeter, } from "./triangle.js";
 // Math Utilities
 export { clamp, lerp, map } from "./math-utils.js";

package/dist/types/triangle.d.ts

@@ -0,0 +1,15 @@
+import { Mouse } from "../input.js";
+import { type Vector2d } from "./vector2d.js";
+export type Triangle = {
+    x1: number;
+    y1: number;
+    x2: number;
+    y2: number;
+    x3: number;
+    y3: number;
+};
+export declare function centerTriangle(triangle: Triangle): Vector2d;
+export declare function isPointInTriangle(x: number, y: number, triangle: Triangle): boolean;
+export declare function isMouseInTriangle(mouse: Mouse, triangle: Triangle): boolean;
+export declare function isTriangleClicked(mouse: Mouse, triangle: Triangle): boolean;
+export declare function getTrianglePerimeter(triangle: Triangle): number;

package/dist/types/triangle.js

@@ -0,0 +1,38 @@
+// Triangle Type for Hitboxes
+// Helper function to calculate the area of a triangle (used for point-in-triangle)
+function getTriangleArea(x1, y1, x2, y2, x3, y3) {
+    return Math.abs((x1 * (y2 - y3) + x2 * (y3 - y1) + x3 * (y1 - y2)) / 2.0);
+}
+// Function to get the Center of the Triangle
+export function centerTriangle(triangle) {
+    return {
+        x: (triangle.x1 + triangle.x2 + triangle.x3) / 3,
+        y: (triangle.y1 + triangle.y2 + triangle.y3) / 3
+    };
+}
+// Check if a Point is in the Triangle using barycentric coordinates
+export function isPointInTriangle(x, y, triangle) {
+    const areaTriangle = getTriangleArea(triangle.x1, triangle.y1, triangle.x2, triangle.y2, triangle.x3, triangle.y3);
+    const area1 = getTriangleArea(x, y, triangle.x2, triangle.y2, triangle.x3, triangle.y3);
+    const area2 = getTriangleArea(triangle.x1, triangle.y1, x, y, triangle.x3, triangle.y3);
+    const area3 = getTriangleArea(triangle.x1, triangle.y1, triangle.x2, triangle.y2, x, y);
+    return Math.abs(areaTriangle - (area1 + area2 + area3)) < 0.01;
+}
+// Check if Mouse is in the Triangle
+export function isMouseInTriangle(mouse, triangle) {
+    return isPointInTriangle(mouse.x, mouse.y, triangle);
+}
+// Function to check if a Triangle is clicked
+export function isTriangleClicked(mouse, triangle) {
+    return isMouseInTriangle(mouse, triangle) && mouse.justPressed;
+}
+// Get the Perimeter of the Triangle
+export function getTrianglePerimeter(triangle) {
+    const side1 = Math.sqrt((triangle.x2 - triangle.x1) * (triangle.x2 - triangle.x1) +
+        (triangle.y2 - triangle.y1) * (triangle.y2 - triangle.y1));
+    const side2 = Math.sqrt((triangle.x3 - triangle.x2) * (triangle.x3 - triangle.x2) +
+        (triangle.y3 - triangle.y2) * (triangle.y3 - triangle.y2));
+    const side3 = Math.sqrt((triangle.x1 - triangle.x3) * (triangle.x1 - triangle.x3) +
+        (triangle.y1 - triangle.y3) * (triangle.y1 - triangle.y3));
+    return side1 + side2 + side3;
+}

package/dist/types/vector2d.d.ts

@@ -2,7 +2,12 @@ export type Vector2d = {
     x: number;
     y: number;
 };
+export declare function add2d(vector1: Vector2d, vector2: Vector2d): Vector2d;
+export declare function subtract2d(vector1: Vector2d, vector2: Vector2d): Vector2d;
+export declare function length2d(vector: Vector2d): number;
 export declare function normalize2d(vector: Vector2d): Vector2d;
+export declare function dot2d(v1: Vector2d, v2: Vector2d): number;
+export declare function distance2d(v1: Vector2d, v2: Vector2d): number;
 export declare function clamp2d(vector: Vector2d, min: Vector2d, max: Vector2d): Vector2d;
 export declare function lerp2d(start: Vector2d, end: Vector2d, t: Vector2d): Vector2d;
 export declare function map2d(value: Vector2d, inMin: Vector2d, inMax: Vector2d, outMin: Vector2d, outMax: Vector2d): Vector2d;

package/dist/types/vector2d.js

@@ -1,5 +1,25 @@
 // 2 Dimensional Vector Type
 import { clamp, lerp, map } from "./math-utils.js";
+// Function to add 2 Vectors together
+export function add2d(vector1, vector2) {
+    return {
+        x: vector1.x + vector2.x,
+        y: vector1.y + vector2.y,
+    };
+}
+// Function to subtract 2 Vectors from each other
+export function subtract2d(vector1, vector2) {
+    return {
+        x: vector1.x - vector2.x,
+        y: vector1.y - vector2.y,
+    };
+}
+// Function to get the length from an Vector
+export function length2d(vector) {
+    let produkt = vector.x * vector.x + vector.y * vector.y;
+    let root = Math.sqrt(produkt);
+    return root;
+}
 // Function to normalize a Vector 2d
 export function normalize2d(vector) {
     // Check if the Vector is zero because then you dont need to
@@ -7,12 +27,21 @@ export function normalize2d(vector) {
     if (vector.x == 0 && vector.y == 0) {
         return vector;
     }
-    let produkt = vector.x * vector.x + vector.y * vector.y;
-    let root = Math.sqrt(produkt);
+    let root = length2d(vector);
     vector.x = vector.x / root;
     vector.y = vector.y / root;
     return vector;
 }
+// Function to make scalar produkt from an Vector
+export function dot2d(v1, v2) {
+    return (v1.x * v2.x + v1.y * v2.y);
+}
+// crossprodukt (only for 3 Dimensinal Vectors)
+// Calculate the Distance between 2 Vectors
+export function distance2d(v1, v2) {
+    let tmp = subtract2d(v1, v2);
+    return length2d(tmp);
+}
 // Function to clamp a Vector 2d
 export function clamp2d(vector, min, max) {
     return {

package/dist/types/vector3d.d.ts

@@ -3,7 +3,13 @@ export type Vector3d = {
     y: number;
     z: number;
 };
+export declare function add3d(vector1: Vector3d, vector2: Vector3d): Vector3d;
+export declare function subtract3d(vector1: Vector3d, vector2: Vector3d): Vector3d;
+export declare function length3d(vector: Vector3d): number;
 export declare function normalize3d(vector: Vector3d): Vector3d;
+export declare function dot3d(v1: Vector3d, v2: Vector3d): number;
+export declare function crossprodukt3d(v1: Vector3d, v2: Vector3d): Vector3d;
+export declare function distance3d(v1: Vector3d, v2: Vector3d): number;
 export declare function clamp3d(vector: Vector3d, min: Vector3d, max: Vector3d): Vector3d;
 export declare function lerp3d(start: Vector3d, end: Vector3d, t: Vector3d): Vector3d;
 export declare function map3d(value: Vector3d, inMin: Vector3d, inMax: Vector3d, outMin: Vector3d, outMax: Vector3d): Vector3d;

package/dist/types/vector3d.js

@@ -1,5 +1,27 @@
 // 3d Vector
 import { clamp, lerp, map } from "./math-utils.js";
+// Function to add 2 Vectors together
+export function add3d(vector1, vector2) {
+    return {
+        x: vector1.x + vector2.x,
+        y: vector1.y + vector2.y,
+        z: vector1.z + vector2.z,
+    };
+}
+// Function to subtract 2 Vectors from each other
+export function subtract3d(vector1, vector2) {
+    return {
+        x: vector1.x - vector2.x,
+        y: vector1.y - vector2.y,
+        z: vector1.z - vector2.z,
+    };
+}
+// Function to get the length from an Vector
+export function length3d(vector) {
+    let produkt = vector.x * vector.x + vector.y * vector.y + vector.z * vector.z;
+    let root = Math.sqrt(produkt);
+    return root;
+}
 // Function to normalize a Vector 2d
 export function normalize3d(vector) {
     // Check if the Vector is zero because then you dont need to
@@ -7,13 +29,29 @@ export function normalize3d(vector) {
     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);
+    let root = length3d(vector);
     vector.x = vector.x / root;
     vector.y = vector.y / root;
     vector.z = vector.z / root;
     return vector;
 }
+// Function to make scalar produkt from an Vector
+export function dot3d(v1, v2) {
+    return (v1.x * v2.x + v1.y * v2.y + v1.z * v2.z);
+}
+// Function to calculate the cross produkt
+export function crossprodukt3d(v1, v2) {
+    return {
+        x: (v1.y * v2.z - v1.z * v2.y),
+        y: (v1.z * v2.x - v1.x * v2.z),
+        z: (v1.x * v2.y - v1.y * v2.x),
+    };
+}
+// Calculate the Distance between 2 Vectors
+export function distance3d(v1, v2) {
+    let tmp = subtract3d(v1, v2);
+    return length3d(tmp);
+}
 // Function to clamp a Vector 3d
 export function clamp3d(vector, min, max) {
     return {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shadowdara/webgameengine",
-  "version": "1.1.0",
+  "version": "1.3.0",
   "description": "A TypeScript game library to make HTML Games",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -10,10 +10,10 @@
   ],
   "scripts": {
     "build": "tsc",
-    "pack": "npm run build && npm pack"
+    "pack": "node clean.js && npm run build && npm pack"
   },
   "bin": {
-    "webgameengine": "dist/build/tools/devserver/cli.js"
+    "webgameengine": "dist/build/cli/cli.js"
   },
   "exports": {
     ".": "./dist/index.js",

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

@@ -1,105 +0,0 @@
-#!/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"}`);