This PR adds a lot of changes to the project organization, although it shouldn't modify the program's functionality or output at all.
The main changes are:
Webpack is used for turning sources into "distributable" files.
Sources, data files and bundled / compiled files were moved to separate directories to keep things clearer.
The project now needs the installation of dependencies in order to compile / bundle.
Critical consequences from accepting this PR:
You'll need to install dependencies by running npm install from the root directory. This will create a nodes_modules and download a lot of code into it. This is only done once now, and after pulling any commit which changes or updates the project's dependencies (which are listed in package.json).
You'll need to run npm run build to build the sources, or npm run watch to run have the process automatically recompile after saving any of the sources. You should build before commiting changes, to be safe. If you use an IDE you can run the build or watch tasks from it... (e.g. in WebStorm you right click on package.json and select "Show npm scripts").
Sources are now in the src directory. Neither the index.html in the root folder nor the sources in assets should be modified directly, since they'll be overwritten.
The index.html no longer contains CSS or JS. It should stay like that. JS code in that file was moved to src/main.js
Involuntary changes to the model
I tried to make these changes without affecting covid-game-V2.js... unfortunately I needed to do some minor modifications. These are:
Symbols in covid-game-V2.js that are accessed in main.js need to be explicitly exported by adding an "export" keyword before their declaration. The good side effect from this is that the model's public API is more explicit.
There were 3 or 4 duplicate function declarations. I didn't check in depth, but I think that when you merged the branch that implemented the line chart git reported a conflict, presented "before" and "after" versions of some functions in the source file, and both were merged. Something like that. Webpack complained and I had to remove the duplicate code.
Webpack also complained of for ... of ... constructs that had undeclared symbols on the first argument. i.e. you shouldn't do for item of collection but rather for let item of collection or for const item of collection.
A couple of global constants (e.g. cov_pars, possible_measures) didn't have const in their declaration, and thus couldn't be exported.
At this point I didn't want to refactor the main.js either, but there was some problematic binding of HTML events that I had to turn around (e.g. event should be bound from JS -> HTML by using addEventListener, and not from HTML -> by doing onclick=..., because when you use JS modules all JS symbols are hidden from the HTML unless you explicitly make them global... which is messy).
Other notes FYI
I kept both sources and bundled files in the repository so github pages keeps working. It's also possible to keep only sources in the repository and create a separate gh-pages branch where the bundled distributables are manually pushed (there's an npm package called gh-pages which helps with this). I could change the project to work this way, but at this point I opted for a less disruptive and more agile solution by keeping things working as they were. It can be changed later.
It might be desirable to have options to do separate production and development builds in the future (production builds are often smaller, development builds are optimized for faster recompilation). I didn't concern myself with this at this point, to keep things simpler... but this would be a reasonable change later.
I can also add babel to webpack, which would transpile JS sources to make them compatible with older browsers. We can do this before launch.
Important
Please test the model a bit before merging. The changes I had to do to main.js could have some unintended consequences (hopefully no).
Also, check if you can run npm run build and everything works. You can delete everything in assets and see if the build script recreates the files there. SOMETIMES development tools have native dependencies and/or are affected by differences in the OS... I work in MacOS, so it's not impossible that the workflow needs some tweaking for Windows or Linux (most likely Windows).
This PR adds a lot of changes to the project organization, although it shouldn't modify the program's functionality or output at all.
The main changes are:
Critical consequences from accepting this PR:
npm installfrom the root directory. This will create anodes_modulesand download a lot of code into it. This is only done once now, and after pulling any commit which changes or updates the project's dependencies (which are listed inpackage.json).npm run buildto build the sources, ornpm run watchto run have the process automatically recompile after saving any of the sources. You shouldbuildbefore commiting changes, to be safe. If you use an IDE you can run thebuildorwatchtasks from it... (e.g. in WebStorm you right click on package.json and select "Show npm scripts").srcdirectory. Neither theindex.htmlin the root folder nor the sources inassetsshould be modified directly, since they'll be overwritten.src/main.jsInvoluntary changes to the model
I tried to make these changes without affecting
covid-game-V2.js... unfortunately I needed to do some minor modifications. These are:covid-game-V2.jsthat are accessed inmain.jsneed to be explicitly exported by adding an "export" keyword before their declaration. The good side effect from this is that the model's public API is more explicit.for ... of ...constructs that had undeclared symbols on the first argument. i.e. you shouldn't dofor item of collectionbut ratherfor let item of collectionorfor const item of collection.cov_pars,possible_measures) didn't haveconstin their declaration, and thus couldn't be exported.At this point I didn't want to refactor the
main.jseither, but there was some problematic binding of HTML events that I had to turn around (e.g. event should be bound from JS -> HTML by using addEventListener, and not from HTML -> by doingonclick=..., because when you use JS modules all JS symbols are hidden from the HTML unless you explicitly make them global... which is messy).Other notes FYI
gh-pagesbranch where the bundled distributables are manually pushed (there's an npm package called gh-pages which helps with this). I could change the project to work this way, but at this point I opted for a less disruptive and more agile solution by keeping things working as they were. It can be changed later.productionanddevelopmentbuilds in the future (production builds are often smaller, development builds are optimized for faster recompilation). I didn't concern myself with this at this point, to keep things simpler... but this would be a reasonable change later.babelto webpack, which would transpile JS sources to make them compatible with older browsers. We can do this before launch.Important
Please test the model a bit before merging. The changes I had to do to
main.jscould have some unintended consequences (hopefully no).Also, check if you can run
npm run buildand everything works. You can delete everything inassetsand see if thebuildscript recreates the files there. SOMETIMES development tools have native dependencies and/or are affected by differences in the OS... I work in MacOS, so it's not impossible that the workflow needs some tweaking for Windows or Linux (most likely Windows).