Implement a versioning system for the weighted-settings page

WebHostLib/static/assets/weightedSettings.js

@@ -2,9 +2,17 @@ let spriteData = null;
 
 window.addEventListener('load', () => {
   const gameSettings = document.getElementById('weighted-settings');
-  Promise.all([fetchPlayerSettingsYaml(), fetchPlayerSettingsJson(), fetchSpriteData()]).then((results) => {
+  Promise.all([fetchWeightedSettingsYaml(), fetchWeightedSettingsJson(), fetchSpriteData()]).then((results) => {
     // Load YAML into object
     const sourceData = jsyaml.safeLoad(results[0], { json: true });
+    const wsVersion = sourceData.ws_version;
+    delete sourceData.ws_version; // Do not include the settings version number in the export
+
+    // Check if settings exist in localStorage. If no settings are present, this is a first load (or reset to default)
+    // and the version number should be silently updated
+    if (!localStorage.getItem('weightedSettings1')) {
+      localStorage.setItem('wsVersion', wsVersion);
+    }
 
     // Update localStorage with three settings objects. Preserve original objects if present.
     for (let i=1; i<=3; i++) {
@@ -25,6 +33,16 @@ window.addEventListener('load', () => {
     document.getElementById('export-button').addEventListener('click', exportSettings);
     document.getElementById('reset-to-default').addEventListener('click', resetToDefaults);
     adjustHeaderWidth();
+
+    if (localStorage.getItem('wsVersion') !== wsVersion) {
+      const userWarning = document.getElementById('user-warning');
+      const messageSpan = document.createElement('span');
+      messageSpan.innerHTML = "A new version of the weighted settings file is available. Click here to update!" +
+        "<br />Be aware this will also reset your presets, so you should export them now if you want to save them.";
+      userWarning.appendChild(messageSpan);
+      userWarning.style.display = 'block';
+      userWarning.addEventListener('click', resetToDefaults);
+    }
   }).catch((error) => {
     console.error(error);
     gameSettings.innerHTML = `
@@ -37,7 +55,7 @@ window.addEventListener('load', () => {
   document.getElementById('generate-race').addEventListener('click', () => generateGame(true));
 });
 
-const fetchPlayerSettingsYaml = () => new Promise((resolve, reject) => {
+const fetchWeightedSettingsYaml = () => new Promise((resolve, reject) => {
   const ajax = new XMLHttpRequest();
   ajax.onreadystatechange = () => {
     if (ajax.readyState !== 4) { return; }
@@ -51,7 +69,7 @@ const fetchPlayerSettingsYaml = () => new Promise((resolve, reject) => {
   ajax.send();
 });
 
-const fetchPlayerSettingsJson = () => new Promise((resolve, reject) => {
+const fetchWeightedSettingsJson = () => new Promise((resolve, reject) => {
   const ajax = new XMLHttpRequest();
   ajax.onreadystatechange = () => {
     if (ajax.readyState !== 4) { return; }

WebHostLib/static/static/weightedSettings.yaml

@@ -17,6 +17,11 @@
 # To test if your yaml is valid or not, you can use this website:
 # http://www.yamllint.com/
 
+# For use with the weighted-settings page on the website. Changing this value will cause all users to be prompted
+# to update their settings. The version number should match the current released version number, and the revision
+# should be updated manually by whoever edits this file.
+ws_version: 4.0.1 rev0
+
 description: Template Name # Used to describe your yaml. Useful if you have multiple files
 name: YourName # Your name in-game. Spaces will be replaced with underscores and there is a 16 character limit
 ### Logic Section ###

WebHostLib/static/styles/weightedSettings.css

@@ -14,6 +14,17 @@ html{
     color: #eeffeb;
 }
 
+#user-warning{
+    display: none;
+    width: calc(100% - 8px);
+    background-color: #ffe86b;
+    border-radius: 4px;
+    color: #000000;
+    padding: 4px;
+    text-align: center;
+    cursor: pointer;
+}
+
 #weighted-settings code{
     background-color: #d9cd8e;
     border-radius: 4px;

WebHostLib/templates/weightedSettings.html

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