@hi-ashleyj/llama 0.13.2 → 0.14.0

package/dist/drawables/MultiLineText.svelte

@@ -1,47 +1,77 @@
-<script>import { setupDrawable } from "../drawable.js";
-import { onMount } from "svelte";
-import { getGame } from "../core-contexts.js";
-export let text;
-export let size;
-export let spacing = 1.4;
-export let font = null;
-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";
-const { defaultTextFontFace } = getGame();
-$:
-  effectiveFont = font ? font : typeof $defaultTextFontFace === "string" ? $defaultTextFontFace : "sans-serif";
-$:
-  computedFont = (style ? style + " " : "") + size + "px " + effectiveFont;
-$:
-  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);
+<script lang="ts">
+
+    import { setupDrawable, type DrawFunction } from "../drawable.js";
+    import { onMount } from "svelte";
+    import { getGame } from "../core-contexts.js";
+
+    interface Props {
+        text: string;
+        size: number;
+        spacing?: number;
+        font?: string | null;
+        style?: string | undefined;
+        fill?: string | undefined;
+        stroke?: string | undefined;
+        strokeWidth?: number | null;
+        alignH?: "left" | "center" | "right";
+        alignV?: "top" | "middle" | "bottom" | "alphabetic";
     }
-    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 });
-});
+
+    let {
+        text,
+        size,
+        spacing = 1.4,
+        font = null,
+        style = undefined,
+        fill = undefined,
+        stroke = undefined,
+        strokeWidth = null,
+        alignH = "left",
+        alignV = "top"
+    }: Props = $props();
+
+    const { defaultTextFontFace } = getGame();
+
+    let effectiveFont = $derived(font ? font : typeof $defaultTextFontFace === "string" ? $defaultTextFontFace : "sans-serif");
+    let computedFont = $derived((style ? style + " " : "") + size + "px " + effectiveFont);
+    let splits = $derived(text?.split("\n") || []);
+
+    let offset =
+        $derived(alignV === "bottom"
+            ? ((splits?.length || 1) - 1) * size * spacing
+            : alignV === "middle"
+            ? ((splits?.length || 1) - 1) * size * spacing * 0.5
+            : 0);
+
+    const draw: DrawFunction<{x: number, y: number, w: number, h: number}> = function (
+        { ctx },
+        { x, y }: { x: number; y: number; w: number; h: number }
+    ) {
+        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<{x: number, y: number, w: number, h: number}, null>({});
+
+    onMount(() => {
+        return register({ draw });
+    });
 </script>

package/dist/drawables/MultiLineText.svelte.d.ts

@@ -1,25 +1,15 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        text: string;
-        size: number;
-        spacing?: number | undefined;
-        font?: string | null | undefined;
-        style?: string | undefined;
-        fill?: string | undefined;
-        stroke?: string | undefined;
-        strokeWidth?: number | null | undefined;
-        alignH?: "center" | "left" | "right" | undefined;
-        alignV?: "alphabetic" | "bottom" | "middle" | "top" | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type MultiLineTextProps = typeof __propDef.props;
-export type MultiLineTextEvents = typeof __propDef.events;
-export type MultiLineTextSlots = typeof __propDef.slots;
-export default class MultiLineText extends SvelteComponent<MultiLineTextProps, MultiLineTextEvents, MultiLineTextSlots> {
+interface Props {
+    text: string;
+    size: number;
+    spacing?: number;
+    font?: string | null;
+    style?: string | undefined;
+    fill?: string | undefined;
+    stroke?: string | undefined;
+    strokeWidth?: number | null;
+    alignH?: "left" | "center" | "right";
+    alignV?: "top" | "middle" | "bottom" | "alphabetic";
 }
-export {};
+declare const MultiLineText: import("svelte").Component<Props, {}, "">;
+type MultiLineText = ReturnType<typeof MultiLineText>;
+export default MultiLineText;

package/dist/drawables/Rectangle.svelte

@@ -1,23 +1,36 @@
-<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.lineWidth = strokeWidth;
-    ctx.stroke();
-  }
-};
-let register = setupDrawable({});
-onMount(() => {
-  return register({ draw });
-});
+<script lang="ts">
+
+    import { setupDrawable, type DrawFunction } from "../drawable.js";
+    import { onMount } from "svelte";
+
+    interface Props {
+        fill?: string | null;
+        stroke?: string | null;
+        strokeWidth?: number | null;
+    }
+
+    let { fill = null, stroke = null, strokeWidth = null }: Props = $props();
+    
+    const draw: DrawFunction<{x: number, y: number, w: number, h: number}> = 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.lineWidth = strokeWidth;
+            ctx.stroke();
+        }
+    };
+    
+    let register = setupDrawable<{x: number, y: number, w: number, h: number}, null>({});
+
+    onMount(() => {
+        return register({ draw });
+    })
+
 </script>

package/dist/drawables/Rectangle.svelte.d.ts

@@ -1,18 +1,8 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        fill?: string | null | undefined;
-        stroke?: string | null | undefined;
-        strokeWidth?: number | null | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type RectangleProps = typeof __propDef.props;
-export type RectangleEvents = typeof __propDef.events;
-export type RectangleSlots = typeof __propDef.slots;
-export default class Rectangle extends SvelteComponent<RectangleProps, RectangleEvents, RectangleSlots> {
+interface Props {
+    fill?: string | null;
+    stroke?: string | null;
+    strokeWidth?: number | null;
 }
-export {};
+declare const Rectangle: import("svelte").Component<Props, {}, "">;
+type Rectangle = ReturnType<typeof Rectangle>;
+export default Rectangle;

package/dist/drawables/RoundedRectangle.svelte

@@ -1,24 +1,42 @@
-<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 lang="ts">
+
+    import { setupDrawable, type DrawFunction } from "../drawable.js";
+    import { onMount } from "svelte";
+
+    interface Props {
+        fill?: string | null;
+        stroke?: string | null;
+        strokeWidth?: number | null;
+        radius?: number | [ number ] | [ number, number ] | [ number, number, number ] | [ number, number, number, number ];
+    }
+
+    let {
+        fill = null,
+        stroke = null,
+        strokeWidth = null,
+        radius = 0
+    }: Props = $props();
+    
+    const draw: DrawFunction<{x: number, y: number, w: number, h: number}> = function({ ctx }, { x, y, w, h }: { x: number, y: number, w: number, h: number }) {
+        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<{x: number, y: number, w: number, h: number}, null>({});
+
+    onMount(() => {
+        return register({ draw });
+    })
+
 </script>

package/dist/drawables/RoundedRectangle.svelte.d.ts

@@ -1,19 +1,9 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        fill?: string | null | undefined;
-        stroke?: string | null | undefined;
-        strokeWidth?: number | null | undefined;
-        radius?: number | [number] | [number, number] | [number, number, number] | [number, number, number, number] | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type RoundedRectangleProps = typeof __propDef.props;
-export type RoundedRectangleEvents = typeof __propDef.events;
-export type RoundedRectangleSlots = typeof __propDef.slots;
-export default class RoundedRectangle extends SvelteComponent<RoundedRectangleProps, RoundedRectangleEvents, RoundedRectangleSlots> {
+interface Props {
+    fill?: string | null;
+    stroke?: string | null;
+    strokeWidth?: number | null;
+    radius?: number | [number] | [number, number] | [number, number, number] | [number, number, number, number];
 }
-export {};
+declare const RoundedRectangle: import("svelte").Component<Props, {}, "">;
+type RoundedRectangle = ReturnType<typeof RoundedRectangle>;
+export default RoundedRectangle;

package/dist/drawables/Text.svelte

@@ -1,41 +1,64 @@
-<script>import { setupDrawable } from "../drawable.js";
-import { getGame } from "../core-contexts.js";
-import { onMount } from "svelte";
-export let text;
-export let size;
-export let font = null;
-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";
-const { defaultTextFontFace } = getGame();
-$:
-  effectiveFont = font ? font : typeof $defaultTextFontFace === "string" ? $defaultTextFontFace : "sans-serif";
-$:
-  computedFont = (style ? style + " " : "") + size + "px " + effectiveFont;
-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 lang="ts">
+
+    import { setupDrawable, type DrawFunction } from "../drawable.js";
+    import { getGame } from "../core-contexts.js";
+    import { onMount } from "svelte";
+
+    interface Props {
+        text: string;
+        size: number;
+        font?: string | null;
+        style?: string | undefined;
+        fill?: string | undefined;
+        stroke?: string | undefined;
+        strokeWidth?: number | null;
+        alignH?: "left" | "center" | "right";
+        alignV?: "top" | "middle" | "bottom" | "alphabetic";
+    }
+
+    let {
+        text,
+        size,
+        font = null,
+        style = undefined,
+        fill = undefined,
+        stroke = undefined,
+        strokeWidth = null,
+        alignH = "left",
+        alignV = "top"
+    }: Props = $props();
+
+    const { defaultTextFontFace } = getGame();
+
+    let effectiveFont = $derived(font ? font : typeof $defaultTextFontFace === "string" ? $defaultTextFontFace : "sans-serif");
+    let computedFont = $derived(((style) ? style + " ": "") + size + "px " + effectiveFont);
+    
+    const draw: DrawFunction<{x: number, y: number, w: number, h: number}> = function({ ctx }, { x, y, w, h }: { x: number, y: number, w: number, h: number }) {
+        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.10) : 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<{x: number, y: number, w: number, h: number}, null>({});
+
+    onMount(() => {
+        return register({ draw });
+    })
+    
 </script>

package/dist/drawables/Text.svelte.d.ts

@@ -1,24 +1,14 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        text: string;
-        size: number;
-        font?: string | null | undefined;
-        style?: string | undefined;
-        fill?: string | undefined;
-        stroke?: string | undefined;
-        strokeWidth?: number | null | undefined;
-        alignH?: "center" | "left" | "right" | undefined;
-        alignV?: "alphabetic" | "bottom" | "middle" | "top" | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type TextProps = typeof __propDef.props;
-export type TextEvents = typeof __propDef.events;
-export type TextSlots = typeof __propDef.slots;
-export default class Text extends SvelteComponent<TextProps, TextEvents, TextSlots> {
+interface Props {
+    text: string;
+    size: number;
+    font?: string | null;
+    style?: string | undefined;
+    fill?: string | undefined;
+    stroke?: string | undefined;
+    strokeWidth?: number | null;
+    alignH?: "left" | "center" | "right";
+    alignV?: "top" | "middle" | "bottom" | "alphabetic";
 }
-export {};
+declare const Text: import("svelte").Component<Props, {}, "">;
+type Text = ReturnType<typeof Text>;
+export default Text;

package/dist/drawables/Tiled.svelte

@@ -1,63 +1,81 @@
-<script>import { setupDrawable } from "../drawable.js";
-import { onMount } from "svelte";
-export let shiftX;
-export let shiftY;
-export let drawSize;
-export let tileSet;
-export let alias;
-export let map;
-$:
-  mapWidth = map[0]?.length ?? 0;
-$:
-  mapHeight = map.length ?? 0;
-const draw = ({ ctx, width, height }, { x, y, w, h }) => {
-  if (!map)
-    return;
-  if (!alias)
-    return;
-  if (shiftX < w * -1)
-    return;
-  if (shiftX > mapWidth * drawSize)
-    return;
-  if (shiftY < h * -1)
-    return;
-  if (shiftY > mapHeight * drawSize)
-    return;
-  const leftMostTile = Math.max(Math.floor(shiftX / drawSize), 0);
-  const leftOffset = shiftX > 0 ? shiftX % drawSize * -1 : shiftX * -1;
-  const tilesWide = Math.min(mapWidth - leftMostTile, Math.ceil((w - leftOffset) / drawSize), mapWidth - 1);
-  const topMostTile = Math.max(Math.floor(shiftY / drawSize), 0);
-  const topOffset = shiftY > 0 ? shiftY % drawSize * -1 : shiftY * -1;
-  const tilesHigh = Math.min(mapHeight - topMostTile, Math.ceil((h - topOffset) / drawSize), mapHeight - 1);
-  for (let i = 0; i < tilesWide; i++) {
-    for (let j = 0; j < tilesHigh; j++) {
-      try {
-        const key = map[j + topMostTile][i + leftMostTile];
-        if (key === " ")
-          continue;
-        const dealias = alias[key];
-        if (!dealias)
-          continue;
-        ctx.drawImage(
-          tileSet.image,
-          dealias[0] * tileSet.size,
-          dealias[1] * tileSet.size,
-          tileSet.size,
-          tileSet.size,
-          i * drawSize + leftOffset,
-          j * drawSize + topOffset,
-          drawSize,
-          drawSize
-        );
-      } catch (_err) {
-        console.log(i, j);
-        throw _err;
-      }
+<script lang="ts">
+
+    import type { TileSet } from "../resources/tileset.js";
+    import { setupDrawable, type DrawFunction } from "../drawable.js";
+    import { onMount } from "svelte";
+
+    interface Props {
+        shiftX: number;
+        shiftY: number;
+        drawSize: number;
+        tileSet: TileSet;
+        alias: Record<string, [ number, number ]>;
+        map: string[];
     }
-  }
-};
-const register = setupDrawable({});
-onMount(() => {
-  return register({ draw });
-});
+
+    let {
+        shiftX,
+        shiftY,
+        drawSize,
+        tileSet,
+        alias,
+        map
+    }: Props = $props();
+
+    let mapWidth = $derived(map[0]?.length ?? 0);
+    let mapHeight = $derived(map.length ?? 0);
+
+    const draw: DrawFunction<{x: number, y: number, w: number, h: number}> = ({ ctx, width, height }, { x, y, w, h }) => {
+
+        if (!map) return;
+        if (!alias) return;
+
+        // CHECK BOUNDS
+        if (shiftX < w * -1) return;
+        if (shiftX > mapWidth * drawSize) return;
+
+        if (shiftY < h * - 1) return;
+        if (shiftY > mapHeight * drawSize) return;
+
+        // WE DO HAVE TO DRAW SOME TILES
+        const leftMostTile = Math.max(Math.floor(shiftX / drawSize), 0);
+        const leftOffset = shiftX > 0 ? (shiftX % drawSize) * -1 : shiftX * -1;
+        const tilesWide = Math.min(mapWidth - leftMostTile, Math.ceil((w - leftOffset) / drawSize), mapWidth - 1);
+
+        const topMostTile = Math.max(Math.floor(shiftY / drawSize), 0);
+        const topOffset = shiftY > 0 ? (shiftY % drawSize) * -1 : shiftY * -1;
+        const tilesHigh = Math.min(mapHeight - topMostTile, Math.ceil((h - topOffset) / drawSize), mapHeight - 1);
+
+        for ( let i = 0; i < tilesWide; i ++ ) {
+            for ( let j = 0; j < tilesHigh; j ++ ) {
+                try {
+                    const key = map[j + topMostTile][i + leftMostTile];
+                    if (key === " ") continue;
+                    const dealias = alias[key];
+                    if (!dealias) continue;
+                    ctx.drawImage(
+                        tileSet.image, 
+                        dealias[0] * tileSet.size, 
+                        dealias[1] * tileSet.size,
+                        tileSet.size, 
+                        tileSet.size, 
+                        i * drawSize + leftOffset, 
+                        j * drawSize + topOffset, 
+                        drawSize, 
+                        drawSize);
+                } catch (_err) {
+                    console.log(i, j);
+                    throw _err;
+                }
+                
+            }
+        }
+    }
+
+    const register = setupDrawable<{x: number, y: number, w: number, h: number}, null>({});
+
+    onMount(() => {
+        return register({ draw })
+    })
+
 </script>