fix mobile demo, remove dev.html, fix debug info rendering

liabru · Aug 25, 2015 · 9d5c27a · 9d5c27a
1 parent 1e756d3
commit 9d5c27a
Show file tree

Hide file tree

Showing 10 changed files with 71 additions and 116 deletions.
diff --git a/Gruntfile.js b/Gruntfile.js
@@ -60,7 +60,7 @@ module.exports = function(grunt) {
       watch: {
         options: {
           port: 9000,
-          open: 'http://localhost:9000/demo/dev.html',
+          open: 'http://localhost:9000/demo',
           livereload: 9001
         }
       },

diff --git a/demo/dev.html b/demo/dev.html
diff --git a/demo/index.html b/demo/index.html
@@ -3,40 +3,51 @@
     <head>
         <meta charset="utf-8">
         <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
-        <meta name="viewport" content="width=device-width">
+        <meta name="viewport" content="width=device-width,minimal-ui">
         <meta name="robots" content="noindex">
 
+        <!-- only required if using Bodies.fromVertices with concave vertices -->
+        <script type="text/javascript" src="./js/lib/decomp.js"></script>
+
         <!-- only required if using Matter.RenderPixi -->
         <script type="text/javascript" src="./js/lib/pixi.js"></script>
 
-        <!-- matter lib v0.8.0 -->
-        <script type="text/javascript" src="./js/lib/matter-0.8.0.js"></script>
+        <!-- matter lib edge master version -->
+        <script type="text/javascript" src="./js/lib/matter-dev.js"></script>
 
         <!-- only required if using MatterTools -->
         <link rel="stylesheet" href="./js/lib/matter-tools/matter-tools.css" type="text/css">
         <script type="text/javascript" src="./js/lib/matter-tools/jquery-1.11.0.min.js"></script>
+        <script type="text/javascript" src="./js/lib/matter-tools/gif/gif.js"></script>
         <script type="text/javascript" src="./js/lib/matter-tools/matter-tools-dev.js"></script>
 
         <!-- matter demo code -->
         <link rel="stylesheet" href="./css/style.css" type="text/css">
+        <script type="text/javascript" src="./js/Examples.js"></script>
         <script type="text/javascript" src="./js/Demo.js"></script>
 
-        <title>Matter.js Physics Engine Demo</title>
+        <title>Matter.js Demo (Edge Build)</title>
     </head>
     <body>
         <div class="container">
-            <h1>Matter.js Physics Engine Demo</h1>
-            <p class="nav"><a href="./mobile.html">Mobile Demo</a> <span class="nav-sep">&middot;</span> <a href="http://brm.io/matter-js/">Project page</a> <span class="nav-sep">&middot;</span> <a href="https://github.com/liabru/matter-js">GitHub</a> <span class="nav-sep">&middot;</span> <a href="http://twitter.com/liabru">@liabru</a></p>
+            <h1>Matter.js Demo (Edge Build)</h1>
+            <p class="nav nav-links"><a href="./mobile.html">Mobile Demo</a> <span class="nav-sep">&middot;</span> <a href="http://brm.io/matter-js/">Project page</a> <span class="nav-sep">&middot;</span> <a href="https://github.com/liabru/matter-js">GitHub</a> <span class="nav-sep">&middot;</span> <a href="http://twitter.com/liabru">@liabru</a></p>
             <div class="controls-container">
                 <select id="demo-select">
                     <option value="mixed">Mixed Shapes</option>
                     <option value="mixedSolid">Solid Rendering</option>
+                    <option value="svg">Concave SVG Paths</option>
+                    <option value="terrain">Concave Terrain</option>
+                    <option value="concave">Concave Bodies</option>
+                    <option value="compound">Compound Bodies</option>
                     <option value="newtonsCradle">Newton's Cradle</option>
                     <option value="wreckingBall">Wrecking Ball</option>
                     <option value="slingshot">Slingshot Game</option>
                     <option value="rounded">Rounded Corners (Chamfering)</option>
                     <option value="views">Views</option>
                     <option value="timescale">Time Scaling</option>
+                    <option value="manipulation">Body Manipulation</option>
+                    <option value="compositeManipulation">Composite Manipulation</option>
                     <option value="sprites">Sprites</option>
                     <option value="pyramid">Pyramid</option>
                     <option value="raycasting">Raycasting</option>
@@ -48,22 +59,28 @@ <h1>Matter.js Physics Engine Demo</h1>
                     <option value="softBody">Basic Soft Bodies</option>
                     <option value="cloth">Cloth</option>
                     <option value="events">Events</option>
+                    <option value="collisionFiltering">Collision Filtering</option>
                     <option value="chains">Chains</option>
                     <option value="ballPool">Ball Pool</option>
                     <option value="stack">Stack</option>
                     <option value="circleStack">Circle Stack</option>
+                    <option value="compoundStack">Compound Stack</option>
                     <option value="restitution">Restitution</option>
                     <option value="friction">Friction</option>
                     <option value="airFriction">Air Friction</option>
+                    <option value="staticFriction">Static Friction</option>
                     <option value="sleeping">Sleeping</option>
                     <option value="broadphase">Grid Broadphase</option>
                     <option value="beachBalls">Beach Balls</option>
                     <option value="stress">Stress 1</option>
                     <option value="stress2">Stress 2</option>
                 </select>
                 <input id="demo-reset" value="Reset" type="submit">
+                <div class="demo-view-source nav-links">
+                    <a id="demo-view-source" href="https://github.com/liabru/matter-js/blob/master/examples" target="_blank">view source</a>
+                </div>
             </div>
             <div id="canvas-container"></div>
         </div>
     </body>
-</html>
+</html>
diff --git a/demo/js/Demo.js b/demo/js/Demo.js
@@ -1,3 +1,11 @@
+/**
+* The Matter.js demo page controller and example runner.
+*
+* NOTE: For the actual example code, refer to the source files in `/examples/`.
+*
+* @class Demo
+*/
+
 (function() {
 
     var _isBrowser = typeof window !== 'undefined' && window.location,
@@ -67,6 +75,9 @@
         // set up demo interface (see end of this file)
         Demo.initControls(demo);
 
+        // pass through runner as timing for debug rendering
+        demo.engine.metrics.timing = demo.runner;
+
         return demo;
     };
 

diff --git a/demo/js/DemoMobile.js b/demo/js/DemoMobile.js
@@ -36,7 +36,11 @@
             Demo.fullscreen();
 
             setTimeout(function() {
-                Engine.run(_engine);
+                var runner = Engine.run(_engine);
+
+                // pass through runner as timing for debug rendering
+                _engine.metrics.timing = runner;
+
                 Demo.updateScene();
             }, 800);
         });

diff --git a/demo/mobile.html b/demo/mobile.html
@@ -7,24 +7,29 @@
         <meta name="apple-mobile-web-app-capable" content="yes">
         <meta name="mobile-web-app-capable" content="yes">
         <meta name="robots" content="noindex">
-        <script type="text/javascript" src="./js/lib/matter-0.8.0.js"></script>
-        <script type="text/javascript" src="./js/DemoMobile.js"></script>
+
+        <!-- matter lib edge master version -->
+        <script type="text/javascript" src="./js/lib/matter-dev.js"></script>
+
+        <!-- matter demo code -->
         <link rel="stylesheet" href="./css/style.css" type="text/css">
+        <script type="text/javascript" src="./js/DemoMobile.js"></script>
+
         <title>Matter.js Physics Engine Mobile Demo</title>
     </head>
-    <body class="mobile">
+    <body class="mobile nav-links">
         <div class="container">
             <h1>Matter.js Mobile Demo</h1>
             <p>
                 Open this page on your mobile device in Chrome or Safari
+                <br><br>
+                Touch and drag to interact with the blocks
+                <br><br>
+                Tilt and turn to master gravity like you're the boss of it
             </p>
-            <p>
-               Touch and drag to interact with the blocks
-               <br>Tilt and turn to master gravity like you're the boss of it
-           </p>
-           <input id="demo-start" value="Start Demo" type="submit">
-           <p>Or back to the <a href="index.html">full demo</a> page for more info.</p>
-           <div id="canvas-container"></div>
+            <input id="demo-start" value="Start Demo" type="submit">
+            <p>Or back to the <a href="index.html">full demo</a> page for more info.</p>
+            <div id="canvas-container"></div>
        </div>
    </body>
  </html>
diff --git a/src/render/Render.js b/src/render/Render.js
@@ -253,30 +253,31 @@ var Grid = require('../collision/Grid');
         var c = context,
             world = engine.world,
             render = engine.render,
+            metrics = engine.metrics,
             options = render.options,
             bodies = Composite.allBodies(world),
             space = "    ";
 
         if (engine.timing.timestamp - (render.debugTimestamp || 0) >= 500) {
             var text = "";
-            text += "fps: " + Math.round(engine.timing.fps) + space;
+            text += "fps: " + Math.round(metrics.timing.fps) + space;
 
             // @if DEBUG
-            if (engine.metrics.extended) {
-                text += "delta: " + engine.timing.delta.toFixed(3) + space;
-                text += "correction: " + engine.timing.correction.toFixed(3) + space;
+            if (metrics.extended) {
+                text += "delta: " + metrics.timing.delta.toFixed(3) + space;
+                text += "correction: " + metrics.timing.correction.toFixed(3) + space;
                 text += "bodies: " + bodies.length + space;
 
                 if (engine.broadphase.controller === Grid)
-                    text += "buckets: " + engine.metrics.buckets + space;
+                    text += "buckets: " + metrics.buckets + space;
 
                 text += "\n";
 
-                text += "collisions: " + engine.metrics.collisions + space;
+                text += "collisions: " + metrics.collisions + space;
                 text += "pairs: " + engine.pairs.list.length + space;
-                text += "broad: " + engine.metrics.broadEff + space;
-                text += "mid: " + engine.metrics.midEff + space;
-                text += "narrow: " + engine.metrics.narrowEff + space;
+                text += "broad: " + metrics.broadEff + space;
+                text += "mid: " + metrics.midEff + space;
+                text += "narrow: " + metrics.narrowEff + space;
             }
             // @endif            
 

diff --git a/src/render/RenderPixi.js b/src/render/RenderPixi.js
@@ -9,6 +9,9 @@ var RenderPixi = {};
 
 module.exports = RenderPixi;
 
+var Composite = require('../body/Composite');
+var Common = require('../core/Common');
+
 (function() {
 
     /**

diff --git a/test/browser/TestDemo.js b/test/browser/TestDemo.js
@@ -6,7 +6,7 @@ var system = require('system');
 
 var demo,
     frames = 10,
-    testUrl = 'http://localhost:8000/demo/dev.html',
+    testUrl = 'http://localhost:8000/demo/index.html',
     refsPath = 'test/browser/refs',
     diffsPath = 'test/browser/diffs';
 

diff --git a/test/node/TestDemo.js b/test/node/TestDemo.js
@@ -164,7 +164,7 @@ var getDemoNames = function() {
             'events', 'collisionFiltering', 'sleeping'
         ];
 
-    $('#demo-select option', fs.readFileSync('demo/dev.html').toString())
+    $('#demo-select option', fs.readFileSync('demo/index.html').toString())
         .each(function() { 
             var name = $(this).val();
             if (skip.indexOf(name) === -1) {