blockly + shared robots

[Lapin-Blanc]

Hi, I'm planning to use jsbattle for my introductory programming courses. For this, I would like to add two features : one would be to add a Blockly editor below the regular one and the other one would be to make localy created tanks available for all connected students. I'm able to customize Blockly for it to generate correct AI scripts, but wondering if anyone has suggestions about the best way to go for integration, and also about making tanks persistents... Thank you for any help !

[jamro]

That's a really cool concept. I suggest adding an additional code editor type so the user can choose if he/she wants to write the code in JavaScript or compose it from Blockly Blockly

Storing/sharing script could be done by adding additional service to the backend. Please notice that I'm going to migrate from SenecaJS to something else on backend side in the near future so the service needs to be migrated as well. However, it should be a simple service so migration shouldn't be a big deal.

Here is how you could approach it:

Adding Blockly Lib

• add Blockly lib to the project and make sure that all files are copied during build process
  • packages/jsbattle-webpage/build/libs.json
• link copied Blockly lib to index.html
  • packages/jsbattle-webpage/static/index.html

Integrate Blockly Editor

• modify Code Editor widget and integrate blockly there
  • packages/jsbattle-webpage/src/components/common/editor/CodeEditorWidget.js
  • packages/jsbattle-webpage/src/components/screen/editor/EditorScreen.js
  • packages/jsbattle-webpage/src/components/screen/challenges/ChallengeEditorScreen.js
• after clicking Create Tank button ask user if he/she want to use standard editor or Blockly:
  • packages/jsbattle-webpage/src/components/screen/start/StartScreen.js
  • packages/jsbattle-webpage/src/components/screen/editor/CodeRepositoryScreen.js
  • packages/jsbattle-webpage/src/controller/action/codeRepository/createTank.js

Store Blockly Project XMLs

Store locally

• extend AI Repository so it can hold not only the code but also editor type and Blockly XML
  • packages/jsbattle-webpage/src/lib/AiRepository.js
• extendd controller around AI Repository due to the same reason:
  • packages/jsbattle-webpage/src/controller/action/codeRepository
  • packages/jsbattle-webpage/src/controller/action/editor

Store on the server side

• add service that could store AI Script data (including Blockly XMLs)
  • packages/jsbattle-server/src/services
• add service dependency to the Gateway
  • packages/jsbattle-server/src/services/Gateway.js
• expose service API:
  • packages/jsbattle-server/src/services/api/api.js

Add to UI publishing and viewing of shared AIs

• add/modify required views and controllers (you probably need additional tab for that):
  • packages/jsbattle-webpage/src/components
  • packages/jsbattle-webpage/src/controller

---

I probably missed something but this list should include all key places that need to be modified. If you need more info just let me know

[Lapin-Blanc]

Thank you very much for the work you put into your answer. Unfortunately, I'm completely new to Node.js, so it will take some time for me to learn enough to be able to move on. I will focus first on the sharing part, but again, thanx !

[Lapin-Blanc]

Hi again, well, I just tried to build the project (without any modifications), and already getting some errors. What I've done
git clone https://github.com/jamro/jsbattle.git
cd jsbattle
npm install
npm run build
at the end of the build process, I get this error
jsbattle-webpage: Error: No ENV "JSBATTLE_GA_CODE" is defined. Replacement for "GA:XX-XXXXXXXXX-X" in static/index.html cannot be done
I've also tried with the bundled .tar.gz (latest version)
npm version is 6.9.0

[jamro]

See #25 for the answer. I have moved it here for better traceability as it is not related with Blockly

[Lapin-Blanc]

Great ! I will probably focus first on the server side store functionality and follow you advice by adding seneca service to achieve this. I'm taking accelerated courses to get familiar with the project building process but have a basic question : do I have to go through the whole build to test, or is there a faster way ? Really sorry if I sound noobish, but I'm much more familiar with python/django environment

[jamro]

I'm afraid that you need to go through the whole build & test process... that project is quite complex and could be difficult for beginning