{"id":19386113,"url":"https://github.com/iagolirapasssos/blocklytocode","last_synced_at":"2025-07-03T14:07:15.266Z","repository":{"id":252466202,"uuid":"840528798","full_name":"iagolirapasssos/BlocklyToCode","owner":"iagolirapasssos","description":"This project extends the Blockly library with custom blocks for working with dictionaries (or \"maps\"). It includes blocks for creating, manipulating, and querying dictionary structures in JavaScript.","archived":false,"fork":false,"pushed_at":"2025-06-16T00:27:42.000Z","size":1663,"stargazers_count":1,"open_issues_count":1,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-06-16T00:37:23.459Z","etag":null,"topics":["blockly","code","dart","education","javascript","lua","php","python","school"],"latest_commit_sha":null,"homepage":"https://iagolirapasssos.github.io/BlocklyToCode/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/iagolirapasssos.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-08-09T23:33:37.000Z","updated_at":"2025-06-16T00:27:46.000Z","dependencies_parsed_at":"2025-02-24T17:55:25.196Z","dependency_job_id":null,"html_url":"https://github.com/iagolirapasssos/BlocklyToCode","commit_stats":null,"previous_names":["iagolirapasssos/blocklytocode"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/iagolirapasssos/BlocklyToCode","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iagolirapasssos%2FBlocklyToCode","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iagolirapasssos%2FBlocklyToCode/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iagolirapasssos%2FBlocklyToCode/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iagolirapasssos%2FBlocklyToCode/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/iagolirapasssos","download_url":"https://codeload.github.com/iagolirapasssos/BlocklyToCode/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iagolirapasssos%2FBlocklyToCode/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":263339928,"owners_count":23451516,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["blockly","code","dart","education","javascript","lua","php","python","school"],"created_at":"2024-11-10T10:04:18.607Z","updated_at":"2025-07-03T14:07:14.487Z","avatar_url":"https://github.com/iagolirapasssos.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# BlocklyToCode\n\nThis project extends the Blockly library with custom blocks for working with dictionaries (or \"maps\"). It includes blocks for creating, manipulating, and querying dictionary structures in JavaScript.\n\n## Features\n\n- **Create Dictionary with Items**: Create dictionaries with a specified number of key-value pairs.\n- **Create Empty Dictionary**: Create an empty dictionary.\n- **Get Value by Key**: Retrieve values from a dictionary by key.\n- **Set Value by Key**: Set values in a dictionary for given keys.\n- **Get All Keys**: Retrieve all keys from a dictionary.\n- **Get All Values**: Retrieve all values from a dictionary.\n- **Check if Dictionary is Empty**: Check if a dictionary is empty.\n- **Get Dictionary Size**: Get the number of key-value pairs in a dictionary.\n\n## Getting Started\n\nTo use these custom Blockly blocks, follow these steps:\n\n1. **Include Blockly Library**: Ensure you have Blockly included in your project. You can include Blockly via CDN or by downloading it from [Blockly's GitHub repository](https://github.com/google/blockly).\n\n2. **Add Custom Blocks**: Include the custom block definitions and code generation functions provided in this repository. You can integrate them into your existing Blockly workspace setup.\n\n3. **Configure Blockly Workspace**: Configure your Blockly workspace in your HTML and JavaScript files to include the custom toolbox and the ability to generate code from blocks.\n\n### Example Usage\n\nHere's an example of how you might set up a basic Blockly workspace with these custom blocks:\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n\u003chead\u003e\n  \u003ctitle\u003eBlockly Dictionary Blocks\u003c/title\u003e\n  \u003cscript src=\"https://unpkg.com/blockly/blockly.min.js\"\u003e\u003c/script\u003e\n  \u003cscript src=\"script.js\"\u003e\u003c/script\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n  \u003ch1\u003eBlockly Dictionary Blocks Example\u003c/h1\u003e\n  \u003cdiv id=\"blocklyDiv\" style=\"height: 480px; width: 600px;\"\u003e\u003c/div\u003e\n  \u003cxml id=\"toolbox\" style=\"display: none\"\u003e\n    \u003ccategory name=\"Dictionaries\" colour=\"230\"\u003e\n      \u003cblock type=\"maps_create_with\"\u003e\u003c/block\u003e\n      \u003cblock type=\"maps_create_empty\"\u003e\u003c/block\u003e\n      \u003cblock type=\"maps_get\"\u003e\u003c/block\u003e\n      \u003cblock type=\"maps_set\"\u003e\u003c/block\u003e\n      \u003cblock type=\"maps_keys\"\u003e\u003c/block\u003e\n      \u003cblock type=\"maps_values\"\u003e\u003c/block\u003e\n      \u003cblock type=\"maps_is_empty\"\u003e\u003c/block\u003e\n      \u003cblock type=\"maps_length\"\u003e\u003c/block\u003e\n    \u003c/category\u003e\n  \u003c/xml\u003e\n  \u003cbutton id=\"generate-code\"\u003eGenerate Code\u003c/button\u003e\n  \u003cpre id=\"code-output\"\u003e\u003c/pre\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\n```javascript\n// script.js\n\n// Configure the Blockly workspace\nvar workspace = Blockly.inject('blocklyDiv', {\n    toolbox: document.getElementById('toolbox'),\n    scrollbars: true,\n    trashcan: true,\n    zoom: {\n        controls: true,\n        wheel: true,\n        startScale: 1.0,\n        maxScale: 3,\n        minScale: 0.3,\n        scaleSpeed: 1.2\n    },\n    grid: {\n        spacing: 20,\n        length: 3,\n        colour: '#ccc',\n        snap: true\n    },\n    theme: Blockly.Themes.Classic\n});\n\n// Variable to store the current language\nvar currentLanguage = 'javascript';\n\n// Function to generate code\nfunction generateCode() {\n    var code;\n    switch(currentLanguage) {\n        case 'javascript':\n            code = Blockly.JavaScript.workspaceToCode(workspace);\n            break;\n        case 'python':\n            code = Blockly.Python.workspaceToCode(workspace);\n            break;\n        case 'php':\n            code = Blockly.PHP.workspaceToCode(workspace);\n            break;\n        case 'lua':\n            code = Blockly.Lua.workspaceToCode(workspace);\n            break;\n        case 'dart':\n            code = Blockly.Dart.workspaceToCode(workspace);\n            break;\n    }\n    document.getElementById('code-output').textContent = code;\n}\n\n// Add event listener for code generation\ndocument.getElementById('generate-code').addEventListener('click', generateCode);\n\n// Function to change the theme\nfunction changeTheme(themeName) {\n    if (themeName === 'dark') {\n        workspace.setTheme(Blockly.Themes.Dark);\n        document.body.classList.add('dark-theme');\n    } else {\n        workspace.setTheme(Blockly.Themes.Classic);\n        document.body.classList.remove('dark-theme');\n    }\n}\n\n// Add event listener for theme selector\ndocument.getElementById('theme-select').addEventListener('change', function(event) {\n    changeTheme(event.target.value);\n});\n\n// Add event listener for language selector\ndocument.getElementById('language-select').addEventListener('change', function(event) {\n    currentLanguage = event.target.value;\n    generateCode();\n});\n\n// Customize block appearance\nBlockly.HSV_SATURATION = 0.65;\nBlockly.HSV_VALUE = 0.8;\n\n// Resize Blockly workspace on window resize\nwindow.addEventListener('resize', function() {\n    Blockly.svgResize(workspace);\n});\n\n// Manual resizing implementation\nvar resizeHandle = document.getElementById('resize-handle');\nvar codeArea = document.querySelector('.code-area');\nvar isResizing = false;\n\nresizeHandle.addEventListener('mousedown', function(e) {\n    isResizing = true;\n    document.addEventListener('mousemove', resize);\n    document.addEventListener('mouseup', stopResize);\n});\n\nfunction resize(e) {\n    if (isResizing) {\n        var newHeight = window.innerHeight - e.clientY;\n        codeArea.style.height = newHeight + 'px';\n        Blockly.svgResize(workspace);\n    }\n}\n\nfunction stopResize() {\n    isResizing = false;\n    document.removeEventListener('mousemove', resize);\n}\n\n// Include custom block definitions here\n```\n\n## Custom Blocks\n\nThe custom blocks included in this repository are:\n\n- **maps_create_with**: Create a dictionary with specified key-value pairs.\n- **maps_create_empty**: Create an empty dictionary.\n- **maps_get**: Get a value from a dictionary by key.\n- **maps_set**: Set a value in a dictionary for a given key.\n- **maps_keys**: Get all keys from a dictionary.\n- **maps_values**: Get all values from a dictionary.\n- **maps_is_empty**: Check if a dictionary is empty.\n- **maps_length**: Get the number of key-value pairs in a dictionary.\n\n## Contributing\n\nContributions are welcome! If you have suggestions for improvements or find any issues, please open an issue or submit a pull request.\n\n## License\n\nThis project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.\n\n---\n\nFeel free to adjust any part of this README to better fit your project's specifics or to add additional information.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fiagolirapasssos%2Fblocklytocode","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fiagolirapasssos%2Fblocklytocode","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fiagolirapasssos%2Fblocklytocode/lists"}