* 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
This commit is contained in:
Tim Mickel 2016-09-12 12:03:24 -04:00 committed by GitHub
parent 40b530fa7e
commit 79346c0925
7 changed files with 86 additions and 82 deletions

View file

Before

(image error) Size: 6.5 KiB

After

(image error) Size: 6.5 KiB

Before After
Before After

View file

Before

(image error) Size: 1.3 KiB

After

(image error) Size: 1.3 KiB

Before After
Before After

View file

@ -9,20 +9,22 @@
</head> </head>
<body> <body>
<div id="vm-devtools"> <div id="vm-devtools">
<ul> <h2>Scratch VM Playground</h2>
<li><a id="renderexplorer-link" href="#">Home</a></li> <select id="selectedTarget" multiple></select>
<li><a id="threadexplorer-link" href="#">VM Threads</a></li> <div id="projectButtons">
<li><a id="blockexplorer-link" href="#">VM Block Representation</a></li> <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> <li><a id="importexport-link" href="#">Import/Export</a></li>
</ul><br /> </ul><br />
<div id="tab-renderexplorer"> <div id="tab-renderexplorer">
Home<br /> Renderer<br />
<rendererTop><rendererButtons>
<button id="greenflag">Green flag</button>
<button id="stopall">Stop</button><br />
</rendererButtons></rendererTop>
<canvas id="scratch-stage" style="width: 480px; height: 360px;"></canvas><br /> <canvas id="scratch-stage" style="width: 480px; height: 360px;"></canvas><br />
<select id="selectedTarget" multiple></select><br />
</div> </div>
<div id="tab-threadexplorer"> <div id="tab-threadexplorer">
Thread explorer Thread explorer
@ -34,13 +36,13 @@
</div> </div>
<div id="tab-importexport"> <div id="tab-importexport">
Import/Export<br /> Import/Export<br />
Project ID: <input id="projectId" value="" /> Project ID: <input id="projectId" value="119615668" />
<button id="projectLoadButton">Load SB2</button><br /> <button id="projectLoadButton">Load</button><br />
<p> <p>
<input type="button" value="Export to XML" onclick="toXml()"> <input type="button" value="Export to XML" onclick="toXml()">
&nbsp; &nbsp;
<input type="button" value="Import from XML" onclick="fromXml()" id="import"> <input type="button" value="Import from XML" onclick="fromXml()" id="import">
<br><br> <br /><br />
<textarea id="importExport"></textarea> <textarea id="importExport"></textarea>
</p> </p>
</div> </div>

View file

@ -1,12 +1,12 @@
body { body {
background: rgb(36,36,36); background: rgb(36,36,36);
} }
textarea {
resize: none;
}
a { a {
color: rgb(217,217,217); color: rgb(217,217,217);
} }
h2 {
font-size: 1em;
}
#blocks { #blocks {
position: absolute; position: absolute;
left: 40%; left: 40%;
@ -43,8 +43,6 @@ a {
height: 360px; height: 360px;
background: rgb(36,36,36); background: rgb(36,36,36);
color: rgb(217,217,217); color: rgb(217,217,217);
font-family: monospace;
font-size: 10pt;
} }
#projectId { #projectId {
background: rgb(36,36,36); background: rgb(36,36,36);
@ -52,7 +50,7 @@ a {
font-family: monospace; font-family: monospace;
font-size: 10pt; font-size: 10pt;
} }
ul { ul#playgroundLinks {
display: block; display: block;
list-style-type: none; list-style-type: none;
margin: 0; margin: 0;
@ -60,30 +58,15 @@ ul {
overflow: hidden; overflow: hidden;
background-color: #333; background-color: #333;
} }
rendererTop { #playgroundLinks li {
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; float: left;
} }
li a { #playgroundLinks li a {
display: block; display: block;
color: white; color: white;
text-align: center; text-align: center;
padding: 14px 16px; padding: 5px 10px;
text-decoration: none;
} }
/* Change the link color to #111 (black) on hover */ #playgroundLinks li a:hover {
li a:hover {
background-color: #111; background-color: #111;
} }

View file

@ -1,11 +1,18 @@
var loadProject = function () { var loadProject = function () {
var id = location.hash.substring(1); var id = location.hash.substring(1);
if (id.length < 1) {
id = '119615668';
}
var url = 'https://projects.scratch.mit.edu/internalapi/project/' + var url = 'https://projects.scratch.mit.edu/internalapi/project/' +
id + '/get/'; id + '/get/';
var r = new XMLHttpRequest(); var r = new XMLHttpRequest();
r.onreadystatechange = function() { r.onreadystatechange = function() {
if (this.readyState == 4) { if (this.readyState === 4) {
window.vm.loadProject(this.responseText); if (r.status === 200) {
window.vm.loadProject(this.responseText);
} else {
window.vm.createEmptyProject();
}
} }
}; };
r.open('GET', url); r.open('GET', url);

View file

@ -107,50 +107,8 @@ VirtualMachine.prototype.postIOData = function (device, data) {
/** /**
* Load a project from a Scratch 2.0 JSON representation. * 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) { 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. // @todo: Handle other formats, e.g., Scratch 1.4, Scratch 3.0.
sb2import(json, this.runtime); sb2import(json, this.runtime);
// Select the first target for editing, e.g., the stage. // Select the first target for editing, e.g., the stage.
@ -161,6 +119,53 @@ VirtualMachine.prototype.loadProject = function (json) {
this.runtime.setEditingTarget(this.editingTarget); 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 * Set an editing target. An editor UI can use this function to switch
* between editing different targets, sprites, etc. * between editing different targets, sprites, etc.
@ -267,6 +272,9 @@ if (ENV_WORKER) {
case 'setEditingTarget': case 'setEditingTarget':
self.vmInstance.setEditingTarget(messageData.targetId); self.vmInstance.setEditingTarget(messageData.targetId);
break; break;
case 'createEmptyProject':
self.vmInstance.createEmptyProject();
break;
case 'loadProject': case 'loadProject':
self.vmInstance.loadProject(messageData.json); self.vmInstance.loadProject(messageData.json);
break; break;

View file

@ -80,6 +80,10 @@ VirtualMachine.prototype.loadProject = function (json) {
this.vmWorker.postMessage({method: 'loadProject', json: json}); this.vmWorker.postMessage({method: 'loadProject', json: json});
}; };
VirtualMachine.prototype.createEmptyProject = function () {
this.vmWorker.postMessage({method: 'createEmptyProject'});
};
VirtualMachine.prototype.setEditingTarget = function (targetId) { VirtualMachine.prototype.setEditingTarget = function (targetId) {
this.vmWorker.postMessage({method: 'setEditingTarget', targetId: targetId}); this.vmWorker.postMessage({method: 'setEditingTarget', targetId: targetId});
}; };