@guinetik/gcanvas 1.0.2 → 1.0.4

package/demos/js/scene.js

@@ -1,304 +0,0 @@
-import {
-  Game,
-  Scene,
-  Button,
-  FPSCounter,
-  VerticalLayout,
-  Rectangle,
-  Group,
-  applyDraggable,
-  Painter,
-  Tween,
-  Easing,
-  Random,
-  GameObjectShapeWrapper,
-  Position,
-} from "../../src/index.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/demos/js/scenes.js

@@ -1,320 +0,0 @@
-import {
-  Game,
-  GameObject,
-  Scene,
-  Rectangle,
-  Circle,
-  Star,
-  Triangle,
-  TextShape,
-  Group,
-  FPSCounter,
-  Motion,
-  Easing,
-  Painter,
-} from "../../src/index";
-
-/**
- * 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();
-  }
-}