Using Typescript and Scss

This page will help you set up your project to use Typescript client file and Scss style files, and automatically build Javascript (in ES5) files and CSS files so your project stay compatible to BGA framework requirements. You can use only TS or only SCSS part if you want, they are not linked.

How to install the auto-build stack

Install dev stack

Intall node/npm. Here is an example to activate auto-build in Visual Studio Code, if you use another tool I strongly recommend to find an equivalent so you don't have to launch build manually after each modification.

Auto build JS and CSS files

In VS Code, add extension https://marketplace.visualstudio.com/items?itemName=emeraldwalk.RunOnSave and then add to VSCode config.json extension part :

       "commands": [
           {
               "match": ".*\\.ts$",
               "isAsync": true,
               "cmd": "npm run build:ts"
           },
           {
               "match": ".*\\.scss$",
               "isAsync": true,
               "cmd": "npm run build:scss"
           }
       ]
   }

build:ts and build:scss are script tasks we'll configure later.

Auto-upload builded files

Also add one auto-FTP upload extension (for example https://marketplace.visualstudio.com/items?itemName=lukasz-wronski.ftp-sync) and configure it. The extension will detected modified files in the workspace, including builded ones, and upload them to remote server.

Hint

Make sure ftp-sync.json and node_modules are in .gitignore if you commit your project somewhere.

create skeleton

When you create your game in BGA Studio, a JS and CSS file are generated. As we will overwrite them with autobuild. You can put the TS/SCSS files on a src folder to separate them from builded files, but that's not mandatory.

Typescript file skeleton

Your TS code can be splitted in multiple files, you can have a look here for inspiration. To make this page concise, I removed comments and code samples. If it's your first game, I strongly recommend you to report them on the TS file before activating auto-build !

<your game name>.ts

declare const define;
declare const ebg;
declare const $;
//declare const dojo: Dojo;

class Mow /*implements Game*/ {

    private gamedatas: MowGamedatas;
    private player_id: string;
    private players: { [playerId: number]: Player };
    private playerNumber: number;

    constructor() {}
    
   public setup(gamedatas: any) {
        this.players = gamedatas.players;
        this.playerNumber = Object.keys(this.players).length;
        this.setupNotifications();
    }

    public onEnteringState(stateName: string, args: any) {
    }

    public onLeavingState(stateName: string) {
    }     
 
    public onUpdateActionButtons(stateName: string, args: any) {
    } 

   public setupNotifications() {
   }
 }

SCSS file

Nothing special here, just write classic SCSS (will be compiled by Dart scss) and name it <your game name>.scss

Your SCSS code can be splitted in multiple files, for example :

<your game name>.scss

 @import 'gametable';

 /* some classes */

_gametable.scss

 /* _gametable related classes */

Configure package.json and tsconfig.json

Create a file named package.json on the root folder, not on the src folder. package.json

{
  "name": "<your game name>",
  "version": "1.0.0",
  "description": "",
  "main": "<your game name>.js",
  "scripts": {
    "build:ts": "tsc",
    "build:scss": "sass --no-source-map src/<your game name>.scss <your game name>.css"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "sass": "^1.32.6",
    "typescript": "^4.1.3"
  }
}

When package.json is created, run npm i on the root folder to install builders (will generate a node_modules folder).

For Typescript compilation we also need to set up a tsconfig.json on the root folder. tsconfig.json

{
    "rootDir": ".", 
    "compilerOptions": {
      "target": "es5",
      "module": "none",
      "lib": ["dom", "esnext"],  
      "sourceMap": false,
      "outFile": "mow.js",
      "typeRoots": ["./typings"]
    },
    "files": [
        "src/mow.ts",
        "src/define.ts"
    ]
}