Merge pull request #102 from tmickel/feature/fps-counter

Add stats.js meter to playground

package.json

@@ -23,6 +23,7 @@
     "json-loader": "0.5.4",
     "scratch-blocks": "git+https://git@github.com/LLK/scratch-blocks.git",
     "scratch-render": "git+https://git@github.com/LLK/scratch-render.git",
+    "stats.js": "0.16.0",
     "tap": "5.7.1",
     "webpack": "1.13.0",
     "webpack-dev-server": "1.14.1"

playground/index.html

@@ -725,7 +725,8 @@
           </category>
           <category name="More Blocks" colour="#FF6680"></category>
   </xml>
-
+    <!-- FPS counter -->
+    <script src="../node_modules/stats.js/build/stats.min.js"></script>
     <!-- Syntax highlighter -->
     <script src="../node_modules/highlightjs/highlight.pack.min.js"></script>
     <!-- Scratch Blocks -->

playground/playground.js

@@ -29,6 +29,12 @@ window.onload = function() {
     });
     window.workspace = workspace;
 
+    // FPS counter.
+    var stats = new window.Stats();
+    document.getElementById('tab-renderexplorer').appendChild(stats.dom);
+    stats.dom.style.position = 'relative';
+    stats.begin();
+
     // Block events.
     // @todo: Re-enable flyout listening after fixing GH-69.
     workspace.addChangeListener(vm.blockListener);
@@ -87,6 +93,8 @@ window.onload = function() {
 
     // Inform VM of animation frames.
     var animate = function() {
+        stats.end();
+        stats.begin();
         window.vm.animationFrame();
         requestAnimationFrame(animate);
     };