cubeforge 0.0.7 → 0.0.9

package/dist/index.js

@@ -90,7 +90,27 @@ class ECSWorld {
   hasComponent(id, type) {
     return this.componentIndex.get(id)?.has(type) ?? false;
   }
+  flushDirty() {
+    if (this.dirtyAll) {
+      this.queryCache.clear();
+      this.dirtyAll = false;
+      this.dirtyTypes.clear();
+    } else if (this.dirtyTypes.size > 0) {
+      for (const key of this.queryCache.keys()) {
+        if (key === "") {
+          this.queryCache.delete(key);
+          continue;
+        }
+        const keyTypes = key.split("\x00");
+        if (keyTypes.some((t) => this.dirtyTypes.has(t))) {
+          this.queryCache.delete(key);
+        }
+      }
+      this.dirtyTypes.clear();
+    }
+  }
   query(...types) {
+    this.flushDirty();
     const key = types.slice().sort().join("\x00");
     const cached = this.queryCache.get(key);
     if (cached)
@@ -106,6 +126,7 @@ class ECSWorld {
     return result;
   }
   queryOne(...types) {
+    this.flushDirty();
     for (const arch of this.archetypes.values()) {
       if (types.every((t) => arch.types.has(t))) {
         if (arch.entities.length > 0)
@@ -176,22 +197,6 @@ class ECSWorld {
       this.systems.splice(idx, 1);
   }
   update(dt) {
-    if (this.dirtyAll) {
-      this.queryCache.clear();
-    } else if (this.dirtyTypes.size > 0) {
-      for (const key of this.queryCache.keys()) {
-        if (key === "") {
-          this.queryCache.delete(key);
-          continue;
-        }
-        const keyTypes = key.split("\x00");
-        if (keyTypes.some((t) => this.dirtyTypes.has(t))) {
-          this.queryCache.delete(key);
-        }
-      }
-    }
-    this.dirtyAll = false;
-    this.dirtyTypes.clear();
     for (const system of this.systems) {
       system.update(this, dt);
     }
@@ -315,6 +320,7 @@ class EventBus {
 // ../core/src/assets/assetManager.ts
 class AssetManager {
   images = new Map;
+  imagePromises = new Map;
   audio = new Map;
   audioCtx = null;
   activeSources = new Map;
@@ -325,21 +331,28 @@ class AssetManager {
     return this.audioCtx;
   }
   async loadImage(src) {
-    if (this.images.has(src))
-      return this.images.get(src);
-    const img = new Image;
-    img.src = src;
-    try {
-      await new Promise((resolve, reject) => {
-        img.onload = () => resolve();
-        img.onerror = () => reject(new Error(`Failed to load image: ${src}`));
-      });
-    } catch (err) {
-      console.warn(`[Cubeforge] Failed to load image: ${src}`);
-      throw err;
-    }
-    this.images.set(src, img);
-    return img;
+    if (this.imagePromises.has(src))
+      return this.imagePromises.get(src);
+    const promise = (async () => {
+      const img = new Image;
+      img.src = src;
+      try {
+        await new Promise((resolve, reject) => {
+          img.onload = () => resolve();
+          img.onerror = () => reject(new Error(`Failed to load image: ${src}`));
+        });
+      } catch (err) {
+        console.warn(`[Cubeforge] Failed to load image: ${src}`);
+        throw err;
+      }
+      this.images.set(src, img);
+      return img;
+    })();
+    this.imagePromises.set(src, promise);
+    return promise;
+  }
+  async waitForImages() {
+    await Promise.allSettled([...this.imagePromises.values()]);
   }
   getImage(src) {
     return this.images.get(src);
@@ -1995,6 +2008,7 @@ function Game({
   scale = "none",
   deterministic = false,
   seed = 0,
+  asyncAssets = false,
   onReady,
   plugins,
   renderer: CustomRenderer,
@@ -2005,6 +2019,7 @@ function Game({
   const canvasRef = useRef(null);
   const wrapperRef = useRef(null);
   const [engine, setEngine] = useState2(null);
+  const [assetsReady, setAssetsReady] = useState2(asyncAssets);
   const devtoolsHandle = useRef({ buffer: [] });
   useEffect2(() => {
     const canvas = canvasRef.current;
@@ -2058,7 +2073,6 @@ function Game({
         plugin2.onInit?.(state);
       }
     }
-    loop.start();
     onReady?.({
       pause: () => loop.pause(),
       resume: () => loop.resume(),
@@ -2092,6 +2106,25 @@ function Game({
       resizeObserver?.disconnect();
     };
   }, []);
+  useEffect2(() => {
+    if (!engine)
+      return;
+    let cancelled = false;
+    if (asyncAssets) {
+      engine.loop.start();
+      setAssetsReady(true);
+      return;
+    }
+    engine.assets.waitForImages().then(() => {
+      if (!cancelled) {
+        engine.loop.start();
+        setAssetsReady(true);
+      }
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [engine]);
   useEffect2(() => {
     engine?.physics.setGravity(gravity);
   }, [gravity, engine]);
@@ -2101,21 +2134,71 @@ function Game({
     imageRendering: scale === "pixel" ? "pixelated" : undefined,
     ...style
   };
-  const wrapperStyle = scale === "contain" ? { position: "relative", width, height, overflow: "visible" } : {};
+  const wrapperStyle = {
+    position: "relative",
+    display: "inline-block",
+    ...scale === "contain" ? { width, height, overflow: "visible" } : {}
+  };
   return /* @__PURE__ */ jsxDEV2(EngineContext.Provider, {
     value: engine,
     children: [
       /* @__PURE__ */ jsxDEV2("div", {
         ref: wrapperRef,
         style: wrapperStyle,
-        children: /* @__PURE__ */ jsxDEV2("canvas", {
-          ref: canvasRef,
-          width,
-          height,
-          style: canvasStyle,
-          className
-        }, undefined, false, undefined, this)
-      }, undefined, false, undefined, this),
+        children: [
+          /* @__PURE__ */ jsxDEV2("canvas", {
+            ref: canvasRef,
+            width,
+            height,
+            style: canvasStyle,
+            className
+          }, undefined, false, undefined, this),
+          !assetsReady && /* @__PURE__ */ jsxDEV2("div", {
+            style: {
+              position: "absolute",
+              inset: 0,
+              display: "flex",
+              flexDirection: "column",
+              alignItems: "center",
+              justifyContent: "center",
+              background: "#0a0a0f",
+              pointerEvents: "none"
+            },
+            children: [
+              /* @__PURE__ */ jsxDEV2("div", {
+                style: { display: "flex", gap: 6, marginBottom: 12 },
+                children: [0, 1, 2].map((i) => /* @__PURE__ */ jsxDEV2("div", {
+                  style: {
+                    width: 8,
+                    height: 8,
+                    borderRadius: "50%",
+                    background: "#4fc3f7",
+                    animation: "cubeforge-loading-dot 1.2s ease-in-out infinite",
+                    animationDelay: `${i * 0.2}s`
+                  }
+                }, i, false, undefined, this))
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV2("span", {
+                style: {
+                  fontFamily: "monospace",
+                  fontSize: 11,
+                  letterSpacing: 3,
+                  color: "#37474f"
+                },
+                children: "LOADING"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV2("style", {
+                children: `
+              @keyframes cubeforge-loading-dot {
+                0%, 80%, 100% { transform: scale(0.6); opacity: 0.3; }
+                40%           { transform: scale(1);   opacity: 1;   }
+              }
+            `
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
       engine && children,
       engine && devtools && /* @__PURE__ */ jsxDEV2(DevToolsOverlay, {
         handle: devtoolsHandle.current,
@@ -2247,7 +2330,10 @@ function Sprite({
     });
     engine.ecs.addComponent(entityId, comp);
     if (src) {
-      engine.assets.loadImage(src).then((img) => {
+      const viteEnv = import.meta.env;
+      const base = (viteEnv?.BASE_URL ?? "/").replace(/\/$/, "");
+      const resolvedSrc = base && src.startsWith("/") ? base + src : src;
+      engine.assets.loadImage(resolvedSrc).then((img) => {
         const c = engine.ecs.getComponent(entityId, "Sprite");
         if (c)
           c.image = img;
@@ -2356,6 +2442,8 @@ function Script({ init, update }) {
 import { useEffect as useEffect11, useContext as useContext9 } from "react";
 function Camera2D({
   followEntity,
+  x = 0,
+  y = 0,
   zoom = 1,
   smoothing = 0,
   background = "#1a1a2e",
@@ -2369,6 +2457,8 @@ function Camera2D({
     const entityId = engine.ecs.createEntity();
     engine.ecs.addComponent(entityId, createCamera2D({
       followEntityId: followEntity,
+      x,
+      y,
       zoom,
       smoothing,
       background,
@@ -3267,6 +3357,9 @@ export {
   overlapBox,
   findByTag,
   definePlugin,
+  createTransform,
+  createTag,
+  createSprite,
   createInputMap,
   createAtlas,
   World,

package/dist/systems/debugSystem.js

@@ -0,0 +1,104 @@
+export class DebugSystem {
+    renderer;
+    frameCount = 0;
+    lastFpsTime = 0;
+    fps = 0;
+    constructor(renderer) {
+        this.renderer = renderer;
+    }
+    update(world, dt) {
+        const { ctx, canvas } = this.renderer;
+        // FPS tracking
+        this.frameCount++;
+        this.lastFpsTime += dt;
+        if (this.lastFpsTime >= 0.5) {
+            this.fps = Math.round(this.frameCount / this.lastFpsTime);
+            this.frameCount = 0;
+            this.lastFpsTime = 0;
+        }
+        // Get camera for world-space drawing
+        const camId = world.queryOne('Camera2D');
+        let camX = 0, camY = 0, zoom = 1;
+        if (camId !== undefined) {
+            const cam = world.getComponent(camId, 'Camera2D');
+            camX = cam.x;
+            camY = cam.y;
+            zoom = cam.zoom;
+        }
+        // Draw collider wireframes in world space
+        ctx.save();
+        ctx.translate(canvas.width / 2 - camX * zoom, canvas.height / 2 - camY * zoom);
+        ctx.scale(zoom, zoom);
+        const lw = 1 / zoom;
+        for (const id of world.query('Transform', 'BoxCollider')) {
+            const t = world.getComponent(id, 'Transform');
+            const c = world.getComponent(id, 'BoxCollider');
+            ctx.strokeStyle = c.isTrigger ? 'rgba(255,200,0,0.85)' : 'rgba(0,255,120,0.85)';
+            ctx.lineWidth = lw;
+            ctx.strokeRect(t.x + c.offsetX - c.width / 2, t.y + c.offsetY - c.height / 2, c.width, c.height);
+            // Entity ID label
+            ctx.fillStyle = 'rgba(255,255,255,0.5)';
+            ctx.font = `${10 / zoom}px monospace`;
+            ctx.fillText(String(id), t.x + c.offsetX - c.width / 2 + lw, t.y + c.offsetY - c.height / 2 - lw * 2);
+        }
+        // Camera bounds visualization (drawn in same world-space context)
+        if (camId !== undefined) {
+            const camFull = world.getComponent(camId, 'Camera2D');
+            if (camFull.bounds) {
+                const b = camFull.bounds;
+                ctx.strokeStyle = 'rgba(0, 255, 255, 0.4)';
+                ctx.lineWidth = 1 / zoom;
+                ctx.setLineDash([8 / zoom, 4 / zoom]);
+                ctx.strokeRect(b.x, b.y, b.width, b.height);
+                ctx.setLineDash([]);
+            }
+        }
+        ctx.restore();
+        // Physics grid visualization (128px spatial broadphase grid)
+        const GRID_SIZE = 128;
+        ctx.save();
+        ctx.strokeStyle = 'rgba(255, 255, 255, 0.04)';
+        ctx.lineWidth = 1;
+        ctx.setLineDash([]);
+        // Compute visible world-space range
+        const offsetX = camX - canvas.width / (2 * zoom);
+        const offsetY = camY - canvas.height / (2 * zoom);
+        const visibleW = canvas.width / zoom;
+        const visibleH = canvas.height / zoom;
+        const startCol = Math.floor(offsetX / GRID_SIZE);
+        const endCol = Math.ceil((offsetX + visibleW) / GRID_SIZE);
+        const startRow = Math.floor(offsetY / GRID_SIZE);
+        const endRow = Math.ceil((offsetY + visibleH) / GRID_SIZE);
+        ctx.translate(canvas.width / 2 - camX * zoom, canvas.height / 2 - camY * zoom);
+        ctx.scale(zoom, zoom);
+        for (let col = startCol; col <= endCol; col++) {
+            const wx = col * GRID_SIZE;
+            ctx.beginPath();
+            ctx.moveTo(wx, startRow * GRID_SIZE);
+            ctx.lineTo(wx, endRow * GRID_SIZE);
+            ctx.stroke();
+        }
+        for (let row = startRow; row <= endRow; row++) {
+            const wy = row * GRID_SIZE;
+            ctx.beginPath();
+            ctx.moveTo(startCol * GRID_SIZE, wy);
+            ctx.lineTo(endCol * GRID_SIZE, wy);
+            ctx.stroke();
+        }
+        ctx.restore();
+        // Screen-space HUD
+        const entityCount = world.entityCount;
+        const physicsCount = world.query('RigidBody', 'BoxCollider').length;
+        const renderCount = world.query('Transform', 'Sprite').length;
+        ctx.save();
+        ctx.fillStyle = 'rgba(0,0,0,0.65)';
+        ctx.fillRect(8, 8, 184, 84);
+        ctx.fillStyle = '#00ff88';
+        ctx.font = '11px monospace';
+        ctx.fillText(`FPS         ${this.fps}`, 16, 26);
+        ctx.fillText(`Entities    ${entityCount}`, 16, 42);
+        ctx.fillText(`Physics     ${physicsCount}`, 16, 58);
+        ctx.fillText(`Renderables ${renderCount}`, 16, 74);
+        ctx.restore();
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cubeforge",
-  "version": "0.0.7",
+  "version": "0.0.9",
   "description": "React-first 2D browser game engine",
   "main": "./dist/index.js",
   "scripts": {