Add playground tools for targets, loading 2.0 projects

playground/index.html

@@ -12,6 +12,7 @@
         <h2>Scratch VM Playground</h2>
         <button id="greenflag">Green flag</button>
         <button id="stopall">Stop</button>
+        <select id="selectedTarget" multiple></select>
         <p>
             <a id="renderexplorer-link" href="#">Renderer</a><br />
             <a id="threadexplorer-link" href="#">VM Threads</a><br />
@@ -20,6 +21,8 @@
         <div id="tab-renderexplorer">
             Render<br />
             <canvas id="scratch-stage" style="width: 480px; height: 360px;"></canvas>
+            <input id="projectId" value="119615668" />
+            <button id="projectLoadButton">Load</button>
         </div>
         <div id="tab-threadexplorer">
             Thread explorer
@@ -30,6 +33,7 @@
             <pre id="blockexplorer"></pre>
         </div>
     </div>
+
     <div id="blocks"></div>
 
     <xml id="toolbox" style="display: none">

playground/playground.js

@@ -1,8 +1,27 @@
+var loadProject = function () {
+    var id = location.hash.substring(1) || 119615668;
+    var url = 'https://projects.scratch.mit.edu/internalapi/project/' +
+        id + '/get/';
+    var r = new XMLHttpRequest();
+    r.addEventListener('load', function() {
+        window.vm.loadProject(this.responseText);
+    });
+    r.open('GET', url);
+    r.send();
+};
+
 window.onload = function() {
     // Lots of global variables to make debugging easier
     var vm = new window.VirtualMachine();
     window.vm = vm;
 
+    // Loading projects from the server.
+    document.getElementById('projectLoadButton').onclick = function () {
+        document.location = '#' + document.getElementById('projectId').value;
+        location.reload();
+    };
+    loadProject();
+
     var canvas = document.getElementById('scratch-stage');
     window.renderer = new window.RenderWebGLLocal(canvas);
     window.renderer.connectWorker(window.vm.vmWorker);
@@ -71,6 +90,38 @@ window.onload = function() {
         updateBlockExplorer(data.blocks);
     });
 
+    vm.on('workspaceUpdate', function (data) {
+        window.Blockly.Events.disable();
+        workspace.clear();
+        var dom = window.Blockly.Xml.textToDom(data.xml);
+        window.Blockly.Xml.domToWorkspace(dom, workspace);
+        window.Blockly.Events.enable();
+    });
+
+    var selectedTarget = document.getElementById('selectedTarget');
+    vm.on('targetsUpdate', function (data) {
+        // Clear select box.
+        while (selectedTarget.firstChild) {
+            selectedTarget.removeChild(selectedTarget.firstChild);
+        }
+        // Generate new select box.
+        for (var i = 0; i < data.targetList.length; i++) {
+            var targetOption = document.createElement('option');
+            targetOption.setAttribute('value', data.targetList[i][0]);
+            // If target id matches editingTarget id, select it.
+            if (data.targetList[i][0] == data.editingTarget) {
+                targetOption.setAttribute('selected', 'selected');
+            }
+            targetOption.appendChild(
+                document.createTextNode(data.targetList[i][1])
+            );
+            selectedTarget.appendChild(targetOption);
+        }
+    });
+    selectedTarget.onchange = function () {
+        vm.setEditingTarget(this.value);
+    };
+
     // Feedback for stacks and blocks running.
     vm.on('STACK_GLOW_ON', function(data) {
         workspace.glowStack(data.id, true);