From 434578cebc1a28d3705305eeae768b35c28a9c77 Mon Sep 17 00:00:00 2001
From: Tyler Hallada <tyler@hallada.net>
Date: Sat, 31 Mar 2018 01:50:39 -0400
Subject: [PATCH] Draw random lines, display FPS counter

---
 src/transport.js  | 20 ++++++++++++++++++++
 src/utils.js      |  4 ++++
 webpack.config.js |  1 +
 3 files changed, 25 insertions(+)
 create mode 100644 src/utils.js

diff --git a/src/transport.js b/src/transport.js
index f675095..81e0318 100644
--- a/src/transport.js
+++ b/src/transport.js
@@ -1,8 +1,28 @@
 import * as PIXI from 'pixi.js';
+import { randomInt } from './utils';
 import './style.css';
 
 const app = new PIXI.Application(window.innerWidth, window.innerHeight);
+const ticker = new PIXI.ticker.Ticker();
+const graphics = new PIXI.Graphics();
+const fpsText = new PIXI.Text('', { fontSize: '25px', fontFamily: 'monospace', fill: 'yellow' });
 
+fpsText.anchor = new PIXI.Point(1, 0);
+fpsText.x = window.innerWidth - 1;
+fpsText.y = 0;
+
+ticker.stop();
+ticker.add((deltaTime) => {
+  fpsText.setText(Math.round(ticker.FPS));
+  graphics.lineStyle(1, 0xaeaeae, 1);
+
+  graphics.moveTo(randomInt(9, window.innerWidth), randomInt(0, window.innerHeight));
+  graphics.lineTo(randomInt(9, window.innerWidth), randomInt(0, window.innerHeight));
+});
+ticker.start();
+
+app.stage.addChild(graphics);
+app.stage.addChild(fpsText);
 document.body.appendChild(app.view);
 
 window.addEventListener('resize', () => {
diff --git a/src/utils.js b/src/utils.js
new file mode 100644
index 0000000..1bbc108
--- /dev/null
+++ b/src/utils.js
@@ -0,0 +1,4 @@
+export const randomInt = (min, max) => (
+  // inclusive of min and max
+  Math.floor(Math.random() * (max - (min + 1))) + min
+);
diff --git a/webpack.config.js b/webpack.config.js
index 7680a5d..42baf86 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -42,6 +42,7 @@ module.exports = {
       filename: '[name].css',
     }),
   ],
+  devtool: 'cheap-module-eval-source-map',
   devServer: {
     contentBase: path.join(__dirname, 'dist'),
     host: '0.0.0.0',