@nanoforge-dev/schematics 2.2.1 → 2.3.1

package/dist/libs/project/files/js/src/components/drawable-circle-2d.component.js

@@ -0,0 +1,404 @@
+/**
+ * @typedef {import("@nanoforge-dev/common").NfFile} NfFile
+ * @typedef {import("@nanoforge-dev/ecs").EditorComponentManifest} EditorComponentManifest
+ * @typedef {import("@nanoforge-dev/graphics-2d").Layer} Layer
+ */
+
+import { Circle } from "@nanoforge-dev/graphics-2d";
+
+export class DrawableCircle2D {
+  name = this.constructor.name;
+  shape;
+
+  /** @type {NfFile | undefined} */
+  #fillPatternImage;
+
+  /**
+   * @param {number} [radius]
+   * @param {boolean} [visible]
+   * @param {string} [id]
+   * @param {number} [opacity]
+   * @param {number} [scaleX]
+   * @param {number} [scaleY]
+   * @param {number} [skewX]
+   * @param {number} [skewY]
+   * @param {number} [rotation]
+   * @param {number} [offsetX]
+   * @param {number} [offsetY]
+   * @param {string} [fillColor]
+   * @param {NfFile} [fillPatternImage]
+   * @param {number} [fillPatternX]
+   * @param {number} [fillPatternY]
+   * @param {number} [fillPatternOffsetX]
+   * @param {number} [fillPatternOffsetY]
+   * @param {number} [fillPatternScaleX]
+   * @param {number} [fillPatternScaleY]
+   * @param {number} [fillPatternRotation]
+   * @param {string} [fillPatternRepeat]
+   */
+  constructor(
+    radius,
+    visible,
+    id,
+    opacity,
+    scaleX,
+    scaleY,
+    skewX,
+    skewY,
+    rotation,
+    offsetX,
+    offsetY,
+    fillColor,
+    fillPatternImage,
+    fillPatternX,
+    fillPatternY,
+    fillPatternOffsetX,
+    fillPatternOffsetY,
+    fillPatternScaleX,
+    fillPatternScaleY,
+    fillPatternRotation,
+    fillPatternRepeat,
+  ) {
+    this.#fillPatternImage = fillPatternImage;
+
+    this.shape = new Circle({
+      radius,
+      visible,
+      id,
+      opacity,
+      scaleX,
+      scaleY,
+      skewX,
+      skewY,
+      rotation,
+      offsetX,
+      offsetY,
+      fill: fillColor,
+      fillPatternImage: fillPatternImage
+        ? Object.assign(new Image(), { src: fillPatternImage.path })
+        : undefined,
+      fillPatternX,
+      fillPatternY,
+      fillPatternOffsetX,
+      fillPatternOffsetY,
+      fillPatternScaleX,
+      fillPatternScaleY,
+      fillPatternRotation,
+      fillPatternRepeat,
+    });
+  }
+
+  get radius() {
+    return this.shape.radius();
+  }
+  set radius(v) {
+    this.shape.radius(v);
+    this.#redraw();
+  }
+  get visible() {
+    return this.shape.visible();
+  }
+  set visible(v) {
+    this.shape.visible(v);
+    this.#redraw();
+  }
+  get id() {
+    return this.shape.id();
+  }
+  set id(v) {
+    this.shape.id(v);
+    this.#redraw();
+  }
+  get opacity() {
+    return this.shape.opacity();
+  }
+  set opacity(v) {
+    this.shape.opacity(v);
+    this.#redraw();
+  }
+  get scaleX() {
+    return this.shape.scaleX();
+  }
+  set scaleX(v) {
+    this.shape.scaleX(v);
+    this.#redraw();
+  }
+  get scaleY() {
+    return this.shape.scaleY();
+  }
+  set scaleY(v) {
+    this.shape.scaleY(v);
+    this.#redraw();
+  }
+  get skewX() {
+    return this.shape.skewX();
+  }
+  set skewX(v) {
+    this.shape.skewX(v);
+    this.#redraw();
+  }
+  get skewY() {
+    return this.shape.skewY();
+  }
+  set skewY(v) {
+    this.shape.skewY(v);
+    this.#redraw();
+  }
+  get rotation() {
+    return this.shape.rotation();
+  }
+  set rotation(v) {
+    this.shape.rotation(v);
+    this.#redraw();
+  }
+  get offsetX() {
+    return this.shape.offsetX();
+  }
+  set offsetX(v) {
+    this.shape.offsetX(v);
+    this.#redraw();
+  }
+  get offsetY() {
+    return this.shape.offsetY();
+  }
+  set offsetY(v) {
+    this.shape.offsetY(v);
+    this.#redraw();
+  }
+  get fillColor() {
+    return this.shape.fill().toString();
+  }
+  set fillColor(v) {
+    this.shape.fill(v);
+    this.#redraw();
+  }
+  /** @returns {NfFile | undefined} */
+  get fillPatternImage() {
+    return this.#fillPatternImage;
+  }
+  /** @param {NfFile} v */
+  set fillPatternImage(v) {
+    this.#fillPatternImage = v;
+    this.shape.fillPatternImage(v ? Object.assign(new Image(), { src: v.path }) : undefined);
+    this.#redraw();
+  }
+  get fillPatternX() {
+    return this.shape.fillPatternX();
+  }
+  set fillPatternX(v) {
+    this.shape.fillPatternX(v);
+    this.#redraw();
+  }
+  get fillPatternY() {
+    return this.shape.fillPatternY();
+  }
+  set fillPatternY(v) {
+    this.shape.fillPatternY(v);
+    this.#redraw();
+  }
+  get fillPatternOffsetX() {
+    return this.shape.fillPatternOffsetX();
+  }
+  set fillPatternOffsetX(v) {
+    this.shape.fillPatternOffsetX(v);
+    this.#redraw();
+  }
+  get fillPatternOffsetY() {
+    return this.shape.fillPatternOffsetY();
+  }
+  set fillPatternOffsetY(v) {
+    this.shape.fillPatternOffsetY(v);
+    this.#redraw();
+  }
+  get fillPatternScaleX() {
+    return this.shape.fillPatternScaleX();
+  }
+  set fillPatternScaleX(v) {
+    this.shape.fillPatternScaleX(v);
+    this.#redraw();
+  }
+  get fillPatternScaleY() {
+    return this.shape.fillPatternScaleY();
+  }
+  set fillPatternScaleY(v) {
+    this.shape.fillPatternScaleY(v);
+    this.#redraw();
+  }
+  get fillPatternRotation() {
+    return this.shape.fillPatternRotation();
+  }
+  set fillPatternRotation(v) {
+    this.shape.fillPatternRotation(v);
+    this.#redraw();
+  }
+  get fillPatternRepeat() {
+    return this.shape.fillPatternRepeat();
+  }
+  set fillPatternRepeat(v) {
+    this.shape.fillPatternRepeat(v);
+    this.#redraw();
+  }
+
+  /** @param {Layer} layer */
+  addToLayer(layer) {
+    if (this.shape.getParent() !== layer) layer.add(this.shape);
+  }
+
+  #redraw() {
+    this.shape.getLayer()?.batchDraw();
+  }
+}
+// * Required to generate code
+export default DrawableCircle2D.name;
+
+// * Required for the editor to display the component and generate code
+/** @type {EditorComponentManifest} */
+export const EDITOR_COMPONENT_MANIFEST = {
+  name: "DrawableCircle2D",
+  description: "Graphically drawable circle 2D",
+  params: [
+    {
+      name: "radius",
+      type: "number",
+      description: "Radius of the circle in pixels",
+      default: 10,
+      optional: false,
+    },
+    {
+      name: "visible",
+      type: "boolean",
+      description: "Controls whether the node is rendered",
+      default: true,
+      optional: false,
+    },
+    {
+      name: "id",
+      type: "string",
+      description: "Unique identifier for the node, used with stage.findOne('#id')",
+      optional: true,
+    },
+    {
+      name: "opacity",
+      type: "number",
+      description: "Opacity from 0 (transparent) to 1 (fully opaque)",
+      default: 1,
+      optional: true,
+    },
+    {
+      name: "scaleX",
+      type: "number",
+      description: "Horizontal scale factor",
+      default: 1,
+      optional: true,
+    },
+    {
+      name: "scaleY",
+      type: "number",
+      description: "Vertical scale factor",
+      default: 1,
+      optional: true,
+    },
+    {
+      name: "skewX",
+      type: "number",
+      default: 0,
+      description: "Horizontal skew in radians, shears along the X axis",
+      optional: true,
+    },
+    {
+      name: "skewY",
+      type: "number",
+      default: 0,
+      description: "Vertical skew in radians, shears along the Y axis",
+      optional: true,
+    },
+    {
+      name: "rotation",
+      type: "number",
+      description:
+        "Rotation angle in degrees applied around the offset point (positive values rotate clockwise)",
+      default: 0,
+      optional: true,
+    },
+    {
+      name: "offsetX",
+      type: "number",
+      description: "Horizontal offset for the transform origin",
+      default: 0,
+      optional: true,
+    },
+    {
+      name: "offsetY",
+      type: "number",
+      description: "Vertical offset for the transform origin",
+      default: 0,
+      optional: true,
+    },
+    {
+      name: "fillColor",
+      type: "string",
+      description:
+        'Solid fill color as a CSS color string (e.g. "red", "#ff0000", "rgba(255,0,0,0.5)"), or a pre-built CanvasGradient object',
+      default: "red",
+      example: "rgb(255,255,255)",
+      optional: true,
+    },
+    {
+      name: "fillPatternImage",
+      type: "asset",
+      description: "Image element to use as a tiling pattern fill",
+      optional: true,
+    },
+    {
+      name: "fillPatternX",
+      type: "number",
+      description:
+        "Horizontal offset of the pattern origin relative to the shape's top-left corner, in pixels",
+      optional: true,
+    },
+    {
+      name: "fillPatternY",
+      type: "number",
+      description:
+        "Vertical offset of the pattern origin relative to the shape's top-left corner, in pixels",
+      optional: true,
+    },
+    {
+      name: "fillPatternOffsetX",
+      type: "number",
+      description: "Horizontally shifts the pattern image within the tile before repeating",
+      optional: true,
+    },
+    {
+      name: "fillPatternOffsetY",
+      type: "number",
+      description: "Vertically shifts the pattern image within the tile before repeating",
+      optional: true,
+    },
+    {
+      name: "fillPatternScaleX",
+      type: "number",
+      description: "Horizontal scale factor for the pattern tile",
+      optional: true,
+    },
+    {
+      name: "fillPatternScaleY",
+      type: "number",
+      description: "Vertical scale factor for the pattern tile",
+      optional: true,
+    },
+    {
+      name: "fillPatternRotation",
+      type: "number",
+      description: "Rotation of the pattern tile in degrees",
+      optional: true,
+    },
+    {
+      name: "fillPatternRepeat",
+      type: "string",
+      description:
+        'Repeat mode for the pattern. One of "repeat" (default), "repeat-x", "repeat-y", or "no-repeat"',
+      optional: true,
+    },
+  ],
+};

package/dist/libs/project/files/js/src/components/position-2d.component.js

@@ -0,0 +1,42 @@
+/**
+ * @typedef {import("@nanoforge-dev/ecs").EditorComponentManifest} EditorComponentManifest
+ */
+
+export class Position2D {
+  name = this.constructor.name;
+
+  /**
+   * @param {number} x
+   * @param {number} y
+   */
+  constructor(x, y) {
+    this.x = x;
+    this.y = y;
+  }
+}
+
+// * Required to generate code
+export default Position2D.name;
+
+// * Required for the editor to display the component and generate code
+/** @type {EditorComponentManifest} */
+export const EDITOR_COMPONENT_MANIFEST = {
+  name: "Position2D",
+  description: "Position of an entity in a 2 dimensional space in pixel",
+  params: [
+    {
+      type: "number",
+      name: "x",
+      description: "Horizontal position in pixel",
+      example: 4.2,
+      default: 0,
+    },
+    {
+      type: "number",
+      name: "y",
+      description: "Vertical position in pixel",
+      example: 67,
+      default: 0,
+    },
+  ],
+};

package/dist/libs/project/files/js/src/main.js

@@ -0,0 +1,43 @@
+import { NanoforgeFactory } from "@nanoforge-dev/core";
+import { EcsLibrary } from "@nanoforge-dev/ecs/<%= part %>";<% if (part === "client") { %>
+import { Graphics2DLibrary } from "@nanoforge-dev/graphics-2d";
+import { InputLibrary } from "@nanoforge-dev/input";<% } %>
+import { <%= part === "client" ? "NetworkClientLibrary" : "NetworkServerLibrary" %> } from "@nanoforge-dev/network/<%= part %>";
+<% if (part === "client") { %>
+import { DrawableCircle2D } from "./components/drawable-circle-2d.component";<% } %>
+import { Position2D } from "./components/position-2d.component";<% if (part === "client") { %>
+import { draw2D } from "./systems/draw-2d.system";<% if (hasServer) { %>
+import { positionSync } from "./systems/position-sync.system";<% } %><% } else { %>
+import { move2D } from "./systems/move-2d.system";<% } %>
+
+/**
+ * @param {import("@nanoforge-dev/common").<%= part === "client" ? "ClientRunOptions" : "ServerRunOptions" %>} options
+ * @returns {Promise<void>}
+ */
+export const main = async (options) => {
+  const app = NanoforgeFactory.<%= part === "client" ? "createClient" : "createServer" %>({ tickRate: 60 });
+
+  const ecs = new EcsLibrary();
+  app.use(ecs);<% if (part === "client") { %>
+  app.use(new Graphics2DLibrary());
+  app.use(new InputLibrary());<% } %>
+  app.use(new <%= part === "client" ? "NetworkClientLibrary" : "NetworkServerLibrary" %>());
+
+  await app.init(options);
+
+  const registry = ecs.registry;
+<% if (part === "client") { %>
+  const circle = registry.spawnEntity();
+  registry.addComponent(circle, new Position2D(500, 500));
+  registry.addComponent(circle, new DrawableCircle2D(75, true, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, "red"));
+
+  registry.addSystem(draw2D);<% if (hasServer) { %>
+  registry.addSystem(positionSync);<% } %>
+<% } else { %>
+  const entity = registry.spawnEntity();
+  registry.addComponent(entity, new Position2D(500, 500));
+
+  registry.addSystem(move2D);
+<% } %>
+  await app.run();
+};

package/dist/libs/project/files/js/src/systems/draw-2d.system.js

@@ -0,0 +1,33 @@
+/**
+ * @typedef {import("@nanoforge-dev/common").Context} Context
+ * @typedef {import("@nanoforge-dev/ecs").EditorSystemManifest} EditorSystemManifest
+ * @typedef {import("@nanoforge-dev/ecs").Registry} Registry
+ */
+
+import { DrawableCircle2D } from "../components/drawable-circle-2d.component";
+import { Position2D } from "../components/position-2d.component";
+
+/**
+ * @param {Registry} registry
+ * @param {Context} ctx
+ */
+export function draw2D(registry, ctx) {
+  const graphic2d = ctx.graphics;
+
+  const entities = registry.getZipper([Position2D, DrawableCircle2D]);
+
+  entities.forEach(({ Position2D, DrawableCircle2D }) => {
+    DrawableCircle2D.addToLayer(graphic2d.baseLayer);
+    DrawableCircle2D.shape.setPosition(Position2D);
+  });
+}
+// * Required to generate code
+export default draw2D.name;
+
+// * Required for the editor to display the system and generate code
+/** @type {EditorSystemManifest} */
+export const EDITOR_SYSTEM_MANIFEST = {
+  name: "draw2D",
+  description: "Draw every drawable component",
+  dependencies: ["Position2D", "DrawableCircle2D"],
+};

package/dist/libs/project/files/js/src/systems/move-2d.system.js

@@ -0,0 +1,34 @@
+/**
+ * @typedef {import("@nanoforge-dev/common").Context} Context
+ * @typedef {import("@nanoforge-dev/ecs").EditorSystemManifest} EditorSystemManifest
+ * @typedef {import("@nanoforge-dev/ecs").Registry} Registry
+ */
+
+import { Position2D } from "../components/position-2d.component";
+
+/**
+ * @param {Registry} registry
+ * @param {Context} ctx
+ */
+export function move2D(registry, ctx) {
+  const network = ctx.network;
+  const entities = registry.getZipper([Position2D]);
+
+  entities.forEach(({ Position2D }) => {
+    Position2D.x += 1;
+
+    network.tcp.sendToEverybody(
+      new TextEncoder().encode(JSON.stringify({ x: Position2D.x, y: Position2D.y })),
+    );
+  });
+}
+// * Required to generate code
+export default move2D.name;
+
+// * Required for the editor to display the system and generate code
+/** @type {EditorSystemManifest} */
+export const EDITOR_SYSTEM_MANIFEST = {
+  name: "move2D",
+  description: "Moves the entity and broadcasts its position to every connected client",
+  dependencies: ["Position2D"],
+};

package/dist/libs/project/files/js/src/systems/position-sync.system.js

@@ -0,0 +1,35 @@
+/**
+ * @typedef {import("@nanoforge-dev/common").Context} Context
+ * @typedef {import("@nanoforge-dev/ecs").EditorSystemManifest} EditorSystemManifest
+ * @typedef {import("@nanoforge-dev/ecs").Registry} Registry
+ */
+
+import { Position2D } from "../components/position-2d.component";
+
+/**
+ * @param {Registry} registry
+ * @param {Context} ctx
+ */
+export function positionSync(registry, ctx) {
+  const network = ctx.network;
+  const packets = network.tcp
+    .getReceivedPackets()
+    .map((packet) => JSON.parse(new TextDecoder().decode(packet)));
+
+  const [entity] = registry.getZipper([Position2D]);
+
+  packets.forEach((packet) => {
+    entity.Position2D.x = packet.x;
+    entity.Position2D.y = packet.y;
+  });
+}
+// * Required to generate code
+export default positionSync.name;
+
+// * Required for the editor to display the system and generate code
+/** @type {EditorSystemManifest} */
+export const EDITOR_SYSTEM_MANIFEST = {
+  name: "positionSync",
+  description: "Overwrites the local entity's position with the latest value received from the server",
+  dependencies: ["Position2D"],
+};

package/dist/libs/project/files/ts/.dockerignore

@@ -0,0 +1,5 @@
+node_modules/
+dist/
+.nanoforge/
+.git/
+.env

package/dist/libs/project/files/ts/Dockerfile

@@ -0,0 +1,36 @@
+<% if (packageManager === "bun") { %>FROM oven/bun:1.3 AS base
+<% } else if (packageManager === "pnpm") { %>FROM ghcr.io/pnpm/pnpm:12 AS base
+RUN pnpm runtime set node 26 -g
+<% } else { %>FROM node:26-slim AS base
+<% } %><% if (packageManager === "yarn") { %>
+RUN npm install -g yarn
+<% } %>
+WORKDIR /app
+
+FROM base AS deps
+
+<% if (packageManager === "npm") { %>COPY package.json package-lock.json ./
+RUN npm ci
+<% } else if (packageManager === "yarn") { %>COPY package.json yarn.lock ./
+RUN yarn install --frozen-lockfile
+<% } else if (packageManager === "pnpm") { %>COPY package.json pnpm-lock.yaml ./
+RUN pnpm install --frozen-lockfile
+<% } else { %>COPY package.json bun.lock ./
+RUN bun install --frozen-lockfile
+<% } %>
+FROM deps AS build
+COPY . .
+RUN <%= packageManager %> run build
+
+<% if (packageManager === "bun") { %>FROM oven/bun:1.3-slim<% } else { %>FROM base<% } %>
+WORKDIR /app
+
+COPY --from=build /app/node_modules ./node_modules
+COPY --from=build /app/dist ./dist
+COPY --from=build /app/package.json ./
+COPY --from=build /app/nanoforge.config.ts ./
+<% if (part === "server") { %>
+<% } %><% if (packageManager !== "pnpm") { %>
+USER <% if (packageManager === "bun") { %>bun<% } else { %>node<% } %>
+<% } %><% if (part === "client") { %>EXPOSE 3000
+<% } %>CMD ["<%= packageManager %>", "run", "start"]

package/dist/libs/project/files/ts/README.md

@@ -0,0 +1,53 @@
+# <%= packageName %>
+
+A [NanoForge](https://nanoforge.eu) <%= part %> app.
+<% if (!workspace) { %>
+## Prerequisites
+
+- Node.js and <%= packageManager %>
+- The [NanoForge CLI](https://www.npmjs.com/package/@nanoforge-dev/cli): `npm install -g @nanoforge-dev/cli`
+
+## Install
+
+```bash
+<%= packageManager %> install
+```
+<% } %>
+## Development
+
+```bash
+nf dev
+```
+
+`nf dev` serves the game and watches your files, so changes are picked up as you work.
+
+## Build & start
+
+```bash
+nf build
+nf start
+```
+
+`nf build` compiles this <%= part %> for production, and `nf start` serves the build.
+<% if (editor) { %>
+This app was generated with editor support. Launch it with:
+
+```bash
+nf editor .
+```
+<% } %><% if (docker) { %>
+A `Dockerfile` is also included to containerize the built app for deployment.
+<% } %>
+## CLI reference
+
+| Command       | Description                       |
+| ------------- | ---------------------------------- |
+| `nf dev`      | Develop with hot reload            |
+| `nf build`    | Build for production               |
+| `nf start`    | Run a built app                     |<% if (editor) { %>
+| `nf editor`   | Launch the visual editor            |<% } %>
+
+## More info
+
+- [Documentation](https://docs.nanoforge.eu) - CLI commands, configuration, and guides
+- [nanoforge.eu](https://nanoforge.eu) - learn more about NanoForge

package/dist/libs/project/files/ts/nanoforge.config.ts

@@ -0,0 +1,5 @@
+import { defineConfig } from "@nanoforge-dev/config";
+
+export default defineConfig({
+  type: "<%= part %>",
+});