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 1/5] 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();
+};
From 8374d116bf2395b8d5194847efcd448124463382 Mon Sep 17 00:00:00 2001
From: Tim Mickel <tim.mickel@gmail.com>
Date: Wed, 1 Jun 2016 10:18:08 -0400
Subject: [PATCH 2/5] Add a block representation explorer to playground
---
playground/index.html | 7 +++++++
playground/playground.css | 18 ++++++++++++++++++
playground/playground.js | 6 ++++++
3 files changed, 31 insertions(+)
diff --git a/playground/index.html b/playground/index.html
index 495ed36b2..5401ad086 100644
--- a/playground/index.html
+++ b/playground/index.html
@@ -7,7 +7,14 @@
<link rel="stylesheet" href="playground.css">
</head>
<body>
+ <div id="vm-devtools">
+ <div id="tab-blockexplorer">
+ <h2>VM Block Representation</h2>
+ <textarea id="blockexplorer"></textarea>
+ </div>
+ </div>
<div id="blocks"></div>
+
<xml id="toolbox" style="display: none">
<category name="Events">
<block type="event_whenflagclicked"></block>
diff --git a/playground/playground.css b/playground/playground.css
index a6292cd4a..5b89b6f3f 100644
--- a/playground/playground.css
+++ b/playground/playground.css
@@ -8,3 +8,21 @@ body {
top: 0;
bottom: 0;
}
+#vm-devtools {
+ color: rgb(217,217,217);
+ position: absolute;
+ left: 1%;
+ right: 60%;
+ top: 0;
+ bottom: 0;
+ width: 35%;
+}
+#blockexplorer {
+ position: absolute;
+ width: 100%;
+ height: 90%;
+ border: 1px solid #fff;
+ background: rgb(36,36,36);
+ color: rgb(217,217,217);
+ font-family: monospace;
+}
diff --git a/playground/playground.js b/playground/playground.js
index da7dbfe44..d4caf06c9 100644
--- a/playground/playground.js
+++ b/playground/playground.js
@@ -14,6 +14,12 @@ window.onload = function() {
// Block events.
workspace.addChangeListener(vm.blockListener);
+ var explorer = document.getElementById('blockexplorer');
+ workspace.addChangeListener(function() {
+ // On a change, update the block explorer.
+ explorer.innerHTML = JSON.stringify(vm.runtime.blocks, null, 2);
+ });
+
// Run threads
vm.runtime.start();
};
From 4df584bc203cc00ce06e920c8b94484019f99c8f Mon Sep 17 00:00:00 2001
From: Tim Mickel <tim.mickel@gmail.com>
Date: Wed, 1 Jun 2016 10:37:42 -0400
Subject: [PATCH 3/5] Turn off spell check in playground block explorer;
increase font size.
---
playground/index.html | 2 +-
playground/playground.css | 1 +
2 files changed, 2 insertions(+), 1 deletion(-)
diff --git a/playground/index.html b/playground/index.html
index 5401ad086..657b6ba3a 100644
--- a/playground/index.html
+++ b/playground/index.html
@@ -10,7 +10,7 @@
<div id="vm-devtools">
<div id="tab-blockexplorer">
<h2>VM Block Representation</h2>
- <textarea id="blockexplorer"></textarea>
+ <textarea id="blockexplorer" spellcheck="false"></textarea>
</div>
</div>
<div id="blocks"></div>
diff --git a/playground/playground.css b/playground/playground.css
index 5b89b6f3f..294746ce6 100644
--- a/playground/playground.css
+++ b/playground/playground.css
@@ -25,4 +25,5 @@ body {
background: rgb(36,36,36);
color: rgb(217,217,217);
font-family: monospace;
+ font-size: 10pt;
}
From 6593c399c1639a020fbf06818635c10a95214b15 Mon Sep 17 00:00:00 2001
From: Tim Mickel <tim.mickel@gmail.com>
Date: Wed, 1 Jun 2016 10:47:47 -0400
Subject: [PATCH 4/5] Update to use syntax highlighting in block explorer
---
package.json | 1 +
playground/index.html | 5 ++++-
playground/playground.css | 3 ++-
playground/playground.js | 1 +
4 files changed, 8 insertions(+), 2 deletions(-)
diff --git a/package.json b/package.json
index d7a8b859d..8fc379822 100644
--- a/package.json
+++ b/package.json
@@ -19,6 +19,7 @@
},
"devDependencies": {
"eslint": "2.7.0",
+ "highlightjs": "^8.7.0",
"json-loader": "0.5.4",
"scratch-blocks": "git+https://git@github.com/LLK/scratch-blocks.git",
"tap": "5.7.1",
diff --git a/playground/index.html b/playground/index.html
index 657b6ba3a..cbb7c2ac5 100644
--- a/playground/index.html
+++ b/playground/index.html
@@ -5,12 +5,13 @@
<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">
<div id="tab-blockexplorer">
<h2>VM Block Representation</h2>
- <textarea id="blockexplorer" spellcheck="false"></textarea>
+ <pre id="blockexplorer"></pre>
</div>
</div>
<div id="blocks"></div>
@@ -75,6 +76,8 @@
</category>
</xml>
+ <!-- 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>
diff --git a/playground/playground.css b/playground/playground.css
index 294746ce6..f1a54242e 100644
--- a/playground/playground.css
+++ b/playground/playground.css
@@ -20,7 +20,8 @@ body {
#blockexplorer {
position: absolute;
width: 100%;
- height: 90%;
+ height: 80%;
+ overflow: scroll;
border: 1px solid #fff;
background: rgb(36,36,36);
color: rgb(217,217,217);
diff --git a/playground/playground.js b/playground/playground.js
index d4caf06c9..1b8b99523 100644
--- a/playground/playground.js
+++ b/playground/playground.js
@@ -18,6 +18,7 @@ window.onload = function() {
workspace.addChangeListener(function() {
// On a change, update the block explorer.
explorer.innerHTML = JSON.stringify(vm.runtime.blocks, null, 2);
+ window.hljs.highlightBlock(explorer);
});
// Run threads
From e92832772f5b017ccc12a7369d4bfd5830108e9a Mon Sep 17 00:00:00 2001
From: Tim Mickel <tim.mickel@gmail.com>
Date: Wed, 1 Jun 2016 13:12:32 -0400
Subject: [PATCH 5/5] Absolute version number for highlightjs dependency
---
package.json | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/package.json b/package.json
index 8fc379822..fdcb4bc84 100644
--- a/package.json
+++ b/package.json
@@ -19,7 +19,7 @@
},
"devDependencies": {
"eslint": "2.7.0",
- "highlightjs": "^8.7.0",
+ "highlightjs": "8.7.0",
"json-loader": "0.5.4",
"scratch-blocks": "git+https://git@github.com/LLK/scratch-blocks.git",
"tap": "5.7.1",