display tiles, pips, and mines along with FPS

public/css/main.css

@@ -136,14 +136,16 @@ body {
 	position: absolute;
 	top: 5px;
 	right: 5px;
+
 	display: flex;
-	content-align: center;
+	flex-direction: column;
+	align-items: center;
 	justify-content: space-around;
+
 	color: white;
 	background: rgba(0,0,0, 0.9);
-	height: 20px;
-	width: 30px;
 	border-radius: 3px;
+	padding: 3px;
 }
 
 /* ==========================================================================

src/fps.js

@@ -1,5 +1,8 @@
 import {createDomNode} from './utils.js';
 
+const reportTemplate = report => `<div class="report">${ report }</div>`;
+const reportsTemplate = reports => reports.reduce((reportsHTML, report) => `${ reportsHTML }${ reportTemplate(report) }`, '');
+
 const DEFAULTS = {
 	sampleSize: 60,
 };
@@ -10,15 +13,26 @@ export default class FPS {
 
 		this.settings = Object.assign({}, DEFAULTS, config);
 
-		this.framesPerSecond = [];
+		this.reports = [[]];
 		this.fps = this.settings.element;
 	}
 
-	frame (now, lastNow) {
+	calculate () {
-		this.framesPerSecond.push(1 / ((now - lastNow) / 1000));
+		return this.reports.map(report => parseInt(report.reduce((acc, val) => acc + val, 0) / this.settings.sampleSize));
-		if (this.framesPerSecond.length === this.settings.sampleSize) {
+	}
-			this.fps.innerHTML = parseInt(this.framesPerSecond.reduce((acc, fps) => acc + fps, 0) / this.settings.sampleSize);
+
-			this.framesPerSecond = [];
+	frame (now, lastNow, reports) {
+		this.reports[0].push(1 / ((now - lastNow) / 1000));
+
+		reports.forEach((report, index) => {
+			const i = index + 1;
+			this.reports[i] = this.reports[i] || [];
+			this.reports[i].push(report);
+		});
+
+		if (this.reports[0].length === this.settings.sampleSize) {
+			this.fps.innerHTML = reportsTemplate(this.calculate());
+			this.reports = [[]];
 		}
 	}
 }

src/main.js

@@ -202,6 +202,8 @@ class Demo {
 	}
 
 	drawTile({x, y, z}, context, scale) {
+		this.counts[0] += 1;
+
 		const key = `${ x },${ z != null ? z : y }`;
 
 		this.map[key] = this.map[key] || this.createTile({
@@ -218,11 +220,19 @@ class Demo {
 		tile = this.gray ? this.fadeToGray(tile, fadeFactor) : tile;
 
 		Tessellate.TILES[tile.tileStyle][tile.drawStyle](context, scale, pixelPoint.getX(), pixelPoint.getY(), tile);
-		Tessellate.Shapes.pips(context, scale, pixelPoint.getX(), pixelPoint.getY(), tile);
+
+		if (tile.pips) {
+			this.counts[1] += tile.pips;
+			Tessellate.Shapes.pips(context, scale, pixelPoint.getX(), pixelPoint.getY(), tile);
+		}
 	}
 
 	draw({context, height, width, scale, tilePoints, now, lastNow}) {
-		this.fps.frame(now, lastNow);
+		this.counts = [
+			0, // tiles
+			0, // pips
+			0, // mines
+		];
 
 		Tessellate.Shapes.background(context, height, width, {
 			red: 64,
@@ -249,9 +259,12 @@ class Demo {
 		});
 
 		Tessellate.funky.forEach(this.mines, cell => {
+			this.counts[2] += 1;
 			const pixelPoint = this.tessellate.tileToPixel(cell.x, cell.y);
 			Tessellate.Shapes.mine(context, scale, pixelPoint.getX(), pixelPoint.getY());
 		});
+
+		this.fps.frame(now, lastNow, this.counts);
 	}
 }