Add a basic demo playground with scratch-blocks

This commit is contained in:
Tim Mickel 2016-06-01 10:04:56 -04:00
parent aee9447899
commit 1c253df3a2
4 changed files with 111 additions and 0 deletions

View file

@ -20,6 +20,7 @@
"devDependencies": {
"eslint": "2.7.0",
"json-loader": "0.5.4",
"scratch-blocks": "git+https://git@github.com/LLK/scratch-blocks.git",
"tap": "5.7.1",
"webpack": "1.13.0"
}

81
playground/index.html Normal file
View file

@ -0,0 +1,81 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Scratch VM Playground</title>
<link rel="stylesheet" href="playground.css">
</head>
<body>
<div id="blocks"></div>
<xml id="toolbox" style="display: none">
<category name="Events">
<block type="event_whenflagclicked"></block>
<block type="event_whenbroadcastreceived"></block>
<block type="event_broadcast"></block>
</category>
<category name="Control">
<block type="control_forever"></block>
<block type="control_repeat">
<value name="TIMES">
<shadow type="math_number">
<field name="NUM">4</field>
</shadow>
</value>
</block>
<block type="control_if"></block>
<block type="control_if_else"></block>
<block type="control_stop"></block>
<block type="control_wait">
<value name="DURATION">
<shadow type="math_number">
<field name="NUM">1</field>
</shadow>
</value>
</block>
</category>
<category name="Wedo">
<block type="wedo_setcolor"></block>
<block type="wedo_motorspeed"></block>
<block type="wedo_whentilt"></block>
<block type="wedo_whendistanceclose"></block>
</category>
<category name="Operators">
<block type="math_add">
<value name="NUM1">
<shadow type="math_number">
<field name="NUM">0</field>
</shadow>
</value>
<value name="NUM2">
<shadow type="math_number">
<field name="NUM">0</field>
</shadow>
</value>
</block>
<block type="logic_equals">
<value name="VALUE1">
<shadow type="text">
<field name="TEXT">0</field>
</shadow>
</value>
<value name="VALUE2">
<shadow type="text">
<field name="TEXT">0</field>
</shadow>
</value>
</block>
</category>
</xml>
<!-- 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>
<!-- Compiled VM -->
<script src="../vm.js"></script>
<!-- Playground -->
<script src="./playground.js"></script>
</body>
</html>

10
playground/playground.css Normal file
View file

@ -0,0 +1,10 @@
body {
background: rgb(36,36,36);
}
#blocks {
position: absolute;
left: 40%;
right: 0;
top: 0;
bottom: 0;
}

19
playground/playground.js Normal file
View file

@ -0,0 +1,19 @@
window.onload = function() {
// Lots of global variables to make debugging easier
var vm = new window.VirtualMachine();
window.vm = vm;
var toolbox = document.getElementById('toolbox');
var workspace = window.Blockly.inject('blocks', {
toolbox: toolbox,
media: '../node_modules/scratch-blocks/media/'
});
window.workspace = workspace;
// @todo: Also bind to flyout events, block running feedback.
// Block events.
workspace.addChangeListener(vm.blockListener);
// Run threads
vm.runtime.start();
};