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('resize', (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.

Global Objects

It's worth mentioning that in addition to these global variables there are a few global utility objects loaded into netnet (which we can see included in the list of <script> tags at the bottom of netnet's www/indext.html page) these are:

• Maths a simple JS class with static math functions not included in the JS standard library Math object.
• Colors a simple JS class with static functions for doing different color maths, like converting a hex color value into an hsl string and vice-versa.
• Averigua a simple JS class that checks for all sorts of things, like the type of browser the user is using, whether it's mobile or not, font support, audio support, etc.

As well as...

• window.utils which is a collection of utility functions shared by various other files in www/js
• window.greetings which is all the logic related to the initial loading screen and the initial conversation with netnet.

Next: Creating Widgets