WebHost: Remove styleController.js and replace functionality with HTML/CSS. (ArchipelagoMW#4852)

Zach 'Phar' Parks · James McIntosh · commit 96acef21c6be · 2025-06-13T11:03:38.000+01:00
* ensure footer stays at bottom of page without JS

* Remove some other usages.
diff --git a/WebHostLib/static/assets/gameInfo.js b/WebHostLib/static/assets/gameInfo.js
@@ -23,7 +23,6 @@ window.addEventListener('load', () => {
         showdown.setOption('strikethrough', true);
         showdown.setOption('literalMidWordUnderscores', true);
         gameInfo.innerHTML += (new showdown.Converter()).makeHtml(results);
-        adjustHeaderWidth();
 
         // Reset the id of all header divs to something nicer
         for (const header of document.querySelectorAll('h1, h2, h3, h4, h5, h6')) {
diff --git a/WebHostLib/static/assets/hostGame.js b/WebHostLib/static/assets/hostGame.js
@@ -6,6 +6,4 @@ window.addEventListener('load', () => {
     document.getElementById('file-input').addEventListener('change', () => {
         document.getElementById('host-game-form').submit();
     });
-
-    adjustFooterHeight();
 });
diff --git a/WebHostLib/static/assets/styleController.js b/WebHostLib/static/assets/styleController.js
diff --git a/WebHostLib/static/assets/tutorial.js b/WebHostLib/static/assets/tutorial.js
@@ -25,7 +25,6 @@ window.addEventListener('load', () => {
         showdown.setOption('literalMidWordUnderscores', true);
         showdown.setOption('disableForced4SpacesIndentedSublists', true);
         tutorialWrapper.innerHTML += (new showdown.Converter()).makeHtml(results);
-        adjustHeaderWidth();
 
         const title = document.querySelector('h1')
         if (title) {
diff --git a/WebHostLib/static/styles/globalStyles.css b/WebHostLib/static/styles/globalStyles.css
@@ -36,6 +36,13 @@ html{
 
 body{
     margin: 0;
+    display: flex;
+    flex-direction: column;
+    min-height: calc(100vh - 110px);
+}
+
+main {
+    flex-grow: 1;
 }
 
 a{
diff --git a/WebHostLib/templates/404.html b/WebHostLib/templates/404.html
@@ -1,5 +1,6 @@
 {% extends 'pageWrapper.html' %}
 {% import "macros.html" as macros %}
+{% set show_footer = True %}
 
 {% block head %}
     <title>Page Not Found (404)</title>
@@ -13,5 +14,4 @@ <h1>This page is out of logic!</h1>
         The page you're looking for doesn&apos;t exist.<br />
         <a href="/">Click here to return to safety.</a>
     </div>
-    {% include 'islandFooter.html' %}
 {% endblock %}
diff --git a/WebHostLib/templates/hostGame.html b/WebHostLib/templates/hostGame.html
@@ -1,4 +1,5 @@
 {% extends 'pageWrapper.html' %}
+{% set show_footer = True %}
 
 {% block head %}
     <title>Upload Multidata</title>
@@ -27,6 +28,4 @@ <h1>Host Game</h1>
             </div>
         </div>
     </div>
-
-    {% include 'islandFooter.html' %}
 {% endblock %}
diff --git a/WebHostLib/templates/landing.html b/WebHostLib/templates/landing.html
@@ -1,4 +1,5 @@
 {% extends 'pageWrapper.html' %}
+{% set show_footer = True %}
 
 {% block head %}
     <title>Archipelago</title>
@@ -57,5 +58,4 @@ <h4>multiworld multi-game randomizer</h4>
             </div>
         </div>
     </div>
-    {% include 'islandFooter.html' %}
 {% endblock %}
diff --git a/WebHostLib/templates/pageWrapper.html b/WebHostLib/templates/pageWrapper.html
@@ -5,26 +5,29 @@
     <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename="styles/tooltip.css") }}" />
     <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename="styles/cookieNotice.css") }}" />
     <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename="styles/globalStyles.css") }}" />
-    <script type="application/ecmascript" src="{{ url_for('static', filename="assets/styleController.js") }}"></script>
     <script type="application/ecmascript" src="{{ url_for('static', filename="assets/cookieNotice.js") }}"></script>
     {% block head %}
         <title>Archipelago</title>
     {% endblock %}
 </head>
 <body>
+    <main>
+        {% with messages = get_flashed_messages() %}
+            {% if messages %}
+                <div>
+                    {% for message in messages | unique %}
+                        <div class="user-message">{{ message }}</div>
+                    {% endfor %}
+                </div>
+            {% endif %}
+        {% endwith %}
 
-{% with messages = get_flashed_messages() %}
-    {% if messages %}
-        <div>
-            {% for message in messages | unique %}
-                <div class="user-message">{{ message }}</div>
-            {% endfor %}
-        </div>
-    {% endif %}
-{% endwith %}
-
-{% block body %}
-{% endblock %}
+        {% block body %}
+        {% endblock %}
+    </main>
 
+    {% if show_footer %}
+        {% include "islandFooter.html" %}
+    {% endif %}
 </body>
 </html>
diff --git a/WebHostLib/templates/seedError.html b/WebHostLib/templates/seedError.html
@@ -1,5 +1,6 @@
 {% extends 'pageWrapper.html' %}
 {% import "macros.html" as macros %}
+{% set show_footer = True %}
 
 {% block head %}
     <title>Generation failed, please retry.</title>
@@ -15,5 +16,4 @@ <h2>please retry</h2>
             {{ seed_error }}
         </div>
     </div>
-    {% include 'islandFooter.html' %}
 {% endblock %}
diff --git a/WebHostLib/templates/startPlaying.html b/WebHostLib/templates/startPlaying.html
@@ -1,4 +1,5 @@
 {% extends 'pageWrapper.html' %}
+{% set show_footer = True %}
 
 {% block head %}
     <title>Start Playing</title>
@@ -26,6 +27,4 @@ <h1>Start Playing</h1>
             </p>
         </div>
     </div>
-
-    {% include 'islandFooter.html' %}
 {% endblock %}
diff --git a/WebHostLib/templates/viewSeed.html b/WebHostLib/templates/viewSeed.html
@@ -1,5 +1,6 @@
 {% extends 'pageWrapper.html' %}
 {% import "macros.html" as macros %}
+{% set show_footer = True %}
 
 {% block head %}
     <title>View Seed {{ seed.id|suuid }}</title>
@@ -50,5 +51,4 @@ <h1>Seed Info</h1>
             </table>
         </div>
     </div>
-    {% include 'islandFooter.html' %}
 {% endblock %}
diff --git a/WebHostLib/templates/waitSeed.html b/WebHostLib/templates/waitSeed.html
@@ -1,5 +1,6 @@
 {% extends 'pageWrapper.html' %}
 {% import "macros.html" as macros %}
+{% set show_footer = True %}
 
 {% block head %}
     <title>Generation in Progress</title>
@@ -15,5 +16,4 @@ <h1>Generation in Progress</h1>
             Waiting for game to generate, this page auto-refreshes to check.
         </div>
     </div>
-    {% include 'islandFooter.html' %}
 {% endblock %}
