@hi-ashleyj/llama 0.6.0 → 0.8.0

package/components/Game.svelte

@@ -3,6 +3,7 @@ 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";
@@ -24,6 +25,8 @@ $: {
 const layers = new Set();
 const draw = function (delta, time) {
     for (let layer of layers) {
+        if (layer.isStatic())
+            continue;
         layer.draw(delta, time);
     }
 };
@@ -33,6 +36,7 @@ const assign = function (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();
@@ -47,6 +51,10 @@ export const context = {
     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);
@@ -82,13 +90,21 @@ const loop = function (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;

package/components/Layer.svelte

@@ -1,6 +1,8 @@
 <script>import { setupLayer, getGame } from "../setup";
 import { onMount } from "svelte";
 export let zIndex = 0;
+export let staticMode = false;
+let hasRenderedOnce = false;
 let canvas;
 $: ctx = (typeof canvas !== "undefined") ? canvas.getContext("2d") : null;
 let targets = new Set();
@@ -15,10 +17,18 @@ let register = setupLayer({
     assign: (ctx) => {
         targets.add(ctx);
         return () => { targets.delete(ctx); };
+    },
+    requestFrame: () => {
+        if (!staticMode)
+            return;
+        draw();
     }
 });
 onMount(() => {
-    return register({ draw });
+    return register({ draw, isStatic: () => { if (!hasRenderedOnce) {
+            hasRenderedOnce = true;
+            draw();
+        } return staticMode; } });
 });
 </script>
 

package/components/Layer.svelte.d.ts

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

package/components/mouse/MouseClickable.svelte

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

package/components/mouse/MouseClickable.svelte.d.ts

@@ -0,0 +1,21 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        click: CustomEvent<any>;
+        left: CustomEvent<any>;
+        leftorright: CustomEvent<any>;
+        right: CustomEvent<any>;
+        middle: CustomEvent<any>;
+        other: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type MouseClickableProps = typeof __propDef.props;
+export type MouseClickableEvents = typeof __propDef.events;
+export type MouseClickableSlots = typeof __propDef.slots;
+export default class MouseClickable extends SvelteComponentTyped<MouseClickableProps, MouseClickableEvents, MouseClickableSlots> {
+}
+export {};

package/components/mouse/MouseEventArea.svelte

@@ -0,0 +1,55 @@
+<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();
+let mouseX = context.getMouseStore("mouse_x");
+let mouseY = context.getMouseStore("mouse_y");
+export let hover = false;
+const draw = function (_info, { x, y, w, h }) {
+    tx = x;
+    ty = y;
+    tw = w;
+    th = h;
+    if ($mouseX < tx || $mouseX > tx + tw)
+        return hover = false;
+    if ($mouseY < ty || $mouseY > ty + th)
+        return hover = false;
+    hover = true;
+};
+let register = setupDrawable({});
+onMount(() => {
+    let event = context.onMouseEvent(null, MOUSE_ACTION.DOWN, ({ key }) => {
+        if ($mouseX < tx || $mouseX > tx + tw)
+            return;
+        if ($mouseY < ty || $mouseY > 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>

package/components/mouse/MouseEventArea.svelte.d.ts

@@ -0,0 +1,23 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        hover?: boolean | undefined;
+    };
+    events: {
+        click: CustomEvent<any>;
+        left: CustomEvent<any>;
+        leftorright: CustomEvent<any>;
+        right: CustomEvent<any>;
+        middle: CustomEvent<any>;
+        other: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type MouseEventAreaProps = typeof __propDef.props;
+export type MouseEventAreaEvents = typeof __propDef.events;
+export type MouseEventAreaSlots = typeof __propDef.slots;
+export default class MouseEventArea extends SvelteComponentTyped<MouseEventAreaProps, MouseEventAreaEvents, MouseEventAreaSlots> {
+}
+export {};

package/components/mouse/MouseLeftClick.svelte

@@ -0,0 +1,33 @@
+<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("mouse_left", MOUSE_ACTION.DOWN, () => {
+        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");
+    });
+    let deregister = register({ draw });
+    return () => {
+        event();
+        deregister();
+    };
+});
+</script>

package/components/mouse/MouseLeftClick.svelte.d.ts

@@ -0,0 +1,16 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        click: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type MouseLeftClickProps = typeof __propDef.props;
+export type MouseLeftClickEvents = typeof __propDef.events;
+export type MouseLeftClickSlots = typeof __propDef.slots;
+export default class MouseLeftClick extends SvelteComponentTyped<MouseLeftClickProps, MouseLeftClickEvents, MouseLeftClickSlots> {
+}
+export {};

package/components/mouse.d.ts

@@ -0,0 +1,33 @@
+import type { Writable } from "svelte/store";
+export declare enum MOUSE_ACTION {
+    DOWN = "down",
+    UP = "up",
+    MOVE = "move"
+}
+type MouseEventBoolean = "mouse_left" | "mouse_middle" | "mouse_right";
+type MouseEventNumber = "mouse_x" | "mouse_y";
+export declare class Mouse {
+    constructor();
+    events: Set<{
+        key: string | null;
+        action: MOUSE_ACTION;
+        call: (e: {
+            key: string | null;
+            action: MOUSE_ACTION;
+        }) => any | void;
+    }>;
+    mouseState: Map<MouseEventBoolean | MouseEventNumber, boolean | number>;
+    mouseStores: Map<MouseEventBoolean | MouseEventNumber, Writable<boolean | number>>;
+    innerWidth: number;
+    innerHeight: number;
+    start(): void;
+    on(key: MouseEventBoolean | MouseEventNumber | null, action: MOUSE_ACTION, callback: (e: {
+        key: string | null;
+        action: MOUSE_ACTION;
+    }) => any | void): () => any;
+    getStore<T extends (MouseEventBoolean | MouseEventNumber)>(key: T): Writable<T extends MouseEventNumber ? number : boolean>;
+    isPressed(key: MouseEventBoolean): boolean;
+    getPosition(key: MouseEventNumber): number;
+    changeWindowDimensions(width: number, height: number): void;
+}
+export {};

package/components/mouse.js

@@ -0,0 +1,143 @@
+import { writable } from "svelte/store";
+export var MOUSE_ACTION;
+(function (MOUSE_ACTION) {
+    MOUSE_ACTION["DOWN"] = "down";
+    MOUSE_ACTION["UP"] = "up";
+    // CLICK = "click",
+    MOUSE_ACTION["MOVE"] = "move";
+})(MOUSE_ACTION || (MOUSE_ACTION = {}));
+export class Mouse {
+    constructor() {
+        this.events = new Set();
+        this.mouseState = new Map();
+        this.mouseStores = new Map();
+    }
+    events;
+    mouseState;
+    mouseStores;
+    innerWidth = 0;
+    innerHeight = 0;
+    start() {
+        window.addEventListener("pointerdown", (e) => {
+            e.preventDefault();
+            let eKeyLowCase;
+            switch (e.button) {
+                case (0): {
+                    eKeyLowCase = "mouse_left";
+                    break;
+                }
+                case (2): {
+                    eKeyLowCase = "mouse_right";
+                    break;
+                }
+                case (1): {
+                    eKeyLowCase = "mouse_middle";
+                    break;
+                }
+                default: return;
+            }
+            this.mouseState.set(eKeyLowCase, true);
+            this.events.forEach(({ key, action, call }) => {
+                if ((key === eKeyLowCase || key === null) && action === MOUSE_ACTION.DOWN)
+                    call({ key: eKeyLowCase, action });
+            });
+            if (this.mouseStores.has(eKeyLowCase)) {
+                this.mouseStores.get(eKeyLowCase)?.set(true);
+            }
+        });
+        window.addEventListener("pointerup", (e) => {
+            e.preventDefault();
+            let eKeyLowCase;
+            switch (e.button) {
+                case (0): {
+                    eKeyLowCase = "mouse_left";
+                    break;
+                }
+                case (1): {
+                    eKeyLowCase = "mouse_right";
+                    break;
+                }
+                case (2): {
+                    eKeyLowCase = "mouse_middle";
+                    break;
+                }
+                default: return;
+            }
+            this.mouseState.set(eKeyLowCase, false);
+            this.events.forEach(({ key, action, call }) => {
+                if ((key === eKeyLowCase || key === null) && action === MOUSE_ACTION.UP)
+                    call({ key: eKeyLowCase, action });
+            });
+            if (this.mouseStores.has(eKeyLowCase)) {
+                this.mouseStores.get(eKeyLowCase)?.set(false);
+            }
+        });
+        window.addEventListener("pointermove", (e) => {
+            let rawX = e.offsetX;
+            let rawY = e.offsetY;
+            let adjustedX;
+            let adjustedY;
+            if (this.innerWidth / this.innerHeight > 16 / 9) {
+                // TODO: De Hard-code this
+                const scaleFactor = 1080 / this.innerHeight;
+                const realCanvasSize = 1920 / scaleFactor;
+                adjustedY = rawY * scaleFactor;
+                adjustedX = (rawX - ((this.innerWidth - realCanvasSize) / 2)) * scaleFactor;
+            }
+            else {
+                // TODO: De Hard-code this
+                const scaleFactor = 1920 / this.innerWidth;
+                const realCanvasSize = 1080 / scaleFactor;
+                adjustedX = rawX * scaleFactor;
+                adjustedY = (rawY - ((this.innerHeight - realCanvasSize) / 2)) * scaleFactor;
+            }
+            this.mouseState.set("mouse_x", adjustedX);
+            this.mouseState.set("mouse_y", adjustedY);
+            this.events.forEach(({ key, action, call }) => {
+                if ((key === "mouse_x" || key === null) && action === MOUSE_ACTION.MOVE)
+                    call({ key: "mouse_x", action });
+                if ((key === "mouse_y" || key === null) && action === MOUSE_ACTION.MOVE)
+                    call({ key: "mouse_y", action });
+            });
+            if (this.mouseStores.has("mouse_x")) {
+                this.mouseStores.get("mouse_x")?.set(adjustedX);
+            }
+            if (this.mouseStores.has("mouse_y")) {
+                this.mouseStores.get("mouse_y")?.set(adjustedY);
+            }
+        });
+        window.addEventListener("contextmenu", (e) => {
+            e.preventDefault();
+        });
+    }
+    on(key, action, callback) {
+        let obj = { key, action, call: callback };
+        this.events.add(obj);
+        return () => {
+            this.events.delete(obj);
+        };
+    }
+    getStore(key) {
+        if (this.mouseStores.has(key)) {
+            return this.mouseStores.get(key);
+        }
+        if (key === "mouse_x" || key === "mouse_y") {
+            let wr = writable(this.mouseState.get(key) ?? 0);
+            this.mouseStores.set(key, wr);
+            return wr;
+        }
+        let wr = writable(this.mouseState.get(key) ?? false);
+        this.mouseStores.set(key, wr);
+        return wr;
+    }
+    isPressed(key) {
+        return this.mouseState.get(key) ?? false;
+    }
+    getPosition(key) {
+        return this.mouseState.get(key) ?? 0;
+    }
+    changeWindowDimensions(width, height) {
+        this.innerHeight = height;
+        this.innerWidth = width;
+    }
+}

package/index.d.ts

@@ -1,6 +1,12 @@
 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 { default as MouseLeftClick } from "./components/mouse/MouseLeftClick.svelte";
+export { default as MouseClickable } from "./components/mouse/MouseClickable.svelte";
+export { default as MouseEventArea } from "./components/mouse/MouseEventArea.svelte";
 export * as drawables from "./components/drawables/index";
-export { setupDrawable, getGame } from "./setup";
+export { setupDrawable, getGame, getLayer, getTriggerLayerRender } from "./setup";
 export { resolve as resolveImage } from "./components/resources/images";
+export { CONTROLLER_ACTION } from "./components/controller";
+export { MOUSE_ACTION } from "./components/mouse";
+export type { GameContext, DrawableContext, DrawableFunction, LayerContext } from "./types/index";

package/index.js

@@ -1,6 +1,11 @@
 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 { default as MouseLeftClick } from "./components/mouse/MouseLeftClick.svelte";
+export { default as MouseClickable } from "./components/mouse/MouseClickable.svelte";
+export { default as MouseEventArea } from "./components/mouse/MouseEventArea.svelte";
 export * as drawables from "./components/drawables/index";
-export { setupDrawable, getGame } from "./setup";
+export { setupDrawable, getGame, getLayer, getTriggerLayerRender } from "./setup";
 export { resolve as resolveImage } from "./components/resources/images";
+export { CONTROLLER_ACTION } from "./components/controller";
+export { MOUSE_ACTION } from "./components/mouse";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@hi-ashleyj/llama",
   "description": "A (Very Incomplete) 2D Canvas Game Engine powered by Svelte",
-  "version": "0.6.0",
+  "version": "0.8.0",
   "type": "module",
   "repository": {
     "type": "git",
@@ -38,6 +38,10 @@
     "./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",

package/setup.d.ts

@@ -1,8 +1,11 @@
 import type { GameContext, LayerContext, DrawableContext, DrawableFunction } from "./types";
 export declare const setupGame: (context: GameContext) => void;
-export declare const setupLayer: (context: LayerContext) => ({ draw }: {
+export declare const setupLayer: (context: LayerContext) => ({ draw, isStatic }: {
     draw: () => any;
+    isStatic: () => boolean;
 }) => () => any;
+export declare const getLayer: () => LayerContext;
+export declare const getTriggerLayerRender: () => () => any;
 export declare const setupDrawable: ({ assign }: Partial<DrawableContext>) => ({ draw }: {
     draw: () => DrawableFunction;
 }) => () => any;

package/setup.js

@@ -2,6 +2,7 @@ import { getContext, setContext } from 'svelte';
 const GAME = Symbol();
 const LAYER = Symbol();
 const DRAWABLE = Symbol();
+const BOX = Symbol();
 export const setupGame = function (context) {
     if (getContext(GAME)) {
         throw new Error("Cannot Mount Game inside a Game");
@@ -21,6 +22,16 @@ export const setupLayer = function (context) {
         return game.assign(ctx);
     };
 };
+export const getLayer = function () {
+    let layer = getContext(LAYER);
+    if (!layer)
+        throw new Error("Layer context does not exist!");
+    return layer;
+};
+export const getTriggerLayerRender = function () {
+    let layer = getLayer();
+    return layer.requestFrame;
+};
 export const setupDrawable = function ({ assign }) {
     let parent = getContext(DRAWABLE);
     if (assign) {

package/types/contexts.d.ts

@@ -1,9 +1,10 @@
 import { Writable } from 'svelte/store';
 import { Timing } from "../components/motions";
 import { Controller } from "../components/controller";
+import { Mouse } from "../components/mouse";
 
 export type GameContext = { 
-    assign: (context: { draw: Function }) => () => any,
+    assign: (context: { draw: Function, isStatic: () => boolean }) => () => any,
     width: Writable<number>, 
     height: Writable<number>, 
     background: Writable<string>,
@@ -12,6 +13,10 @@ export type GameContext = {
     onKeyboardEvent: Controller["on"],
     isKeyboardPressed: Controller["isPressed"],
     getKeyboardStore: Controller["getStore"],
+    onMouseEvent: Mouse["on"],
+    isMousePressed: Mouse["isPressed"],
+    getMousePosition: Mouse["getPosition"],
+    getMouseStore: Mouse["getStore"],
     onFrame: (callback: Function) => () => any,
     onBeforeFrame: (callback: Function) => () => any,
     onAfterFrame: (callback: Function) => () => any,
@@ -20,6 +25,7 @@ export type GameContext = {
 
 export type LayerContext = {
     assign: (context: { draw: Function }) => () => any
+    requestFrame: () => any;
 };
 
 export type DrawableFunction = ({}: { width: number, height: number, ctx: CanvasRenderingContext2D }, ...more: any[] ) => any;