Add error message to player-settings and weighted-settings pages if the call to /api/generate returns a non-2xx response code.

WebHostLib/static/assets/playerSettings.js

@@ -170,6 +170,12 @@ const generateGame = (raceMode = false) => {
     race: raceMode ? '1' : '0',
   }).then((response) => {
     window.location.href = response.data.url;
+  }).catch((error) => {
+    const userMessage = document.getElementById('user-message');
+    userMessage.innerText = 'Something went wrong and your game could not be generated.';
+    userMessage.classList.add('visible');
+    window.scrollTo(0, 0);
+    console.error(error);
   });
 };
 

WebHostLib/static/assets/weightedSettings.js

@@ -473,5 +473,11 @@ const generateGame = (raceMode = false) => {
     race: raceMode ? '1' : '0',
   }).then((response) => {
     window.location.href = response.data.url;
+  }).catch((error) => {
+    const userMessage = document.getElementById('user-message');
+    userMessage.innerText = 'Something went wrong and your game could not be generated.';
+    userMessage.classList.add('visible');
+    window.scrollTo(0, 0);
+    console.error(error);
   });
 };

WebHostLib/static/styles/playerSettings.css

@@ -29,6 +29,20 @@ html{
     color: #000000;
 }
 
+#player-settings #user-message{
+    display: none;
+    width: calc(100% - 8px);
+    background-color: #ffe86b;
+    border-radius: 4px;
+    color: #000000;
+    padding: 4px;
+    text-align: center;
+}
+
+#player-settings #user-message.visible{
+    display: block;
+}
+
 #player-settings h1{
     font-size: 2.5rem;
     font-weight: normal;

WebHostLib/static/styles/weightedSettings.css

@@ -14,7 +14,7 @@ html{
     color: #eeffeb;
 }
 
-#user-warning{
+#user-warning, #weighted-settings #user-message{
     display: none;
     width: calc(100% - 8px);
     background-color: #ffe86b;
@@ -25,6 +25,10 @@ html{
     cursor: pointer;
 }
 
+#weighted-settings #user-message.visible{
+    display: block;
+}
+
 #weighted-settings code{
     background-color: #d9cd8e;
     border-radius: 4px;