diff --git a/docs/build.ts b/docs/build.ts index 589f1e9..7aa684d 100644 --- a/docs/build.ts +++ b/docs/build.ts @@ -6,14 +6,27 @@ import * as pathTools from "@std/path"; function injectIntoTemplate( name: string, rendered: string, - dirComponents: [], - fileName: string, + dirComponents: string[], ): string { - const breadcrumbs: string[] = []; - for (const component of dirComponents) { - breadcrumbs.push(`${component}`); + const breadcrumbs = []; + + if (name !== "index") { + dirComponents.push(`${name}.html`); + } + if (dirComponents.length > 0) { + breadcrumbs.push(`root`); + } else { + breadcrumbs.push(`root`); + } + for (let i = 0; i < dirComponents.length; ++i) { + const component = dirComponents[i]; + const href = "/-/" + dirComponents.filter((_, idx) => idx <= i).join("/"); + if (i < dirComponents.length - 1) { + breadcrumbs.push(`${component}`); + } else { + breadcrumbs.push(`${component}`); + } } - breadcrumbs.push(`${fileName}`); let content = [ "", @@ -21,19 +34,19 @@ function injectIntoTemplate( "", [ `Docs: ${name}`, - '', - '', '', '', '', '', + '', '', - '', + '', + '', ], "", "", [ - ``, + ``, rendered, ], "", diff --git a/docs/src/gamelib.md b/docs/src/gamelib/index.md similarity index 100% rename from docs/src/gamelib.md rename to docs/src/gamelib/index.md diff --git a/docs/src/gamelib/other.md b/docs/src/gamelib/other.md new file mode 100644 index 0000000..765a331 --- /dev/null +++ b/docs/src/gamelib/other.md @@ -0,0 +1,259 @@ +# Gamelib + +## Contents + + + +## Models + +### `Color` + +A type of string. + +Represents HTML colors. This includes +[named colors](https://developer.mozilla.org/en-US/docs/Web/CSS/named-color) such as `blue`, `red`, +`blanchedalmond`, `lavenderblush`, and rgb/hex when used with proper format. You can use +[`lib.rgb(r,g,b)`](#Lib-rgb) to generate a properly formatted rgb color code. + +Example: + +```ts +lib.drawRect(0, 0, 100, 100, "blue"); +lib.drawRect(100, 0, 100, 100, lib.rgb(192, 127, 172)); +``` + +### `Key` + +A type of string. + +Represents JavaScript's +[`KeyboardEvent.key`](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key) property. + +Example: + +``` +"Enter": Enter was pressed. +"b": Lowercase 'b' was pressed. +"B": Uppercase 'B' was pressed (i.e. Shift + B) +" ": Spacebar was pressed. +``` + +/* todo: include a little html tool that listens to key events when focused and outputs what key was +pressed */ + +### `KeyEventFunc` + +A function with no parameters that is called whenever the appropriate [`Key`](#Models-Key) is +pressed / released. + +Works both as a named and anonymous function. + +Example: + +```ts +let playerX = 0; + +// anonymous function +lib.onPress("a", function () { + playerX -= 20; +}); + +// named function +function dWasPressed() { + playerX += 20; +} +// note the lack of () after dWasPressed - we are not calling the function, we are referring to it as a variable +lib.onPress("a", dWasPressed); +``` + +### `LoopFunc` + +A function with a single parameters (`deltaT`) that is called whenever a game tick should run - +usually about 1/60 times a second. + +The `deltaT` parameter describes the time difference between the last tick and now, in seconds. + +The name used for `deltaT` can be anything, it functions as any other function parameter. I.e. +`loopFunction(timeSinceLastCall)`, `loopFunction(fooBar)`, etc. + +For example: + +``` +loopFunction is called at 12:00.24 - deltaT is 0 +loopFunction is called at 12:00.75 - deltaT is .51 +loopFunction is called at 12:01.52 - deltaT is .77 +``` + +Works both as a named and anonymous function. + +Example: + +```ts +let playerX = 0; + +// anonymous function +lib.startGameLoop(function (deltaT) { + playerX += 20 * deltaT; +}); + +// named function +function loopFunction(deltaTime) { + playerX += 20 * deltaTime; +} +// note the lack of () after loopFunction - we are not calling the function, we are using it as a variable +lib.startGameFunction(loopFunction); +``` + +## Lib + +### `println` + +`lib.println(msg: string) -> void` + +Print a message the debug console. + +Example: + +```ts +lib.println("Hello world!"); +lib.println("It is a thursday."); +``` + +```ini +[console] +Hello world! +It is a thursday. +``` + +### `startGameLoop` + +`lib.startGameLoop(loopFunction: LoopFunc) -> void` + +Registers a gameloop function, that is called on every tick. + +See also: [`Models.LoopFunc`](#Models-LoopFunc) + +### `isPressed` + +`lib.isPressed(key: Key) -> bool` + +Returns whether or not `key` is currently pressed. + +See also: [`Models.Key`](#Models-Key) + +Example: + +```ts +let playerX = 0; +lib.startGameLoop(function (deltaT) { + if (lib.isPressed("a")) { + playerX -= 20 * deltaT; + } + if (lib.isPressed("d")) { + playerX -= 20 * deltaT; + } +}); +``` + +### `onPress` + +`lib.onPress(key: Key, handlerFunction: KeyEventFunc) -> void` + +Calls `handlerFunction` whenever `key` is pressed. + +See also: [`Models.Key`](#Models-Key), [`Models.KeyEventFunc`](#Models-KeyEventFunc) + +Example: + +```ts +let isJumping = false; + +lib.onPress(" ", function () { + isJumping = true; +}); + +lib.onRelease(" ", function () { + isJumping = false; +}); +``` + +### `onRelease` + +`lib.onRelease(key: Key, handlerFunction: KeyEventFunc) -> void` + +The opposite of [`lib.onPress`](#Lib-onPress) + +### `rgb` + +`lib.rgb(red: number, green: number, blue: number) -> Color` + +Generates a correctly formatted [`Color`](#Models-Color) value based on `red`, `green` and `blue` + +See also: [`Models.Color`](#Models-Color) + +Example: + +```ts +lib.drawRect(100, 0, 100, 100, lib.rgb(192, 127, 172)); +``` + +### `clear` + +`lib.clear(color: Color) -> void` + +Paints the entire screen `color`. + +See also: [`Models.Color`](#Models-Color) + +Example: + +```ts +function drawClouds() { + /* some lib.drawRect(..) or lib.drawSprite(..) */ +} + +lib.startGameLoop(function () { + lib.clear("blue"); + drawClouds(); +}); +``` + +### `drawSprite` + +`lib.drawSprite(x: number, y: number, width: number, height: number, name: string) -> void` + +Draws a sprite imported in the sprite editor. + +/* todo: link to sprite editor docs */ + +Example: + +```ts +lib.startGameLoop(function () { + lib.clear("blue"); + lib.drawSprite(20, 30, 20, 10, "cloud.png"); +}); +``` + +### `drawRect` + +`lib.drawRect(x: number, y: number, width: number, height: number, color: Color) -> void` + +Fills a rect with [`Color`](#Models-Color). + +See also: [`Models.Color`](#Models-Color) + +Example: + +```ts +function drawCloud(x, y) { + lib.drawRect(x, y, 20, 10, "white"); +} + +lib.startGameLoop(function () { + lib.clear("blue"); + drawCloud(20, 30); + drawCloud(50, 35); +}); +``` + diff --git a/docs/static/headers.js b/docs/static/headers.js index 0c632a4..a46d7a2 100644 --- a/docs/static/headers.js +++ b/docs/static/headers.js @@ -1,6 +1,11 @@ function renderTableOfContents() { const root = document.querySelector("table-of-contents"); + if (root === null) { + console.error("No element found, unable to render table of contents!"); + return; + } + const list = document.createElement("ul"); const headers = document.querySelectorAll("h2,h3,h4,h5,h6");