@shadowdara/webgameengine 1.1.0 → 1.2.0

package/README.md

@@ -51,8 +51,9 @@ 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
 ```
 
 ### Configuration

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/package.json

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