display FPS

src/fps.js

@@ -0,0 +1,24 @@
+import {createDomNode} from './utils.js';
+
+const DEFAULTS = {
+	sampleSize: 60,
+};
+
+export default class FPS {
+	constructor (config) {
+		this.frame = this.frame.bind(this);
+
+		this.settings = Object.assign({}, DEFAULTS, config);
+
+		this.framesPerSecond = [];
+		this.fps = this.settings.element;
+	}
+
+	frame (now, lastNow) {
+		this.framesPerSecond.push(1 / ((now - lastNow) / 1000));
+		if (this.framesPerSecond.length === this.settings.sampleSize) {
+			this.fps.innerHTML = parseInt(this.framesPerSecond.reduce((acc, fps) => acc + fps, 0) / this.settings.sampleSize);
+			this.framesPerSecond = [];
+		}
+	}
+}

src/main.js

@@ -1,3 +1,5 @@
+import FPS from './fps.js';
+
 const ONE_SECOND = 1000;
 const PRESS_RIPPLE = ONE_SECOND / 3;
 
@@ -43,6 +45,10 @@ class Demo {
 		this.mines = {};
 		this.ripples = [];
 
+		this.fps = new FPS({
+			element: document.querySelector('#fps'),
+		});
+
 		this.setOriginTile();
 		this.setFadeToGray();
 
@@ -215,7 +221,9 @@ class Demo {
 		Tessellate.Shapes.pips(context, scale, pixelPoint.getX(), pixelPoint.getY(), tile);
 	}
 
-	draw({context, height, width, scale, tilePoints}) {
+	draw({context, height, width, scale, tilePoints, now, lastNow}) {
+		this.fps.frame(now, lastNow);
+
 		Tessellate.Shapes.background(context, height, width, {
 			red: 64,
 			green: 32,
@@ -224,7 +232,6 @@ class Demo {
 
 		tilePoints.forEach(tilePoint => this.drawTile(tilePoint, context, scale));
 
-		const now = Date.now();
 		this.ripples.forEach(({timestamp, cell}) => {
 			const pressFactor = Math.min((now - timestamp) / PRESS_RIPPLE, 1);