diff --git a/package-lock.json b/package-lock.json index bef6aec..d1b37b5 100644 --- a/package-lock.json +++ b/package-lock.json @@ -4753,6 +4753,16 @@ "object-assign": "4.1.1" } }, + "file-loader": { + "version": "1.1.11", + "resolved": "https://registry.npmjs.org/file-loader/-/file-loader-1.1.11.tgz", + "integrity": "sha512-TGR4HU7HUsGg6GCOPJnFk06RhWgEWFLAGWiT6rcD+GRC2keU3s9RGJ+b3Z6/U73jwwNb2gKLJ7YCrp+jvU4ALg==", + "dev": true, + "requires": { + "loader-utils": "1.1.0", + "schema-utils": "0.4.5" + } + }, "filename-regex": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/filename-regex/-/filename-regex-2.0.1.tgz", diff --git a/package.json b/package.json index c6013aa..817e1da 100644 --- a/package.json +++ b/package.json @@ -30,6 +30,7 @@ "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", diff --git a/src/Line.ts b/src/Line.ts index 480c369..db32f1c 100644 --- a/src/Line.ts +++ b/src/Line.ts @@ -16,8 +16,13 @@ export default class Line { public stations: Station[]; public color: tinycolorInstance; - constructor(stations: Station[], start: PIXI.Point, startDirection: Direction, - numStations: number, color: tinycolorInstance) { + constructor( + stations: Station[], + start: PIXI.Point, + startDirection: Direction, + numStations: number, + color: tinycolorInstance + ) { this.color = color; this.stations = []; let stationsLeft = stations.slice(); diff --git a/src/Station.ts b/src/Station.ts index 6b829c5..2dc063e 100644 --- a/src/Station.ts +++ b/src/Station.ts @@ -70,8 +70,12 @@ export default class Station { public label: PIXI.Text; public color: tinycolorInstance; - constructor(location: PIXI.Point, population: number, color: tinycolorInstance, - connections?: Station[]) { + constructor( + location: PIXI.Point, + population: number, + color: tinycolorInstance, + connections?: Station[], + ) { this.location = location; this.population = population; this.color = color; diff --git a/src/Train.ts b/src/Train.ts index b5f14e9..e89c335 100644 --- a/src/Train.ts +++ b/src/Train.ts @@ -13,9 +13,16 @@ export default class Train { public id: number; public label: PIXI.Text; public color: tinycolorInstance; + public sprite: PIXI.Sprite; - constructor(location: PIXI.Point, speed: number, passengers: number, origin: Station, - destination: Station, color: tinycolorInstance) { + constructor( + location: PIXI.Point, + speed: number, + passengers: number, + origin: Station, + destination: Station, + color: tinycolorInstance + ) { this.location = location; this.speed = speed; this.origin = origin; @@ -23,6 +30,8 @@ export default class Train { this.passengers = passengers; this.color = color; + this.sprite = new PIXI.Sprite(PIXI.loader.resources.nodeImg.texture); + // for debugging trainCount += 1; this.id = trainCount; diff --git a/src/node.png b/src/node.png new file mode 100644 index 0000000..41e676e Binary files /dev/null and b/src/node.png differ diff --git a/src/transport.ts b/src/transport.ts index 4fd4802..944ca93 100644 --- a/src/transport.ts +++ b/src/transport.ts @@ -8,8 +8,11 @@ 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; @@ -124,12 +127,19 @@ const drawStations = (stations: Station[], graphics: PIXI.Graphics) => { const drawTrains = (trains: Train[], graphics: PIXI.Graphics) => { for (const train of trains) { - graphics.beginFill(parseInt(train.color.toHex(), 16), 0.8); - graphics.drawCircle(train.location.x, train.location.y, - rangeMap(train.passengers, 0, TRAIN_CAPACITY, 1, 5)); - graphics.endFill(); - train.label.x = train.location.x + 1; - train.label.y = train.location.y + 1; + // graphics.beginFill(parseInt(train.color.toHex(), 16), 0.8); + // graphics.drawCircle(train.location.x, train.location.y, + // rangeMap(train.passengers, 0, TRAIN_CAPACITY, 1, 5)); + // graphics.endFill(); + const trainSize = rangeMap(train.passengers, 0, TRAIN_CAPACITY, 1, 5); + const scale = trainSize / NODE_RES; + 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; } }; @@ -198,6 +208,10 @@ const run = () => { app.stage.addChild(graphics); app.stage.addChild(fpsText); + // add train sprites + for (const train of trains) { + app.stage.addChild(train.sprite); + } // Add debug labels for (const train of trains) { app.stage.addChild(train.label); @@ -212,4 +226,4 @@ const run = () => { }); }; -run(); +PIXI.loader.add('nodeImg', imgNode).load(run); diff --git a/tsconfig.json b/tsconfig.json index 96f97d7..e4b2376 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -4,8 +4,11 @@ "sourceMap": true, "noImplicitAny": true, "module": "es6", - "target": "es5", + "target": "es6", "jsx": "react", "allowJs": true - } + }, + "include": [ + "typings" + ] } diff --git a/typings/custom.d.ts b/typings/custom.d.ts new file mode 100644 index 0000000..e2937d4 --- /dev/null +++ b/typings/custom.d.ts @@ -0,0 +1 @@ +declare module '*.png'; diff --git a/webpack.config.js b/webpack.config.js index 8a73d91..20b8f8c 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -43,6 +43,10 @@ module.exports = { }) : ['style-loader', 'css-loader'], }, + { + test: /\.png$/, + use: 'file-loader', + }, ], }, resolve: {