układ okien live

// ==UserScript==
// @name       układ okien live
// @version    1.3
// @include    *hegira.com.pl/*
// ==/UserScript==
"use strict;";
const cookieOBJ = JSON.parse(`{${document.cookie
  .split("; ")
  .filter((x) => x.includes("px"))
  .map(function (x) {
    let temp = x.split("=");
    temp[0] = `"${temp[0]}"`;
    temp[1] = `"${temp[1]}"`;
    return temp.join(":");
  })
  .join(",")}}
`);
$(
  "p:contains(Aktualizacja plików cookie nastąpi po ponownym przeładowaniu strony.)"
).after(
  "<h2>Ustaw układ okien ze skryptu</h2>" +
    "<p style ='color: red;'>Wartości w polach należy wpisywać w następującym formacie: liczbapx,liczbapx  przykład: 130px,28px  . 0000px oznacza brak ustawiań możliwych do odczytania.</p>" +
    "<p name ='srodekYX'> Główne okno</p>" +
    `<input type="text" class ="verifier" id="srodekYX" size="10" value="${
      cookieOBJ.srodeky || "0000px"
    },${cookieOBJ.srodekx || "0000px"}">` +
    "<p> Pozostałe okna ustawiasz względem lewego górnego rogu głównego okna.</p>" +
    "<p name = 'onlinesysYX'> Czat</p>" +
    `<input type="text" class ="verifier" id="onlinesysYX" size="10" value="${
      cookieOBJ.onlinesysy || "0000px"
    },${cookieOBJ.onlinesysx || "0000px"}">` +
    "<p name ='pole_komunikatuYX'>Komunikaty</p>" +
    `<input type="text" class ="verifier" id="pole_komunikatuYX" size="10" value="${
      cookieOBJ.pole_komunikatuy || "0000px"
    },${cookieOBJ.pole_komunikatux || "0000px"}">` +
    "<p name ='infosysYX'> Pasek produkcji</p>" +
    `<input type="text" class ="verifier" id="infosysYX" size="10" value="${
      cookieOBJ.infosysy || "0000px"
    },${cookieOBJ.infosysx || "0000px"}">` +
    "<p name = 'panel_flotYX'> Panel flot</p>" +
    `<input type="text" class ="verifier" id="panel_flotYX" size="10" value="${
      cookieOBJ.panel_floty || "0000px"
    },${cookieOBJ.panel_flotx || "0000px"}">` +
    "<p name ='porownanie_flotYX'> Panel porównania flot</p>" +
    `<input type ="text" class ="verifier" id ="porownanie_flotYX" size ="10" value ="${
      cookieOBJ.porownanie_floty || "0000px"
    },${cookieOBJ.porownanie_flotx || "0000px"}">` +
    "<p name ='panel_dywiYX'> Panel dywizji</p>" +
    `<input type="text" class ="verifier" id="panel_dywiYX" size="10" value="${
      cookieOBJ.panel_dywiy || "0000px"
    },${cookieOBJ.panel_dywix || "0000px"}">` +
    "<p name='srodekmapyYX'> Okno mapy kosmosu</p>" +
    `<input type="text" class ="verifier" id="srodekmapyYX" size="10" value="${
      cookieOBJ.srodekmapyy || "0000px"
    },${cookieOBJ.srodekmapyx || "0000px"}">` +
    "<p name ='zasobysysYX'> Surowce</p>" +
    `<input type="text" class ="verifier" id="zasobysysYX" size="10" value="${
      cookieOBJ.zasobysysy || "0000px"
    },${cookieOBJ.zasobysysx || "0000px"}">` +
    "<p name ='tutorialYX'> Samouczek/Doradca</p>" +
    `<input type="text" class ="verifier" id="tutorialYX" size="10" value="${
      cookieOBJ.tutorialy || "0000px"
    },${cookieOBJ.tutorialx || "0000px"}"><br/>` +
    '<button type="button" id = "aktCook">Aktualizuj</button><br/>' +
    "<p>Poniższe dwa przyciski służą do zapamiętywania w pamięci przeglądarki i wczytywania zapamiętanych ustawień z pamieci przeglądarki. W polach należy wpisywać cyfry 0-9</p>" +
    '<button type="button" id="zap" title="Zapamiętaj ustawienia na wybranej pozycji.">Zapamiętaj</button><input type="text" id="zapIn" size="1px" title="Wprowadź cyfrę 0-9"></input><br/>' +
    '<button type="button" id="wcz" title="Wczytaj ustawienia z wybranej pozycji.">Wczytaj</button><input type="text" id="wczIn" size="1px" title="Wprowadź cyfrę 0-9"></input><br/>' +
    "<p>Po naciśnięciu guzika eksportuj należy skopiować zawartość pola tekstowego i zapisać ją na przykład w notatniku.</p>" +
    '<button type="button" id="expUst">Eksportuj</button><input type="text" id="expUstIn"></input></br>' +
    "<p>Aby importować ustawienia, należy w polu tekstowym wkleić to co eksportowano wcześniej za pomocą guzika powyżej.</p>" +
    '<button type="button" id="impUst">Importuj</button><input type="text" id="impUstIn"></input>'
);
//eksport
$("button#expUst").click(function () {
  let exxport = [];
  $(".verifier").each(function () {
    exxport.push(`"${this.id}":"${this.value}"`);
  });
  $("#expUstIn")[0].value = `{${exxport.join(",")}}`;
});
//import
$("button#impUst").click(function () {
  const importOBJ = JSON.parse($("#impUstIn")[0].value);
  wczytywacz(importOBJ);
});
//zapisywanie ustawień
$("button#zap").click(function () {
  let errorFree = 0;
  $(".verifier").each(function () {
    errorFree += verifier(this.id);
  });
  let JSONarr = [];
  let slot = "";
  if (!errorFree) {
    $(".verifier").each(function () {
      JSONarr.push(`"${this.id}":"${this.value}"`);
    });
  } else {
    return;
  }
  if ($("#zapIn")[0].value.replace(/[0-9]/g, "1") <= 1) {
    slot = `memoryOkna${$("#zapIn")[0].value}`;
    localStorage[slot] = `{${JSONarr.join(",")}}`;
    alert("Zapisano pomyślnie");
  } else {
    alert("Wpisano nieprawidłową wartość.");
  }
});
//wczytywanie zapisanych ustawień
$("button#wcz").click(function () {
  if (
    $("#zapIn")[0].value.replace(/[0-9]/g, "1") <= 1 &&
    localStorage[`memoryOkna${$("#wczIn")[0].value}`]
  ) {
    const oknaUstObj = JSON.parse(
      localStorage[`memoryOkna${$("#wczIn")[0].value}`]
    );
    wczytywacz(oknaUstObj);
    alert("Wczytano pomyślnie. Teraz należy nacisnąć przycisk 'Aktualizuj'");
  } else {
    alert("Wpisano nieprawidłową wartość lub wybrany zestaw nie istnieje.");
  }
});

$("button#aktCook").click(function () {
  let errorFree = 0;
  $(".verifier").each(function () {
    errorFree += verifier(this.id);
  });
  if (!errorFree) {
    //do zrobienia cookie i ustawianie na żywo
    $(".verifier").each(function () {
      const cookieStringY = `${this.id.replace("YX", "y")}=${
        this.value.split(",")[0]
      }`;
      const cookieStringX = `${this.id.replace("YX", "x")}=${
        this.value.split(",")[1]
      }`;
      console.log(`${cookieStringY}|${cookieStringX}`);
      document.cookie = cookieStringY;
      document.cookie = cookieStringX;
      ustawiaczLive(this.id);
    });
  } else {
    console.log(`Wykryto ${errorFree} błędów.`);
  }
});
//funkcja sprawdzajaca czy podano prawidłowe dane
const verifier = function (id) {
  let checker = 0;
  $(`#${id}`).each(function () {
    for (let i = 0; i < 2; i++) {
      if (this.value.split(",")[i]?.replace(/[0-9-]/g, "") !== "px") {
        alert(
          "W polu " +
            $(`p[name="${this.id}"]`)[0].innerText +
            " podano błędne dane."
        );
        checker += 1;
      }
    }
  });
  return checker;
};
const ustawiaczLive = function (id) {
  const elId = id.replace("YX", "");
  if ($(`#${elId}`).length) {
    console.log(elId);
    $(`#${elId}`)[0].style.left = $(`#${id}`)[0].value.split(",")[0];
    $(`#${elId}`)[0].style.top = $(`#${id}`)[0].value.split(",")[1];
  }
};
const wczytywacz = function (obj) {
  for (const [key, value] of Object.entries(obj)) {
    $(`#${key}`)[0].value = value;
  }
};