From 69f5802e7adbbaf0bd8bcb2c2f65ef1a2cb7fae5 Mon Sep 17 00:00:00 2001 From: Chris Wilson Date: Sat, 18 Jul 2020 16:25:07 -0400 Subject: [PATCH] Improved styling for WebHost --- WebHostLib/static/landing.css | 35 ++++++++++++ WebHostLib/static/layout.css | 46 ++++++++++++++++ WebHostLib/static/uploads.css | 24 +++++++++ WebHostLib/static/uploads.js | 9 ++++ WebHostLib/static/view_seed.css | 9 ++++ WebHostLib/static/view_seed.js | 6 +++ WebHostLib/templates/landing.html | 83 ++++++++++++----------------- WebHostLib/templates/layout.html | 27 +++++----- WebHostLib/templates/macros.html | 8 ++- WebHostLib/templates/uploads.html | 51 +++++++++++------- WebHostLib/templates/view_seed.html | 68 ++++++++++++++++------- requirements.txt | 2 +- 12 files changed, 263 insertions(+), 105 deletions(-) create mode 100644 WebHostLib/static/landing.css create mode 100644 WebHostLib/static/layout.css create mode 100644 WebHostLib/static/uploads.css create mode 100644 WebHostLib/static/uploads.js create mode 100644 WebHostLib/static/view_seed.css create mode 100644 WebHostLib/static/view_seed.js diff --git a/WebHostLib/static/landing.css b/WebHostLib/static/landing.css new file mode 100644 index 00000000..e77f3006 --- /dev/null +++ b/WebHostLib/static/landing.css @@ -0,0 +1,35 @@ +#landing-wrapper{ + display: flex; + flex-direction: row; + justify-content: center; + flex-wrap: wrap; +} + +#landing{ + margin-right: 0.5em; + margin-bottom: 0.5em; +} + +#landing-header-links{ + width: 100%; + text-align: center; + margin: 0; +} + +#landing-header-links a{ + margin-left: 1em; + margin-right: 1em; +} + +#landing-buttons{ + display: flex; + flex-direction: row; + justify-content: center; + flex-wrap: wrap; + margin-top: 1rem; + margin-bottom: 1rem; +} + +iframe{ + border: none; +} diff --git a/WebHostLib/static/layout.css b/WebHostLib/static/layout.css new file mode 100644 index 00000000..dea8423b --- /dev/null +++ b/WebHostLib/static/layout.css @@ -0,0 +1,46 @@ +/** Global colors for all pages */ +body{ + background-color: #dce2bd; + font-size: 1.2rem; + font-family: "Segoe UI", Arial, sans-serif; + margin-top: 0.5rem; +} + +/** Button Styles */ +button, input[type=submit]{ + border: 1px solid #7d8c35; + border-radius: 4px; + width: 200px; + height: 75px; + margin-left: 0.25rem; + margin-right: 0.25rem; + background-color: #dce2bd; + font-family: inherit; + font-size: 1.5rem; + cursor: pointer; +} + +button:hover, input[type=submit]:hover{ + background-color: #e0e7bd; +} + +/** Content styles */ +.main-content{ + max-width: 800px; + border-radius: 8px; + background-color: #bbb288; + padding: 0.5em 1.5rem 1.5rem;= + color: #282b28; +} + +.main-content h3{ + margin: 0; + font-size: 3rem; + text-align: center; + font-weight: normal; +} + +.main-content a{ + color: #34768a; + text-decoration: none; +} diff --git a/WebHostLib/static/uploads.css b/WebHostLib/static/uploads.css new file mode 100644 index 00000000..315a91ae --- /dev/null +++ b/WebHostLib/static/uploads.css @@ -0,0 +1,24 @@ +#uploads-wrapper{ + display: flex; + flex-direction: row; + justify-content: center; + flex-wrap: wrap; +} + +#uploads-form-wrapper{ + width: 100%; + text-align: center; + margin-bottom: 1rem; +} + +#upload-form{ + display: none; +} + +#room-list{ + font-size: 1rem; +} + +#room-list ul{ + vertical-align: top; +} diff --git a/WebHostLib/static/uploads.js b/WebHostLib/static/uploads.js new file mode 100644 index 00000000..4d51e276 --- /dev/null +++ b/WebHostLib/static/uploads.js @@ -0,0 +1,9 @@ +window.onload = () => { + document.getElementById('upload-button').addEventListener('click', () => { + document.getElementById('file-input').click(); + }); + + document.getElementById('file-input').addEventListener('change', () => { + document.getElementById('upload-form').submit(); + }); +}; diff --git a/WebHostLib/static/view_seed.css b/WebHostLib/static/view_seed.css new file mode 100644 index 00000000..418817b2 --- /dev/null +++ b/WebHostLib/static/view_seed.css @@ -0,0 +1,9 @@ +#view-seed-wrapper{ + display: flex; + flex-direction: row; + justify-content: center; +} + +#view-seed-wrapper table td{ + vertical-align: top; +} diff --git a/WebHostLib/static/view_seed.js b/WebHostLib/static/view_seed.js new file mode 100644 index 00000000..f1ed8b71 --- /dev/null +++ b/WebHostLib/static/view_seed.js @@ -0,0 +1,6 @@ +window.onload = () => { + const timeElement = document.getElementById('creation-time'); + const creationTime = timeElement.getAttribute('data-creation-time'); + const creationDate = new Date(creationTime); + timeElement.innerText = creationDate.toLocaleString(); +}; diff --git a/WebHostLib/templates/landing.html b/WebHostLib/templates/landing.html index 63381e83..660d9bf8 100644 --- a/WebHostLib/templates/landing.html +++ b/WebHostLib/templates/landing.html @@ -1,56 +1,43 @@ {% extends 'layout.html' %} + {% block head %} Berserker's Multiworld + {% endblock %} + {% block body %} - -
- -
-
-
-
-

Berserker's Multiworld

-

Source Code - - Wiki - - - Contributors -

-
-
-

This webpage is still under heavy construction. Database may be wiped as I see fit - and some stuff may be broken.

-

This is a randomizer for The Legend of Zelda: A Link to the Past.

-

It is a multiworld, meaning items get shuffled across multiple players' worlds - which get exchanged on pickup through the internet.

-

This website allows hosting such a Multiworld and comes with an item and location - tracker.

-

Currently you still require a locally installed client to play, that handles - connecting to the server and patching a vanilla game to the randomized one. Get started on the - Wiki.

- -
+
+
+
+

Berserker's Multiworld

+ +
+ +
+

This is a randomizer for The Legend of Zelda: A Link to the Past.

+

This is also a multiworld, meaning your items may be placed into other players' worlds, and + other players's items may be placed into your world. When a player picks up an item which does + not belong to them, it is sent back to the player it belongs to over the internet.

+

This website allows you to host a multiworld game, and provides item and location trackers for all + games hosted here.

+

Currently, a locally installed client is required to play. This client should handle patching + your ROM files and connecting to the multiworld server. More information on how to set up a local + client may be found on the + Wiki.

+

This website is under active development. As such, your hosted rooms may occasionally disappear, + and there may be bugs. If you do happen to find a bug, please report it + here.

-
- - -
+
- - -{% endblock %} \ No newline at end of file +{% endblock %} diff --git a/WebHostLib/templates/layout.html b/WebHostLib/templates/layout.html index 40944044..44fab4f9 100644 --- a/WebHostLib/templates/layout.html +++ b/WebHostLib/templates/layout.html @@ -2,16 +2,22 @@ - - {% block head %}Berserker's Multiworld + + + {% block head %} + Berserker's Multiworld {% endblock %} {% with messages = get_flashed_messages() %} {% if messages %} -
+
{% for message in messages %} {% endfor %} @@ -19,13 +25,8 @@ {% endif %} {% endwith %} -{% block body %}{% endblock %} +{% block body %} +{% endblock %} -
{# spacing for notice #} -
-
- This site uses a cookie to track your session in order to give you ownership over uploaded files and created instances. - {# #} -
-
- \ No newline at end of file + + diff --git a/WebHostLib/templates/macros.html b/WebHostLib/templates/macros.html index bf8fe6bd..47891a77 100644 --- a/WebHostLib/templates/macros.html +++ b/WebHostLib/templates/macros.html @@ -1,10 +1,8 @@ {% macro list_rooms(rooms) -%} - Rooms: -
    + -{%- endmacro %} \ No newline at end of file +{%- endmacro %} diff --git a/WebHostLib/templates/uploads.html b/WebHostLib/templates/uploads.html index 00246777..0e09596a 100644 --- a/WebHostLib/templates/uploads.html +++ b/WebHostLib/templates/uploads.html @@ -1,24 +1,37 @@ {% extends 'layout.html' %} + {% block head %} Upload Multidata + + {% endblock %} -{% block body %} -

    Upload Multidata or Multiworld Zip

    -
    - - -
    -
    - {% if rooms %} -

    Your Rooms:

    - - {% else %} -

    No rooms owned by you were found. Upload a Multiworld to get started.

    - {% endif %} -{% endblock %} \ No newline at end of file +{% block body %} +
    +
    +

    Upload Multidata

    +

    To host a game, you need up upload a .multidata file or a .zip file created by the + multiworld generator.

    +
    +
    + +
    + +
    + + {% if rooms %} +

    Your Rooms:

    + + {% else %} +

    No rooms owned by you were found. Upload a file to get started.

    + {% endif %} +
    +
    +{% endblock %} diff --git a/WebHostLib/templates/view_seed.html b/WebHostLib/templates/view_seed.html index b88a0faf..ade10295 100644 --- a/WebHostLib/templates/view_seed.html +++ b/WebHostLib/templates/view_seed.html @@ -1,25 +1,55 @@ {% extends 'layout.html' %} {% import "macros.html" as macros %} + {% block head %} Multiworld Seed {{ seed.id }} + + + {% endblock %} + {% block body %} - Seed #{{ seed.id }}
    - Created: {{ seed.creation_time }} UTC
    - Players: -
      - {% for team in seed.multidata["names"] %} -
    • Team #{{ loop.index }} - {{ team | length }} -
        - {% for player in team %} -
      • {{ player }}
        • - {% endfor %} -
      -
      • - {% endfor %} -
    - {% call macros.list_rooms(rooms) %} -
  • new - room
    • - {% endcall %} -{% endblock %} \ No newline at end of file +
    +
    +

    Seed Info

    + + + + + + + + + + + + + + + + + + + +
    Seed: {{ seed.id }}
    Created: 
    Players:  +
      + {% for team in seed.multidata["names"] %} +
    • Team #{{ loop.index }} - {{ team | length }} +
        + {% for player in team %} +
      • {{ player }}
        • + {% endfor %} +
      +
      • + {% endfor %} +
    +
    Rooms:  + {% call macros.list_rooms(rooms) %} +
  • + Create New Room +
    • + {% endcall %} +
    +
    +
    +{% endblock %} diff --git a/requirements.txt b/requirements.txt index 599502bd..69c5d784 100644 --- a/requirements.txt +++ b/requirements.txt @@ -4,4 +4,4 @@ PyYAML>=5.3.1 fuzzywuzzy>=0.18.0 bsdiff4>=1.1.9 prompt_toolkit>=3.0.5 -appdirs>=1.4.4 \ No newline at end of file +appdirs>=1.4.4