WebHost: Massive overhaul of options pages

[LegendaryLinux]

What is this fixing or adding?

This is a big one.

I have re-written player-options and weighted-options in Jinja, rather than generating it all in JavaScript. The pages are completely usable without JS now, though JS will provide some nice features.

What has been done:

• player-options and weighted-options are now created entirely in Jinja
• weighted-options is now a per-game page because 87MB of HTML is ridiculous and my 16-core system couldn't render the page in under fifteen seconds
• Interactive elements are hidden by a
• All option types have been implemented
• Option groups have been implemented, and their divs are collapsible (no js required)
• Implement server-side generation of the YAML export
• Implement "generate single-player game"
• Load the user's previous settings from localStorage, and save settings when the form is submitted
• Implement option presets functionality on player-options
• Allow option groups to have a specified display order (implemented by @alwaysintreble)
• Changed the "Generate Game" button to read "Generate Single-Player Game" to reduce confusion experienced by new users

Out of scope, but I did it anyway

• Added support for option visibility in simple and complex pages, allowing devs to choose if options should appear nowhere, in player-options only, or on all options pages
• Updated supported-games page to include links to the "Advanced Options" pages
• Updated supported-games page to use details/summary tags for collapsible content
• weighted-options pages now share a theme with their other game pages

Important changes for world devs:

• The tooltip text rendering has been changed. It is no longer passed through JSON, and so takes its formatting more from the doc comment string now. You should look at your world pages and update the whitespace in your docs to make sure they look how you want.

How was this tested?

I tested this locally, and generated many, many YAML files.

If this makes graphical changes, please attach screenshots.

[LegendaryLinux]

Okay, I think the /player-options page is done. Please let me know if you find any further bugs.

New Bugfixes

• Fixed very long item/location/option names with no spaces causing the page to exceed its max width
• Fixed the "randomize" button being very large in single-column display
• Restored the warning message if a user doesn't enter a player name
• The presets select will now show "Custom" again when form inputs are changed

Quality of Life Improvements

• Added game name to the page header. I can't believe this wasn't there already.
• Option groups now support custom ordering (implemented by @alwaysintreble)
  • https://github.com/ArchipelagoMW/Archipelago/pull/2616

Still on the TODO List:

• Implement option groups on /weighted-options

[LegendaryLinux]

I have un-broken weigeted-options, thus making this PR ready for actual review and inclusion.

Note not all option types are included in weighted-options yet because that is technically supposed to be covered in a different PR. One for which I will need to rebuild the weighted-options page. As this PR already includes a ton of changes, I figure it's best to not let scope creep get any worse here.

The next two PRs will be for:

1. This PR
2. Rebuild weighted-settings in Jinja and support all option types properly
3. Allow developers to specify which pages to display options on

Weighted Options now shows the group name above the groups, as seen here:

[LegendaryLinux]

And we're back to a draft because weighted-options is definitely still very broken.

[LegendaryLinux]

Screw it. I'm including the weighted-options re-write in this PR as well. I'd rather just nuke the JS now instead of fixing it just to delete it later.

[LegendaryLinux]

I have updated the original post's content to reflect the current state of this PR. Please give that a re-read.

[beauxq]

I see this:

The tooltip text rendering has been changed. It is no longer passed through JSON, and so takes its formatting more from the doc comment string now. You should look at your world pages and update the whitespace in your docs to make sure they look how you want.

But the fact that it doesn't even make sure line breaks aren't in the middle of a word seems like a big burden to put on developers. I think we should be able to apply some basic formatting to handle some of the basic issues generally, and not have to worry about it in each individual doc string.

[Silvris]

Looks like rendering of option names have also changed. I think at least word wrap should probably be applied.

[Silvris]

Seems like the tooltip can get misaligned from the indicator as well.

[remyjette]

I wonder, should the "item & location options" be visible by default on the standard options page? New players generally won't need them, and they make the page a bit overwhelming with the number of available options there. May be worth considering collapsing the section by default.

[LegendaryLinux]

I like the idea of keeping things simple for new players. I've updated the pages to expand only the first option group on load.

[Exempt-Medic]

A few pages still link to weighted-settings, in particular: https://archipelago.gg/tutorial/A%20Link%20to%20the%20Past/multiworld/es https://archipelago.gg/tutorial/A%20Link%20to%20the%20Past/multiworld/fr https://archipelago.gg/tutorial/Archipelago/advanced_settings/en

[LegendaryLinux]

Fixed.

[Exempt-Medic]

References to weighted options/settings that should be fixed:

• Site Map
• Options API
• Overcooked 2 Setup Guide (This line can be entirely removed because the option now appears on the regular options page)
• StarCraft 2 Setup Guide (Again, can be entirely removed)
• Advanced YAML Guide (Could probably just remove the full sentence mentioning "weighted settings"
• World API and World API

This is also seems to make both item_descriptions and location_descriptions not display anywhere, or I at least can't find them on any part of the site. If those are being removed, some documentation needs to be updated and world maintainers need to be informed.

[Exempt-Medic]

I'm unsure if this is possible, but it would be nice to have the weighted-options pages for games be able to use presets, or at least be able to reset to the default values.

[Exempt-Medic]

Option Sets should be sorted, probably alphabetically. Navigating long lists with seemingly-random sorts is not viable

[Exempt-Medic]

Really long "words" don't display well

[Exempt-Medic]

The spacing/formatting here could be improved (this is Hollow Knight).

[Exempt-Medic]

Is changing to a preset supposed to reload the page now? It doesn't do that on main, but it does with these changes.

[Exempt-Medic]

Final Fantasy on main does not appear on the weighted-options page. I assume this is intended, given the way making an FF1 YAML works. With these changes, FF1 has an advanced-options page even though it probably should not. This also applies to Sudoku.

[Exempt-Medic]

Sudoku's option page is now listed as an external link, it is not an external link however

[ThePhar]

Hard to check the code specifically at this moment, but in Rogue Legacy options for example, when loading the "Limited Potential" preset, the NamedRange of Progression Balancing is not setting to 0 correctly as defined in the preset.

Also the text shows as "disabled" near the range slider, but still exports a 50.

Also appears the preset name no longer outputs in the description YAML.

[Zunawe]

For 2e94d7a, I think world devs should be allowed to specify the order of keys. Alphabetical is a good catch-all if the order is going to be arbitrary anyway, but I think it's reasonable to have orders other than that. For Emerald's AllowedLegendaryHuntEncounters, I group them by the method used to access them. Kyogre and Groudon are both found in the same way. And Mew, Deoxys, Ho-Oh, and Lugia are found in the same way. So it's easier to see what you're doing when they're next to each other. I don't have a concrete example, but I can imagine an OptionSet for named missions that would be more reasonably ordered from first to last rather than alphabetically.

So my preference is for either the automatic sort to be done only if valid_keys is unordered, or to have the webhost continue to take what it's given and give the power and responsibility to worlds, which will probably catch up quickly once people start looking at the new option pages.

[LegendaryLinux]

in Rogue Legacy options for example, when loading the "Limited Potential" preset, the NamedRange of Progression Balancing is not setting to 0 correctly as defined in the preset.

Also the text shows as "disabled" near the range slider, but still exports a 50.

Also appears the preset name no longer outputs in the description YAML.

This has been fixed.

[LegendaryLinux]

So my preference is for either the automatic sort to be done only if valid_keys is unordered

@Zunawe, I know just enough Python to be dangerous. How would I accomplish this? My understanding is Lists are always unordered, or rather, they have the order they were defined with.

Edit: Actually, I think I've got it: {% for key in (option.valid_keys if option.valid_keys is ordered else option.valid_keys|sort) %}

[Zunawe]

Sorting looks good to me now. Thanks.

[ScipioWright]

The option selection bars are really wide, and the the space for option names is much smaller now, which I really don't like. Current:

This PR:

[hatkirby]

There seems to be something off with the way the option pages handle the width of the browser. I'm seeing a horizontal scrollbar on every game's options page, and there's nothing to the right (presumably it is just extra space that would be used to center the page).

[LegendaryLinux]

@ScipioWright I bumped the width of the option name column up a bit. @hatkirby, Is that Firefox? I don't see that width issue in Chrome or Firefox.

[hatkirby]

Firefox 126.0 on Windows, at 1210px width.

[LegendaryLinux]

I found and fixed the issue by adding overflow-x: hidden to the html style for that page. It aligns properly and has no content over there. I have no clue what was causing it. The issue was not present on the weighted-options or landing pages.