@hi-ashleyj/llama 0.9.0 → 0.10.0

package/README.md

@@ -3,4 +3,33 @@ This thing isn't ready - and probably will never be fully done. This is just as
 
 ## Seriously, don't use this yet.
 
+## A Good Starting point.
+I'd recommend starting with a sveltekit project configured with TS. That's what I use basically 100% of the time.  
+To get started:  
+
+```html
+/// +page.svelte
+<script lang="ts">
+
+    import { SensibleDefaultStyles, Game } from "@hi-ashleyj/llama";
+
+</script>
+
+// Auto-configure a wrapper and some global styles. Optional.
+<SensibleDefaultStyles> 
+
+    <Game>
+        
+    </Game>
+
+</SensibleDefaultStyles>
+
+<style>
+
+    @font-face {
+        // ...define fonts
+    }
+
+</style>
+```
 

package/dist/Game.svelte

@@ -0,0 +1,123 @@
+<script>import { writable } from "svelte/store";
+import { onMount } from "svelte";
+import { setupGame } from "./core-contexts.js";
+import { Timing } from "./controllers/motions.js";
+import { Keyboard } from "./controllers/keyboard.js";
+import { Mouse } from "./controllers/mouse.js";
+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 layerDrawables = /* @__PURE__ */ new Set();
+const layerAssignments = /* @__PURE__ */ new Map();
+const draw = function() {
+  for (let layer of layerDrawables) {
+    if (layer.isStatic())
+      continue;
+    layer.draw();
+  }
+};
+const assign = function(ctx, obj) {
+  layerDrawables.add(obj);
+  layerAssignments.set(obj.name, ctx);
+  return () => {
+    layerDrawables.delete(obj);
+    layerAssignments.delete(obj.name);
+  };
+};
+const timing = new Timing();
+const keyboard = new Keyboard();
+const mouse = new Mouse();
+const frameEvents = /* @__PURE__ */ new Set();
+const frameBeforeEvents = /* @__PURE__ */ new Set();
+const frameAfterEvents = /* @__PURE__ */ new Set();
+export const context = {
+  width: widthStore,
+  height: heightStore,
+  background: backgroundStore,
+  getLayerByName: (name) => layerAssignments.get(name) ?? null,
+  assign,
+  createTimer: timing.createTimer.bind(timing),
+  createBurst: timing.createBurst.bind(timing),
+  onKeyboardEvent: keyboard.on.bind(keyboard),
+  isKeyboardPressed: keyboard.isPressed.bind(keyboard),
+  getKeyboardStore: keyboard.getStore.bind(keyboard),
+  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 > 1e3) {
+    requestAnimationFrame(loop);
+    return last = time;
+  }
+  frameBeforeEvents.forEach((callback) => callback({ delta, time }));
+  timing.update(delta);
+  frameEvents.forEach((callback) => callback({ delta, time }));
+  draw();
+  frameAfterEvents.forEach((callback) => callback({ delta, time }));
+  requestAnimationFrame(loop);
+  last = time;
+};
+onMount(() => {
+  requestAnimationFrame(loop);
+  keyboard.start();
+  mouse.start();
+});
+let wiw = 0;
+let wih = 0;
+$: {
+  mouse.changeWindowDimensions(wiw, wih);
+}
+$: {
+  mouse.setHeight(height);
+}
+$: {
+  mouse.setWidth(width);
+}
+</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 → dist}/Game.svelte.d.ts

@@ -1,5 +1,5 @@
-import { SvelteComponentTyped } from "svelte";
-import type { GameContext } from "../types";
+import { SvelteComponent } from "svelte";
+import { type GameContext } from "./core-contexts.js";
 declare const __propDef: {
     props: {
         width?: number | undefined;
@@ -17,7 +17,7 @@ declare const __propDef: {
 export type GameProps = typeof __propDef.props;
 export type GameEvents = typeof __propDef.events;
 export type GameSlots = typeof __propDef.slots;
-export default class Game extends SvelteComponentTyped<GameProps, GameEvents, GameSlots> {
-    get context(): GameContext;
+export default class Game extends SvelteComponent<GameProps, GameEvents, GameSlots> {
+    get context(): any;
 }
 export {};

package/dist/GameObject.svelte

@@ -0,0 +1,38 @@
+<script>import { setupDrawable } from "./drawable.js";
+import { onMount } from "svelte";
+export let x = 0;
+export let y = 0;
+export let w = 0;
+export let h = 0;
+export let centered = false;
+export let opacity = 1;
+$:
+  ax = centered ? x - w / 2 : x;
+$:
+  ay = centered ? y - h / 2 : y;
+const targets = /* @__PURE__ */ 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 → dist}/GameObject.svelte.d.ts

@@ -1,4 +1,4 @@
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         x?: number | undefined;
@@ -21,6 +21,6 @@ declare const __propDef: {
 export type GameObjectProps = typeof __propDef.props;
 export type GameObjectEvents = typeof __propDef.events;
 export type GameObjectSlots = typeof __propDef.slots;
-export default class GameObject extends SvelteComponentTyped<GameObjectProps, GameObjectEvents, GameObjectSlots> {
+export default class GameObject extends SvelteComponent<GameObjectProps, GameObjectEvents, GameObjectSlots> {
 }
 export {};

package/dist/Layer.svelte

@@ -0,0 +1,58 @@
+<script>import { setupLayer, getGame } from "./core-contexts.js";
+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 = /* @__PURE__ */ new Set();
+const { width, height } = getGame();
+const draw = () => {
+  if (ctx === null)
+    return;
+  ctx.clearRect(0, 0, $width, $height);
+  targets.forEach((f) => f.draw({ width: $width, height: $height, ctx }));
+};
+let register = setupLayer({
+  assign: (ctx2) => {
+    targets.add(ctx2);
+    return () => {
+      targets.delete(ctx2);
+    };
+  },
+  requestFrame: () => {
+    if (!staticMode)
+      return;
+    shouldRenderNextFrame = true;
+  }
+});
+export let name;
+onMount(() => {
+  return register({
+    draw,
+    isStatic: () => {
+      if (shouldRenderNextFrame) {
+        shouldRenderNextFrame = false;
+        draw();
+      }
+      return staticMode;
+    },
+    name
+  });
+});
+</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 → dist}/Layer.svelte.d.ts

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

package/dist/controllers/MouseClickable.svelte

@@ -0,0 +1,50 @@
+<script>import { getGame } from "../core-contexts.js";
+import { setupDrawable } from "../drawable.js";
+import { onMount, createEventDispatcher } from "svelte";
+import { MOUSE_ACTION } from "./mouse.js";
+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 → dist/controllers}/MouseClickable.svelte.d.ts

@@ -1,4 +1,4 @@
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: Record<string, never>;
     events: {
@@ -16,6 +16,6 @@ declare const __propDef: {
 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 default class MouseClickable extends SvelteComponent<MouseClickableProps, MouseClickableEvents, MouseClickableSlots> {
 }
 export {};

package/dist/controllers/MouseEventArea.svelte

@@ -0,0 +1,58 @@
+<script>import { getGame } from "../core-contexts.js";
+import { setupDrawable } from "../drawable.js";
+import { onMount, createEventDispatcher } from "svelte";
+import { MOUSE_ACTION } from "./mouse.js";
+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>
+
+<slot {hover} />

package/{components/mouse → dist/controllers}/MouseEventArea.svelte.d.ts

@@ -1,4 +1,4 @@
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         hover?: boolean | undefined;
@@ -13,11 +13,15 @@ declare const __propDef: {
     } & {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {};
+    slots: {
+        default: {
+            hover: boolean;
+        };
+    };
 };
 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 default class MouseEventArea extends SvelteComponent<MouseEventAreaProps, MouseEventAreaEvents, MouseEventAreaSlots> {
 }
 export {};

package/{components/controller.d.ts → dist/controllers/keyboard.d.ts}

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

package/{components/controller.js → dist/controllers/keyboard.js}

@@ -1,11 +1,11 @@
 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 {
+export var KEYBOARD_ACTION;
+(function (KEYBOARD_ACTION) {
+    KEYBOARD_ACTION["DOWN"] = "down";
+    KEYBOARD_ACTION["UP"] = "up";
+    KEYBOARD_ACTION["PRESS"] = "press";
+})(KEYBOARD_ACTION || (KEYBOARD_ACTION = {}));
+export class Keyboard {
     constructor() {
         this.events = new Set();
         this.keyState = new Map();
@@ -19,7 +19,7 @@ export class Controller {
             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)
+                if ((key === eklc || key === null) && action === KEYBOARD_ACTION.DOWN)
                     call({ key: eklc, action });
             });
             if (this.keyStores.has(eklc)) {
@@ -30,7 +30,7 @@ export class Controller {
             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)
+                if ((key === eklc || key === null) && action === KEYBOARD_ACTION.UP)
                     call({ key: eklc, action });
             });
             if (this.keyStores.has(eklc)) {

package/{components → dist/controllers}/mouse.d.ts

@@ -5,7 +5,7 @@ export declare enum MOUSE_ACTION {
     MOVE = "move"
 }
 type MouseEventBoolean = "mouse_left" | "mouse_middle" | "mouse_right";
-type MouseEventNumber = "mouse_x" | "mouse_y";
+type MouseEventNumber = "mouse_x" | "mouse_y" | "mouse_scroll_y" | "mouse_scroll_x";
 export declare class Mouse {
     constructor();
     events: Set<{
@@ -20,6 +20,8 @@ export declare class Mouse {
     mouseStores: Map<MouseEventBoolean | MouseEventNumber, Writable<boolean | number>>;
     innerWidth: number;
     innerHeight: number;
+    drawWidth: number;
+    drawHeight: number;
     start(): void;
     on(key: MouseEventBoolean | MouseEventNumber | null, action: MOUSE_ACTION, callback: (e: {
         key: string | null;
@@ -29,5 +31,7 @@ export declare class Mouse {
     isPressed(key: MouseEventBoolean): boolean;
     getPosition(key: MouseEventNumber): number;
     changeWindowDimensions(width: number, height: number): void;
+    setWidth(width: number): void;
+    setHeight(height: number): void;
 }
 export {};

package/{components → dist/controllers}/mouse.js

@@ -3,8 +3,8 @@ export var MOUSE_ACTION;
 (function (MOUSE_ACTION) {
     MOUSE_ACTION["DOWN"] = "down";
     MOUSE_ACTION["UP"] = "up";
-    // CLICK = "click",
     MOUSE_ACTION["MOVE"] = "move";
+    // CLICK = "click",
 })(MOUSE_ACTION || (MOUSE_ACTION = {}));
 export class Mouse {
     constructor() {
@@ -17,6 +17,8 @@ export class Mouse {
     mouseStores;
     innerWidth = 0;
     innerHeight = 0;
+    drawWidth = 1920;
+    drawHeight = 1080;
     start() {
         window.addEventListener("pointerdown", (e) => {
             e.preventDefault();
@@ -79,15 +81,15 @@ export class Mouse {
             let adjustedY;
             if (this.innerWidth / this.innerHeight > 16 / 9) {
                 // TODO: De Hard-code this
-                const scaleFactor = 1080 / this.innerHeight;
-                const realCanvasSize = 1920 / scaleFactor;
+                const scaleFactor = this.drawHeight / this.innerHeight;
+                const realCanvasSize = this.drawWidth / 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;
+                const scaleFactor = this.drawWidth / this.innerWidth;
+                const realCanvasSize = this.drawHeight / scaleFactor;
                 adjustedX = rawX * scaleFactor;
                 adjustedY = (rawY - ((this.innerHeight - realCanvasSize) / 2)) * scaleFactor;
             }
@@ -106,6 +108,16 @@ export class Mouse {
                 this.mouseStores.get("mouse_y")?.set(adjustedY);
             }
         });
+        window.addEventListener("wheel", (e) => {
+            let rawX = e.deltaX;
+            let rawY = e.deltaY;
+            this.events.forEach(({ key, action, call }) => {
+                if ((key === "mouse_scroll_x" || key === null) && action === MOUSE_ACTION.MOVE && Math.abs(rawX) > 0)
+                    call({ key: "mouse_scroll_x", action });
+                if ((key === "mouse_scroll_y" || key === null) && action === MOUSE_ACTION.MOVE && Math.abs(rawY) > 0)
+                    call({ key: "mouse_scroll_y", action });
+            });
+        });
         window.addEventListener("contextmenu", (e) => {
             e.preventDefault();
         });
@@ -121,7 +133,7 @@ export class Mouse {
         if (this.mouseStores.has(key)) {
             return this.mouseStores.get(key);
         }
-        if (key === "mouse_x" || key === "mouse_y") {
+        if (key === "mouse_x" || key === "mouse_y" || key === "mouse_scroll_x" || key === "mouse_scroll_y") {
             let wr = writable(this.mouseState.get(key) ?? 0);
             this.mouseStores.set(key, wr);
             return wr;
@@ -140,4 +152,10 @@ export class Mouse {
         this.innerHeight = height;
         this.innerWidth = width;
     }
+    setWidth(width) {
+        this.drawWidth = width;
+    }
+    setHeight(height) {
+        this.drawHeight = height;
+    }
 }

package/dist/core-contexts.d.ts

@@ -0,0 +1,48 @@
+import type { Writable } from 'svelte/store';
+import type { Timing } from "./controllers/motions";
+import type { Keyboard } from "./controllers/keyboard";
+import type { Mouse } from "./controllers/mouse";
+import { type DrawableContext } from './drawable';
+export type DestroyFunction = () => any;
+export type RegisterFunction<T> = (run: T) => DestroyFunction;
+export type GameContext = {
+    assign: (ctx: LayerContext, obj: LayerDrawable) => DestroyFunction;
+    width: Writable<number>;
+    height: Writable<number>;
+    background: Writable<string>;
+    createTimer: Timing["createTimer"];
+    createBurst: Timing["createBurst"];
+    onKeyboardEvent: Keyboard["on"];
+    isKeyboardPressed: Keyboard["isPressed"];
+    getKeyboardStore: Keyboard["getStore"];
+    onMouseEvent: Mouse["on"];
+    isMousePressed: Mouse["isPressed"];
+    getMousePosition: Mouse["getPosition"];
+    getMouseStore: Mouse["getStore"];
+    onFrame: (callback: (info: {
+        delta: number;
+        time: number;
+    }) => any | void) => () => any;
+    onBeforeFrame: (callback: (info: {
+        delta: number;
+        time: number;
+    }) => any | void) => () => any;
+    onAfterFrame: (callback: (info: {
+        delta: number;
+        time: number;
+    }) => any | void) => () => any;
+    getLayerByName: (name: string) => LayerContext | null;
+};
+export declare const setupGame: (context: GameContext) => void;
+export declare const getGame: () => GameContext;
+export type LayerContext = Required<DrawableContext<null>> & {
+    requestFrame: (...optional: any[]) => any;
+};
+export type LayerDrawable = {
+    draw: () => any | void;
+    isStatic: () => boolean;
+    name: string;
+};
+export declare const setupLayer: (context: LayerContext) => RegisterFunction<LayerDrawable>;
+export declare const getLayer: () => LayerContext;
+export declare const getTriggerLayerRender: () => (...optional: any[]) => any;