monorail
/
Archipelago
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Improved styling for WebHost

This commit is contained in:
Chris Wilson 2020-07-18 16:25:07 -04:00
parent 79c91f57a8
commit 69f5802e7a
12 changed files with 263 additions and 105 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
WebHostLib/static/landing.css Normal file
View File

@ -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;
}

46
WebHostLib/static/layout.css Normal file
View File

@ -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;
}

24
WebHostLib/static/uploads.css Normal file
View File

@ -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;
}

9
WebHostLib/static/uploads.js Normal file
View File

@ -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();
});
};

9
WebHostLib/static/view_seed.css Normal file
View File

@ -0,0 +1,9 @@
#view-seed-wrapper{
display: flex;
flex-direction: row;
justify-content: center;
}
#view-seed-wrapper table td{
vertical-align: top;
}

6
WebHostLib/static/view_seed.js Normal file
View File

@ -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();
};

83
WebHostLib/templates/landing.html
View File

@ -1,56 +1,43 @@
{% extends 'layout.html' %} {% extends 'layout.html' %}
{% block head %} {% block head %}
<title>Berserker's Multiworld</title> <title>Berserker's Multiworld</title>
<link rel="stylesheet" type="text/css" href="static/landing.css" />
{% endblock %} {% endblock %}
{% block body %} {% block body %}
<nav class="navbar navbar-dark bg-dark navbar-expand-sm"> <div id="landing-wrapper">
<ul class="navbar-nav"> <div id="landing" class="main-content">
<li class="nav-item"> <div id="landing-header">
<a class="nav-link" href="{{ url_for("uploads") }}">Start a Group</a> <h3>Berserker's Multiworld</h3>
</li> <p id="landing-header-links">
<li class="nav-item"> <a href="https://github.com/Berserker66/MultiWorld-Utilities">Source Code</a>
<a class="nav-link" href="{{ url_for("uploads") }}">Upload a Multiworld</a> -
</li> <a href="https://github.com/Berserker66/MultiWorld-Utilities/wiki">Wiki</a>
<li class="nav-item"> -
<a class="nav-link" href="{{ url_for("uploads") }}">Your Content</a> <a href="https://github.com/Berserker66/MultiWorld-Utilities/graphs/contributors">Contributors</a>
</li> </p>
</ul> </div>
</nav> <div id="landing-buttons">
<br> <a href="uploads"><button>Start Playing</button></a>
</div>
<div class="container container-fluid d-flex"> <div id="landing-body">
<div class="jumbotron jumbotron-fluid"> <p>This is a randomizer for The Legend of Zelda: A Link to the Past.</p>
<div class="container"> <p>This is also a multiworld, meaning your items may be placed into other players' worlds, and
<div class="col-md-5 p-lg-2 mx-auto my-2"> other players's items may be placed into your world. When a player picks up an item which does
<h1 class="text-center display-4 font-weight-normal">Berserker's Multiworld</h1> not belong to them, it is sent back to the player it belongs to over the internet.</p>
<p class="text-center lead font-weight-normal"><a <p>This website allows you to host a multiworld game, and provides item and location trackers for all
href="https://github.com/Berserker66/MultiWorld-Utilities">Source Code</a> games hosted here.</p>
- <a href="https://github.com/Berserker66/MultiWorld-Utilities/wiki">Wiki</a> <p>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
<a href="https://github.com/Berserker66/MultiWorld-Utilities/graphs/contributors">Contributors</a> client may be found on the
</p> <a href="https://github.com/Berserker66/MultiWorld-Utilities/wiki">Wiki</a>.</p>
</div> <p>This website is under active development. As such, your hosted rooms may occasionally disappear,
<div> and there may be bugs. If you do happen to find a bug, please report it
<p class="lead">This webpage is still under heavy construction. Database may be wiped as I see fit <a href="https://github.com/Berserker66/MultiWorld-Utilities/issues">here</a>.</p>
and some stuff may be broken.</p>
<p class="lead">This is a randomizer for The Legend of Zelda: A Link to the Past.</p>
<p class="lead">It is a multiworld, meaning items get shuffled across multiple players' worlds
which get exchanged on pickup through the internet.</p>
<p class="lead">This website allows hosting such a Multiworld and comes with an item and location
tracker.</p>
<p class="lead">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
<a href="https://github.com/Berserker66/MultiWorld-Utilities/wiki">Wiki</a>.</p>
</div>
</div> </div>
</div> </div>
<div> <iframe src="https://discordapp.com/widget?id=731205301247803413&theme=light"
<iframe src="https://discordapp.com/widget?id=731205301247803413&theme=light" width="300" height="500" width="300" height="500" allowtransparency="true"></iframe>
allowtransparency="true" frameborder="0"></iframe>
</div>
</div> </div>
{% endblock %}
{% endblock %}

27
WebHostLib/templates/layout.html
View File

@ -2,16 +2,22 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" <link
integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous"> rel="stylesheet"
{% block head %}<title>Berserker's Multiworld</title> href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"
crossorigin="anonymous"
/>
<link rel="stylesheet" type="text/css" href="static/layout.css" />
{% block head %}
<title>Berserker's Multiworld</title>
{% endblock %} {% endblock %}
</head> </head>
<body> <body>
{% with messages = get_flashed_messages() %} {% with messages = get_flashed_messages() %}
{% if messages %} {% if messages %}
<div class=".container-fluid"> <div>
{% for message in messages %} {% for message in messages %}
<div class="alert alert-danger" role="alert">{{ message }}</div> <div class="alert alert-danger" role="alert">{{ message }}</div>
{% endfor %} {% endfor %}
@ -19,13 +25,8 @@
{% endif %} {% endif %}
{% endwith %} {% endwith %}
{% block body %}{% endblock %} {% block body %}
{% endblock %}
<br> {# spacing for notice #} </body>
<footer class="page-footer" style="position: fixed; left: 0; bottom: 0; width: 100%; text-align: center"> </html>
<div class="container">
<span class="text-muted">This site uses a cookie to track your session in order to give you ownership over uploaded files and created instances.</span>
{# <button type="button" class="btn btn-secondary btn-sm" onclick="document.getElementById('cookiefooter').remove()">X</button> #}
</div>
</footer>
</body>

8
WebHostLib/templates/macros.html
View File

@ -1,10 +1,8 @@
{% macro list_rooms(rooms) -%} {% macro list_rooms(rooms) -%}
Rooms: <ul>
<ul class="list-group">
{% for room in rooms %} {% for room in rooms %}
<li class="list-group-item"><a href="{{ url_for("host_room", room=room.id) }}">Room #{{ room.id }}</a></li> <li><a href="{{ url_for("host_room", room=room.id) }}">Room #{{ room.id }}</a></li>
{% endfor %} {% endfor %}
{{ caller() }} {{ caller() }}
</ul> </ul>
{%- endmacro %} {%- endmacro %}

51
WebHostLib/templates/uploads.html
View File

@ -1,24 +1,37 @@
{% extends 'layout.html' %} {% extends 'layout.html' %}
{% block head %} {% block head %}
<title>Upload Multidata</title> <title>Upload Multidata</title>
<link rel="stylesheet" type="text/css" href="static/uploads.css" />
<script type="application/ecmascript" src="static/uploads.js"></script>
{% endblock %} {% endblock %}
{% block body %}
<h1>Upload Multidata or Multiworld Zip</h1>
<form method=post enctype=multipart/form-data>
<input type=file name=file>
<input type=submit value=Upload>
</form>
<br>
{% if rooms %}
<h1>Your Rooms:</h1>
<ul class="list-group">
{% for room in rooms %}
<li class="list-group-item"><a href="{{ url_for("host_room", room=room.id) }}">Room #{{ room.id }}</a>
based on <a href="{{ url_for("view_seed", seed=room.seed.id) }}">Seed #{{ room.seed.id }}</a></li>
{% endfor %}
</ul>
{% else %}
<h3>No rooms owned by you were found. Upload a Multiworld to get started.</h3>
{% endif %}
{% endblock %} {% block body %}
<div id="uploads-wrapper">
<div id="uploads" class="main-content">
<h3>Upload Multidata</h3>
<p>To host a game, you need up upload a .multidata file or a .zip file created by the
multiworld generator.</p>
<div id="uploads-form-wrapper">
<form id="upload-form" method="post" enctype="multipart/form-data">
<input id="file-input" type="file" name="file">
</form>
<button id="upload-button">Upload</button>
</div>
{% if rooms %}
<p>Your Rooms:</p>
<ul id="room-list">
{% for room in rooms %}
<li>
Room: <a href="{{ url_for("host_room", room=room.id) }}">{{ room.id }}</a><br />
Seed: <a href="{{ url_for("view_seed", seed=room.seed.id) }}">{{ room.seed.id }}</a>
</li>
{% endfor %}
</ul>
{% else %}
<p>No rooms owned by you were found. Upload a file to get started.</p>
{% endif %}
</div>
</div>
{% endblock %}

68
WebHostLib/templates/view_seed.html
View File

@ -1,25 +1,55 @@
{% extends 'layout.html' %} {% extends 'layout.html' %}
{% import "macros.html" as macros %} {% import "macros.html" as macros %}
{% block head %} {% block head %}
<title>Multiworld Seed {{ seed.id }}</title> <title>Multiworld Seed {{ seed.id }}</title>
<link rel="stylesheet" type="text/css" href="../static/layout.css">
<link rel="stylesheet" type="text/css" href="../static/view_seed.css" />
<script type="application/ecmascript" src="../static/view_seed.js" ></script>
{% endblock %} {% endblock %}
{% block body %} {% block body %}
Seed #{{ seed.id }}<br> <div id="view-seed-wrapper">
Created: {{ seed.creation_time }} UTC <br> <div class="main-content">
Players: <h3>Seed Info</h3>
<ul class="list-group"> <table>
{% for team in seed.multidata["names"] %} <tbody>
<li class="list-group-item">Team #{{ loop.index }} - {{ team | length }} <tr>
<ul class="list-group"> <td>Seed:&nbsp;</td>
{% for player in team %} <td>{{ seed.id }}</td>
<li class="list-group-item">{{ player }}</li> </tr>
{% endfor %} <tr>
</ul> <td>Created:&nbsp;</td>
</li> <td id="creation-time" data-creation-time="{{ seed.creation_time }}"></td>
{% endfor %} </tr>
</ul> <tr>
{% call macros.list_rooms(rooms) %} <td>Players:&nbsp;</td>
<li class="list-group-item list-group-item-action"><a href="{{ url_for("new_room", seed=seed.id) }}">new <td>
room</a></li> <ul>
{% endcall %} {% for team in seed.multidata["names"] %}
{% endblock %} <li>Team #{{ loop.index }} - {{ team | length }}
<ul>
{% for player in team %}
<li>{{ player }}</li>
{% endfor %}
</ul>
</li>
{% endfor %}
</ul>
</td>
</tr>
<tr>
<td>Rooms:&nbsp;</td>
<td>
{% call macros.list_rooms(rooms) %}
<li>
<a href="{{ url_for("new_room", seed=seed.id) }}">Create New Room</a>
</li>
{% endcall %}
</td>
</tr>
</tbody>
</table>
</div>
</div>
{% endblock %}

2
requirements.txt
View File

@ -4,4 +4,4 @@ PyYAML>=5.3.1
fuzzywuzzy>=0.18.0 fuzzywuzzy>=0.18.0
bsdiff4>=1.1.9 bsdiff4>=1.1.9
prompt_toolkit>=3.0.5 prompt_toolkit>=3.0.5
appdirs>=1.4.4 appdirs>=1.4.4