Add Start Playing page, clean up /generate page

This commit is contained in:
Chris Wilson 2021-10-11 20:52:30 -04:00
parent 065931cae7
commit e4f4c1f1be
7 changed files with 123 additions and 29 deletions

View File

@ -82,6 +82,12 @@ def page_not_found(err):
return render_template('404.html'), 404
# Start Playing Page
@app.route('/start-playing')
def start_playing():
return render_template(f"startPlaying.html")
# Player settings pages
@app.route('/games/<string:game>/player-settings')
def player_settings(game):

View File

@ -25,6 +25,21 @@
margin-bottom: 1rem;
}
#generate-game-form-wrapper table td{
text-align: left;
padding-right: 0.5rem;
}
#generate-form-button-row{
display: flex;
flex-direction: row;
justify-content: center;
}
#file-input{
display: none;
}
.interactive{
color: #ffef00;
}

View File

@ -0,0 +1,18 @@
#start-playing-wrapper{
display: flex;
flex-direction: row;
justify-content: center;
flex-wrap: wrap;
}
#start-playing{
width: 700px;
min-height: 240px;
text-align: center;
}
#start-playing-button-row{
display: flex;
flex-direction: row;
justify-content: space-evenly;
}

View File

@ -11,12 +11,11 @@
{% include 'header/oceanHeader.html' %}
<div id="generate-game-wrapper">
<div id="generate-game" class="grass-island">
<h1>Upload Config{% if race %} (Race Mode){% endif %}</h1>
<h1>Generate Game{% if race %} (Race Mode){% endif %}</h1>
<p>
This page allows you to generate a game by uploading a yaml file or a zip file containing yaml files.
If you do not have a config (yaml) file yet, you may create one on the game's settings page,
which you can find via the
<a href="{{ url_for("games") }}">Game List</a>.
This page allows you to generate a game by uploading a config file or a zip file containing config
files. If you do not have a config (.yaml) file yet, you may create one on the game's settings page,
which you can find via the <a href="{{ url_for("games") }}">supported games list</a>.
</p>
<p>
{% if race -%}
@ -24,33 +23,54 @@
roms will be encrypted, and single-player games will have no multidata files.
{%- else -%}
If you would like to generate a race game,
<a href="{{ url_for("generate", race=True) }}">click here.</a> Race games are generated without
a spoiler log, the ROMs are encrypted, and single-player games will not include a multidata file.
<a href="{{ url_for("generate", race=True) }}">click here.</a><br />
Race games are generated without a spoiler log, the ROMs are encrypted, and single-player games
will not include a multidata file.
{%- endif -%}
</p>
<p>
After generation is complete, you will have the option to download a patch file.
This patch file can be opened with the
<a href="https://github.com/ArchipelagoMW/Archipelago/releases">client</a>, which can be
used to to create a rom file. In-browser patching is planned for the future.
</p>
<div id="generate-game-form-wrapper">
<form id="generate-game-form" method="post" enctype="multipart/form-data">
<input id="file-input" type="file" name="file">
<label data-tooltip="After gathering this many checks, players can !hint <itemname> to get the location of that item." for="hint_cost">Hint Cost:</label><select name="hint_cost" id="hint_cost">
{% for n in range(0, 110, 5) %}
<option {% if n == 10 %}selected="selected" {% endif %} value="{{ n }}">{% if n > 100 %}Off{% else %}{{ n }}%{% endif %}</option>
{% endfor %}
</select>
<label for="forfeit_mode">Forfeit Permission:</label><select name="forfeit_mode" id="forfeit_mode">
<option value="auto">Automatic on goal completion</option>
<option value="goal">Allow !forfeit after goal completion</option>
<option value="auto-enabled">Automatic on goal completion and manual !forfeit</option>
<option value="enabled">Manual !forfeit</option>
<option value="disabled">Disabled</option>
</select>
<table>
<tbody>
<tr>
<td><label for="forfeit_mode">Forfeit Permission:</label></td>
<td>
<select name="forfeit_mode" id="forfeit_mode">
<option value="auto">Automatic on goal completion</option>
<option value="goal">Allow !forfeit after goal completion</option>
<option value="auto-enabled">Automatic on goal completion and manual !forfeit</option>
<option value="enabled">Manual !forfeit</option>
<option value="disabled">Disabled</option>
</select>
</td>
</tr>
<tr>
<td>
<label for="hint_cost"> Hint Cost:</label>
<span
class="interactive"
data-tooltip="After gathering this many checks, players can !hint <itemname>
to get the location of that hint item.">(?)
</span>
</td>
<td>
<select name="hint_cost" id="hint_cost">
{% for n in range(0, 110, 5) %}
<option {% if n == 10 %}selected="selected" {% endif %} value="{{ n }}">
{% if n > 100 %}Off{% else %}{{ n }}%{% endif %}
</option>
{% endfor %}
</select>
</td>
</tr>
</tbody>
</table>
<div id="generate-form-button-row">
<input id="file-input" type="file" name="file">
</div>
</form>
<button id="generate-game-button">Upload</button>
<button id="generate-game-button">Upload File</button>
</div>
</div>
</div>

View File

@ -13,7 +13,7 @@
<div id="base-header-right">
<a href="/games">supported games</a>
<a href="/tutorial">setup guides</a>
<a href="/uploads">start game</a>
<a href="/start-playing">start playing</a>
<a href="/faq/en">f.a.q.</a>
<a href="https://discord.gg/8Z65BR2" target="_blank">discord</a>
</div>

View File

@ -13,7 +13,7 @@
<h4>multiworld multi-game randomizer</h4>
</div>
<div id="landing-links">
<a href="/uploads" id="mid-button">start<br />game</a>
<a href="/start-playing" id="mid-button">start<br />playing</a>
<a href="/games" id="far-left-button">supported<br />games</a>
<a href="/tutorial" id="mid-left-button">setup guides</a>
<a href="https://discord.gg/8Z65BR2" id="far-right-button" target="_blank">discord</a>

View File

@ -0,0 +1,35 @@
{% extends 'pageWrapper.html' %}
{% block head %}
{{ super() }}
<title>Start Playing</title>
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename="styles/startPlaying.css") }}" />
{% endblock %}
{% block body %}
{% include 'header/oceanHeader.html' %}
<div id="start-playing-wrapper">
<div id="start-playing" class="grass-island {% if rooms %}wider{% endif %}">
<h1>Start Playing</h1>
<p>
To start playing a game, you'll first need to generate a randomized game. You can do that on this
website, by clicking the button below labeled &apos;Generate and Host&apos;.
<br /><br />
If you have already generated a game and would just like to host it on this site, click the button
labeled &apos;Host Only&apos;
<br /><br />
If you have no idea what any of that means, don't worry! We have a page full of tutorials for each
game that will get you started properly. To get there, click on the button labeled
&apos;Tutorials&apos;.
</p>
<div id="start-playing-button-row">
<a href="/uploads"><button>Host Only</button></a>
<a href="/generate"><button>Generate and Host</button></a>
<a href="/tutorials"><button>Tutorials</button></a>
</div>
</div>
</div>
{% include 'islandFooter.html' %}
{% endblock %}