userscripts/infinite-craft-plus.user.js

// ==UserScript==
// @name        Infinite Craft Plus
// @namespace   danielrayjones
// @match       https://neal.fun/infinite-craft/
// @grant       none
// @version     0.0.1
// @author      Dan Jones
// @description 2024-01-06T14:13:00-0500
// ==/UserScript==

/* global window, localStorage, FileReader */

(function () {
  const key = "infinite-craft-data";

  function getData() {
    return localStorage.getItem(key);
  }

  function downloadData() {
    const data = getData();

    const dl = document.createElement('a');
    dl.href = 'data:application/json,' + data;
    dl.download = 'infinite-craft.json';

    dl.click();
  }

  function getParsedData() {
    return JSON.parse(getData());
  }

  function getElements() {
    return getParsedData().elements;
  }

  function overwriteElements(newElements) {
      const data = getParsedData();
      const old = data.elements;
      data.elements = newElements;

      localStorage.setItem(key, JSON.stringify(data));

      return old;
  }

  function addElements(newElements) {
      const els = getElements();

      for (let i = 0; i < newElements.length; i++) {
          const newEl = newElements[i];
          const found = els.find(el => el.text === newEl.text);
          if (found) {
              continue;
          }

          console.log('Adding', newEl);

          els.push(newEl);
      }

      return overwriteElements(els);
  }

  function uploadElements(evt) {
    evt.preventDefault();
    const files = evt.target.uploads.files;

    for (let i = 0; i < files.length; i++) {
      const file = files[i];
      const read = new FileReader();
      read.addEventListener('load', function () {
        const body = read.result;
        const els = JSON.parse(body)?.elements;
        addElements(els);
      });
      read.readAsText(file);
    }

    const sub = evt.target.lastChild;
    sub.disabled = true;
    sub.setAttribute('value', '✅');
  }

  function getUploadButton() {
    const f = document.createElement('form');
    f.style.display = 'inline';

    const ups = document.createElement('input');
    ups.setAttribute('type', 'file');
    ups.setAttribute('name', 'uploads');
    ups.setAttribute('accept', '.json');
    ups.setAttribute('required', true);
    f.appendChild(ups);

    f.addEventListener('submit', uploadElements);

    const sub = document.createElement('input');
    sub.setAttribute('type', 'submit');
    sub.setAttribute('value', 'Upload');
    f.appendChild(sub);

    return f;
  }

  function getDownloadButton() {
    const butt = document.createElement('button');
    butt.innerText = '⤵️';
    butt.addEventListener('click', downloadData);

    return butt;
  }

  function addButtons() {
    const target = document.querySelector('.site-title')?.parentElement;
    if (!target) {
      console.log("Can't find .site-title");
      return null;
    }

    const span = document.createElement('span');
    const down = getDownloadButton();
    const up = getUploadButton();
    span.appendChild(down);
    span.appendChild(up);

    const next = target.nextElementSibling;
    console.log('inserting', span, 'before', next);
    target.style.display = 'none';

    return target.parentElement.insertBefore(span, next);
  }

  window.Game = window.Game || {};

  window.Game.getData = getElements;
  window.Game.download = downloadData;

  window.addEventListener('load', () => console.log(addButtons()));

})();