@hi-ashleyj/llama 0.1.0 → 0.2.1

package/Drawables.d.ts

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

package/Drawables.js

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

package/README.md

@@ -0,0 +1,6 @@
+# Llama - A 2D Canvas game engine built with Svelte + SvelteKit
+This thing isn't ready - and probably will never be fully done. This is just as far as I've gotten.  
+
+## Seriously, don't use this yet.
+
+

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 / 2, y + r / 2, r, sd, ed);
+    ctx.lineTo(x + r / 2, y + r / 2);
+    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;
+        stroke?: string | null;
+        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 / 2, y + r / 2, 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;
+        stroke?: string | null;
+    };
+    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/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;
+        stroke?: string | null;
+    };
+    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/index.d.ts

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

package/components/Drawables/index.js

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

package/components/Game.svelte

@@ -0,0 +1,75 @@
+<script>import { writable } from "svelte/store";
+import { onMount, createEventDispatcher } from "svelte";
+import { setupGame } from "../setup";
+import { Timing } from "./motions";
+const dispatch = createEventDispatcher();
+export let width = 1920;
+export let height = 1080;
+export let background = "#000000";
+const widthStore = writable(1920);
+const heightStore = writable(1080);
+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();
+export const context = {
+    width: widthStore,
+    height: heightStore,
+    background: backgroundStore,
+    assign,
+    createTimer: timing.create.bind(timing)
+};
+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
+    dispatch("beforeframe", { delta, time });
+    timing.update(delta);
+    dispatch("frame", { delta, time });
+    draw(delta, time);
+    dispatch("afterframe", { delta, time });
+    requestAnimationFrame(loop);
+    last = time;
+};
+onMount(() => {
+    requestAnimationFrame(loop);
+});
+</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,27 @@
+import { SvelteComponentTyped } from "svelte";
+import type { GameContext } from "../types/contexts";
+declare const __propDef: {
+    props: {
+        width?: number;
+        height?: number;
+        background?: string;
+        context?: GameContext;
+    };
+    events: {
+        beforeframe: CustomEvent<any>;
+        frame: CustomEvent<any>;
+        afterframe: CustomEvent<any>;
+    } & {
+        [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;
+        y?: number;
+        w?: number;
+        h?: number;
+        /**
+             * FALSE = ANCHOR TOP LEFT
+             * TRUE = ANCHOR CENTER
+             */ centered?: boolean;
+    };
+    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;
+    };
+    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/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) => void): 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/index.d.ts

@@ -0,0 +1,4 @@
+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";

package/index.js

@@ -0,0 +1,4 @@
+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";

package/package.json

@@ -1,15 +1,8 @@
 {
   "name": "@hi-ashleyj/llama",
-  "description": "A (Bad) 2D Canvas Game Engine",
-  "version": "0.1.0",
+  "description": "A (Very Incomplete) 2D Canvas Game Engine powered by Svelte",
+  "version": "0.2.1",
   "type": "module",
-  "source": "src/main.ts",
-  "main": "dist/main.js",
-  "types": "dist/main.d.ts",
-  "scripts": {
-    "build": "parcel build",
-    "postversion": "npm run build"
-  },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/hi-ashleyj/llama-game-engine.git"
@@ -21,9 +14,27 @@
   },
   "homepage": "https://github.com/hi-ashleyj/llama-game-engine#readme",
   "devDependencies": {
-    "@parcel/packager-ts": "^2.6.0",
-    "@parcel/transformer-typescript-types": "^2.6.0",
-    "parcel": "^2.6.0",
-    "typescript": "^4.7.2"
-  }
-}
+    "@sveltejs/adapter-static": "next",
+    "@sveltejs/kit": "next",
+    "svelte": "^3.44.0",
+    "svelte-preprocess": "^4.10.7",
+    "svelte2tsx": "^0.5.12",
+    "typescript": "^4.7.4",
+    "vite": "^3.0.0"
+  },
+  "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/motions": "./components/motions.js",
+    ".": "./index.js",
+    "./setup": "./setup.js"
+  },
+  "svelte": "./index.js"
+}

package/setup.d.ts

@@ -0,0 +1,9 @@
+import type { GameContext, LayerContext, DrawableContext } from "./types/contexts";
+export declare const setupGame: (context: GameContext) => void;
+export declare const setupLayer: (context: LayerContext) => {
+    game: GameContext;
+};
+export declare const setupDrawable: ({ assign, draw }: Partial<DrawableContext>) => {
+    game: GameContext;
+};
+export declare const getGame: () => GameContext;

package/setup.js

@@ -0,0 +1,42 @@
+import { getContext, setContext, onDestroy } from 'svelte';
+const GAME = Symbol();
+const LAYER = Symbol();
+const DRAWABLE = Symbol();
+export const setupGame = function (context) {
+    if (getContext(GAME)) {
+        throw new Error("Cannot Mount Game inside a Game");
+    }
+    setContext(GAME, context);
+};
+export const setupLayer = function (context) {
+    if (getContext(LAYER)) {
+        throw new Error("Cannot Mount Layer inside a Layer");
+    }
+    let game = getContext(GAME);
+    if (!game)
+        throw new Error("Layers must be inside a Game");
+    let remove = game.assign(context.draw);
+    onDestroy(() => {
+        remove();
+    });
+    setContext(LAYER, context);
+    return setupDrawable({ assign: context.assign, draw: context.draw });
+};
+export const setupDrawable = function ({ assign, draw }) {
+    let parent = getContext(DRAWABLE);
+    if (parent && draw) {
+        let remove = parent.assign(draw);
+        onDestroy(() => {
+            remove();
+        });
+    }
+    if (assign) {
+        setContext(DRAWABLE, { assign });
+    }
+    return {
+        game: getContext(GAME)
+    };
+};
+export const getGame = function () {
+    return getContext(GAME);
+};

package/types/contexts.d.ts

@@ -0,0 +1,22 @@
+import { Writable } from 'svelte/store';
+import { Timing } from "../components/motions";
+
+export type GameContext = { 
+    assign: (draw: Function) => () => any, 
+    width: Writable<number>, 
+    height: Writable<number>, 
+    background: Writable<string>,
+    createTimer: Timing["create"]
+};
+
+export type LayerContext = { 
+    assign: (draw: Function) => () => any, 
+    draw: () => any 
+};
+
+export type DrawableFunction = ({}: { width: number, height: number, ctx: CanvasRenderingContext2D }, ...more: any[] ) => any;
+
+export type DrawableContext = { 
+    assign: (draw: Function) => () => any, 
+    draw: DrawableFunction
+}

package/types/index.d.ts

@@ -0,0 +1 @@
+export * from "./contexts";