28 changed files with 13899 additions and 46 deletions
--- a/.eslintrc.js
+++ b/.eslintrc.js
@ -0,0 +1,9 @@
+module.exports = {
+  "extends": "airbnb-base",
+  "plugins": [
+    "import"
+  ],
+  "env": {
+    "browser": true,
+  }
+};
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,4 @@
+node_modules/
+dist/
+tags
+Session.vim
--- a/1
+++ b/1
@ -0,0 +1 @@
+transport.hallada.net
--- a/LICENSE.txt
+++ b/LICENSE.txt
@ -0,0 +1,20 @@
+The MIT License (MIT)
+
+Copyright (c) 2017 Tyler Hallada
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+the Software, and to permit persons to whom the Software is furnished to do so,
+subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
--- a/README.md
+++ b/README.md
@ -0,0 +1,35 @@
+# Transport
+
+Work-in-progress procedurally generated train network simulation written in 
+Typescript with PixiJs.
+
+![Screenshot of simulation](img/screenshot.png)
+
+## Development
+
+Clone the repo and then run:
+
+```bash
+npm install
+npm start
+```
+
+Then visit `http://localhost:8888` in your browser to view the development 
+build. Edit files in `/src` and see the changes reflected in the browser.
+
+## Test
+
+No tests right now. But, to run lint checks:
+
+```bash
+npm run lint
+```
+
+## Deploy
+
+Run:
+
+```bash
+npm run build
+npm run deploy
+```
--- a/img/screenshot.png
+++ b/img/screenshot.png
--- a/index.html
+++ b/index.html
@ -12,9 +12,9 @@
    <!-- <meta property="og:image:height" content="300" /> -->
    <!-- <meta property="og:image:alt" content="Screenshot of the animation in action" /> -->
    <!-- <meta property="og:description" content="A procedurally generated and interactive animation created with PixiJS" /> -->
-  <link href="main.css" rel="stylesheet"></head>
+  </head>
  <body>
-  <script type="text/javascript" src="vendors.min.js"></script><script type="text/javascript" src="main.min.js"></script></body>
+  </body>

  <!-- Google Analytics -->
  <script>
--- a/main.css.map
+++ b/main.css.map
@ -1 +0,0 @@
-{"version":3,"sources":[],"names":[],"mappings":"","file":"main.css","sourceRoot":""}
--- a/main.min.js
+++ b/main.min.js
--- a/main.min.js.map
+++ b/main.min.js.map
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -0,0 +1,55 @@
+{
+  "name": "transport",
+  "version": "1.0.0",
+  "description": "",
+  "private": true,
+  "scripts": {
+    "start": "NODE_ENV=development ./node_modules/.bin/webpack-dev-server --mode development",
+    "build": "NODE_ENV=production ./node_modules/.bin/webpack --mode production && cp CNAME dist/",
+    "deploy": "./node_modules/.bin/gh-pages -d dist --remote github",
+    "lint": "./node_modules/.bin/tslint src/",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git@git.hallada.net:pixi.git"
+  },
+  "author": "Tyler Hallada",
+  "license": "ISC",
+  "devDependencies": {
+    "@babel/core": "^7.0.0-beta.42",
+    "@babel/plugin-proposal-class-properties": "^7.0.0-beta.42",
+    "@babel/plugin-proposal-object-rest-spread": "^7.0.0-beta.42",
+    "@babel/preset-env": "^7.0.0-beta.42",
+    "babel-loader": "^8.0.0-beta.2",
+    "css-loader": "^0.28.11",
+    "eslint": "^3.17.0",
+    "eslint-config-airbnb-base": "^11.1.1",
+    "eslint-config-standard": "^7.0.0",
+    "eslint-plugin-import": "^2.2.0",
+    "eslint-plugin-promise": "^3.5.0",
+    "eslint-plugin-standard": "^2.1.1",
+    "extract-text-webpack-plugin": "^4.0.0-beta.0",
+    "file-loader": "^1.1.11",
+    "gh-pages": "^1.1.0",
+    "html-webpack-plugin": "^3.1.0",
+    "style-loader": "^0.20.3",
+    "ts-loader": "^4.1.0",
+    "tslint": "^5.9.1",
+    "tslint-config-airbnb": "^5.8.0",
+    "typescript": "^2.8.1",
+    "uglifyjs-webpack-plugin": "^1.2.4",
+    "webpack": "^4.4.1",
+    "webpack-cli": "^2.0.13",
+    "webpack-dev-server": "^3.1.1"
+  },
+  "dependencies": {
+    "@types/pixi.js": "^4.7.2",
+    "@types/stats.js": "^0.17.0",
+    "@types/tinycolor2": "^1.4.0",
+    "pixi-viewport": "^1.5.0",
+    "pixi.js": "^4.7.1",
+    "stats.js": "^0.17.0",
+    "tinycolor2": "^1.4.1"
+  }
+}
--- a/src/Direction.ts
+++ b/src/Direction.ts
@ -0,0 +1,41 @@
+import * as PIXI from 'pixi.js';
+
+import { angleDegrees } from './utils';
+
+enum Direction {
+  North, // 0
+  Northeast, // 1
+  East, // 2
+  Southeast, // 3
+  South, // 4
+  Southwest, // 5
+  West, // 6
+  Northwest, // 7
+}
+
+export const getPointDirection = (pointA: PIXI.Point, pointB: PIXI.Point): Direction => {
+  const angle = angleDegrees(pointA, pointB);
+  let direction = null;
+  if (angle >= 337.5 || angle < 22.5) {
+    direction = Direction.North;
+  } else if (angle >= 22.5 && angle < 67.5) {
+    direction = Direction.Northeast;
+  } else if (angle >= 67.5 && angle < 112.5) {
+    direction = Direction.East;
+  } else if (angle >= 112.5 && angle < 157.5) {
+    direction = Direction.Southeast;
+  } else if (angle >= 157.5 && angle < 202.5) {
+    direction = Direction.South;
+  } else if (angle >= 202.5 && angle < 247.5) {
+    direction = Direction.Southwest;
+  } else if (angle >= 247.5 && angle < 292.5) {
+    direction = Direction.West;
+  } else if (angle >= 292.5 && angle < 337.5) {
+    direction = Direction.Northwest;
+  } else {
+    throw Error('Angle between points is not a valid degree');
+  }
+  return direction;
+};
+
+export default Direction;
--- a/src/Line.ts
+++ b/src/Line.ts
@ -0,0 +1,58 @@
+import * as tinycolor from 'tinycolor2';
+
+import Direction, { getPointDirection } from './Direction';
+import LineConnection from './LineConnection';
+import Station from './Station';
+import { distance, randomInt, randomPoint } from './utils';
+
+const CONNECTION_RADIUS = Math.floor(Math.sqrt(
+  Math.pow(window.innerWidth, 2) + Math.pow(window.innerHeight, 2),
+) / 8);
+
+export default class Line {
+  public name: string;
+  public color: tinycolorInstance;
+
+  constructor(
+    name: string,
+    color: tinycolorInstance,
+  ) {
+    this.name = name;
+    this.color = color;
+  }
+
+  public connectStations(
+    currentStation: Station,
+    stations: Station[],
+    visitedStations: Station[],
+    connectionLimit: number,
+  ) {
+    visitedStations.push(currentStation);
+    const otherStations = stations.filter(station => station !== currentStation);
+    const closeStations = Station.stationsWithinRadius(
+      otherStations,
+      currentStation.location,
+      CONNECTION_RADIUS,
+    );
+    for (let i = 0; i < connectionLimit; i += 1) {
+      if (closeStations.length < 1) {
+        break;
+      }
+      const largest = Station.largestStation(closeStations);
+      currentStation.connections.push(
+        new LineConnection(largest, this),
+      );
+      closeStations.splice(closeStations.indexOf(largest), 1);
+    }
+    for (const connectedStation of currentStation.connections) {
+      if (visitedStations.indexOf(connectedStation.station) === -1) {
+        this.connectStations(
+          connectedStation.station,
+          stations,
+          visitedStations,
+          connectionLimit,
+        );
+      }
+    }
+  }
+}
--- a/src/LineConnection.ts
+++ b/src/LineConnection.ts
@ -0,0 +1,15 @@
+import Line from './Line';
+import Station from './Station';
+
+export default class LineConnection {
+  public station: Station;
+  public line: Line;
+
+  constructor(
+    station: Station,
+    line: Line,
+  ) {
+    this.station = station;
+    this.line = line;
+  }
+}
--- a/src/Signal.ts
+++ b/src/Signal.ts
@ -0,0 +1,11 @@
+import * as PIXI from 'pixi.js';
+
+export default class Signal {
+  public location: PIXI.Point;
+
+  constructor(
+    location: PIXI.Point,
+  ) {
+    this.location = location;
+  }
+}
--- a/src/Station.ts
+++ b/src/Station.ts
@ -0,0 +1,101 @@
+import * as tinycolor from 'tinycolor2';
+
+import Direction, { getPointDirection } from './Direction';
+import LineConnection from './LineConnection';
+import { distance, randomPoint, weightedRandom } from './utils';
+
+let stationCount = 0;
+
+export default class Station {
+  // Utility methods for working with arrays of Stations
+  public static largestStation(stations: Station[]): Station {
+    let largest: Station = null;
+    for (const station of stations) {
+      if (largest === null || station.population > largest.population) {
+        largest = station;
+      }
+    }
+    return largest;
+  }
+
+  public static stationsWithinRadius(stations: Station[], point: PIXI.Point,
+                                     radius: number): Station[] {
+    return stations.filter(station => distance(point, station.location) <= radius);
+  }
+
+  public static stationsInDirection(stations: Station[], point: PIXI.Point,
+                                    direction: Direction): Station[] {
+    return stations.filter(station => getPointDirection(point, station.location) === direction);
+  }
+
+  public static closestStation(stations: Station[], point: PIXI.Point): Station {
+    return stations.reduce(
+      (prev, curr) => distance(point, prev.location) < distance(point, curr.location) ? prev : curr,
+    );
+  }
+
+  public static randomCloseLargeStation(stations: Station[], point: PIXI.Point,
+                                        radius: number): Station {
+    const closeStations = Station.stationsWithinRadius(stations, point,
+                                                       radius);
+    const closeStationWeights = closeStations.map(station => station.population);
+    return weightedRandom(closeStations, closeStationWeights);
+  }
+
+  public static isPointDistant(point: PIXI.Point, stations: Station[],
+                               minDistance: number): boolean {
+    for (const station of stations) {
+      if (distance(point, station.location) < minDistance) {
+        return false;
+      }
+    }
+    return true;
+  }
+
+  public static randomDistantPoint(stations: Station[], minDistance: number): PIXI.Point | null {
+    let tries = 100;
+    while (tries > 0) {
+      const point = randomPoint();
+      if (Station.isPointDistant(point, stations, minDistance)) {
+        return point;
+      }
+      tries -= 1;
+    }
+    return null;
+  }
+
+  public location: PIXI.Point;
+  public population: number;
+  public connections: LineConnection[];
+  public id: number;
+  public label: PIXI.Text;
+  public color: tinycolorInstance;
+
+  private textStyle: object;
+
+  constructor(
+    location: PIXI.Point,
+    population: number,
+    color: tinycolorInstance,
+    connections?: LineConnection[],
+  ) {
+    this.location = location;
+    this.population = population;
+    this.color = color;
+    this.connections = connections || [];
+
+    // for debugging
+    stationCount += 1;
+    this.id = stationCount;
+    this.textStyle = {
+      fill: '#FFA500',
+      fontFamily: 'monospace',
+      fontSize: '12px',
+    };
+    this.renderLabel();
+  }
+
+  public renderLabel() {
+    this.label = new PIXI.Text(`${this.id}`, this.textStyle);
+  }
+}
--- a/src/Train.ts
+++ b/src/Train.ts
@ -0,0 +1,57 @@
+import * as tinycolor from 'tinycolor2';
+
+import Station from './Station';
+
+let trainCount = 0;
+
+export default class Train {
+  public location: PIXI.Point;
+  public speed: number;
+  public origin: Station;
+  public destination: Station;
+  public passengers: number;
+  public id: number;
+  public label: PIXI.Text;
+  public color: tinycolorInstance;
+  public sprite: PIXI.Sprite;
+
+  private textStyle: object;
+
+  constructor(
+    location: PIXI.Point,
+    speed: number,
+    passengers: number,
+    origin: Station,
+    destination: Station,
+    color: tinycolorInstance,
+  ) {
+    this.location = location;
+    this.speed = speed;
+    this.origin = origin;
+    this.destination = destination;
+    this.passengers = passengers;
+    this.color = color;
+
+    this.sprite = new PIXI.Sprite(PIXI.loader.resources.nodeImg.texture);
+    this.sprite.visible = false;
+
+    // for debugging
+    trainCount += 1;
+    this.id = trainCount;
+    this.textStyle = {
+      fill: '#AEAEAE',
+      fontFamily: 'monospace',
+      fontSize: '12px',
+    };
+    this.renderLabel();
+  }
+
+  public boardPassengers() {
+    if (this.location === this.origin.location) { // about to leave a station
+    }
+  }
+
+  public renderLabel() {
+    this.label = new PIXI.Text(`${this.id}`, this.textStyle);
+  }
+}
--- a/726c2296b05703758a8f65fd9097f683.png
+++ b/726c2296b05703758a8f65fd9097f683.png
--- a/src/style.css
+++ b/src/style.css
@ -18,5 +18,3 @@ canvas {
  bottom: 0 !important;
  top: 0 !important;
 }
-
-/*# sourceMappingURL=main.css.map*/
--- a/src/transport.ts
+++ b/src/transport.ts
@ -0,0 +1,269 @@
+import * as Viewport from 'pixi-viewport';
+import * as PIXI from 'pixi.js';
+import * as Stats from 'stats.js';
+import * as tinycolor from 'tinycolor2';
+
+import Direction from './Direction';
+import Line from './Line';
+import Station from './Station';
+import Train from './Train';
+import { distance, pointsAlmostEqual, pointsEqual, randomInt, randomPoint,
+         rangeMap, weightedRandom } from './utils';
+
+import * as imgNode from './node.png';
+import './style.css';
+
+const NODE_RES = 100;
+
+const MAX_SPEED = 10.0;
+const ACCELERATION = 0.025;
+const APPROACH_DISTANCE = 3.0;
+const TRAIN_CAPACITY = 50;
+const LINE_CONNECTION_LIMIT = 5;
+const WORLD_WIDTH = 1000;
+const WORLD_HEIGHT = 1000;
+const ZOOM_MIN_WIDTH = 100;
+const ZOOM_MIN_HEIGHT = 100;
+const ZOOM_MAX_WIDTH = 4000;
+const ZOOM_MAX_HEIGHT = 4000;
+
+const trainTexts: PIXI.Text[] = [];
+
+const initStations = (numStations: number): Station[] => {
+  const stations: Station[] = [];
+  for (let i = 0; i < numStations; i += 1) {
+    stations.push(new Station(
+      Station.randomDistantPoint(stations, 30),
+      randomInt(300, 2000),
+      tinycolor.random()));
+  }
+  return stations;
+};
+
+const initTrains = (numTrains: number, stations: Station[]): Train[] => {
+  const trains = [];
+  const stationsWithConnections = stations.filter(station => station.connections.length > 0);
+  for (let i = 0; i < numTrains; i += 1) {
+    const originStation = stationsWithConnections[
+      Math.floor(Math.random() * stationsWithConnections.length)
+    ];
+    trains.push(new Train(
+      new PIXI.Point(originStation.location.x, originStation.location.y),
+      0, 0, originStation, undefined, tinycolor('grey')),
+    );
+  }
+  return trains;
+};
+
+const initLines = (numLines: number, stations: Station[]): Line[] => {
+  const lines = [];
+  for (let i = 0; i < numLines; i += 1) {
+    let color = tinycolor.random();
+    while (color.isDark()) {
+      color = tinycolor.random();
+    }
+    const stationsWithoutConnections = stations.filter(station =>
+      station.connections.length === 0,
+    );
+    let centralHub: Station;
+    if (stationsWithoutConnections.length > 0) {
+      centralHub = Station.largestStation(stationsWithoutConnections);
+    } else {
+      centralHub = stations[randomInt(0, stations.length - 1)];
+    }
+    const line = new Line(`line-${i}`, tinycolor.random());
+    const stationsLeft = stations.slice(0);
+    line.connectStations(centralHub, stationsLeft, [], LINE_CONNECTION_LIMIT);
+    lines.push(line);
+  }
+  return lines;
+};
+
+const moveTrains = (trains: Train[], stations: Station[]) => {
+  for (const train of trains) {
+    if (train.origin.connections.length === 0) {
+      // train is stuck at an orphaned station
+      continue;
+    }
+    // choose a destination randomly with a bias towards larger stations
+    if (train.destination === undefined) {
+      const otherStations = train.origin.connections.map(conn => conn.station);
+      const closeStationWeights = otherStations.map(station => station.population);
+      train.destination = weightedRandom(otherStations, closeStationWeights);
+
+      // board passengers
+      const boardingPassengers = randomInt(0, Math.min(TRAIN_CAPACITY - train.passengers,
+                                                       train.origin.population));
+      // set or mix train color with the color of new passenger origin
+      if (train.passengers === 0) {
+        train.color = train.origin.color;
+      } else {
+        train.color = tinycolor.mix(
+          train.color,
+          train.origin.color,
+          Math.round((boardingPassengers / train.passengers) * 100),
+        );
+      }
+      train.passengers += boardingPassengers;
+      train.origin.population -= boardingPassengers;
+    }
+
+    // train reached destination, stop moving and let passengers off
+    if (pointsAlmostEqual(train.location, train.destination.location)) {
+      train.speed = 0;
+
+      // average destination color with passenger color weighted by ratio
+      // (a simulation of culture mixing)
+      train.destination.color = tinycolor.mix(
+        train.destination.color,
+        train.origin.color,
+        Math.round((train.passengers / train.destination.population) * 100),
+      );
+
+      // transfer passengers to destination
+      const disembarkingPassengers = randomInt(0, train.passengers);
+      train.destination.population += disembarkingPassengers;
+      train.passengers -= disembarkingPassengers;
+
+      // prepare for next journey
+      train.origin = train.destination;
+      train.destination = undefined;
+      continue;
+    }
+
+    const journeyLeft = distance(train.location, train.destination.location);
+
+    if ((train.speed / ACCELERATION) >= ((journeyLeft / train.speed) - APPROACH_DISTANCE) &&
+        train.speed !== ACCELERATION) {
+      // slowing down
+      train.speed -= ACCELERATION;
+    } else if (train.speed < MAX_SPEED) {
+      // speeding up
+      train.speed += ACCELERATION;
+    }
+
+    // advance train
+    const progress = train.speed / journeyLeft;
+    train.location.x += ((train.destination.location.x - train.location.x) * progress);
+    train.location.y += ((train.destination.location.y - train.location.y) * progress);
+  }
+};
+
+const drawStations = (stations: Station[], graphics: PIXI.Graphics) => {
+  for (const station of stations) {
+    const radius = station.population / 150;
+    graphics.beginFill(parseInt(station.color.toHex(), 16), 0.5);
+    graphics.drawCircle(station.location.x, station.location.y, radius);
+    graphics.endFill();
+    station.label.x = station.location.x + radius + 1;
+    station.label.y = station.location.y + radius + 1;
+  }
+};
+
+const drawTrains = (trains: Train[], graphics: PIXI.Graphics) => {
+  for (const train of trains) {
+    const trainSize = rangeMap(train.passengers, 0, TRAIN_CAPACITY, 1, 5);
+    const scale = trainSize / NODE_RES;
+    train.sprite.visible = true;
+    train.sprite.x = train.location.x;
+    train.sprite.y = train.location.y;
+    train.sprite.scale.x = scale;
+    train.sprite.scale.y = scale;
+    train.sprite.tint = parseInt(train.color.toHex(), 16);
+    train.label.x = train.location.x + scale + 1;
+    train.label.y = train.location.y + scale + 1;
+  }
+};
+
+const drawLines = (stations: Station[], graphics: PIXI.Graphics) => {
+  for (const station of stations) {
+    for (const connection of station.connections) {
+      let twoWay = false;
+      for (const conn of connection.station.connections) {
+        if (conn.station === station) {
+          twoWay = true;
+        }
+      }
+      graphics.lineStyle(twoWay ? 2 : 1, parseInt(connection.line.color.toHex(), 16), 1);
+      graphics.moveTo(station.location.x, station.location.y);
+      graphics.lineTo(connection.station.location.x, connection.station.location.y);
+    }
+  }
+};
+
+const run = () => {
+  const app = new PIXI.Application({
+    antialias: true,
+    height: window.innerHeight,
+    width: window.innerWidth,
+  });
+  const viewport = new Viewport({
+    screenHeight: window.innerHeight,
+    screenWidth: window.innerWidth,
+    worldHeight: WORLD_HEIGHT,
+    worldWidth: WORLD_WIDTH,
+  });
+  const stats = new Stats();
+  stats.showPanel(0);
+  document.body.appendChild(stats.dom);
+  const ticker = new PIXI.ticker.Ticker();
+  const graphics = new PIXI.Graphics();
+
+  let stations: Station[] = [];
+  let lines: Line[] = [];
+  let stationsWithConnections: Station[] = [];
+  while (stationsWithConnections.length === 0) {
+    // If all stations are too far away to connect, try generating again
+    stations = initStations(30);
+    lines = initLines(4, stations);
+    stationsWithConnections = stations.filter(station => station.connections.length > 0);
+  }
+  const trains = initTrains(50, stations);
+
+  ticker.stop();
+  ticker.add((deltaTime) => {
+    stats.begin();
+
+    moveTrains(trains, stations);
+
+    graphics.clear();
+
+    graphics.lineStyle(1, 0xFFA500, 1);
+    drawStations(stations, graphics);
+
+    graphics.lineStyle(1, 0xAEAEAE, 1);
+    drawTrains(trains, graphics);
+
+    drawLines(stations, graphics);
+
+    stats.end();
+  });
+  ticker.start();
+
+  viewport.addChild(graphics);
+  // add train sprites
+  for (const train of trains) {
+    viewport.addChild(train.sprite);
+  }
+  // Add debug labels
+  for (const train of trains) {
+    viewport.addChild(train.label);
+  }
+  for (const station of stations) {
+    viewport.addChild(station.label);
+  }
+  document.body.appendChild(app.view);
+  app.stage.addChild(viewport);
+  viewport.drag().pinch().wheel().clampZoom({
+    maxHeight: ZOOM_MAX_HEIGHT,
+    maxWidth: ZOOM_MAX_WIDTH,
+    minHeight: ZOOM_MIN_HEIGHT,
+    minWidth: ZOOM_MIN_WIDTH,
+  }).decelerate();
+
+  window.addEventListener('resize', () => {
+    app.renderer.resize(window.innerWidth, window.innerHeight);
+  });
+};
+
+PIXI.loader.add('nodeImg', imgNode).load(run);
--- a/src/utils.ts
+++ b/src/utils.ts
@ -0,0 +1,52 @@
+import * as PIXI from 'pixi.js';
+
+const EPSILON = 1.0;
+
+export const randomInt = (min: number, max: number): number => (
+  // inclusive of min and max
+  Math.floor(Math.random() * (max - (min + 1))) + min
+);
+
+export const weightedRandom = (choices: any[], weights: number[]): any => {
+  const totalWeight = weights.reduce((a, b) => a + b, 0);
+  const rand = randomInt(0, totalWeight);
+  let cumulWeight = 0;
+  for (let i = 0; i < weights.length; i += 1) {
+    cumulWeight += weights[i];
+    if (rand < cumulWeight) {
+      return choices[i];
+    }
+  }
+};
+
+export const randomPoint = () => (
+  new PIXI.Point(randomInt(0, window.innerWidth), randomInt(0, window.innerHeight))
+);
+
+export const pointsEqual = (pointA: PIXI.Point, pointB: PIXI.Point): boolean => (
+  (pointA.x === pointB.x && pointA.y === pointB.y)
+);
+
+export const pointsAlmostEqual = (pointA: PIXI.Point, pointB: PIXI.Point): boolean => (
+  Math.abs(pointA.x - pointB.x) < EPSILON &&
+  Math.abs(pointA.y - pointB.y) < EPSILON
+);
+
+export const distance = (pointA: PIXI.Point, pointB: PIXI.Point): number => {
+  const distX = pointA.x - pointB.x;
+  const distY = pointA.y - pointB.y;
+  return Math.sqrt((distX * distX) + (distY * distY));
+};
+
+export const rangeMap = (num: number, inMin: number, inMax: number,
+                         outMin: number, outMax: number): number => (
+  (num - inMin) * (outMax - outMin) / (inMax - inMin) + outMin
+);
+
+export const angleRadians = (pointA: PIXI.Point, pointB: PIXI.Point): number => (
+  Math.atan2(-(pointB.x - pointA.x), pointB.y - pointA.y)
+);
+
+export const angleDegrees = (pointA: PIXI.Point, pointB: PIXI.Point): number => (
+  180 + angleRadians(pointA, pointB) * (180 / Math.PI)
+);
--- a/tsconfig.json
+++ b/tsconfig.json
@ -0,0 +1,14 @@
+{
+  "compilerOptions": {
+    "outDir": "./dist/",
+    "sourceMap": true,
+    "noImplicitAny": true,
+    "module": "es6",
+    "target": "es6",
+    "jsx": "react",
+    "allowJs": true
+  },
+  "include": [
+    "typings"
+  ]
+}
--- a/tslint.json
+++ b/tslint.json
@ -0,0 +1,11 @@
+{
+    "defaultSeverity": "error",
+    "extends": [
+        "tslint:recommended",
+        "tslint-config-airbnb",
+        "tslint-eslint-rules"
+    ],
+    "jsRules": {},
+    "rules": {},
+    "rulesDirectory": []
+}
--- a/typings/custom.d.ts
+++ b/typings/custom.d.ts
@ -0,0 +1 @@
+declare module '*.png';
--- a/vendors.min.js
+++ b/vendors.min.js
--- a/vendors.min.js.map
+++ b/vendors.min.js.map
--- a/webpack.config.js
+++ b/webpack.config.js
@ -0,0 +1,91 @@
+const path = require('path');
+const ExtractTextPlugin = require('extract-text-webpack-plugin');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
+
+const env = process.env.NODE_ENV;
+
+const prodPlugins = env === 'production' ? [
+  new UglifyJsPlugin({
+    sourceMap: true,
+  }),
+] : [];
+
+module.exports = {
+  entry: './src/transport.ts',
+  output: {
+    filename: env === 'production' ? '[name].min.js' : '[name].js',
+    path: path.resolve(__dirname, 'dist'),
+  },
+  mode: env === 'production' ? 'production' : 'development',
+  module: {
+    rules: [
+      {
+        test: /\.js$/,
+        exclude: /node_modules/,
+        use: {
+          loader: 'babel-loader',
+          options: {
+            presets: [
+              '@babel/preset-env',
+            ],
+            plugins: [
+              '@babel/proposal-class-properties',
+              '@babel/proposal-object-rest-spread',
+            ],
+            cacheDirectory: env === 'development',
+          },
+        },
+      },
+      {
+        test: /\.tsx?$/,
+        use: 'ts-loader',
+        exclude: /node_modules/,
+      },
+      {
+        test: /\.css$/,
+        use: env === 'production'
+          ? ExtractTextPlugin.extract({
+            fallback: 'style-loader',
+            use: ['css-loader'],
+          })
+          : ['style-loader', 'css-loader'],
+      },
+      {
+        test: /\.png$/,
+        use: 'file-loader',
+      },
+    ],
+  },
+  resolve: {
+    extensions: ['.tsx', '.ts', '.js'],
+  },
+  plugins: [
+    new HtmlWebpackPlugin({
+      template: path.join(__dirname, 'index.html'),
+    }),
+    new ExtractTextPlugin({
+      disable: env === 'development',
+      filename: '[name].css',
+    }),
+    ...prodPlugins,
+  ],
+  optimization: {
+    splitChunks: {
+      cacheGroups: {
+        commons: {
+          test: /[\\/]node_modules[\\/]/,
+          name: 'vendors',
+          chunks: 'all',
+        },
+      },
+    },
+  },
+  devtool: env === 'production' ? 'source-map' : 'cheap-module-eval-source-map',
+  devServer: {
+    contentBase: path.join(__dirname, 'dist'),
+    host: '0.0.0.0',
+    port: 8888,
+    disableHostCheck: true,
+  },
+};
				`@ -1 +0,0 @@`
				`{"version":3,"sources":[],"names":[],"mappings":"","file":"main.css","sourceRoot":""}`