@guinetik/gcanvas 1.0.0

package/demos/js/layout.js

@@ -0,0 +1,354 @@
+import {
+  Game,
+  Scene,
+  FPSCounter,
+  GameObject,
+  HorizontalLayout,
+  VerticalLayout,
+  Button,
+  ShapeGOFactory,
+  Rectangle,
+  Position,
+  Painter,
+  TileLayout,
+  GridLayout,
+} from "../../src/index";
+
+export class LayoutDemo extends Game {
+  constructor(canvas) {
+    super(canvas);
+    this.enableFluidSize();
+    this.backgroundColor = "black";
+    this.cellSize = 110;
+    this.maxColumns = 6;
+  }
+
+  getResponsiveColumns() {
+    const margin = 100; // space for UI
+    const availableWidth = this.width - margin;
+    return Math.min(
+      this.maxColumns,
+      Math.max(1, Math.floor(availableWidth / this.cellSize))
+    );
+  }
+
+  isMobile() {
+    return this.width < 600;
+  }
+
+  getLayoutYOffset() {
+    // On mobile (no info bar), move layout up; on desktop keep lower to avoid info bar
+    return this.isMobile() ? -80 : 0;
+  }
+
+  /**
+   * Get viewport dimensions based on current layout mode.
+   * - Horizontal: fixed height (item height + padding), width = screen - margins
+   * - Vertical: fixed width (item width + padding), height = screen - nav - margins
+   * - Tile/Grid: square-ish viewport with margins on sides, scrolls vertically
+   */
+  getViewportDimensions() {
+    const navHeight = 320; // bottom nav (two rows at -30 and -100 offset + button heights)
+    const margin = 50;
+
+    const layoutModes = this.getLayoutModes();
+    const modeConfig = layoutModes[this.mode];
+
+    switch (this.mode) {
+      case "horizontal":
+        // Horizontal: fixed height based on item height, scroll horizontally
+        return {
+          width: Math.max(200, this.width - margin * 2),
+          height: 100 + 20, // item height (100) + padding
+        };
+
+      case "vertical":
+        // Vertical: fixed width based on item width, scroll vertically
+        return {
+          width: 200 + 20, // item width (200) + padding
+          height: Math.max(200, this.height - navHeight - margin),
+        };
+
+      case "tile":
+      case "grid":
+      default:
+        // Tile/Grid: responsive square-ish viewport, scroll vertically
+        return {
+          width: Math.max(200, this.width - margin * 2),
+          height: Math.max(200, this.height - navHeight - margin),
+        };
+    }
+  }
+
+  // Define layout modes configuration (uses arrow functions to access `this`)
+  getLayoutModes() {
+    const columns = this.getResponsiveColumns();
+    return {
+      horizontal: {
+        layoutClass: HorizontalLayout,
+        itemDimensions: () => ({
+          width: 40 + Math.random() * 60,
+          height: 100,
+        }),
+      },
+      vertical: {
+        layoutClass: VerticalLayout,
+        itemDimensions: () => ({
+          width: 200,
+          height: 40 + Math.random() * 60,
+        }),
+      },
+      tile: {
+        layoutClass: TileLayout,
+        itemDimensions: () => ({
+          width: 100,
+          height: 100,
+        }),
+        layoutOptions: (baseOpts) => ({
+          ...baseOpts,
+          columns: columns,
+        }),
+      },
+      grid: {
+        layoutClass: GridLayout,
+        itemDimensions: () => {
+          // Randomly choose between portrait or landscape
+          const isPortrait = Math.random() > 0.5;
+          if (isPortrait) {
+            // Portrait: taller than wide
+            if (Math.random() > 0.3) {
+              return {
+                width: 100,
+                height: 200,
+              };
+            } else {
+              return {
+                width: 100,
+                height: 100,
+              };
+            }
+          } else {
+            if (Math.random() > 0.3) {
+              // Landscape: wider than tall
+              return {
+                width: 100,
+                height: 50,
+              };
+            } else {
+              return {
+                width: 100,
+                height: 100,
+              };
+            }
+          }
+        },
+        layoutOptions: (baseOpts) => ({
+          ...baseOpts,
+          columns: columns,
+          spacing: 10,
+          padding: 10,
+          centerItems: true,
+        }),
+      },
+    };
+  }
+
+  init() {
+    super.init();
+    // Config Options
+    this.items = [];
+    this.mode = "horizontal";
+    this.currentColumns = this.getResponsiveColumns();
+
+    // Create UI
+    this.ui = new Scene(this, {
+      debug: true,
+      debugColor: "pink",
+      anchor: Position.CENTER,
+    });
+    this.pipeline.add(this.ui);
+
+    // Add FPS Counter
+    this.pipeline.add(
+      new FPSCounter(this, { color: "#00FF00", anchor: "bottom-right" })
+    );
+
+    // Create bottom navigation - layout type selection (at very bottom)
+    this.layoutNav = new HorizontalLayout(this, {
+      debug: true,
+      debugColor: "purple",
+      anchor: Position.BOTTOM_CENTER,
+      anchorOffsetY: -30,
+      padding: 10,
+      spacing: 10,
+    });
+    this.ui.add(this.layoutNav);
+
+    // Add layout type buttons
+    const layoutModes = this.getLayoutModes();
+    Object.keys(layoutModes).forEach((mode) => {
+      this.layoutNav.add(
+        new Button(this, {
+          text: mode.charAt(0).toUpperCase() + mode.slice(1),
+          onClick: () => this.setLayout(mode),
+        })
+      );
+    });
+
+    // Create action buttons (add/remove) - positioned above layout nav
+    this.actionNav = new HorizontalLayout(this, {
+      anchor: Position.BOTTOM_CENTER,
+      debug: true,
+      debugColor: "cyan",
+      anchorOffsetY: -100, // Space above the layout nav
+      padding: 10,
+      spacing: 10,
+    });
+    this.actionNav.add(
+      new Button(this, {
+        text: "ADD",
+        onClick: this.addItem.bind(this),
+      })
+    );
+    this.actionNav.add(
+      new Button(this, {
+        text: "REMOVE",
+        onClick: () => this.removeItem(),
+      })
+    );
+    this.ui.add(this.actionNav);
+
+    // Create initial layout
+    this.createLayout();
+
+    // Add enough items to enable scrolling
+    for (let i = 0; i < 5; i++) {
+      this.addItem(i);
+    }
+  }
+
+  createLayout() {
+    if (this.layout) {
+      // Properly clear the layout
+      this.layout.clear();
+      this.pipeline.remove(this.layout);
+      this.layout = null;
+    }
+
+    const viewport = this.getViewportDimensions();
+
+    const baseOpts = {
+      anchor: Position.CENTER,
+      anchorOffsetY: this.getLayoutYOffset(),
+      spacing: 10,
+      padding: 10,
+      debug: true,
+      autoSize: true,
+      debugColor: Painter.colors.randomColorHSL(),
+      // Enable scrolling with responsive viewport
+      scrollable: true,
+      viewportWidth: viewport.width,
+      viewportHeight: viewport.height,
+    };
+
+    const layoutModes = this.getLayoutModes();
+    const modeConfig = layoutModes[this.mode];
+    const layoutOpts = modeConfig.layoutOptions
+      ? modeConfig.layoutOptions(baseOpts)
+      : baseOpts;
+
+    this.layout = new modeConfig.layoutClass(this, layoutOpts);
+    // Add layout to pipeline
+    this.pipeline.add(this.layout);
+    // Add items to layout
+    if (this.items.length > 0) {
+      // Reset each item properly
+      setTimeout(() => {
+        this.items.forEach((item) => {
+          const dimensions = modeConfig.itemDimensions();
+          item.width = dimensions.width;
+          item.height = dimensions.height;
+          // Add to the container
+          this.layout.add(item);
+        });
+      }, 10);
+      // Mark the layout as needing recalculation
+      this.layout.markBoundsDirty();
+    }
+  }
+
+  update(dt) {
+    super.update(dt);
+    // stuff that has to do with bound checking should be done after super.update.
+    if (this.boundsDirty) {
+      console.log("update", this.boundsDirty);
+      this.ui.width = this.width;
+      this.ui.height = this.height;
+      this.ui.markBoundsDirty();
+      this.layout.markBoundsDirty();
+      this.boundsDirty = false;
+    }
+  }
+
+  setLayout(mode) {
+    if (mode !== this.mode) {
+      this.mode = mode;
+      this.createLayout();
+    }
+  }
+
+  addItem(i) {
+    const layoutModes = this.getLayoutModes();
+    const modeConfig = layoutModes[this.mode];
+    const dimensions = modeConfig.itemDimensions();
+    const rect = new Rectangle({
+      width: dimensions.width,
+      height: dimensions.height,
+      color: Painter.colors.randomColorHSL(),
+      stroke: "white",
+      lineWidth: 2,
+    });
+    const go = ShapeGOFactory.create(this, rect);
+    go.name = "item " + i;
+    this.items.push(go);
+    this.layout.add(go);
+  }
+
+  removeItem() {
+    if (this.items.length > 0) {
+      const go = this.items.pop();
+      this.layout.remove(go);
+    }
+  }
+
+  onResize() {
+    if (!this.layout) return;
+
+    const newColumns = this.getResponsiveColumns();
+
+    // Recreate layout if columns changed (for tile/grid modes)
+    if (this.currentColumns !== newColumns) {
+      this.currentColumns = newColumns;
+      if (this.mode === "tile" || this.mode === "grid") {
+        this.createLayout();
+        return; // createLayout already sets up viewport
+      }
+    }
+
+    // Update viewport dimensions for scrolling (mode-specific)
+    const viewport = this.getViewportDimensions();
+    this.layout._viewportWidth = viewport.width;
+    this.layout._viewportHeight = viewport.height;
+
+    // Update layout Y offset based on mobile/desktop
+    this.layout.anchorOffsetY = this.getLayoutYOffset();
+
+    // Update UI dimensions
+    this.ui.width = this.width - 20;
+    this.ui.height = this.height - 20;
+    this.ui.markBoundsDirty();
+    this.layoutNav.markBoundsDirty();
+    this.actionNav.markBoundsDirty();
+    this.layout.markBoundsDirty();
+  }
+}

package/demos/js/mondrian.js

@@ -0,0 +1,285 @@
+import {
+  Button,
+  Game,
+  GridLayout,
+  HorizontalLayout,
+  Rectangle,
+  Scene,
+  ToggleButton,
+  VerticalLayout,
+  TextShape,
+  Position,
+  ShapeGOFactory,
+  Easing,
+  Tweenetik,
+} from "../../src/index";
+
+/**
+ * MondrianDemo - Interactive grid-based composition
+ * Inspired by the works of Piet Mondrian
+ */
+export class MondrianDemo extends Game {
+  constructor(canvas) {
+    super(canvas);
+    this.enableFluidSize();
+  }
+
+  init() {
+    super.init();
+
+    // Setup
+    this.backgroundColor = "#ffffff";
+    this.gridScene = new Scene(this, { debugColor: "black" });
+
+    // Configure grid scene
+    const margin = 20;
+    this.gridScene.width = this.width - margin * 2;
+    this.gridScene.height = this.height - margin * 2;
+    this.gridScene.x = margin;
+    this.gridScene.y = margin;
+
+    // Generate initial composition
+    this.generateMondrianRectangles(
+      this.gridScene.width,
+      this.gridScene.height
+    );
+
+    // Add to pipeline
+    this.pipeline.add(this.gridScene);
+
+    // Handle click events
+    this.events.on("click", () => this.animateExplosion());
+  }
+
+  animateExplosion() {
+    const centerX = this.width / 2;
+    const centerY = this.height / 2;
+    const maxDimension = Math.max(this.width, this.height);
+    const children = this.gridScene._collection.getSortedChildren();
+
+    children.forEach((rect) => {
+      // Calculate angle and distance from center
+      const angle = Math.atan2(rect.y - centerY, rect.x - centerX);
+      const distanceFromCenter = Math.sqrt(
+        Math.pow(rect.x - centerX, 2) + Math.pow(rect.y - centerY, 2)
+      );
+      const normalizedDistance = Math.min(
+        1,
+        distanceFromCenter / (Math.min(this.width, this.height) / 2)
+      );
+
+      // Calculate animation parameters
+      const flyDistance = maxDimension * 1.5;
+      const destX = centerX + Math.cos(angle) * flyDistance;
+      const destY = centerY + Math.sin(angle) * flyDistance;
+      const delay = (1 - normalizedDistance) * 0.5;
+      const rotation = (Math.random() * 2 - 1) * Math.PI * 4;
+
+      // Animate rectangle flying away
+      Tweenetik.to(
+        rect,
+        {
+          opacity: 0,
+          x: destX,
+          y: destY,
+          scaleX: 0.2,
+          scaleY: 0.2,
+          rotation: rotation,
+        },
+        0.5 + normalizedDistance * 0.5,
+        Easing.easeInSine,
+        {
+          delay: delay,
+          onComplete: () => {
+            this.generateMondrianRectangles(
+              this.gridScene.width,
+              this.gridScene.height
+            );
+          },
+        }
+      );
+    });
+  }
+
+  generateMondrianRectangles(totalWidth, totalHeight, options = {}) {
+    // Clear existing rectangles
+    this.gridScene.clear();
+
+    // Default options
+    const {
+      lineWidth = 8,
+      step = totalHeight / 6,
+      splitProbability = 0.5,
+    } = options;
+
+    // Colors
+    const white = "#F2F5F1";
+    const colors = ["#D40920", "#1356A2", "#F7D842", "#999999"];
+
+    // Start with one rectangle covering the entire area
+    let squares = [
+      {
+        x: 0,
+        y: 0,
+        width: totalWidth,
+        height: totalHeight,
+      },
+    ];
+
+    // Generate split points based on grid
+    const splitPoints = Array.from(
+      { length: Math.ceil(Math.max(totalWidth, totalHeight) / step) },
+      (_, i) => i * step
+    );
+
+    // Split function
+    const splitSquaresAt = (coord) => {
+      const { x, y } = coord;
+
+      for (let i = squares.length - 1; i >= 0; i--) {
+        const square = squares[i];
+
+        // Split on x-coordinate
+        if (
+          x &&
+          x > square.x &&
+          x < square.x + square.width &&
+          Math.random() < splitProbability
+        ) {
+          squares.splice(i, 1);
+
+          squares.push(
+            {
+              x: square.x,
+              y: square.y,
+              width: x - square.x,
+              height: square.height,
+            },
+            {
+              x: x,
+              y: square.y,
+              width: square.width - (x - square.x),
+              height: square.height,
+            }
+          );
+        }
+
+        // Split on y-coordinate
+        if (
+          y &&
+          y > square.y &&
+          y < square.y + square.height &&
+          Math.random() < splitProbability
+        ) {
+          squares.splice(i, 1);
+
+          squares.push(
+            {
+              x: square.x,
+              y: square.y,
+              width: square.width,
+              height: y - square.y,
+            },
+            {
+              x: square.x,
+              y: y,
+              width: square.width,
+              height: square.height - (y - square.y),
+            }
+          );
+        }
+      }
+    };
+
+    // Apply splits
+    splitPoints.forEach((point) => {
+      splitSquaresAt({ y: point });
+      splitSquaresAt({ x: point });
+    });
+
+    // Assign colors to some squares
+    for (let i = 0; i < colors.length * 3; i++) {
+      const randomIndex = Math.floor(Math.random() * squares.length);
+      squares[randomIndex].color =
+        Math.random() < 0.8 ? colors[i % colors.length] : "black";
+    }
+
+    // Calculate center for animations
+    const centerX = this.width / 2;
+    const centerY = this.height / 2;
+    const maxDimension = Math.max(this.width, this.height);
+
+    // Create and animate rectangles
+    squares.forEach((square, i, allSquares) => {
+      // Create rectangle
+      const rect = new Rectangle({
+        width: square.width - lineWidth,
+        height: square.height - lineWidth,
+        color: square.color || white,
+        stroke: "#000000",
+        lineWidth: lineWidth,
+        crisp: false,
+      });
+
+      // Calculate positions and animation parameters
+      const finalX = square.x + square.width / 2;
+      const finalY = square.y + square.height / 2;
+      const angle = Math.atan2(finalY - centerY, finalX - centerX);
+      const flyDistance = maxDimension * 1.5;
+      const startX = centerX + Math.cos(angle) * flyDistance;
+      const startY = centerY + Math.sin(angle) * flyDistance;
+
+      // Create game object
+      const go = ShapeGOFactory.create(this, rect, {
+        x: startX,
+        y: startY,
+        scaleX: 0.0,
+        scaleY: 0.0,
+        crisp: false,
+        rotation: (Math.random() * 2 - 1) * Math.PI,
+      });
+
+      this.gridScene.add(go);
+
+      // Calculate animation timing
+      const distance = Math.sqrt(
+        Math.pow(finalX - centerX, 2) + Math.pow(finalY - centerY, 2)
+      );
+      const normalizedDistance = Math.min(
+        1,
+        distance / (Math.min(this.width, this.height) / 2)
+      );
+
+      const middle = allSquares.length / 2;
+      const distanceFromMiddle = Math.abs(i - middle);
+      const delay = (distanceFromMiddle / middle) * 0.1;
+
+      // Animate rectangle flying in
+      Tweenetik.to(
+        go,
+        {
+          x: finalX,
+          y: finalY,
+          scaleX: 1,
+          scaleY: 1,
+          rotation: 0,
+        },
+        0.5 + normalizedDistance * 0.5,
+        Easing.easeOutCirc,
+        { delay: delay }
+      );
+    });
+  }
+
+  /**
+   * Update function - called each frame
+   */
+  update(dt) {
+    if (this.boundsDirty) {
+      this.gridScene.width = this.width - 40;
+      this.gridScene.height = this.height - 40;
+    }
+
+    super.update(dt);
+  }
+}