@hi-ashleyj/llama 0.9.0 → 0.10.0

package/{setup.js → dist/core-contexts.js}

@@ -1,14 +1,16 @@
 import { getContext, setContext } from 'svelte';
+import { setupDrawable } from './drawable';
 const GAME = Symbol();
-const LAYER = Symbol();
-const DRAWABLE = Symbol();
-const BOX = Symbol();
 export const setupGame = function (context) {
     if (getContext(GAME)) {
         throw new Error("Cannot Mount Game inside a Game");
     }
     setContext(GAME, context);
 };
+export const getGame = function () {
+    return getContext(GAME);
+};
+const LAYER = Symbol();
 export const setupLayer = function (context) {
     if (getContext(LAYER)) {
         throw new Error("Cannot Mount Layer inside a Layer");
@@ -18,8 +20,8 @@ export const setupLayer = function (context) {
         throw new Error("Layers must be inside a Game");
     setContext(LAYER, context);
     setupDrawable({ assign: context.assign });
-    return (ctx) => {
-        return game.assign(ctx);
+    return (obj) => {
+        return game.assign(context, obj);
     };
 };
 export const getLayer = function () {
@@ -32,17 +34,3 @@ export const getTriggerLayerRender = function () {
     let layer = getLayer();
     return layer.requestFrame;
 };
-export const setupDrawable = function ({ assign }) {
-    let parent = getContext(DRAWABLE);
-    if (assign) {
-        setContext(DRAWABLE, { assign });
-    }
-    return (ctx) => {
-        if (!parent)
-            return () => { };
-        return parent.assign(ctx);
-    };
-};
-export const getGame = function () {
-    return getContext(GAME);
-};

package/dist/drawable.d.ts

@@ -0,0 +1,14 @@
+import type { RegisterFunction } from "./core-contexts.d.ts";
+export type DrawableContext<Options> = {
+    assign?: RegisterFunction<DrawableObject<Options>>;
+};
+export type DrawableObject<Options> = {
+    draw: DrawFunction<Options>;
+};
+export type CoreLayerOptions = {
+    width: number;
+    height: number;
+    ctx: CanvasRenderingContext2D;
+};
+export type DrawFunction<Options> = Options extends null ? (core: CoreLayerOptions) => void | any : (core: CoreLayerOptions, more: Options) => void | any;
+export declare const setupDrawable: <TParent, TChildren>({ assign }: DrawableContext<TChildren>) => RegisterFunction<DrawableObject<TParent>>;

package/dist/drawable.js

@@ -0,0 +1,13 @@
+import { getContext, setContext } from "svelte";
+const DRAWABLE = Symbol();
+export const setupDrawable = function ({ assign }) {
+    let parent = getContext(DRAWABLE);
+    if (assign) {
+        setContext(DRAWABLE, { assign });
+    }
+    return (obj) => {
+        if (!parent)
+            return () => { };
+        return parent.assign(obj);
+    };
+};

package/dist/drawables/Arc.svelte

@@ -0,0 +1,31 @@
+<script>import { setupDrawable } from "../drawable.js";
+import { onMount } from "svelte";
+export let fill = null;
+export let stroke = null;
+export let strokeWidth = null;
+export let startAngle;
+export let endAngle;
+$:
+  sd = (startAngle - 90) * Math.PI / 180;
+$:
+  ed = (endAngle - 90) * Math.PI / 180;
+const draw = function({ ctx }, { x, y, w, h }) {
+  let r = (w + h) / 4;
+  ctx.beginPath();
+  ctx.arc(x + r, y + r, r, sd, ed);
+  ctx.lineTo(x + r, y + r);
+  if (fill) {
+    ctx.fillStyle = fill;
+    ctx.fill();
+  }
+  if (stroke && strokeWidth) {
+    ctx.strokeStyle = stroke;
+    ctx.lineWidth = strokeWidth;
+    ctx.stroke();
+  }
+};
+let register = setupDrawable({});
+onMount(() => {
+  return register({ draw });
+});
+</script>

package/{components → dist}/drawables/Arc.svelte.d.ts

@@ -1,4 +1,4 @@
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         fill?: string | null | undefined;
@@ -15,6 +15,6 @@ declare const __propDef: {
 export type ArcProps = typeof __propDef.props;
 export type ArcEvents = typeof __propDef.events;
 export type ArcSlots = typeof __propDef.slots;
-export default class Arc extends SvelteComponentTyped<ArcProps, ArcEvents, ArcSlots> {
+export default class Arc extends SvelteComponent<ArcProps, ArcEvents, ArcSlots> {
 }
 export {};

package/dist/drawables/Circle.svelte

@@ -0,0 +1,25 @@
+<script>import { setupDrawable } from "../drawable.js";
+import { onMount } from "svelte";
+export let fill = null;
+export let stroke = null;
+export let strokeWidth = null;
+const TWO_PI = Math.PI * 2;
+const draw = function({ ctx }, { x, y, w, h }) {
+  let r = (w + h) / 4;
+  ctx.beginPath();
+  ctx.arc(x + r, y + r, r, 0, TWO_PI);
+  if (fill) {
+    ctx.fillStyle = fill;
+    ctx.fill();
+  }
+  if (stroke && strokeWidth) {
+    ctx.strokeStyle = stroke;
+    ctx.lineWidth = strokeWidth;
+    ctx.stroke();
+  }
+};
+let register = setupDrawable({});
+onMount(() => {
+  return register({ draw });
+});
+</script>

package/{components → dist}/drawables/Circle.svelte.d.ts

@@ -1,4 +1,4 @@
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         fill?: string | null | undefined;
@@ -13,6 +13,6 @@ declare const __propDef: {
 export type CircleProps = typeof __propDef.props;
 export type CircleEvents = typeof __propDef.events;
 export type CircleSlots = typeof __propDef.slots;
-export default class Circle extends SvelteComponentTyped<CircleProps, CircleEvents, CircleSlots> {
+export default class Circle extends SvelteComponent<CircleProps, CircleEvents, CircleSlots> {
 }
 export {};

package/dist/drawables/DisplayImage.svelte

@@ -0,0 +1,17 @@
+<script>import { setupDrawable } from "../drawable.js";
+import { onMount } from "svelte";
+export let image = null;
+export let crop = null;
+const draw = function({ ctx }, { x, y, w, h }) {
+  if (!image)
+    return;
+  if (crop) {
+    return ctx.drawImage(image, crop.x, crop.y, crop.w, crop.h, x, y, w, h);
+  }
+  ctx.drawImage(image, x, y, w, h);
+};
+let register = setupDrawable({});
+onMount(() => {
+  return register({ draw });
+});
+</script>

package/{components → dist}/drawables/DisplayImage.svelte.d.ts

@@ -1,4 +1,4 @@
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         image?: HTMLImageElement | null | undefined;
@@ -17,6 +17,6 @@ declare const __propDef: {
 export type DisplayImageProps = typeof __propDef.props;
 export type DisplayImageEvents = typeof __propDef.events;
 export type DisplayImageSlots = typeof __propDef.slots;
-export default class DisplayImage extends SvelteComponentTyped<DisplayImageProps, DisplayImageEvents, DisplayImageSlots> {
+export default class DisplayImage extends SvelteComponent<DisplayImageProps, DisplayImageEvents, DisplayImageSlots> {
 }
 export {};

package/dist/drawables/MultiLineText.svelte

@@ -0,0 +1,43 @@
+<script>import { setupDrawable } from "../drawable.js";
+import { onMount } from "svelte";
+export let text;
+export let size;
+export let spacing = 1.4;
+export let font;
+export let style = void 0;
+export let fill = void 0;
+export let stroke = void 0;
+export let strokeWidth = null;
+export let alignH = "left";
+export let alignV = "top";
+$:
+  computedFont = (style ? style + " " : "") + size + "px " + font;
+$:
+  splits = text?.split("\n") || [];
+$:
+  offset = alignV === "bottom" ? ((splits?.length || 1) - 1) * size * spacing : alignV === "middle" ? ((splits?.length || 1) - 1) * size * spacing * 0.5 : 0;
+const draw = function({ ctx }, { x, y }) {
+  if (!splits)
+    return;
+  for (let i = 0; i < splits.length; i++) {
+    const line = splits[i];
+    ctx.beginPath();
+    ctx.textAlign = alignH;
+    ctx.textBaseline = alignV;
+    ctx.font = computedFont;
+    if (fill) {
+      ctx.fillStyle = fill;
+      ctx.fillText(line, x, y + size * spacing * i - offset);
+    }
+    if (stroke && strokeWidth) {
+      ctx.strokeStyle = stroke;
+      ctx.lineWidth = strokeWidth;
+      ctx.strokeText(line, x, y + size * spacing * i - offset);
+    }
+  }
+};
+let register = setupDrawable({});
+onMount(() => {
+  return register({ draw });
+});
+</script>

package/{components → dist}/drawables/MultiLineText.svelte.d.ts

@@ -1,4 +1,4 @@
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         text: string;
@@ -9,8 +9,8 @@ declare const __propDef: {
         fill?: string | undefined;
         stroke?: string | undefined;
         strokeWidth?: number | null | undefined;
-        alignH?: "left" | "center" | "right" | undefined;
-        alignV?: "top" | "middle" | "bottom" | "alphabetic" | undefined;
+        alignH?: "center" | "left" | "right" | undefined;
+        alignV?: "alphabetic" | "bottom" | "middle" | "top" | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -20,6 +20,6 @@ declare const __propDef: {
 export type MultiLineTextProps = typeof __propDef.props;
 export type MultiLineTextEvents = typeof __propDef.events;
 export type MultiLineTextSlots = typeof __propDef.slots;
-export default class MultiLineText extends SvelteComponentTyped<MultiLineTextProps, MultiLineTextEvents, MultiLineTextSlots> {
+export default class MultiLineText extends SvelteComponent<MultiLineTextProps, MultiLineTextEvents, MultiLineTextSlots> {
 }
 export {};

package/dist/drawables/Rectangle.svelte

@@ -0,0 +1,22 @@
+<script>import { setupDrawable } from "../drawable.js";
+import { onMount } from "svelte";
+export let fill = null;
+export let stroke = null;
+export let strokeWidth = null;
+const draw = function({ ctx }, { x, y, w, h }) {
+  ctx.beginPath();
+  ctx.rect(x, y, w, h);
+  if (fill) {
+    ctx.fillStyle = fill;
+    ctx.fill();
+  }
+  if (stroke && strokeWidth) {
+    ctx.strokeStyle = stroke;
+    ctx.stroke();
+  }
+};
+let register = setupDrawable({});
+onMount(() => {
+  return register({ draw });
+});
+</script>

package/{components → dist}/drawables/Rectangle.svelte.d.ts

@@ -1,4 +1,4 @@
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         fill?: string | null | undefined;
@@ -13,6 +13,6 @@ declare const __propDef: {
 export type RectangleProps = typeof __propDef.props;
 export type RectangleEvents = typeof __propDef.events;
 export type RectangleSlots = typeof __propDef.slots;
-export default class Rectangle extends SvelteComponentTyped<RectangleProps, RectangleEvents, RectangleSlots> {
+export default class Rectangle extends SvelteComponent<RectangleProps, RectangleEvents, RectangleSlots> {
 }
 export {};

package/dist/drawables/RoundedRectangle.svelte

@@ -0,0 +1,24 @@
+<script>import { setupDrawable } from "../drawable.js";
+import { onMount } from "svelte";
+export let fill = null;
+export let stroke = null;
+export let strokeWidth = null;
+export let radius = 0;
+const draw = function({ ctx }, { x, y, w, h }) {
+  ctx.beginPath();
+  ctx.roundRect(x, y, w, h, radius);
+  if (fill) {
+    ctx.fillStyle = fill;
+    ctx.fill();
+  }
+  if (stroke && strokeWidth) {
+    ctx.strokeStyle = stroke;
+    ctx.lineWidth = strokeWidth;
+    ctx.stroke();
+  }
+};
+let register = setupDrawable({});
+onMount(() => {
+  return register({ draw });
+});
+</script>

package/{components → dist}/drawables/RoundedRectangle.svelte.d.ts

@@ -1,4 +1,4 @@
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         fill?: string | null | undefined;
@@ -14,6 +14,6 @@ declare const __propDef: {
 export type RoundedRectangleProps = typeof __propDef.props;
 export type RoundedRectangleEvents = typeof __propDef.events;
 export type RoundedRectangleSlots = typeof __propDef.slots;
-export default class RoundedRectangle extends SvelteComponentTyped<RoundedRectangleProps, RoundedRectangleEvents, RoundedRectangleSlots> {
+export default class RoundedRectangle extends SvelteComponent<RoundedRectangleProps, RoundedRectangleEvents, RoundedRectangleSlots> {
 }
 export {};

package/dist/drawables/Text.svelte

@@ -0,0 +1,37 @@
+<script>import { setupDrawable } from "../drawable.js";
+import { onMount } from "svelte";
+export let text;
+export let size;
+export let font;
+export let style = void 0;
+export let fill = void 0;
+export let stroke = void 0;
+export let strokeWidth = null;
+export let alignH = "left";
+export let alignV = "top";
+$:
+  computedFont = (style ? style + " " : "") + size + "px " + font;
+const draw = function({ ctx }, { x, y, w, h }) {
+  if (!text)
+    return;
+  ctx.beginPath();
+  ctx.textAlign = alignH;
+  ctx.textBaseline = alignV;
+  ctx.font = computedFont;
+  let actualX = x + (alignH === "right" ? w : alignH === "center" ? w / 2 : 0);
+  let actualY = y + (alignV === "bottom" ? h : alignV === "middle" ? h / 2 + size * 0.1 : 0);
+  if (fill) {
+    ctx.fillStyle = fill;
+    ctx.fillText(text, actualX, actualY);
+  }
+  if (stroke && strokeWidth) {
+    ctx.strokeStyle = stroke;
+    ctx.lineWidth = strokeWidth;
+    ctx.strokeText(text, actualX, actualY);
+  }
+};
+let register = setupDrawable({});
+onMount(() => {
+  return register({ draw });
+});
+</script>

package/{components → dist}/drawables/Text.svelte.d.ts

@@ -1,4 +1,4 @@
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         text: string;
@@ -8,8 +8,8 @@ declare const __propDef: {
         fill?: string | undefined;
         stroke?: string | undefined;
         strokeWidth?: number | null | undefined;
-        alignH?: "left" | "center" | "right" | undefined;
-        alignV?: "top" | "middle" | "bottom" | "alphabetic" | undefined;
+        alignH?: "center" | "left" | "right" | undefined;
+        alignV?: "alphabetic" | "bottom" | "middle" | "top" | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -19,6 +19,6 @@ declare const __propDef: {
 export type TextProps = typeof __propDef.props;
 export type TextEvents = typeof __propDef.events;
 export type TextSlots = typeof __propDef.slots;
-export default class Text extends SvelteComponentTyped<TextProps, TextEvents, TextSlots> {
+export default class Text extends SvelteComponent<TextProps, TextEvents, TextSlots> {
 }
 export {};

package/dist/extras/Empty.svelte.d.ts

@@ -0,0 +1,18 @@
+/** @typedef {typeof __propDef.props}  EmptyProps */
+/** @typedef {typeof __propDef.events}  EmptyEvents */
+/** @typedef {typeof __propDef.slots}  EmptySlots */
+export default class Empty {
+}
+export type EmptyProps = typeof __propDef.props;
+export type EmptyEvents = typeof __propDef.events;
+export type EmptySlots = typeof __propDef.slots;
+declare const __propDef: {
+    props: {
+        [x: string]: never;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/dist/extras/LayerPortal.svelte

@@ -0,0 +1,24 @@
+<script>import { getGame } from "../core-contexts";
+import { setupDrawable } from "../drawable";
+import { onMount } from "svelte";
+const game = getGame();
+export let name;
+const targets = /* @__PURE__ */ new Set();
+const draw = (core) => {
+  targets.forEach((t) => t.draw(core));
+};
+setupDrawable({
+  assign: (obj) => {
+    targets.add(obj);
+    return () => targets.delete(obj);
+  }
+});
+onMount(() => {
+  const context = game.getLayerByName(name);
+  if (!context)
+    return;
+  return context.assign({ draw });
+});
+</script>
+
+<slot />

package/dist/extras/LayerPortal.svelte.d.ts

@@ -0,0 +1,18 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        name: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type LayerPortalProps = typeof __propDef.props;
+export type LayerPortalEvents = typeof __propDef.events;
+export type LayerPortalSlots = typeof __propDef.slots;
+export default class LayerPortal extends SvelteComponent<LayerPortalProps, LayerPortalEvents, LayerPortalSlots> {
+}
+export {};

package/dist/extras/Rotate.svelte

@@ -0,0 +1,25 @@
+<script>import { setupDrawable } from "../drawable";
+import { onMount } from "svelte";
+export let centered = false;
+export let degrees = 0;
+const targets = /* @__PURE__ */ new Set();
+const draw = function({ width, height, ctx }, { x, y, w, h }) {
+  ctx.translate(x, y);
+  ctx.rotate(degrees * Math.PI / 180);
+  targets.forEach((f) => f.draw({ width, height, ctx }, { x: centered ? w * -0.5 : 0, y: centered ? h * -0.5 : 0, w, h }));
+  ctx.resetTransform();
+};
+let register = setupDrawable({
+  assign: (ctx) => {
+    targets.add(ctx);
+    return () => {
+      targets.delete(ctx);
+    };
+  }
+});
+onMount(() => {
+  return register({ draw });
+});
+</script>
+
+<slot/>

package/dist/extras/Rotate.svelte.d.ts

@@ -0,0 +1,22 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        /**
+             * FALSE = ANCHOR TOP LEFT
+             * TRUE = ANCHOR CENTER
+             */ centered?: boolean | undefined;
+        degrees?: number | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type RotateProps = typeof __propDef.props;
+export type RotateEvents = typeof __propDef.events;
+export type RotateSlots = typeof __propDef.slots;
+export default class Rotate extends SvelteComponent<RotateProps, RotateEvents, RotateSlots> {
+}
+export {};

package/dist/extras/SceneSwitcher.svelte

@@ -0,0 +1,20 @@
+<script>import { jumpSignal, effectiveScene } from "./scenes.js";
+import { SvelteComponent, onMount } from "svelte";
+import { getTriggerLayerRender } from "@hi-ashleyj/llama";
+const triggerRender = getTriggerLayerRender();
+let scene;
+const changeScene = (_signal) => {
+  scene = $effectiveScene;
+  triggerRender();
+};
+$:
+  changeScene($jumpSignal);
+onMount(() => {
+  scene = $effectiveScene;
+});
+export let scenes = {};
+</script>
+
+{#if scene && scenes[scene]}
+    <svelte:component this={scenes[scene]}></svelte:component>
+{/if}

package/dist/extras/SceneSwitcher.svelte.d.ts

@@ -0,0 +1,16 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        scenes?: Record<string, typeof SvelteComponent> | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type SceneSwitcherProps = typeof __propDef.props;
+export type SceneSwitcherEvents = typeof __propDef.events;
+export type SceneSwitcherSlots = typeof __propDef.slots;
+export default class SceneSwitcher extends SvelteComponent<SceneSwitcherProps, SceneSwitcherEvents, SceneSwitcherSlots> {
+}
+export {};

package/dist/extras/SceneTransition.svelte

@@ -0,0 +1,40 @@
+<script>import { jumpSignal, sceneAnimating } from "./scenes";
+import { getGame, getTriggerLayerRender } from "@hi-ashleyj/llama";
+import { onDestroy } from "svelte";
+const context = getGame();
+export let duration = 1e3;
+let burst = context.createBurst({ duration });
+let triggerRender = getTriggerLayerRender();
+onDestroy(burst.stop);
+let halfAnimationTriggered = false;
+const startAnimation = () => {
+  burst.trigger();
+  halfAnimationTriggered = false;
+};
+const halfAnimation = () => {
+  halfAnimationTriggered = true;
+  $jumpSignal = !$jumpSignal;
+};
+const completeAnimation = () => {
+  $sceneAnimating = false;
+};
+$: {
+  if ($sceneAnimating)
+    startAnimation();
+}
+$: {
+  if ($burst > 0.5 && !halfAnimationTriggered)
+    halfAnimation();
+  if ($burst == 1)
+    completeAnimation();
+}
+$:
+  normalized = 1 - Math.abs($burst - 0.5) * 2;
+$: {
+  triggerRender($burst);
+}
+</script>
+
+{#if $burst > 0 && $burst < 1}
+    <slot progress={$burst} normalized={normalized} />
+{/if}

package/dist/extras/SceneTransition.svelte.d.ts

@@ -0,0 +1,21 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        duration?: number | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {
+            progress: any;
+            normalized: number;
+        };
+    };
+};
+export type SceneTransitionProps = typeof __propDef.props;
+export type SceneTransitionEvents = typeof __propDef.events;
+export type SceneTransitionSlots = typeof __propDef.slots;
+export default class SceneTransition extends SvelteComponent<SceneTransitionProps, SceneTransitionEvents, SceneTransitionSlots> {
+}
+export {};

package/dist/extras/SensibleDefaultStyles.svelte

@@ -0,0 +1,22 @@
+<div class="game-wrapper">
+    <slot />
+</div>
+
+<style>
+    * {
+        box-sizing: border-box;
+    }
+
+    :global(html, body) {
+        width: 100%;
+        height: 100%;
+        background: black;
+        padding: 0;
+        margin: 0;
+    }
+
+    .game-wrapper {
+        width: 100%;
+        height: 100%;
+    }
+</style>

package/dist/extras/SensibleDefaultStyles.svelte.d.ts

@@ -0,0 +1,20 @@
+/** @typedef {typeof __propDef.props}  SensibleDefaultStylesProps */
+/** @typedef {typeof __propDef.events}  SensibleDefaultStylesEvents */
+/** @typedef {typeof __propDef.slots}  SensibleDefaultStylesSlots */
+export default class SensibleDefaultStyles {
+}
+export type SensibleDefaultStylesProps = typeof __propDef.props;
+export type SensibleDefaultStylesEvents = typeof __propDef.events;
+export type SensibleDefaultStylesSlots = typeof __propDef.slots;
+declare const __propDef: {
+    props: {
+        [x: string]: never;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};