From 3dca142bb931c9dcd76930efdaaa9c9a1dcbc7f9 Mon Sep 17 00:00:00 2001
From: Andrew Sliwinski <andrewsliwinski@acm.org>
Date: Mon, 8 Aug 2016 14:22:06 -0400
Subject: [PATCH] =?UTF-8?q?Move=20=E2=80=9Cdemo=E2=80=9D=20into=20?=
 =?UTF-8?q?=E2=80=9Cplayground=E2=80=9D=20directory=20as=20to=20match=20VM?=
 =?UTF-8?q?=20and=20Blocks?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 build/demo.html                             | 86 --------------------
 playground/index.html                       | 89 +++++++++++++++++++++
 build/demoWorker.js => playground/worker.js |  5 +-
 3 files changed, 91 insertions(+), 89 deletions(-)
 delete mode 100644 build/demo.html
 create mode 100644 playground/index.html
 rename build/demoWorker.js => playground/worker.js (93%)
diff --git a/build/demo.html b/build/demo.html
deleted file mode 100644
index f767f96..0000000
--- a/build/demo.html
+++ /dev/null
@@ -1,86 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <title>Scratch WebGL rendering demo</title>
-</head>
-<body style="background: lightsteelblue">
-<canvas id="debug-canvas" width="10" height="10" style="border:3px dashed red"></canvas>
-<canvas id="scratch-stage" width="10" height="10" style="border:3px dashed black"></canvas>
-<p>
-    <input type="range" id="fudge" style="width:50%" value="90" min="-90" max="270" step="any" oninput="onFudgeChanged(this.value)" onchange="onFudgeChanged(this.value)">
-</p>
-<p>
-    Min: <input id="fudgeMin" type="number" onchange="onFudgeMinChanged(this.value)">
-    Max: <input id="fudgeMax" type="number" onchange="onFudgeMaxChanged(this.value)">
-</p>
-<script src="render-webgl.js"></script>
-<script>
-    var canvas = document.getElementById('scratch-stage');
-    var renderer = new RenderWebGLLocal(canvas);
-
-    var fudgeInput = document.getElementById('fudge');
-    function onFudgeMinChanged(newValue) {
-        fudgeInput.min = newValue;
-    }
-    function onFudgeMaxChanged(newValue) {
-        fudgeInput.max = newValue;
-    }
-    function onFudgeChanged(newValue) {
-        demoWorker.postMessage({fudge: newValue});
-    }
-
-    // Adapted from code by Simon Sarris: http://stackoverflow.com/a/10450761
-    function getMousePos(event, element) {
-        var stylePaddingLeft = parseInt(document.defaultView.getComputedStyle(element, null)['paddingLeft'], 10)     || 0;
-        var stylePaddingTop  = parseInt(document.defaultView.getComputedStyle(element, null)['paddingTop'], 10)      || 0;
-        var styleBorderLeft  = parseInt(document.defaultView.getComputedStyle(element, null)['borderLeftWidth'], 10) || 0;
-        var styleBorderTop   = parseInt(document.defaultView.getComputedStyle(element, null)['borderTopWidth'], 10)  || 0;
-
-        // Some pages have fixed-position bars at the top or left of the page
-        // They will mess up mouse coordinates and this fixes that
-        var html = document.body.parentNode;
-        var htmlTop = html.offsetTop;
-        var htmlLeft = html.offsetLeft;
-
-        // Compute the total offset. It's possible to cache this if you want
-        var offsetX = 0, offsetY = 0;
-        if (element.offsetParent !== undefined) {
-            do {
-                offsetX += element.offsetLeft;
-                offsetY += element.offsetTop;
-            } while ((element = element.offsetParent));
-        }
-
-        // Add padding and border style widths to offset
-        // Also add the <html> offsets in case there's a position:fixed bar
-        // This part is not strictly necessary, it depends on your styling
-        offsetX += stylePaddingLeft + styleBorderLeft + htmlLeft;
-        offsetY += stylePaddingTop + styleBorderTop + htmlTop;
-
-        // We return a simple javascript object with x and y defined
-        return {
-            x: event.pageX - offsetX,
-            y: event.pageY - offsetY
-        };
-    }
-
-    canvas.onclick = function(event) {
-        var mousePos = getMousePos(event, canvas);
-        var pickID = renderer.pick(mousePos.x, mousePos.y);
-        console.log('You clicked on ' + (pickID < 0 ? 'nothing' : 'ID# ' + pickID));
-    };
-
-    function drawStep() {
-        renderer.draw();
-        requestAnimationFrame(drawStep);
-    }
-    drawStep();
-
-    renderer.setDebugCanvas(document.getElementById('debug-canvas'));
-
-    var demoWorker = new Worker('demoWorker.js');
-    renderer.connectWorker(demoWorker);
-</script>
-</body>
-</html>
diff --git a/playground/index.html b/playground/index.html
new file mode 100644
index 0000000..ca4105f
--- /dev/null
+++ b/playground/index.html
@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8">
+        <title>Scratch WebGL rendering demo</title>
+    </head>
+
+    <body style="background: lightsteelblue">
+        <canvas id="debug-canvas" width="10" height="10" style="border:3px dashed red"></canvas>
+        <canvas id="scratch-stage" width="10" height="10" style="border:3px dashed black"></canvas>
+
+        <p>
+            <input type="range" id="fudge" style="width:50%" value="90" min="-90" max="270" step="any" oninput="onFudgeChanged(this.value)" onchange="onFudgeChanged(this.value)">
+        </p>
+        <p>
+            Min: <input id="fudgeMin" type="number" onchange="onFudgeMinChanged(this.value)">
+            Max: <input id="fudgeMax" type="number" onchange="onFudgeMaxChanged(this.value)">
+        </p>
+
+        <script src="../render.js"></script>
+        <script>
+            var canvas = document.getElementById('scratch-stage');
+            var renderer = new RenderWebGLLocal(canvas);
+
+            var fudgeInput = document.getElementById('fudge');
+            function onFudgeMinChanged(newValue) {
+                fudgeInput.min = newValue;
+            }
+            function onFudgeMaxChanged(newValue) {
+                fudgeInput.max = newValue;
+            }
+            function onFudgeChanged(newValue) {
+                demoWorker.postMessage({fudge: newValue});
+            }
+
+            // Adapted from code by Simon Sarris: http://stackoverflow.com/a/10450761
+            function getMousePos(event, element) {
+                var stylePaddingLeft = parseInt(document.defaultView.getComputedStyle(element, null)['paddingLeft'], 10)     || 0;
+                var stylePaddingTop  = parseInt(document.defaultView.getComputedStyle(element, null)['paddingTop'], 10)      || 0;
+                var styleBorderLeft  = parseInt(document.defaultView.getComputedStyle(element, null)['borderLeftWidth'], 10) || 0;
+                var styleBorderTop   = parseInt(document.defaultView.getComputedStyle(element, null)['borderTopWidth'], 10)  || 0;
+
+                // Some pages have fixed-position bars at the top or left of the page
+                // They will mess up mouse coordinates and this fixes that
+                var html = document.body.parentNode;
+                var htmlTop = html.offsetTop;
+                var htmlLeft = html.offsetLeft;
+
+                // Compute the total offset. It's possible to cache this if you want
+                var offsetX = 0, offsetY = 0;
+                if (element.offsetParent !== undefined) {
+                    do {
+                        offsetX += element.offsetLeft;
+                        offsetY += element.offsetTop;
+                    } while ((element = element.offsetParent));
+                }
+
+                // Add padding and border style widths to offset
+                // Also add the <html> offsets in case there's a position:fixed bar
+                // This part is not strictly necessary, it depends on your styling
+                offsetX += stylePaddingLeft + styleBorderLeft + htmlLeft;
+                offsetY += stylePaddingTop + styleBorderTop + htmlTop;
+
+                // We return a simple javascript object with x and y defined
+                return {
+                    x: event.pageX - offsetX,
+                    y: event.pageY - offsetY
+                };
+            }
+
+            canvas.onclick = function(event) {
+                var mousePos = getMousePos(event, canvas);
+                var pickID = renderer.pick(mousePos.x, mousePos.y);
+                console.log('You clicked on ' + (pickID < 0 ? 'nothing' : 'ID# ' + pickID));
+            };
+
+            function drawStep() {
+                renderer.draw();
+                requestAnimationFrame(drawStep);
+            }
+            drawStep();
+
+            renderer.setDebugCanvas(document.getElementById('debug-canvas'));
+
+            var demoWorker = new Worker('worker.js');
+            renderer.connectWorker(demoWorker);
+        </script>
+    </body>
+</html>
diff --git a/build/demoWorker.js b/playground/worker.js
similarity index 93%
rename from build/demoWorker.js
rename to playground/worker.js
index dfec1d8..87fbd0e 100644
--- a/build/demoWorker.js
+++ b/playground/worker.js
@@ -1,5 +1,4 @@
-
-importScripts('./render-webgl-worker.js');
+importScripts('../render-worker.js');
 
 var renderer;
 var drawableID;
@@ -21,7 +20,7 @@ onmessage = function(message) {
 };
 
 function initWorker() {
-    renderer = new RenderWebGLWorker();
+    renderer = new window.RenderWebGLWorker();
     var create1 = renderer.createDrawable();
     var create2 = renderer.createDrawable();
 
