@kayelaa/canvas 0.1.14 → 0.2.0

package/README.md

@@ -15,15 +15,15 @@ It's a **very thin declarative layer** on top of LEA — all performance-critica
 
 Made by **Kayelaa Cagara** (@LianeKayee39 on X / GitHub) in Calamba, Philippines.
 
-## API Reference (worth checking if you want a true API reference for every variables, properties, etc)
+## API Reference for missing things in this docs (worth checking if you want a true API reference for every variables, properties, etc)
 [API Reference](https://lianecagara.github.io/kayelaa-canvas-docs/)
 
-**This Documentation might be INACCURATE! Always visit the .d.ts files to verify.**
+**The Documentation below would get INACCURATE in the future. Always visit the .d.ts files or the API Reference for reliable documentation.**
 
 ## Quick Start — Fully Typed Version (copy-paste this)
 
-```ts
-// main.ts
+```tsx
+// demo.ts v1.3
 /** @jsxImportSource @kayelaa/canvas */
 import {
   createGame,
@@ -32,72 +32,160 @@ import {
   useSelf,
   useTick,
   usePaint,
-  useEntity,
-  FC,
   FCProps,
-  useEffect,
   useRef,
   Kayla,
   FCExports,
   useExports,
+  useRect,
+  useFiberControl,
+  useInitialization,
+  LEA,
+  useGlobalClick,
+  useClick,
+  useCurrentTicker,
+  createContext,
+  KaylaRect,
+  useContext,
 } from "@kayelaa/canvas/kayla";
-import { Vector2 } from "@kayelaa/canvas/lea";
 
 interface MouseFollowerProps extends FCProps {
   initialX?: number;
   initialY?: number;
+  color: string;
+  initialSpeed?: number;
+  freeXY?: boolean;
 }
 
 interface MouseFollowerExports extends FCExports {
   jump(): void;
   getHealth(): number;
+  rect: KaylaRect;
+  health: number;
 }
 
-const MouseFollower: Kayla.FC<MouseFollowerProps,MouseFollowerExports> = ({
+const MainContext = createContext<{
+  members: KaylaRect[];
+  player: MouseFollowerExports | null;
+}>(null);
+
+const MouseFollower: Kayla.FC<MouseFollowerProps, MouseFollowerExports> = ({
   initialX = 0,
   initialY = 0,
+  color,
+  initialSpeed,
+  freeXY = true,
 }) => {
   const rect = useRect();
+  interface CableVecInfo {
+    remainingMS: number;
+    vec: LEA.Vector2;
+    totalDist: number;
+  }
+  const cableVecs = useRef<CableVecInfo[]>([]);
+  const cableConfig = useSelf(() => ({
+    durationMS: 1000,
+  }));
+
+  useGlobalClick((pos, type) => {
+    if (rect.isHovered()) return;
+    if (type === "left") {
+      const start = rect.pos.clone();
+      cableVecs.current.push({
+        remainingMS: cableConfig.durationMS,
+        vec: pos.clone(),
+        totalDist: pos.subtract(start).length,
+      });
+    }
+  });
+
+  useTick((delta) => {
+    const remaining: typeof cableVecs.current = [];
+    let newestTotalDist = cableVecs.current.at(-1)?.totalDist ?? 0;
+    for (const ref of cableVecs.current) {
+      if (ref.remainingMS <= 0.01) continue;
+      const { vec: target } = ref;
+      const dir = target.subtract(rect.pos);
+      const moveLen = (newestTotalDist / cableConfig.durationMS) * delta * 1000;
+      const added = dir.normalized().scale(moveLen);
+      rect.x += added.x;
+      rect.y += added.y;
+      ref.remainingMS -= delta * 1000;
+      if (ref.remainingMS > 0.01) {
+        remaining.push(ref);
+      }
+    }
+    cableVecs.current = remaining;
+  });
+
+  const fiber = useFiberControl();
+  const ticker = useCurrentTicker();
+  const mainContext = useContext(MainContext);
 
   useInitialization(() => {
-    rect.x = initialX;
-    rect.y = initialY;
-    rect.z = 100;
+    if (freeXY) {
+      rect.x = initialX;
+      rect.y = initialY;
+      rect.width = 40;
+      rect.height = 40;
+      rect.z = 100;
+    }
+
+    console.log(`New Follower: ${fiber.key}`);
+    console.log({ mems: mainContext.members });
+    mainContext.player = me;
+    return () => {
+      console.log(`Removed Follower: ${fiber.key}`);
+      mainContext.player = null;
+    };
   });
 
-  const self = useSelf(() => ({
-    speed: 300,
-    health: 100,
+  useClick(() => {
+    const a = 40;
+    rect.width += a;
+    rect.height += a;
+    ticker.createTween(
+      {
+        ms: 3000,
+        easing: LEA.LeaUtilsII.easeOutExpo,
+        delta: -a,
+      },
+      (da) => {
+        rect.width += da;
+        rect.height += da;
+      },
+    );
+  });
 
-    tick(delta: number) {
-      const mouse = renderer.getMousePos();
-      const dx = mouse.x - rect.x;
-      const dy = mouse.y - rect.y;
-      const dist = Math.hypot(dx, dy);
-      if (dist > 5) {
-        rect.x += (dx / dist) * this.speed * delta;
-        rect.y += (dy / dist) * this.speed * delta;
-      }
+  const me: MouseFollowerExports = useSelf(() => ({
+    speed: initialSpeed ?? LEA.LeaUtilsII.randomLerp(150, 300),
+    health: 100,
+    getHealth() {
+      return this.health;
+    },
+    get rect() {
+      return rect;
     },
-
     jump() {
       rect.y -= 100;
     },
   }));
 
-  useTick((delta) => self.tick(delta));
-
   usePaint((ctx) => {
-    ctx.fillStyle = self.health > 50 ? "#00aaff" : "#ff4444";
-    ctx.fillRect(rect.x - 20, rect.y - 20, 40, 40);
+    ctx.globalAlpha = 1;
+    ctx.strokeStyle = "white";
+    ctx.lineWidth = 10;
+    for (const { vec: cable } of cableVecs.current) {
+      ctx.beginPath();
+      ctx.moveTo(rect.x, rect.y);
+      ctx.lineTo(cable.x, cable.y);
+      ctx.stroke();
+    }
+    ctx.fillStyle = color ?? (me.health > 50 ? "#00aaff" : "#ff4444");
+    ctx.fillRect(rect.left, rect.top, rect.width, rect.height);
   });
 
-  useExports(MouseFollower, () => ({
-    jump: self.jump,
-    getHealth: () => self.health,
-  }));
-
-  return [];
+  useExports(MouseFollower, () => me);
 };
 
 // Setup (run once)
@@ -108,11 +196,15 @@ renderer.listenPointerUpdates();
 const game = createGame({ width: 800, height: 600, updateHz: 1000 / 60 });
 const scene = createScene("main");
 
-scene.spawn(<MouseFollower initialX={400} initialY={300} />);
-
 renderer.attachTo(game);
 scene.attachTo(game);
 
+scene.spawn(
+  <MainContext.Provider value={{ members: [], player: null }}>
+    <MouseFollower initialX={400} initialY={300} color="red" />
+  </MainContext.Provider>,
+);
+
 game.start();
 ```
 
@@ -144,11 +236,12 @@ npm install @kayelaa/canvas
 npm run dev
 ```
 
-## No Vite? Try our ESM Build! Pure HTML + JS + Import maps
+## No Vite/Bundler? Try our ESM Build! Pure HTML + JS + Import maps
 
 ```html
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
   <meta charset="UTF-8">
   <title>Kayla Canvas Test - No JSX</title>
@@ -157,6 +250,7 @@ npm run dev
       margin: 0;
       overflow: hidden;
     }
+
     canvas {
       display: block;
       background: #111;
@@ -171,10 +265,14 @@ npm run dev
   }
   </script>
 </head>
+
 <body>
   <canvas id="game" width="800" height="600"></canvas>
 
   <script type="module">
+    // demo.ts v1.3
+    // @ts-nocheck
+    /** @jsxImportSource @kayelaa/canvas */
     import {
       createGame,
       createScene,
@@ -182,77 +280,170 @@ npm run dev
       useSelf,
       useTick,
       usePaint,
-      useEntity,
-      createElement,
-      useEffect,
       useRef,
-      useExports
+      Kayla,
+      useExports,
+      useRect,
+      useFiberControl,
+      useInitialization,
+      LEA,
+      useGlobalClick,
+      useClick,
+      useCurrentTicker,
+      createContext,
+      KaylaRect,
+      useContext,
+      createElement,
     } from "@kayelaa/canvas/kayla";
 
+    const MainContext = createContext(null);
+
     const MouseFollower = ({
       initialX = 0,
       initialY = 0,
+      color,
+      initialSpeed,
+      freeXY = true,
     }) => {
       const rect = useRect();
 
+      const cableVecs = useRef([]);
+      const cableConfig = useSelf(() => ({
+        durationMS: 1000,
+      }));
+
+      useGlobalClick((pos, type) => {
+        if (rect.isHovered()) return;
+        if (type === "left") {
+          const start = rect.pos.clone();
+          cableVecs.current.push({
+            remainingMS: cableConfig.durationMS,
+            vec: pos.clone(),
+            totalDist: pos.subtract(start).length,
+          });
+        }
+      });
+
+      useTick((delta) => {
+        const remaining = [];
+        let newestTotalDist = cableVecs.current.at(-1)?.totalDist ?? 0;
+        for (const ref of cableVecs.current) {
+          if (ref.remainingMS <= 0.01) continue;
+          const { vec: target } = ref;
+          const dir = target.subtract(rect.pos);
+          const moveLen = (newestTotalDist / cableConfig.durationMS) * delta * 1000;
+          const added = dir.normalized().scale(moveLen);
+          rect.x += added.x;
+          rect.y += added.y;
+          ref.remainingMS -= delta * 1000;
+          if (ref.remainingMS > 0.01) {
+            remaining.push(ref);
+          }
+        }
+        cableVecs.current = remaining;
+      });
+
+      const fiber = useFiberControl();
+      const ticker = useCurrentTicker();
+      const mainContext = useContext(MainContext);
+
       useInitialization(() => {
-        rect.x = initialX;
-        rect.y = initialY;
-        rect.z = 100;
+        if (freeXY) {
+          rect.x = initialX;
+          rect.y = initialY;
+          rect.width = 40;
+          rect.height = 40;
+          rect.z = 100;
+        }
+
+        console.log(`New Follower: ${fiber.key}`);
+        console.log({ mems: mainContext.members });
+        mainContext.player = me;
+        return () => {
+          console.log(`Removed Follower: ${fiber.key}`);
+          mainContext.player = null;
+        };
       });
 
-      const self = useSelf(() => ({
-        speed: 300,
-        health: 100,
+      useClick(() => {
+        const a = 40;
+        rect.width += a;
+        rect.height += a;
+        ticker.createTween(
+          {
+            ms: 3000,
+            easing: LEA.LeaUtilsII.easeOutExpo,
+            delta: -a,
+          },
+          (da) => {
+            rect.width += da;
+            rect.height += da;
+          },
+        );
+      });
 
-        tick(delta) {
-          const mouse = renderer.getMousePos();
-          const dx = mouse.x - rect.x;
-          const dy = mouse.y - rect.y;
-          const dist = Math.hypot(dx, dy);
-          if (dist > 5) {
-            rect.x += (dx / dist) * this.speed * delta;
-            rect.y += (dy / dist) * this.speed * delta;
-          }
+      const me = useSelf(() => ({
+        speed: initialSpeed ?? LEA.LeaUtilsII.randomLerp(150, 300),
+        health: 100,
+        getHealth() {
+          return this.health;
+        },
+        get rect() {
+          return rect;
         },
-
         jump() {
           rect.y -= 100;
         },
       }));
 
-      useTick((delta) => self.tick(delta));
-
       usePaint((ctx) => {
-        ctx.fillStyle = self.health > 50 ? "#00aaff" : "#ff4444";
-        ctx.fillRect(rect.x - 20, rect.y - 20, 40, 40);
+        ctx.globalAlpha = 1;
+        ctx.strokeStyle = "white";
+        ctx.lineWidth = 10;
+        for (const { vec: cable } of cableVecs.current) {
+          ctx.beginPath();
+          ctx.moveTo(rect.x, rect.y);
+          ctx.lineTo(cable.x, cable.y);
+          ctx.stroke();
+        }
+        ctx.fillStyle = color ?? (me.health > 50 ? "#00aaff" : "#ff4444");
+        ctx.fillRect(rect.left, rect.top, rect.width, rect.height);
       });
 
-      useExports(MouseFollower, () => ({
-        jump: self.jump,
-        getHealth: () => self.health,
-      }));
-
-      return [];
+      useExports(MouseFollower, () => me);
     };
 
-    // Setup renderer & game
+    // Setup (run once)
     const canvas = document.getElementById("game");
     const renderer = createRenderer(canvas);
     renderer.listenPointerUpdates();
 
-    const game = createGame({ width: 800, height: 600, updateHz: 1000/60 });
+    const game = createGame({ width: 800, height: 600, updateHz: 1000 / 60 });
     const scene = createScene("main");
 
-    // Spawn player using createElement
-    scene.spawn(createElement(MouseFollower, { initialX: 400, initialY: 300 }));
-
     renderer.attachTo(game);
     scene.attachTo(game);
 
+    scene.spawn(
+      createElement(MainContext.Provider, {
+        value: {
+          members: [],
+          player: null,
+        },
+        children: [
+          createElement(MouseFollower, {
+            initialX: 400,
+            initialY: 300,
+            color: "red",
+          }),
+        ],
+      }),
+    );
+
     game.start();
   </script>
 </body>
+
 </html>
 ```