From bc9c93b180da45fdb273a9e4dba8055914f880d0 Mon Sep 17 00:00:00 2001 From: Chris Wilson Date: Tue, 15 Jun 2021 21:18:14 -0400 Subject: [PATCH] Improvements to the WebHost - Improved routing structure - Improved style imports across site - Added placeholder player-settings pages for Factorio and Minecraft --- WebHostLib/__init__.py | 26 +--- .../{playerSettings.js => player-settings.js} | 0 .../static/styles/factorio/factorio.css | 3 + .../player-settings.css} | 0 WebHostLib/static/styles/games.css | 6 - WebHostLib/static/styles/globalStyles.css | 3 - .../static/styles/header/dirtHeader.css | 6 + .../static/styles/header/grassHeader.css | 8 +- .../static/styles/header/oceanHeader.css | 6 + WebHostLib/static/styles/hostRoom.css | 6 - .../static/styles/minecraft/minecraft.css | 3 + .../styles/minecraft/player-settings.css | 129 ++++++++++++++++++ WebHostLib/static/styles/tracker.css | 6 - WebHostLib/static/styles/tutorial.css | 6 - WebHostLib/static/styles/tutorialLanding.css | 6 - WebHostLib/static/styles/weightedSettings.css | 6 - .../static/styles/zelda3/player-settings.css | 129 ++++++++++++++++++ WebHostLib/static/styles/zelda3/zelda3.css | 3 + .../templates/games/factorio/factorio.html | 22 +-- .../games/factorio/player-settings.html | 24 ++++ .../templates/games/minecraft/minecraft.html | 22 +-- .../games/minecraft/player-settings.html | 24 ++++ ...ayerSettings.html => player-settings.html} | 8 +- WebHostLib/templates/games/zelda3/zelda3.html | 25 ++-- 24 files changed, 385 insertions(+), 92 deletions(-) rename WebHostLib/static/assets/zelda3/{playerSettings.js => player-settings.js} (100%) create mode 100644 WebHostLib/static/styles/factorio/factorio.css rename WebHostLib/static/styles/{zelda3/playerSettings.css => factorio/player-settings.css} (100%) create mode 100644 WebHostLib/static/styles/minecraft/minecraft.css create mode 100644 WebHostLib/static/styles/minecraft/player-settings.css create mode 100644 WebHostLib/static/styles/zelda3/player-settings.css create mode 100644 WebHostLib/templates/games/factorio/player-settings.html create mode 100644 WebHostLib/templates/games/minecraft/player-settings.html rename WebHostLib/templates/games/zelda3/{playerSettings.html => player-settings.html} (90%) diff --git a/WebHostLib/__init__.py b/WebHostLib/__init__.py index 53b87be5..427b1172 100644 --- a/WebHostLib/__init__.py +++ b/WebHostLib/__init__.py @@ -103,28 +103,10 @@ games_list = { } -# Player settings pages -@app.route('/games//player-settings') -def player_settings(game): - return render_template(f"/games/{game}/playerSettings.html") - - -# Zelda3 pages -@app.route('/games/zelda3/') -def zelda3_pages(page): - return render_template(f"/games/zelda3/{page}.html") - - -# Factorio pages -@app.route('/games/factorio/') -def factorio_pages(page): - return render_template(f"/games/factorio/{page}.html") - - -# Minecraft pages -@app.route('/games/minecraft/') -def minecraft_pages(page): - return render_template(f"/games/factorio/{page}.html") +# Game sub-pages +@app.route('/games//') +def game_pages(game, page): + return render_template(f"/games/{game}/{page}.html") # Game landing pages diff --git a/WebHostLib/static/assets/zelda3/playerSettings.js b/WebHostLib/static/assets/zelda3/player-settings.js similarity index 100% rename from WebHostLib/static/assets/zelda3/playerSettings.js rename to WebHostLib/static/assets/zelda3/player-settings.js diff --git a/WebHostLib/static/styles/factorio/factorio.css b/WebHostLib/static/styles/factorio/factorio.css new file mode 100644 index 00000000..8039500b --- /dev/null +++ b/WebHostLib/static/styles/factorio/factorio.css @@ -0,0 +1,3 @@ +#factorio{ + margin: 1rem; +} diff --git a/WebHostLib/static/styles/zelda3/playerSettings.css b/WebHostLib/static/styles/factorio/player-settings.css similarity index 100% rename from WebHostLib/static/styles/zelda3/playerSettings.css rename to WebHostLib/static/styles/factorio/player-settings.css diff --git a/WebHostLib/static/styles/games.css b/WebHostLib/static/styles/games.css index 0abd17d1..7ba4e2bb 100644 --- a/WebHostLib/static/styles/games.css +++ b/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; diff --git a/WebHostLib/static/styles/globalStyles.css b/WebHostLib/static/styles/globalStyles.css index 26b6c48a..b4470a3a 100644 --- a/WebHostLib/static/styles/globalStyles.css +++ b/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; diff --git a/WebHostLib/static/styles/header/dirtHeader.css b/WebHostLib/static/styles/header/dirtHeader.css index b2df59a0..a94fd2fd 100644 --- a/WebHostLib/static/styles/header/dirtHeader.css +++ b/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; } diff --git a/WebHostLib/static/styles/header/grassHeader.css b/WebHostLib/static/styles/header/grassHeader.css index e5943404..7229272d 100644 --- a/WebHostLib/static/styles/header/grassHeader.css +++ b/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; } diff --git a/WebHostLib/static/styles/header/oceanHeader.css b/WebHostLib/static/styles/header/oceanHeader.css index 05d80293..9cea5b28 100644 --- a/WebHostLib/static/styles/header/oceanHeader.css +++ b/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; } diff --git a/WebHostLib/static/styles/hostRoom.css b/WebHostLib/static/styles/hostRoom.css index ac839d1e..bef8d147 100644 --- a/WebHostLib/static/styles/hostRoom.css +++ b/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; diff --git a/WebHostLib/static/styles/minecraft/minecraft.css b/WebHostLib/static/styles/minecraft/minecraft.css new file mode 100644 index 00000000..063cc624 --- /dev/null +++ b/WebHostLib/static/styles/minecraft/minecraft.css @@ -0,0 +1,3 @@ +#minecraft{ + margin: 1rem; +} diff --git a/WebHostLib/static/styles/minecraft/player-settings.css b/WebHostLib/static/styles/minecraft/player-settings.css new file mode 100644 index 00000000..e92c4868 --- /dev/null +++ b/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; + } +} diff --git a/WebHostLib/static/styles/tracker.css b/WebHostLib/static/styles/tracker.css index dc12f205..c6e84aea 100644 --- a/WebHostLib/static/styles/tracker.css +++ b/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; diff --git a/WebHostLib/static/styles/tutorial.css b/WebHostLib/static/styles/tutorial.css index b7ebeae4..55717fdc 100644 --- a/WebHostLib/static/styles/tutorial.css +++ b/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; diff --git a/WebHostLib/static/styles/tutorialLanding.css b/WebHostLib/static/styles/tutorialLanding.css index f20489a8..d1d71012 100644 --- a/WebHostLib/static/styles/tutorialLanding.css +++ b/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; diff --git a/WebHostLib/static/styles/weightedSettings.css b/WebHostLib/static/styles/weightedSettings.css index d887f599..95c004b2 100644 --- a/WebHostLib/static/styles/weightedSettings.css +++ b/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; diff --git a/WebHostLib/static/styles/zelda3/player-settings.css b/WebHostLib/static/styles/zelda3/player-settings.css new file mode 100644 index 00000000..e92c4868 --- /dev/null +++ b/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; + } +} diff --git a/WebHostLib/static/styles/zelda3/zelda3.css b/WebHostLib/static/styles/zelda3/zelda3.css index e69de29b..bf00d4a2 100644 --- a/WebHostLib/static/styles/zelda3/zelda3.css +++ b/WebHostLib/static/styles/zelda3/zelda3.css @@ -0,0 +1,3 @@ +#zelda3{ + margin: 1rem; +} diff --git a/WebHostLib/templates/games/factorio/factorio.html b/WebHostLib/templates/games/factorio/factorio.html index e808d9ab..6dc6a530 100644 --- a/WebHostLib/templates/games/factorio/factorio.html +++ b/WebHostLib/templates/games/factorio/factorio.html @@ -1,9 +1,15 @@ - - - +{% extends 'pageWrapper.html' %} + +{% block head %} Factorio - - - Factorio - - + + + +{% endblock %} + +{% block body %} + {% include 'header/grassHeader.html' %} +
+ Coming Soon™ +
+{% endblock %} diff --git a/WebHostLib/templates/games/factorio/player-settings.html b/WebHostLib/templates/games/factorio/player-settings.html new file mode 100644 index 00000000..57435936 --- /dev/null +++ b/WebHostLib/templates/games/factorio/player-settings.html @@ -0,0 +1,24 @@ +{% extends 'pageWrapper.html' %} + +{% block head %} + Factorio Settings + +{% endblock %} + +{% block body %} + {% include 'header/grassHeader.html' %} +
+
+

Factorio Settings

+

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 weighted settings + page. There, you will find examples of all available sprites as well.

+ +

A list of all games you have generated can be found here.

+ +
+ More content coming soon™. +
+
+{% endblock %} diff --git a/WebHostLib/templates/games/minecraft/minecraft.html b/WebHostLib/templates/games/minecraft/minecraft.html index f37dc14f..1e758411 100644 --- a/WebHostLib/templates/games/minecraft/minecraft.html +++ b/WebHostLib/templates/games/minecraft/minecraft.html @@ -1,9 +1,15 @@ - - - +{% extends 'pageWrapper.html' %} + +{% block head %} Minecraft - - - Minecraft - - + + + +{% endblock %} + +{% block body %} + {% include 'header/grassHeader.html' %} +
+ Coming Soon™ +
+{% endblock %} diff --git a/WebHostLib/templates/games/minecraft/player-settings.html b/WebHostLib/templates/games/minecraft/player-settings.html new file mode 100644 index 00000000..71865756 --- /dev/null +++ b/WebHostLib/templates/games/minecraft/player-settings.html @@ -0,0 +1,24 @@ +{% extends 'pageWrapper.html' %} + +{% block head %} + Minecraft Settings + +{% endblock %} + +{% block body %} + {% include 'header/grassHeader.html' %} +
+
+

Minecraft Settings

+

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 weighted settings + page. There, you will find examples of all available sprites as well.

+ +

A list of all games you have generated can be found here.

+ +
+ More content coming soon™. +
+
+{% endblock %} diff --git a/WebHostLib/templates/games/zelda3/playerSettings.html b/WebHostLib/templates/games/zelda3/player-settings.html similarity index 90% rename from WebHostLib/templates/games/zelda3/playerSettings.html rename to WebHostLib/templates/games/zelda3/player-settings.html index 681b7140..107b9bf3 100644 --- a/WebHostLib/templates/games/zelda3/playerSettings.html +++ b/WebHostLib/templates/games/zelda3/player-settings.html @@ -1,18 +1,18 @@ {% extends 'pageWrapper.html' %} {% block head %} - Player Settings - + A Link to the Past Settings + - + {% endblock %} {% block body %} {% include 'header/grassHeader.html' %}
-

Start Game

+

A Link to the Past Settings

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 weighted settings diff --git a/WebHostLib/templates/games/zelda3/zelda3.html b/WebHostLib/templates/games/zelda3/zelda3.html index 4d8b6192..49d4c702 100644 --- a/WebHostLib/templates/games/zelda3/zelda3.html +++ b/WebHostLib/templates/games/zelda3/zelda3.html @@ -1,10 +1,15 @@ - - - - Link to the Past - - - Link to the Past
- Player Settings - - +{% extends 'pageWrapper.html' %} + +{% block head %} + A Link to the Past + + + +{% endblock %} + +{% block body %} + {% include 'header/grassHeader.html' %} +

+ Coming Soon™ +
+{% endblock %}