feat: add blocks with text fields (#112)

Author: rachel-fenichel

src/blocks/p5_blocks.js

@@ -216,6 +216,57 @@ const simpleCircle = {
   'inputsInline': true,
 };
 
+const writeTextWithoutShadow = {
+  'type': 'write_text_without_shadow',
+  'tooltip': '',
+  'helpUrl': '',
+  'message0': 'write without shadow %1',
+  'args0': [
+    {
+      'type': 'field_input',
+      'name': 'TEXT',
+      'text': 'bit'
+    },
+  ],
+  'previousStatement': null,
+  'nextStatement': null,
+  'colour': 225
+};
+
+const writeTextWithShadow = {
+  'type': 'write_text_with_shadow',
+  'tooltip': '',
+  'helpUrl': '',
+  'message0': 'write with shadow %1',
+  'args0': [
+    {
+      'type': 'input_value',
+      'name': 'TEXT',
+      'check': 'String'
+    }
+  ],
+  'previousStatement': null,
+  'nextStatement': null,
+  'colour': 225
+};
+
+const textBlock = 
+{
+  'type': 'text_only',
+  'tooltip': '',
+  'helpUrl': '',
+  'message0': '%1',
+  'args0': [
+    {
+      'type': 'field_input',
+      'name': 'TEXT',
+      'text': 'micro'
+    },
+  ],
+  'output': 'String',
+  'colour': 225
+};
+
 // Create the block definitions for all the JSON-only blocks.
 // This does not register their definitions with Blockly.
 const jsonBlocks = Blockly.common.createBlockDefinitionsFromJsonArray([
@@ -225,6 +276,9 @@ const jsonBlocks = Blockly.common.createBlockDefinitionsFromJsonArray([
   ellipse,
   draw_emoji,
   simpleCircle,
+  writeTextWithoutShadow,
+  writeTextWithShadow,
+  textBlock
 ]);
 
 export const blocks = {

src/blocks/p5_generators.js

@@ -80,3 +80,26 @@ sketch.stroke(${color});
 sketch.ellipse(150, 150, 50, 50);`;
   return code;
 };
+
+forBlock['text_only'] = function (block, generator) {
+  const code = generator.quote_(block.getFieldValue('TEXT'));
+  return [code, Order.ATOMIC];
+};
+
+forBlock['write_text_with_shadow'] = function (block, generator) {
+  const text = generator.valueToCode(block, 'TEXT', Order.ATOMIC) || `''`;
+  const code = `\nsketch.stroke(0x000000);
+sketch.fill(0x000000);
+sketch.textSize(100);
+sketch.text(${text}, 50, 350);\n`;
+  return code;
+};
+
+forBlock['write_text_without_shadow'] = function (block, generator) {
+  const text = generator.quote_(block.getFieldValue('TEXT'));
+  const code = `\nsketch.stroke(0x000000);
+sketch.fill(0x000000);
+sketch.textSize(100);
+sketch.text(${text}, 50, 350);\n`;
+  return code;
+};

src/blocks/toolbox.js

@@ -37,5 +37,20 @@ export const toolbox = {
         },
       },
     },
+    {
+      kind: 'block',
+      type: 'write_text_with_shadow',
+      inputs: {
+        TEXT: {
+          shadow: {
+            type: 'text_only',
+          },
+        },
+      },
+    },
+    {
+      kind: 'block',
+      type: 'write_text_without_shadow',
+    },
   ],
 };