docs/gamelib.md

@@ -1,237 +0,0 @@
-# Gamelib
-
-## 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)` 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`
-([link](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` 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;
-}
-lib.onPress(
-    "a",
-    dWasPressed,
-); /* note the lack of () after dWasPressed - we are not calling the function, we are referring to it as a variable */
-```
-
-### `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;
-}
-lib.startGameFunction(
-    loopFunction,
-); /* note the lack of () after loopFunction - we are not calling the function, we are using it as a variable */
-```
-
-## Functions
-
-### `lib.println(msg: string) -> void`
-
-Print a message the debug console.
-
-Example:
-
-```ts
-lib.println("Hello world!");
-lib.println("It is a thursday.");
-```
-
-```
-[console]
-Hello world!
-It is a thursday.
-```
-
-### `lib.startGameLoop(loopFunction: LoopFunc) -> void`
-
-Registers a gameloop function, that is called on every tick.
-
-See also: `Models.LoopFunc`
-
-### `lib.isPressed(key: Key) -> bool`
-
-Returns whether or not `key` is currently pressed.
-
-See also: `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;
-    }
-});
-```
-
-### `lib.onPress(key: Key, handlerFunction: KeyEventFunc) -> void`
-
-Calls `handlerFunction` whenever `key` is pressed.
-
-See also: `Models.Key`, `Models.KeyEventFunc`
-
-Example:
-
-```ts
-let isJumping = false;
-lib.onPress(" ", function () {
-    isJumping = true;
-});
-
-lib.onRelease(" ", function () {
-    isJumping = false;
-});
-```
-
-### `lib.onRelease(key: Key, handlerFunction: KeyEventFunc) -> void`
-
-The opposite of `lib.onPress`
-
-### `lib.rgb(red: number, green: number, blue: number) -> Color`
-
-Generates a correctly formatted `Color` value based on `red`, `green` and `blue`
-
-See also: `Models.Color`
-
-Example:
-
-```ts
-lib.drawRect(100, 0, 100, 100, lib.rgb(192, 127, 172));
-```
-
-### `lib.clear(color: Color) -> void`
-
-Paints the entire screen `color`.
-
-See also: `Models.Color`
-
-Example:
-
-```ts
-function drawClouds() {
-    /* some lib.drawRect(..) or lib.drawSprite(..) */
-}
-
-lib.startGameLoop(function () {
-    lib.clear("blue");
-    drawClouds();
-});
-```
-
-### `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");
-});
-```
-
-### `lib.drawRect(x: number, y: number, width: number, height: number, color: Color) -> void`
-
-Fills a rect with `Color`.
-
-See also: `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);
-});
-```

docs/index.html

@@ -6,6 +6,6 @@
         <title>Karlkoder Docs</title>
     </head>
     <body>
-        <h1>Docs</h1>
+        <h1>Chatgpt</h1>
     </body>
 </html>

index.html

@@ -61,12 +61,7 @@
             <div class="column" style="flex: 3">
                 <div id="project-header">
                     <div id="project-header-left">
-                        <input
+                        <input id="project-name" type="text" placeholder="Project name" aria-label="Project name">
-                            id="project-name"
-                            type="text"
-                            placeholder="Project name"
-                            aria-label="Project name"
-                        >
 
                         <button id="save-button">
                             💾 Save

src/index.js

@@ -19,7 +19,7 @@ const playgroundConsole = new PlaygroundConsole(
     document.querySelector("#console-code"),
 );
 
-window.addEventListener("DOMContentLoaded", () => {
+window.addEventListener('DOMContentLoaded', () => {
     playgroundConsole.log("Karlkode 1.0");
 });
 
@@ -47,6 +47,7 @@ globalThis.karlkoder = {
     },
 };
 
+
 const editor = ace.edit("editor");
 editor.setTheme("ace/theme/gruvbox");
 editor.session.setMode("ace/mode/javascript");
@@ -123,12 +124,12 @@ runButton.onclick = () => {
 exportButton.onclick = async () => {
     const html = await htmlExporter.export(projectName.value, editor.getValue());
 
-    downloadFile(slugify(projectName.value) || "project", html, ".html", "text/html");
+    downloadFile(slugify(projectName.value) || 'project', html, ".html", "text/html");
 };
 
 function saveKarlKoder() {
     downloadFile(
-        slugify(projectName.value) || "project",
+        slugify(projectName.value) || 'project',
         Vermiparous.en(
             editor.getValue(),
             spriteEditor.sprites,

src/utils.js

@@ -23,7 +23,7 @@ export function downloadFile(name, content, extension, mime) {
 export function slugify(text) {
     return text
         .split(/\W+/)
-        .map((word) => word.toLowerCase())
+        .map(word => word.toLowerCase())
         .join("-");
 }