@guinetik/gcanvas 1.0.2 → 1.0.4

package/demos/js/tiles.js

@@ -1,312 +0,0 @@
-import {
-  Game,
-  Scene,
-  TileLayout,
-  HorizontalLayout,
-  Rectangle,
-  ShapeGOFactory,
-  Button,
-  FPSCounter,
-  Painter,
-  Tween,
-  Easing,
-  Position,
-} from "../../src/index";
-
-// Configuration
-const CONFIG = {
-  tileSize: 50,
-  tileSpacing: 12,
-  tilePadding: 20,
-  initialTiles: 50,
-  maxColumns: 10,
-  uiHeight: 100, // Space reserved for UI at bottom
-};
-
-export class TileDemo extends Scene {
-  constructor(game, options = {}) {
-    super(game, options);
-    this.elapsedTime = this.lastChangeTime = 0;
-  }
-
-  isMobile() {
-    return this.game.width < 600;
-  }
-
-  getResponsiveColumns() {
-    const availableWidth = this.game.width - CONFIG.tilePadding * 2;
-    const tileWithSpacing = CONFIG.tileSize + CONFIG.tileSpacing;
-    const columns = Math.floor(availableWidth / tileWithSpacing);
-    return Math.max(2, Math.min(CONFIG.maxColumns, columns));
-  }
-
-  getViewportDimensions() {
-    const margin = this.isMobile() ? 20 : 40;
-    return {
-      width: this.game.width - margin * 2,
-      height: this.game.height - CONFIG.uiHeight - margin,
-    };
-  }
-
-  init() {
-    const game = this.game;
-    const viewport = this.getViewportDimensions();
-    const columns = this.getResponsiveColumns();
-
-    // 1) Create a scrollable tile grid anchored at center
-    this.grid = new TileLayout(game, {
-      anchor: Position.CENTER,
-      anchorOffsetY: -CONFIG.uiHeight / 2 + 20,
-      columns: columns,
-      spacing: CONFIG.tileSpacing,
-      padding: CONFIG.tilePadding,
-      autoSize: true,
-      debug: true,
-      // Enable scrolling
-      scrollable: true,
-      viewportWidth: viewport.width,
-      viewportHeight: viewport.height,
-    });
-
-    // Add initial tiles
-    for (let i = 0; i < CONFIG.initialTiles; i++) {
-      this.addTile();
-    }
-    this.add(this.grid);
-
-    // 2) Create a HorizontalLayout at bottom-center for UI buttons
-    this.createUI();
-  }
-
-  createUI() {
-    const game = this.game;
-    const isMobile = this.isMobile();
-    const buttonWidth = isMobile ? 70 : 90;
-
-    this.bottomUI = new HorizontalLayout(game, {
-      anchor: Position.BOTTOM_CENTER,
-      anchorOffsetY: -15,
-      spacing: isMobile ? 5 : 10,
-      padding: 10,
-      debug: false,
-      align: "center",
-    });
-    this.add(this.bottomUI);
-
-    // "Add Tile" button
-    this.bottomUI.add(new Button(game, {
-      text: isMobile ? "+" : "Add",
-      width: isMobile ? 40 : buttonWidth,
-      onClick: () => this.addTile(),
-    }));
-
-    // "Remove Tile" button
-    this.bottomUI.add(new Button(game, {
-      text: isMobile ? "-" : "Remove",
-      width: isMobile ? 40 : buttonWidth,
-      onClick: () => this.removeTile(),
-    }));
-
-    // "Add Column" button
-    this.bottomUI.add(new Button(game, {
-      text: isMobile ? "+Col" : "+ Column",
-      width: isMobile ? 50 : buttonWidth,
-      onClick: () => {
-        const maxColumns = this.getResponsiveColumns();
-        if (this.grid.columns < maxColumns) {
-          this.grid.columns++;
-          this.grid.markBoundsDirty();
-        }
-      },
-    }));
-
-    // "Remove Column" button
-    this.bottomUI.add(new Button(game, {
-      text: isMobile ? "-Col" : "- Column",
-      width: isMobile ? 50 : buttonWidth,
-      onClick: () => {
-        this.grid.columns = Math.max(1, this.grid.columns - 1);
-        this.grid.markBoundsDirty();
-      },
-    }));
-
-    // Add 10 tiles button (for quickly testing scroll)
-    this.bottomUI.add(new Button(game, {
-      text: isMobile ? "+10" : "Add 10",
-      width: isMobile ? 45 : buttonWidth,
-      onClick: () => {
-        for (let i = 0; i < 10; i++) this.addTile();
-      },
-    }));
-  }
-
-  addTile() {
-    const rect = new Rectangle({
-      width: CONFIG.tileSize,
-      height: CONFIG.tileSize,
-      color: Painter.colors.randomColorHSL(),
-      strokeColor: "white",
-    });
-    const tileGO = ShapeGOFactory.create(this.game, rect);
-    this.grid.add(tileGO);
-  }
-
-  removeTile() {
-    if (this.grid.children.length > 0) {
-      const last = this.grid.children[this.grid.children.length - 1];
-      this.grid.remove(last);
-    }
-  }
-
-  onResize() {
-    if (!this.grid) return;
-
-    // Update columns based on new width
-    const newColumns = this.getResponsiveColumns();
-    if (this.grid.columns !== newColumns) {
-      this.grid.columns = newColumns;
-    }
-
-    // Update viewport for scrolling
-    const viewport = this.getViewportDimensions();
-    this.grid._viewportWidth = viewport.width;
-    this.grid._viewportHeight = viewport.height;
-
-    this.grid.markBoundsDirty();
-    if (this.bottomUI) {
-      this.bottomUI.markBoundsDirty();
-    }
-  }
-
-  update(dt) {
-    super.update(dt);
-    this.elapsedTime += dt;
-
-    // Only process tiles every N seconds to reduce frequency
-    if (this.elapsedTime - this.lastChangeTime > 0.1) {
-      this.lastChangeTime = this.elapsedTime;
-
-      // Random number of tiles to change (between 1 and 10% of total tiles)
-      const tilesToChange = Math.max(
-        1,
-        Math.floor(this.grid.children.length * (0.1 + Math.random() * 0.1))
-      );
-
-      // Filter out tiles that are already tweening
-      const availableTiles = this.grid.children.filter(
-        (tile) => !tile.isTweening
-      );
-
-      // Shuffle and pick random tiles
-      const shuffled = [...availableTiles].sort(() => 0.5 - Math.random());
-      const selectedTiles = shuffled.slice(
-        0,
-        Math.min(tilesToChange, availableTiles.length)
-      );
-
-      // Start tweening on selected tiles
-      for (const tile of selectedTiles) {
-        tile.isTweening = true;
-        
-        // Store RGB values directly instead of CSS string to avoid parsing issues
-        const rgb = tile.shape.color ? 
-          Painter.colors.parseColorString(tile.shape.color) : 
-          [255, 255, 255]; // Default to white if color is undefined
-        
-        tile.startRGB = rgb;
-        
-        // Generate vibrant random color in RGB directly
-        const hue = Math.floor(Math.random() * 360);
-        const saturation = 80 + Math.floor(Math.random() * 20); // 80-100%
-        const lightness = 50 + Math.floor(Math.random() * 30); // 50-80%
-        const targetRGB = Painter.colors.hslToRgb(hue, saturation, lightness);
-        
-        tile.targetRGB = targetRGB;
-        tile.tweenElapsed = 0;
-        tile.tweenDuration = 0.5 + Math.random() * 0.5; // Random duration between 0.5-1.0 seconds
-      }
-    }
-
-    // Update all tweening tiles
-    for (const tile of this.grid.children) {
-      if (tile.isTweening) {
-        try {
-          // Update elapsed time
-          tile.tweenElapsed += dt;
-          
-          // Calculate progress with proper easing
-          const progress = Math.min(tile.tweenElapsed / tile.tweenDuration, 1.0);
-          const easedProgress = Easing.easeInOutQuad(progress);
-          
-          // Use the stored RGB values directly
-          if (tile.startRGB && tile.targetRGB) {
-            const newRGB = Tween.tweenColor(
-              tile.startRGB,
-              tile.targetRGB,
-              easedProgress
-            );
-            
-            // Convert interpolated RGB values to CSS color string
-            tile.shape.color = Painter.colors.rgbArrayToCSS(newRGB);
-            
-            // Check if tween is complete
-            if (progress >= 1) {
-              tile.isTweening = false;
-              tile.shape.color = Painter.colors.rgbArrayToCSS(tile.targetRGB);
-            }
-          } else {
-            // Color missing, reset the tweening state
-            console.warn("Missing color values for tweening");
-            tile.isTweening = false;
-            
-            // Set a fallback color
-            const fallbackRGB = [
-              Math.floor(Math.random() * 255),
-              Math.floor(Math.random() * 255),
-              Math.floor(Math.random() * 255)
-            ];
-            tile.shape.color = Painter.colors.rgbArrayToCSS(fallbackRGB);
-          }
-        } catch (error) {
-          // Handle any errors in the color transition
-          console.warn("Error during color tweening:", error);
-          tile.isTweening = false;
-          
-          // Set a fallback color
-          const fallbackRGB = [
-            Math.floor(Math.random() * 255),
-            Math.floor(Math.random() * 255),
-            Math.floor(Math.random() * 255)
-          ];
-          tile.shape.color = Painter.colors.rgbArrayToCSS(fallbackRGB);
-        }
-      }
-    }
-  }
-}
-
-//
-export class MyGame extends Game {
-  constructor(canvas) {
-    super(canvas);
-    this.backgroundColor = "black";
-    this.enableFluidSize();
-  }
-
-  init() {
-    super.init();
-    this.tileDemo = new TileDemo(this);
-    this.pipeline.add(this.tileDemo);
-    this.pipeline.add(
-      new FPSCounter(this, {
-        anchor: "bottom-right",
-      })
-    );
-  }
-
-  onResize() {
-    if (this.tileDemo) {
-      this.tileDemo.onResize();
-    }
-  }
-}

package/demos/js/tweendemo.js

@@ -1,79 +0,0 @@
-import {
-  Game,
-  Rectangle,
-  Group,
-  Scene,
-  ShapeGOFactory,
-  TextShape,
-  FPSCounter,
-  Tween,
-  Tweenetik,
-  Easing,
-} from "../../src/index";
-export class TweenDemo extends Scene {
-  constructor(game, options = {}) {
-    super(game, options);
-    const bg = new Rectangle({ width: 100, height: 100, color: "#0f0" });
-    const frame = new Rectangle({ width: 80, height: 80, color: "#000" });
-    this.label = new TextShape("1%", {
-      font: "18px monospace",
-      color: "#F0F",
-      align: "center",
-      baseline: "middle",
-    });
-    const group = new Group();
-    group.add(bg);
-    group.add(frame);
-    group.add(this.label);
-    group.scaleX = group.scaleY = 2; // add individual scale to this group to test if the outer group scales it too
-    //
-    const wrapper = new Group();
-    wrapper.add(group);
-    //
-    this.box = ShapeGOFactory.create(game, wrapper);
-    this.box.anchor = "center";
-    this.add(this.box);
-    this.growing = false;
-    this.tween();
-  }
-
-  tween() {
-    this.growing = !this.growing;
-    const scale = this.growing ? 2 : 1;
-    const easing = this.growing ? Easing.easeOutElastic : Easing.easeInOutBack;
-    // Tweenetik is a simple tweening library that works with any object
-    Tweenetik.to(
-      this.box, // an object or sprite
-      { scaleX: scale, scaleY: scale }, // the properties & end-values
-      2.0, // duration in seconds
-      easing, // easing function
-      {
-        delay: 0.3,
-        onComplete: () => this.tween(), // restart the tween
-        onUpdate: () => this.updateText(),
-      }
-    );
-  }
-
-  updateText() {
-    this.label.text = `${Math.round(this.box.scaleX * 100)}%`;
-  }
-}
-//
-export class MyGame extends Game {
-  constructor(canvas) {
-    super(canvas);
-    this.backgroundColor = "black";
-    this.enableFluidSize();
-  }
-
-  init() {
-    super.init();
-    this.pipeline.add(new TweenDemo(this, {debug: true, anchor: "center"}));
-    this.pipeline.add(
-      new FPSCounter(this, {
-        anchor: "bottom-right",
-      })
-    );
-  }
-}

package/demos/js/visibility.js

@@ -1,102 +0,0 @@
-import {
-  Game,
-  Scene,
-  HorizontalLayout,
-  Rectangle,
-  ShapeGOFactory,
-  Button,
-  FPSCounter,
-  Square,
-  Position,
-} from "../../src/index";
-
-export class VisibilityDemo extends Scene {
-  constructor(game, options = {}) {
-    super(game, options);
-    this.MARGIN = 20;
-    // 1) A horizontal layout of squares at screen center
-    this.squaresLayout = new HorizontalLayout(game, {
-      spacing: 1,
-      padding: 4,
-    });
-    this.add(this.squaresLayout);
-    // Create a few colored squares and add them to the layout
-    const colors = ["#0f0", "#0f0", "#0f0"];
-    for (let i = 0; i < colors.length; i++) {
-      const rect = new Square(100, {
-        color: colors[i],
-      });
-      const squareGO = ShapeGOFactory.create(game, rect);
-      this.squaresLayout.add(squareGO);
-    }
-    // 2) A UI scene that holds the buttons
-    this.uiScene = new Scene(game, {
-      name: "UI Scene",
-      width: 120,
-      height: 40,
-      anchor: Position.BOTTOM_CENTER,
-      anchorMargin: 20,
-    });
-    this.uiScene.width = 150;
-    this.uiScene.height = 50;
-    this.add(this.uiScene);
-    // A button that toggles visibility of a random square
-    let currentSquare = null;
-    const pickOne = () => {
-      if (currentSquare) {
-        currentSquare.visible = !currentSquare.visible;
-      }
-      const index = Math.floor(
-        Math.random() * this.squaresLayout.children.length
-      );
-      const square = this.squaresLayout.children[index];
-      if (currentSquare == square) {
-        currentSquare = null;
-        return pickOne();
-      }
-      currentSquare = square;
-      currentSquare.visible = !currentSquare.visible;
-    };
-    const toggleBtn = new Button(game, {
-      text: "Toggle Random",
-      width: 120,
-      onClick: () => {
-        pickOne();
-      },
-    });
-    this.uiScene.add(toggleBtn);
-  }
-
-  update(dt) {
-    // Update scene dimensions based on margin
-    this.width = this.game.width - this.MARGIN * 2;
-    this.height = this.game.height - this.MARGIN * 2;
-    // Center the scene in the game
-    this.x = this.game.width / 2;
-    this.y = this.game.height / 2;
-    super.update(dt);
-  }
-}
-
-//
-export class MyGame extends Game {
-  constructor(canvas) {
-    super(canvas);
-    this.backgroundColor = "black";
-    this.enableFluidSize();
-  }
-
-  init() {
-    super.init();
-    this.scene = new VisibilityDemo(this, {
-      width: this.width,
-      height: this.height,
-    });
-    this.pipeline.add(this.scene);
-    this.pipeline.add(
-      new FPSCounter(this, {
-        anchor: Position.BOTTOM_RIGHT,
-      })
-    );
-  }
-}

package/demos/kerr.html

@@ -1,28 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Math & Physics - Kerr Metric (Rotating Black Hole)</title>
-  <link rel="stylesheet" href="demos.css" />
-  <script src="./js/info-toggle.js"></script>
-</head>
-
-<body>
-  <div id="info">
-    <strong>Kerr Metric</strong> — Rotating black hole with frame dragging.<br/>
-    <span style="color:#CCC">
-      <li><code>Spin</code> — Parameter a controls rotation (0 to M).</li>
-      <li><code>g_t&phi;</code> — Off-diagonal term = frame dragging!</li>
-      <li><code>Ergosphere</code> — Orange region where nothing stays still.</li>
-      <li><code>Two ISCOs</code> — Prograde vs retrograde orbits differ.</li>
-      <li><code>Click</code> — Shuffle mass and spin parameters.</li>
-      <li><code>Drag</code> — Rotate the 3D view.</li>
-    </span>
-  </div>
-  <canvas id="game"></canvas>
-  <script type="module" src="./js/kerr.js"></script>
-</body>
-
-</html>

package/demos/lavalamp.html

@@ -1,27 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Generative Art - Lava Lamp</title>
-  <link rel="stylesheet" href="demos.css" />
-  <script src="./js/info-toggle.js"></script>
-</head>
-
-<body>
-  <div id="info">
-    <strong>Lava Lamp</strong> — Metaball lava lamp with heat dynamics.<br/>
-    <span style="color:#CCC">
-      <li><code>ON/OFF</code> — Toggle power. Watch the wax cool and rise!</li>
-      <li><code>Heat zones</code> — Smooth thermal transitions between hot/cold.</li>
-      <li><code>Buoyancy</code> — Hot blobs rise, cold blobs sink.</li>
-      <li><code>Heat transfer</code> — Nearby blobs exchange temperature.</li>
-      <li><code>Metaballs</code> — Blobs merge and split organically.</li>
-    </span>
-  </div>
-  <canvas id="game"></canvas>
-  <script type="module" src="./js/lavalamp.js"></script>
-</body>
-
-</html>

package/demos/layouts.html

@@ -1,37 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Layout Demo</title>
-  <link rel="stylesheet" href="demos.css" />
-  <script src="./js/info-toggle.js"></script>
-</head>
-
-<body>
-  <div id="info" class="light">
-    <strong>Layout Demo</strong><br>
-    <span>Demonstrates dynamic switching between <code>HorizontalLayout</code> and
-      <code>VerticalLayout</code>.<br>
-      Use the right side buttons to switch layout direction.<br>
-      Use the bottom buttons to add or remove random rectangles from the layout group.<br>
-      Layout auto-sizes and aligns children with spacing and padding.
-    </span>
-  </div>
-  <canvas id="game"></canvas>
-
-  <script type="module">
-    import { LayoutDemo } from "./js/layout.js";
-    window.addEventListener("load", () => {
-      const canvas = document.getElementById("game");
-      const game = new LayoutDemo(canvas);
-      //game.setFPS(1)
-      //game.enableLogging(true);
-      game.start();
-      //setTimeout(game.stop.bind(game), 3000);
-    });
-  </script>
-</body>
-
-</html>

package/demos/logo.svg

@@ -1,4 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="32.9 174.743 71.888 63.576" width="71.888px" height="63.576px">
-  <path d="M 57.971 224.292 L 57.971 203.374 L 57.971 194.861 L 75.109 194.861 L 75.109 188.769 L 63.16 188.769 L 63.16 174.743 L 57.971 174.743 L 57.971 189.041 L 57.971 194.861 L 32.9 194.861 L 32.9 203.773 L 50.377 203.773 L 50.377 224.292 L 57.971 224.292 Z M 79.717 238.319 L 79.717 224.02 L 79.717 218.2 L 104.788 218.2 L 104.788 209.287 L 87.31 209.287 L 87.31 188.769 L 79.717 188.769 L 79.717 209.686 L 79.717 218.2 L 62.579 218.2 L 62.579 224.293 L 74.526 224.293 L 74.526 238.319 L 79.717 238.319 Z" style="fill: rgb(255, 255, 255); fill-rule: evenodd; stroke-width: 1;" id="path8" transform="matrix(0.9999999999999999, 0, 0, 0.9999999999999999, 0, 0)"/>
-</svg>

package/demos/loop.html

@@ -1,84 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Game Loop Demo</title>
-    <link rel="stylesheet" href="demos.css" />
-    <script src="./js/info-toggle.js"></script>
-</head>
-
-<body>
-    <div id="info">
-        <strong>Game Loop Demo</strong> — Demonstrates the <code>update → render</code> cycle using a bouncing ball.
-        <br>
-        A <strong>Game</strong> runs the loop and delegates updates and rendering to its <strong>Pipeline</strong>. <br>
-        A <strong>GameObject</strong> implements <code>update(dt)</code> and <code>render()</code> to animate and draw
-        itself. <br>
-        This demo shows a ball that moves and bounces off canvas edges on each frame.
-    </div>
-
-    <canvas id="game"></canvas>
-
-    <script type="module">
-        import { Game, Scene, GameObject, FPSCounter, Painter, Circle } from "../src/index";
-        class BouncingBall extends GameObject {
-            constructor(game) {
-                super(game);
-                this.radius = 20;
-                this.circle = new Circle(this.radius, {
-                    color: "#0f0",
-                    debug: false
-                });
-                this.x = game.width / 2;
-                this.y = game.height / 2;
-                this.vx = 150;
-                this.vy = 100;
-            }
-
-            update(dt) {
-                this.x += this.vx * dt;
-                this.y += this.vy * dt;
-                const w = this.game.width;
-                const h = this.game.height;
-                if (this.x - this.radius < 0 || this.x + this.radius > w) this.vx *= -1;
-                if (this.y - this.radius < 0 || this.y + this.radius > h) this.vy *= -1;
-                // Clamp and update shape position
-                this.x = Math.max(this.radius, Math.min(w - this.radius, this.x));
-                this.y = Math.max(this.radius, Math.min(h - this.radius, this.y));
-                super.update(dt);
-            }
-
-            draw() {
-                super.draw();
-                this.circle.render();
-            }
-        }
-
-        class LoopGame extends Game {
-            constructor(canvas) {
-                super(canvas);
-                this.enableFluidSize();
-                this.backgroundColor = "black";
-            }
-
-            init() {
-                super.init();
-                this.pipeline.add(new BouncingBall(this));
-                this.pipeline.add(new FPSCounter(this, { anchor: "bottom-left" }));
-            }
-        }
-
-        window.addEventListener("load", () => {
-            const canvas = document.getElementById("game");
-            const game = new LoopGame(canvas);
-            //game.enableLogging();
-            game.enablePauseOnBlur(true);
-            game.setFPS(60);
-            game.start();
-        });
-    </script>
-</body>
-
-</html>