TS-Games

Custom framework/build system for simple single-file TypeScript games.

Installing dependencies

• Install bun (https://bun.sh/)

bun install

Make a game

• Create your game folder in src/games
• Create src/games/<yourgame>/index.ts with default exported function.

Running:

bun start

Navigate to http://localhost:3000 to see the list of your games. Game rebuilds on each reload.

Building

bun run build <project>

Will create <project>.html in dist folder.

Or to select project from list:

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, because it's lightweight.

• Import images as HTMLImageElement

  • PNG & JPG

    import spritesheet from './assets/spritesheet.png';
    console.log(spritesheet); // <img src="data:..." />
    

• Import audio as HTMLAudioElement

  • WAV, MP3 & OGG

    import heal from './assets/heal.ogg';
    console.log(heal); // <audio src="data:..." />
    heal.play()
    

• Import CSS

  • Regular CSS

    import "./assets/styles.css";
    

  • CSS modules is supported

    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

      .root {
          display: flex;
          .row {
              display: flex;
              flex-direction: row;
          }
      }
      

    • Vendor prefixed if needed

  • Import fonts (see example in src/common/assets/vga.font.css)

    import "./assets/lcd.font.css";
    

Publishing

• Make sure you have scp installed (it most certainly is)

• Make .env file

  PUBLISH_LOCATION=ssh.example.com:/var/www/games/
  PUBLISH_URL=https://example.com/
  

• Run build & publish

  bun run build <project>
  

  Or to select project from list:

  bun run build