Improvements to the WebHost

- Improved routing structure
- Improved style imports across site
- Added placeholder player-settings pages for Factorio and Minecraft

WebHostLib/__init__.py

@@ -103,28 +103,10 @@ games_list = {
 }
 
 
-# Player settings pages
+# Game sub-pages
-@app.route('/games/<game>/player-settings')
+@app.route('/games/<string:game>/<string:page>')
-def player_settings(game):
+def game_pages(game, page):
-    return render_template(f"/games/{game}/playerSettings.html")
+    return render_template(f"/games/{game}/{page}.html")
-
-
-# Zelda3 pages
-@app.route('/games/zelda3/<string:page>')
-def zelda3_pages(page):
-    return render_template(f"/games/zelda3/{page}.html")
-
-
-# Factorio pages
-@app.route('/games/factorio/<string:page>')
-def factorio_pages(page):
-    return render_template(f"/games/factorio/{page}.html")
-
-
-# Minecraft pages
-@app.route('/games/minecraft/<string:page>')
-def minecraft_pages(page):
-    return render_template(f"/games/factorio/{page}.html")
 
 
 # Game landing pages

WebHostLib/static/styles/factorio/factorio.css

@@ -0,0 +1,3 @@
+#factorio{
+    margin: 1rem;
+}

WebHostLib/static/styles/games.css

@@ -1,9 +1,3 @@
-html{
-    background-image: url('../static/backgrounds/grass/grass-0007-large.png');
-    background-repeat: repeat;
-    background-size: 650px 650px;
-}
-
 #games{
     max-width: 1000px;
     margin-left: auto;

WebHostLib/static/styles/globalStyles.css

@@ -4,9 +4,6 @@
 }
 
 html{
-    background-image: url('../static/backgrounds/oceans/oceans-0002.png');
-    background-repeat: repeat;
-    background-size: 250px 250px;
     font-family: 'Jost', sans-serif;
     font-size: 1.1rem;
     color: #000000;

WebHostLib/static/styles/header/dirtHeader.css

@@ -1,3 +1,9 @@
+html{
+    background-image: url('../../static/backgrounds/dirt/dirt-0005-large.png');
+    background-repeat: repeat;
+    background-size: 900px 900px;
+}
+
 #base-header{
     background: url('../../static/backgrounds/header/dirt-header.png') repeat-x;
 }

WebHostLib/static/styles/header/grassHeader.css

@@ -1,3 +1,9 @@
-#base-header{
+html{
+    background-image: url('../../static/backgrounds/grass/grass-0007-large.png');
+    background-repeat: repeat;
+    background-size: 650px 650px;
+}
+
+#base-header {
     background: url('../../static/backgrounds/header/grass-header.png') repeat-x;
 }

WebHostLib/static/styles/header/oceanHeader.css

@@ -1,3 +1,9 @@
+html{
+    background-image: url('../../static/backgrounds/oceans/oceans-0002.png');
+    background-repeat: repeat;
+    background-size: 250px 250px;
+}
+
 #base-header{
     background: url('../../static/backgrounds/header/ocean-header.png') repeat-x;
 }

WebHostLib/static/styles/hostRoom.css

@@ -1,9 +1,3 @@
-html{
-    background-image: url('../static/backgrounds/grass/grass-0007-large.png');
-    background-repeat: repeat;
-    background-size: 650px 650px;
-}
-
 #host-room{
     width: calc(100% - 5rem);
     margin-left: auto;

WebHostLib/static/styles/minecraft/minecraft.css

@@ -0,0 +1,3 @@
+#minecraft{
+    margin: 1rem;
+}

WebHostLib/static/styles/minecraft/player-settings.css

@@ -0,0 +1,129 @@
+html{
+    background-image: url('../../static/backgrounds/grass/grass-0007-large.png');
+    background-repeat: repeat;
+    background-size: 650px 650px;
+}
+
+#player-settings{
+    max-width: 1000px;
+    margin-left: auto;
+    margin-right: auto;
+    background-color: rgba(0, 0, 0, 0.15);
+    border-radius: 8px;
+    padding: 1rem;
+    color: #eeffeb;
+}
+
+#player-settings #player-settings-button-row{
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    margin-top: 15px;
+}
+
+#player-settings code{
+    background-color: #d9cd8e;
+    border-radius: 4px;
+    padding-left: 0.25rem;
+    padding-right: 0.25rem;
+    color: #000000;
+}
+
+#player-settings #user-message{
+    display: none;
+    width: calc(100% - 8px);
+    background-color: #ffe86b;
+    border-radius: 4px;
+    color: #000000;
+    padding: 4px;
+    text-align: center;
+}
+
+#player-settings #user-message.visible{
+    display: block;
+}
+
+#player-settings h1{
+    font-size: 2.5rem;
+    font-weight: normal;
+    border-bottom: 1px solid #ffffff;
+    width: 100%;
+    margin-bottom: 0.5rem;
+    color: #ffffff;
+    text-shadow: 1px 1px 4px #000000;
+}
+
+#player-settings h2{
+    font-size: 2rem;
+    font-weight: normal;
+    border-bottom: 1px solid #ffffff;
+    width: 100%;
+    margin-bottom: 0.5rem;
+    color: #ffe993;
+    text-transform: lowercase;
+    text-shadow: 1px 1px 2px #000000;
+}
+
+#player-settings h3, #player-settings h4, #player-settings h5, #player-settings h6{
+    color: #ffffff;
+    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
+}
+
+#player-settings a{
+    color: #ffef00;
+}
+
+#player-settings input:not([type]){
+    border: 1px solid #000000;
+    padding: 3px;
+    border-radius: 3px;
+    min-width: 150px;
+}
+
+#player-settings input:not([type]):focus{
+    border: 1px solid #ffffff;
+}
+
+#player-settings select{
+    border: 1px solid #000000;
+    padding: 3px;
+    border-radius: 3px;
+    min-width: 150px;
+    background-color: #ffffff;
+}
+
+#player-settings #game-options, #player-settings #rom-options{
+    display: flex;
+    flex-direction: row;
+}
+
+#player-settings .left, #player-settings .right{
+    flex-grow: 1;
+}
+
+#player-settings table select{
+    width: 250px;
+}
+
+#player-settings table label{
+    display: block;
+    min-width: 200px;
+    margin-right: 4px;
+    cursor: default;
+}
+
+@media all and (max-width: 1000px), all and (orientation: portrait){
+    #player-settings #game-options, #player-settings #rom-options{
+        justify-content: flex-start;
+        flex-wrap: wrap;
+    }
+
+    #player-settings .left, #player-settings .right{
+        flex-grow: unset;
+    }
+
+    #game-options table label, #rom-options table label{
+        display: block;
+        min-width: 200px;
+    }
+}

WebHostLib/static/styles/tracker.css

@@ -1,9 +1,3 @@
-html{
-    background-image: url('../static/backgrounds/dirt/dirt-0005-large.png');
-    background-repeat: repeat;
-    background-size: 900px 900px;
-}
-
 #tracker-wrapper {
     display: flex;
     flex-direction: column;

WebHostLib/static/styles/tutorial.css

@@ -1,9 +1,3 @@
-html{
-    background-image: url('../static/backgrounds/grass/grass-0007-large.png');
-    background-repeat: repeat;
-    background-size: 650px 650px;
-}
-
 #tutorial-wrapper{
     display: flex;
     flex-direction: column;

WebHostLib/static/styles/tutorialLanding.css

@@ -1,9 +1,3 @@
-html{
-    background-image: url('../static/backgrounds/grass/grass-0007-large.png');
-    background-repeat: repeat;
-    background-size: 650px 650px;
-}
-
 #tutorial-landing{
     display: flex;
     flex-direction: column;

WebHostLib/static/styles/weightedSettings.css

@@ -1,9 +1,3 @@
-html{
-    background-image: url('../static/backgrounds/grass/grass-0007-large.png');
-    background-repeat: repeat;
-    background-size: 650px 650px;
-}
-
 #weighted-settings{
     width: 60rem;
     margin-left: auto;

WebHostLib/static/styles/zelda3/player-settings.css

@@ -0,0 +1,129 @@
+html{
+    background-image: url('../../static/backgrounds/grass/grass-0007-large.png');
+    background-repeat: repeat;
+    background-size: 650px 650px;
+}
+
+#player-settings{
+    max-width: 1000px;
+    margin-left: auto;
+    margin-right: auto;
+    background-color: rgba(0, 0, 0, 0.15);
+    border-radius: 8px;
+    padding: 1rem;
+    color: #eeffeb;
+}
+
+#player-settings #player-settings-button-row{
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    margin-top: 15px;
+}
+
+#player-settings code{
+    background-color: #d9cd8e;
+    border-radius: 4px;
+    padding-left: 0.25rem;
+    padding-right: 0.25rem;
+    color: #000000;
+}
+
+#player-settings #user-message{
+    display: none;
+    width: calc(100% - 8px);
+    background-color: #ffe86b;
+    border-radius: 4px;
+    color: #000000;
+    padding: 4px;
+    text-align: center;
+}
+
+#player-settings #user-message.visible{
+    display: block;
+}
+
+#player-settings h1{
+    font-size: 2.5rem;
+    font-weight: normal;
+    border-bottom: 1px solid #ffffff;
+    width: 100%;
+    margin-bottom: 0.5rem;
+    color: #ffffff;
+    text-shadow: 1px 1px 4px #000000;
+}
+
+#player-settings h2{
+    font-size: 2rem;
+    font-weight: normal;
+    border-bottom: 1px solid #ffffff;
+    width: 100%;
+    margin-bottom: 0.5rem;
+    color: #ffe993;
+    text-transform: lowercase;
+    text-shadow: 1px 1px 2px #000000;
+}
+
+#player-settings h3, #player-settings h4, #player-settings h5, #player-settings h6{
+    color: #ffffff;
+    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
+}
+
+#player-settings a{
+    color: #ffef00;
+}
+
+#player-settings input:not([type]){
+    border: 1px solid #000000;
+    padding: 3px;
+    border-radius: 3px;
+    min-width: 150px;
+}
+
+#player-settings input:not([type]):focus{
+    border: 1px solid #ffffff;
+}
+
+#player-settings select{
+    border: 1px solid #000000;
+    padding: 3px;
+    border-radius: 3px;
+    min-width: 150px;
+    background-color: #ffffff;
+}
+
+#player-settings #game-options, #player-settings #rom-options{
+    display: flex;
+    flex-direction: row;
+}
+
+#player-settings .left, #player-settings .right{
+    flex-grow: 1;
+}
+
+#player-settings table select{
+    width: 250px;
+}
+
+#player-settings table label{
+    display: block;
+    min-width: 200px;
+    margin-right: 4px;
+    cursor: default;
+}
+
+@media all and (max-width: 1000px), all and (orientation: portrait){
+    #player-settings #game-options, #player-settings #rom-options{
+        justify-content: flex-start;
+        flex-wrap: wrap;
+    }
+
+    #player-settings .left, #player-settings .right{
+        flex-grow: unset;
+    }
+
+    #game-options table label, #rom-options table label{
+        display: block;
+        min-width: 200px;
+    }
+}

WebHostLib/static/styles/zelda3/zelda3.css

@@ -0,0 +1,3 @@
+#zelda3{
+    margin: 1rem;
+}

WebHostLib/templates/games/factorio/factorio.html

@@ -1,9 +1,15 @@
-<!DOCTYPE html>
+{% extends 'pageWrapper.html' %}
-<html lang="en">
+
-<head>
+{% block head %}
     <title>Factorio</title>
-</head>
+    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename="styles/factorio/factorio.css") }}" />
-<body>
+    <script type="application/ecmascript" src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
-    Factorio
+    <script type="application/ecmascript" src="{{ url_for('static', filename="assets/js-yaml.min.js") }}"></script>
-</body>
+{% endblock %}
-</html>
+
+{% block body %}
+    {% include 'header/grassHeader.html' %}
+    <div id="factorio">
+        Coming Soon™
+    </div>
+{% endblock %}

WebHostLib/templates/games/factorio/player-settings.html

@@ -0,0 +1,24 @@
+{% extends 'pageWrapper.html' %}
+
+{% block head %}
+    <title>Factorio Settings</title>
+    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename="styles/factorio/player-settings.css") }}" />
+{% endblock %}
+
+{% block body %}
+    {% include 'header/grassHeader.html' %}
+    <div id="player-settings">
+        <div id="user-message"></div>
+        <h1>Factorio Settings</h1>
+        <p>Choose the options you would like to play with! You may generate a single-player game from this page,
+            or download a settings file you can use to participate in a MultiWorld. If you would like to make
+            your settings extra random, check out the advanced <a href="/weighted-settings">weighted settings</a>
+            page. There, you will find examples of all available sprites as well.</p>
+
+        <p>A list of all games you have generated can be found <a href="/user-content">here</a>.</p>
+
+        <div>
+            More content coming soon™.
+        </div>
+    </div>
+{% endblock %}

WebHostLib/templates/games/minecraft/minecraft.html

@@ -1,9 +1,15 @@
-<!DOCTYPE html>
+{% extends 'pageWrapper.html' %}
-<html lang="en">
+
-<head>
+{% block head %}
     <title>Minecraft</title>
-</head>
+    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename="styles/minecraft/minecraft.css") }}" />
-<body>
+    <script type="application/ecmascript" src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
-    Minecraft
+    <script type="application/ecmascript" src="{{ url_for('static', filename="assets/js-yaml.min.js") }}"></script>
-</body>
+{% endblock %}
-</html>
+
+{% block body %}
+    {% include 'header/grassHeader.html' %}
+    <div id="minecraft">
+        Coming Soon™
+    </div>
+{% endblock %}

WebHostLib/templates/games/minecraft/player-settings.html

@@ -0,0 +1,24 @@
+{% extends 'pageWrapper.html' %}
+
+{% block head %}
+    <title>Minecraft Settings</title>
+    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename="styles/minecraft/player-settings.css") }}" />
+{% endblock %}
+
+{% block body %}
+    {% include 'header/grassHeader.html' %}
+    <div id="player-settings">
+        <div id="user-message"></div>
+        <h1>Minecraft Settings</h1>
+        <p>Choose the options you would like to play with! You may generate a single-player game from this page,
+            or download a settings file you can use to participate in a MultiWorld. If you would like to make
+            your settings extra random, check out the advanced <a href="/weighted-settings">weighted settings</a>
+            page. There, you will find examples of all available sprites as well.</p>
+
+        <p>A list of all games you have generated can be found <a href="/user-content">here</a>.</p>
+
+        <div>
+            More content coming soon™.
+        </div>
+    </div>
+{% endblock %}

WebHostLib/templates/games/zelda3/player-settings.html

@@ -1,18 +1,18 @@
 {% extends 'pageWrapper.html' %}
 
 {% block head %}
-    <title>Player Settings</title>
+    <title>A Link to the Past Settings</title>
-    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename="styles/zelda3/playerSettings.css") }}" />
+    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename="styles/zelda3/player-settings.css") }}" />
     <script type="application/ecmascript" src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
     <script type="application/ecmascript" src="{{ url_for('static', filename="assets/js-yaml.min.js") }}"></script>
-    <script type="application/ecmascript" src="{{ url_for('static', filename="assets/zelda3/playerSettings.js") }}"></script>
+    <script type="application/ecmascript" src="{{ url_for('static', filename="assets/zelda3/player-settings.js") }}"></script>
 {% endblock %}
 
 {% block body %}
     {% include 'header/grassHeader.html' %}
     <div id="player-settings">
         <div id="user-message"></div>
-        <h1>Start Game</h1>
+        <h1>A Link to the Past Settings</h1>
         <p>Choose the options you would like to play with! You may generate a single-player game from this page,
             or download a settings file you can use to participate in a MultiWorld. If you would like to make
             your settings extra random, check out the advanced <a href="/weighted-settings">weighted settings</a>

WebHostLib/templates/games/zelda3/zelda3.html

@@ -1,10 +1,15 @@
-<!DOCTYPE html>
+{% extends 'pageWrapper.html' %}
-<html lang="en">
+
-<head>
+{% block head %}
-    <title>Link to the Past</title>
+    <title>A Link to the Past</title>
-</head>
+    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename="styles/zelda3/zelda3.css") }}" />
-<body>
+    <script type="application/ecmascript" src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
-    Link to the Past<br />
+    <script type="application/ecmascript" src="{{ url_for('static', filename="assets/js-yaml.min.js") }}"></script>
-    <a href="/games/zelda3/player-settings">Player Settings</a>
+{% endblock %}
-</body>
+
-</html>
+{% block body %}
+    {% include 'header/grassHeader.html' %}
+    <div id="zelda3">
+        Coming Soon™
+    </div>
+{% endblock %}