Working on player-settings update

WebHostLib/static/assets/playerSettings.js

@@ -0,0 +1,104 @@
+window.addEventListener('load', () => {
+  fetchSettingData().then((settingData) => {
+    createDefaultSettings(settingData);
+    buildUI(settingData);
+    populateSettings();
+  });
+});
+
+const fetchSettingData = () => new Promise((resolve, reject) => {
+  const ajax = new XMLHttpRequest();
+  ajax.onreadystatechange = () => {
+    if (ajax.readyState !== 4) { return; }
+    if (ajax.status !== 200) {
+      reject(ajax.responseText);
+      return;
+    }
+    try{ resolve(JSON.parse(ajax.responseText)); }
+    catch(error){ reject(error); }
+  };
+  ajax.open('GET', `${window.location.origin}/static/static/playerSettings.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 gameOption of Object.keys(settingData.gameOptions)){
+      newSettings[gameOption] = settingData.gameOptions[gameOption].defaultValue;
+    }
+    for (let romOption of Object.keys(settingData.romOptions)){
+      newSettings[romOption] = settingData.romOptions[romOption].defaultValue;
+    }
+    localStorage.setItem('playerSettings', JSON.stringify(newSettings));
+  }
+};
+
+const buildUI = (settingData) => {
+  // Game Options
+  const leftGameOpts = {};
+  const rightGameOpts = {};
+  Object.keys(settingData.gameOptions).forEach((key, index) => {
+    if (index % 2 === 0) { leftGameOpts[key] = settingData.gameOptions[key]; }
+    else { rightGameOpts[key] = settingData.gameOptions[key]; }
+  });
+  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 % 2 === 0) { leftRomOpts[key] = settingData.romOptions[key]; }
+    else { rightRomOpts[key] = settingData.romOptions[key]; }
+  });
+  document.getElementById('rom-options-left').appendChild(buildOptionsTable(leftRomOpts));
+  document.getElementById('rom-options-right').appendChild(buildOptionsTable(rightRomOpts));
+};
+
+const buildOptionsTable = (settings) => {
+  const table = document.createElement('table');
+  const tbody = document.createElement('tbody');
+
+  Object.keys(settings).forEach((setting) => {
+    const tr = document.createElement('tr');
+
+    // td Left
+    const tdl = document.createElement('td');
+    const label = document.createElement('label');
+    label.setAttribute('for', setting);
+    label.setAttribute('data-tooltip', settings[setting].description);
+    label.innerText = `${settings[setting].friendlyName}:`;
+    tdl.appendChild(label);
+    tr.appendChild(tdl);
+
+    // td Right
+    const tdr = document.createElement('td');
+    const select = document.createElement('select');
+    settings[setting].options.forEach((opt) => {
+      const option = document.createElement('option');
+      option.setAttribute('value', opt.value);
+      option.innerText = opt.name;
+      select.appendChild(option);
+    });
+    tdr.appendChild(select);
+    tr.appendChild(tdr);
+    tbody.appendChild(tr);
+  });
+
+  table.appendChild(tbody);
+  return table;
+};
+
+const populateSettings = () => {
+  // TODO
+};
+
+const updateSetting = (key, setting) => {
+  const options = JSON.parse(localStorage.getItem('playerSettings'));
+  options[key] = setting;
+  localStorage.setItem('playerSettings', JSON.stringify(options));
+};