@hi-ashleyj/llama 0.3.1 → 0.3.3

package/components/Game.svelte

@@ -24,12 +24,12 @@ $: {
 const layers = new Set();
 const draw = function (delta, time) {
     for (let layer of layers) {
-        layer(delta, time);
+        layer.draw(delta, time);
     }
 };
-const assign = function (layerDraw) {
-    layers.add(layerDraw);
-    return () => layers.delete(layerDraw);
+const assign = function (ctx) {
+    layers.add(ctx);
+    return () => layers.delete(ctx);
 };
 const timing = new Timing();
 const controller = new Controller();

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;
@@ -11,14 +12,20 @@ export let centered = false;
 $: ax = (centered) ? x - (w / 2) : x;
 $: ay = (centered) ? y - (h / 2) : y;
 const targets = new Set();
-const assign = function (callable) {
-    targets.add(callable);
-    return () => { targets.delete(callable); };
-};
 const draw = function ({ width, height, ctx }) {
-    targets.forEach(f => f({ width, height, ctx }, { x: ax, y: ay, w, h }));
+    targets.forEach(f => f.draw({ width, height, ctx }, { x: ax, y: ay, w, h }));
 };
-setupDrawable({ assign, draw });
+let register = setupDrawable({
+    assign: (ctx) => {
+        targets.add(ctx);
+        return () => {
+            targets.delete(ctx);
+        };
+    },
+});
+onMount(() => {
+    return register({ draw });
+});
 </script>
 
-<slot />
+<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({
-    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 }));
+const draw = () => {
+    if (ctx === null)
+        return;
+    ctx.clearRect(0, 0, $width, $height);
+    targets.forEach(f => f.draw({ width: $width, height: $height, ctx }));
+};
+let { width, height } = getGame();
+let register = setupLayer({
+    assign: (ctx) => {
+        targets.add(ctx);
+        return () => { targets.delete(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.3",
   "type": "module",
   "repository": {
     "type": "git",

package/setup.d.ts

@@ -1,9 +1,9 @@
-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 }: {
+    draw: () => any;
+}) => () => any;
+export declare const setupDrawable: ({ assign }: Partial<DrawableContext>) => ({ draw }: {
+    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 (ctx) => {
+        return game.assign(ctx);
+    };
 };
-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 (ctx) => {
+        if (!parent)
+            return () => { };
+        return parent.assign(ctx);
     };
 };
 export const getGame = function () {

package/types/contexts.d.ts

@@ -3,7 +3,7 @@ import { Timing } from "../components/motions";
 import { Controller } from "../components/controller";
 
 export type GameContext = { 
-    assign: (draw: Function) => () => any, 
+    assign: (context: { draw: Function }) => () => any,
     width: Writable<number>, 
     height: Writable<number>, 
     background: Writable<string>,
@@ -17,14 +17,12 @@ export type GameContext = {
 
 };
 
-export type LayerContext = { 
-    assign: (draw: Function) => () => any, 
-    draw: () => any 
+export type LayerContext = {
+    assign: (context: { draw: Function }) => () => any
 };
 
 export type DrawableFunction = ({}: { width: number, height: number, ctx: CanvasRenderingContext2D }, ...more: any[] ) => any;
 
-export type DrawableContext = { 
-    assign: (draw: Function) => () => any, 
-    draw: DrawableFunction
+export type DrawableContext = {
+    assign: (context: { draw: Function }) => () => any
 }