☰

Create box function

Really useful for making boxes 👍

  1. // ==UserScript==
  2. // @name         Create box function
  3. // @namespace    create_box_owot
  4. // @version      1.3.2
  5. // @description  Really useful for making boxes 👍
  6. // @author       e_g.
  7. // @match        https://ourworldoftext.com/*
  8. // @icon         https://www.google.com/s2/favicons?sz=64&domain=ourworldoftext.com
  9. // @grant        none
  10. // ==/UserScript==
  11.  
  12. setupModals = function(){
  13.     //Box creator modal
  14.     function makeBoxCreatorModal() {
  15.         var modal = new Modal();
  16.         modal.createForm();
  17.         modal.createCheckboxField();
  18.         modal.setFormTitle("Let's create a box!\n");
  19.         for(var inputs of ["x", "y", "width", "height", "borderSize"]){
  20.             window[inputs] = modal.addEntry(inputs, "text", "number").input;
  21.         };
  22.         for(var inputs of ["mainColor", "borderColor", "textColor", "textBgColor"]){
  23.             window[inputs] = modal.addEntry(inputs, "color").input;
  24.         };
  25.         for(var inputs of ["title", "description", "footer"]){
  26.             window[inputs] = modal.addEntry(inputs, "text", "string").input;
  27.         };
  28.         for(var inputs of ["titleAlign", "descAlign", "footerAlign"]){ //thanks poopman
  29.             window[inputs+"Options"] = [
  30.                 { label: "Left", value: "left"},
  31.                 { label: "Center", value: "center", default: (inputs == "footerAlign" ? false : true) },
  32.                 { label: "Right", value: "right", default: (inputs == "footerAlign" ? true : false)},
  33.             ];
  34.             window[inputs] = (inputs == "footerAlign" ? "right" : "center");
  35.             createRadioButtons(modal, inputs, window[inputs+"Options"]);
  36.         }; //poopman's part stops here
  37.         modal.setMaximumSize(500, 600);
  38.         for(var inputs of ["footer2space", "borderCollision"]){
  39.             window[inputs] = modal.addCheckbox(inputs)
  40.             window[inputs].cbElm.title = {
  41.                 footer2space: "2 horizontal spaces instead of 1. Doesn't apply when using centered footer.",
  42.                 borderCollision: "Makes the text stick to the border instead of having a spacement."
  43.             }[inputs];
  44.         };
  45.         modal.onSubmit(function(){
  46.             createBox({
  47.                 x: +x.value,
  48.                 y: +y.value,
  49.                 width: +width.value,
  50.                 height: +height.value,
  51.                 borderSize: +borderSize.value,
  52.                 mainColor: parseInt(mainColor.value, 16),
  53.                 borderColor: parseInt(borderColor.value, 16),
  54.                 textColor: parseInt(textColor.value, 16),
  55.                 textBgColor: parseInt(textBgColor.value, 16),
  56.                 title: title.value,
  57.                 description: description.value,
  58.                 footer: footer.value,
  59.                 titleAlign: document.querySelector('input[name="titleAlign"]:checked').value, //thanks poopman
  60.                 descAlign: document.querySelector('input[name="descAlign"]:checked').value,
  61.                 footerAlign: document.querySelector('input[name="footerAlign"]:checked').value, //poopman's part stops here
  62.                 footer2space: footer2space.cbElm.checked,
  63.                 borderCollision: borderCollision.cbElm.checked
  64.             });
  65.         });
  66.         modal.client.firstChild.append(...modal.client.children[1].children);
  67.         modal.client.firstChild.insertBefore(modal.client.firstChild.children[2], modal.client.firstChild.lastChild.nextSibling);
  68.         w.ui.boxCreatorModal = modal;
  69.     };
  70.     makeBoxCreatorModal();
  71.     function createRadioButtons(modal, name, options) { //thanks poopman
  72.         const radioDiv = document.createElement("div");
  73.         radioDiv.style.display = "flex";
  74.         const radioText = document.createElement("label");
  75.         radioText.innerHTML = name + ":";
  76.         radioDiv.appendChild(radioText);
  77.         for (const option of options) {
  78.             const label = document.createElement("label");
  79.             label.style.marginRight = "10px";
  80.             const input = document.createElement("input");
  81.             input.type = "radio";
  82.             input.name = name;
  83.             input.value = option.value;
  84.             if (option.default) {
  85.                 input.checked = true;
  86.             }
  87.             label.appendChild(input);
  88.             label.appendChild(document.createTextNode(option.label));
  89.             radioDiv.appendChild(label);
  90.         }
  91.         modal.formField.appendChild(radioDiv);
  92.     } //poopman's part stops here
  93.     //Create menu option
  94.     menu.addOption("Create box", function(){
  95.         var region = RegionSelection();
  96.         region.init();
  97.         region.startSelection();
  98.         region.onselection(function(xy, _, width, height){
  99.             var options = w.ui.boxCreatorModal.client.firstChild.children[1];
  100.             options.children[1].value = xy[0] * 16 + xy[2];
  101.             options.children[3].value = xy[1] * 8 + xy[3];
  102.             options.children[5].value = width;
  103.             options.children[7].value = height;
  104.             w.ui.boxCreatorModal.open();
  105.         });
  106.     });
  107. }
  108. setupModals();
  109.  
  110. createBox = function(box){
  111.     // Errors and warnings
  112.     if(box.title.length > box.width - box.borderSize * 4 - !box.borderCollision * 2) return console.error("Title too big" + (box.title.length <= box.width - box.borderSize * 4 ? ", activate borderCollision so you can use that title." : "."));
  113.     if(box.footer && box.footer.length > box.width - box.borderSize * 4 - !box.borderCollision * 2 + box.footer2space) return console.error("Footer too big, try deactivating footer2space and/or activating borderCollision so you can use that footer.");
  114.     box.size = box.width * box.height + ((box.width - box.borderSize * 4) * (box.height - box.borderSize * 2)) * !!box.borderSize + box.title.length + box.description.length + (box.footer ? box.footer.length : 0);
  115.     if(state.worldModel.char_rate.reduce((x, y) => x * 1e3 / y) * 24 < box.size) return console.error("Your rate limit is too low to draw the box (would take longer than 24 seconds).");
  116.     if(state.worldModel.char_rate.reduce((x, y) => x * 1e3 / y) * 2 < box.size) console.warn("The box might be messed up because your rate limit is too low for the box's size.");
  117.     for(var options of ["x", "y", "width", "height", "borderSize"]){
  118.         box[options] = Math.floor(box[options]);
  119.     };
  120.     if(box.borderSize * 4 >= box.width / 2) console.warn("Consider reducing border's size to add space for the main content!");
  121.     if(box.footer2space && box.borderCollision) console.warn("Both footer2space and borderCollision are activated, this may cause conflict for the box.");
  122.     // Avoid glitching when a word is too big for the box
  123.     if(!box.description.endsWith(" ") && box.description.split(" ").at(-1).length > box.width - box.borderSize * 4 - 2) box.description += " ";
  124.     // Rest of description's separating setup + see if it's too big for the box
  125.     if(box.description.length > box.width - box.borderSize * 4 - !box.borderCollision * 2 && box.description.split(" ").length > 1){
  126.         box.formattedDesc = [...box.description.match(RegExp(`.{0,${box.width - box.borderSize * 4 - !box.borderCollision * 2}} |.{${box.width - box.borderSize * 4 - !box.borderCollision * 2}}`, "g")), box.description.split(" ").at(-1)];
  127.         if(box.formattedDesc.slice(-2).join("").length <= box.width - box.borderSize * 4 - !box.borderCollision * 2) box.formattedDesc = [...box.formattedDesc.slice(0, box.formattedDesc.length - 2), box.formattedDesc.slice(-2).join("")];
  128.         box.formattedDesc = box.formattedDesc.map(x => x.replace(/ +$/, ""));
  129.     }
  130.     else box.formattedDesc = box.description.match(RegExp(`.{0,${box.width - box.borderSize * 4 - !box.borderCollision * 2}}`, "g"));
  131.     box.formattedDesc = box.formattedDesc.filter(x => x != "");
  132.     if(box.formattedDesc.length == 1 && box.formattedDesc[0] == "") box.formattedDesc = [];
  133.     if(box.formattedDesc.length > box.height - box.borderSize * 2 - 2 - !box.borderCollision * 2 - !!box.footer * 2) return console.error("Description too long for the size of this box. Try activating borderCollision, or if that doesn't work, set a bigger size for the box or shorten the description.");
  134.     //Make the box and box's border (reversed order)
  135.     if(box.borderSize) filltoxy(box.x, box.y, box.width, box.height, "█", box.borderColor);
  136.     filltoxy(box.x + box.borderSize * 2, box.y + box.borderSize, box.width - box.borderSize * 4, box.height - box.borderSize * 2, "█", box.mainColor);
  137.     //Alignment formula of title and draw it
  138.     if(!box.titleAlign) box.titleAlign = "center";
  139.     if(box.titleAlign == "center"){
  140.         box.titleFormula = Math.ceil(box.x + box.width / 2 - box.title.length / 2);
  141.     }
  142.     else if(box.titleAlign == "left"){
  143.         box.titleFormula = Math.ceil(box.x + box.borderSize * 2 + !box.borderCollision);
  144.     }
  145.     else if(box.titleAlign == "right"){
  146.         box.titleFormula = Math.ceil(box.x + (box.width - box.borderSize * 2 - !box.borderCollision - box.title.length));
  147.     };
  148.     texttoxy(box.titleFormula, box.y + box.borderSize + !box.borderCollision, box.title, box.textColor, box.textBgColor);
  149.     //Alignment formula of description and draw it
  150.     if(!box.descAlign) box.descAlign = "center";
  151.     if(box.descAlign == "center"){
  152.         box.descFormula = function(formattedDesc, descIndex){
  153.             return Math.ceil(box.x + box.width / 2 - formattedDesc[descIndex - box.borderSize - 3].length / 2);
  154.         };
  155.     }
  156.     else if(box.descAlign == "left"){
  157.         box.descFormula = function(){
  158.             return Math.ceil(box.x + box.borderSize * 2 + !box.borderCollision);
  159.         };
  160.     }
  161.     else if(box.descAlign == "right"){
  162.         box.descFormula = function(formattedDesc, descIndex){
  163.             return Math.ceil(box.x + (box.width - box.borderSize * 2 - !box.borderCollision - formattedDesc[descIndex - box.borderSize - 3].length));
  164.         };
  165.     };
  166.     for(box.descIndex = box.borderSize + 3; box.descIndex < box.formattedDesc.length + box.borderSize + 3; box.descIndex++){
  167.         texttoxy(box.descFormula(box.formattedDesc, box.descIndex), box.y + box.descIndex - !!box.borderCollision, box.formattedDesc[box.descIndex - box.borderSize - 3], box.textColor, box.textBgColor);
  168.     };
  169.     //Alignment formula of footer and draw it IF there's any
  170.     if(!box.footer) return;
  171.     if(!box.footerAlign) box.footerAlign = "right";
  172.     if(box.footerAlign == "center"){
  173.         box.footerFormula = Math.ceil(box.x + box.width / 2 - box.footer.length / 2);
  174.     }
  175.     else if(box.footerAlign == "left"){
  176.         box.footerFormula = Math.ceil(box.x + box.borderSize * 2 + !box.borderCollision + !!box.footer2space);
  177.     }
  178.     else if(box.footerAlign == "right"){
  179.         box.footerFormula = Math.ceil(box.x + (box.width - box.borderSize * 2 - !box.borderCollision - !!box.footer2space - box.footer.length));
  180.     };
  181.     texttoxy(box.footerFormula, box.y + box.height - box.borderSize - 1 - !box.borderCollision, box.footer, box.textColor, box.textBgColor);
  182. }