update docs

2025-10-14 14:42:36 +02:00 · 2025-10-14 14:42:36 +02:00 · 6cf996b904
commit 6cf996b904
parent 3c81e53e72
3 changed files with 172 additions and 8 deletions
--- a/docs/build.ts
+++ b/docs/build.ts
@ -40,8 +40,8 @@ function injectIntoTemplate(
            '<meta name="color-scheme" content="dark">',
            '<link rel="shortcut icon" href="/favicon.ico">',
            '<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/styles/base16/gruvbox-dark-hard.css">',
-            '<link rel="stylesheet" href="/-/style.css">',
-            '<script src="/-/headers.js" defer></script>',
+            '<link rel="stylesheet" href="/docs/-/style.css">',
+            '<script src="/docs/-/headers.js" defer></script>',
        ],
        "</head>",
        "<body>",
--- a/docs/src/gamelib/index.md
+++ b/docs/src/gamelib/index.md
@ -4,6 +4,26 @@

 ## Models

+### `MouseButton`
+
+A dictionary of mouse buttons, accessible with `lib.MouseButton`.
+
+Members:
+
+- `lib.MouseButton.Left`
+- `lib.MouseButton.Right`
+- `lib.MouseButton.Middle`
+
+Example:
+
+```ts
+function mouseLeftClicked() {
+    /* do something */
+}
+
+lib.onClick(mouseLeftClicked, lib.MouseButton.Left);
+```
+
 ### `Color`

 A type of string.
@ -39,6 +59,42 @@ Example:
 /* todo: include a little html tool that listens to key events when focused and outputs what key was
 pressed */

+### `MouseMoveEventFunc`
+
+A function with 4 parameters (`mouseX`, `mouseY`, `mouseDeltaX`, `mouseDeltaY`) that is called
+whenever the mouse moves.
+
+Works both as a named and anonymous function.
+
+Example:
+
+See [`lib.onMouseMove`](#Lib-onMouseMove)
+
+### `MouseButtonEventFunc`
+
+A function with no parameters that is called whenever the appropriate
+[`MouseButton`](#Models-MouseButton) is pressed / released.
+
+Works both as a named and anonymous function.
+
+Example:
+
+```ts
+let playerX = 0;
+
+// anonymous function
+lib.onClick(function () {
+    playerX -= 20;
+}, lib.MouseButton.Right);
+
+// named function
+function leftMouseWasPressed() {
+    playerX += 20;
+}
+// note the lack of () after leftMouseWasPressed - we are not calling the function, we are referring to it as a variable
+lib.onClick(leftMouseWasPressed, lib.MouseButton.Left);
+```
+
 ### `KeyEventFunc`

 A function with no parameters that is called whenever the appropriate [`Key`](#Models-Key) is
@ -254,3 +310,109 @@ lib.startGameLoop(function () {
    drawCloud(50, 35);
 });
 ```
+
+### `onMouseMove`
+
+`lib.onMouseMove(handlerFunction: MouseMoveEventFunc) -> void`
+
+Calls `handlerFunction` whenever mouse is moved.
+
+See also: [`Models.MouseMoveEventFunc`](#Models-MouseMoveEventFunc)
+
+Example:
+
+```ts
+const player = {
+    x: lib.width / 2,
+    y: lib.height / 2,
+    direction: { x: 0, y: 0 },
+};
+
+function mouseMoved(mouseX, mouseY) {
+    const diffX = mouseX - player.x;
+    const diffY = mouseY - player.y;
+    const length = Math.sqrt(diffX ** 2 + diffY ** 2);
+    player.direction = {
+        x: (diffX / length),
+        y: -(diffY / length),
+    };
+}
+
+lib.onMouseMove(mouseMoved);
+```
+
+```ts
+const player = {
+    x: lib.width / 2,
+    y: lib.height / 2,
+};
+
+function mouseMoved(_mouseX, _mouseY, deltaX, deltaY) {
+    player.x += deltaX;
+    player.y += deltaY;
+}
+
+lib.onMouseMove(mouseMoved);
+```
+
+### `isClicking`
+
+`lib.isClicking(button: MouseButton) -> bool`
+
+Returns whether or not `key` is currently pressed.
+
+See also: [`Models.MouseButton`](#Models-MouseButton)
+
+Example:
+
+```ts
+let playerX = 0;
+lib.startGameLoop(function (deltaT) {
+    if (lib.isPressed("a")) {
+        playerX -= 20 * deltaT;
+    }
+    if (lib.isPressed("d")) {
+        playerX -= 20 * deltaT;
+    }
+});
+```
+
+### `onClick`
+
+`lib.onClick(handlerFunction: MouseButtonEventFunc, button: MouseButton = lib.MouseButton.Left) -> void`
+
+Calls `handlerFunction` whenever `button` is pressed.
+
+`button` defaults to `lib.MouseButton.Left` if not provided.
+
+See also: [`Models.MouseButton`](#Models-MouseButton),
+[`Models.MouseButtonEventFunc`](#Models-MouseButtonEventFunc)
+
+Example:
+
+```ts
+let isJumping = false;
+
+lib.onClick(function () {
+    isJumping = true;
+}, lib.MouseButton.Left);
+
+/* here we take advantage of MouseButton.Left
+   being the default argument, so we don't have
+   to specify it. */
+lib.onClickRelease(function () {
+    isJumping = false;
+});
+```
+
+### `onClickRelease`
+
+`lib.onClickRelease(handlerFunction: MouseButtonEventFunc, button: MouseButton = lib.MouseButton.Left) -> void`
+
+The opposite of [`lib.onClick`](#Lib-onClick)
+
+### `MouseButton`
+
+`lib.MouseButton.Left, lib.MouseButton.Right, lib.MouseButton.Middle`
+
+A method of accessing [`Model.MouseButton`](#Model-MouseButton)
--- a/src/gamelib.js
+++ b/src/gamelib.js
@ -9,9 +9,11 @@ export class Gamelib {
    mouseX = null;
    mouseY = null;

-    MouseButtonLeft = 0;
-    MouseButtonRight = 1;
-    MouseButtonMiddle = 2;
+    MouseButton = {
+        Left: 0,
+        Right: 1,
+        Middle: 2,
+    };

    constructor(console, codeStopper, assetProvider, canvasElement) {
        this.console = console;
@ -114,15 +116,15 @@ export class Gamelib {
        this.mouseMoveHandler = handlerFunction;
    }

-    isClicking(button = this.MouseButtonLeft) {
+    isClicking(button = this.MouseButton.Left) {
        return this.mouseButtonsPressed.has(button);
    }

-    onClick(handlerFunction, button = this.MouseButtonLeft) {
+    onClick(handlerFunction, button = this.MouseButton.Left) {
        this.mouseDownHandlers.set(button, handlerFunction);
    }

-    onClickRelease(handlerFunction, button = this.MouseButtonLeft) {
+    onClickRelease(handlerFunction, button = this.MouseButton.Left) {
        this.mouseUpHandlers.set(button, handlerFunction);
    }