Fixes for #138 (#166)

* Markup/CSS adjustments * Move assets to folder * Strip extra font-family * More robust handling of project-load fail state * Move empty project creation to its own function * Move green flag/stop back out of the tab * Restore default id
2025-06-13 14:00:52 -04:00 · 2016-09-12 12:03:24 -04:00 · 2016-09-12 12:03:24 -04:00 · 79346c0925
commit 79346c0925
parent 40b530fa7e
7 changed files with 86 additions and 82 deletions
--- a/assets/scratch_cat.svg
+++ b/assets/scratch_cat.svg
--- a/assets/stage.png
+++ b/assets/stage.png
--- a/playground/index.html
+++ b/playground/index.html
@ -9,20 +9,22 @@
 </head>
 <body>
    <div id="vm-devtools">
-        <ul>
-            <li><a id="renderexplorer-link" href="#">Home</a></li>
-            <li><a id="threadexplorer-link" href="#">VM Threads</a></li>
-            <li><a id="blockexplorer-link" href="#">VM Block Representation</a></li>
+        <h2>Scratch VM Playground</h2>
+        <select id="selectedTarget" multiple></select>
+        <div id="projectButtons">
+            <button id="greenflag">Green flag</button>
+            <button id="stopall">Stop</button>
+        </div>
+        <br />
+        <ul id="playgroundLinks">
+            <li><a id="renderexplorer-link" href="#">Renderer</a></li>
+            <li><a id="threadexplorer-link" href="#">Threads</a></li>
+            <li><a id="blockexplorer-link" href="#">Block Representation</a></li>
            <li><a id="importexport-link" href="#">Import/Export</a></li>
        </ul><br />
        <div id="tab-renderexplorer">
-            Home<br />
-            <rendererTop><rendererButtons>
-                <button id="greenflag">Green flag</button>
-                <button id="stopall">Stop</button><br />
-            </rendererButtons></rendererTop>
+            Renderer<br />
            <canvas id="scratch-stage" style="width: 480px; height: 360px;"></canvas><br />
-            <select id="selectedTarget" multiple></select><br />
        </div>
        <div id="tab-threadexplorer">
            Thread explorer
@ -34,13 +36,13 @@
        </div>
        <div id="tab-importexport">
            Import/Export<br />
-            Project ID: <input id="projectId" value="" />
-            <button id="projectLoadButton">Load SB2</button><br />
+            Project ID: <input id="projectId" value="119615668" />
+            <button id="projectLoadButton">Load</button><br />
            <p>
                <input type="button" value="Export to XML" onclick="toXml()">
                &nbsp;
                <input type="button" value="Import from XML" onclick="fromXml()" id="import">
-                <br><br>
+                <br /><br />
                <textarea id="importExport"></textarea>
            </p>
        </div>
--- a/playground/playground.css
+++ b/playground/playground.css
@ -1,12 +1,12 @@
 body {
    background: rgb(36,36,36);
 }
-textarea {
-    resize: none;
-}
 a {
    color: rgb(217,217,217);
 }
+h2 {
+    font-size: 1em;
+}
 #blocks {
    position: absolute;
    left: 40%;
@ -43,8 +43,6 @@ a {
    height: 360px;
    background: rgb(36,36,36);
    color: rgb(217,217,217);
-    font-family: monospace;
-    font-size: 10pt;
 }
 #projectId {
    background: rgb(36,36,36);
@ -52,7 +50,7 @@ a {
    font-family: monospace;
    font-size: 10pt;
 }
-ul {
+ul#playgroundLinks {
    display: block;
    list-style-type: none;
    margin: 0;
@ -60,30 +58,15 @@ ul {
    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 {
+#playgroundLinks li {
    float: left;
 }
-li a {
+#playgroundLinks li a {
    display: block;
    color: white;
    text-align: center;
-    padding: 14px 16px;
-    text-decoration: none;
+    padding: 5px 10px;
 }
-/* Change the link color to #111 (black) on hover */
-li a:hover {
+#playgroundLinks li a:hover {
    background-color: #111;
 }
--- a/playground/playground.js
+++ b/playground/playground.js
@ -1,11 +1,18 @@
 var loadProject = function () {
    var id = location.hash.substring(1);
+    if (id.length < 1) {
+        id = '119615668';
+    }
    var url = 'https://projects.scratch.mit.edu/internalapi/project/' +
        id + '/get/';
    var r = new XMLHttpRequest();
    r.onreadystatechange = function() {
-        if (this.readyState == 4) {
-            window.vm.loadProject(this.responseText);
+        if (this.readyState === 4) {
+            if (r.status === 200) {
+                window.vm.loadProject(this.responseText);
+            } else {
+                window.vm.createEmptyProject();
+            }
        }
    };
    r.open('GET', url);
--- a/src/index.js
+++ b/src/index.js
@ -107,50 +107,8 @@ VirtualMachine.prototype.postIOData = function (device, data) {
 /**
 * Load a project from a Scratch 2.0 JSON representation.
 * @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.
@ -161,6 +119,53 @@ VirtualMachine.prototype.loadProject = function (json) {
    this.runtime.setEditingTarget(this.editingTarget);
 };

+/**
+ * Temporary way to make an empty project, in case the desired project
+ * cannot be loaded from the online server.
+ */
+VirtualMachine.prototype.createEmptyProject = function () {
+    // Stage.
+    var blocks2 = new Blocks();
+    var stage = new Sprite(blocks2);
+    stage.name = 'Stage';
+    stage.costumes.push({
+        skin: '/assets/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;
+    // Sprite1 (cat).
+    var blocks1 = new Blocks();
+    var sprite = new Sprite(blocks1);
+    sprite.name = 'Sprite1';
+    sprite.costumes.push({
+        skin: '/assets/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();
+};
+
 /**
 * Set an editing target. An editor UI can use this function to switch
 * between editing different targets, sprites, etc.
@ -267,6 +272,9 @@ if (ENV_WORKER) {
        case 'setEditingTarget':
            self.vmInstance.setEditingTarget(messageData.targetId);
            break;
+        case 'createEmptyProject':
+            self.vmInstance.createEmptyProject();
+            break;
        case 'loadProject':
            self.vmInstance.loadProject(messageData.json);
            break;
--- a/src/worker.js
+++ b/src/worker.js
@ -80,6 +80,10 @@ VirtualMachine.prototype.loadProject = function (json) {
    this.vmWorker.postMessage({method: 'loadProject', json: json});
 };

+VirtualMachine.prototype.createEmptyProject = function () {
+    this.vmWorker.postMessage({method: 'createEmptyProject'});
+};
+
 VirtualMachine.prototype.setEditingTarget = function (targetId) {
    this.vmWorker.postMessage({method: 'setEditingTarget', targetId: targetId});
 };