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 builders

Intall node/npm then npm i on the root folder to get builders.

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"
           }
       ]
   }

If you use it for another game, replace `mow` mentions on package.json `build:scss` script and on tsconfig.json `files` property.

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 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() {
   }
 }