127 lines
2.9 KiB
Markdown
127 lines
2.9 KiB
Markdown
# TS-Games
|
|
|
|
Custom framework/build system for simple single-file TypeScript games.
|
|
|
|
## Installing dependencies
|
|
|
|
- Install bun (https://bun.sh/)
|
|
|
|
```bash
|
|
bun install
|
|
```
|
|
|
|
## Make a game
|
|
|
|
- Create your game folder in `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
|
|
- 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 in `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`
|
|
|
|
- Import `*.c`/`*.cpp` files (compile to wasm on the fly)
|
|
- Example: `src/games/life/life.c`
|
|
- To use, `clang` and wasm toochain should be present in the system
|
|
```bash
|
|
sudo apt install clang lld wabt
|
|
```
|
|
- Supports only function exports & `memory`
|
|
- `EXPORT(jsName) void c_function();`
|
|
- No stdlib
|
|
|
|
|
|
## 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
|
|
``` |