Add /convert-settings for YAML -> TOML settings file conversion

convert-settings.html

@@ -0,0 +1,23 @@
+---
+layout: page
+title: LOOT Settings File Converter
+permalink: /convert-settings/
+---
+
+<p>Convert your <code>settings.yaml</code> (used by LOOT v0.11.0 and earlier) to a <code>settings.toml</code> (used by LOOT v0.12.0 and later). Your <code>settings.yaml</code> can be found in <code>%LOCALAPPDATA%\LOOT\</code>, which LOOT's "Open Debug Log Location" menu option opens, and the <code>settings.toml</code> goes in the same directory.</p>
+
+<section>
+    <h3>YAML</h3>
+    <textarea id="input">Drag 'n' drop (or paste the contents of) your settings.yaml here.</textarea>
+</section>
+
+<section>
+    <h3>TOML <a id="download" download="settings.toml"></a></h3>
+    <textarea id="output" readonly></textarea>
+</section>
+
+<p>Note that the download link that appears above after converting YAML does not work in Internet Explorer or Edge. Users of those browsers will need to copy the content of the TOML text box into a <code>settings.toml</code> file they create themselves, or use a different browser</code>.</p>
+
+<script src="https://cdnjs.cloudflare.com/ajax/libs/js-yaml/3.4.3/js-yaml.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/tomlify-j0.4@3.0.0/tomlify.min.js"></script>
+<script src="/js/convert.js"></script>

css/style.css

@@ -173,3 +173,14 @@ h3:first-child {
 dt:not(:first-child) {
   margin-top: 16px;
 }
+
+/* Convert settings page styling. */
+section {
+    display: inline-block;
+    width: 45%;
+    padding: 8px;
+}
+#input, #output {
+    width: 100%;
+    min-height: 400px;
+}

js/convert.js

@@ -0,0 +1,90 @@
+'use strict';
+
+function upgradeOldYaml(yaml) {
+    if (yaml['Debug Verbosity'] && !yaml.enableDebugLogging) {
+        yaml.enableDebugLogging = yaml['Debug Verbosity'] > 0;
+    }
+
+    if (yaml['Update Masterlist'] && !yaml.updateMasterlist) {
+        yaml.updateMasterlist = yaml['Update Masterlist'];
+    }
+
+    if (yaml.Game && !yaml.game) {
+        yaml.game = yaml.Game;
+    }
+
+    if (yaml.Language && !yaml.language) {
+        yaml.language = yaml.Language;
+    }
+
+    if (yaml['Last Game'] && !yaml.lastGame) {
+        yaml.lastGame = yaml['Last Game'];
+    }
+
+    if (yaml.Games && !yaml.games) {
+        yaml.games = yaml.Games;
+
+        yaml.games.forEach(function(game) {
+            if (game.url) {
+                game.repo = game.url;
+                game.branch = 'master';
+            }
+        });
+    }
+
+    return yaml;
+}
+
+function yamlToToml(evt) {
+    try {
+        const settings = upgradeOldYaml(jsyaml.safeLoad(evt.target.value));
+
+        const options = {
+            space: 2,
+            replace: function(key, value) {
+                if (typeof value === 'number') {
+                    /* Settings only use integers, no floats. */
+                    return Math.round(value).toString();
+                }
+
+                return false;
+            }
+        }
+        const toml = tomlify.toToml(settings, options);
+
+        document.getElementById('output').value = toml;
+
+        const download = document.getElementById('download');
+        download.href = 'data:,' + toml;
+        download.textContent = ' - Download';
+    } catch (e) {
+        console.error(e);
+        document.getElementById('output').value = e;
+        document.getElementById('download').textContent = '';
+    }
+}
+
+function handleFileSelect(evt) {
+    evt.stopPropagation();
+    evt.preventDefault();
+
+    var files = evt.dataTransfer.files; // FileList object.
+    var reader = new FileReader();
+    reader.onload = function(event) {
+        const input = document.getElementById('input');
+        input.value = event.target.result;
+        input.dispatchEvent(new Event('input'));
+    }
+    reader.readAsText(files[0], "UTF-8");
+}
+
+function handleDragOver(evt) {
+    evt.stopPropagation();
+    evt.preventDefault();
+    evt.dataTransfer.dropEffect = 'copy'; // Explicitly show this is a copy.
+}
+
+const input = document.getElementById('input');
+input.addEventListener('input', yamlToToml);
+input.addEventListener('dragover', handleDragOver, false);
+input.addEventListener('drop', handleFileSelect, false);