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

src/assets/

This directory contains various assets needed by the web application, in particular sprites used in graphical modules like gturtle and gamegrid.

The sprites subfolder contains the sprites used in gamegrid

assets/
├── global.css
├── img
│   └── tigerjython-icon.svg
└── sprites
    ├── airplane.png
    ├── alga.gif
    ├── alien.gif
    ...
    ├── worm.png
    ├── you_lost.gif
    └── you_win.gif

Note

This sprites folder is mainly used in the gamegrid module for now but can be useful for other things as well.

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.

Listing 1 src/main.ts

import { createApp } from "vue";
import "./assets/global.css";
import App from "./App.vue";

import "vuetify/styles";
import { createVuetify, ThemeDefinition } from "vuetify";
import * as components from "vuetify/components";
import * as directives from "vuetify/directives";
import "@mdi/font/css/materialdesignicons.css";
import { createPinia } from "pinia";

const LightTheme: ThemeDefinition = { ... };

const DarkTheme: ThemeDefinition = { ... };

// UI library
const vuetify = createVuetify({
  components,
  directives,
  theme: {
    defaultTheme: "LightTheme",
    themes: {
      LightTheme,
      DarkTheme,
    },
  },
  defaults: {}, // magic to make the drop-down menu not transparent
});

// Store Library
const pinia = createPinia();

createApp(App).use(vuetify).use(pinia).mount("#app");

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.

Listing 2 src/App.vue

<template>
  <v-app style="overflow: hidden">
    <v-layout>
      <TopBar />
      <OptionsDrawer />
      <v-main style="height: 100vh">
        <MainWindow></MainWindow>
      </v-main>
    </v-layout>
    <TextInput />
  </v-app>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";
import MainWindow from "./Components/MainWindow.vue";
import TextInput from "./Components/TextInput.vue";
import TopBar from "./Components/TopBar.vue";
import OptionsDrawer from "./Components/OptionsDrawer.vue";

export default defineComponent({
  components: { MainWindow, TextInput, TopBar, OptionsDrawer },
});
</script>

<style>
html,
body {
  overflow: hidden !important;
}
</style>

src/Components/ 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.

Components/
├── Alerts.vue
├── Canvas.vue
├── Console.vue
├── Editor.vue         <======= Most complex component in the UI : code Editor
├── MainWindow.vue
├── OptionsDrawer.vue
├── TextInput.vue
└── TopBar.vue

Component hierarchy

The component hierarchy is as follows: