Creating a new Category

Create a new folder inside blocks/js

import { OutputType, BlockShape, InputShape } from '$lib/utils/blockRegistryTool';
class XXXBlocks {
	getRegistry () {
		return {
		id: "Name",
		color: 60,
		blocks: [
			]
		};
	}
	//place for functions
}
  
export default XXXBlocks;

Creating a new block

Inside the blocks array you will be defining the blocks.

{
	func: "teststatement",
	text: "statement block",
	shape: BlockShape.STATEMENT
},

Every block needs a function to work

teststatement () {
	return 'void;';
}

Defining the block

  • func : function name of the block
  • text : Text that is shown on the block, using brackets you can make[ARGUMENTS], /n will makes a new line and if you use branches it will be on another branch.
  • shape : For blocks that won´t return anything, but make functions
  1. STATEMENT - Not actually required, but keeps code consistent.
  2. EVENT - floating block with an input inside.Can be replaced with FLOATING, but keeps code consistent.
  3. TERMINAL - block with no blocks allowed to attach after.
  4. FLOATING - block that cannot have any parent blocks
  5. TOPPER - cannot have any blocks attached before it
  6. CUSTOM -  can be used if “manual” is used for the block.
  • output : Blocks that return values.
  1. STRING - returns text
  2. NUMBER - returns number
  3. BOOLEAN - returns true/false
  4. ARRY - returns a list / array
  5. OBJECT - returns a JSON object.
  6. ANY - can be put inside any block.
  7. DISCORD - contains multiple values of discord objects
    1. SERVER
    2. CHANNEL
    3. MESSAGE
    4. MEMBER
  • branches : allows you create multiple branches (even is 1 branch)
  • inline : true/false if the block should be inline or not default - false
  • arguments : if you used any arguments you have to define them here. Mostly you will use type of value with check
    • type : defines which block can be put here.
      1. VALUE - allows other blocks
      2. DUMMY - Can be used for seperating content on a block by a new line.
      3. SPACE - Similar to DUMMY.Can be used for seperating content on a block.
      4. IMAGE
      5. ANGLE - Angle field for directional inputs.
      6. CHECKBOX - Checkbox field usually for toggles.
      7. COLOR - Color field.
      8. MENU - Dropdown menu field with options.
      9. SERIALIZABLE_LABEL - Label that serializes to the project.
      10. NUMBER - Number field. Used for restricting to certain numbers.
      11. TEXT - Text field. Used if blocks shouldnt be used here,but text can still be input here.
      12. MULTILINE_TEXT - Multi-line text field.Similar to TEXT, but new line characters are allowed.
      13. VARIABLE - Variable field. Similar to MENU, but the options are all variables.
      14. DISCORD
        1. SERVER
        2. CHANNEL
        3. MESSAGE
    • check : check is used to check if the block that user puts has the same values. Same as shape
    • options : used for menu. as array of inputs where first value is shown and second is returned in the code.
options: [
	['shown', 'codeshown'],
	['shown2', 'codeshown2']
]

Advanced block

This block changes a variable to another value.

{
	func: "change_variable",
	text: "change [NAME] [CHANGE] [VALUE]",
	shape: BlockShape.STATEMENT,
	inline: true,
	arguments: {
		CHANGE: {
			type: InputShape.MENU,
			options: [
				['add', 'add'],
				['subtract', 'subtract'],
				['multiply by', 'multiply'],
				['divide by', 'divide'],
				['set to', 'set']
			]
		},
		NAME: {
			type: InputShape.VALUE,
			check: OutputType.STRING
		},
		VALUE: {
		type: InputShape.VALUE,
	},
}
...
change_variable(args: any) {
let newName = args.NAME.replace(/'/g, "");
switch (args.CHANGE) {
	case 'add':
		return `${newName} += ${args.VALUE}\n`;
	case 'subtract':
		return `${newName} -= ${args.VALUE}\n`;
	case 'multiply':
		return `${newName} *= ${args.VALUE}\n`;
	case 'divide':
		return `${newName} /= ${args.VALUE}\n`;
	case 'set':
		return `${newName} = ${args.VALUE}\n`;
	default:
		return '';
        }
    }

Warnings

WarningType.

  • RequiredParent - adds warning when blocks root block isn’t correct
  • EmptyInput - when field is empty
fields to define warnings
  • ‘warnings’ - list of warnings
    • type: WarningType
    • message: string
    • inputName: string | string[] - a string or a list of strings that are checked whether they are empty
    • parentType: string | string[] - a string or a list of strings that check whether root block is the right type
Example
{
                    func: "test_warning",
                    text: "Warning parent\n input: [INPUT]",
                    shape: BlockShape.STATEMENT,
                    warnings: [
                        {
                            type: WarningType.RequiredParent,
                            parentType: "coretest_testevent",
                            message: "this block belongs under test event block!"
                        },
                        {
                            type: WarningType.EmptyInput,
                            inputName: "INPUT",
                            message: "Input field is empty"
                        },
                    ],
                    arguments: {
                        INPUT: {
                            type: InputShape.VALUE
                        }
                    }
},

Mutators

Defining it

*required fields for mutator to work
  • *mutator - string field for defining mutator id.
  • *mutatorData
    • *type:
      1. checkbox
    • *inputs: MutatorInput[]
      • *text: string of the field name(use single word for it, this will be removed when inputName field will be added!!!)
      • *type: OutputType or string[] of types
      • *defaultValue: Determines if input on start is shown, boolean(this field will be modified for multiple types or kept for only the checkbox mutator!!!)
      • inputName: is used to get input value when generating js, if left empty will use *text field for input name and then its used to get the value.(used when *text field is with multiple words.)
    • blockType: id of a block as base for block when opening the mutator menu.
    • color: color of the block that is inside the mutator menu

Example of mutator block

//other blocks...
 
{
	func: "test_mainblock",
	text: "statement blockwdwdwdw",
	mutator: "test_mainblock_mutator",
	mutatorData: {
		type: MutatorType.CheckBox,
		inputs: [
            		{
				text: "Title", // text for input text
				type: OutputType.STRING, // type for input added to the main block
				defaultValue: true, // whether the checkbox is checked also will affect if input is showed on start
			},
			{
				text: "Description",
				type: OutputType.STRING,
				defaultValue: false,
			}
		]
	},
	shape: BlockShape.EVENT
}
//other blocks...
Getting input data
    test_mainblock(args: any) {
        return `console.log(${args.Title}, ${args.Description})`
    }