Automatically generate and save player settings for every game

WebHostLib/static/assets/player-settings.js

@@ -1,5 +1,13 @@
+let gameName = null;
+
 window.addEventListener('load', () => {
-  Promise.all([fetchSettingData(), fetchSpriteData()]).then((results) => {
+  const urlMatches = window.location.href.match(/^.*\/(.*)\/player-settings/);
+  gameName = decodeURIComponent(urlMatches[1]);
+
+  // Update game name on page
+  document.getElementById('game-name').innerHTML = gameName;
+
+  Promise.all([fetchSettingData()]).then((results) => {
     // Page setup
     createDefaultSettings(results[0]);
     buildUI(results[0]);
@@ -11,22 +19,10 @@ window.addEventListener('load', () => {
     document.getElementById('generate-game').addEventListener('click', () => generateGame());
 
     // Name input field
-    const playerSettings = JSON.parse(localStorage.getItem('playerSettings'));
+    const playerSettings = JSON.parse(localStorage.getItem(gameName));
     const nameInput = document.getElementById('player-name');
-    nameInput.addEventListener('keyup', (event) => updateSetting(event));
+    nameInput.addEventListener('keyup', (event) => updateBaseSetting(event));
     nameInput.value = playerSettings.name;
-
-    // Sprite options
-    const spriteData = JSON.parse(results[1]);
-    const spriteSelect = document.getElementById('sprite');
-    spriteData.sprites.forEach((sprite) => {
-      if (sprite.name.trim().length === 0) { return; }
-      const option = document.createElement('option');
-      option.setAttribute('value', sprite.name.trim());
-      if (playerSettings.rom.sprite === sprite.name.trim()) { option.selected = true; }
-      option.innerText = sprite.name;
-      spriteSelect.appendChild(option);
-    });
   }).catch((error) => {
     console.error(error);
   })
@@ -43,27 +39,22 @@ const fetchSettingData = () => new Promise((resolve, reject) => {
     try{ resolve(JSON.parse(ajax.responseText)); }
     catch(error){ reject(error); }
   };
-  ajax.open('GET', `${window.location.origin}/static/static/playerSettings.json`, true);
+  ajax.open('GET', `${window.location.origin}/static/generated/${gameName}.json`, true);
   ajax.send();
 });
 
 const createDefaultSettings = (settingData) => {
-  if (!localStorage.getItem('playerSettings')) {
-    const newSettings = {};
-    for (let roSetting of Object.keys(settingData.readOnly)){
-      newSettings[roSetting] = settingData.readOnly[roSetting];
-    }
-    for (let generalOption of Object.keys(settingData.generalOptions)){
-      newSettings[generalOption] = settingData.generalOptions[generalOption];
+  if (!localStorage.getItem(gameName)) {
+    const newSettings = {
+      [gameName]: {},
+    };
+    for (let baseOption of Object.keys(settingData.baseOptions)){
+      newSettings[baseOption] = settingData.baseOptions[baseOption];
     }
     for (let gameOption of Object.keys(settingData.gameOptions)){
-      newSettings[gameOption] = settingData.gameOptions[gameOption].defaultValue;
+      newSettings[gameName][gameOption] = settingData.gameOptions[gameOption].defaultValue;
     }
-    newSettings.rom = {};
-    for (let romOption of Object.keys(settingData.romOptions)){
-      newSettings.rom[romOption] = settingData.romOptions[romOption].defaultValue;
-    }
-    localStorage.setItem('playerSettings', JSON.stringify(newSettings));
+    localStorage.setItem(gameName, JSON.stringify(newSettings));
   }
 };
 
@@ -77,20 +68,10 @@ const buildUI = (settingData) => {
   });
   document.getElementById('game-options-left').appendChild(buildOptionsTable(leftGameOpts));
   document.getElementById('game-options-right').appendChild(buildOptionsTable(rightGameOpts));
-
-  // ROM Options
-  const leftRomOpts = {};
-  const rightRomOpts = {};
-  Object.keys(settingData.romOptions).forEach((key, index) => {
-    if (index < Object.keys(settingData.romOptions).length / 2) { leftRomOpts[key] = settingData.romOptions[key]; }
-    else { rightRomOpts[key] = settingData.romOptions[key]; }
-  });
-  document.getElementById('rom-options-left').appendChild(buildOptionsTable(leftRomOpts, true));
-  document.getElementById('rom-options-right').appendChild(buildOptionsTable(rightRomOpts, true));
 };
 
 const buildOptionsTable = (settings, romOpts = false) => {
-  const currentSettings = JSON.parse(localStorage.getItem('playerSettings'));
+  const currentSettings = JSON.parse(localStorage.getItem(gameName));
   const table = document.createElement('table');
   const tbody = document.createElement('tbody');
 
@@ -122,7 +103,7 @@ const buildOptionsTable = (settings, romOpts = false) => {
       }
       select.appendChild(option);
     });
-    select.addEventListener('change', (event) => updateSetting(event));
+    select.addEventListener('change', (event) => updateGameSetting(event));
     tdr.appendChild(select);
     tr.appendChild(tdr);
     tbody.appendChild(tr);
@@ -132,20 +113,22 @@ const buildOptionsTable = (settings, romOpts = false) => {
   return table;
 };
 
-const updateSetting = (event) => {
-  const options = JSON.parse(localStorage.getItem('playerSettings'));
-  if (event.target.getAttribute('data-romOpt')) {
-    options.rom[event.target.getAttribute('data-key')] = isNaN(event.target.value) ?
+const updateBaseSetting = (event) => {
+  const options = JSON.parse(localStorage.getItem(gameName));
+  options[event.target.getAttribute('data-key')] = isNaN(event.target.value) ?
+    event.target.value : parseInt(event.target.value);
+  localStorage.setItem(gameName, JSON.stringify(options));
+};
+
+const updateGameSetting = (event) => {
+  const options = JSON.parse(localStorage.getItem(gameName));
+  options[gameName][event.target.getAttribute('data-key')] = isNaN(event.target.value) ?
       event.target.value : parseInt(event.target.value, 10);
-  } else {
-    options[event.target.getAttribute('data-key')] = isNaN(event.target.value) ?
-      event.target.value : parseInt(event.target.value, 10);
-  }
-  localStorage.setItem('playerSettings', JSON.stringify(options));
+  localStorage.setItem(gameName, JSON.stringify(options));
 };
 
 const exportSettings = () => {
-  const settings = JSON.parse(localStorage.getItem('playerSettings'));
+  const settings = JSON.parse(localStorage.getItem(gameName));
   if (!settings.name || settings.name.trim().length === 0) { settings.name = "noname"; }
   const yamlText = jsyaml.safeDump(settings, { noCompatMode: true }).replaceAll(/'(\d+)':/g, (x, y) => `${y}:`);
   download(`${document.getElementById('player-name').value}.yaml`, yamlText);
@@ -164,8 +147,8 @@ const download = (filename, text) => {
 
 const generateGame = (raceMode = false) => {
   axios.post('/api/generate', {
-    weights: { player: localStorage.getItem('playerSettings') },
-    presetData: { player: localStorage.getItem('playerSettings') },
+    weights: { player: localStorage.getItem(gameName) },
+    presetData: { player: localStorage.getItem(gameName) },
     playerCount: 1,
     race: raceMode ? '1' : '0',
   }).then((response) => {
@@ -181,17 +164,3 @@ const generateGame = (raceMode = false) => {
     console.error(error);
   });
 };
-
-const fetchSpriteData = () => new Promise((resolve, reject) => {
-  const ajax = new XMLHttpRequest();
-  ajax.onreadystatechange = () => {
-    if (ajax.readyState !== 4) { return; }
-    if (ajax.status !== 200) {
-      reject('Unable to fetch sprite data.');
-      return;
-    }
-    resolve(ajax.responseText);
-  };
-  ajax.open('GET', `${window.location.origin}/static/generated/spriteData.json`, true);
-  ajax.send();
-});