Many small adjustments

- Adjust header width for scrollbar presence
- Added new header assets for grass and dirt
- Adjusted styles for hosted and tracker
- Expand header to implement templating system
- Much more I have forgotten

WebHostLib/static/assets/player-settings.js

@@ -27,6 +27,7 @@ window.addEventListener('load', () => {
 
     document.getElementById('export-button').addEventListener('click', exportSettings);
     document.getElementById('reset-to-default').addEventListener('click', resetToDefaults);
+    adjustHeaderWidth();
   }).catch((error) => {
     gameSettings.innerHTML = `
             <h2>Something went wrong while loading your game settings page.</h2>

WebHostLib/static/assets/styleController.js

@@ -19,7 +19,29 @@ const adjustFooterHeight = () => {
   footer.style.marginTop = `${margin}px`;
 };
 
+const adjustHeaderWidth = () => {
+  // If there is no header, do nothing
+  const header = document.getElementById('base-header');
+  if (!header) { return; }
+
+  const tempDiv = document.createElement('div');
+  tempDiv.style.width = '100px';
+  tempDiv.style.height = '100px';
+  tempDiv.style.overflow = 'scroll';
+  tempDiv.style.position = 'absolute';
+  tempDiv.style.top = '-500px';
+  document.body.appendChild(tempDiv);
+  const scrollbarWidth = tempDiv.offsetWidth - tempDiv.clientWidth;
+  document.body.removeChild(tempDiv);
+
+  const documentRoot = document.compatMode === 'BackCompat' ? document.body : document.documentElement;
+  const margin = (documentRoot.scrollHeight > documentRoot.clientHeight) ? 0-scrollbarWidth : 0;
+  document.getElementById('base-header-right').style.marginRight = `${margin}px`;
+};
+
 window.addEventListener('load', () => {
   adjustFooterHeight();
+  adjustHeaderWidth();
   window.addEventListener('resize', adjustFooterHeight);
+  window.addEventListener('resize', adjustHeaderWidth);
 });

WebHostLib/static/assets/tutorial.js

@@ -44,6 +44,7 @@ window.addEventListener('load', () => {
 
         // Populate page with HTML generated from markdown
         tutorialWrapper.innerHTML += (new showdown.Converter()).makeHtml(results);
+        adjustHeaderWidth();
 
         // Reset the id of all header divs to something nicer
         const headers = Array.from(document.querySelectorAll('h1, h2, h3, h4, h5, h6'));