diff --git a/playground/index.html b/playground/index.html index e33b21034..74a26d422 100644 --- a/playground/index.html +++ b/playground/index.html @@ -9,19 +9,20 @@
-

Scratch VM Playground

- - - -

- Renderer
- VM Threads
- VM Block Representation
- Import/Export -

+
- Render
- + Home
+ + +
+ +
+
Thread explorer @@ -32,8 +33,8 @@ 

         

         

-            Import/Export
-            
+            Import/Export

+            Project ID: 
             

             

                 
diff --git a/playground/playground.css b/playground/playground.css
index 32dd55836..7f789b9bd 100644
--- a/playground/playground.css
+++ b/playground/playground.css
@@ -1,6 +1,9 @@
 body {
     background: rgb(36,36,36);
 }
+textarea {
+    resize: none;
+}
 a {
     color: rgb(217,217,217);
 }
@@ -16,13 +19,12 @@ a {
     position: absolute;
     left: 1%;
     right: 60%;
-    top: 0;
+    top: 1%;
     bottom: 0;
     width: 35%;
 }
 #blockexplorer, #threadexplorer, #importexport {
     position: absolute;
-    width: 100%;
     height: 75%;
     overflow: scroll;
     border: 1px solid #fff;
@@ -30,17 +32,58 @@ a {
     color: rgb(217,217,217);
     font-family: monospace;
     font-size: 10pt;
+    width: 480px;
+    height: 360px;
 }
-
 #tab-blockexplorer, #tab-threadexplorer, #tab-importexport {
     display: none;
 }
-
 #importExport {
-    width: 400px;
+    width: 480px;
     height: 360px;
     background: rgb(36,36,36);
     color: rgb(217,217,217);
     font-family: monospace;
     font-size: 10pt;
 }
+#projectId {
+    background: rgb(36,36,36);
+    color: rgb(217,217,217);
+    font-family: monospace;
+    font-size: 10pt;
+}
+ul {
+    display: block;
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+    background-color: #333;
+}
+rendererTop {
+    display: block;
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+    background-color: #696969;
+    width: 480px;
+}
+rendererButtons {
+    float: right;
+    padding: 12px;
+}
+li {
+    float: left;
+}
+li a {
+    display: block;
+    color: white;
+    text-align: center;
+    padding: 14px 16px;
+    text-decoration: none;
+}
+/* Change the link color to #111 (black) on hover */
+li a:hover {
+    background-color: #111;
+}
diff --git a/playground/playground.js b/playground/playground.js
index 3592df1d3..30d10c123 100644
--- a/playground/playground.js
+++ b/playground/playground.js
@@ -1,11 +1,13 @@
 var loadProject = function () {
-    var id = location.hash.substring(1) || 119615668;
+    var id = location.hash.substring(1);
     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.onreadystatechange = function() {
+        if (this.readyState == 4) {
+            window.vm.loadProject(this.responseText);
+        }
+    };
     r.open('GET', url);
     r.send();
 };
diff --git a/src/Stage.png b/src/Stage.png
new file mode 100644
index 000000000..c60861c2b
Binary files /dev/null and b/src/Stage.png differ
diff --git a/src/import/sb2import.js b/src/import/sb2import.js
index b337f9326..494f528cd 100644
--- a/src/import/sb2import.js
+++ b/src/import/sb2import.js
@@ -51,7 +51,8 @@ function parseScratchObject (object, runtime, topLevel) {
             var costume = object.costumes[i];
             // @todo: Make sure all the relevant metadata is being pulled out.
             sprite.costumes.push({
-                skin: costume.baseLayerMD5,
+                skin: 'https://cdn.assets.scratch.mit.edu/internalapi/asset/' 
+                    + costume.baseLayerMD5 + '/get/',
                 name: costume.costumeName,
                 bitmapResolution: costume.bitmapResolution,
                 rotationCenterX: costume.rotationCenterX,
diff --git a/src/index.js b/src/index.js
index e4dd8df5a..ceb52152f 100644
--- a/src/index.js
+++ b/src/index.js
@@ -3,6 +3,8 @@ var util = require('util');
 
 var Runtime = require('./engine/runtime');
 var sb2import = require('./import/sb2import');
+var Sprite = require('./sprites/sprite');
+var Blocks = require('./engine/blocks');
 
 /**
  * Whether the environment is a WebWorker.
@@ -104,9 +106,51 @@ VirtualMachine.prototype.postIOData = function (device, data) {
 
 /**
  * Load a project from a Scratch 2.0 JSON representation.
- * @param {string} json JSON string representing the project.
+ * @param {?string} json JSON string representing the project.
+ * If JSON is NULL, fallback to creating blank project.
  */
 VirtualMachine.prototype.loadProject = function (json) {
+    if (!json) {
+        // Creates 'Stage'
+        var blocks2 = new Blocks();
+        var stage = new Sprite(blocks2);
+        stage.name = 'Stage';
+        stage.costumes.push({
+            skin: '/src/Stage.png',
+            name: 'backdrop1',
+            bitmapResolution: 1,
+            rotationCenterX: 240,
+            rotationCenterY: 180}); 
+        var target2 = stage.createClone();
+        this.runtime.targets.push(target2);
+        target2.x = 0;
+        target2.y = 0;
+        target2.direction = 90;
+        target2.size = 200;
+        target2.visible = true;
+        target2.isStage = true;
+        // Creates 'Sprite1'
+        var blocks1 = new Blocks();
+        var sprite = new Sprite(blocks1);
+        sprite.name = 'Sprite1';
+        sprite.costumes.push({
+            skin: '/src/scratch_cat.svg',
+            name: 'costume1',
+            bitmapResolution: 1,
+            rotationCenterX: 47,
+            rotationCenterY: 55}); 
+        var target1 = sprite.createClone();
+        this.runtime.targets.push(target1);
+        target1.x = 0;
+        target1.y = 0;
+        target1.direction = 90;
+        target1.size = 100;
+        target1.visible = true;
+        this.editingTarget = this.runtime.targets[0];
+        this.emitTargetsUpdate();
+        this.emitWorkspaceUpdate();
+        return;
+    }
     // @todo: Handle other formats, e.g., Scratch 1.4, Scratch 3.0.
     sb2import(json, this.runtime);
     // Select the first target for editing, e.g., the stage.
diff --git a/src/scratch_cat.svg b/src/scratch_cat.svg
new file mode 100644
index 000000000..823455468
--- /dev/null
+++ b/src/scratch_cat.svg
@@ -0,0 +1,42 @@
+
+  
+    
+      
+      
+    
+    
+      
+      
+      
+    
+    
+    
+      
+      
+    
+    
+    
+    
+      
+      
+      
+      
+      
+      
+      
+      
+    
+    
+      
+      
+    
+    
+      
+      
+    
+    
+    
+      
+    
+  
+