@guinetik/gcanvas 1.0.0

package/demos/demos.css

@@ -0,0 +1,289 @@
+/* General layout */
+body {
+  margin: 0;
+  display: flex;
+  height: 100vh; /* 100% viewport height */
+  background: black; /* optional if you want a black background behind everything */
+  overflow: hidden;
+}
+
+/* Canvas should fill available space without causing scroll */
+canvas#game {
+  display: block;
+  max-width: 100vw;
+  max-height: 100vh;
+}
+
+/* Side navigation */
+nav {
+  width: 200px;
+  background: #0a0a0a;
+  color: white;
+  padding: 1rem;
+  box-sizing: border-box;
+  overflow-y: auto; /* enable scrolling inside nav if content is tall */
+  overflow-x: hidden; /* usually don't want horizontal scroll in nav */
+  font-family: monospace;
+  border-right: 1px solid #1a1a1a;
+}
+
+/* Links inside nav */
+nav a {
+  display: block;
+  color: #ccc;
+  margin-bottom: 0.5rem;
+  text-decoration: none;
+  padding: 0.25rem;
+  transition: background 0.2s ease;
+}
+
+/* Hover effect for nav links */
+nav a:hover {
+  background: #151515;
+  color: #0f0;
+}
+
+/* Active link highlight */
+nav a.active {
+  background: #111;
+  color: #0f0;
+  border-left: 2px solid #0f0;
+  padding-left: 0.5rem;
+}
+
+/* The iframe takes up remaining space */
+iframe {
+  flex: 1;
+  border: none;
+  /* we let the page inside handle its own scrolling if needed */
+}
+
+.light {
+  background: rgba(0, 0, 0, 0.5) !important;
+  color: #ffffff !important;
+}
+
+.light span {
+  background: black !important;
+  color: #0f0;
+  padding: 0;
+  margin: 0;
+}
+
+.light strong,
+.light code {
+  background: #000;
+  color: #FFF;
+  padding: 0.2em 0.3em;
+  box-decoration-break: clone;
+  display: inline;
+  line-height: 1.8;
+}
+
+code {
+  color: black !important;
+  background: #0f0;
+}
+
+.light code {
+  color: black !important;
+  background: #0f0;
+}
+
+/* #info overlay (optional) */
+#info {
+  position: absolute;
+  font-family: monospace;
+  top: 0;
+  left: 0;
+  right: 0;
+  background: rgba(0, 0, 0, 0.8);
+  color: #0f0;
+  padding: 12px 20px;
+  font-size: 14px;
+  line-height: 1.4;
+  border-bottom: 1px solid #333;
+  z-index: 10;
+  pointer-events: none;
+}
+
+/* Info toggle button for mobile */
+#info-toggle {
+  display: none;
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  width: 32px;
+  height: 32px;
+  background: rgba(0, 0, 0, 0.8);
+  border: 1px solid #333;
+  border-radius: 4px;
+  color: #0f0;
+  font-family: monospace;
+  font-size: 18px;
+  font-weight: bold;
+  cursor: pointer;
+  z-index: 11;
+  pointer-events: auto;
+  line-height: 1;
+}
+
+#info-toggle:hover {
+  background: rgba(0, 0, 0, 0.9);
+}
+
+/* Mobile info styles */
+@media (max-width: 768px) {
+  #info-toggle {
+    display: block;
+  }
+
+  #info {
+    max-height: 0;
+    padding: 0 20px;
+    overflow: hidden;
+    transition: max-height 0.3s ease, padding 0.3s ease;
+    pointer-events: auto;
+  }
+
+  #info.open {
+    max-height: 300px;
+    padding: 12px 20px;
+    padding-right: 48px;
+  }
+}
+
+strong {
+  color: #fff;
+}
+
+path {
+  fill: blue;
+}
+
+/* ========================================
+   Mobile Header (hidden on desktop)
+   ======================================== */
+.mobile-header {
+  display: none;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 56px;
+  background: #0a0a0a;
+  z-index: 1000;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 1rem;
+  box-sizing: border-box;
+  border-bottom: 1px solid #1a1a1a;
+}
+
+.mobile-logo {
+  width: 40px;
+  height: 36px;
+}
+
+.mobile-title {
+  font-family: monospace;
+  font-size: 1.4em;
+  color: #CCC;
+  letter-spacing: 2px;
+  font-weight: bold;
+}
+
+/* Hamburger Button */
+.hamburger {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  width: 30px;
+  height: 24px;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  padding: 0;
+  z-index: 1001;
+}
+
+.hamburger span {
+  width: 100%;
+  height: 3px;
+  background: #ccc;
+  border-radius: 2px;
+  transition: all 0.3s ease;
+  transform-origin: center;
+}
+
+/* Hamburger animation when active */
+.hamburger.active span:nth-child(1) {
+  transform: translateY(7.5px) rotate(45deg);
+}
+
+.hamburger.active span:nth-child(2) {
+  opacity: 0;
+}
+
+.hamburger.active span:nth-child(3) {
+  transform: translateY(-7.5px) rotate(-45deg);
+}
+
+/* Nav Overlay (for closing menu) */
+.nav-overlay {
+  display: none;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: 99;
+}
+
+.nav-overlay.open {
+  display: block;
+}
+
+/* ========================================
+   Mobile Responsive Styles
+   ======================================== */
+@media (max-width: 768px) {
+  /* Show mobile header */
+  .mobile-header {
+    display: flex;
+  }
+
+  /* Change body layout to column for mobile */
+  body {
+    flex-direction: column;
+  }
+
+  /* Transform nav into slide-out menu */
+  nav {
+    position: fixed;
+    top: 56px;
+    left: -280px;
+    width: 280px;
+    height: calc(100vh - 56px);
+    z-index: 100;
+    transition: left 0.3s ease;
+    padding-top: 1rem;
+  }
+
+  /* Nav open state */
+  nav.open {
+    left: 0;
+  }
+
+  /* Hide nav branding on mobile (already shown in mobile header) */
+  .nav-branding {
+    display: none;
+  }
+
+  /* Adjust iframe to account for mobile header */
+  iframe {
+    margin-top: 56px;
+    height: calc(100vh - 56px);
+  }
+}

package/demos/easing.html

@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Easing Functions</title>
+  <link rel="stylesheet" href="demos.css" />
+  <script src="./js/info-toggle.js"></script>
+</head>
+
+<body>
+  <div id="info">
+    <strong>Easing Functions Demo</strong> - Displays all 30 easing functions available in the library as bezier curve graphs. Functions are organized by type: Linear, Quadratic, Cubic, Quartic, Sine, Exponential, Circular, Elastic, Back, and Bounce. Each curve shows how the easing transforms input time (x-axis) to output value (y-axis).
+  </div>
+  <canvas id="game"></canvas>
+  <script type="module">
+    import { MyGame } from './js/easing.js';
+
+    window.addEventListener("load", () => {
+      const canvas = document.getElementById("game");
+      const game = new MyGame(canvas);
+      game.start();
+    });
+  </script>
+</body>
+
+</html>

package/demos/events.html

@@ -0,0 +1,195 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>EventEmitter Demo</title>
+    <link rel="stylesheet" href="demos.css" />
+    <script src="./js/info-toggle.js"></script>
+</head>
+
+<body>
+    <div id="info">
+        <strong>EventEmitter Demo</strong> — Shows how <code>Game.events</code> handles unified input events. <br>
+        Events from <strong>mouse</strong>, <strong>touch</strong>, <strong>keyboard</strong> and <strong>input</strong>
+        are emitted using a
+        single system. <br>
+        This demo logs the last event that happened inside a box on screen. Try clicking, moving, or touching!
+    </div>
+
+    <canvas id="game"></canvas>
+
+    <script type="module">
+        import { Game, Scene, GameObject, FPSCounter, Rectangle, TextShape, Group, Keys } from "../src/index";
+
+        class EventLogger extends GameObject {
+            constructor(game, options = {}) {
+                super(game, options);
+                this.interactive = true;
+                console.groupCollapsed("EventLoggerText");
+                this.label = new TextShape("Waiting for event...", {
+                    font: "16px monospace",
+                    color: "#0f0",
+                    align: "center",
+                    baseline: "middle",
+                    debug: false,
+                    name: "EventLoggerText"
+                });
+                console.groupEnd();
+                console.groupCollapsed("EventLoggerBox");
+
+                this.box = new Rectangle({
+                    width: 280,
+                    height: 80,
+                    color: "#111",
+                    debug: true
+                });
+                console.groupEnd();
+                console.groupCollapsed("EventLoggerGroup");
+
+                this.group = new Group({ width: 280, height: 80 });
+                this.group.add(this.box);
+                this.group.add(this.label);
+                console.groupEnd();
+                const events = ["wheel", "inputdown", "inputup", "inputmove", "click"];
+
+                const groupEvents = [
+                    "mouseover", "mouseout", "click", "touchstart", "touchend", "touchmove",
+                    "inputdown", "inputup", "inputmove"
+                ];
+
+                let lock = false;
+                var inside = false;
+
+                events.forEach(type => {
+                    this.game.events.on(type, (e) => {
+                        if (!lock && !inside) {
+                            this.label.text = `Ouside the Box: ${type}`;
+                        }
+                    });
+                });
+
+                const unlockAfterTimeout = (time) => {
+                    setTimeout(() => {
+                        lock = false;
+                    }, time);
+                };
+
+                groupEvents.forEach(type => {
+                    this.on(type, (e) => {
+                        if (!lock) {
+                            this.label.text = `Inside the Box: ${type}`;
+                        }
+                        if (type == "mouseout" || type == "mouseover") {
+                            lock = true;
+                            unlockAfterTimeout(1000);
+                        }
+                        if (type == "mouseout") {
+                            inside = false;
+                        } else if (type == "mouseover") {
+                            inside = true;
+                        }
+                    });
+                });
+                //
+                //
+                /**
+                 * Log Keys. We'll listen for key down events on some set of logical keys
+                 * and do exactly the same inside/outside labeling. We also handle “_up” suffix.
+                 */
+                const keyList = [
+                    Keys.W, Keys.A, Keys.S, Keys.D,
+                    Keys.UP, Keys.DOWN, Keys.LEFT, Keys.RIGHT,
+                    Keys.SPACE, Keys.SHIFT, Keys.ENTER, Keys.ESC,
+                    "keyup", "keydown"
+                ];
+
+                keyList.forEach(logicalKey => {
+                    // Key down event => just “logicalKey” 
+                    this.game.events.on(logicalKey, (e) => {
+                        if (!lock) {
+                            if (e.type == "keydown") {
+                                // Only log if key is NOT one of the logical keys in keyList
+                                if (keyList.indexOf(e.key) == -1) {
+                                    this.label.text = `KeyDown ${e.key}`;
+                                }
+                            } else {
+                                this.label.text = `KeyDown ${logicalKey}`;
+                            }
+                        }
+                    });
+                    // Key up event => “logicalKey + "_up” 
+                    this.game.events.on(logicalKey + "_up", (e) => {
+                        if (!lock) {
+                            if (e.type == "keyup") {
+                                // Only log if key is NOT one of the logical keys in keyList
+                                if (keyList.indexOf(e.key) == -1) {
+                                    this.label.text = `KeyUp ${e.key}`;
+                                    return;
+                                }
+                            }
+                            this.label.text = `KeyUp ${logicalKey}`;
+                        }
+                    });
+                });
+            }
+            draw() {
+                super.draw();
+                this.logger.log("draw", this.x, this.y, this.width, this.height);
+                this.group.render();
+            }
+        }
+
+        class EventDemoGame extends Game {
+            constructor(canvas) {
+                super(canvas);
+                this.enableFluidSize();
+                this.backgroundColor = "black";
+            }
+
+            init() {
+                super.init();
+                console.groupCollapsed("init");
+                this.scene = new Scene(this, { name: "EventDemoScene", width: 280, height: 80 });
+                this.ui = new Scene(this);
+                this.pipeline.add(this.scene);
+                this.pipeline.add(this.ui);
+                console.groupEnd();
+                console.groupCollapsed("add EventLogger");
+                this.scene.add(new EventLogger(this, { width: 280, height: 80 }));
+                console.groupEnd();
+                console.groupCollapsed("add FPSCounter");
+                this.ui.add(new FPSCounter(this, { anchor: "bottom-right" }));
+                console.groupEnd();
+            }
+
+            update(dt) {
+                this.scene.x = this.width / 2;
+                this.scene.y = this.height / 2;
+                this.ui.width = this.width;
+                this.ui.height = this.height;
+                super.update(dt);
+            }
+
+            clear() {
+                this.ctx.fillStyle = "black";
+                this.ctx.fillRect(0, 0, this.width, this.height);
+            }
+        }
+
+        window.addEventListener("load", () => {
+            const canvas = document.getElementById("game");
+            const game = new EventDemoGame(canvas);
+            //            game.enableLogging();
+
+            game.setFPS(60);
+            game.start();
+            /* setTimeout(() => {
+                game.stop();
+            }, 10000); */
+        });
+    </script>
+</body>
+
+</html>