Project Architecture

The View (HTML/CSS)

netnet.studio is a "Single Page Application" (SPA), but unlike most modern SPA's which are developed using front end frameworks for creating SPA's (React, Vue, Angular, etc) netnet.studio is vanilla HTML/CSS/JS (...for now anyways, let's see how this develops). The literal "single page" is www/index.html, the www folder also contains directories for css, images and js. The index page's HTML structure is simply:

<section id="netnet">
  <div id="nn-output"></div>
  <div id="nn-window">
    <canvas id="nn-bg-canvas"></canvas>
    <div id="nn-menu"></div>
    <div id="nn-editor"></div>
  </div>
</section>

The global styles for all the above elements (as well as elements which can later be instantiated like TextBubbles and Widgets) can be found in www/css/styles.css as you would expect.

<div id="nn-output">

The parent <section id="netnet"> element contains two children, the first of which is the <div id="nn-output">. netnet's code editor is an instance of netizen's netitor which can (optionally) render the output of it's code into an <iframe>, this <div id="nn-output"> is the parent element for that <iframe>.

<div id="nn-window">

The second child inside <section id="netnet"> is the <div id="nn-window">, this is netnet's main "window". It contains 3 children, the <canvas id="nn-bg-canvas"> which is the windows background (the gradient that follows your cursor), the <div id="nn-menu"> the top horizontal bar which includes netnet's face (ie. the menu/dialogue system) and lastly the <div id="nn-editor"></div> which is where the instance of the netitor (netizen's code editor) goes.

The Logic (JavaScript)

The main JavaScript file is www/js/main.js, this file does a couple of things. First, it creates instances of the global variables:

const STORE = new StateManager()
const NNE = new Netitor({ /* configuration details */})
window.NNT = new TutorialManager()
window NNW = new WindowManager()
window NNM = new MenuManager()

Then it set's up the event listeners, both for the netitor events as well as global window events.

NNE.on('lint-error', (e) => { /* handle netitor errors messages */ })
NNE.on('cursor-activity', (e) => { /* handle netitor cursor changes */ })
NNE.on('edu-info', (e) => { /* handle netitor edu info messages */ })

window.addEventListener('DOMContentLoaded', (e) => {/* on load logic */})
window.addEventListener('keydown', (e) => {/* shortcut keys */})

If you want a deeper dive into how the instances of the different classes above work check out the README in the repo's wwww/js directory.

Next: State Management