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

Install 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.

> Alternatively you can run on terminal: `npm run watch`

Auto-upload built 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 built ones, and upload them to remote server. In ignored files section, you can put :

   "ignore": [
       "\\.vscode",
       "\\.git",
       "\\.DS_Store",
       "package.json",
       "package-lock.json",
       "yarn.lock",
       "tsconfig.json",
       "src",
       "node_modules",
       "README.md"
   ],

Hint

Make sure .vscode 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 built files, but that's not mandatory.

Typescript file skeleton

Typescript example here have been stripped down of all comments for clarity. You can view full file with generated comments here. 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*/;
declare const _;
declare const g_gamethemeurl;

class <Your game name> /*implements Game*/ {

    private gamedatas: any;
    private player_id: string;
    private players: { [playerId: number]: any /*Player*/ };
    private playerNumber: number;

    constructor() {}
    
    public setup(gamedatas: any) {
        this.setupNotifications();
    } 
    public onEnteringState(stateName: string, args: any) {}
    public onLeavingState(stateName: string) {}
    public onUpdateActionButtons(stateName: string, args: any) {} 
    public setupNotifications() {}
 }

To plug the class with BGA framework, we'll also create another file : define.ts

define([
    "dojo","dojo/_base/declare",
    "ebg/core/gamegui",
    "ebg/counter",
    "ebg/stock"
],
function (dojo, declare) {
    return declare("bgagame.<your game name>", ebg.core.gamegui, new <Your game name>());             
});

Copy bgagame.<your game name> from original JS to avoid name mistakes. new <Your game name>() must match your class name defined on previous file.

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",
    "watch:ts": "tsc --watch",
    "watch:scss": "sass --watch src/<your game name>.scss <your game name>.css",
    "watch": "npm run watch:ts && npm run watch:sass"
  },
  "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": "<your game name>.js",
    },
    "files": [
        "src/<your game name>.ts",
        "src/define.ts"
    ]
}

If you want to split your code onto multiple files, just add them in the file list (order is important for dependencies, new subpart should go on top of the list). No need to import classes or types from one file to another. In fact, you can't with this configuration. If you manage to make them work, please contact me and we'll update this documentation.

Code completion

To add code completion on framework, doko, stock, ... you'll need definition files. Feel free to copy them from this repo and reference them at the top of files array, even before your subpart files.