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();
+};