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'));

WebHostLib/static/styles/globalStyles.css

@@ -101,3 +101,16 @@ h5, h6{
     padding-bottom: 120px;
 }
 
+.user-message{
+    width: 50%;
+    min-width: 500px;
+    padding-top: 5px;
+    padding-bottom: 5px;
+    text-align: center;
+    margin-left: auto;
+    margin-right: auto;
+    color: #000000;
+    border-radius: 4px;
+    margin-bottom: 20px;
+    background-color: #ffff00;
+}

WebHostLib/static/styles/header/baseHeader.css

@@ -2,11 +2,10 @@ html{
     padding-top: 110px;
 }
 
-#cloud-header{
+#base-header{
     display: flex;
     flex-direction: row;
-    justify-content: flex-start;
+    justify-content: space-between;
-    background: url('../static/backgrounds/header/cloud-header.png') repeat-x;
     background-size: auto 90px;
     width: calc(100% - 20px);
     height: 90px;
@@ -19,20 +18,26 @@ html{
     z-index: 9999;
 }
 
-#cloud-header #site-title{
+#base-header #base-header-left{
+    display: flex;
+    flex-direction: row;
+}
+
+#base-header #base-header-left a{
+    margin-right: 0;
+    padding-right: 7px;
+}
+
+#base-header #site-title{
     margin-right: 7px;
 }
 
-#cloud-header #cloud-header-spacer{
+#base-header #site-title img{
-    flex-grow: 1
-}
-
-#cloud-header #site-title img{
     width: 40px;
     height: 40px;
 }
 
-#cloud-header a{
+#base-header a{
     color: #2f6b83;
     text-decoration: none;
     cursor: pointer;

WebHostLib/static/styles/header/dirtHeader.css

@@ -0,0 +1,3 @@
+#base-header{
+    background: url('../../static/backgrounds/header/dirt-header.png') repeat-x;
+}

WebHostLib/static/styles/header/grassHeader.css

@@ -0,0 +1,3 @@
+#base-header{
+    background: url('../../static/backgrounds/header/grass-header.png') repeat-x;
+}

WebHostLib/static/styles/header/oceanHeader.css

@@ -0,0 +1,3 @@
+#base-header{
+    background: url('../../static/backgrounds/header/ocean-header.png') repeat-x;
+}

WebHostLib/static/styles/tracker.css

@@ -26,9 +26,15 @@ html{
     line-height: 20px;
 }
 
+#tracker-header-bar .info{
+    color: #ffffff;
+}
+
 #search{
+    border: 1px solid #000000;
+    border-radius: 3px;
+    padding: 3px;
     width: 200px;
-    height: 20px;
     margin-bottom: 0.5rem;
     margin-right: 1rem;
 }

WebHostLib/templates/check.html

@@ -8,7 +8,7 @@
 {% endblock %}
 
 {% block body %}
-    {% include 'cloudHeader.html' %}
+    {% include 'header/oceanHeader.html' %}
     <div id="check-wrapper">
         <div id="check" class="grass-island">
             <h3>Upload Yaml</h3>

WebHostLib/templates/checkResult.html

@@ -7,7 +7,7 @@
 {% endblock %}
 
 {% block body %}
-    {% include 'cloudHeader.html' %}
+    {% include 'header/oceanHeader.html' %}
     <div id="check-result-wrapper">
         <div id="check-result" class="grass-island">
             {% for filename, resulttext in results.items() %}

WebHostLib/templates/cloudHeader.html

@@ -1,18 +0,0 @@
-{% block head %}
-    <link rel="stylesheet" type="text/css" href="{{ static_autoversion("styles/cloudHeader.css") }}" />
-{% endblock %}
-
-{% block header %}
-    <header id="cloud-header">
-        <a href="/" id="site-title">
-            <img src="/favicon.ico" alt="Favicon" />
-        </a>
-        <a href="/">multiworld randomizer</a>
-        <div id="cloud-header-spacer"></div>
-        <a href="/generate">start game</a>
-        <a href="/uploads">host game</a>
-        <a href="/tutorial">setup guide</a>
-        <a href="/player-settings">player settings</a>
-        <a href="https://discord.gg/8Z65BR2">discord</a>
-    </header>
-{% endblock %}

WebHostLib/templates/generate.html

@@ -8,7 +8,7 @@
 {% endblock %}
 
 {% block body %}
-    {% include 'cloudHeader.html' %}
+    {% include 'header/oceanHeader.html' %}
     <div id="generate-game-wrapper">
         <div id="generate-game" class="grass-island">
             <h1>Start Game{% if race %} (Race Mode){% endif %}</h1>

WebHostLib/templates/header/baseHeader.html

@@ -0,0 +1,21 @@
+{% block head %}
+    <link rel="stylesheet" type="text/css" href="{{ static_autoversion("styles/header/baseHeader.css") }}" />
+{% endblock %}
+
+{% block header %}
+    <header id="base-header">
+        <div id="base-header-left">
+            <a href="/" id="site-title">
+                <img src="/favicon.ico" alt="Favicon" />
+            </a>
+            <a href="/">multiworld randomizer</a>
+        </div>
+        <div id="base-header-right">
+            <a href="/generate">start game</a>
+            <a href="/uploads">host game</a>
+            <a href="/tutorial">setup guide</a>
+            <a href="/player-settings">player settings</a>
+            <a href="https://discord.gg/8Z65BR2">discord</a>
+        </div>
+    </header>
+{% endblock %}

WebHostLib/templates/header/dirtHeader.html

@@ -0,0 +1,5 @@
+{% block head %}
+    <link rel="stylesheet" type="text/css" href="{{ static_autoversion("styles/header/dirtHeader.css") }}" />
+{% endblock %}
+
+{% include 'header/baseHeader.html' %}

WebHostLib/templates/header/grassHeader.html

@@ -0,0 +1,5 @@
+{% block head %}
+    <link rel="stylesheet" type="text/css" href="{{ static_autoversion("styles/header/grassHeader.css") }}" />
+{% endblock %}
+
+{% include 'header/baseHeader.html' %}

WebHostLib/templates/header/oceanHeader.html

@@ -0,0 +1,5 @@
+{% block head %}
+    <link rel="stylesheet" type="text/css" href="{{ static_autoversion("styles/header/oceanHeader.css") }}" />
+{% endblock %}
+
+{% include 'header/baseHeader.html' %}

WebHostLib/templates/hostGame.html

@@ -8,7 +8,7 @@
 {% endblock %}
 
 {% block body %}
-    {% include 'cloudHeader.html' %}
+    {% include 'header/oceanHeader.html' %}
 
     <div id="host-game-wrapper">
         <div id="host-game" class="grass-island {% if rooms %}wider{% endif %}">

WebHostLib/templates/hostRoom.html

@@ -6,7 +6,7 @@
 {% endblock %}
 
 {% block body %}
-    {% include 'cloudHeader.html' %}
+    {% include 'header/grassHeader.html' %}
     <div id="host-room">
         {% if room.owner == session["_id"] %}
             Room created from <a href="{{ url_for("viewSeed", seed=room.seed.id) }}">Seed #{{ room.seed.id|suuid }}</a>

WebHostLib/templates/pageWrapper.html

@@ -19,7 +19,7 @@
     {% if messages %}
         <div>
             {% for message in messages %}
-                <div class="alert alert-danger" role="alert">{{ message }}</div>
+                <div class="user-message">{{ message }}</div>
             {% endfor %}
         </div>
     {% endif %}

WebHostLib/templates/playerSettings.html

@@ -8,7 +8,7 @@
 {% endblock %}
 
 {% block body %}
-    {% include 'cloudHeader.html' %}
+    {% include 'header/grassHeader.html' %}
     <div id="player-settings">
         <h1>Player Settings</h1>
         <div id="instructions">

WebHostLib/templates/tracker.html

@@ -8,7 +8,7 @@
 {% endblock %}
 
 {% block body %}
-    {% include 'cloudHeader.html' %}
+    {% include 'header/dirtHeader.html' %}
     <div id="tracker-wrapper" data-tracker="{{ room.tracker|suuid }}">
         <div id="tracker-header-bar">
             <input placeholder="Search" id="search"/>
@@ -20,7 +20,7 @@
                     Multistream
                 </a>
             </span>
-            <span>This tracker will automatically update itself periodically.</span>
+            <span class="info">This tracker will automatically update itself periodically.</span>
         </div>
         <div id="tables-container">
             {% for team, players in inventory.items() %}

WebHostLib/templates/tutorial.html

@@ -1,7 +1,7 @@
 {% extends 'pageWrapper.html' %}
 
 {% block head %}
-    {% include 'cloudHeader.html' %}
+    {% include 'header/grassHeader.html' %}
     <title>Setup Tutorial</title>
     <link rel="stylesheet" type="text/css" href="{{ static_autoversion("styles/tutorial.css") }}" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/showdown/1.9.1/showdown.min.js"

WebHostLib/templates/viewSeed.html

@@ -8,7 +8,7 @@
 {% endblock %}
 
 {% block body %}
-    {% include 'cloudHeader.html' %}
+    {% include 'header/oceanHeader.html' %}
     <div id="view-seed-wrapper">
         <div id="view-seed" class="grass-island">
             <h3>Seed Info</h3>

WebHostLib/templates/waitSeed.html

@@ -8,9 +8,11 @@
 {% endblock %}
 
 {% block body %}
-    <div id="wait-seed-wrapper">
+    {% include 'header/oceanHeader.html' %}
+    <div id="wait-seed-wrapper" class="grass-island">
         <div class="main-content">
             Waiting for game to generate, this page auto-refreshes to check.
         </div>
     </div>
+    {% include 'islandFooter.html' %}
 {% endblock %}