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

This commit is contained in:
Chris Wilson 2021-05-13 21:33:56 -04:00
parent b2f3fd56f4
commit c24d6a0785
6 changed files with 33 additions and 1 deletions

View File

@ -170,6 +170,12 @@ const generateGame = (raceMode = false) => {
race: raceMode ? '1' : '0', race: raceMode ? '1' : '0',
}).then((response) => { }).then((response) => {
window.location.href = response.data.url; 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);
}); });
}; };

View File

@ -473,5 +473,11 @@ const generateGame = (raceMode = false) => {
race: raceMode ? '1' : '0', race: raceMode ? '1' : '0',
}).then((response) => { }).then((response) => {
window.location.href = response.data.url; 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);
}); });
}; };

View File

@ -29,6 +29,20 @@ html{
color: #000000; 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{ #player-settings h1{
font-size: 2.5rem; font-size: 2.5rem;
font-weight: normal; font-weight: normal;

View File

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

View File

@ -11,6 +11,7 @@
{% block body %} {% block body %}
{% include 'header/grassHeader.html' %} {% include 'header/grassHeader.html' %}
<div id="player-settings"> <div id="player-settings">
<div id="user-message"></div>
<h1>Start Game</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, <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 or download a settings file you can use to participate in a MultiWorld. If you would like to make

View File

@ -12,6 +12,7 @@
{% include 'header/grassHeader.html' %} {% include 'header/grassHeader.html' %}
<div id="weighted-settings"> <div id="weighted-settings">
<header id="user-warning"></header> <header id="user-warning"></header>
<div id="user-message"></div>
<h1>Weighted Settings</h1> <h1>Weighted Settings</h1>
<div id="instructions"> <div id="instructions">
This page is used to configure your weighted settings. You have three presets you can control, which This page is used to configure your weighted settings. You have three presets you can control, which