@shadowdara/webgameengine 1.0.0 → 1.2.0

package/README.md

@@ -1,9 +1,5 @@
 # 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
@@ -19,14 +15,7 @@ A lightweight, TypeScript-first web game engine framework for building 2D games.
 ## Installation
 
 ```bash
-npm install @yourusername/webgameengine
-```
-
-Or use directly from source:
-
-```bash
-bun install
-bun run dev
+npm install @shadowdara/webgameengine
 ```
 
 ## Quick Start
@@ -34,7 +23,7 @@ bun run dev
 ### Basic Game Loop
 
 ```typescript
-import { startEngine, setupInput, dlog, renderText } from '@yourusername/webgameengine';
+import { startEngine, setupInput, dlog, renderText } from '@shadowdara/webgameengine';
 
 const canvas = document.getElementById('gameCanvas') as HTMLCanvasElement;
 const ctx = canvas.getContext('2d')!;
@@ -62,19 +51,17 @@ startEngine(init, gameLoop);
 ### 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
-
-
+npx webgameengine                   # Start Dev Server
+npx webgameengine --release         # Production build
+npx webgameengine --new             # Create a new project with a simple Snake Clone as Template
 ```
 
 ### Configuration
 
-Edit `project.ts` to configure your game:
+Edit `webgameengine.config.ts` to configure your game:
 
 ```typescript
-import { defineConfig } from './project';
+import { defineConfig } from '@shadowdara/webgameengine/build';
 
 export function defineConfig() {
   return {
@@ -90,7 +77,7 @@ or
 ```typescript
 // Project File for the Game
 
-import { type buildconfig, new_buildconfig } from "./engine/build/buildconfig";
+import { type buildconfig, new_buildconfig } from "@shadowdara/webgameengine/build";
 
 export function defineConfig(): buildconfig {
     let config: buildconfig = new_buildconfig();

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

@@ -1,28 +1,66 @@
 #!/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 { createProject } from "./new.js";
+import { copyFolder, flog, getContentType } from "../../buildhelper.js";
+import { GetDefaultHTML } from "../../exporthtml.js";
 import { loadUserConfig } from "./config.js";
-const config = await loadUserConfig();
-// console.log("CONFIG:", config);
-let isBuilding = false;
-const isRelease = process.argv.includes("--release");
+// ================= ARG PARSING =================
+function parseArgs() {
+    const args = process.argv.slice(2);
+    const options = {
+        release: false,
+        port: 3000,
+        newProject: null,
+    };
+    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;
+            default:
+                console.warn(`⚠️ Unbekanntes Argument: ${arg}`);
+        }
+    }
+    return options;
+}
+const args = parseArgs();
+// Falls --new → sofort ausführen und beenden
+if (args.newProject) {
+    await createProject(args.newProject);
+    // and make exit afterwards
+}
+// ================= FLAGS =================
+const isRelease = args.release;
 const isDev = !isRelease;
+// ================= CONFIG =================
+const config = await loadUserConfig();
 // ================= BUILD =================
-async function build(config) {
+let isBuilding = false;
+async function build() {
     if (isBuilding)
         return;
     isBuilding = true;
     flog("🔄 Baue neu...");
     await esbuild({
-        entryPoints: ["./game/" + config.entryname],
-        outdir: "./" + config.outdir,
+        entryPoints: [`./game/${config.entryname}`],
+        outdir: `./${config.outdir}`,
         bundle: true,
         platform: "browser",
         minify: isRelease,
@@ -41,8 +79,8 @@ async function build(config) {
 let sockets = new Set();
 function startServer() {
     const server = createServer(async (req, res) => {
-        let url = req.url || "/";
-        let filePath = url === "/" ? "/index.html" : url;
+        const url = req.url || "/";
+        const filePath = url === "/" ? "/index.html" : url;
         try {
             const fullPath = path.join(process.cwd(), "dist", filePath);
             const file = await readFile(fullPath);
@@ -61,8 +99,8 @@ function startServer() {
         sockets.add(ws);
         ws.on("close", () => sockets.delete(ws));
     });
-    server.listen(3000, () => {
-        flog("🚀 Dev Server läuft auf http://localhost:3000");
+    server.listen(args.port, () => {
+        flog(`🚀 Dev Server läuft auf http://localhost:${args.port}`);
     });
     return server;
 }
@@ -85,13 +123,13 @@ async function restart() {
     do {
         pendingRestart = false;
         flog("♻️ Restart...");
-        await build(config);
+        await build();
         reloadClients();
     } while (pendingRestart);
     restarting = false;
 }
 // ================= START =================
-await build(config);
+await build();
 if (isDev) {
     startServer();
     ["resources", "game"].forEach((dir) => {

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

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

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

@@ -0,0 +1,156 @@
+import path from "path";
+import { writeFile, mkdir } from "fs/promises";
+import { flog } from "../../buildhelper.js";
+// ================= NEW PROJECT =================
+export async function createProject(name) {
+    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 });
+    // Basic game entry
+    await writeFile(path.join(base, "game", "main.ts"), `
+// 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;
+
+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();
+}
+
+startEngine(gameStart, gameLoop);
+`);
+    // 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/renderer.d.ts

@@ -1,4 +1,4 @@
-import { type Rect } from "./types/rectangle";
+import { type Rect } from "./types/rectangle.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;

package/dist/texture.js

@@ -1,4 +1,4 @@
-import { dlog } from "./logger";
+import { dlog } from "./logger.js";
 const textures = {};
 function getresourcepath(path) {
     return "resources/" + path;

package/dist/types/index.d.ts

@@ -1,5 +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";
+export { type Vector2d, normalize2d, clamp2d, lerp2d, map2d } from "./vector2d.js";
+export { type Vector3d, normalize3d, 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 { clamp, lerp, map } from "./math-utils.js";

package/dist/types/index.js

@@ -1,4 +1,11 @@
 // Types Export
-export { isRectClicked } from "./rectangle.js";
+// Vector 2D
+export { normalize2d, clamp2d, lerp2d, map2d } from "./vector2d.js";
+// Vector 3D
+export { normalize3d, 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";
 // Math Utilities
-// export * from "./math-utils.js";
+export { clamp, lerp, map } from "./math-utils.js";

package/dist/types/rectangle.d.ts

@@ -1,5 +1,5 @@
-import { Mouse } from "../input";
-import { type Vector2d } from "./vector2d";
+import { Mouse } from "../input.js";
+import { type Vector2d } from "./vector2d.js";
 export type Rect = {
     x: number;
     y: number;

package/dist/types/vector2d.d.ts

@@ -5,3 +5,4 @@ export type Vector2d = {
 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;
+export declare function map2d(value: Vector2d, inMin: Vector2d, inMax: Vector2d, outMin: Vector2d, outMax: Vector2d): Vector2d;

package/dist/types/vector2d.js

@@ -1,5 +1,5 @@
 // 2 Dimensional Vector Type
-import { clamp, lerp } from "./math-utils";
+import { clamp, lerp, map } from "./math-utils.js";
 // Function to normalize a Vector 2d
 export function normalize2d(vector) {
     // Check if the Vector is zero because then you dont need to
@@ -27,3 +27,10 @@ export function lerp2d(start, end, t) {
         y: lerp(start.y, end.y, t.y),
     };
 }
+// Map Function for a 2d Vector
+export function map2d(value, inMin, inMax, outMin, outMax) {
+    return {
+        x: map(value.x, inMin.x, inMax.x, outMin.x, outMax.x),
+        y: map(value.y, inMin.y, inMax.y, outMin.y, outMax.y),
+    };
+}

package/dist/types/vector3d.d.ts

@@ -6,3 +6,4 @@ export type Vector3d = {
 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;
+export declare function map3d(value: Vector3d, inMin: Vector3d, inMax: Vector3d, outMin: Vector3d, outMax: Vector3d): Vector3d;

package/dist/types/vector3d.js

@@ -1,5 +1,5 @@
 // 3d Vector
-import { clamp, lerp } from "./math-utils";
+import { clamp, lerp, map } from "./math-utils.js";
 // Function to normalize a Vector 2d
 export function normalize3d(vector) {
     // Check if the Vector is zero because then you dont need to
@@ -14,7 +14,7 @@ export function normalize3d(vector) {
     vector.z = vector.z / root;
     return vector;
 }
-// Function to clamp a Vector 2d
+// Function to clamp a Vector 3d
 export function clamp3d(vector, min, max) {
     return {
         x: clamp(vector.x, min.x, max.x),
@@ -22,7 +22,7 @@ export function clamp3d(vector, min, max) {
         z: clamp(vector.y, min.y, max.y),
     };
 }
-// Lerp for a 2d Vector
+// Lerp for a 3d Vector
 export function lerp3d(start, end, t) {
     return {
         x: lerp(start.x, end.x, t.x),
@@ -30,3 +30,11 @@ export function lerp3d(start, end, t) {
         z: lerp(start.y, end.y, t.y),
     };
 }
+// Map Function for a 3d Vector
+export function map3d(value, inMin, inMax, outMin, outMax) {
+    return {
+        x: map(value.x, inMin.x, inMax.x, outMin.x, outMax.x),
+        y: map(value.y, inMin.y, inMax.y, outMin.y, outMax.y),
+        z: map(value.z, inMin.z, inMax.z, outMin.z, outMax.z),
+    };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shadowdara/webgameengine",
-  "version": "1.0.0",
+  "version": "1.2.0",
   "description": "A TypeScript game library to make HTML Games",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",