Implement sprite options in Player Settings

WebHostLib/static/assets/player-settings.js

@@ -1,6 +1,8 @@
+let spriteData = null;
+
 window.addEventListener('load', () => {
   const gameSettings = document.getElementById('game-settings');
-    Promise.all([fetchPlayerSettingsYaml(), fetchPlayerSettingsJson()]).then((results) => {
+  Promise.all([fetchPlayerSettingsYaml(), fetchPlayerSettingsJson(), fetchSpriteData()]).then((results) => {
     // Load YAML into object
     const sourceData = jsyaml.safeLoad(results[0], { json: true });
 
@@ -11,6 +13,9 @@ window.addEventListener('load', () => {
       localStorage.setItem(`playerSettings${i}`, JSON.stringify(updatedObj));
     }
 
+    // Parse spriteData into useful sets
+    spriteData = JSON.parse(results[2]);
+
     // Build the entire UI
     buildUI(JSON.parse(results[1]));
 
@@ -54,7 +59,21 @@ const fetchPlayerSettingsJson = () => new Promise((resolve, reject) => {
     }
     resolve(ajax.responseText);
   };
-    ajax.open('GET', `${window.location.origin}/static/static/playerSettings.json`);
+  ajax.open('GET', `${window.location.origin}/static/static/playerSettings.json`, true);
+  ajax.send();
+});
+
+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/static/spriteData.json`, true);
   ajax.send();
 });
 
@@ -146,7 +165,7 @@ const buildUI = (settings) => {
   const settingsWrapper = document.getElementById('settings-wrapper');
   const settingTypes = {
     gameOptions: 'Game Options',
-        romOptions: 'ROM Options'
+    romOptions: 'ROM Options',
   }
 
   Object.keys(settingTypes).forEach((settingTypeKey) => {
@@ -173,6 +192,46 @@ const buildUI = (settings) => {
       }
     });
   });
+
+  // Build sprite options
+  const spriteOptionsHeader = document.createElement('h1');
+  spriteOptionsHeader.innerText = 'Sprite Options';
+  settingsWrapper.appendChild(spriteOptionsHeader);
+
+  const spriteOptionsWrapper = document.createElement('div');
+  spriteOptionsWrapper.className = 'setting-wrapper';
+
+  const spriteOptionsTitle = document.createElement('span');
+  spriteOptionsTitle.className = 'title-span';
+  spriteOptionsTitle.innerText = 'Alternate Sprites';
+  spriteOptionsWrapper.appendChild(spriteOptionsTitle);
+
+  const spriteOptionsDescription = document.createElement('span');
+  spriteOptionsDescription.className = 'description-span';
+  spriteOptionsDescription.innerText = "Choose an alternate sprite to play the game with.";
+  spriteOptionsWrapper.appendChild(spriteOptionsDescription);
+
+  const spriteOptionsTable = document.createElement('table');
+  spriteOptionsTable.setAttribute('id', 'sprite-options-table');
+  spriteOptionsTable.className = 'option-set';
+  const tbody = document.createElement('tbody');
+  tbody.setAttribute('id', 'sprites-tbody');
+
+  const currentPreset = document.getElementById('preset-number').value;
+  const playerSettings = JSON.parse(localStorage.getItem(`playerSettings${currentPreset}`));
+
+  // Add a row for each sprite currently present in the player's settings
+  Object.keys(playerSettings.rom.sprite).forEach((spriteName) => {
+    addSpriteRow(tbody, playerSettings, spriteName)
+  });
+
+  spriteOptionsTable.appendChild(tbody);
+  spriteOptionsWrapper.appendChild(spriteOptionsTable);
+
+  settingsWrapper.appendChild(spriteOptionsWrapper);
+
+  // Append sprite picker
+  settingsWrapper.appendChild(buildSpritePicker());
 };
 
 const buildRangeSettings = (parentElement, settings) => {
@@ -247,4 +306,118 @@ const buildRangeSettings = (parentElement, settings) => {
   parentElement.appendChild(settingWrapper);
 };
 
-const buildSelectSettings = (parentElement, settings) => {};
+const addSpriteRow = (tbody, playerSettings, spriteName) => {
+  const rowId = (Math.random() * 1000000).toString();
+  const optionId = (Math.random() * 1000000).toString();
+  const tr = document.createElement('tr');
+  tr.setAttribute('id', rowId);
+
+  // Option Name
+  const optionName = document.createElement('td');
+  optionName.className = 'option-name';
+  const label = document.createElement('label');
+  label.htmlFor = optionId;
+  label.innerText = spriteName;
+  optionName.appendChild(label);
+
+  if(['random', 'randomonhit'].indexOf(spriteName) === -1) {
+    const deleteButton = document.createElement('span');
+    deleteButton.setAttribute('data-sprite', spriteName);
+    deleteButton.setAttribute('data-row-id', rowId);
+    deleteButton.innerText = ' (❌)';
+    deleteButton.className = 'delete-button';
+    optionName.appendChild(deleteButton);
+    deleteButton.addEventListener('click', removeSpriteOption);
+  }
+
+  tr.appendChild(optionName);
+
+  // Option Value
+  const optionValue = document.createElement('td');
+  optionValue.className = 'option-value';
+  const input = document.createElement('input');
+  input.className = 'setting';
+  input.setAttribute('id', optionId);
+  input.setAttribute('type', 'range');
+  input.setAttribute('min', '0');
+  input.setAttribute('max', '100');
+  input.setAttribute('data-setting', `rom.sprite.${spriteName}`);
+  input.value = "0";
+  optionValue.appendChild(input);
+
+  // Value display
+  const valueDisplay = document.createElement('span');
+  valueDisplay.setAttribute('id', `rom.sprite.${spriteName}`);
+  valueDisplay.innerText = playerSettings.rom.sprite.hasOwnProperty(spriteName) ?
+    playerSettings.rom.sprite[spriteName] : '0';
+  optionValue.appendChild(valueDisplay);
+
+  tr.appendChild(optionValue);
+  tbody.appendChild(tr);
+};
+
+const addSpriteOption = (event) => {
+  const presetNumber = document.getElementById('preset-number').value;
+  const playerSettings = JSON.parse(localStorage.getItem(`playerSettings${presetNumber}`));
+  const spriteName = event.target.getAttribute('data-sprite');
+  console.log(event.target);
+  console.log(spriteName);
+
+  if (Object.keys(playerSettings.rom.sprite).indexOf(spriteName) !== -1) {
+    // Do not add the same sprite twice
+    return;
+  }
+
+  // Add option to playerSettings object
+  playerSettings.rom.sprite[event.target.getAttribute('data-sprite')] = 50;
+  localStorage.setItem(`playerSettings${presetNumber}`, JSON.stringify(playerSettings));
+
+  // Add <tr> to #sprite-options-table
+  const tbody = document.getElementById('sprites-tbody');
+  addSpriteRow(tbody, playerSettings, spriteName);
+};
+
+const removeSpriteOption = (event) => {
+  const presetNumber = document.getElementById('preset-number').value;
+  const playerSettings = JSON.parse(localStorage.getItem(`playerSettings${presetNumber}`));
+  const spriteName = event.target.getAttribute('data-sprite');
+
+  // Remove option from playerSettings object
+  delete playerSettings.rom.sprite[spriteName];
+  localStorage.setItem(`playerSettings${presetNumber}`, JSON.stringify(playerSettings));
+
+  // Remove <tr> from #sprite-options-table
+  const tr = document.getElementById(event.target.getAttribute('data-row-id'));
+  tr.parentNode.removeChild(tr);
+};
+
+const buildSpritePicker = () => {
+  const spritePicker = document.createElement('div');
+  spritePicker.setAttribute('id', 'sprite-picker');
+
+  // Build description
+  const description = document.createElement('span');
+  description.innerText = 'To add a sprite to your playable list, click the one you want below.';
+  spritePicker.appendChild(description);
+
+  const sprites = document.createElement('div');
+  sprites.setAttribute('id', 'sprite-picker-sprites');
+  Object.keys(spriteData).forEach((spriteName) => {
+    const spriteImg = document.createElement('img');
+    spriteImg.setAttribute('src', `static/static/sprites/${spriteName}.gif`);
+    spriteImg.setAttribute('data-sprite', spriteName);
+    spriteImg.setAttribute('alt', spriteName);
+
+    // Wrap the image in a span to allow for tooltip presence
+    const imgWrapper = document.createElement('span');
+    imgWrapper.className = 'sprite-img-wrapper';
+    imgWrapper.setAttribute('data-tooltip', spriteName);
+    imgWrapper.appendChild(spriteImg);
+    imgWrapper.setAttribute('data-sprite', spriteName);
+    sprites.appendChild(imgWrapper);
+    imgWrapper.addEventListener('click', addSpriteOption);
+  });
+
+  spritePicker.appendChild(sprites);
+  return spritePicker;
+};

WebHostLib/static/static/playerSettings.yaml

@@ -221,7 +221,7 @@ rom:
   sprite: # Enter the name of your preferred sprite and weight it appropriately
     random: 0
     randomonhit: 0
-    link: 50 # To add other sprites: open the gui/Creator, go to adjust, select a sprite and write down the name the gui calls it
+    Link: 50 # To add other sprites: open the gui/Creator, go to adjust, select a sprite and write down the name the gui calls it
   disablemusic: # If "on", all in-game music will be disabled
     on: 50
     off: 0