scratch-vm/playground/index.html
TheBrokenRail 40b530fa7e 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
2016-09-12 11:05:16 -04:00

740 lines
26 KiB
HTML

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Scratch VM Playground</title>
<link rel="stylesheet" href="playground.css">
<link rel="stylesheet" href="../node_modules/highlightjs/styles/zenburn.css">
</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>
<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>
<canvas id="scratch-stage" style="width: 480px; height: 360px;"></canvas><br />
<select id="selectedTarget" multiple></select><br />
</div>
<div id="tab-threadexplorer">
Thread explorer
<pre id="threadexplorer"></pre>
</div>
<div id="tab-blockexplorer">
Block explorer
<pre id="blockexplorer"></pre>
</div>
<div id="tab-importexport">
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()">
&nbsp;
<input type="button" value="Import from XML" onclick="fromXml()" id="import">
<br><br>
<textarea id="importExport"></textarea>
</p>
</div>
</div>
<div id="blocks"></div>
<xml id="toolbox" style="display: none">
<category name="Motion" colour="#4C97FF">
<block type="motion_movesteps">
<value name="STEPS">
<shadow type="math_number">
<field name="NUM">10</field>
</shadow>
</value>
</block>
<block type="motion_turnright">
<value name="DEGREES">
<shadow type="math_number">
<field name="NUM">15</field>
</shadow>
</value>
</block>
<block type="motion_turnleft">
<value name="DEGREES">
<shadow type="math_number">
<field name="NUM">15</field>
</shadow>
</value>
</block>
<block type="motion_pointindirection">
<value name="DIRECTION">
<shadow type="math_angle">
<field name="NUM">90</field>
</shadow>
</value>
</block>
<block type="motion_pointtowards">
<value name="TOWARDS">
<shadow type="motion_pointtowards_menu">
</shadow>
</value>
</block>
<block type="motion_gotoxy">
<value name="X">
<shadow type="math_number">
<field name="NUM">0</field>
</shadow>
</value>
<value name="Y">
<shadow type="math_number">
<field name="NUM">0</field>
</shadow>
</value>
</block>
<block type="motion_goto">
<value name="TO">
<shadow type="motion_goto_menu">
</shadow>
</value>
</block>
<block type="motion_glidesecstoxy">
<value name="SECS">
<shadow type="math_number">
<field name="NUM">1</field>
</shadow>
</value>
<value name="X">
<shadow type="math_number">
<field name="NUM">0</field>
</shadow>
</value>
<value name="Y">
<shadow type="math_number">
<field name="NUM">0</field>
</shadow>
</value>
</block>
<block type="motion_changexby">
<value name="DX">
<shadow type="math_number">
<field name="NUM">10</field>
</shadow>
</value>
</block>
<block type="motion_setx">
<value name="X">
<shadow type="math_number">
<field name="NUM">0</field>
</shadow>
</value>
</block>
<block type="motion_changeyby">
<value name="DY">
<shadow type="math_number">
<field name="NUM">10</field>
</shadow>
</value>
</block>
<block type="motion_sety">
<value name="Y">
<shadow type="math_number">
<field name="NUM">0</field>
</shadow>
</value>
</block>
<block type="motion_ifonedgebounce"></block>
<block type="motion_setrotationstyle">
<value name="STYLE">
<shadow type="motion_setrotationstyle_menu"></shadow>
</value>
</block>
<block type="motion_xposition"></block>
<block type="motion_yposition"></block>
<block type="motion_direction"></block>
</category>
<category name="Looks" colour="#9966FF">
<block type="looks_sayforsecs">
<value name="MESSAGE">
<shadow type="text">
<field name="TEXT">Hello!</field>
</shadow>
</value>
<value name="SECS">
<shadow type="math_number">
<field name="NUM">2</field>
</shadow>
</value>
</block>
<block type="looks_say">
<value name="MESSAGE">
<shadow type="text">
<field name="TEXT">Hello!</field>
</shadow>
</value>
</block>
<block type="looks_thinkforsecs">
<value name="MESSAGE">
<shadow type="text">
<field name="TEXT">Hmm...</field>
</shadow>
</value>
<value name="SECS">
<shadow type="math_number">
<field name="NUM">2</field>
</shadow>
</value>
</block>
<block type="looks_think">
<value name="MESSAGE">
<shadow type="text">
<field name="TEXT">Hmm...</field>
</shadow>
</value>
</block>
<block type="looks_show"></block>
<block type="looks_hide"></block>
<block type="looks_switchcostumeto">
<value name="COSTUME">
<shadow type="looks_costume"></shadow>
</value>
</block>
<block type="looks_nextcostume"></block>
<block type="looks_nextbackdrop"></block>
<block type="looks_switchbackdropto">
<value name="BACKDROP">
<shadow type="looks_backdrops"></shadow>
</value>
</block>
<block type="looks_switchbackdroptoandwait">
<value name="BACKDROP">
<shadow type="looks_backdrops"></shadow>
</value>
</block>
<block type="looks_changeeffectby">
<value name="EFFECT">
<shadow type="looks_effectmenu"></shadow>
</value>
<value name="CHANGE">
<shadow type="math_number">
<field name="NUM">10</field>
</shadow>
</value>
</block>
<block type="looks_seteffectto">
<value name="EFFECT">
<shadow type="looks_effectmenu"></shadow>
</value>
<value name="VALUE">
<shadow type="math_number">
<field name="NUM">10</field>
</shadow>
</value>
</block>
<block type="looks_cleargraphiceffects"></block>
<block type="looks_changesizeby">
<value name="CHANGE">
<shadow type="math_number">
<field name="NUM">10</field>
</shadow>
</value>
</block>
<block type="looks_setsizeto">
<value name="SIZE">
<shadow type="math_number">
<field name="NUM">100</field>
</shadow>
</value>
</block>
<block type="looks_gotofront"></block>
<block type="looks_gobacklayers">
<value name="NUM">
<shadow type="math_integer">
<field name="NUM">1</field>
</shadow>
</value>
</block>
<block type="looks_costumeorder"></block>
<block type="looks_backdroporder"></block>
<block type="looks_backdropname"></block>
<block type="looks_size"></block>
</category>
<category name="Sound" colour="#D65CD6">
<block type="sound_play">
<value name="SOUND_MENU">
<shadow type="sound_sounds_option"></shadow>
</value>
</block>
<block type="sound_playuntildone">
<value name="SOUND_MENU">
<shadow type="sound_sounds_option"></shadow>
</value>
</block>
<block type="sound_stopallsounds"></block>
<block type="sound_playdrumforbeats">
<value name="DRUMTYPE">
<shadow type="math_number">
<field name="NUM">1</field>
</shadow>
</value>
<value name="BEATS">
<shadow type="math_number">
<field name="NUM">0.25</field>
</shadow>
</value>
</block>
<block type="sound_restforbeats">
<value name="BEATS">
<shadow type="math_number">
<field name="NUM">0.25</field>
</shadow>
</value>
</block>
<block type="sound_playnoteforbeats">
<value name="NOTE">
<shadow type="math_number">
<field name="NUM">1</field>
</shadow>
</value>
<value name="BEATS">
<shadow type="math_number">
<field name="NUM">0.5</field>
</shadow>
</value>
</block>
<block type="sound_setinstrumentto">
<value name="INSTRUMENT">
<shadow type="math_number">
<field name="NUM">1</field>
</shadow>
</value>
</block>
<block type="sound_changevolumeby">
<value name="VOLUME">
<shadow type="math_number">
<field name="NUM">-10</field>
</shadow>
</value>
</block>
<block type="sound_setvolumeto">
<value name="VOLUME">
<shadow type="math_number">
<field name="NUM">100</field>
</shadow>
</value>
</block>
<block type="sound_volume"></block>
<block type="sound_changetempoby">
<value name="TEMPO">
<shadow type="math_number">
<field name="NUM">20</field>
</shadow>
</value>
</block>
<block type="sound_settempotobpm">
<value name="TEMPO">
<shadow type="math_number">
<field name="NUM">60</field>
</shadow>
</value>
</block>
<block type="sound_tempo"></block>
</category>
<category name="Pen" colour="#00B295">
<block type="pen_clear"></block>
<block type="pen_stamp"></block>
<block type="pen_pendown"></block>
<block type="pen_penup"></block>
<block type="pen_setpencolortocolor">
<value name="COLOR">
<shadow type="colour_picker">
</shadow>
</value>
</block>
<block type="pen_changepencolorby">
<value name="COLOR">
<shadow type="math_number">
<field name="NUM">10</field>
</shadow>
</value>
</block>
<block type="pen_setpencolortonum">
<value name="COLOR">
<shadow type="math_number">
<field name="NUM">0</field>
</shadow>
</value>
</block>
<block type="pen_changepenshadeby">
<value name="SHADE">
<shadow type="math_number">
<field name="NUM">10</field>
</shadow>
</value>
</block>
<block type="pen_setpenshadeto">
<value name="SHADE">
<shadow type="math_number">
<field name="NUM">50</field>
</shadow>
</value>
</block>
<block type="pen_changepensizeby">
<value name="SIZE">
<shadow type="math_number">
<field name="NUM">1</field>
</shadow>
</value>
</block>
<block type="pen_setpensizeto">
<value name="SIZE">
<shadow type="math_number">
<field name="NUM">1</field>
</shadow>
</value>
</block>
</category>
<category name="Data" colour="#FF8C1A" custom="VARIABLE"></category>
<category name="Events" colour="#FFD500">
<block type="event_whenflagclicked"></block>
<block type="event_whenkeypressed">
<value name="KEY_OPTION">
<shadow type="event_keyoptions"></shadow>
</value>
</block>
<block type="event_whenthisspriteclicked"></block>
<block type="event_whenbackdropswitchesto">
<value name="BACKDROP">
<shadow type="event_backdrops"></shadow>
</value>
</block>
<block type="event_whengreaterthan">
<value name="WHENGREATERTHANMENU">
<shadow type="event_whengreaterthanmenu"></shadow>
</value>
<value name="VALUE">
<shadow type="math_number">
<field name="NUM">10</field>
</shadow>
</value>
</block>
<block type="event_whenbroadcastreceived">
<value name="BROADCAST_OPTION">
<shadow type="event_broadcast_menu"></shadow>
</value>
</block>
<block type="event_broadcast">
<value name="BROADCAST_OPTION">
<shadow type="event_broadcast_menu"></shadow>
</value>
</block>
<block type="event_broadcastandwait">
<value name="BROADCAST_OPTION">
<shadow type="event_broadcast_menu"></shadow>
</value>
</block>
</category>
<category name="Control" colour="#FFAB19">
<block type="control_wait">
<value name="DURATION">
<shadow type="math_positive_number">
<field name="NUM">1</field>
</shadow>
</value>
</block>
<block type="control_repeat">
<value name="TIMES">
<shadow type="math_whole_number">
<field name="NUM">10</field>
</shadow>
</value>
</block>
<block type="control_forever"></block>
<block type="control_if"></block>
<block type="control_if_else"></block>
<block type="control_wait_until"></block>
<block type="control_repeat_until"></block>
<block type="control_stop">
<value name="STOP_OPTION">
<shadow type="control_stop_menu"></shadow>
</value>
</block>
<block type="control_start_as_clone"></block>
<block type="control_create_clone_of">
<value name="CLONE_OPTION">
<shadow type="control_create_clone_of_menu"></shadow>
</value>
</block>
<block type="control_delete_this_clone"></block>
</category>
<category name="Sensing" colour="#4CBFE6">
<block type="sensing_touchingobject">
<value name="TOUCHINGOBJECTMENU">
<shadow type="sensing_touchingobjectmenu"></shadow>
</value>
</block>
<block type="sensing_touchingcolor">
<value name="COLOR">
<shadow type="colour_picker"></shadow>
</value>
</block>
<block type="sensing_coloristouchingcolor">
<value name="COLOR">
<shadow type="colour_picker"></shadow>
</value>
<value name="COLOR2">
<shadow type="colour_picker"></shadow>
</value>
</block>
<block type="sensing_distanceto">
<value name="DISTANCETOMENU">
<shadow type="sensing_distancetomenu"></shadow>
</value>
</block>
<block type="sensing_askandwait">
<value name="QUESTION">
<shadow type="text">
<field name="TEXT">What's your name?</field>
</shadow>
</value>
</block>
<block type="sensing_answer"></block>
<block type="sensing_keypressed">
<value name="KEY_OPTION">
<shadow type="sensing_keyoptions"></shadow>
</value>
</block>
<block type="sensing_mousedown"></block>
<block type="sensing_mousex"></block>
<block type="sensing_mousey"></block>
<block type="sensing_loudness"></block>
<block type="sensing_videoon">
<value name="VIDEOONMENU1">
<shadow type="sensing_videoonmenuone"></shadow>
</value>
<value name="VIDEOONMENU2">
<shadow type="sensing_videoonmenutwo"></shadow>
</value>
</block>
<block type="sensing_videotoggle">
<value name="VIDEOTOGGLEMENU">
<shadow type="sensing_videotogglemenu"></shadow>
</value>
</block>
<block type="sensing_setvideotransparency">
<value name="TRANSPARENCY">
<shadow type="math_number">
<field name="NUM">50</field>
</shadow>
</value>
</block>
<block type="sensing_timer"></block>
<block type="sensing_resettimer"></block>
<block type="sensing_current">
<value name="CURRENTMENU">
<shadow type="sensing_currentmenu"></shadow>
</value>
</block>
<block type="sensing_dayssince2000"></block>
<block type="sensing_username"></block>
</category>
<category name="Operators" colour="#40BF4A">
<block type="operator_add">
<value name="NUM1">
<shadow type="math_number">
<field name="NUM"></field>
</shadow>
</value>
<value name="NUM2">
<shadow type="math_number">
<field name="NUM"></field>
</shadow>
</value>
</block>
<block type="operator_subtract">
<value name="NUM1">
<shadow type="math_number">
<field name="NUM"></field>
</shadow>
</value>
<value name="NUM2">
<shadow type="math_number">
<field name="NUM"></field>
</shadow>
</value>
</block>
<block type="operator_multiply">
<value name="NUM1">
<shadow type="math_number">
<field name="NUM"></field>
</shadow>
</value>
<value name="NUM2">
<shadow type="math_number">
<field name="NUM"></field>
</shadow>
</value>
</block>
<block type="operator_divide">
<value name="NUM1">
<shadow type="math_number">
<field name="NUM"></field>
</shadow>
</value>
<value name="NUM2">
<shadow type="math_number">
<field name="NUM"></field>
</shadow>
</value>
</block>
<block type="operator_random">
<value name="FROM">
<shadow type="math_number">
<field name="NUM">1</field>
</shadow>
</value>
<value name="TO">
<shadow type="math_number">
<field name="NUM">10</field>
</shadow>
</value>
</block>
<block type="operator_lt">
<value name="OPERAND1">
<shadow type="text">
<field name="TEXT"></field>
</shadow>
</value>
<value name="OPERAND2">
<shadow type="text">
<field name="TEXT"></field>
</shadow>
</value>
</block>
<block type="operator_equals">
<value name="OPERAND1">
<shadow type="text">
<field name="TEXT"></field>
</shadow>
</value>
<value name="OPERAND2">
<shadow type="text">
<field name="TEXT"></field>
</shadow>
</value>
</block>
<block type="operator_gt">
<value name="OPERAND1">
<shadow type="text">
<field name="TEXT"></field>
</shadow>
</value>
<value name="OPERAND2">
<shadow type="text">
<field name="TEXT"></field>
</shadow>
</value>
</block>
<block type="operator_and"></block>
<block type="operator_or"></block>
<block type="operator_not"></block>
<block type="operator_join">
<value name="STRING1">
<shadow type="text">
<field name="TEXT">hello</field>
</shadow>
</value>
<value name="STRING2">
<shadow type="text">
<field name="TEXT">world</field>
</shadow>
</value>
</block>
<block type="operator_letter_of">
<value name="LETTER">
<shadow type="math_whole_number">
<field name="NUM">1</field>
</shadow>
</value>
<value name="STRING">
<shadow type="text">
<field name="TEXT">world</field>
</shadow>
</value>
</block>
<block type="operator_length">
<value name="STRING">
<shadow type="text">
<field name="TEXT">world</field>
</shadow>
</value>
</block>
<block type="operator_mod">
<value name="NUM1">
<shadow type="math_number">
<field name="NUM"></field>
</shadow>
</value>
<value name="NUM2">
<shadow type="math_number">
<field name="NUM"></field>
</shadow>
</value>
</block>
<block type="operator_round">
<value name="NUM">
<shadow type="math_number">
<field name="NUM"></field>
</shadow>
</value>
</block>
<block type="operator_mathop">
<value name="OPERATOR">
<shadow type="operator_mathop_menu"></shadow>
</value>
<value name="NUM">
<shadow type="math_number">
<field name="NUM"></field>
</shadow>
</value>
</block>
</category>
<category name="More Blocks" colour="#FF6680"></category>
</xml>
<!-- FPS counter -->
<script src="../node_modules/stats.js/build/stats.min.js"></script>
<!-- Syntax highlighter -->
<script src="../node_modules/highlightjs/highlight.pack.min.js"></script>
<!-- Scratch Blocks -->
<!-- For easier development between the two, use `npm link` -->
<script src="../node_modules/scratch-blocks/blockly_compressed_vertical.js"></script>
<script src="../node_modules/scratch-blocks/blocks_compressed.js"></script>
<script src="../node_modules/scratch-blocks/blocks_compressed_vertical.js"></script>
<script src="../node_modules/scratch-blocks/msg/messages.js"></script>
<!-- Renderer -->
<script src="../node_modules/scratch-render/render.js"></script>
<!-- VM Worker -->
<script src="../vm.worker.js"></script>
<!-- Playground -->
<script src="./playground.js"></script>
<script>
function toXml() {
var output = document.getElementById('importExport');
var xml = Blockly.Xml.workspaceToDom(workspace);
output.value = Blockly.Xml.domToPrettyText(xml);
output.focus();
output.select();
}
function fromXml() {
var input = document.getElementById('importExport');
var xml = Blockly.Xml.textToDom(input.value);
Blockly.Xml.domToWorkspace(workspace, xml);
}
</script>
</body>
</html>