feat: add block for drawing a circle with a color (#52)

Author: rachel-fenichel

src/blocks/p5_blocks.js

@@ -193,6 +193,27 @@ const draw_emoji = {
   'previousStatement': null,
   'nextStatement': null,
   'colour': 230,
+  'inputsInline': true,
+};
+
+const simpleCircle = {
+  'type': 'simple_circle',
+  'tooltip': '',
+  'helpUrl': '',
+  'message0': 'draw %1 circle %2',
+  'args0': [
+    {
+      'type': 'input_value',
+      'name': 'COLOR',
+    },
+    {
+      'type': 'input_dummy',
+    },
+  ],
+  'previousStatement': null,
+  'nextStatement': null,
+  'colour': 230,
+  'inputsInline': true,
 };
 
 // Create the block definitions for all the JSON-only blocks.
@@ -203,6 +224,7 @@ const jsonBlocks = Blockly.common.createBlockDefinitionsFromJsonArray([
   fill,
   ellipse,
   draw_emoji,
+  simpleCircle,
 ]);
 
 export const blocks = {

src/blocks/p5_generators.js

@@ -68,3 +68,11 @@ forBlock['draw_emoji'] = function (block) {
 sketch.text('${dropdown_emoji}', 150, 200);\n`;
   return code;
 };
+
+forBlock['simple_circle'] = function (block, generator) {
+  const color = generator.valueToCode(block, 'COLOR', Order.ATOMIC) || `'#fff'`;
+  const code = `sketch.fill(${color});
+sketch.stroke(${color});
+sketch.ellipse(150, 150, 50, 50);`;
+  return code;
+};

src/blocks/toolbox.js

@@ -48,6 +48,17 @@ export const toolbox = {
       kind: 'block',
       type: 'draw_emoji',
     },
+    {
+      kind: 'block',
+      type: 'simple_circle',
+      inputs: {
+        COLOR: {
+          shadow: {
+            type: 'colour_picker',
+          },
+        },
+      },
+    },
     {
       kind: 'block',
       type: 'p5_ellipse',