scratchfoundation/scratch-vm
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-vm.git synced 2024-12-24 06:52:40 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Offline Support [READY TO MERGE?] [ALONG WITH THE SCRATCH-RENDER PR] (#138)

Browse source 
* 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 2016-09-12 11:05:16 -04:00 committed by Tim Mickel
parent d93eeed05d
commit 40b530fa7e
7 changed files with 158 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

29
playground/index.html
View file

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

53
playground/playground.css
View file

@ -1,6 +1,9 @@
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);
} }
@ -16,13 +19,12 @@ a {
position: absolute; position: absolute;
left: 1%; left: 1%;
right: 60%; right: 60%;
top: 0; top: 1%;
bottom: 0; bottom: 0;
width: 35%; width: 35%;
} }
#blockexplorer, #threadexplorer, #importexport { #blockexplorer, #threadexplorer, #importexport {
position: absolute; position: absolute;
width: 100%;
height: 75%; height: 75%;
overflow: scroll; overflow: scroll;
border: 1px solid #fff; border: 1px solid #fff;
@ -30,17 +32,58 @@ a {
color: rgb(217,217,217); color: rgb(217,217,217);
font-family: monospace; font-family: monospace;
font-size: 10pt; font-size: 10pt;
width: 480px;
height: 360px;
} }
#tab-blockexplorer, #tab-threadexplorer, #tab-importexport { #tab-blockexplorer, #tab-threadexplorer, #tab-importexport {
display: none; display: none;
} }
#importExport { #importExport {
width: 400px; width: 480px;
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-family: monospace;
font-size: 10pt; 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;
}

8
playground/playground.js
View file

@ -1,11 +1,13 @@
var loadProject = function () { 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/' + var url = 'https://projects.scratch.mit.edu/internalapi/project/' +
id + '/get/'; id + '/get/';
var r = new XMLHttpRequest(); var r = new XMLHttpRequest();
r.addEventListener('load', function() { r.onreadystatechange = function() {
if (this.readyState == 4) {
window.vm.loadProject(this.responseText); window.vm.loadProject(this.responseText);
}); }
};
r.open('GET', url); r.open('GET', url);
r.send(); r.send();
}; };

BIN
src/Stage.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.3 KiB

3
src/import/sb2import.js
View file

@ -51,7 +51,8 @@ function parseScratchObject (object, runtime, topLevel) {
var costume = object.costumes[i]; var costume = object.costumes[i];
// @todo: Make sure all the relevant metadata is being pulled out. // @todo: Make sure all the relevant metadata is being pulled out.
sprite.costumes.push({ sprite.costumes.push({
skin: costume.baseLayerMD5, skin: 'https://cdn.assets.scratch.mit.edu/internalapi/asset/'
+ costume.baseLayerMD5 + '/get/',
name: costume.costumeName, name: costume.costumeName,
bitmapResolution: costume.bitmapResolution, bitmapResolution: costume.bitmapResolution,
rotationCenterX: costume.rotationCenterX, rotationCenterX: costume.rotationCenterX,

46
src/index.js
View file

@ -3,6 +3,8 @@ var util = require('util');
var Runtime = require('./engine/runtime'); var Runtime = require('./engine/runtime');
var sb2import = require('./import/sb2import'); var sb2import = require('./import/sb2import');
var Sprite = require('./sprites/sprite');
var Blocks = require('./engine/blocks');
/** /**
* Whether the environment is a WebWorker. * 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. * 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.

42
src/scratch_cat.svg Normal file
View 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&#xD;&#xA;&#x9;&#x9;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&#xD;&#xA;&#x9;&#x9;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&#xD;&#xA;&#x9;&#x9;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&#xD;&#xA;&#x9;&#x9;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&#xD;&#xA;&#x9;&#x9;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&#xD;&#xA;&#x9;&#x9;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&#xD;&#xA;&#x9;&#x9;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&#xD;&#xA;&#x9;&#x9;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&#xD;&#xA;&#x9;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&#xD;&#xA;&#x9;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&#xD;&#xA;&#x9;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&#xD;&#xA;&#x9;&#x9;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&#xD;&#xA;&#x9;&#x9;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&#xD;&#xA;&#x9;&#x9;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&#xD;&#xA;&#x9;&#x9;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&#xD;&#xA;&#x9;&#x9;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&#xD;&#xA;&#x9;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&#xD;&#xA;&#x9;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&#xD;&#xA;&#x9;&#x9;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&#xD;&#xA;&#x9;&#x9;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&#xD;&#xA;&#x9;&#x9;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&#xD;&#xA;&#x9;&#x9;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&#xD;&#xA;&#x9;&#x9;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&#xD;&#xA;&#x9;&#x9;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&#xD;&#xA;&#x9;&#x9;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&#xD;&#xA;&#x9;&#x9;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&#xD;&#xA;&#x9;&#x9;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&#xD;&#xA;&#x9;&#x9;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&#xD;&#xA;&#x9;&#x9;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&#xD;&#xA;&#x9;&#x9;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&#xD;&#xA;&#x9;&#x9;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&#xD;&#xA;&#x9;&#x9;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&#xD;&#xA;&#x9;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&#xD;&#xA;&#x9;&#x9;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>
Side by side

After

Width:  |  Height:  |  Size: 6.5 KiB