From 1c253df3a26ce2a264211619225093b0c9437289 Mon Sep 17 00:00:00 2001 From: Tim Mickel <tim.mickel@gmail.com> Date: Wed, 1 Jun 2016 10:04:56 -0400 Subject: [PATCH] Add a basic demo playground with scratch-blocks --- package.json | 1 + playground/index.html | 81 +++++++++++++++++++++++++++++++++++++++ playground/playground.css | 10 +++++ playground/playground.js | 19 +++++++++ 4 files changed, 111 insertions(+) create mode 100644 playground/index.html create mode 100644 playground/playground.css create mode 100644 playground/playground.js diff --git a/package.json b/package.json index 1fcd00ef3..d7a8b859d 100644 --- a/package.json +++ b/package.json @@ -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" } diff --git a/playground/index.html b/playground/index.html new file mode 100644 index 000000000..495ed36b2 --- /dev/null +++ b/playground/index.html @@ -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> diff --git a/playground/playground.css b/playground/playground.css new file mode 100644 index 000000000..a6292cd4a --- /dev/null +++ b/playground/playground.css @@ -0,0 +1,10 @@ +body { + background: rgb(36,36,36); +} +#blocks { + position: absolute; + left: 40%; + right: 0; + top: 0; + bottom: 0; +} diff --git a/playground/playground.js b/playground/playground.js new file mode 100644 index 000000000..da7dbfe44 --- /dev/null +++ b/playground/playground.js @@ -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(); +};