Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

WebHost: Massive overhaul of options pages #2614

Merged
merged 96 commits into from
May 18, 2024
Merged

WebHost: Massive overhaul of options pages #2614

merged 96 commits into from
May 18, 2024

Conversation

LegendaryLinux
Copy link
Member

@LegendaryLinux LegendaryLinux commented Dec 18, 2023

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 tag if JS is disabled. This does not prevent the user from accessing any options
    • The randomize buttons will not disable their respective inputs, but the toggle will still work without JS
    • The presets select is hidden
  • 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.

image
image
image
image
image
image

LegendaryLinux and others added 26 commits December 6, 2023 22:31
…lid option types, add support for TextChoice options
…uts where the default is random, nuke the JS
* Make the python more PEP8 and remove unneeded imports

* remove LocationSet from `Item & Location Options` group
@LegendaryLinux LegendaryLinux added is: enhancement Issues requesting new features or pull requests implementing new features. is: refactor/cleanup Improvements to code/output readability or organizization. affects: webhost Issues/PRs that touch webhost and may need additional validation. labels Dec 18, 2023
WebHostLib/misc.py Outdated Show resolved Hide resolved
@LegendaryLinux
Copy link
Member Author

LegendaryLinux commented May 15, 2024

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
Copy link
Member Author

LegendaryLinux commented May 15, 2024

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
Copy link
Collaborator

Zunawe commented May 17, 2024

Sorting looks good to me now. Thanks.

@ScipioWright

This comment was marked as resolved.

@hatkirby
Copy link
Collaborator

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).

image

@LegendaryLinux
Copy link
Member Author

@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
Copy link
Collaborator

Firefox 126.0 on Windows, at 1210px width.

@LegendaryLinux
Copy link
Member Author

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.

@Ishigh1
Copy link
Contributor

Ishigh1 commented May 18, 2024

I tested this branch on my Stardew Valley Tilesanity branch that adds 30000 unique items and locations. With it, the option page just crashes after trying to load the options for every item and locations and taking all of my RAM.
It is an extreme example and I don't intend to merge my branch into core (for a while?) anyway, but I think it's good to keep in mind that this limits the amount of locations and items a world can have before its option page breaks
Well, maybe things could be solved by only loading the item/location option part on demand, if there is few enough items and locations, or maybe we'll never accept a world with that many items and locations into core, I don't know, but I thought this should be considered at least

@LegendaryLinux LegendaryLinux merged commit 5e3c5de into main May 18, 2024
23 checks passed
@LegendaryLinux LegendaryLinux deleted the option-groups branch May 18, 2024 04:12
jnschurig pushed a commit to Tranquilite0/Archipelago-SoulBlazer that referenced this pull request Jun 13, 2024
* Implement support for option groups. WebHost options pages still need to be updated.

* Remove debug output

* In-progress conversion of player-options to Jinja rendering

* Support "Randomize" button without JS, transpile SCSS to CSS, include map file for later editors

* Un-alphabetize options, add default group name for item/location Option classes, implement more option types

* Re-flow UI generation to avoid printing rows with unsupported or invalid option types, add support for TextChoice options

* Support all remaining option types

* Rendering improvements and CSS fixes for prettiness

* Wrap options in a form, update button styles, fix labels, disable inputs where the default is random, nuke the JS

* Minor CSS tweaks, as recommended by the designer

* Hide JS-required elements in noscript tag. Add JS reactivity to range, named-range, and randomize buttons.

* Fix labels, add JS handling for TextChoice

* Make option groups collapsable

* PEP8 current option_groups progress (ArchipelagoMW#2604)

* Make the python more PEP8 and remove unneeded imports

* remove LocationSet from `Item & Location Options` group

* It's ugly, but YAML generation is working

* Stop generating JSON files for player-options pages

* Do not include ItemDict entries whose values are zero

* Properly format yaml output

* Save options when form is submitted, load options on page load

* Fix options being omitted from the page if a group has an even number of options

* Implement generate-game, escape option descriptions

* Fix "randomize" checkboxes not properly setting YAML options to "random"

* Add a separator between item/location groups and items/locations in their respective lists

* Implement option presets

* Fix docs to detail what actually ended up happening

* implement option groups on webworld to allow dev sorting (ArchipelagoMW#2616)

* Force extremely long item/location/option names with no spaces to text-wrap

* Fix "randomize" button being too wide in single-column display, change page header to include game name

* Update preset select to read "custom" when updating form inputs. Show error message if the user doesn't input a name

* Un-break weighted-options, add option group names to weighted options

* Nuke weighted-options. Set up framework to rebuild it in Jinja.

* Generate styles with scss, remove styles which will be replaced, add placeholders for worlds

* Support Toggle, DefaultOnToggle, and Choice options in weighted-options

* Implement expand/collapse without JS for worlds and option groups

* Properly style set options

* Implement Range and NamedRange. Also, CSS is hard.

* Add support for remaining option types. JS and backend still forthcoming.

* Add JS functionality for collapsing game divs, populating span values on range updates. Add <noscript> tag to warn users with JS disabled.

* Support showing/hiding game divs based on range value for game

* Add support for adding/deleting range rows

* Save settings to localStorage on form submission

* Save deleted options on form submission

* Break weighted-options into a per-game page.

- Break weighted-options into a per-game page
- Add "advanced options" links to supported games page
- Use details/summary tags on supported games, player-options, and weighted-options
- Fix bug preventing previously deleted rows from being removed on page load if JS is enabled
- Move route handling for options pages to options.py
- Remove world handling from weighted-options

* Implement loading previous settings from localStorage on page load if JS is enabled

* Weighted options can now generate YAML files and single-player games

* options pages now respect option visibility settings for simple and complex pages

* Remove `/weighted-settings` redirect, fix weighted-options link on player-options page

* Fix instance of AutoWorld not having access to proper `random`

* Catch instances of frozenset along with set

* Restore word-wrap in tooltips

* Fix word wrap in player-options labels

* Add `dedent` filter to help with formatting tooltips in player-options

* Do not change the ordering of keys when printing yaml files

* Move necessary import out of conditional statement

* Expand only the first option group by default on both options pages

* Respect option visibility when generating yaml template files

* Swap to double quotes

* Replace instances of `/weighted-settings` with `/weighted-options`, swap out incomplete links

* Strip newlines and spaces after applying dedent filter

* Fix documentation for option groups

* Update site map

* Update various docs

* Sort OptionSet lists alphabetically

* Minor style tweak

* Fix extremely long text overflowing tooltips

* Convert player-options to use CSS grid instead of tables

* Do not display link to weighted-options page on supported games if the options page is an external link

* Update worlds/AutoWorld.py

Bugfix by @alwaysintreble

Co-authored-by: Aaron Wagener <mmmcheese158@gmail.com>

* Fix NamedRange options not being properly set if a preset it loaded

* Move option-presets route into options.py

* Include preset name in YAML if not "default" and not "custom"

* Removed macros for PlandoBosses and DefaultOnToggle, as they were handled by their parent classes

* Fix not disabling custom inputs when the randomize button is clicked

* Only sort OptionList and OptionSet valid_keys if they are unordered

* Quick style fixes for player-settings to give `select` elements `text-overflow: ellipsis` and increase base size of left-column

* Prevent showing a horizontal scroll bar on player-options if the browser width was beneath a certain threshold

* Fix a bug in weighted-options which prevented inputting a negative value for new range inputs

---------

Co-authored-by: Aaron Wagener <mmmcheese158@gmail.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
affects: core Issues/PRs that touch core and may need additional validation. affects: webhost Issues/PRs that touch webhost and may need additional validation. is: enhancement Issues requesting new features or pull requests implementing new features. is: refactor/cleanup Improvements to code/output readability or organizization. waiting-on: author Issue/PR is waiting for feedback or changes from its author. waiting-on: peer-review Issue/PR has not been reviewed by enough people yet.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet