display FPS

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);