blockly2scafi is a Blockly environment developed in Scala.js and Javascript with a custom code generator for ScaFi.
Try it in Github pages.
- Compile optimized Scala.js with SBT :
sbt fullOptJS
- Open in browser the file index.html
The Blockly environment setup and code generator are written in JavaScript in the resource directory:
- index.html contains the layout of the web page of blockly2scafi, styled by the css file main.css.
- blockly2scafi.js initializes the blocky workspace and defines the toolbox.
- blocks_library.js contains the json definition of the blocks and set up the event listeners used to update the dynamic output type of some blocks.
- scafi_generator.js builds the scafi code generator that translates the Blocks to valid and formatted Scafi Code.
- blocks_library.xml this file is not used by blockly2scafi, it's the exported Blockly Developer Tools library.
- Open Blockly Developer Tools .
- Click on Import Block Library and upload the file blocks_library.xml.
- Define or edit the shape of the blocks using the tool.
- Insert or edit the Blockly definition JSON in blocks_library.js.
- Add the block in the toolbox in blockly2scafi.js.
- Create or edit the code generator function of the block in scafi_generator.js
- Remember to download the block library xml from Blockly Developer Tools and save it in blocks_library.xml.