@hi-ashleyj/llama 0.9.0 → 0.10.0

package/dist/extras/Tweened.svelte

@@ -0,0 +1,9 @@
+<script>import { tweened } from "svelte/motion";
+export let duration = 200;
+export let value = 0;
+const tweening = tweened(null, { duration });
+$:
+  tweening.set(value, { duration });
+</script>
+
+<slot smooth={$tweening} />

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

@@ -0,0 +1,21 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        duration?: number | undefined;
+        value?: number | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {
+            smooth: number;
+        };
+    };
+};
+export type TweenedProps = typeof __propDef.props;
+export type TweenedEvents = typeof __propDef.events;
+export type TweenedSlots = typeof __propDef.slots;
+export default class Tweened extends SvelteComponent<TweenedProps, TweenedEvents, TweenedSlots> {
+}
+export {};

package/dist/extras/scenes.d.ts

@@ -0,0 +1,6 @@
+import type { Writable } from "svelte/store";
+export declare const currentScene: Writable<string>;
+export declare const jumpSignal: Writable<boolean>;
+export declare const effectiveScene: Writable<string>;
+export declare const sceneAnimating: Writable<boolean>;
+export declare const changeScene: (scene: string) => void;

package/dist/extras/scenes.js

@@ -0,0 +1,22 @@
+import { writable, get } from "svelte/store";
+export const currentScene = writable("default");
+export const jumpSignal = writable(false);
+export const effectiveScene = writable("default");
+export const sceneAnimating = writable(false);
+let wasAnimating = false;
+sceneAnimating.subscribe((animating) => {
+    wasAnimating = animating;
+    if (animating)
+        return;
+    let currentSceneValue = get(currentScene);
+    if (currentSceneValue !== get(effectiveScene)) {
+        changeScene(currentSceneValue);
+    }
+});
+export const changeScene = function (scene) {
+    currentScene.set(scene);
+    if (wasAnimating)
+        return;
+    sceneAnimating.set(true);
+    effectiveScene.set(scene);
+};

package/dist/index.d.ts

@@ -0,0 +1,21 @@
+export { default as Game } from "./Game.svelte";
+export { default as Layer } from "./Layer.svelte";
+export { default as GameObject } from "./GameObject.svelte";
+export { getGame, getLayer, getTriggerLayerRender } from "./core-contexts.js";
+export type { GameContext, LayerContext, LayerDrawable } from "./core-contexts.d.ts";
+export { default as MouseClickable } from "./controllers/MouseClickable.svelte";
+export { default as MouseEventArea } from "./controllers/MouseEventArea.svelte";
+export { MOUSE_ACTION } from "./controllers/mouse.js";
+export { KEYBOARD_ACTION } from "./controllers/keyboard.js";
+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 { default as SensibleDefaultStyles } from "./extras/SensibleDefaultStyles.svelte";
+export { default as Empty } from "./extras/Empty.svelte";
+export { default as LayerPortal } from "./extras/LayerPortal.svelte";
+export { changeScene } from "./extras/scenes.js";
+export { default as SceneSwitcher } from "./extras/SceneSwitcher.svelte";
+export { default as SceneTransition } from "./extras/SceneTransition.svelte";
+export { default as Rotate } from "./extras/Rotate.svelte";
+export { default as Tweened } from "./extras/Tweened.svelte";

package/dist/index.js

@@ -0,0 +1,24 @@
+// CORE
+export { default as Game } from "./Game.svelte";
+export { default as Layer } from "./Layer.svelte";
+export { default as GameObject } from "./GameObject.svelte";
+export { getGame, getLayer, getTriggerLayerRender } from "./core-contexts.js";
+// CONTROLLERS
+export { default as MouseClickable } from "./controllers/MouseClickable.svelte";
+export { default as MouseEventArea } from "./controllers/MouseEventArea.svelte";
+export { MOUSE_ACTION } from "./controllers/mouse.js";
+export { KEYBOARD_ACTION } from "./controllers/keyboard.js";
+// DRAWABLES
+export { setupDrawable } from "./drawable.js";
+export * as Drawables from "./drawables/index.js";
+// RESOURCES
+export { resolve as resolveImage } from "./resources/images.js";
+// EXTRAS
+export { default as SensibleDefaultStyles } from "./extras/SensibleDefaultStyles.svelte";
+export { default as Empty } from "./extras/Empty.svelte";
+export { default as LayerPortal } from "./extras/LayerPortal.svelte";
+export { changeScene } from "./extras/scenes.js";
+export { default as SceneSwitcher } from "./extras/SceneSwitcher.svelte";
+export { default as SceneTransition } from "./extras/SceneTransition.svelte";
+export { default as Rotate } from "./extras/Rotate.svelte";
+export { default as Tweened } from "./extras/Tweened.svelte";

package/package.json

@@ -1,8 +1,16 @@
 {
   "name": "@hi-ashleyj/llama",
   "description": "A (Very Incomplete) 2D Canvas Game Engine powered by Svelte",
-  "version": "0.9.0",
+  "version": "0.10.0",
   "type": "module",
+  "scripts": {
+    "dev": "vite dev",
+    "build": "vite build",
+    "package": "svelte-package",
+    "preview": "vite preview",
+    "sync": "svelte-kit sync",
+    "check": "svelte-check"
+  },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/hi-ashleyj/llama-game-engine.git"
@@ -19,35 +27,24 @@
     "@sveltejs/package": "latest",
     "sass": "^1.58.0",
     "svelte": "^3.44.0",
-    "svelte-preprocess": "^4.10.7",
-    "svelte2tsx": "^0.5.12",
+    "svelte-check": "^3.4.6",
     "typescript": "^4.7.4",
     "vite": "^4.0.0"
   },
-  "exports": {
-    "./package.json": "./package.json",
-    "./components/Game.svelte": "./components/Game.svelte",
-    "./components/GameObject.svelte": "./components/GameObject.svelte",
-    "./components/Layer.svelte": "./components/Layer.svelte",
-    "./components/controller": "./components/controller.js",
-    "./components/drawables/Arc.svelte": "./components/drawables/Arc.svelte",
-    "./components/drawables/Circle.svelte": "./components/drawables/Circle.svelte",
-    "./components/drawables/DisplayImage.svelte": "./components/drawables/DisplayImage.svelte",
-    "./components/drawables/MultiLineText.svelte": "./components/drawables/MultiLineText.svelte",
-    "./components/drawables/Rectangle.svelte": "./components/drawables/Rectangle.svelte",
-    "./components/drawables/RoundedRectangle.svelte": "./components/drawables/RoundedRectangle.svelte",
-    "./components/drawables/Text.svelte": "./components/drawables/Text.svelte",
-    "./components/drawables": "./components/drawables/index.js",
-    "./components/motions": "./components/motions.js",
-    "./components/mouse/MouseClickable.svelte": "./components/mouse/MouseClickable.svelte",
-    "./components/mouse/MouseEventArea.svelte": "./components/mouse/MouseEventArea.svelte",
-    "./components/mouse/MouseLeftClick.svelte": "./components/mouse/MouseLeftClick.svelte",
-    "./components/mouse": "./components/mouse.js",
-    "./components/resources/images": "./components/resources/images.js",
-    "./drawables": "./drawables.js",
-    ".": "./index.js",
-    "./resources": "./resources.js",
-    "./setup": "./setup.js"
+  "peerDependencies": {
+    "svelte": "^4.0.0"
   },
-  "svelte": "./index.js"
-}
+  "files": [
+    "dist"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "svelte": "./dist/index.js"
+    },
+    "./drawables": {
+      "types": "./dist/drawables/index.d.ts",
+      "svelte": "./dist/drawables/index.js"
+    }
+  }
+}

package/components/Game.svelte

@@ -1,116 +0,0 @@
-<script>import { writable } from "svelte/store";
-import { onMount } from "svelte";
-import { setupGame } from "../setup";
-import { Timing } from "./motions";
-import { Controller } from "./controller";
-import { Mouse } from "./mouse";
-export let width = 1920;
-export let height = 1080;
-export let background = "#000000";
-// noinspection JSUnusedAssignment
-const widthStore = writable(1920);
-// noinspection JSUnusedAssignment
-const heightStore = writable(1080);
-// noinspection JSUnusedAssignment
-const backgroundStore = writable("#000000");
-$: {
-    $widthStore = width;
-}
-$: {
-    $heightStore = height;
-}
-$: {
-    $backgroundStore = background;
-}
-const layers = new Set();
-const draw = function (delta, time) {
-    for (let layer of layers) {
-        if (layer.isStatic())
-            continue;
-        layer.draw(delta, time);
-    }
-};
-const assign = function (ctx) {
-    layers.add(ctx);
-    return () => layers.delete(ctx);
-};
-const timing = new Timing();
-const controller = new Controller();
-const mouse = new Mouse();
-const frameEvents = new Set();
-const frameBeforeEvents = new Set();
-const frameAfterEvents = new Set();
-// noinspection JSUnusedGlobalSymbols
-export const context = {
-    width: widthStore,
-    height: heightStore,
-    background: backgroundStore,
-    assign,
-    createTimer: timing.createTimer.bind(timing),
-    createBurst: timing.createBurst.bind(timing),
-    onKeyboardEvent: controller.on.bind(controller),
-    isKeyboardPressed: controller.isPressed.bind(controller),
-    getKeyboardStore: controller.getStore.bind(controller),
-    onMouseEvent: mouse.on.bind(mouse),
-    isMousePressed: mouse.isPressed.bind(mouse),
-    getMousePosition: mouse.getPosition.bind(mouse),
-    getMouseStore: mouse.getStore.bind(mouse),
-    onFrame: (callback) => {
-        frameEvents.add(callback);
-        return () => frameEvents.delete(callback);
-    },
-    onBeforeFrame: (callback) => {
-        frameBeforeEvents.add(callback);
-        return () => frameBeforeEvents.delete(callback);
-    },
-    onAfterFrame: (callback) => {
-        frameAfterEvents.add(callback);
-        return () => frameAfterEvents.delete(callback);
-    },
-};
-setupGame(context);
-let last = -1;
-const loop = function (time) {
-    if (last < 0)
-        last = time;
-    let delta = (time - last);
-    if (delta > 1000) {
-        requestAnimationFrame(loop);
-        return last = time;
-    }
-    // TODO: NEW TIMEOUT LOGIC
-    frameBeforeEvents.forEach((callback) => callback({ delta, time }));
-    timing.update(delta);
-    frameEvents.forEach((callback) => callback({ delta, time }));
-    draw(delta, time);
-    frameAfterEvents.forEach((callback) => callback({ delta, time }));
-    requestAnimationFrame(loop);
-    last = time;
-};
-onMount(() => {
-    requestAnimationFrame(loop);
-    controller.start();
-    mouse.start();
-});
-let wiw = 0;
-let wih = 0;
-$: {
-    mouse.changeWindowDimensions(wiw, wih);
-}
-</script>
-
-<div class="game" style:background-color={background}>
-    <slot />
-</div>
-
-<svelte:window bind:innerHeight={wih} bind:innerWidth={wiw}></svelte:window>
-
-<style>
-    .game {
-        position: relative;
-        width: 100%;
-        height: 100%;
-        padding: 0;
-        margin: 0;
-    }
-</style>

package/components/GameObject.svelte

@@ -1,40 +0,0 @@
-<script>import { setupDrawable } from "../setup";
-import { onMount } from "svelte";
-export let x = 0;
-export let y = 0;
-export let w = 0;
-export let h = 0;
-/**
- * FALSE = ANCHOR TOP LEFT
- * TRUE = ANCHOR CENTER
- */
-export let centered = false;
-export let opacity = 1;
-$: ax = (centered) ? x - (w / 2) : x;
-$: ay = (centered) ? y - (h / 2) : y;
-const targets = new Set();
-const draw = function ({ width, height, ctx }) {
-    if (opacity <= 0)
-        return;
-    if (opacity < 1) {
-        ctx.globalAlpha = opacity;
-    }
-    targets.forEach(f => f.draw({ width, height, ctx }, { x: ax, y: ay, w, h }));
-    if (opacity < 1) {
-        ctx.globalAlpha = 1;
-    }
-};
-let register = setupDrawable({
-    assign: (ctx) => {
-        targets.add(ctx);
-        return () => {
-            targets.delete(ctx);
-        };
-    },
-});
-onMount(() => {
-    return register({ draw });
-});
-</script>
-
-<slot/>

package/components/Layer.svelte

@@ -1,47 +0,0 @@
-<script>import { setupLayer, getGame } from "../setup";
-import { onMount } from "svelte";
-export let zIndex = 0;
-export let staticMode = false;
-let shouldRenderNextFrame = true;
-let canvas;
-$: ctx = (typeof canvas !== "undefined") ? canvas.getContext("2d") : null;
-let targets = new Set();
-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); };
-    },
-    requestFrame: () => {
-        if (!staticMode)
-            return;
-        shouldRenderNextFrame = true;
-    }
-});
-onMount(() => {
-    return register({ draw, isStatic: () => { if (shouldRenderNextFrame) {
-            shouldRenderNextFrame = false;
-            draw();
-        } return staticMode; } });
-});
-</script>
-
-<canvas width={$width} height={$height} bind:this={canvas} style:z-index={zIndex}></canvas>
-<slot />
-
-<style>
-    canvas {
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        object-fit: contain;
-    }
-</style>

package/components/drawables/Arc.svelte

@@ -1,29 +0,0 @@
-<script>import { setupDrawable } from "../../setup";
-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/drawables/Circle.svelte

@@ -1,25 +0,0 @@
-<script>import { setupDrawable } from "../../setup";
-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/drawables/DisplayImage.svelte

@@ -1,17 +0,0 @@
-<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 }) {
-    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/drawables/MultiLineText.svelte

@@ -1,45 +0,0 @@
-<script>import { setupDrawable } from "../../setup";
-import { onMount } from "svelte";
-export let text;
-export let size;
-export let spacing = 1.4;
-export let font;
-export let style = undefined;
-export let fill = undefined;
-export let stroke = undefined;
-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/drawables/Rectangle.svelte

@@ -1,22 +0,0 @@
-<script>import { setupDrawable } from "../../setup";
-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/drawables/RoundedRectangle.svelte

@@ -1,24 +0,0 @@
-<script>import { setupDrawable } from "../../setup";
-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/drawables/Text.svelte

@@ -1,36 +0,0 @@
-<script>import { setupDrawable } from "../../setup";
-import { onMount } from "svelte";
-export let text;
-export let size;
-export let font;
-export let style = undefined;
-export let fill = undefined;
-export let stroke = undefined;
-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.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({});
-onMount(() => {
-    return register({ draw });
-});
-</script>

package/components/mouse/MouseClickable.svelte

@@ -1,49 +0,0 @@
-<script>import { setupDrawable, getGame } from "../../setup";
-import { onMount, createEventDispatcher } from "svelte";
-import { MOUSE_ACTION } from "../mouse";
-let tx = 0;
-let ty = 0;
-let tw = 0;
-let th = 0;
-let dispatch = createEventDispatcher();
-let context = getGame();
-const draw = function (_info, { x, y, w, h }) {
-    tx = x;
-    ty = y;
-    tw = w;
-    th = h;
-};
-let register = setupDrawable({});
-onMount(() => {
-    let event = context.onMouseEvent(null, MOUSE_ACTION.DOWN, ({ key }) => {
-        let x = context.getMousePosition("mouse_x");
-        if (x < tx || x > tx + tw)
-            return;
-        let y = context.getMousePosition("mouse_y");
-        if (y < ty || y > ty + th)
-            return;
-        dispatch("click");
-        switch (key) {
-            case ("mouse_left"): {
-                dispatch("left");
-                dispatch("leftorright");
-                return;
-            }
-            case ("mouse_right"): {
-                dispatch("right");
-                dispatch("leftorright");
-                return;
-            }
-            case ("mouse_middle"): {
-                dispatch("middle");
-            }
-        }
-        dispatch("other");
-    });
-    let deregister = register({ draw });
-    return () => {
-        event();
-        deregister();
-    };
-});
-</script>