improve docs rendering
This commit is contained in:
parent
7c544ddc17
commit
06bf686f8c
@ -1,7 +1,5 @@
|
||||
# Gamelib
|
||||
|
||||
## Contents
|
||||
|
||||
<table-of-contents></table-of-contents>
|
||||
|
||||
## Models
|
||||
@ -78,7 +76,7 @@ The name used for `deltaT` can be anything, it functions as any other function p
|
||||
|
||||
For example:
|
||||
|
||||
```
|
||||
```js
|
||||
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
|
||||
|
||||
@ -1,259 +1,7 @@
|
||||
# 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);
|
||||
});
|
||||
```
|
||||
## What is this?
|
||||
|
||||
Example of having two .md files in the same directory
|
||||
|
||||
@ -1,5 +1,7 @@
|
||||
# Docs
|
||||
|
||||
<table-of-contents></table-of-contents>
|
||||
|
||||
## Gamelib
|
||||
|
||||
[Link to Gamelib docs](gamelib)
|
||||
|
||||
24
docs/static/headers.js
vendored
24
docs/static/headers.js
vendored
@ -12,9 +12,6 @@ function renderTableOfContents() {
|
||||
|
||||
const ancestors = [];
|
||||
for (const header of headers) {
|
||||
if (header.textContent === "Contents") {
|
||||
continue;
|
||||
}
|
||||
const depth = parseInt(header.tagName.slice(1)) - 1;
|
||||
while (ancestors.length >= depth) {
|
||||
ancestors.pop();
|
||||
@ -40,15 +37,20 @@ function renderTableOfContents() {
|
||||
ancestors.push(ul);
|
||||
}
|
||||
|
||||
root.replaceChildren(list);
|
||||
const title = document.createElement("h2");
|
||||
title.textContent = "Table of contents";
|
||||
|
||||
root.replaceChildren(title, list);
|
||||
}
|
||||
|
||||
function groupHeadersInDiv(headerTag) {
|
||||
const firstElement = document.querySelector(headerTag);
|
||||
if (firstElement === null) {
|
||||
function groupHeadersInDiv(headerTag, index = 0) {
|
||||
const elements = document.querySelectorAll(headerTag);
|
||||
const firstElement = elements[index];
|
||||
if (!firstElement) {
|
||||
return;
|
||||
}
|
||||
let container = document.createElement("div");
|
||||
console.log(firstElement);
|
||||
firstElement.replaceWith(container);
|
||||
container.append(firstElement);
|
||||
|
||||
@ -60,9 +62,13 @@ function groupHeadersInDiv(headerTag) {
|
||||
if (sib.nodeName === headerTag.toUpperCase()) {
|
||||
container = document.createElement("div");
|
||||
sib.replaceWith(container);
|
||||
index++;
|
||||
}
|
||||
container.append(sib);
|
||||
}
|
||||
if (index < elements.length) {
|
||||
groupHeadersInDiv(headerTag, index + 1);
|
||||
}
|
||||
}
|
||||
|
||||
function slugify(elements) {
|
||||
@ -90,4 +96,6 @@ function attachIdToHeaders() {
|
||||
|
||||
attachIdToHeaders();
|
||||
renderTableOfContents();
|
||||
groupHeadersInDiv("h2");
|
||||
for (let i = 2; i <= 6; ++i) {
|
||||
groupHeadersInDiv(`h${i}`);
|
||||
}
|
||||
|
||||
69
docs/static/style.css
vendored
69
docs/static/style.css
vendored
@ -28,22 +28,14 @@ body {
|
||||
padding: 1rem;
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 0.5rem;
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
line-height: 1;
|
||||
code {
|
||||
font-size: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
@ -68,16 +60,21 @@ h1, h2, h3, h4, h5, h6 {
|
||||
isolation: isolate;
|
||||
position: relative;
|
||||
max-width: max-content;
|
||||
|
||||
background: var(--clr-bg-1);
|
||||
|
||||
border-radius: 0 0.5rem 0.5rem 0;
|
||||
padding: 0.5em;
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: -0.25em;
|
||||
bottom: -0.25em;
|
||||
right: -1em;
|
||||
left: -10rem;
|
||||
width: 3em;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: -3em;
|
||||
z-index: -1;
|
||||
border-radius: 0.5rem;
|
||||
background: linear-gradient(to left, var(--clr-bg-1) 75%, transparent);
|
||||
background: linear-gradient(to left, var(--clr-bg-1), transparent);
|
||||
border-radius: 0.5rem 0 0 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@ -87,8 +84,32 @@ h2 {
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
table-of-contents > ul {
|
||||
list-style: none;
|
||||
padding-left: 0;
|
||||
font-size: 1.25rem;
|
||||
table-of-contents h2 {
|
||||
position: initial;
|
||||
}
|
||||
|
||||
table-of-contents {
|
||||
background: var(--clr-bg-1);
|
||||
border-radius: 0.5rem;
|
||||
padding: 1.5rem;
|
||||
display: block;
|
||||
max-width: max-content;
|
||||
}
|
||||
|
||||
table-of-contents ul:first-of-type {
|
||||
font-size: 1.1em;
|
||||
padding-left: 1.5rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
table-of-contents li: {
|
||||
margin-bottom: 0.25em;
|
||||
}
|
||||
|
||||
table-of-contents h2 {
|
||||
padding-inline: 0;
|
||||
margin: 0;
|
||||
&::before {
|
||||
all: initial;
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user