UX Improvements. Add Generate buttons to weighted settings page.

WebHostLib/static/assets/weightedSettings.js

@@ -35,6 +35,8 @@ window.addEventListener('load', () => {
             <h2><a href="${window.location.origin}">Click here to return to safety!</a></h2>
             `
   });
+  document.getElementById('generate-game').addEventListener('click', () => generateGame());
+  document.getElementById('generate-race').addEventListener('click', () => generateGame(true));
 });
 
 const fetchPlayerSettingsYaml = () => new Promise((resolve, reject) => {
@@ -432,3 +434,15 @@ const buildSpritePicker = () => {
   spritePicker.appendChild(sprites);
   return spritePicker;
 };
+
+const generateGame = (raceMode = false) => {
+  const presetNumber = document.getElementById('preset-number').value;
+  axios.post('/api/generate', {
+    weights: { player: localStorage.getItem(`weightedSettings${presetNumber}`) },
+    presetData: { player: localStorage.getItem(`weightedSettings${presetNumber}`) },
+    playerCount: 1,
+    race: raceMode ? '1' : '0',
+  }).then((response) => {
+    window.location.href = response.data.url;
+  });
+};

WebHostLib/static/styles/landing.css

@@ -73,7 +73,7 @@ html{
     padding-top: 35px;
 }
 
-#generate-button{
+#player-settings-button{
     top: 350px;
     left: calc(50% - 100px);
     background-image: url("/static/static/button-images/button-a.png");
@@ -94,7 +94,7 @@ html{
     padding-left: 20px;
 }
 
-#player-settings-button{
+#generate-button{
     top: 75px;
     left: calc(50% + 416px + 75px);
     background-image: url("/static/static/button-images/button-b.png");

WebHostLib/templates/generate.html

@@ -11,26 +11,28 @@
     {% include 'header/oceanHeader.html' %}
     <div id="generate-game-wrapper">
         <div id="generate-game" class="grass-island">
-            <h1>Start Game{% if race %} (Race Mode){% endif %}</h1>
+            <h1>Upload Config{% 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
+                <a href="/player-settings">Player Settings</a> page. If you would like more advanced options,
+                the <a href="/weighted-settings">Weighted Settings</a> page might be what you're looking for.
+            </p>
             <p>
-                This page accepts a yaml file containing generator options.
-                You can find a documented example
-                <a href="https://raw.githubusercontent.com/Berserker66/MultiWorld-Utilities/master/playerSettings.yaml">here</a>.
-                This file can be saved as .yaml, edited to your liking and then supplied to the generator.
-                You can also upload a .zip with multiple YAMLs.
-                A proper menu is in the works.
                 {% if race -%}
-                    Race Mode means the spoiler log will be unavailable, roms will be encrypted and single-player has no multidata.
+                    This game will be generated in race mode, meaning the spoiler log will be unavailable,
+                    roms will be encrypted, and single-player games will have no multidata files.
                 {%- else -%}
-                    You can go to <a href="{{ url_for("generate", race=True) }}">race mode</a> to create a game without
-                    spoiler log and with encryption.
+                    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.
                 {%- 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/Berserker66/MultiWorld-Utilities/releases">client</a> to create a rom file.
-                In-Browser patching will come.
+                This patch file can be opened with the
+                <a href="https://github.com/Berserker66/MultiWorld-Utilities/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">

WebHostLib/templates/header/baseHeader.html

@@ -11,10 +11,10 @@
             <a href="/">multiworld randomizer</a>
         </div>
         <div id="base-header-right">
-            <a href="/generate">start game</a>
+            <a href="/player-settings">start game</a>
             <a href="/uploads">host game</a>
             <a href="/tutorial">setup guide</a>
-            <a href="/player-settings">player settings</a>
+            <a href="/generate">upload config</a>
             <a href="https://discord.gg/8Z65BR2">discord</a>
         </div>
     </header>

WebHostLib/templates/landing.html

@@ -12,10 +12,10 @@
             <h1>MULTIWORLD RANDOMIZER</h1>
         </div>
         <div id="landing-links">
-            <a href="/generate" id="generate-button">start<br />playing</a>
+            <a href="/player-settings" id="player-settings-button">start<br />playing</a>
             <a href="/uploads" id="uploads-button">host<br />game</a>
             <a href="/tutorial" id="setup-guide-button">setup guide</a>
-            <a href="/player-settings" id="player-settings-button">player settings</a>
+            <a href="/generate" id="generate-button">upload config</a>
             <a href="https://discord.gg/8Z65BR2" id="discord-button">discord</a>
         </div>
         <div id="landing-clouds">

WebHostLib/templates/playerSettings.html

@@ -11,7 +11,7 @@
 {% block body %}
     {% include 'header/grassHeader.html' %}
     <div id="player-settings">
-        <h1>Player Settings</h1>
+        <h1>Start Game</h1>
         <p>Choose the options you would like to play with! You may generate a single-player game from this page,
             or download a settings file you can use to participate in a MultiWorld. If you would like to make
             your settings extra random, check out the <a href="/weighted-settings">weighted settings</a>

WebHostLib/templates/weightedSettings.html

@@ -3,6 +3,7 @@
 {% block head %}
     <title>Player Settings</title>
     <link rel="stylesheet" type="text/css" href="{{ static_autoversion("styles/weightedSettings.css") }}" />
+    <script type="application/ecmascript" src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
     <script type="application/ecmascript" src="{{ static_autoversion("assets/js-yaml.min.js") }}"></script>
     <script type="application/ecmascript" src="{{ static_autoversion("assets/weightedSettings.js") }}"></script>
 {% endblock %}
@@ -67,6 +68,8 @@
         <div id="weighted-settings-button-row">
             <button id="reset-to-default">Reset to Defaults</button>
             <button id="export-button">Export Settings</button>
+            <button id="generate-game">Generate Game</button>
+            <button id="generate-race">Generate Race</button>
         </div>
     </div>
 {%  endblock %}