From 9fd6387a9b8f50d59ad0be952163f2054a53eaa3 Mon Sep 17 00:00:00 2001
From: Dan Vanderkam <danvdk@gmail.com>
Date: Tue, 7 Jul 2015 17:31:53 -0400
Subject: [PATCH] Add an FPS meter to playground-complete.html

---
 examples/playground-complete.html | 26 +++++++++++++++++++++++++-
 package.json                      |  1 +
 2 files changed, 26 insertions(+), 1 deletion(-)

diff --git a/examples/playground-complete.html b/examples/playground-complete.html
index 628e0234..6944e6cf 100644
--- a/examples/playground-complete.html
+++ b/examples/playground-complete.html
@@ -6,9 +6,14 @@
   position: absolute;
   left: 10px;
   right: 10px;
-  top: 10px;
+  top: 20px;
   bottom: 10px;
 }
+#stats {
+  position: absolute;
+  right: 0;
+  top: 0;
+}
 </style>
 </head>
 
@@ -22,3 +27,22 @@
   window.yourDiv = document.getElementById("yourDiv");
 </script>
 <script src="./playground.js"></script>
+
+<!--
+Measure the frame rate. Chrome devtools can do this, but having the devtools
+open has a dramatic effect on frame rates.
+-->
+<script src="../node_modules/stats.js/build/stats.min.js"></script>
+<script>
+var stats = new Stats();
+stats.setMode(0); // 0: fps, 1: ms
+document.body.appendChild(stats.domElement);
+
+var update = function() {
+  stats.end();
+  stats.begin();
+  requestAnimationFrame(update);
+};
+stats.begin();
+requestAnimationFrame(update);
+</script>
diff --git a/package.json b/package.json
index e8b61978..30e1938e 100644
--- a/package.json
+++ b/package.json
@@ -96,6 +96,7 @@
     "sinon": "^1.12.2",
     "sniper": "^0.2.16",
     "source-map": "^0.3.0",
+    "stats.js": "^1.0.0",
     "uglify-js": "^2.4.23",
     "watchify": "^3.2.1"
   },