Adds bottons to import and export individual fleet to the fleet menu for Istrolid.

fleetshare.js

/*
 * Adds bottons to import and export individual fleet to the fleet menu
 * by R26
 */
window.r26_fleetshare = window.r26_fleetshare || {
   fleetUI: window.fleetUI,
};

r26_fleetshare.showShareBox = false;
r26_fleetshare.fleetNum = -1;

r26_fleetshare.exportFleet = (row, tab) => {
   const ships = [];
   for(let i = 0; i < 10; i++) {
      const spec = commander.fleet[getFleetKey(row, i, tab)] || '{}';
      ships[i] = 'ship' + btoa(spec);
   }
   return JSON.stringify({
      name: commander.fleet.ais[getAIKey(row, tab)],
      ships,
   });
}

r26_fleetshare.importFleet = fleet => {
   fleet = JSON.parse(fleet);
   const { row, tab } = commander.fleet.selection;
   insertFleet({ row, tab }, { row, tab }, true);

   for(let i = 0; i < 10; i++) {
      const shipey = fleet.ships[i];
      commander.fleet[getFleetKey(row, i, tab)] = shipey.startsWith('ship') ? atob(shipey.slice(4)) : '';
   }
   commander.fleet.ais[getAIKey(row, tab)] = '' + fleet.name;

   control.savePlayer();
};

window.fleetUI = function() {
   onecup.after(() => {
      for(const [i, elem] of Object.entries(onecup.lookup('input[placeholder="●"]'))) {
         if(elem.nextSibling && elem.nextSibling.classList.contains('r26_fleetshare')) continue;
         const exportBtn = document.createElement('img');
         exportBtn.src = 'img/ui/share.png';
         exportBtn.width = 30;
         exportBtn.classList.add('hover-fade', 'r26_fleetshare');
         exportBtn.style.position = 'absolute';
         exportBtn.style.top = '25px';
         exportBtn.style.right = '-65px';
         exportBtn.onclick = () => {
            r26_fleetshare.showShareBox = true;
            r26_fleetshare.fleetNum = i;
         };
         elem.after(exportBtn);
      }

      const trash = onecup.lookup('#trash');
      if(trash && !(trash.previousSibling && trash.previousSibling.classList.contains('r26_fleetshare'))) {
         const importBtn = document.createElement('div');
         const importImg = document.createElement('img');
         importBtn.style.display = 'inline-block';
         importBtn.style.width = '64px';
         importBtn.style.height = '64px';
         importBtn.style.padding = '7px';
         importBtn.classList.add('hover-black', 'r26_fleetshare');
         importImg.src = 'img/ui/share@2x.png';
         importImg.width = 50;
         importImg.style.transform = 'scale(1, -1)';
         importBtn.appendChild(importImg);
         importBtn.onclick = () => {
            r26_fleetshare.showShareBox = true;
            r26_fleetshare.fleetNum = -1;
         };
         trash.before(importBtn);
      }
   });

   onecup.div(() => {
      eval(onecup.import());
      position('fixed');
      top('20%');
      bottom('10%');
      width('100%');
      z_index('10');
      color("white");
      text_align('center');

      if(!r26_fleetshare.showShareBox) {
         display('none');
      }

      div(() => {
         width('80%');
         min_width(200);
         max_width(500);
         background_color("rgba(0,0,0,.8)");
         padding('20px 20px 0');
         margin('0 auto');

         textarea('#r26_fleetshareCopy', { readonly: r26_fleetshare.fleetNum >= 0 && true || null}, () => {
            color('white');
            resize('none');
            background_color('black');
            width('100%');
            height('60vh');

            if(r26_fleetshare.fleetNum >= 0) {
               text(r26_fleetshare.exportFleet(r26_fleetshare.fleetNum, fleetMode.currentTab));
            }

            oninput(e => {
               e.target.placeholder = '';
            });
         });

         div(() => {
            width('100%');
            div('.hover-black', () => {
               width('50%');
               padding(5);
               display('inline-block');
               text('Close');
               onclick(() => {
                  r26_fleetshare.showShareBox = false;
               });
            });

            div('.hover-black', () => {
               width('50%');
               padding(5);
               display('inline-block');
               text(r26_fleetshare.fleetNum < 0 ? 'Import' : 'Copy');
               onclick(() => {
                  const textarea = onecup.lookup('#r26_fleetshareCopy');
                  if(!textarea) return;

                  if(r26_fleetshare.fleetNum < 0) {
                     try {
                        r26_fleetshare.importFleet(textarea.value);
                        textarea.value = '';
                        textarea.placeholder = `Imported to row ${commander.fleet.selection.row} on tab ${commander.fleet.selection.tab}`;
                     } catch(e) {
                        textarea.placeholder = e.name + ': ' + e.message;
                     }
                  } else {
                     textarea.focus();
                     textarea.select();
                     document.execCommand('copy');
                  }
               });
            });
         });
      });
   });

   return r26_fleetshare.fleetUI.apply(this, arguments);
};