Add a block representation explorer to playground

This commit is contained in:
Tim Mickel 2016-06-01 10:18:08 -04:00
parent 1c253df3a2
commit 8374d116bf
3 changed files with 31 additions and 0 deletions

View file

@ -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>

View file

@ -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;
}

View file

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