QWRQPyz

index.pug

div#wrapper(style='display: flex; flex-direction: column; width: 100%; height: 100%;')
  div(style='flex: 1; flex-grow: 0; text-align: center;')
    div(style=' padding: 10px;')
      div(style='font-size: 24px;') Mods Json Generator
      .headerDescription(style='width: 50%; margin: auto;')
        | Make pull requests for 
        a(href='https://github.com/ComputerElite/ComputerElite.github.io/blob/main/tools/Beat_Saber/mods.json' target='_blank') this file
    div(style='display: flex;justify-content: space-evenly;flex-wrap: wrap;')
      div(style='display: flex; flex-direction: column; min-width: 500px; margin-top: 50px;')
        label
          | Mod Name
          input#name(type='text')
        label
          | Mod Description
          textarea#description(style='resize: none;' rows='10')
        label
          | Mod ID
          input#id(type='text')
        input#qmodButton(type='button' value='Load QMOD')
      div(style='display: flex; flex-direction: column; min-width: 500px; margin-top: 50px;')
        label
          | Cover link
          input#cover(placeholder='a link to a cover .jpg' type='text')
        label
          | Download link
          input#link(placeholder='paste a dl link or drag it here from github' type='text')
        label
          | Source code
          input#source(type='text')
        label
          | Mod Creator/-s
          input#creators(type='text')
        label
          | Mod Version
          input#version(type='text')
        label
          | Made for Game Version
          input#games(type='text')
        label
          | Modloader
          input#modloader(type='text')
        label
          input#redirect(type='checkbox')
          |                         Redirect to Website
        input#generate(type='button' value='Create JSON')

qwrqpyz.markdown

QWRQPyz

A Pen by Daniel on CodePen.

License.

script.typescript

(async () => {
  const ghRegex = /^https:\/\/(?:www\.)?github\.com\/([^\/]+)\/([^\/]+)/;
  const link = document.getElementById("link");
  const games = document.getElementById("games");
  const version = document.getElementById("version");
  const creators = document.getElementById("creators");
  const id = document.getElementById("id");
  const description = document.getElementById("description");
  const name = document.getElementById("name");
  const source = document.getElementById("source");
  const modloader = document.getElementById("modloader");
  const cover = document.getElementById("cover");
  const qmodDropZone = document.body;
  const generateButton = document.getElementById("generate");
  const qmodButton = document.getElementById("qmodButton");
  var json = {};

  function onQmodLoad(ev) {
    let reader = this;
    var zip = new JSZip();
    zip.loadAsync(reader.result).then((zip) => {
      zip
        .file("mod.json")
        .async("string")
        .then((res) => {
          var m = JSON.parse(res);

          name.value = m.name;
          description.value = m.description;
          creators.value = (!m.porter ? "" : m.porter + ",") + m.author;
          version.value = m.version;
          games.value = m.packageVersion;
          id.value = m.id;
          modloader.value = m.modloader ?? "QuestLoader";
          console.log(m);
        });
    });
  }

  qmodDropZone.addEventListener("drop", function (event) {
    event.preventDefault();
    event.stopPropagation();
    if (event.dataTransfer.items) {
      // Use DataTransferItemList interface to access the file(s)
      [...event.dataTransfer.items].forEach((item, i) => {
        // If dropped items aren't files, reject them
        if (item.kind === "file") {
          const file = item.getAsFile();
          console.log(`… file[${i}].name = ${file.name}`);

          var reader = new FileReader();
          var fileName = file.name;
          reader.onloadend = onQmodLoad;
          reader.readAsArrayBuffer(file);
        }
      });
    } else {
      // Use DataTransfer interface to access the file(s)
      [...event.dataTransfer.files].forEach((file, i) => {
        console.log(`… file[${i}].name = ${file.name}`);
        var reader = new FileReader();
        var fileName = file.name;
        reader.onloadend = onQmodLoad;
        reader.readAsArrayBuffer(file);
      });
    }
  });

  qmodDropZone.addEventListener(
    "dragover",
    function (e) {
      e = e || event;
      e.preventDefault();
    },
    false
  );

  qmodDropZone.addEventListener(
    "drop",
    function (e) {
      e = e || event;
      e.preventDefault();
    },
    false
  );

  link.onchange = () => {
    var githubLink = "";
    if (link.value.includes("github.com")) {
      githubLink = link.value.substring(0, link.value.indexOf("releases"));
    }
    if (githubLink) source.value = githubLink;
  };
  
  function urlDrop(e) {
    /**
     * @type HTMLInputElement
     **/
    let input = e.currentTarget;
    e.preventDefault();
    e.stopPropagation();
    let url = e.dataTransfer.getData("URL");
    input.value = url;
    input.onchange();
  }

  cover.addEventListener("drop", urlDrop);
  link.addEventListener("drop", urlDrop);

  generate.addEventListener("click", function GenerateJSON(e) {
    console.log("generating");
    if (!json[games.value]) json[games.value] = [];
    var mod = {
      name: name.value,
      description: description.value,
      id: id.value,
      version: version.value,
      download: link.value,
      source: source.value,
      author: creators.value,
      cover: cover.value,
      modloader: modloader.value
    };
    
    window.open(`https://github.com/DanTheMan827/bsqmods/new/main?filename=${escape(`mods/${games.value}/${id.value}-${version.value}.json`)}&value=${escape(JSON.stringify(mod, null, "\t"))}`);
  });

  qmodButton.addEventListener("click", function LoadQMOD() {
    var input = document.createElement("input");
    input.setAttribute("type", "file");

    input.onchange = function (e) {
      if (!this.files[0]) {
        return;
      }

      var reader = new FileReader();
      var fileName = this.files[0].name;
      reader.onloadend = onQmodLoad;
      reader.readAsArrayBuffer(this.files[0]);
    };

    input.click();
  });
  
})();

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>

style.scss

body {
    color: #EEEEEE;
}

html {
    height: auto;
    min-height: 100%;
    background-image: url('https://upload.wikimedia.org/wikipedia/commons/f/fd/LGBTQ%2B_rainbow_flag_Quasar_%22Progress%22_variant.svg');
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-blend-mode: darken;
    background-size: cover;
    background-color: #111111DD;
}

body, table, input {
    font-size: 14px;
    font-family: 'Open Sans';
}

.grid {
    display: grid;
    grid-template-columns: 33% 33% 33%; 
    column-gap: 10px; 
    row-gap: 10px;
}

@media screen and (min-width: 50em) {
    .grid {
        grid-template-columns: 33% 33% 33%;
    }
}
@media screen and (max-width: 50em) {
    .grid {
        grid-template-columns: 100%;
    }
}

.marginlow {
    margin-left: 10px;
}

.customButton {
    border: #111111 2px solid;
    background-color: #333333;
    text-align: center;
    padding: 5px;
    width: fit-content;
    cursor: pointer; 
}

hr {
    border-color: #2c2c2c;
}

.pointer {
    cursor: pointer;
}

.hrColorTr {
    border-bottom: 1px solid #2c2c2c;
}

table {
    border-collapse: collapse;
}

.tooltip {
    font-size: 16px;
    background-color: #444;
    border-radius: 5px;
    padding: 5px;
    position: absolute;
    opacity: 0.9;
    display: none;
}
.contextMenu {
    font-size: 16px;
    display: none;
    background-color: #444;
    border-radius: 5px;
    padding: 5px;
    position: absolute;
    opacity: 0.9;
}

.contextMenuItem {
    position: relative;
    background-color: #444;
    margin-top: 2px;
    padding: 5px;
}

.contextMenuItem:hover {
    background-color: #666;
}

.defTextColor {
    color: #EEEEEE;
}

.loader {
    border: 8px solid #f3f3f3; /* Light grey */
    border-top: 8px solid #3498db; /* Blue */
    border-radius: 50%;
    animation: spin 2s linear infinite;
  }
  
  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }

a {
    text-decoration: none;
    color: #30A2EC;
}

a:visited
{
    color: #30A2EC;
}

input[type='file']
{
    background-color: #00000023;
    padding-right: 5px;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 5px;  
    width: 100%;
}

input[type='checkbox'] {
    padding: 5px;
    border: none;
    color: #EEEEEE;
    background-color: #202225;
}

textarea {
    padding: 5px;
    width: 100%;
    border: none;
    color: #EEEEEE;
    background-color: #202225;
}

input[type='text']
{
    padding: 5px;
    width: 100%;
    border: none;
    color: #EEEEEE;
    background-color: #202225;
}

.red {
    color: #FF2222;
}

.green {
    color: #00BB00;
}

code {
    padding: 5px;
    border-radius: 3px;
    background-color: #202225;
    border: 1px solid black;
}

.headerDescription {
    font-size: 11px;
    color: #888;
    margin-bottom: 10px;
    padding-left: 20px;
}

.tip {
    background-color: #36632898;
    padding: 10px;
    font-size: 14px;
    border-left: 5px solid #5fc456;
    margin-left: 10px;
    color: #73c46c;
    width: fit-content;
}

.tipHeader {
    font-size: 16px;
    color: #5fc456;
    margin-bottom: 10px;
    text-align: left;
}

.guideHeader {
    font-size: 16px;
    margin-top: 10px;
}

.guideSteps {
    font-size: 14px;
    margin-top: 5px;
    padding-left: 10px;
    line-height: 1.5;
}

.topicContainer {
    padding-left: 10px;
}

.info {
    background-color: #a1870498;
    padding: 10px;
    font-size: 14px;
    border-left: 5px solid #c7c700;
    margin-left: 10px;
    color: #f8ffb4;
    text-align: left;
    width: min-content;
    width: fit-content;
}

.infoHeader {
    font-size: 16px;
    color: #ffff00;
    margin-bottom: 10px;
    text-align: left;
}

.warning {
    background-color: #49121298;
    padding: 10px;
    font-size: 14px;
    border-left: 5px solid #c70000;
    margin-left: 10px;
    color: #ffb4b4;
    text-align: left;
    width: fit-content;
}

.warningHeader {
    font-size: 16px;
    color: #c70000;
    margin-bottom: 10px;
    text-align: left;
}

.attention {
    background-color: #49411298;
    padding: 10px;
    font-size: 16px;
    border-left: 5px solid #fbff00;
    margin-left: 10px;
    color: #ffd900;
    text-align: left;
    width: fit-content;
}

.attentionHeader {
    font-size: 18px;
    color: #fbff00;
    margin-bottom: 10px;
    text-align: left;
}

.zoom:hover {
    transform: scale(1.1);
}

.zoom {
    transition: transform .6s;
}

.darken:hover {
    filter: brightness(80%);
}

.darken {
    transition: filter .6s;
}

.step {
    padding: 10px;
    font-size: 16px;
    text-align: left;
    padding-left: 25px;
    line-height: 1.5;
}

.header {
    text-align: left;
    font-size: 20px;
    margin-left: 10px;
    text-decoration: underline;
    margin-top: 40px;
}

.image {
    padding: 10px;
}

table .small
{
    padding-right: 5px;
    padding-left: 5px;
    width: auto;
    text-align: right;
    white-space: nowrap
}