@hi-ashleyj/llama 0.10.2 → 0.11.0

package/dist/Layer.svelte

@@ -2,6 +2,7 @@
 import { onMount } from "svelte";
 export let zIndex = 0;
 export let staticMode = false;
+export let scaleMode = "pixelated";
 let shouldRenderNextFrame = true;
 let canvas;
 $:
@@ -12,6 +13,7 @@ const draw = () => {
   if (ctx === null)
     return;
   ctx.clearRect(0, 0, $width, $height);
+  ctx.imageSmoothingEnabled = scaleMode === "smooth";
   targets.forEach((f) => f.draw({ width: $width, height: $height, ctx }));
 };
 let register = setupLayer({

package/dist/Layer.svelte.d.ts

@@ -3,6 +3,7 @@ declare const __propDef: {
     props: {
         zIndex?: number | undefined;
         staticMode?: boolean | undefined;
+        scaleMode?: "pixelated" | "smooth" | undefined;
         name: string;
     };
     events: {

package/dist/core-contexts.d.ts

@@ -1,8 +1,8 @@
 import type { Writable } from 'svelte/store';
-import type { Timing } from "./controllers/motions";
-import type { Keyboard } from "./controllers/keyboard";
-import type { Mouse } from "./controllers/mouse";
-import { type DrawableContext } from './drawable';
+import type { Timing } from "./controllers/motions.js";
+import type { Keyboard } from "./controllers/keyboard.js";
+import type { Mouse } from "./controllers/mouse.js";
+import { type DrawableContext } from './drawable.js';
 export type DestroyFunction = () => any;
 export type RegisterFunction<T> = (run: T) => DestroyFunction;
 export type GameContext = {

package/dist/core-contexts.js

@@ -1,5 +1,5 @@
 import { getContext, setContext } from 'svelte';
-import { setupDrawable } from './drawable';
+import { setupDrawable } from './drawable.js';
 const GAME = Symbol();
 export const setupGame = function (context) {
     if (getContext(GAME)) {

package/dist/drawables/Tiled.svelte

@@ -0,0 +1,63 @@
+<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;
+      }
+    }
+  }
+};
+const register = setupDrawable({});
+onMount(() => {
+  return register({ draw });
+});
+</script>

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

@@ -0,0 +1,22 @@
+import { SvelteComponent } from "svelte";
+import type { TileSet } from "../resources/tileset.js";
+declare const __propDef: {
+    props: {
+        shiftX: number;
+        shiftY: number;
+        drawSize: number;
+        tileSet: TileSet;
+        alias: Record<string, [number, number]>;
+        map: string[];
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type TiledProps = typeof __propDef.props;
+export type TiledEvents = typeof __propDef.events;
+export type TiledSlots = typeof __propDef.slots;
+export default class Tiled extends SvelteComponent<TiledProps, TiledEvents, TiledSlots> {
+}
+export {};

package/dist/drawables/index.d.ts

@@ -5,3 +5,4 @@ export { default as DisplayImage } from "./DisplayImage.svelte";
 export { default as Text } from "./Text.svelte";
 export { default as MultiLineText } from "./MultiLineText.svelte";
 export { default as RoundedRectangle } from "./RoundedRectangle.svelte";
+export { default as Tiled } from "./Tiled.svelte";

package/dist/drawables/index.js

@@ -5,3 +5,4 @@ export { default as DisplayImage } from "./DisplayImage.svelte";
 export { default as Text } from "./Text.svelte";
 export { default as MultiLineText } from "./MultiLineText.svelte";
 export { default as RoundedRectangle } from "./RoundedRectangle.svelte";
+export { default as Tiled } from "./Tiled.svelte";

package/dist/extras/Empty.svelte

@@ -0,0 +1 @@
+<slot />

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

@@ -13,6 +13,8 @@ declare const __propDef: {
     events: {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {};
+    slots: {
+        default: {};
+    };
 };
 export {};

package/dist/extras/SceneSwitcher.svelte

@@ -1,6 +1,6 @@
 <script>import { jumpSignal, effectiveScene } from "./scenes.js";
 import { SvelteComponent, onMount } from "svelte";
-import { getTriggerLayerRender } from "@hi-ashleyj/llama";
+import { getTriggerLayerRender } from "../core-contexts.js";
 const triggerRender = getTriggerLayerRender();
 let scene;
 const changeScene = (_signal) => {

package/dist/extras/SceneTransition.svelte

@@ -1,5 +1,5 @@
-<script>import { jumpSignal, sceneAnimating } from "./scenes";
-import { getGame, getTriggerLayerRender } from "@hi-ashleyj/llama";
+<script>import { jumpSignal, sceneAnimating } from "./scenes.js";
+import { getGame, getTriggerLayerRender } from "../core-contexts.js";
 import { onDestroy } from "svelte";
 const context = getGame();
 export let duration = 1e3;

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

@@ -8,7 +8,7 @@ declare const __propDef: {
     };
     slots: {
         default: {
-            progress: any;
+            progress: number;
             normalized: number;
         };
     };

package/dist/index.d.ts

@@ -11,6 +11,8 @@ export { setupDrawable } from "./drawable.js";
 export type { DrawableContext, DrawableObject, DrawFunction } from "./drawable.d.ts";
 export * as Drawables from "./drawables/index.js";
 export { resolve as resolveImage } from "./resources/images.js";
+export { useTileSet, getTile } from "./resources/tileset.js";
+export type { TileSet } from "./resources/tileset.d.ts";
 export { default as SensibleDefaultStyles } from "./extras/SensibleDefaultStyles.svelte";
 export { default as Empty } from "./extras/Empty.svelte";
 export { default as LayerPortal } from "./extras/LayerPortal.svelte";

package/dist/index.js

@@ -13,6 +13,7 @@ export { setupDrawable } from "./drawable.js";
 export * as Drawables from "./drawables/index.js";
 // RESOURCES
 export { resolve as resolveImage } from "./resources/images.js";
+export { useTileSet, getTile } from "./resources/tileset.js";
 // EXTRAS
 export { default as SensibleDefaultStyles } from "./extras/SensibleDefaultStyles.svelte";
 export { default as Empty } from "./extras/Empty.svelte";

package/dist/resources/tileset.d.ts

@@ -0,0 +1,12 @@
+import type DisplayImage from "../drawables/DisplayImage.svelte";
+import type { ComponentProps } from "svelte";
+export type TileSet = {
+    width: number;
+    height: number;
+    size: number;
+    image: HTMLImageElement;
+};
+type Pixels = number;
+export declare const useTileSet: (image: HTMLImageElement, width: number, height: number, size: Pixels) => TileSet;
+export declare const getTile: (tileset: TileSet, x: number, y: number) => ComponentProps<DisplayImage>;
+export {};

package/dist/resources/tileset.js

@@ -0,0 +1,23 @@
+export const useTileSet = (image, width, height, size) => {
+    return {
+        image,
+        width,
+        height,
+        size
+    };
+};
+export const getTile = (tileset, x, y) => {
+    if (x < 0 || y < 0)
+        throw new Error("Cannot pick tile with index < 0");
+    if (x > tileset.width || y > tileset.height)
+        throw new Error("Cannot pick tile with index > max");
+    return {
+        image: tileset.image,
+        crop: {
+            x: x * tileset.size,
+            y: y * tileset.size,
+            w: tileset.size,
+            h: tileset.size
+        }
+    };
+};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@hi-ashleyj/llama",
   "description": "A (Very Incomplete) 2D Canvas Game Engine powered by Svelte",
-  "version": "0.10.2",
+  "version": "0.11.0",
   "type": "module",
   "scripts": {
     "dev": "vite dev",
@@ -38,7 +38,14 @@
     "dist"
   ],
   "exports": {
-    ".": "./dist/index.js",
-    "./drawables": "./dist/drawables/index.js"
-  }
+    ".": {
+      "types": "./dist/index.d.ts",
+      "svelte": "./dist/index.js"
+    },
+    "./drawables": {
+      "types": "./dist/drawables/index.d.ts",
+      "svelte": "./dist/drawables/index.js"
+    }
+  },
+  "types": "./dist/index.d.ts"
 }