@hi-ashleyj/llama 0.2.1 → 0.3.1

package/components/Game.svelte

@@ -1,13 +1,16 @@
 <script>import { writable } from "svelte/store";
-import { onMount, createEventDispatcher } from "svelte";
+import { onMount } from "svelte";
 import { setupGame } from "../setup";
 import { Timing } from "./motions";
-const dispatch = createEventDispatcher();
+import { Controller } from "./controller";
 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;
@@ -29,12 +32,32 @@ const assign = function (layerDraw) {
     return () => layers.delete(layerDraw);
 };
 const timing = new Timing();
+const controller = new Controller();
+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.create.bind(timing)
+    createTimer: timing.create.bind(timing),
+    onKeyboardEvent: controller.on.bind(controller),
+    isKeyboardPressed: controller.isPressed.bind(controller),
+    getKeyboardStore: controller.getStore.bind(controller),
+    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;
@@ -47,16 +70,17 @@ const loop = function (time) {
         return last = time;
     }
     // TODO: NEW TIMEOUT LOGIC
-    dispatch("beforeframe", { delta, time });
+    frameBeforeEvents.forEach((callback) => callback({ delta, time }));
     timing.update(delta);
-    dispatch("frame", { delta, time });
+    frameEvents.forEach((callback) => callback({ delta, time }));
     draw(delta, time);
-    dispatch("afterframe", { delta, time });
+    frameAfterEvents.forEach((callback) => callback({ delta, time }));
     requestAnimationFrame(loop);
     last = time;
 };
 onMount(() => {
     requestAnimationFrame(loop);
+    controller.start();
 });
 </script>
 

package/components/Game.svelte.d.ts

@@ -1,17 +1,13 @@
 import { SvelteComponentTyped } from "svelte";
-import type { GameContext } from "../types/contexts";
+import type { GameContext } from "../types";
 declare const __propDef: {
     props: {
-        width?: number;
-        height?: number;
-        background?: string;
-        context?: GameContext;
+        width?: number | undefined;
+        height?: number | undefined;
+        background?: string | undefined;
+        context?: GameContext | undefined;
     };
     events: {
-        beforeframe: CustomEvent<any>;
-        frame: CustomEvent<any>;
-        afterframe: CustomEvent<any>;
-    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {

package/components/GameObject.svelte.d.ts

@@ -1,14 +1,14 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        x?: number;
-        y?: number;
-        w?: number;
-        h?: number;
+        x?: number | undefined;
+        y?: number | undefined;
+        w?: number | undefined;
+        h?: number | undefined;
         /**
              * FALSE = ANCHOR TOP LEFT
              * TRUE = ANCHOR CENTER
-             */ centered?: boolean;
+             */ centered?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/Layer.svelte

@@ -3,18 +3,17 @@ export let zIndex = 0;
 let canvas;
 $: ctx = (typeof canvas !== "undefined") ? canvas.getContext("2d") : null;
 let targets = new Set();
-let assign = function (callable) {
-    targets.add(callable);
-    return () => { targets.delete(callable); };
-};
-let draw = function () {
-    if (ctx === null)
-        return;
-    ctx.clearRect(0, 0, $width, $height);
-    targets.forEach(f => f({ width: $width, height: $height, ctx }));
-};
 let { width, height } = setupLayer({
-    assign, draw
+    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 }));
+    }
 }).game;
 </script>
 

package/components/Layer.svelte.d.ts

@@ -1,7 +1,7 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        zIndex?: number;
+        zIndex?: number | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/controller.d.ts

@@ -0,0 +1,26 @@
+import type { Writable } from "svelte/store";
+export declare enum CONTROLLER_ACTION {
+    DOWN = "down",
+    UP = "up",
+    PRESS = "press"
+}
+export declare class Controller {
+    constructor();
+    events: Set<{
+        key: string | null;
+        action: CONTROLLER_ACTION;
+        call: (e: {
+            key: string | null;
+            action: CONTROLLER_ACTION;
+        }) => any | void;
+    }>;
+    keyState: Map<string, boolean>;
+    keyStores: Map<string, Writable<boolean>>;
+    start(): void;
+    on(key: string | null, action: CONTROLLER_ACTION, callback: (e: {
+        key: string | null;
+        action: CONTROLLER_ACTION;
+    }) => any | void): () => any;
+    getStore(key: string): Writable<boolean>;
+    isPressed(key: string): boolean;
+}

package/components/controller.js

@@ -0,0 +1,59 @@
+import { writable } from "svelte/store";
+export var CONTROLLER_ACTION;
+(function (CONTROLLER_ACTION) {
+    CONTROLLER_ACTION["DOWN"] = "down";
+    CONTROLLER_ACTION["UP"] = "up";
+    CONTROLLER_ACTION["PRESS"] = "press";
+})(CONTROLLER_ACTION || (CONTROLLER_ACTION = {}));
+export class Controller {
+    constructor() {
+        this.events = new Set();
+        this.keyState = new Map();
+        this.keyStores = new Map();
+    }
+    events;
+    keyState;
+    keyStores;
+    start() {
+        window.addEventListener("keydown", (e) => {
+            let eklc = e.key.toLowerCase();
+            this.keyState.set(eklc, true);
+            this.events.forEach(({ key, action, call }) => {
+                if ((key === eklc || key === null) && action === CONTROLLER_ACTION.DOWN)
+                    call({ key, action });
+            });
+            if (this.keyStores.has(eklc)) {
+                this.keyStores.get(eklc)?.set(true);
+            }
+        });
+        window.addEventListener("keyup", (e) => {
+            let eklc = e.key.toLowerCase();
+            this.keyState.set(eklc, false);
+            this.events.forEach(({ key, action, call }) => {
+                if ((key === eklc || key === null) && action === CONTROLLER_ACTION.UP)
+                    call({ key, action });
+            });
+            if (this.keyStores.has(eklc)) {
+                this.keyStores.get(eklc)?.set(false);
+            }
+        });
+    }
+    on(key, action, callback) {
+        let obj = { key, action, call: callback };
+        this.events.add(obj);
+        return () => {
+            this.events.delete(obj);
+        };
+    }
+    getStore(key) {
+        if (this.keyStores.has(key)) {
+            return this.keyStores.get(key);
+        }
+        let wr = writable(this.keyState.get(key) || false);
+        this.keyStores.set(key, wr);
+        return wr;
+    }
+    isPressed(key) {
+        return this.keyState.get(key) || false;
+    }
+}

package/components/{Drawables → drawables}/Arc.svelte

@@ -8,8 +8,8 @@ $: 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 / 2, y + r / 2, r, sd, ed);
-    ctx.lineTo(x + r / 2, y + r / 2);
+    ctx.arc(x + r, y + r, r, sd, ed);
+    ctx.lineTo(x + r, y + r);
     if (fill) {
         ctx.fillStyle = fill;
         ctx.fill();

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

@@ -1,8 +1,8 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        fill?: string | null;
-        stroke?: string | null;
+        fill?: string | null | undefined;
+        stroke?: string | null | undefined;
         startAngle: number;
         endAngle: number;
     };

package/components/{Drawables → drawables}/Circle.svelte

@@ -5,7 +5,7 @@ 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 / 2, y + r / 2, r, 0, TWO_PI);
+    ctx.arc(x + r, y + r, r, 0, TWO_PI);
     if (fill) {
         ctx.fillStyle = fill;
         ctx.fill();

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

@@ -1,8 +1,8 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        fill?: string | null;
-        stroke?: string | null;
+        fill?: string | null | undefined;
+        stroke?: string | null | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/drawables/DisplayImage.svelte

@@ -0,0 +1,13 @@
+<script>import { setupDrawable } from "../../setup";
+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);
+};
+setupDrawable({ draw });
+</script>

package/components/drawables/DisplayImage.svelte.d.ts

@@ -0,0 +1,22 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        image?: HTMLImageElement | null | undefined;
+        crop?: {
+            x: number;
+            y: number;
+            w: number;
+            h: number;
+        } | null | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type DisplayImageProps = typeof __propDef.props;
+export declare type DisplayImageEvents = typeof __propDef.events;
+export declare type DisplayImageSlots = typeof __propDef.slots;
+export default class DisplayImage extends SvelteComponentTyped<DisplayImageProps, DisplayImageEvents, DisplayImageSlots> {
+}
+export {};

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

@@ -1,8 +1,8 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        fill?: string | null;
-        stroke?: string | null;
+        fill?: string | null | undefined;
+        stroke?: string | null | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/drawables/Text.svelte

@@ -0,0 +1,28 @@
+<script>import { setupDrawable } from "../../setup";
+export let text;
+export let size;
+export let font;
+export let style = undefined;
+export let fill = undefined;
+export let stroke = undefined;
+export let alignH = "left";
+export let alignV = "top";
+$: computedFont = ((style) ? style + " " : "") + size + "px " + font;
+const draw = function ({ ctx }, { x, y }) {
+    if (!text)
+        return;
+    ctx.beginPath();
+    ctx.textAlign = alignH;
+    ctx.textBaseline = alignV;
+    ctx.font = computedFont;
+    if (fill) {
+        ctx.fillStyle = fill;
+        ctx.fillText(text, x, y);
+    }
+    if (stroke) {
+        ctx.strokeStyle = stroke;
+        ctx.strokeText(text, x, y);
+    }
+};
+setupDrawable({ draw });
+</script>

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

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

package/components/{Drawables → drawables}/index.d.ts

@@ -1,3 +1,5 @@
 export { default as Rectangle } from "./Rectangle.svelte";
 export { default as Circle } from "./Circle.svelte";
 export { default as Arc } from "./Arc.svelte";
+export { default as DisplayImage } from "./DisplayImage.svelte";
+export { default as Text } from "./Text.svelte";

package/components/{Drawables → drawables}/index.js

@@ -1,3 +1,5 @@
 export { default as Rectangle } from "./Rectangle.svelte";
 export { default as Circle } from "./Circle.svelte";
 export { default as Arc } from "./Arc.svelte";
+export { default as DisplayImage } from "./DisplayImage.svelte";
+export { default as Text } from "./Text.svelte";

package/components/motions.d.ts

@@ -19,7 +19,7 @@ export declare class Timing {
         stop: () => boolean;
         set(this: void, value: number): void;
         update(this: void, updater: import("svelte/store").Updater<number>): void;
-        subscribe(this: void, run: import("svelte/store").Subscriber<number>, invalidate?: (value?: number) => void): import("svelte/store").Unsubscriber;
+        subscribe(this: void, run: import("svelte/store").Subscriber<number>, invalidate?: ((value?: number | undefined) => void) | undefined): import("svelte/store").Unsubscriber;
     };
     update(delta: number): void;
 }

package/components/resources/images.d.ts

@@ -0,0 +1 @@
+export declare const resolve: (src: any) => HTMLImageElement;

package/components/resources/images.js

@@ -0,0 +1,9 @@
+let list = new Map();
+export const resolve = function (src) {
+    if (list.has(src))
+        return list.get(src);
+    let img = new Image();
+    img.src = src;
+    list.set(src, img);
+    return img;
+};

package/drawables.d.ts

@@ -0,0 +1 @@
+export * from "./components/drawables/index";

package/drawables.js

@@ -0,0 +1 @@
+export * from "./components/drawables/index";

package/index.d.ts

@@ -1,4 +1,6 @@
 export { default as Game } from "./components/Game.svelte";
 export { default as Layer } from "./components/Layer.svelte";
 export { default as GameObject } from "./components/GameObject.svelte";
-export * as Drawables from "./components/Drawables/index";
+export * as drawables from "./components/drawables/index";
+export { setupDrawable, getGame } from "./setup";
+export { resolve as resolveImage } from "./components/resources/images";

package/index.js

@@ -1,4 +1,6 @@
 export { default as Game } from "./components/Game.svelte";
 export { default as Layer } from "./components/Layer.svelte";
 export { default as GameObject } from "./components/GameObject.svelte";
-export * as Drawables from "./components/Drawables/index";
+export * as drawables from "./components/drawables/index";
+export { setupDrawable, getGame } from "./setup";
+export { resolve as resolveImage } from "./components/resources/images";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@hi-ashleyj/llama",
   "description": "A (Very Incomplete) 2D Canvas Game Engine powered by Svelte",
-  "version": "0.2.1",
+  "version": "0.3.1",
   "type": "module",
   "repository": {
     "type": "git",
@@ -16,6 +16,7 @@
   "devDependencies": {
     "@sveltejs/adapter-static": "next",
     "@sveltejs/kit": "next",
+    "@sveltejs/package": "*",
     "svelte": "^3.44.0",
     "svelte-preprocess": "^4.10.7",
     "svelte2tsx": "^0.5.12",
@@ -24,16 +25,21 @@
   },
   "exports": {
     "./package.json": "./package.json",
-    "./Drawables": "./Drawables.js",
-    "./components/Drawables/Arc.svelte": "./components/Drawables/Arc.svelte",
-    "./components/Drawables/Circle.svelte": "./components/Drawables/Circle.svelte",
-    "./components/Drawables/Rectangle.svelte": "./components/Drawables/Rectangle.svelte",
-    "./components/Drawables": "./components/Drawables/index.js",
     "./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/Rectangle.svelte": "./components/drawables/Rectangle.svelte",
+    "./components/drawables/Text.svelte": "./components/drawables/Text.svelte",
+    "./components/drawables": "./components/drawables/index.js",
     "./components/motions": "./components/motions.js",
+    "./components/resources/images": "./components/resources/images.js",
+    "./drawables": "./drawables.js",
     ".": "./index.js",
+    "./resources": "./resources.js",
     "./setup": "./setup.js"
   },
   "svelte": "./index.js"

package/resources.d.ts

@@ -0,0 +1 @@
+export { default as images } from "./components/resources/images";

package/resources.js

@@ -0,0 +1 @@
+export { default as images } from "./components/resources/images";

package/types/contexts.d.ts

@@ -1,12 +1,20 @@
 import { Writable } from 'svelte/store';
 import { Timing } from "../components/motions";
+import { Controller } from "../components/controller";
 
 export type GameContext = { 
     assign: (draw: Function) => () => any, 
     width: Writable<number>, 
     height: Writable<number>, 
     background: Writable<string>,
-    createTimer: Timing["create"]
+    createTimer: Timing["create"],
+    onKeyboardEvent: Controller["on"],
+    isKeyboardPressed: Controller["isPressed"],
+    getKeyboardStore: Controller["getStore"],
+    onFrame: (callback: Function) => () => any,
+    onBeforeFrame: (callback: Function) => () => any,
+    onAfterFrame: (callback: Function) => () => any,
+
 };
 
 export type LayerContext = { 

package/Drawables.d.ts

@@ -1 +0,0 @@
-export * from "./components/Drawables/index";

package/Drawables.js

@@ -1 +0,0 @@
-export * from "./components/Drawables/index";