Updates all styles save for the tooltip and tracker, which are forthcoming. I just really wanted to commit all these changes.

WebHostLib/static/assets/check.js

@@ -0,0 +1,9 @@
+window.addEventListener('load', () => {
+    document.getElementById('check-button').addEventListener('click', () => {
+        document.getElementById('file-input').click();
+    });
+
+    document.getElementById('file-input').addEventListener('change', () => {
+        document.getElementById('check-form').submit();
+    });
+});

WebHostLib/static/assets/generate.js

@@ -1,9 +1,9 @@
 window.addEventListener('load', () => {
-    document.getElementById('upload-button').addEventListener('click', () => {
+    document.getElementById('generate-game-button').addEventListener('click', () => {
         document.getElementById('file-input').click();
     });
 
     document.getElementById('file-input').addEventListener('change', () => {
-        document.getElementById('upload-form').submit();
+        document.getElementById('generate-game-form').submit();
     });
 });

WebHostLib/static/assets/hostGame.js

@@ -1,13 +1,13 @@
 window.addEventListener('load', () => {
-    document.getElementById('upload-button').addEventListener('click', () => {
+    document.getElementById('host-game-button').addEventListener('click', () => {
         document.getElementById('file-input').click();
     });
 
     document.getElementById('file-input').addEventListener('change', () => {
-        document.getElementById('upload-form').submit();
+        document.getElementById('host-game-form').submit();
     });
 
-    $("#uploads-table").DataTable({
+    $("#host-game-table").DataTable({
         "paging": false,
         "ordering": true,
         "order": [[ 3, "desc" ]],

WebHostLib/static/assets/player-settings.js

@@ -1,7 +1,7 @@
 let spriteData = null;
 
 window.addEventListener('load', () => {
-  const gameSettings = document.getElementById('game-settings');
+  const gameSettings = document.getElementById('player-settings');
   Promise.all([fetchPlayerSettingsYaml(), fetchPlayerSettingsJson(), fetchSpriteData()]).then((results) => {
     // Load YAML into object
     const sourceData = jsyaml.safeLoad(results[0], { json: true });
@@ -175,7 +175,7 @@ const buildUI = (settings) => {
   }
 
   Object.keys(settingTypes).forEach((settingTypeKey) => {
-    const sectionHeader = document.createElement('h1');
+    const sectionHeader = document.createElement('h2');
     sectionHeader.innerText = settingTypes[settingTypeKey];
     settingsWrapper.appendChild(sectionHeader);
 
@@ -200,7 +200,7 @@ const buildUI = (settings) => {
   });
 
   // Build sprite options
-  const spriteOptionsHeader = document.createElement('h1');
+  const spriteOptionsHeader = document.createElement('h2');
   spriteOptionsHeader.innerText = 'Sprite Options';
   settingsWrapper.appendChild(spriteOptionsHeader);
 

WebHostLib/static/assets/styleController.js

@@ -0,0 +1,3 @@
+window.addEventListener('load', () => {
+  // Animate the water by swapping out background images every few seconds, maybe?
+});