rot.js TypeScript basics

A basic roguelike example built with rot.js and TypeScript. Playable at https://mizar999.github.io/rotjs-typescript-basics/

Resources

• rot.js - Roguelike Toolkit
• RogueBasin - rot.js Tutorial
• Frostlike - 7 Day Roguelike Challenge 2017 entry

Project setup

• Init npm and install necessary packages

  npm init -y
  npm install --save-dev typescript rot-js webpack webpack-cli ts-loader live-server npm-run-all

• Create Webpack configuration webpack.config.js:

  const path = require('path');
  
  module.exports = {
  entry: './src/app.ts',
  module: {
      rules:[{
          test: /\.tsx?$/,
          use: 'ts-loader',
          exclude: /node_modules/
      }]
  },
  resolve: {
      extensions: ['.ts', '.tsx', '.js']
  },
  output: {
      filename: 'app.js',
      path: path.resolve(__dirname, 'dist')
  },
  mode: 'development'
  };

• Webpack will get the sources from src/app.ts and collect everything in dist/app.js file

• Create TypeScript configuration tsconfig.json:

  {
      "compilerOptions": {
          "target": "es5"
      },
      "include": [
          "src/*"
      ]
  }

• Update the scripts-section of the package.json file:

  "scripts": {
      "build": "webpack",
      "watch": "webpack --watch",
      "serve": "live-server --port=8085"
  }

• To build the application run:

  npm run-script build

• To run multiple npm scripts cross platform in parallel run the following command (use the npx command if the packages were installed locally):

  # if globally installed
  npm-run-all --parallel watch serve
  
  # if locally installed
  npx npm-run-all --parallel watch serve

• Or use the shorthand command run-p for parallel tasks:

  # if globally installed
  run-p watch serve
  
  # if locally installed
  npx run-p watch serve