-
Notifications
You must be signed in to change notification settings - Fork 1
Architecture
Version 2 adds 3 new subsystems to improve the development and user experiences. This includes a new Input subsystem to streamline interface design, a new Config subsystem to allow simplier interaction with config files, and a new Data Abstraction Layer to allow more powerful and immediate access to the data and interesting statistics.
The web app technically only consists of two HTML pages, index and selection. These are the only two HTML files served by the web server. The current page in the app is determined by which JavaScript file is loaded in when the HTML page loads. Each HTML page pulls in both a series of internal libraries to assist with various app operations and a JavaScript file init.js. This script provides common code for all pages that
- determines the requested page from URL parameter
- loads in the requested page's JavaScript file
- creates service workers for PWA offline
- determines event id (and therefore year) from either URL parameter or cookie
- provides a functions
create_config()andon_config()
All of these above operations are performed on init.js load, before the rest of the HTML page loads. Therefore, page create does not happen yet.
In addition to init.js each HTML file has its own script to both startup page creation and provide helper functions to its pages. These scripts are blank.js and selection.js which belong to index.html and selection.html respectively.
These scripts have only 1 requirement. On page load call create_config(). This init.js provided function creates a new Config object for the current game year, then tells that object to load in configs from localStorage (or the server if not found). It also passes on a function reference to on_config(). This is because all other page activities must happen after configuration is fully loaded and there are asyncronous parts to this activity. Once, it is fully loaded, on_config() creates a new DAL object for the current event, then tells that object to populate itself with all the data from localStorage. Then it calls init_page() which is a function required for all page scripts and apply_theme() which simply applies the current selected theme from the Config.
init_page() is where all the magic happens. It is the first code executed in each page. There should be no other code in the script that runs either on script or page load. The only exception to this rule should be necessary global variables.
Once this function is called control is completely handed off to the requested page. The page has full freedom to do whatever is necessary to complete its tasks.
There are 3 key subsystems provided to all pages. These are the Config and DAL objects created by init.js, as well as, the many input objects input.js provides. Since the Config and DAL objects are already created and loaded in on page load they can be referenced at any time via the variables cfg and dal respectively. Further documention on these subsystems will be created after this document.
Two additional function scripts are provided. utils.js provideds various utility functions and links.js provides functions that build URLs for various pages in the app. Further documentation will also be create for these scripts.