Grinch-AP/WebHostLib/templates/player-settings.html

{% extends 'layout.html' %}

{% block head %}
    <title>Player Settings</title>
    <link rel="stylesheet" type="text/css" href="{{ static_autoversion("styles/player-settings.css") }}" />
    <script type="application/ecmascript" src="{{ static_autoversion("assets/js-yaml.min.js") }}"></script>
    <script type="application/ecmascript" src="{{ static_autoversion("assets/player-settings.js") }}"></script>
{% endblock %}

{% block body %}
    <div id="game-settings" class="main-content">
        <h3>Player Settings</h3>
        <div id="instructions">
            This page is used to configure your player settings. You have three presets you can control, which
            you can access using the dropdown menu below. These settings will be usable when generating a
            single player game, or you can export them to a <code>.yaml</code> file and use them in a multiworld.
        </div>

        <div id="settings-wrapper">
            <div class="setting-wrapper">
                Choose a preset and optionally assign it a nickname, which will be used as the file's description if
                you download it.
                <table class="option-set">
                    <tbody>
                        <tr>
                            <td class="option-name">
                                <label for="preset-number">Preset Number:</label>
                            </td>
                            <td class="option-value">
                                <select id="preset-number">
                                    <option value="1">Preset 1</option>
                                    <option value="2">Preset 2</option>
                                    <option value="3">Preset 3</option>
                                </select>
                            </td>
                        </tr>
                        <tr>
                            <td class="option-name">
                                <label for="description">Preset Name:</label>
                            </td>
                            <td class="option-value">
                                <input id="description" class="setting" data-setting="description" />
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>

            Choose a name you want to represent you in-game. This will appear when you send items
            to other people in multiworld games.
            <table class="option-set">
                <tbody>
                    <tr>
                        <td class="option-name">
                            <label for="name">Player Name:</label>
                        </td>
                        <td class="option-value">
                            <input id="name" maxlength="16" class="setting" data-setting="name" />
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div id="game-settings-button-row">
            <button id="export-button">Export Settings</button>
        </div>
    </div>
{%  endblock %}