cubeforge 0.0.7 → 0.0.9

package/dist/components/Tilemap.js

@@ -0,0 +1,245 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useState, useContext } from 'react';
+import { createTransform, createScript } from '@cubeforge/core';
+import { createSprite } from '@cubeforge/renderer';
+import { createRigidBody, createBoxCollider } from '@cubeforge/physics';
+import { EngineContext } from '../context';
+const animatedTiles = new Map();
+// ─── Helpers ──────────────────────────────────────────────────────────────────
+function getProperty(props, name) {
+    return props?.find(p => p.name === name)?.value;
+}
+function matchesLayerName(layer, name) {
+    return (layer.name === name ||
+        layer.name.toLowerCase() === name.toLowerCase());
+}
+function isCollisionLayer(layer, collisionLayer) {
+    return (matchesLayerName(layer, collisionLayer) ||
+        getProperty(layer.properties, 'collision') === true);
+}
+function isTriggerLayer(layer, triggerLayer) {
+    return (matchesLayerName(layer, triggerLayer) ||
+        getProperty(layer.properties, 'trigger') === true);
+}
+export function Tilemap({ src, onSpawnObject, layerFilter, zIndex = 0, collisionLayer = 'collision', triggerLayer: triggerLayerName = 'triggers', onTileProperty, }) {
+    const engine = useContext(EngineContext);
+    const [spawnedNodes, setSpawnedNodes] = useState([]);
+    useEffect(() => {
+        if (!engine)
+            return;
+        const createdEntities = [];
+        async function load() {
+            let mapData;
+            try {
+                const res = await fetch(src);
+                if (!res.ok)
+                    throw new Error(`HTTP ${res.status}`);
+                mapData = await res.json();
+            }
+            catch (err) {
+                console.warn(`[Cubeforge] Tilemap: failed to load "${src}":`, err);
+                return;
+            }
+            const { tilewidth, tileheight, tilesets } = mapData;
+            // Resolve the tileset for a given GID, plus the local tile id within it
+            function resolveTileset(gid) {
+                let tileset = null;
+                for (let i = tilesets.length - 1; i >= 0; i--) {
+                    if (gid >= tilesets[i].firstgid) {
+                        tileset = tilesets[i];
+                        break;
+                    }
+                }
+                if (!tileset)
+                    return null;
+                return { tileset, localId: gid - tileset.firstgid };
+            }
+            // Build tileset image map: GID → { imageSrc, sx, sy, sw, sh }
+            function getTileFrame(gid) {
+                const resolved = resolveTileset(gid);
+                if (!resolved)
+                    return null;
+                const { tileset, localId } = resolved;
+                const col = localId % tileset.columns;
+                const row = Math.floor(localId / tileset.columns);
+                const sx = tileset.margin + col * (tileset.tilewidth + tileset.spacing);
+                const sy = tileset.margin + row * (tileset.tileheight + tileset.spacing);
+                // Resolve image path relative to the map src
+                const base = src.substring(0, src.lastIndexOf('/') + 1);
+                const imageSrc = tileset.image.startsWith('/') ? tileset.image : base + tileset.image;
+                return { imageSrc, sx, sy, sw: tileset.tilewidth, sh: tileset.tileheight };
+            }
+            // Look up per-tile data (animation, properties) from the tileset
+            function getTileData(gid) {
+                const resolved = resolveTileset(gid);
+                if (!resolved)
+                    return null;
+                const { tileset, localId } = resolved;
+                return tileset.tiles?.find(t => t.id === localId) ?? null;
+            }
+            // Compute the frame region for a local tile id within a tileset
+            function getFrameForLocalId(tileset, localId) {
+                const col = localId % tileset.columns;
+                const row = Math.floor(localId / tileset.columns);
+                const sx = tileset.margin + col * (tileset.tilewidth + tileset.spacing);
+                const sy = tileset.margin + row * (tileset.tileheight + tileset.spacing);
+                const base = src.substring(0, src.lastIndexOf('/') + 1);
+                const imageSrc = tileset.image.startsWith('/') ? tileset.image : base + tileset.image;
+                return { imageSrc, sx, sy, sw: tileset.tilewidth, sh: tileset.tileheight };
+            }
+            const objectNodes = [];
+            for (const layer of mapData.layers) {
+                if (layerFilter && !layerFilter(layer))
+                    continue;
+                if (!layer.visible)
+                    continue;
+                if (layer.type === 'tilelayer' && layer.data) {
+                    const collision = isCollisionLayer(layer, collisionLayer);
+                    const trigger = !collision && isTriggerLayer(layer, triggerLayerName);
+                    if (collision || trigger) {
+                        // Merge adjacent filled tiles in each row into single wide colliders
+                        for (let row = 0; row < mapData.height; row++) {
+                            let col = 0;
+                            while (col < mapData.width) {
+                                const i = row * mapData.width + col;
+                                const gid = layer.data[i];
+                                if (gid === 0) {
+                                    col++;
+                                    continue;
+                                }
+                                // Start of a run — extend right while tiles are filled
+                                let runLength = 1;
+                                while (col + runLength < mapData.width &&
+                                    layer.data[row * mapData.width + col + runLength] !== 0) {
+                                    runLength++;
+                                }
+                                const runWidth = runLength * tilewidth;
+                                const x = col * tilewidth + runWidth / 2;
+                                const y = row * tileheight + tileheight / 2;
+                                const eid = engine.ecs.createEntity();
+                                createdEntities.push(eid);
+                                engine.ecs.addComponent(eid, createTransform(x, y));
+                                if (collision) {
+                                    // Invisible solid collider spanning the entire run
+                                    engine.ecs.addComponent(eid, createRigidBody({ isStatic: true }));
+                                    engine.ecs.addComponent(eid, createBoxCollider(runWidth, tileheight));
+                                }
+                                else {
+                                    // Invisible trigger collider spanning the entire run
+                                    engine.ecs.addComponent(eid, createBoxCollider(runWidth, tileheight, { isTrigger: true }));
+                                }
+                                col += runLength;
+                            }
+                        }
+                    }
+                    else {
+                        // Visual tiles — render per tile with sprites
+                        for (let i = 0; i < layer.data.length; i++) {
+                            const gid = layer.data[i];
+                            if (gid === 0)
+                                continue;
+                            const col = i % mapData.width;
+                            const row = Math.floor(i / mapData.width);
+                            // Tile center position
+                            const x = col * tilewidth + tilewidth / 2;
+                            const y = row * tileheight + tileheight / 2;
+                            const eid = engine.ecs.createEntity();
+                            createdEntities.push(eid);
+                            engine.ecs.addComponent(eid, createTransform(x, y));
+                            // Visual tile — load image and set frame
+                            const frame = getTileFrame(gid);
+                            const sprite = createSprite({ width: tilewidth, height: tileheight, color: '#888', zIndex });
+                            if (frame) {
+                                sprite.frame = { sx: frame.sx, sy: frame.sy, sw: frame.sw, sh: frame.sh };
+                                engine.assets.loadImage(frame.imageSrc)
+                                    .then((img) => {
+                                    const s = engine.ecs.getComponent(eid, 'Sprite');
+                                    if (s)
+                                        s.image = img;
+                                })
+                                    .catch(() => { });
+                            }
+                            engine.ecs.addComponent(eid, sprite);
+                            // Check for animated tile
+                            const tileData = getTileData(gid);
+                            if (tileData?.animation && tileData.animation.length > 0) {
+                                const resolved = resolveTileset(gid);
+                                const frames = tileData.animation.map(a => a.tileid);
+                                const durations = tileData.animation.map(a => a.duration / 1000); // ms → seconds
+                                const state = { frames, durations, timer: 0, currentFrame: 0 };
+                                animatedTiles.set(eid, state);
+                                // Pre-load first frame image (tileset image already loading above)
+                                // Set initial frame region from the first animation frame
+                                const firstFrameRegion = getFrameForLocalId(resolved.tileset, frames[0]);
+                                engine.assets.loadImage(firstFrameRegion.imageSrc)
+                                    .then((img) => {
+                                    const s = engine.ecs.getComponent(eid, 'Sprite');
+                                    if (s) {
+                                        s.image = img;
+                                        s.frame = {
+                                            sx: firstFrameRegion.sx,
+                                            sy: firstFrameRegion.sy,
+                                            sw: firstFrameRegion.sw,
+                                            sh: firstFrameRegion.sh,
+                                        };
+                                    }
+                                })
+                                    .catch(() => { });
+                                engine.ecs.addComponent(eid, createScript((_eid, world, _input, dt) => {
+                                    const animState = animatedTiles.get(_eid);
+                                    if (!animState)
+                                        return;
+                                    animState.timer += dt;
+                                    const currentDuration = animState.durations[animState.currentFrame];
+                                    if (animState.timer >= currentDuration) {
+                                        animState.timer -= currentDuration;
+                                        animState.currentFrame = (animState.currentFrame + 1) % animState.frames.length;
+                                        const nextLocalId = animState.frames[animState.currentFrame];
+                                        const resolvedTs = resolveTileset(gid);
+                                        if (!resolvedTs)
+                                            return;
+                                        const region = getFrameForLocalId(resolvedTs.tileset, nextLocalId);
+                                        const s = world.getComponent(_eid, 'Sprite');
+                                        if (s) {
+                                            s.frame = { sx: region.sx, sy: region.sy, sw: region.sw, sh: region.sh };
+                                        }
+                                    }
+                                }));
+                            }
+                            // Fire onTileProperty callback if tile has custom properties
+                            if (onTileProperty && tileData?.properties && tileData.properties.length > 0) {
+                                const propsMap = {};
+                                for (const p of tileData.properties) {
+                                    propsMap[p.name] = p.value;
+                                }
+                                onTileProperty(gid, propsMap, x, y);
+                            }
+                        }
+                    }
+                }
+                else if (layer.type === 'objectgroup' && layer.objects) {
+                    if (onSpawnObject) {
+                        for (const obj of layer.objects) {
+                            const node = onSpawnObject(obj, layer);
+                            if (node)
+                                objectNodes.push(node);
+                        }
+                    }
+                }
+            }
+            setSpawnedNodes(objectNodes);
+        }
+        load();
+        return () => {
+            for (const eid of createdEntities) {
+                animatedTiles.delete(eid);
+                if (engine.ecs.hasEntity(eid))
+                    engine.ecs.destroyEntity(eid);
+            }
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [src]);
+    if (spawnedNodes.length === 0)
+        return null;
+    return _jsx(_Fragment, { children: spawnedNodes });
+}

package/dist/components/Transform.js

@@ -0,0 +1,24 @@
+import { useEffect, useContext } from 'react';
+import { createTransform } from '@cubeforge/core';
+import { EngineContext, EntityContext } from '../context';
+export function Transform({ x = 0, y = 0, rotation = 0, scaleX = 1, scaleY = 1 }) {
+    const engine = useContext(EngineContext);
+    const entityId = useContext(EntityContext);
+    useEffect(() => {
+        engine.ecs.addComponent(entityId, createTransform(x, y, rotation, scaleX, scaleY));
+        return () => engine.ecs.removeComponent(entityId, 'Transform');
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    // Sync prop changes to component data
+    useEffect(() => {
+        const comp = engine.ecs.getComponent(entityId, 'Transform');
+        if (comp) {
+            comp.x = x;
+            comp.y = y;
+            comp.rotation = rotation;
+            comp.scaleX = scaleX;
+            comp.scaleY = scaleY;
+        }
+    }, [x, y, rotation, scaleX, scaleY, engine, entityId]);
+    return null;
+}

package/dist/components/World.js

@@ -0,0 +1,28 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useContext } from 'react';
+import { EngineContext } from '../context';
+export function World({ gravity, background = '#1a1a2e', children }) {
+    const engine = useContext(EngineContext);
+    useEffect(() => {
+        if (!engine)
+            return;
+        if (gravity !== undefined)
+            engine.physics.setGravity(gravity);
+    }, [gravity, engine]);
+    useEffect(() => {
+        if (!engine)
+            return;
+        // Propagate background to the camera component (or store it for renderer)
+        // The camera component stores background — if no camera exists, fill canvas directly
+        const camId = engine.ecs.queryOne('Camera2D');
+        if (camId !== undefined) {
+            const cam = engine.ecs.getComponent(camId, 'Camera2D');
+            if (cam)
+                cam.background = background;
+        }
+        else {
+            engine.canvas.style.background = background;
+        }
+    }, [background, engine]);
+    return _jsx(_Fragment, { children: children });
+}

package/dist/components/particlePresets.js

@@ -0,0 +1,27 @@
+export const PARTICLE_PRESETS = {
+    explosion: {
+        rate: 60, speed: 200, spread: Math.PI * 2, angle: 0,
+        particleLife: 0.5, particleSize: 6, color: '#ff6b35',
+        gravity: 300, maxParticles: 80,
+    },
+    spark: {
+        rate: 40, speed: 150, spread: Math.PI * 2, angle: 0,
+        particleLife: 0.3, particleSize: 3, color: '#ffd54f',
+        gravity: 400, maxParticles: 50,
+    },
+    smoke: {
+        rate: 15, speed: 30, spread: 0.5, angle: -Math.PI / 2,
+        particleLife: 1.2, particleSize: 10, color: '#90a4ae',
+        gravity: -20, maxParticles: 40,
+    },
+    coinPickup: {
+        rate: 30, speed: 80, spread: Math.PI * 2, angle: -Math.PI / 2,
+        particleLife: 0.4, particleSize: 4, color: '#ffd700',
+        gravity: 200, maxParticles: 20,
+    },
+    jumpDust: {
+        rate: 25, speed: 60, spread: Math.PI, angle: Math.PI / 2,
+        particleLife: 0.3, particleSize: 5, color: '#b0bec5',
+        gravity: 80, maxParticles: 20,
+    },
+};

package/dist/components/spriteAtlas.js

@@ -0,0 +1,10 @@
+/**
+ * Helper to build an atlas from a grid spritesheet.
+ * columns = number of frames per row.
+ * names = frame names in row-major order.
+ */
+export function createAtlas(names, _columns) {
+    const atlas = {};
+    names.forEach((name, i) => { atlas[name] = i; });
+    return atlas;
+}

package/dist/context.js

@@ -0,0 +1,3 @@
+import { createContext } from 'react';
+export const EngineContext = createContext(null);
+export const EntityContext = createContext(null);

package/dist/hooks/useEntity.js

@@ -0,0 +1,8 @@
+import { useContext } from 'react';
+import { EntityContext } from '../context';
+export function useEntity() {
+    const id = useContext(EntityContext);
+    if (id === null)
+        throw new Error('useEntity must be used inside <Entity>');
+    return id;
+}

package/dist/hooks/useEvents.js

@@ -0,0 +1,15 @@
+import { useContext, useEffect } from 'react';
+import { EngineContext } from '../context';
+export function useEvents() {
+    const engine = useContext(EngineContext);
+    if (!engine)
+        throw new Error('useEvents must be used inside <Game>');
+    return engine.events;
+}
+export function useEvent(event, handler) {
+    const events = useEvents();
+    useEffect(() => {
+        return events.on(event, handler);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [events, event]);
+}

package/dist/hooks/useGame.js

@@ -0,0 +1,8 @@
+import { useContext } from 'react';
+import { EngineContext } from '../context';
+export function useGame() {
+    const engine = useContext(EngineContext);
+    if (!engine)
+        throw new Error('useGame must be used inside <Game>');
+    return engine;
+}

package/dist/hooks/useInput.js

@@ -0,0 +1,8 @@
+import { useContext } from 'react';
+import { EngineContext } from '../context';
+export function useInput() {
+    const engine = useContext(EngineContext);
+    if (!engine)
+        throw new Error('useInput must be used inside <Game>');
+    return engine.input;
+}

package/dist/hooks/usePlatformerController.js

@@ -0,0 +1,82 @@
+import { useContext, useEffect } from 'react';
+import { createScript } from '@cubeforge/core';
+import { EngineContext } from '../context';
+/**
+ * Attaches platformer movement (WASD/Arrows + Space/Up to jump) to an entity.
+ * The entity must already have a RigidBody component.
+ *
+ * @example
+ * function Player() {
+ *   const id = useEntity()
+ *   usePlatformerController(id, { speed: 220, maxJumps: 2 })
+ *   return (
+ *     <Entity id="player">
+ *       <Transform x={100} y={300} />
+ *       <Sprite width={28} height={40} color="#4fc3f7" />
+ *       <RigidBody />
+ *       <BoxCollider width={26} height={40} />
+ *     </Entity>
+ *   )
+ * }
+ */
+export function usePlatformerController(entityId, opts = {}) {
+    const engine = useContext(EngineContext);
+    const { speed = 200, jumpForce = -500, maxJumps = 1, coyoteTime = 0.08, jumpBuffer = 0.08, } = opts;
+    useEffect(() => {
+        const state = { coyoteTimer: 0, jumpBuffer: 0, jumpsLeft: maxJumps };
+        const updateFn = (id, world, input, dt) => {
+            if (!world.hasEntity(id))
+                return;
+            const rb = world.getComponent(id, 'RigidBody');
+            if (!rb)
+                return;
+            // Ground tracking
+            if (rb.onGround) {
+                state.coyoteTimer = coyoteTime;
+                state.jumpsLeft = maxJumps;
+            }
+            else
+                state.coyoteTimer = Math.max(0, state.coyoteTimer - dt);
+            // Jump buffer
+            const jumpPressed = input.isPressed('Space') || input.isPressed('ArrowUp') ||
+                input.isPressed('KeyW') || input.isPressed('w');
+            if (jumpPressed)
+                state.jumpBuffer = jumpBuffer;
+            else
+                state.jumpBuffer = Math.max(0, state.jumpBuffer - dt);
+            // Horizontal movement
+            const left = input.isDown('ArrowLeft') || input.isDown('KeyA') || input.isDown('a');
+            const right = input.isDown('ArrowRight') || input.isDown('KeyD') || input.isDown('d');
+            if (left)
+                rb.vx = -speed;
+            else if (right)
+                rb.vx = speed;
+            else
+                rb.vx *= rb.onGround ? 0.6 : 0.92;
+            // Sprite flip
+            const sprite = world.getComponent(id, 'Sprite');
+            if (sprite) {
+                if (left)
+                    sprite.flipX = true;
+                if (right)
+                    sprite.flipX = false;
+            }
+            // Jump
+            const canJump = state.coyoteTimer > 0 || state.jumpsLeft > 0;
+            if (state.jumpBuffer > 0 && canJump) {
+                rb.vy = jumpForce;
+                state.jumpsLeft = Math.max(0, state.jumpsLeft - 1);
+                state.coyoteTimer = 0;
+                state.jumpBuffer = 0;
+            }
+            // Variable jump height — release early to cut arc
+            const jumpHeld = input.isDown('Space') || input.isDown('ArrowUp') ||
+                input.isDown('KeyW') || input.isDown('w');
+            if (!jumpHeld && rb.vy < -120)
+                rb.vy += 800 * dt;
+        };
+        engine.ecs.addComponent(entityId, createScript(updateFn));
+        return () => engine.ecs.removeComponent(entityId, 'Script');
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+}

package/dist/hooks/useTopDownMovement.js

@@ -0,0 +1,46 @@
+import { useContext, useEffect } from 'react';
+import { createScript } from '@cubeforge/core';
+import { EngineContext } from '../context';
+/**
+ * Attaches 4-directional top-down movement (WASD/Arrows) to an entity.
+ * The entity must have a RigidBody with gravityScale=0 for top-down games.
+ *
+ * @example
+ * <Entity id="player">
+ *   <Transform x={100} y={100} />
+ *   <Sprite width={24} height={24} color="#4fc3f7" />
+ *   <RigidBody gravityScale={0} />
+ *   <BoxCollider width={24} height={24} />
+ * </Entity>
+ * // In a Script or parent component:
+ * useTopDownMovement(playerId, { speed: 180 })
+ */
+export function useTopDownMovement(entityId, opts = {}) {
+    const engine = useContext(EngineContext);
+    const { speed = 200, normalizeDiagonal = true } = opts;
+    useEffect(() => {
+        const updateFn = (id, world, input) => {
+            if (!world.hasEntity(id))
+                return;
+            const rb = world.getComponent(id, 'RigidBody');
+            if (!rb)
+                return;
+            const left = (input.isDown('ArrowLeft') || input.isDown('KeyA') || input.isDown('a')) ? -1 : 0;
+            const right = (input.isDown('ArrowRight') || input.isDown('KeyD') || input.isDown('d')) ? 1 : 0;
+            const up = (input.isDown('ArrowUp') || input.isDown('KeyW') || input.isDown('w')) ? -1 : 0;
+            const down = (input.isDown('ArrowDown') || input.isDown('KeyS') || input.isDown('s')) ? 1 : 0;
+            let dx = left + right;
+            let dy = up + down;
+            if (normalizeDiagonal && dx !== 0 && dy !== 0) {
+                const len = Math.sqrt(dx * dx + dy * dy);
+                dx /= len;
+                dy /= len;
+            }
+            rb.vx = dx * speed;
+            rb.vy = dy * speed;
+        };
+        engine.ecs.addComponent(entityId, createScript(updateFn));
+        return () => engine.ecs.removeComponent(entityId, 'Script');
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+}

package/dist/index.d.ts

@@ -44,7 +44,9 @@ export type { RaycastHit } from '@cubeforge/physics';
 export type { InputManager, ActionBindings, InputMap } from '@cubeforge/input';
 export { createInputMap } from '@cubeforge/input';
 export type { BoundInputMap } from './hooks/useInputMap';
-export type { TransformComponent } from '@cubeforge/core';
+export type { TransformComponent, Component } from '@cubeforge/core';
+export { createTransform, createTag } from '@cubeforge/core';
+export { createSprite } from '@cubeforge/renderer';
 export type { RigidBodyComponent } from '@cubeforge/physics';
 export type { BoxColliderComponent } from '@cubeforge/physics';
 export type { CircleColliderComponent } from '@cubeforge/physics';