Code organization#

The code is organized as a monolith that combines different sub-projects and languages.

Todo

Various features should perhaps be organized following a plugin archtecture to increase flexibility and customizability. It also contains global CSS rules.

Directory structure#

public/assets/ directory#

This directory contains various assets required by the web application. The img folder provides logos, project icons, and various turtle icons. The pygame_assets folder offers a toolbox of images, audio, fonts, and sprites for building pygame games. The roboticsSimulator folder holds graphics for robotics simulations, while the sprites folder contains SVG icons for UI elements.

assets/
├── img/
│   └── turtle-icons/
│
├── pygame_assets/
│   ├── data/
│   └── sprites/
│
├── roboticsSimulator/
│
└── sprites/

src/database/ directory#

This folder contains all logic related to database handling. It provides helper functions, type definitions, and adapters for working with databases.

database/
├── databaseInfoFetchHelper.ts
├── handleDatabase.ts
├── handleSqlite.ts
└── sqliteTypes.ts

src/devices/ directory#

Contains device modules with logic and files for supported hardware such as Calliope, Calliope 3, Micro:bit, Oxocard, and Root Robot.

devices/
├── calliope/
│   ...
│   └── calliope.ts
├── calliope3/
│   ...
│   └── calliope3.ts
├── microbit/
│   ...
│   └── microbit.ts
├── oxocard/
│   ...
│   └── oxocard.ts
├── rootRobot/
│    └── rootRobot.ts
├── deviceInterface.ts
└── deviceStore.ts

src/localisation/ directory#

Provides the available languages for the website as YAML translation files, with an index file to manage them.

localisation/
├── de.yaml
├── en.yaml
├── es.yaml
├── fr.yaml
├── index.ts
├── it.yaml
├── ru.yaml
└── sk.yaml

src/pyodide/ directory#

This folder contains the integration of Pyodide (Python running in the browser via WebAssembly).

pyodide/
├── pyodideStore.ts
├── pyodideWorker.ts
└── serviceWorker.ts

src/python/ directory#

This folder contains the core Python modules and libraries that are available in WebTigerPython. It includes educational frameworks (e.g. gturtle, gpanel, gamegrid), music and sound libraries (gmusic, JythonMusic), robotics integrations (oxocard, rootRobot) and database access.

python/
├── database1/
├── debugger/
├── forbiddenfruit/
├── gamegrid/
├── gmusic/
├── gpanel/
├── gturtle/
├── java/
├── JythonMusic/
├── music/
├── oxocard/
├── pyomqtt/
├── rootRobot/
├── runner/
├── sqlite3Trial/
├── TigerPython/
└── turtle/

src/sound/ directory#

This folder provides modules for handling audio features. It includes instrument definitions, a music store for managing playback, sound data utilities, and a text-to-speech component. Together, these files allow the application to generate, process, and play sounds programmatically.

sound/
├── instruments.d.ts
├── musicStore.ts
├── soundData.ts
└── textToSpeech.ts

src/ui/ directory#

This directory defines all the Vue components the UI is built upon. The most complex one is without any doubt the code editor the students are using to write code.

ui/
├── Alerts/
├── CanvasTabs/
├── Console/
├── Editor/             <======= Most complex component in the UI : code Editor
├── OptionsDrawer/
├── TopBar/
├── Tutorials/
├── UserInput/
│
├── ConsentForm.vue
├── Infopage.vue
├── MainWindow.vue
└── MainWindowPart.vue

src/main.ts#

This is the entry point into the Web App. In particular, it loads the Pinia state manager and Vuetify, the Material CSS framework used throughout the project.

src/App.vue#

This is the main component of the Vue app that is rendered into the #app element of the src/index.html file.

Component hierarchy

The component hierarchy is as follows: