@hi-ashleyj/llama 0.3.1 → 0.3.2

package/components/GameObject.svelte

@@ -1,4 +1,5 @@
 <script>import { setupDrawable } from "../setup";
+import { onMount } from "svelte";
 export let x = 0;
 export let y = 0;
 export let w = 0;
@@ -18,7 +19,10 @@ const assign = function (callable) {
 const draw = function ({ width, height, ctx }) {
     targets.forEach(f => f({ width, height, ctx }, { x: ax, y: ay, w, h }));
 };
-setupDrawable({ assign, draw });
+let register = setupDrawable({ assign });
+onMount(() => {
+    return register(draw);
+});
 </script>
 
 <slot />

package/components/Layer.svelte

@@ -1,20 +1,25 @@
-<script>import { setupLayer } from "../setup";
+<script>import { setupLayer, getGame } from "../setup";
+import { onMount } from "svelte";
 export let zIndex = 0;
 let canvas;
 $: ctx = (typeof canvas !== "undefined") ? canvas.getContext("2d") : null;
 let targets = new Set();
-let { width, height } = setupLayer({
+const draw = () => {
+    if (ctx === null)
+        return;
+    ctx.clearRect(0, 0, $width, $height);
+    targets.forEach(f => f({ width: $width, height: $height, ctx }));
+};
+let { width, height } = getGame();
+let register = setupLayer({
     assign: (callable) => {
         targets.add(callable);
         return () => { targets.delete(callable); };
-    },
-    draw: () => {
-        if (ctx === null)
-            return;
-        ctx.clearRect(0, 0, $width, $height);
-        targets.forEach(f => f({ width: $width, height: $height, ctx }));
     }
-}).game;
+});
+onMount(() => {
+    return register(draw);
+});
 </script>
 
 <canvas width={$width} height={$height} bind:this={canvas} style:z-index={zIndex}></canvas>

package/components/drawables/Arc.svelte

@@ -1,4 +1,5 @@
 <script>import { setupDrawable } from "../../setup";
+import { onMount } from "svelte";
 export let fill = null;
 export let stroke = null;
 export let startAngle;
@@ -19,5 +20,8 @@ const draw = function ({ ctx }, { x, y, w, h }) {
         ctx.stroke();
     }
 };
-setupDrawable({ draw });
+let register = setupDrawable({});
+onMount(() => {
+    return register(draw);
+});
 </script>

package/components/drawables/Circle.svelte

@@ -1,4 +1,5 @@
 <script>import { setupDrawable } from "../../setup";
+import { onMount } from "svelte";
 export let fill = null;
 export let stroke = null;
 const TWO_PI = Math.PI * 2;
@@ -15,5 +16,8 @@ const draw = function ({ ctx }, { x, y, w, h }) {
         ctx.stroke();
     }
 };
-setupDrawable({ draw });
+let register = setupDrawable({});
+onMount(() => {
+    return register(draw);
+});
 </script>

package/components/drawables/DisplayImage.svelte

@@ -1,4 +1,5 @@
 <script>import { setupDrawable } from "../../setup";
+import { onMount } from "svelte";
 export let image = null;
 export let crop = null;
 const draw = function ({ ctx }, { x, y, w, h }) {
@@ -9,5 +10,8 @@ const draw = function ({ ctx }, { x, y, w, h }) {
     }
     ctx.drawImage(image, x, y, w, h);
 };
-setupDrawable({ draw });
+let register = setupDrawable({});
+onMount(() => {
+    return register(draw);
+});
 </script>

package/components/drawables/Rectangle.svelte

@@ -1,4 +1,5 @@
 <script>import { setupDrawable } from "../../setup";
+import { onMount } from "svelte";
 export let fill = null;
 export let stroke = null;
 const draw = function ({ ctx }, { x, y, w, h }) {
@@ -13,5 +14,8 @@ const draw = function ({ ctx }, { x, y, w, h }) {
         ctx.stroke();
     }
 };
-setupDrawable({ draw });
+let register = setupDrawable({});
+onMount(() => {
+    return register(draw);
+});
 </script>

package/components/drawables/Text.svelte

@@ -1,4 +1,5 @@
 <script>import { setupDrawable } from "../../setup";
+import { onMount } from "svelte";
 export let text;
 export let size;
 export let font;
@@ -24,5 +25,8 @@ const draw = function ({ ctx }, { x, y }) {
         ctx.strokeText(text, x, y);
     }
 };
-setupDrawable({ draw });
+let register = setupDrawable({});
+onMount(() => {
+    return register(draw);
+});
 </script>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@hi-ashleyj/llama",
   "description": "A (Very Incomplete) 2D Canvas Game Engine powered by Svelte",
-  "version": "0.3.1",
+  "version": "0.3.2",
   "type": "module",
   "repository": {
     "type": "git",

package/setup.d.ts

@@ -1,9 +1,5 @@
-import type { GameContext, LayerContext, DrawableContext } from "./types/contexts";
+import type { GameContext, LayerContext, DrawableContext, DrawableFunction } from "./types";
 export declare const setupGame: (context: GameContext) => void;
-export declare const setupLayer: (context: LayerContext) => {
-    game: GameContext;
-};
-export declare const setupDrawable: ({ assign, draw }: Partial<DrawableContext>) => {
-    game: GameContext;
-};
+export declare const setupLayer: (context: LayerContext) => (draw: () => any) => () => any;
+export declare const setupDrawable: ({ assign }: Partial<DrawableContext>) => (draw: DrawableFunction) => () => any;
 export declare const getGame: () => GameContext;

package/setup.js

@@ -1,4 +1,4 @@
-import { getContext, setContext, onDestroy } from 'svelte';
+import { getContext, setContext } from 'svelte';
 const GAME = Symbol();
 const LAYER = Symbol();
 const DRAWABLE = Symbol();
@@ -12,29 +12,24 @@ export const setupLayer = function (context) {
     if (getContext(LAYER)) {
         throw new Error("Cannot Mount Layer inside a Layer");
     }
-    let game = getContext(GAME);
+    const game = getContext(GAME);
     if (!game)
         throw new Error("Layers must be inside a Game");
-    let remove = game.assign(context.draw);
-    onDestroy(() => {
-        remove();
-    });
     setContext(LAYER, context);
-    return setupDrawable({ assign: context.assign, draw: context.draw });
+    setupDrawable({ assign: context.assign });
+    return (draw) => {
+        return game.assign(draw);
+    };
 };
-export const setupDrawable = function ({ assign, draw }) {
+export const setupDrawable = function ({ assign }) {
     let parent = getContext(DRAWABLE);
-    if (parent && draw) {
-        let remove = parent.assign(draw);
-        onDestroy(() => {
-            remove();
-        });
-    }
     if (assign) {
         setContext(DRAWABLE, { assign });
     }
-    return {
-        game: getContext(GAME)
+    return (draw) => {
+        if (!parent)
+            return () => { };
+        return parent.assign(draw);
     };
 };
 export const getGame = function () {

package/types/contexts.d.ts

@@ -18,8 +18,7 @@ export type GameContext = {
 };
 
 export type LayerContext = { 
-    assign: (draw: Function) => () => any, 
-    draw: () => any 
+    assign: (draw: Function) => () => any
 };
 
 export type DrawableFunction = ({}: { width: number, height: number, ctx: CanvasRenderingContext2D }, ...more: any[] ) => any;