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

How to run

After cloning the repository:

• Install necessary packages

  npm install

• To build the application run:

  npm run build

• To run multiple npm scripts cross platform in parallel run the following command:

  # if globally installed
  concurrently npm:watch npm:serve
  
  # if locally installed
  npx concurrently npm:watch npm:serve

Initial Project setup

If you're interested here is my initial project setup:

• Init npm and install necessary packages

  npm init -y
  npm install --save-dev typescript@4.9.4 ts-loader@9.4.2 rot-js@2.2.0 webpack@5.75.0 webpack-cli@5.0.1 http-server@14.1.1 concurrently@7.6.0

• 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": "http-server --port=8085 -c-1"
  }