mirror of
https://github.com/scratchfoundation/scratch-vm.git
synced 2024-12-23 06:23:37 -05:00
Offline Support [READY TO MERGE?] [ALONG WITH THE SCRATCH-RENDER PR] (#138)
* Remove Fallback Project
* Added A Newline and Removed Fallback Project
* Made The SB2 Project Import Field Fit In More With All Other Textboxes
* Better Description Of SB2 Import Field
* Oops!
* The XML Import Area Doses Not Need To Be Resizable!
* That Didn't Work As Planned
* Now it won't rezize
* Added SB3New
* Add Code For SB3New
* Better 404
* Indentation
* NodeJS complains about quotes
* Moved And Renamed SB3New
* Renamed Refrences
* Prefix With ./
* Typo
* Newline Fix
* Scratch Cat By Default!
* Single Quotes And Max Legth Fixed
* Better Comment Above loadProject
* Move newProject to index.js
* Added Dependincies to index.js
* Deleted newProject.js
* Removed Unneeeded Semicolon
* @param {?string}
* Added SVG For Scxratch Cat
* Now Uses Scratch Cat Offline (REQUIRES PULL REQUEST MADE TO SCRATCH-RENDER TO BE MERGED OR IT WILL NOT WORK)
* Added Stage PNG
* Added Stage Creation
* Fix Sizing Issues
* Import And Compatibility With Less Hacky Image Import (Scratch-Render)
* Import And Compatibility With Less Hacky Image Import (Scratch-Render)
* Fixed Line Length
* Added Navigation Bar
* Added CSS For Drop Down Menus
* Nicer Scale
* Nicer Dropdowns
* Remobved Dropdown CSS (It Didn't Work)
* Add Scratch Player Bar CSS
* Add Scratch Player Bar HTML
This commit is contained in:
TheBrokenRail
Tim Mickel
parent
d93eeed05d
commit
40b530fa7e
7 changed files with 158 additions and 25 deletions
|
|
@ -9,19 +9,20 @@
|
|||
</head>
|
||||
<body>
|
||||
<div id="vm-devtools">
|
||||
<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 />
|
||||
<a id="blockexplorer-link" href="#">VM Block Representation</a><br />
|
||||
<a id="importexport-link" href="#">Import/Export</a>
|
||||
</p>
|
||||
<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>
|
||||
<li><a id="importexport-link" href="#">Import/Export</a></li>
|
||||
</ul><br />
|
||||
<div id="tab-renderexplorer">
|
||||
Render<br />
|
||||
<canvas id="scratch-stage" style="width: 480px; height: 360px;"></canvas>
|
||||
Home<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 />
|
||||
<select id="selectedTarget" multiple></select><br />
|
||||
</div>
|
||||
<div id="tab-threadexplorer">
|
||||
Thread explorer
|
||||
|
|
@ -32,8 +33,8 @@
|
|||
<pre id="blockexplorer"></pre>
|
||||
</div>
|
||||
<div id="tab-importexport">
|
||||
Import/Export
|
||||
<input id="projectId" value="119615668" />
|
||||
Import/Export<br />
|
||||
Project ID: <input id="projectId" value="" />
|
||||
<button id="projectLoadButton">Load SB2</button><br />
|
||||
<p>
|
||||
<input type="button" value="Export to XML" onclick="toXml()">
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
};
|
||||
|
|
|
|||
BIN
src/Stage.png
Normal file
BIN
src/Stage.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
|
|
@ -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,
|
||||
|
|
|
|||
46
src/index.js
46
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.
|
||||
|
|
|
|||
42
src/scratch_cat.svg
Normal file
42
src/scratch_cat.svg
Normal file
|
|
@ -0,0 +1,42 @@
|
|||
<svg version="1.1" id="cat" x="0px" y="0px" width="95px" height="111px" viewBox="0 0 95 111" enable-background="new 0 0 95 111" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<g>
|
||||
<g id="Layer_3">
|
||||
<path fill="#FAA51D" stroke="#000000" d="M22.462,79.039c-2.415-0.451-5.304-1.309-7.742-3.503
		C9.268,70.629,7.526,62.535,3.672,64.622c-3.856,2.088-3.782,15.165,8.353,19.194c4.182,1.391,7.998,1.396,11.091,1.312
		c0.811-0.025,7.717-0.654,10.079-4.074c2.361-3.42,0.719-4.272-0.09-4.744C32.295,75.838,25.878,79.677,22.462,79.039z"/>
|
||||
<path fill="#FFFFFF" d="M4.236,64.877c-1.989,0.613-3.075,4.998-2.076,8.484c0.998,3.49,2.634,5.022,3.863,6.398
		c1.528,1.038-0.72-2.402,1.361-4.15c2.075-1.744,5.733-0.914,5.733-0.914s-2.909-3.987-4.57-6.396
		C6.975,65.988,6.359,64.375,4.236,64.877z"/>
|
||||
</g>
|
||||
<g>
|
||||
<path fill="#FAA51D" d="M38.217,86.756c0,0-8.832,6.2-17.071,8.412l0.086,0.215c1.247,1.824,5.87,7.497-0.334,9.496
		c-5.333,1.717-15.12-13.104-10.821-15.902c2.626-1.713,4.892-0.252,4.892-0.252s3.474-1.07,6.001-2.345
		c4.303-2.161,5.784-3.453,5.784-3.453s4.184-4.306,6.856-4.137C36.281,78.96,41.669,83.504,38.217,86.756z"/>
|
||||
<path fill="none" stroke="#231F20" stroke-width="1.2" d="M21.232,95.383c1.247,1.824,5.87,7.497-0.334,9.496
		c-5.333,1.717-15.329-13.344-11.03-16.145c2.626-1.713,5.101-0.01,5.101-0.01s3.474-1.072,6.001-2.348
		c4.303-2.161,5.784-3.453,5.784-3.453"/>
|
||||
<path fill="none" stroke="#231F20" stroke-width="1.2" d="M38.217,86.756c0,0-10.123,7.107-18.804,8.819"/>
|
||||
</g>
|
||||
<path fill="#FAA51D" stroke="#231F20" stroke-width="1.2" d="M52.169,74.885c0,0,1.235,0.165,4.744,3.676
	c3.509,3.508,6.026,2.16,8.911,0.724c2.877-1.443,10.537-6.126,6.49-9.817c-4.049-3.688-6.207,1.146-9.715,2.405
	c-3.512,1.26-5.061-2.487-6.858-4.287c-0.589-0.593-1.188-1.099-1.729-1.505c0,0-0.971-0.76-1.906,2.79
	C51.172,72.412,50.162,73.415,52.169,74.885z"/>
|
||||
<g id="Layer_2_1_">
|
||||
<path fill="#FAA51D" stroke="#231F20" stroke-width="1.2" d="M46.753,82.012c1.188-0.912,2.397-2.402,3.951-4.713
		c1.296-1.927,2.7-5.578,2.7-5.578c0.875-2.521,1.934-6.576-1.902-7.296c-1.553-0.291-4.079-0.098-7.67-0.776
		c-3.593-0.681-6.798-2.522-9.517,2.233c-2.718,4.757-9.59,8.271-1.056,16.563c0,0,4.901,3.842,10.764,9.639
		c4.831,4.775,12.045,10.602,12.045,10.602s18.972,2.188,19.535-0.693c1.922-9.79-14.777-6.911-14.777-6.911
		s-4.605-3.933-6.725-5.794c-3.478-3.059-11.125-10.771-11.125-10.771"/>
|
||||
<path fill="#FFFFFF" d="M51.253,75.434c0,0,2.47-2.66-2.469-5.317c-4.939-2.657-7.213-0.017-8.739,1.521
		c-2.644,2.655,3.443,6.611,3.443,6.611l3.176,3.204c0,0,1.738-1.647,2.499-2.979C50.036,77.26,51.253,75.434,51.253,75.434"/>
|
||||
</g>
|
||||
<g id="Layer_8"/>
|
||||
<path fill="#FAA51D" stroke="#231F20" stroke-width="1.2" d="M29.926,73.218c0.749-0.571,2.889-2.202,4.854-3.657
	c2.428-1.799,6.117-5.849,1.077-7.646c-5.04-1.801-7.507,1.604-11.519,4.946c-2.159,1.801-5.308,2.699-4.319,6.209
	c0.993,3.511,4.862,13.408,11.789,10.17c6.929-3.239-1.799-9.18-3.06-11.157"/>
|
||||
<g id="Layer_2">
|
||||
<path fill="#FAA51D" stroke="#231F20" stroke-width="1.2" d="M52.709,14.156c-1.54-0.143-4.75-0.316-6.518-0.231
		c-4.728,0.225-9.224,1.928-9.224,1.928L23.949,7.357l2.235,18.906c0.646-0.782-10.555,12.804-3.479,24.224
		c7.08,11.426,22.233,16.518,40.988,12.792c18.755-3.729,23.229-14.531,21.986-20.246c-1.242-5.714-8.322-7.823-8.322-7.823
		s-0.09-4.48-3.328-9.97c-1.926-3.268-8.348-8.041-8.348-8.041L62.822,5.647l-7.452,7.204L52.709,14.156z"/>
|
||||
<path fill="#FFFFFF" d="M76.42,35.066l-2.482-2.064l-9.115,2.661c0,0,0,3.419-4.367,4.367c-4.37,0.951-11.211-2.277-11.211-2.277
		L41.46,41.17c0,0-8.437,0.928-8.739,6.081C32.048,58.704,46.1,63.479,51.425,63.783c2.905,0.167,8.235-0.338,12.277-1.141
		c17.752-3.234,22.551-13.919,21.31-19.635c-1.242-5.714-7.978-7.196-7.978-7.196L76.42,35.066z"/>
|
||||
<path fill="none" stroke="#231F20" stroke-width="1.2" d="M10.673,46.155c0,0,4.107,0.374,5.974,0.268
		c1.865-0.107,5.492-0.587,5.492-0.587"/>
|
||||
<path fill="none" stroke="#231F20" stroke-width="1.2" d="M81.656,40.671c0,0,4.549-0.743,6.859-1.549
		c2.715-0.942,4.543-2.545,4.543-2.545"/>
|
||||
<path fill="none" stroke="#231F20" stroke-width="1.2" d="M22.337,41.909c0,0-2.384-1.777-6.117-3.43
		c-4.134-1.831-6.405-2.303-6.405-2.303"/>
|
||||
<path fill="none" stroke="#231F20" stroke-width="1.2" d="M82.117,46.622c0,0,2.726,1.104,5.533,1.385
		c2.77,0.276,4.646,0.11,4.646,0.11"/>
|
||||
<path fill="none" stroke="#000000" stroke-linecap="round" stroke-miterlimit="10" d="M52.35,14.212
		c2.84,0.7,3.887,1.469,3.887,1.469"/>
|
||||
<line fill="none" stroke="#000000" x1="33.898" y1="13.684" x2="39.956" y2="18.042"/>
|
||||
</g>
|
||||
<g id="Layer_5">
|
||||
<path fill="#FFFFFF" stroke="#231F20" d="M71.84,25.366c2.924,4.479,3.033,9.591,0.242,11.415
		c-2.793,1.825-7.426-0.332-10.354-4.813c-2.933-4.48-3.037-9.589-0.244-11.415C64.275,18.73,68.913,20.884,71.84,25.366z"/>
|
||||
<path fill="#231F20" d="M71.089,32.522c0,1.08-0.802,1.956-1.8,1.956c-0.993,0-1.803-0.877-1.803-1.956
		c0-1.08,0.81-1.958,1.803-1.958C70.287,30.564,71.089,31.442,71.089,32.522"/>
|
||||
</g>
|
||||
<g id="Layer_7">
|
||||
<path fill="#FFFFFF" stroke="#231F20" d="M47.867,28.619c2.926,4.48,2.619,9.862-0.681,12.015
		c-3.302,2.159-8.351,0.272-11.276-4.208c-2.928-4.48-2.624-9.86,0.678-12.017C39.891,22.253,44.938,24.137,47.867,28.619z"/>
|
||||
<path fill="#231F20" d="M46.079,34.507c0,1.081-0.803,1.957-1.801,1.957c-0.992,0-1.803-0.878-1.803-1.957
		c0-1.08,0.811-1.957,1.803-1.957C45.274,32.55,46.079,33.427,46.079,34.507"/>
|
||||
</g>
|
||||
<path fill="#5E4A42" stroke="#000000" d="M59.766,37.926c1.854,0,4.555-0.284,4.697,0.569c0.143,0.855-1.709,4.203-2.988,4.345
	c-1.283,0.142-6.125-2.353-6.195-3.919C55.206,37.355,58.055,37.926,59.766,37.926z"/>
|
||||
<g id="Layer_4">
|
||||
<path fill="none" stroke="#231F20" stroke-width="1.2" d="M46.774,45.235c0,0,10.347,3.054,14.217,3.897
		c3.868,0.842,10.851,1.684,10.851,1.684s-7.99,10.245-17.328,7.644C45.176,55.863,45.345,49.975,46.774,45.235z"/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 6.5 KiB |
Loading…
Reference in a new issue