@guinetik/gcanvas 1.0.4 → 2.0.0

package/dist/js/scene.js

@@ -0,0 +1,304 @@
+import {
+  Game,
+  Scene,
+  Button,
+  FPSCounter,
+  VerticalLayout,
+  Rectangle,
+  Group,
+  applyDraggable,
+  Painter,
+  Tween,
+  Easing,
+  Random,
+  GameObjectShapeWrapper,
+  Position,
+} from "/gcanvas.es.min.js";
+// Demo Game with Scenes
+export class DemoGame extends Game {
+  constructor(canvas) {
+    super(canvas);
+    this.MARGIN = 0;
+    this.enableFluidSize();
+    this.backgroundColor = "white";
+  }
+
+  getResponsiveConfig() {
+    const isNarrow = this.width < 500;
+    return {
+      buttonWidth: isNarrow ? 120 : 150,
+      layerCount: isNarrow ? 25 : 50,
+    };
+  }
+
+  init() {
+    super.init();
+    const config = this.getResponsiveConfig();
+    this.currentButtonWidth = config.buttonWidth;
+
+    this.scene = new Scene(this, { debug: true, debugColor: "black" });
+    this.ui = new Scene(this, {
+      debug: true,
+      anchor: Position.BOTTOM_LEFT,
+      anchorRelative: this.scene,
+    });
+    this.pipeline.add(this.scene); // scene below
+    this.pipeline.add(this.ui); // UI on top
+    this.pipeline.add(
+      new FPSCounter(this, { anchor: "bottom-right", color: "black" })
+    );
+    this.buttons = this.ui.add(
+      new VerticalLayout(this, {
+        debug: true,
+        debugColor: "black",
+        spacing: 10,
+        padding: 10,
+      })
+    );
+    this.buttons.width = config.buttonWidth;
+    this.buttons.height = 200;
+    // Small demo of Random functions
+    let random = Random.symmetric;
+    const options = [
+      Random.symmetric,
+      Random.centered,
+      Random.gaussian,
+      Random.radial,
+    ];
+    this.buttons.add(
+      this.createButton("➕ Add Layer", () => this.addLayer(random))
+    );
+    this.buttons.add(this.createButton("❎ Clear", () => this.scene.clear()));
+    this.buttons.add(
+      this.createButton("🎲 Randomize", () => {
+        this.scene.children.forEach((layer) => {
+          layer.scaleX = layer.scaleY = layer.scaleTime = 0;
+          layer.random = random;
+          layer.randomize();
+        });
+      })
+    );
+    const rollBtn = this.createButton("🔄️" + random.name, () => {
+      random = Random.pickOther(options, random);
+      console.log(random.name);
+      rollBtn.text = "🔄️" + random.name;
+    });
+    this.buttons.add(rollBtn);
+    // Add random layers
+    for (let i = 0; i < config.layerCount; i++) {
+      this.addLayer(random, i);
+    }
+    this.positionScene();
+  }
+
+  createButton(text, onClick) {
+    return new Button(this, {
+      text: text,
+      width: this.currentButtonWidth,
+      textAlign: "left",
+      onClick: onClick,
+    });
+  }
+
+  #prevWidth = 0;
+  #prevHeight = 0;
+
+  positionScene() {
+    this.scene.width = this.width - this.MARGIN * 2;
+    this.scene.height = this.height - this.MARGIN * 2;
+    this.scene.x = this.width / 2;
+    this.scene.y = this.height / 2;
+  }
+
+  update(dt) {
+    this.positionScene();
+    //
+    if (this.ui.width !== this.buttons.width + 10) {
+      this.ui.width = this.buttons.width + 10;
+    }
+    if (this.ui.height !== this.buttons.height + 10) {
+      this.ui.height = this.buttons.height + 10;
+    }
+    super.update(dt);
+    if (this.#prevWidth !== this.width || this.#prevHeight !== this.height) {
+      this.scene.markBoundsDirty();
+    }
+    this.#prevWidth = this.scene.width;
+    this.#prevHeight = this.scene.height;
+  }
+
+  addLayer(random, i) {
+    const layer = new LayerBox(this, this.scene, {}, random);
+    this.scene.add(layer);
+    setTimeout(layer.randomize.bind(layer), 50 * i);
+    return layer;
+  }
+
+  onResize() {
+    if (!this.buttons) return;
+
+    const config = this.getResponsiveConfig();
+
+    // Update button widths if changed
+    if (this.currentButtonWidth !== config.buttonWidth) {
+      this.currentButtonWidth = config.buttonWidth;
+      this.buttons.transform.width(config.buttonWidth);
+
+      // Update each button's width
+      if (this.buttons.children) {
+        this.buttons.children.forEach((btn) => {
+          if (btn.transform) {
+            btn.transform.width(config.buttonWidth);
+          }
+        });
+      }
+      this.buttons.markBoundsDirty();
+    }
+
+    this.positionScene();
+  }
+}
+// LayerBox class
+class LayerBox extends GameObjectShapeWrapper {
+  constructor(game, scene, options, random = Random.symmetric) {
+    const group = new Group();
+    super(game, group, options);
+    this.interactive = true;
+    this.scene = scene;
+    this.random = random;
+    this.group = group;
+  }
+
+  init() {
+    // Create a random rectangle
+    const size = 100;
+    const color = Painter.colors.randomColorHSL();
+    // Create a rectangle and group
+    this.rect = new Rectangle({
+      width: size,
+      height: size,
+      color: color,
+      stroke: "white",
+      lineWidth: 2,
+    });
+    this.width = size;
+    this.height = size;
+    this.group.add(this.rect);
+    //
+    this.startScale = 0;
+    this.targetScale = 1;
+    this.scaleTime = 0;
+    this.scaleDuration = 1; // seconds
+    //
+    this.on("mouseover", () => {
+      if (!this.scene.dragging) {
+        this.startScale = this.scaleX;
+        this.targetScale = 1.3;
+        this.scaleTime = 0;
+      }
+    });
+    this.on("mouseout", () => {
+      if (!this.dragging) {
+        this.startScale = this.scaleX;
+        this.scaleTime = 0;
+        this.targetScale = 1;
+      }
+    });
+    //
+    this.applyDraggable();
+  }
+
+  applyDraggable() {
+    applyDraggable(this, {
+      onDragStart: () => {
+        console.log("Drag start", this.constructor.name);
+        this.scene.dragging = true;
+        this.scene.bringToFront(this);
+        this.targetScale = 1.5;
+        this.scaleTime = 0;
+        this.shadowBox();
+      },
+      onDragEnd: () => {
+        console.log("Drag end", this.constructor.name);
+        //this.scene.bringToFront(this);
+        this.scaleTime = 0;
+        this.targetScale = 1.0;
+        this.clearShadowBox();
+        this.scene.dragging = false;
+      },
+    });
+  }
+
+  shadowBox() {
+    if (this.rect.shadorColor == null) {
+      this.rect.shadowColor = "rgba(0, 0, 0, 0.5)";
+      this.rect.shadowBlur = 20;
+      this.rect.shadowOffsetX = 10;
+      this.rect.shadowOffsetY = 10;
+    }
+  }
+
+  clearShadowBox() {
+    this.rect.shadowColor = null;
+  }
+
+  randomize() {
+    const param = {
+      symmetric: 1,
+      centered: 500,
+      gaussian: Math.random() * this.parent.width,
+      radial: this.parent.width / 3,
+    };
+    const { x, y } = this.random(
+      -this.parent.width / 2,
+      -this.parent.height / 2,
+      this.parent.width,
+      this.parent.height,
+      param[this.random.name]
+    );
+    //  console.log(x, y);
+    this.x = x;
+    this.y = y;
+    this.scaleX = this.scaleY = 0;
+    this.scaleTime = 0;
+    this.targetScale = 1;
+  }
+
+  update(dt) {
+    // Smooth scale animation
+    // Animate scale using bounce
+    if (this.scaleTime < this.scaleDuration) {
+      this.scaleTime += dt;
+      const t = Math.min(this.scaleTime / this.scaleDuration, 1);
+      const eased = Easing.easeOutElastic(t);
+      const scale = Tween.lerp(this.startScale, this.targetScale, eased);
+      this.scaleX = this.scaleY = scale;
+      this.tweening = true;
+    } else {
+      this.tweening = false;
+    }
+    //if (this.dragging) {
+    // Set the object's own half-dimensions
+    const halfW = 50;
+    const halfH = 50;
+
+    // Calculate the bounds within the parent's coordinate space
+    // This creates a "safe zone" that's 10px from the edge
+    const parentHalfWidth = this.parent.width / 2;
+    const parentHalfHeight = this.parent.height / 2;
+
+    // Maximum boundaries (accounting for the object's size and parent position)
+    const maxX = parentHalfWidth - halfW - 10;
+    const maxY = parentHalfHeight - halfH - 10;
+
+    // Minimum boundaries (accounting for the object's size and parent position)
+    const minX = -parentHalfWidth + halfW + 10;
+    const minY = -parentHalfHeight + halfH + 10;
+
+    // Clamp to parent bounds
+    this.x = Math.max(minX, Math.min(maxX, this.x));
+    this.y = Math.max(minY, Math.min(maxY, this.y));
+    //}
+    super.update(dt);
+  }
+}

package/dist/js/scenes.js

@@ -0,0 +1,320 @@
+import {
+  Game,
+  GameObject,
+  Scene,
+  Rectangle,
+  Circle,
+  Star,
+  Triangle,
+  TextShape,
+  Group,
+  FPSCounter,
+  Motion,
+  Easing,
+  Painter,
+} from "/gcanvas.es.min.js";
+
+/**
+ * Helper class to wrap a Shape in a GameObject for use in Scenes.
+ * Scenes expect GameObjects, not raw Shapes.
+ */
+class ShapeWrapper extends GameObject {
+  constructor(game, shape) {
+    super(game);
+    this.shape = shape;
+  }
+
+  draw() {
+    super.draw();
+    this.shape.render();
+  }
+}
+
+/**
+ * Utility function to wrap a shape in a GameObject
+ */
+function wrapShape(game, shape) {
+  return new ShapeWrapper(game, shape);
+}
+
+/**
+ * SceneDemo Game
+ * Demonstrates Scene capabilities: nesting, transforms, and z-ordering
+ */
+export class MyGame extends Game {
+  constructor(canvas) {
+    super(canvas);
+    this.enableFluidSize();
+    this.backgroundColor = "black";
+  }
+
+  init() {
+    super.init();
+
+    // Main container scene (centered)
+    this.mainScene = new Scene(this, {
+      width: 600,
+      height: 400,
+      debug: false,
+      debugColor: "#ff00ff",
+      anchor: "center"
+    });
+    this.pipeline.add(this.mainScene);
+
+    // Add demo scenes
+    this.mainScene.add(new TransformingSceneDemo(this));
+    this.mainScene.add(new NestedSceneDemo(this));
+    this.mainScene.add(new ZOrderDemo(this));
+
+    // FPS counter
+    this.pipeline.add(new FPSCounter(this, { anchor: "bottom-right" }));
+  }
+
+  onResize() {
+    if (this.mainScene) {
+      // Adjust main scene to fit screen
+      this.mainScene.width = Math.min(this.width - 40, 800);
+      this.mainScene.height = Math.min(this.height - 80, 500);
+    }
+  }
+}
+
+/**
+ * Demo 1: Scene with animated transforms
+ * Shows rotation and scaling applied to a scene with children
+ */
+class TransformingSceneDemo extends GameObject {
+  constructor(game) {
+    super(game);
+
+    // Create a scene that will be transformed
+    this.scene = new Scene(game, {
+      width: 120,
+      height: 120,
+      debug: false,
+      debugColor: "#ff00ff"
+    });
+
+    // Position using transform API
+    this.scene.transform.position(-200, -80);
+
+    // Add shapes to the scene
+    const rect = new Rectangle({
+      width: 40,
+      height: 40,
+      color: "#e94560",
+      stroke: "#fff",
+      lineWidth: 2
+    });
+    rect.transform.position(-25, -25);
+
+    const circle = new Circle(15, {
+      color: "#00d9ff",
+      stroke: "#fff",
+      lineWidth: 2
+    });
+    circle.transform.position(25, 25);
+
+    const star = new Star(12, 5, 0.5, {
+      color: "#ffc107",
+      stroke: "#fff",
+      lineWidth: 1
+    });
+    star.transform.position(25, -25);
+
+    // Add shapes via wrapper
+    this.scene.add(wrapShape(game, rect));
+    this.scene.add(wrapShape(game, circle));
+    this.scene.add(wrapShape(game, star));
+
+    // Label
+    this.label = new TextShape("Scene Transforms", {
+      x: -200,
+      y: -150,
+      font: "bold 12px monospace",
+      color: "#fff",
+      align: "center"
+    });
+
+    this.elapsed = 0;
+  }
+
+  update(dt) {
+    super.update(dt);
+    this.elapsed += dt;
+
+    // Animate the scene's transforms
+    this.scene.transform
+      .rotation(this.elapsed * 30)
+      .scale(0.8 + Math.sin(this.elapsed * 2) * 0.2);
+  }
+
+  draw() {
+    super.draw();
+    this.scene.render();
+    this.label.render();
+  }
+}
+
+/**
+ * Demo 2: Nested Scenes
+ * Shows scenes containing other scenes
+ */
+class NestedSceneDemo extends GameObject {
+  constructor(game) {
+    super(game);
+
+    // Outer scene
+    this.outerScene = new Scene(game, {
+      width: 150,
+      height: 150,
+      debug: false,
+      debugColor: "#ff00ff"
+    });
+    this.outerScene.transform.position(0, -80);
+
+    // Inner scene (nested inside outer)
+    this.innerScene = new Scene(game, {
+      width: 80,
+      height: 80,
+      debug: false,
+      debugColor: "#00ffff"
+    });
+
+    // Add shapes to inner scene
+    const innerRect = new Rectangle({
+      width: 30,
+      height: 30,
+      color: "#7bed9f",
+      stroke: "#fff",
+      lineWidth: 2
+    });
+    this.innerScene.add(wrapShape(game, innerRect));
+
+    // Add inner scene to outer
+    this.outerScene.add(this.innerScene);
+
+    // Add corner markers to outer scene
+    const corners = [
+      { x: -50, y: -50 },
+      { x: 50, y: -50 },
+      { x: 50, y: 50 },
+      { x: -50, y: 50 }
+    ];
+    corners.forEach((pos, i) => {
+      const marker = new Circle(8, {
+        color: ["#ff6b6b", "#ffc107", "#00d9ff", "#7bed9f"][i],
+        stroke: "#fff",
+        lineWidth: 1
+      });
+      marker.transform.position(pos.x, pos.y);
+      this.outerScene.add(wrapShape(game, marker));
+    });
+
+    // Label
+    this.label = new TextShape("Nested Scenes", {
+      x: 0,
+      y: -150,
+      font: "bold 12px monospace",
+      color: "#fff",
+      align: "center"
+    });
+
+    this.elapsed = 0;
+  }
+
+  update(dt) {
+    super.update(dt);
+    this.elapsed += dt;
+
+    // Outer scene rotates slowly
+    this.outerScene.transform.rotation(this.elapsed * 20);
+
+    // Inner scene counter-rotates and pulses
+    this.innerScene.transform
+      .rotation(-this.elapsed * 60)
+      .scale(0.9 + Math.sin(this.elapsed * 3) * 0.2);
+  }
+
+  draw() {
+    super.draw();
+    this.outerScene.render();
+    this.label.render();
+  }
+}
+
+/**
+ * Demo 3: Z-Ordering in Scenes
+ * Shows bring to front / send to back functionality
+ */
+class ZOrderDemo extends GameObject {
+  constructor(game) {
+    super(game);
+
+    this.scene = new Scene(game, {
+      width: 140,
+      height: 140,
+      debug: false,
+      debugColor: "#ff00ff"
+    });
+    this.scene.transform.position(200, -80);
+
+    // Create overlapping shapes
+    this.shapes = [];
+    const colors = ["#e94560", "#ffc107", "#00d9ff", "#7bed9f"];
+    const positions = [
+      { x: -20, y: -20 },
+      { x: 0, y: -10 },
+      { x: 20, y: 0 },
+      { x: 0, y: 10 }
+    ];
+
+    colors.forEach((color, i) => {
+      const rect = new Rectangle({
+        width: 50,
+        height: 50,
+        color: color,
+        stroke: "#fff",
+        lineWidth: 2
+      });
+      rect.transform.position(positions[i].x, positions[i].y);
+      const wrapped = wrapShape(game, rect);
+      this.shapes.push(wrapped);
+      this.scene.add(wrapped);
+    });
+
+    // Label
+    this.label = new TextShape("Z-Ordering", {
+      x: 200,
+      y: -150,
+      font: "bold 12px monospace",
+      color: "#fff",
+      align: "center"
+    });
+
+    this.elapsed = 0;
+    this.lastSwap = 0;
+    this.swapInterval = 1.5; // seconds between z-order changes
+  }
+
+  update(dt) {
+    super.update(dt);
+    this.elapsed += dt;
+
+    // Periodically bring a different shape to front
+    if (this.elapsed - this.lastSwap > this.swapInterval) {
+      this.lastSwap = this.elapsed;
+      const index = Math.floor(this.elapsed / this.swapInterval) % this.shapes.length;
+      this.scene.bringToFront(this.shapes[index]);
+    }
+
+    // Subtle pulse on the scene
+    this.scene.transform.scale(0.95 + Math.sin(this.elapsed * 2) * 0.05);
+  }
+
+  draw() {
+    super.draw();
+    this.scene.render();
+    this.label.render();
+  }
+}