WebHost: Remove "Random" as an option and move to separate button in Player Settings

[ThePhar]

Putting this in draft as it will definitely need styling to be consistent with other themes, but here's a working prototype of the separate random button in the player settings page.

The goal is to reduce confusion with what the "Random" option is on Choices in the player settings page and instead moves it to its own button off to the side. By clicking the button, it locks out user input on the normal input and lights up to indicate that option is now being randomized.

An additional benefit is players can now randomize Ranges in addition to Choices/Toggles:

Preview in motion:

Final YAML export based on above gif:

Starcraft 2 Wings of Liberty:
  progression_balancing: random
  accessibility: random
  game_difficulty: random
  upgrade_bonus: random
  bunker_upgrade: random
  all_in_map: random
  mission_order: random
  shuffle_protoss: random
  relegate_no_build: random
description: 'Generated by https://archipelago.gg/'
game: Starcraft 2 Wings of Liberty
name: Phar

The random option is also saved in local storage so coming back to the page retains the saved setting.

Somethings I still want to work on is some code clean up and working with Farrak on styles to maintain better styling. :)

[ThePhar]

Did not mean to pull in the review request (since it's in Draft) whoops. Not sure how that happened.

[LegendaryLinux]

So far it looks great. Let me know when you're ready for review, then after it's accepted I'll take it to the designer and get the theme styles.

[black-sliver]

I think user expectation of a "dice button" would be to roll immediately, but with it being "pressed in" and the corresponding input disabled, i think it's clear what it does when pressing it, so :+1: from me

[LegendaryLinux]

I agree with that. At first I thought it was a button to immediately randomize the current value of the option. I know a checkbox was briefly discussed, and the button looks better. I still hope we come up with a clear way to explain what the button does up front, without the user needing to "figure it out."

[ThePhar]

The mouseover tooltip should be sufficient in my opinion. It can be tweaked if the verbiage should be clearer.

[ThePhar]

The other alternative I thought of is to spell out "Randomize Setting" or something, but that makes the button or checkbox larger of which there isn't much space of anyway, so outside of users reading the guides, this seemed like the best option. If it helps, it's the same strategy used by the Varia rando team on their site, only without the tooltip on mouseover.

[LegendaryLinux]

I think if the background-color of the button is made to match the color of the tooltip question marks, we should be in good shape.

[LegendaryLinux]

Maybe also change the tooltip on the button to read "Toggle randomization for this option!"

[ThePhar]

Made those changes, let's see how this looks.