JSFiddle - React, Tailwind, and code Playground

by extempl

HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Blockly Demo: Step Execution with JS Interpreter</title>
  <script src="https://blockly-demo.appspot.com/static/demos/interpreter/acorn_interpreter.js"></script>
  <script src="https://blockly-demo.appspot.com/static/blockly_compressed.js"></script>
  <script src="https://blockly-demo.appspot.com/static/blocks_compressed.js"></script>
  <script src="https://blockly-demo.appspot.com/static/javascript_compressed.js"></script>
  <script src="https://blockly-demo.appspot.com/static/msg/js/en.js"></script>
  <style>
    body {
      background-color: #fff;
      font-family: sans-serif;
    }

    h1 {
      font-weight: normal;
      font-size: 140%;
    }
  </style>
</head>
<body>
<p>
  <button onclick="stepCode()" id="stepButton">Step JavaScript</button>
</p>
<div style="width: 100%">
  <div id="blocklyDiv"
       style="display: inline-block; height: 480px; width: 58%"></div>
  <textarea id="output" disabled="disabled"
            style="display: inline-block; height: 480px; width: 38%;">
    </textarea>
</div>

<xml id="toolbox" style="display: none">
  <category name="Logic" colour="%{BKY_LOGIC_HUE}">
    <block type="controls_if"></block>
    <block type="logic_compare"></block>
    <block type="logic_operation"></block>
    <block type="logic_negate"></block>
    <block type="logic_boolean"></block>
  </category>
  <category name="Loops" colour="%{BKY_LOOPS_HUE}">
    <block type="controls_repeat_ext">
      <value name="TIMES">
        <block type="math_number">
          <field name="NUM">10</field>
        </block>
      </value>
    </block>
    <block type="controls_whileUntil"></block>
  </category>
  <category name="Math" colour="%{BKY_MATH_HUE}">
    <block type="math_number">
      <field name="NUM">123</field>
    </block>
    <block type="math_arithmetic"></block>
    <block type="math_single"></block>
  </category>
  <category name="Text" colour="%{BKY_TEXTS_HUE}">
    <block...

JavaScript

window.instructionStructure = [];

  Blockly.Blocks['select_hand_position'] = {
    init: function() {
      this.appendDummyInput()
      .appendField("Move");
      this.appendDummyInput()
      .appendField(new Blockly.FieldDropdown([["left hand", "Left hand"], ["right hand", "Right hand"]]), "handSelect")
      .appendField("to index")
      .appendField(new Blockly.FieldNumber(0), "indexSelect");
      this.setPreviousStatement(true, null);
      this.setNextStatement(true, null);
      this.setColour(290);
      this.setTooltip("");
      this.setHelpUrl("");
    }
  };
  Blockly.JavaScript['select_hand_position'] = function(block) {
    var dropdown_handselect = block.getFieldValue('handSelect');
    var number_indexselect = block.getFieldValue('indexSelect');
    var input = '["' + dropdown_handselect + '",' + number_indexselect + ']';
    var code = 'pushInstruction("select_hand_position",' + input + ');'
    return code;
  };


  var demoWorkspace = Blockly.inject('blocklyDiv',
    {
      media: 'https://blockly-demo.appspot.com/static/media/',
      toolbox: document.getElementById('toolbox')
    });
  Blockly.Xml.domToWorkspace(document.getElementById('startBlocks'),
    demoWorkspace);

  var outputArea = document.getElementById('output');
  var stepButton = document.getElementById('stepButton');
  var myInterpreter = null;

  function initApi(interpreter, scope) {
    // Add an API function for the alert() block, generated for "text_print" blocks.
    interpreter.setProperty(scope, 'alert',
      interpreter.createNativeFunction(function(text) {
        text = text ? text.toString() : '';
        outputArea.value += '\n' + text;
      }));

    // Add an API function for the prompt() block.
    var wrapper = function(text) {
      text = text ? text.toString() : '';
      return interpreter.createPrimitive(prompt(text));
    };
    interpreter.setProperty(scope, 'prompt',
      interpreter.createNativeFunction(wrapper));

    // Add an API function...