@hi-ashleyj/llama 0.2.0 → 0.3.0

package/components/Game.svelte

@@ -0,0 +1,99 @@
+<script>import { writable } from "svelte/store";
+import { onMount } from "svelte";
+import { setupGame } from "../setup";
+import { Timing } from "./motions";
+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;
+}
+$: {
+    $heightStore = height;
+}
+$: {
+    $backgroundStore = background;
+}
+const layers = new Set();
+const draw = function (delta, time) {
+    for (let layer of layers) {
+        layer(delta, time);
+    }
+};
+const assign = function (layerDraw) {
+    layers.add(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),
+    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;
+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();
+});
+</script>
+
+<div class="game" style:background-color={background}>
+    <slot />
+</div>
+
+<style>
+    .game {
+        position: relative;
+        width: 100%;
+        height: 100%;
+        padding: 0;
+        margin: 0;
+    }
+</style>

package/components/Game.svelte.d.ts

@@ -0,0 +1,23 @@
+import { SvelteComponentTyped } from "svelte";
+import type { GameContext } from "../types";
+declare const __propDef: {
+    props: {
+        width?: number | undefined;
+        height?: number | undefined;
+        background?: string | undefined;
+        context?: GameContext | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export declare type GameProps = typeof __propDef.props;
+export declare type GameEvents = typeof __propDef.events;
+export declare type GameSlots = typeof __propDef.slots;
+export default class Game extends SvelteComponentTyped<GameProps, GameEvents, GameSlots> {
+    get context(): GameContext;
+}
+export {};

package/components/GameObject.svelte

@@ -0,0 +1,24 @@
+<script>import { setupDrawable } from "../setup";
+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;
+$: ax = (centered) ? x - (w / 2) : x;
+$: ay = (centered) ? y - (h / 2) : y;
+const targets = new Set();
+const assign = function (callable) {
+    targets.add(callable);
+    return () => { targets.delete(callable); };
+};
+const draw = function ({ width, height, ctx }) {
+    targets.forEach(f => f({ width, height, ctx }, { x: ax, y: ay, w, h }));
+};
+setupDrawable({ assign, draw });
+</script>
+
+<slot />

package/components/GameObject.svelte.d.ts

@@ -0,0 +1,25 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        x?: number | undefined;
+        y?: number | undefined;
+        w?: number | undefined;
+        h?: number | undefined;
+        /**
+             * FALSE = ANCHOR TOP LEFT
+             * TRUE = ANCHOR CENTER
+             */ centered?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export declare type GameObjectProps = typeof __propDef.props;
+export declare type GameObjectEvents = typeof __propDef.events;
+export declare type GameObjectSlots = typeof __propDef.slots;
+export default class GameObject extends SvelteComponentTyped<GameObjectProps, GameObjectEvents, GameObjectSlots> {
+}
+export {};

package/components/Layer.svelte

@@ -0,0 +1,33 @@
+<script>import { setupLayer } from "../setup";
+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
+}).game;
+</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/Layer.svelte.d.ts

@@ -0,0 +1,18 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        zIndex?: number | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export declare type LayerProps = typeof __propDef.props;
+export declare type LayerEvents = typeof __propDef.events;
+export declare type LayerSlots = typeof __propDef.slots;
+export default class Layer extends SvelteComponentTyped<LayerProps, LayerEvents, LayerSlots> {
+}
+export {};

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/Arc.svelte

@@ -0,0 +1,23 @@
+<script>import { setupDrawable } from "../../setup";
+export let fill = null;
+export let stroke = 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) {
+        ctx.strokeStyle = stroke;
+        ctx.stroke();
+    }
+};
+setupDrawable({ draw });
+</script>

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

@@ -0,0 +1,19 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        fill?: string | null | undefined;
+        stroke?: string | null | undefined;
+        startAngle: number;
+        endAngle: number;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type ArcProps = typeof __propDef.props;
+export declare type ArcEvents = typeof __propDef.events;
+export declare type ArcSlots = typeof __propDef.slots;
+export default class Arc extends SvelteComponentTyped<ArcProps, ArcEvents, ArcSlots> {
+}
+export {};

package/components/drawables/Circle.svelte

@@ -0,0 +1,19 @@
+<script>import { setupDrawable } from "../../setup";
+export let fill = null;
+export let stroke = 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) {
+        ctx.strokeStyle = stroke;
+        ctx.stroke();
+    }
+};
+setupDrawable({ draw });
+</script>

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

@@ -0,0 +1,17 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        fill?: string | null | undefined;
+        stroke?: string | null | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type CircleProps = typeof __propDef.props;
+export declare type CircleEvents = typeof __propDef.events;
+export declare type CircleSlots = typeof __propDef.slots;
+export default class Circle extends SvelteComponentTyped<CircleProps, CircleEvents, CircleSlots> {
+}
+export {};

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/Rectangle.svelte

@@ -0,0 +1,17 @@
+<script>import { setupDrawable } from "../../setup";
+export let fill = null;
+export let stroke = 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) {
+        ctx.strokeStyle = stroke;
+        ctx.stroke();
+    }
+};
+setupDrawable({ draw });
+</script>

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

@@ -0,0 +1,17 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        fill?: string | null | undefined;
+        stroke?: string | null | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type RectangleProps = typeof __propDef.props;
+export declare type RectangleEvents = typeof __propDef.events;
+export declare type RectangleSlots = typeof __propDef.slots;
+export default class Rectangle extends SvelteComponentTyped<RectangleProps, RectangleEvents, RectangleSlots> {
+}
+export {};

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/index.d.ts

@@ -0,0 +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/index.js

@@ -0,0 +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

@@ -0,0 +1,25 @@
+import type { Writable } from "svelte/store";
+export declare class Timing {
+    constructor();
+    targets: Set<{
+        current: number;
+        duration: number;
+        repeats: number;
+        store: Writable<number | null>;
+    }>;
+    /**
+     * Used to create a store whose value changes based on the total delta time.
+     * Duration is in MS
+     * Use 0 for repeats for infinite
+     */
+    create({ duration, repeats }: {
+        duration: number;
+        repeats: number;
+    }): {
+        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 | undefined) => void) | undefined): import("svelte/store").Unsubscriber;
+    };
+    update(delta: number): void;
+}

package/components/motions.js

@@ -0,0 +1,39 @@
+import { writable } from "svelte/store";
+export class Timing {
+    constructor() {
+        this.targets = new Set();
+    }
+    targets;
+    /**
+     * Used to create a store whose value changes based on the total delta time.
+     * Duration is in MS
+     * Use 0 for repeats for infinite
+     */
+    create({ duration, repeats }) {
+        let store = { ...writable(0), stop: () => this.targets.delete(out) };
+        let out = {
+            current: 0,
+            duration,
+            repeats,
+            store
+        };
+        this.targets.add(out);
+        return store;
+    }
+    update(delta) {
+        this.targets.forEach((t, ignored, set) => {
+            if (t.current < 0) {
+                t.store.set(null);
+                set.delete(t);
+                return;
+            }
+            t.current += delta;
+            if (t.repeats > 0 && t.current > t.duration * t.repeats) {
+                t.current = -1;
+                t.store.set(1);
+                return;
+            }
+            t.store.set((t.current / t.duration) % 1);
+        });
+    }
+}

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.0",
+  "version": "0.3.0",
   "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";