sfja/karlkoder-playground
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

breadcrumbs

Browse Source
This commit is contained in:
Theis Pieter Hollebeek 2025-10-13 16:25:33 +02:00
parent 7e45e4ed59
commit 7c544ddc17
4 changed files with 287 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
docs/build.ts
View File

@ -6,14 +6,27 @@ import * as pathTools from "@std/path";
function injectIntoTemplate( function injectIntoTemplate(
name: string, name: string,
rendered: string, rendered: string,
dirComponents: [], dirComponents: string[],
fileName: string,
): string { ): string {
const breadcrumbs: string[] = []; const breadcrumbs = [];
for (const component of dirComponents) {
breadcrumbs.push(`<a>${component}</a>`); if (name !== "index") {
dirComponents.push(`${name}.html`);
}
if (dirComponents.length > 0) {
breadcrumbs.push(`<a href="/-/">root</a>`);
} else {
breadcrumbs.push(`<span>root</span>`);
}
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(`<a href="${href}">${component}</a>`);
} else {
breadcrumbs.push(`<span>${component}</a>`);
}
} }
breadcrumbs.push(`<span>${fileName}</span>`);
let content = [ let content = [
"<!DOCTYPE html>", "<!DOCTYPE html>",
@ -21,19 +34,19 @@ function injectIntoTemplate(
"<head>", "<head>",
[ [
`<title>Docs: ${name}</title>`, `<title>Docs: ${name}</title>`,
'<script src="./headers.js" defer></script>',
'<link rel="shortcut icon" href="/favicon.ico">',
'<meta charset="UTF-8">', '<meta charset="UTF-8">',
'<meta name="viewport" content="width=device-width, initial-scale=1.0">', '<meta name="viewport" content="width=device-width, initial-scale=1.0">',
'<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">', '<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">',
'<meta name="color-scheme" content="dark">', '<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="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/styles/base16/gruvbox-dark-hard.css">',
'<link rel="stylesheet" href="./style.css">', '<link rel="stylesheet" href="/-/style.css">',
'<script src="/-/headers.js" defer></script>',
], ],
"</head>", "</head>",
"<body>", "<body>",
[ [
`<nav>${breadcrumbs.join("/")}</nav>`, `<nav>${breadcrumbs.join(" / ")}</nav>`,
rendered, rendered,
], ],
"</body>", "</body>",

0
docs/src/gamelib.md → docs/src/gamelib/index.md
View File

259
docs/src/gamelib/other.md Normal file
View File

@ -0,0 +1,259 @@
# Gamelib
## Contents
<table-of-contents></table-of-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);
});
```

5
docs/static/headers.js vendored
View File

@ -1,6 +1,11 @@
function renderTableOfContents() { function renderTableOfContents() {
const root = document.querySelector("table-of-contents"); const root = document.querySelector("table-of-contents");
if (root === null) {
console.error("No <table-of-contents> element found, unable to render table of contents!");
return;
}
const list = document.createElement("ul"); const list = document.createElement("ul");
const headers = document.querySelectorAll("h2,h3,h4,h5,h6"); const headers = document.querySelectorAll("h2,h3,h4,h5,h6");