PlayGround

Playground browser application.

Setup

Prerequisites

Tool	Version
git	*
node	>=18.15.0
npm	>=9.5.0

Installation

1. Clone this repository

   git clone git@github.com:bugboxau/PlayGround.git

2. change workdirectory to project,

   cd Playground

3. Install project dependencies

   npm i

Development

1. Run the app in the development mode, Open http://localhost:3000 to view it in the browser

   npm run start

Building

1. Builds the app for production to the build folder.

   npm run build

Ecosystem

This application is built using react.js.

This project was bootstrapped with Create React App.

Libraries

Package	Description
blockly	Build blocks
codemirror	Code preview
@reduxjs/toolkit	State management tool
avrgirl-arduino	Upload hex / binary to arduino
react-bootstrap(bootstrap)	UI component library
bootstrap	UI library
react-router-dom	Page transition (navigation)
axios	HTTP library to make network calls
aws-rum-web	telemetry
@react-three	3D rendering
react-dnd	drag and drop functionality

Directory structure

├── infra
├── public
|  └── media
└── src
   ├── App
   |  ├── Features
   |  |  ├── Common # Shared components, utilities and hooks
   |  |  |  ├── Presentation
   |  |  |  |  ├── Components
   |  |  |  |  ├── Hooks
   |  |  |  |  ├── Providers
   |  |  |  |  ├── Store
   |  |  |  |  └── ViewModels
   |  |  |  └── Repository
   |  |  |     └── Model
   |  |  ├── JoinPlayground
   |  |  |  ├── Presentation
   |  |  |  |  ├── Components
   |  |  |  |  └── Viewmodel
   |  |  |  ├── Repository
   |  |  |  └── Usecase
   |  |  └── Playground
   |  |     ├── Presentation
   |  |     |  ├── Components
   |  |     |  |  ├── CodePlaceholder
   |  |     |  |  ├── CodePreview
   |  |     |  |  ├── Editor
   |  |     |  |  └── Menu
   |  |     |  ├── Screens
   |  |     |  └── ViewModels
   |  |     ├── Repository
   |  |     └── Usecase
   |  |  └── LoginGame # Drag and drop login game
   |  |  └── PlanetMatchGame # 3D solar system - planet match game
   |  ├── Lib # Bugbox blockly extensions
   |  |  └── Blockly
   |  |     ├── blocks # Contains block UI customization and code generation
   |  |     |  ├── comments # comment blocks
   |  |     |  ├── control  # control blocks
   |  |     |  ├── io  # input output blocks
   |  |     └───── variables
   |  └── i18n # Translations
   ├── Assets
   |  ├── Icons
   |  └── Images
   └── Domain # models
      ├── Entity
      ├── Model
      ├── Repository
      └── usecases

Supported platforms

This application will works only on chrome browser, due to the limitation of serial port feature in other modern browsers.

Browser support for features

The following table shows the support for core features of this application

Feature	Browser (version)	supported
Serial port selection	Chrome	✅
Compilation	"	✅
Code upload to arduino nano	"	✅
Code generation	"	✅
Serial port selection	Safari	❌
Compliation	"	✅
Code upload to arduino nano	"	❌
Code generation	"	✅

Note: This application is tested on following devices

Device	OS	tested	supported
Macbook pro	monterey	✅	✅
Chromebook	??	??	??

Blockly

To extend the bugbox blockly implementation, add block implementation details inside of src/App/Lib/Blockly/blocks defintion and generator files.

There are three types of blockly categories are implemented ot avialable in the current application.

1. Control
2. Input & output
3. Comment

Apart from these custom categories, we have a variable category, which is blockly predefined category.

Block definition

A block definiton is a javascript or json configuration, that visualizes how the block should look.

Code generation

Each block definition must have a generator file, which will produce a equavalent code.

InoScript

InoScript is bugbox version code generation implementation, which will combine the generated code, of all the individual blocks, based on the connected nodes (or other blocks).

InoScript now supports following functionalities

1. variables
2. functions
3. void setup
4. void loop
5. import definitions or other declrations including comments

Adding a new block

1. 1 Add BlockType in src/App/Lib/blockly/types.ts
2. 2, 3 Add definition and generator files under a specific block category folder inside of src/App/Lib/Blockly/blocks
3. 4 Add definition and generator imports in src/App/Lib/Blockly/blocks-registry.ts
4. 5 Add block in src/App/Lib/blockly/toolbox.ts to render the block in toolbox category UI

Use generator

Use the following command to complete the steps from 1 to 4,

chmod +x scripts/cli.js
# This command will create a block for servo under control category
./scripts/cli.js b servo -c control

or

npm run add-block b servo -- -c control

Once the files are generated, add the new block in toolbox.ts