From 6405aedaa7a3da339cf8116d769648689ba2fbc8 Mon Sep 17 00:00:00 2001
From: Pabloader <pabloader@pabloader.ru>
Date: Tue, 9 Jul 2024 12:38:03 +0000
Subject: [PATCH] Add README, more examples and audio imports

---
 README.md                              | 107 ++++++++++++++++++++++++-
 src/build/audioPlugin.ts               |  32 ++++++++
 src/build/build.ts                     |   9 ++-
 src/build/html.ts                      |   2 +
 src/common/types.d.ts                  |  12 +++
 src/games/brick-dungeon/index.ts       |   2 +-
 src/games/playground/assets/attack.wav | Bin 0 -> 6426 bytes
 src/games/playground/awoo.wasm.ts      |   3 +
 src/games/playground/index.tsx         |  14 ++++
 tsconfig.json                          |   3 +-
 10 files changed, 177 insertions(+), 7 deletions(-)
 create mode 100644 src/build/audioPlugin.ts
 create mode 100644 src/games/playground/assets/attack.wav
 create mode 100644 src/games/playground/awoo.wasm.ts
 create mode 100644 src/games/playground/index.tsx

diff --git a/README.md b/README.md
index 9dbc06c..b1122b3 100644
--- a/README.md
+++ b/README.md
@@ -1,14 +1,117 @@
 # TS-Games
 
-To install dependencies:
+Custom framework/build system for simple single-file TypeScript games.
+
+## Installing dependencies
+
+- Install bun (https://bun.sh/)
 
 ```bash
 bun install
 ```
 
-To run:
+## Make a game
+
+- Create your game folder in [src/games](src/games)
+- Create `src/games/<yourgame>/index.ts` with default exported function.
+
+## Running:
 
 ```bash
 bun start
 ```
+Navigate to `http://localhost:3000` to see the list of your games.
+Game rebuilds on each reload.
 
+## Building
+
+```bash
+bun run build <project>
+```
+Will create `<project>.html` in `dist` folder.
+
+Or to select project from list:
+
+```bash
+bun run build
+```
+
+## Features
+
+- Bun ♥
+- TypeScript
+- Building into single `.html` file without any dependencies, all assets are inlined as data-urls.
+    - `src/games/<yourgame>/assets/favicon.ico` is used as page icon if present.
+
+- TSX supported with [Preact](https://preactjs.com/), because it's lightweight.
+
+- Import images as `HTMLImageElement`
+    - PNG & JPG
+        ```typescript
+        import spritesheet from './assets/spritesheet.png';
+        console.log(spritesheet); // <img src="data:..." />
+        ```
+
+- Import audio as `HTMLAudioElement`
+    - WAV, MP3 & OGG
+        ```typescript
+        import heal from './assets/heal.ogg';
+        console.log(heal); // <audio src="data:..." />
+        heal.play()
+        ```
+
+- Import css with [LigntningCSS](https://lightningcss.dev/)
+    - Regular CSS
+        ```ts
+        import "./assets/styles.css";
+        ```
+
+    - CSS modules is supported
+        ```tsx
+        import styles from './assets/styles.module.css';
+        console.log(styles.awoo); // G7sddg_awoo
+
+        export default <div className={styles.root}></div>;
+        ```
+
+    - Modern CSS features are transpiled
+        - Nested CSS
+            ```css
+            .root {
+                display: flex;
+                .row {
+                    display: flex;
+                    flex-direction: row;
+                }
+            }
+            ```
+        - Vendor prefixed if needed
+
+    - Import fonts (see [example](src/common/assets/vga.font.css))
+        ```ts
+        import "./assets/lcd.font.css";
+        ```
+
+- [AssemblyScript](https://www.assemblyscript.org/) support (TypeScript-like language compiled into WebAssembly)
+    - [Example](src/games/playground/awoo.wasm.ts)
+    - Triggered by file name `*.wasm.ts`
+
+
+## Publishing
+
+- Make sure you have `scp` installed (it most certainly is)
+- Make `.env` file
+    ```bash
+    PUBLISH_LOCATION=ssh.example.com:/var/www/games/
+    PUBLISH_URL=https://example.com/
+    ```
+
+- Run build & publish
+    ```bash
+    bun run build <project>
+    ```
+
+    Or to select project from list:
+    ```bash
+    bun run build
+    ```
\ No newline at end of file
diff --git a/src/build/audioPlugin.ts b/src/build/audioPlugin.ts
new file mode 100644
index 0000000..8c6e510
--- /dev/null
+++ b/src/build/audioPlugin.ts
@@ -0,0 +1,32 @@
+import { plugin, type BunPlugin } from "bun";
+
+const audioPlugin: BunPlugin = {
+    name: "Audio loader",
+    async setup(build) {
+        build.onLoad({ filter: /\.(wav|mp3|ogg)$/ }, async (args) => {
+            const arrayBuffer = await Bun.file(args.path).arrayBuffer();
+            const ext = args.path.split('.').pop();
+            const buffer = Buffer.from(arrayBuffer);
+            const src = `data:audio/${ext};base64,${buffer.toString('base64')}`;
+            return {
+                contents: `
+                    const audio = document.createElement('audio');
+                    const promise = new Promise((resolve, reject) => {
+                        audio.oncanplay = resolve;
+                        audio.onerror = () => reject(audio.error);
+                    });
+                    audio.src = (${JSON.stringify(src)});
+
+                    await promise;
+                    
+                    export default audio;
+                `,
+                loader: 'js',
+            };
+        });
+    }
+};
+
+plugin(audioPlugin);
+
+export default audioPlugin;
\ No newline at end of file
diff --git a/src/build/build.ts b/src/build/build.ts
index 6006b11..390f192 100644
--- a/src/build/build.ts
+++ b/src/build/build.ts
@@ -10,6 +10,7 @@ const outDir = path.resolve(import.meta.dir, '..', '..', 'dist');
 await fs.mkdir(outDir, { recursive: true });
 
 let game = process.argv[2];
+const publish = process.env.PUBLISH_LOCATION;
 
 while (!await isGame(game)) {
     const answer = await inquirer.prompt([{
@@ -28,7 +29,9 @@ if (!html) {
 const filePath = path.resolve(outDir, `${game}.html`);
 await Bun.write(filePath, html);
 
-const result = await $`scp "${filePath}" "pabloid@games.pafnooty.ru:/var/www/games/${game}.html"`;
-if (result.exitCode === 0) {
-    console.log(`Build successful: https://games.pafnooty.ru/${game}.html`);
+if (publish) {
+    const result = await $`scp "${filePath}" "${publish}${game}.html"`;
+    if (result.exitCode === 0) {
+        console.log(`Build successful: ${process.env.PUBLISH_URL}${game}.html`);
+    }
 }
\ No newline at end of file
diff --git a/src/build/html.ts b/src/build/html.ts
index 2a8cd93..5fca08c 100644
--- a/src/build/html.ts
+++ b/src/build/html.ts
@@ -8,6 +8,7 @@ import fontPlugin from './fontPlugin';
 import lightningcss from 'bun-lightningcss';
 
 import { getGames } from './isGame';
+import audioPlugin from './audioPlugin';
 
 export async function buildHTML(game: string, production = false, portable = false) {
     const html = await Bun.file(path.resolve(import.meta.dir, '..', 'assets', 'index.html')).text();
@@ -22,6 +23,7 @@ export async function buildHTML(game: string, production = false, portable = fal
         },
         plugins: [
             imagePlugin,
+            audioPlugin,
             fontPlugin,
             wasmPlugin({ production, portable }),
             lightningcss(),
diff --git a/src/common/types.d.ts b/src/common/types.d.ts
index 319f497..3b7d897 100644
--- a/src/common/types.d.ts
+++ b/src/common/types.d.ts
@@ -9,4 +9,16 @@ declare module "*.jpg" {
 declare module "*.jpeg" {
     const image: HTMLImageElement;
     export default image;
+}
+declare module "*.wav" {
+    const audio: HTMLAudioElement;
+    export default audio;
+}
+declare module "*.mp3" {
+    const audio: HTMLAudioElement;
+    export default audio;
+}
+declare module "*.ogg" {
+    const audio: HTMLAudioElement;
+    export default audio;
 }
\ No newline at end of file
diff --git a/src/games/brick-dungeon/index.ts b/src/games/brick-dungeon/index.ts
index fd25db5..51cdca3 100644
--- a/src/games/brick-dungeon/index.ts
+++ b/src/games/brick-dungeon/index.ts
@@ -1,4 +1,4 @@
-import { BrickDisplay, type BrickDisplayImage } from "@common/display";
+import { BrickDisplay } from "@common/display";
 import { isPressed, updateKeys } from "@common/input";
 
 import spritesheetImage from './assets/spritesheet.png';
diff --git a/src/games/playground/assets/attack.wav b/src/games/playground/assets/attack.wav
new file mode 100644
index 0000000000000000000000000000000000000000..f4fa6607b10970d5b6b4abd8208057cb0207b6cd
GIT binary patch
literal 6426
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
D*VJ>>

literal 0
HcmV?d00001

diff --git a/src/games/playground/awoo.wasm.ts b/src/games/playground/awoo.wasm.ts
new file mode 100644
index 0000000..1845c70
--- /dev/null
+++ b/src/games/playground/awoo.wasm.ts
@@ -0,0 +1,3 @@
+export function awoo(a: i32, b: i32): void {
+    console.log((a * b).toString());
+}
\ No newline at end of file
diff --git a/src/games/playground/index.tsx b/src/games/playground/index.tsx
new file mode 100644
index 0000000..76f67b6
--- /dev/null
+++ b/src/games/playground/index.tsx
@@ -0,0 +1,14 @@
+import { awoo } from "./awoo.wasm";
+import { render } from "preact";
+import attack from './assets/attack.wav';
+
+export default function main() {
+    awoo(42, 69);
+
+    render(
+        <button onClick={() => attack.play()}>
+            Attack
+        </button>,
+        document.body
+    );
+}
\ No newline at end of file
diff --git a/tsconfig.json b/tsconfig.json
index 897cc41..459674a 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -28,5 +28,6 @@
       "@common/*": ["./src/common/*"]
     }
   },
-  "include": ["./**/*.ts", "./**/*.tsx", "./node_modules/assemblyscript/std/portable/index.d.ts"],
+  "include": ["./**/*.ts", "./**/*.tsx", "./**/*.js", "./**/*.jsx", "./node_modules/assemblyscript/std/portable/index.d.ts"],
+  "exclude": ["./dist/**/*"]
 }