From 35b4ef25bbe3d7790cc741497d00788e96ebfa6b Mon Sep 17 00:00:00 2001 From: Tyler Hallada Date: Sun, 15 Apr 2018 04:02:54 -0400 Subject: [PATCH] Use image sprite for trains --- package-lock.json | 10 ++++++++++ package.json | 1 + src/Line.ts | 9 +++++++-- src/Station.ts | 8 ++++++-- src/Train.ts | 13 +++++++++++-- src/node.png | Bin 0 -> 1512 bytes src/transport.ts | 28 +++++++++++++++++++++------- tsconfig.json | 7 +++++-- typings/custom.d.ts | 1 + webpack.config.js | 4 ++++ 10 files changed, 66 insertions(+), 15 deletions(-) create mode 100644 src/node.png create mode 100644 typings/custom.d.ts 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 0000000000000000000000000000000000000000..41e676e03530e58ef7d1dedcab1630b4820311f7 GIT binary patch literal 1512 zcmVP)e zSad^gZEa<4bO1wgWnpw>WFU8GbZ8()Nlj2!fese{00mGFz( z`TYf86<7h5fxHUxJ{e#F7zfV8{M#GAV_*?@-pPWbfUCeHaL$rH=o;`4xDV`fiXcP4 zG;keoEbYpRz&+qDu%1*whJYF13hl)La62wx;t(VS+ycI(y_p5RkGd<1T97H=2jC>h zU>CRvmOjlFb2d1DLm2kR0$eoyDBnHCrXfDc}Kc zp3dYM@FlQigCH5;Q3NTDcB24%5p=a5RFI3n&%g&L0QG+DqrNC(t+bR@1jzuuX*cDm`x^B-ruY@)6ta&npz-!R&}aS3zWjDM4^#|a z47f2P3PExmyv_*1d3@x)ymndFfS)wBf%pm!X%;Vnq=7$4er_si4uDT+l92S$W!+IR zLgBa@%Rpnu6v<7Yn_!G4iO5D>Rtor= z>>}l3Y8;%X*Ft7AUXe57wS{QwFxX0JwUB9zQ*2B(YauD%A2h8V7e(O1${AO6;IFC} zvEsNfuiIr!YK&rMvYsFr>^X(rNt|RDDAxr3*eV-U!f zTgZsU!#E?AT~=1(VVrEGAj29D;|!O_kY40Iw_=_?2f385*uh!H9o-d6W?BwnSE1O! zX$SERQS6}KL5y4!iw5-`je|AxIEclOVh1N2#BWNmgYK?Usq`Dn zgF^@LC{*m=t%DdwDt55vAnu)t9lUYS)Vob=JBY8XVh67r#AH~pgG~oLZDJEIbqm)n z`W(ayy`Zr$P62pbPMxf3JdCpn|0fk!G#c<6)fTNo&I8?FXN_CX$N zT#WH9_LYJxYFv!*F80-zKL0>(QN_&~@M*0U0#eLGiI*cW*K5&cX?iVs2dONh#KS$R zT!GYD!z`YxHP(?bKT5PLP{R#K?U^iU9W)rc*O8h_N;J$;r^uLE{KZep7JoZP0W2k4 zZqlIAn-|~SUr}e$uvh{vHF`jel;a~bBjr3&jZ6u~4Lp?D^O_==N2-x2tucqk@_K&j zhy0FKNbt)u;DXnOwV+G16o|N>%N9}^ZeL^Flzlf=zG@q`l4gI7l!hy6%5dCb8#$_Zo86 z_C5{vy^|_PB^jh-!#Hpz=HK2x?q@89v9L>uAeE#MWBM#&zdaB^ienYo*IABgwv;46 zs_8}Cw+9iA;eNzPwFmKw>;{gx&mJOnQ+tT1&NgBlvWXZZyg;sjTg!hZD00ENu3NkS O0000 { 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: {