Styled UI for file upload

dist/BlueMarble.user.css

@@ -1 +1 @@
-#bm-overlay{position:fixed;background-color:#153063e6;color:#fff;padding:10px;border-radius:8px;z-index:9000}div#bm-overlay{font-family:Roboto Mono,Courier New,Monaco,DejaVu Sans Mono,monospace,Arial;letter-spacing:.05em}#bm-bar-drag{margin-bottom:.5em;background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="5" height="5"><circle cx="3" cy="3" r="1.5" fill="CornflowerBlue" /></svg>') repeat;cursor:grab;width:100%;height:1em}#bm-bar-drag.dragging{cursor:grabbing}#bm-contain-header{margin-bottom:.5em}#bm-overlay img{display:inline-block;height:2.5em;margin-right:1ch;vertical-align:middle}#bm-overlay h1{display:inline-block;font-size:x-large;font-weight:700;vertical-align:middle}#bm-contain-userinfo,#bm-contain-automation,#bm-contain-coords,#bm-contain-buttons,#bm-output-status{margin-top:.5em}#bm-contain-automation input[type=checkbox]{vertical-align:middle;margin-right:.5ch}#bm-contain-automation label{margin-right:.5ch}.bm-help{border:white 1px solid;border-radius:1em;height:1.25em;width:1.25em;margin-top:2px;text-align:center;line-height:1.25em}#bm-button-coords{vertical-align:middle}#bm-button-coords svg{width:50%;margin:0 auto;fill:#111}#bm-contain-coords input[type=text]{width:7.5ch;margin-left:1ch;background-color:#0003;padding:0 .5ch;font-size:small}#bm-contain-buttons{display:flex;flex-direction:row;flex-wrap:wrap;align-content:center;justify-content:center;align-items:center;gap:1ch}#bm-contain-buttons button{border-radius:1em;padding:0 .75ch}#bm-overlay button{background-color:#144eb9}#bm-overlay button:hover,#bm-overlay button:focus{background-color:#1061e5}#bm-overlay button:active,#bm-overlay button:disabled{background-color:#2e97ff}#bm-overlay button:disabled{text-decoration:line-through}#bm-output-status{font-size:small;background-color:#0003;padding:0 .5ch;height:3.75em;width:100%}
+#bm-overlay{position:fixed;background-color:#153063e6;color:#fff;padding:10px;border-radius:8px;z-index:9000}div#bm-overlay{font-family:Roboto Mono,Courier New,Monaco,DejaVu Sans Mono,monospace,Arial;letter-spacing:.05em}#bm-bar-drag{margin-bottom:.5em;background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="5" height="5"><circle cx="3" cy="3" r="1.5" fill="CornflowerBlue" /></svg>') repeat;cursor:grab;width:100%;height:1em}#bm-bar-drag.dragging{cursor:grabbing}#bm-contain-header{margin-bottom:.5em}#bm-overlay img{display:inline-block;height:2.5em;margin-right:1ch;vertical-align:middle}#bm-overlay h1{display:inline-block;font-size:x-large;font-weight:700;vertical-align:middle}#bm-contain-automation input[type=checkbox]{vertical-align:middle;margin-right:.5ch}#bm-contain-automation label{margin-right:.5ch}.bm-help{border:white 1px solid;border-radius:1em;height:1.25em;width:1.25em;margin-top:2px;text-align:center;line-height:1.25em}#bm-button-coords{vertical-align:middle}#bm-button-coords svg{width:50%;margin:0 auto;fill:#111}#bm-contain-coords input[type=text]{width:7.5ch;margin-left:1ch;background-color:#0003;padding:0 .5ch;font-size:small}#bm-contain-buttons{display:flex;flex-direction:row;flex-wrap:wrap;align-content:center;justify-content:center;align-items:center;gap:1ch}#bm-contain-buttons button{border-radius:1em;padding:0 .75ch}#bm-output-status{font-size:small;background-color:#0003;padding:0 .5ch;height:3.75em;width:100%}#bm-contain-userinfo,#bm-contain-automation,#bm-contain-coords,#bm-contain-buttons,#bm-input-file,#bm-output-status{margin-top:.5em}#bm-overlay button{background-color:#144eb9}#bm-overlay button:hover,#bm-overlay button:focus{background-color:#1061e5}#bm-overlay button:active,#bm-overlay button:disabled{background-color:#2e97ff}#bm-overlay button:disabled{text-decoration:line-through}

dist/BlueMarble.user.js

@@ -1,7 +1,7 @@
 // ==UserScript==
 // @name         Blue Marble
 // @namespace    https://github.com/SwingTheVine/
-// @version      0.36.0
+// @version      0.36.2
 // @description  A userscript to automate and/or enhance the user experience on Wplace.live. Make sure to comply with the site's Terms of Service, and rules! This script is not affiliated with Wplace.live in any way, use at your own risk. This script is not affiliated with TamperMonkey. The author of this userscript is not responsible for any damages, issues, loss of data, or punishment that may occur as a result of using this script. This script is provided "as is" under the MPL-2.0 license. The "Blue Marble" icon is licensed under CC0 1.0 Universal (CC0 1.0) Public Domain Dedication. The image is owned by NASA.
 // @author       SwingTheVine
 // @license      MPL-2.0
@@ -20,5 +20,5 @@
 // Wplace  --> https://wplace.live
 // License --> https://www.mozilla.org/en-US/MPL/2.0/
 
-(()=>{var b=class{constructor(e,t){this.name=e,this.version=t}create(){let e="bm-output-status",t=document.createElement("div");t.id="bm-overlay",t.style.top="10px",t.style.right="75px";let n=document.createElement("div");n.id="bm-contain-header";let o=document.createElement("div");o.id="bm-bar-drag",n.appendChild(o);let i=document.createElement("img");i.src="https://raw.githubusercontent.com/SwingTheVine/Wplace-BlueMarble/main/src/assets/Favicon.png",i.alt="Blue Marble Icon",n.appendChild(i);let s=document.createElement("h1");s.textContent=this.name,n.appendChild(s);let c=document.createElement("div");c.id="bm-contain-userinfo";let g=document.createElement("p");g.id="bm-user-name",g.textContent="Username:",c.appendChild(g);let C=document.createElement("p");C.id="bm-user-droplets",C.textContent="Droplets:",c.appendChild(C);let x=document.createElement("p");x.id="bm-user-nextlevel",x.textContent="Next level in...",c.appendChild(x);let a=document.createElement("div");a.id="bm-contain-automation",a.appendChild(this.createInputCheckbox("Stealth","bm-input-stealth",!0)),a.appendChild(this.createButtonQuestion("bm-help-stealth","Help: Waits for the website to make requests, instead of sending requests.",e)),a.appendChild(document.createElement("br")),a.appendChild(this.createInputCheckbox("Possessed","bm-input-possessed",!0)),a.appendChild(this.createButtonQuestion("bm-help-possessed","Help: Controls the website as if it were possessed.",e)),a.appendChild(document.createElement("br")),a.appendChild(this.createInputCheckbox("Panic","bm-input-panic")),a.appendChild(this.createButtonQuestion("bm-help-panic","Help: Stops placing for a while if it detects a user nearby.",e)),a.appendChild(document.createElement("br"));let l=document.createElement("div");l.id="bm-contain-coords";let d=document.createElement("button");d.id="bm-button-coords",d.className="bm-help",d.style="margin-top: 0",d.innerHTML='<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 4 6"><circle cx="2" cy="2" r="2"></circle><path d="M2 6 L3.7 3 L0.3 3 Z"></path><circle cx="2" cy="2" r="0.7" fill="white"></circle></svg></svg>',d.onclick=()=>{},l.appendChild(d),l.appendChild(this.createInputText("bm-input-tx","Tile X","","4")),l.appendChild(this.createInputText("bm-input-ty","Tile Y","","4")),l.appendChild(this.createInputText("bm-input-px","Pixl X","","4")),l.appendChild(this.createInputText("bm-input-py","Pixl Y","","4")),a.appendChild(l);let m=document.createElement("input");m.id="bm-input-file",m.type="file",m.addEventListener("change",L=>{let E=L.target.files[0];E&&console.log(`Uploaded file: ${E.name}`)}),a.appendChild(m);let p=document.createElement("div");p.id="bm-contain-buttons",p.appendChild(this.createButton("bm-button-start","Start")),p.appendChild(this.createButton("bm-button-pause","Pause",!1)),p.appendChild(this.createButton("bm-button-stop","Stop",!1)),a.appendChild(p);let h=document.createElement("textarea");h.id=e,h.readOnly=!0,h.placeholder=`Status: Sleeping...
-Version: ${this.version}`,a.appendChild(h),t.appendChild(n),t.appendChild(document.createElement("hr")),t.appendChild(c),t.appendChild(document.createElement("hr")),t.appendChild(a),document.body.appendChild(t),this.handleDrag(t,o)}updateInnerHTML(e,t,n=!1){let o=document.getElementById(e);if(o){if(o instanceof HTMLInputElement){o.value=t;return}n?o.textContent=t:o.innerHTML=t}}createButtonQuestion(e,t,n){let o=this.createButton(e,"?");return o.className="bm-help",o.title=t,o.onclick=()=>{this.updateInnerHTML(n,t)},o}createButton(e,t,n=!0){let o=document.createElement("button");return o.id=e,o.textContent=t,o.disabled=!n,o}createInputText(e,t="",n="",o="",i=!1){let s=document.createElement("input");return s.id=e,s.type="text",s.placeholder=t,s.value=n,s.readOnly=i,s.maxLength=o,s}createInputCheckbox(e,t,n=!1){let o=document.createElement("label");o.textContent=e;let i=document.createElement("input");return i.type="checkbox",i.id=t,i.checked=n,o.prepend(i),o}handleDrag(e,t){let n=!1,o,i=0;t.addEventListener("mousedown",function(s){n=!0,o=s.clientX-e.getBoundingClientRect().left,i=s.clientY-e.getBoundingClientRect().top,document.body.style.userSelect="none",t.classList.add("dragging")}),t.addEventListener("touchstart",function(s){n=!0;let c=s?.touches?.[0];c&&(o=c.clientX-e.getBoundingClientRect().left,i=c.clientY-e.getBoundingClientRect().top,document.body.style.userSelect="none",t.classList.add("dragging"))},{passive:!1}),document.addEventListener("mousemove",function(s){n&&(e.style.left=s.clientX-o+"px",e.style.top=s.clientY-i+"px",e.style.right="")}),document.addEventListener("touchmove",function(s){if(n){let c=s?.touches?.[0];if(!c)return;e.style.left=c.clientX-o+"px",e.style.top=c.clientY-i+"px",s.preventDefault()}},{passive:!1}),document.addEventListener("mouseup",function(){n=!1,document.body.style.userSelect="",t.classList.remove("dragging")}),document.addEventListener("touchend",function(){n=!1,document.body.style.userSelect="",t.classList.remove("dragging")}),document.addEventListener("touchcancel",function(){n=!1,document.body.style.userSelect="",t.classList.remove("dragging")})}};var f=class{constructor(){this.disableAll=!1}spontaneousResponseListener(e){window.addEventListener("message",t=>{let n=t.data;if(n&&n.source==="blue-marble")switch(n.endpoint){case"me":let o=Math.ceil(Math.pow(Math.floor(n.jsonData?.level)*Math.pow(30,.65),1.5384615384615383)-n.jsonData?.pixelsPainted);e.updateInnerHTML("bm-user-name",`Username: <b>${n.jsonData?.name}</b>`),e.updateInnerHTML("bm-user-droplets",`Droplets: <b>${new Intl.NumberFormat().format(n.jsonData?.droplets)}</b>`),e.updateInnerHTML("bm-user-nextlevel",`Next level in <b>${new Intl.NumberFormat().format(o)}</b> pixel${o==1?"":"s"}`);break;case"robots":this.disableAll=n.jsonData?.userscript?.toString().toLowerCase()=="false"}})}};var v=GM_info.script.name.toString(),y=GM_info.script.version.toString();function M(r){let e=document.createElement("script");e.textContent=`(${r})();`,document.documentElement.appendChild(e),e.remove()}M(()=>{let r=window.fetch;window.fetch=async function(...e){let t=await r.apply(this,e),n=t.clone();if((n.headers.get("content-type")||"").includes("application/json")){let i=(e[0]instanceof Request?e[0]?.url:e[0])||"ignore";i=i.split("/").filter(Boolean).pop()||"ignore",console.log(`Sending JSON message about endpoint "${i}"`),n.json().then(s=>{window.postMessage({source:"blue-marble",endpoint:i,jsonData:s},"*")}).catch(s=>{console.error("BM - Failed to parse JSON:",s)})}return t}});var S=GM_getResourceText("CSS-BM-File");GM_addStyle(S);var u=document.createElement("link");u.href="https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap";u.rel="preload";u.as="style";u.onload="this.onload=null;this.rel='stylesheet'";document.head.appendChild(u);var w=new b(v,y);w.create();var I=new f;I.spontaneousResponseListener(w);console.log(`${v} (${y}) userscript has loaded!`);})();
+(()=>{var h=class{constructor(t,n){this.name=t,this.version=n}create(){let t="bm-output-status",n=document.createElement("div");n.id="bm-overlay",n.style.top="10px",n.style.right="75px";let o=document.createElement("div");o.id="bm-contain-header";let e=document.createElement("div");e.id="bm-bar-drag",o.appendChild(e);let s=document.createElement("img");s.src="https://raw.githubusercontent.com/SwingTheVine/Wplace-BlueMarble/main/src/assets/Favicon.png",s.alt="Blue Marble Icon",o.appendChild(s);let i=document.createElement("h1");i.textContent=this.name,o.appendChild(i);let c=document.createElement("div");c.id="bm-contain-userinfo";let f=document.createElement("p");f.id="bm-user-name",f.textContent="Username:",c.appendChild(f);let C=document.createElement("p");C.id="bm-user-droplets",C.textContent="Droplets:",c.appendChild(C);let g=document.createElement("p");g.id="bm-user-nextlevel",g.textContent="Next level in...",c.appendChild(g);let a=document.createElement("div");a.id="bm-contain-automation",a.appendChild(this.createInputCheckbox("Stealth","bm-input-stealth",!0)),a.appendChild(this.createButtonQuestion("bm-help-stealth","Help: Waits for the website to make requests, instead of sending requests.",t)),a.appendChild(document.createElement("br")),a.appendChild(this.createInputCheckbox("Possessed","bm-input-possessed",!0)),a.appendChild(this.createButtonQuestion("bm-help-possessed","Help: Controls the website as if it were possessed.",t)),a.appendChild(document.createElement("br")),a.appendChild(this.createInputCheckbox("Panic","bm-input-panic")),a.appendChild(this.createButtonQuestion("bm-help-panic","Help: Stops placing for a while if it detects a user nearby.",t)),a.appendChild(document.createElement("br"));let l=document.createElement("div");l.id="bm-contain-coords";let d=document.createElement("button");d.id="bm-button-coords",d.className="bm-help",d.style="margin-top: 0",d.innerHTML='<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 4 6"><circle cx="2" cy="2" r="2"></circle><path d="M2 6 L3.7 3 L0.3 3 Z"></path><circle cx="2" cy="2" r="0.7" fill="white"></circle></svg></svg>',d.onclick=()=>{},l.appendChild(d),l.appendChild(this.createInputText("bm-input-tx","Tile X","","4")),l.appendChild(this.createInputText("bm-input-ty","Tile Y","","4")),l.appendChild(this.createInputText("bm-input-px","Pixl X","","4")),l.appendChild(this.createInputText("bm-input-py","Pixl Y","","4")),a.appendChild(l),a.appendChild(this.createInputFile("bm-input-file",20));let p=document.createElement("div");p.id="bm-contain-buttons",p.appendChild(this.createButton("bm-button-start","Start")),p.appendChild(this.createButton("bm-button-pause","Pause",!1)),p.appendChild(this.createButton("bm-button-stop","Stop",!1)),a.appendChild(p);let m=document.createElement("textarea");m.id=t,m.readOnly=!0,m.placeholder=`Status: Sleeping...
+Version: ${this.version}`,a.appendChild(m),n.appendChild(o),n.appendChild(document.createElement("hr")),n.appendChild(c),n.appendChild(document.createElement("hr")),n.appendChild(a),document.body.appendChild(n),this.handleDrag(n,e)}updateInnerHTML(t,n,o=!1){let e=document.getElementById(t);if(e){if(e instanceof HTMLInputElement){e.value=n;return}o?e.textContent=n:e.innerHTML=n}}createButtonQuestion(t,n,o){let e=this.createButton(t,"?");return e.className="bm-help",e.title=n,e.onclick=()=>{this.updateInnerHTML(o,n)},e}createButton(t,n,o=!0){let e=document.createElement("button");return e.id=t,e.textContent=n,e.disabled=!o,e}createInputText(t,n="",o="",e="",s=!1){let i=document.createElement("input");return i.id=t,i.type="text",i.placeholder=n,i.value=o,i.readOnly=s,i.maxLength=e,i}createInputCheckbox(t,n,o=!1){let e=document.createElement("label");e.textContent=t;let s=document.createElement("input");return s.type="checkbox",s.id=n,s.checked=o,e.prepend(s),e}createInputFile(t,n=0){let o=document.createElement("div"),e=document.createElement("input");e.id=t,e.type="file",e.style="display: none";let s=document.createElement("button");return s.textContent="Upload File",s.addEventListener("click",()=>{e.click()}),e.addEventListener("change",()=>{e.files.length>0?s.textContent=n?`${e.files[0].name.slice(0,n)}\u2026`:e.files[0].name:s.textContent="Upload File"}),o.appendChild(e),o.appendChild(s),o}handleDrag(t,n){let o=!1,e,s=0;n.addEventListener("mousedown",function(i){o=!0,e=i.clientX-t.getBoundingClientRect().left,s=i.clientY-t.getBoundingClientRect().top,document.body.style.userSelect="none",n.classList.add("dragging")}),n.addEventListener("touchstart",function(i){o=!0;let c=i?.touches?.[0];c&&(e=c.clientX-t.getBoundingClientRect().left,s=c.clientY-t.getBoundingClientRect().top,document.body.style.userSelect="none",n.classList.add("dragging"))},{passive:!1}),document.addEventListener("mousemove",function(i){o&&(t.style.left=i.clientX-e+"px",t.style.top=i.clientY-s+"px",t.style.right="")}),document.addEventListener("touchmove",function(i){if(o){let c=i?.touches?.[0];if(!c)return;t.style.left=c.clientX-e+"px",t.style.top=c.clientY-s+"px",i.preventDefault()}},{passive:!1}),document.addEventListener("mouseup",function(){o=!1,document.body.style.userSelect="",n.classList.remove("dragging")}),document.addEventListener("touchend",function(){o=!1,document.body.style.userSelect="",n.classList.remove("dragging")}),document.addEventListener("touchcancel",function(){o=!1,document.body.style.userSelect="",n.classList.remove("dragging")})}};var b=class{constructor(){this.disableAll=!1}spontaneousResponseListener(t){window.addEventListener("message",n=>{let o=n.data;if(o&&o.source==="blue-marble")switch(o.endpoint){case"me":let e=Math.ceil(Math.pow(Math.floor(o.jsonData?.level)*Math.pow(30,.65),1.5384615384615383)-o.jsonData?.pixelsPainted);t.updateInnerHTML("bm-user-name",`Username: <b>${o.jsonData?.name}</b>`),t.updateInnerHTML("bm-user-droplets",`Droplets: <b>${new Intl.NumberFormat().format(o.jsonData?.droplets)}</b>`),t.updateInnerHTML("bm-user-nextlevel",`Next level in <b>${new Intl.NumberFormat().format(e)}</b> pixel${e==1?"":"s"}`);break;case"robots":this.disableAll=o.jsonData?.userscript?.toString().toLowerCase()=="false"}})}};var x=GM_info.script.name.toString(),E=GM_info.script.version.toString();function y(r){let t=document.createElement("script");t.textContent=`(${r})();`,document.documentElement.appendChild(t),t.remove()}y(()=>{let r=window.fetch;window.fetch=async function(...t){let n=await r.apply(this,t),o=n.clone();if((o.headers.get("content-type")||"").includes("application/json")){let s=(t[0]instanceof Request?t[0]?.url:t[0])||"ignore";s=s.split("/").filter(Boolean).pop()||"ignore",console.log(`Sending JSON message about endpoint "${s}"`),o.json().then(i=>{window.postMessage({source:"blue-marble",endpoint:s,jsonData:i},"*")}).catch(i=>{console.error("BM - Failed to parse JSON:",i)})}return n}});var w=GM_getResourceText("CSS-BM-File");GM_addStyle(w);var u=document.createElement("link");u.href="https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap";u.rel="preload";u.as="style";u.onload="this.onload=null;this.rel='stylesheet'";document.head.appendChild(u);var v=new h(x,E);v.create();var L=new b;L.spontaneousResponseListener(v);console.log(`${x} (${E}) userscript has loaded!`);})();

docs/README.md

@@ -35,7 +35,7 @@
 <a href="https://github.com/SwingTheVine/Wplace-BlueMarble/blob/main/LICENSE.txt" target="_blank"><img alt="Software License: MPL-2.0" src="https://img.shields.io/badge/Software_License-MPL--2.0-brightgreen?style=flat"></a>
 <a href="https://discord.gg/tpeBPy46hf" target="_blank"><img alt="Contact Me" src="https://img.shields.io/badge/Contact_Me-gray?style=flat&logo=Discord&logoColor=white&logoSize=auto&labelColor=cornflowerblue"></a>
 <a href="" target="_blank"><img alt="WakaTime" src="https://img.shields.io/badge/Coding_Time-10hrs_0mins-blue?style=flat&logo=wakatime&logoColor=black&logoSize=auto&labelColor=white"></a>
-<a href="" target="_blank"><img alt="Total Patches" src="https://img.shields.io/badge/Total_Patches-77-black?style=flat"></a>
+<a href="" target="_blank"><img alt="Total Patches" src="https://img.shields.io/badge/Total_Patches-79-black?style=flat"></a>
 <a href="" target="_blank"><img alt="Total Lines of Code" src="https://tokei.rs/b1/github/SwingTheVine/Wplace-BlueMarble?category=code"></a>
 <a href="" target="_blank"><img alt="Total Comments" src="https://tokei.rs/b1/github/SwingTheVine/Wplace-BlueMarble?category=comments"></a>
 <a href="" target="_blank"><img alt="Build" src="https://github.com/SwingTheVine/Wplace-BlueMarble/actions/workflows/build.yml/badge.svg"></a>

package-lock.json

@@ -7,7 +7,7 @@
       "devDependencies": {
         "esbuild": "^0.25.0"
       },
-      "version": "0.33.2"
+      "version": "0.36.2"
     },
     "node_modules/@esbuild/aix-ppc64": {
       "version": "0.25.8",
@@ -467,5 +467,5 @@
       }
     }
   },
-  "version": "0.33.2"
+  "version": "0.36.2"
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "wplace-bluemarble",
-  "version": "0.36.0",
+  "version": "0.36.2",
   "type": "module",
   "scripts": {
     "build": "node build/build.js",

src/BlueMarble.meta.js

@@ -1,7 +1,7 @@
 // ==UserScript==
 // @name         Blue Marble
 // @namespace    https://github.com/SwingTheVine/
-// @version      0.36.0
+// @version      0.36.2
 // @description  A userscript to automate and/or enhance the user experience on Wplace.live. Make sure to comply with the site's Terms of Service, and rules! This script is not affiliated with Wplace.live in any way, use at your own risk. This script is not affiliated with TamperMonkey. The author of this userscript is not responsible for any damages, issues, loss of data, or punishment that may occur as a result of using this script. This script is provided "as is" under the MPL-2.0 license. The "Blue Marble" icon is licensed under CC0 1.0 Universal (CC0 1.0) Public Domain Dedication. The image is owned by NASA.
 // @author       SwingTheVine
 // @license      MPL-2.0

src/overlay.css

@@ -59,15 +59,6 @@ div#bm-overlay {
   vertical-align: middle;
 }
 
-/* The containers that need spacing from each-other */
-#bm-contain-userinfo,
-#bm-contain-automation,
-#bm-contain-coords,
-#bm-contain-buttons,
-#bm-output-status {
-  margin-top: 0.5em;
-}
-
 /* Checkboxes in the automation container */
 #bm-contain-automation input[type="checkbox"] {
   vertical-align: middle;
@@ -122,15 +113,36 @@ div#bm-overlay {
   gap: 1ch;
 }
 
-/* Automation button array buttons */
-#bm-contain-buttons button {
-  border-radius: 1em;
-  padding: 0 0.75ch;
+/* The template file upload container */
+div:has(> #bm-input-file) > button {
+  width: 100%;
+  text-align: left;
+}
+
+/* Output status area */
+#bm-output-status {
+  font-size: small;
+  background-color: rgba(0, 0, 0, 0.2);
+  padding: 0 0.5ch;
+  height: 3.75em;
+  width: 100%;
+}
+
+/* The elements that need spacing from each-other */
+#bm-contain-userinfo,
+#bm-contain-automation,
+#bm-contain-coords,
+#bm-contain-buttons,
+div:has(> #bm-input-file),
+#bm-output-status {
+  margin-top: 0.5em;
 }
 
 /* All overlay buttons */
 #bm-overlay button {
   background-color: #144eb9;
+  border-radius: 1em;
+  padding: 0 0.75ch;
 }
 
 /* All overlay buttons when hovered/focused */
@@ -147,13 +159,4 @@ div#bm-overlay {
 /* All overlay buttons when disabled */
 #bm-overlay button:disabled {
   text-decoration: line-through;
-}
-
-/* Output status area */
-#bm-output-status {
-  font-size: small;
-  background-color: rgba(0, 0, 0, 0.2);
-  padding: 0 0.5ch;
-  height: 3.75em;
-  width: 100%;
 }

src/overlay.js

@@ -125,22 +125,14 @@ export class Overlay {
     containerAutomationCoords.appendChild(buttonCoords); // Adds the coordinate button to the automation container
 
     // Tile (x,y) and Pixel (x,y) input fields
-    containerAutomationCoords.appendChild(this.createInputText('bm-input-tx', 'Tile X', '', '4'));
-    containerAutomationCoords.appendChild(this.createInputText('bm-input-ty', 'Tile Y', '', '4'));
-    containerAutomationCoords.appendChild(this.createInputText('bm-input-px', 'Pixl X', '', '4'));
-    containerAutomationCoords.appendChild(this.createInputText('bm-input-py', 'Pixl Y', '', '4'));
+    containerAutomationCoords.appendChild(this.createInputText('bm-input-tx', 'Tl X', '', '4'));
+    containerAutomationCoords.appendChild(this.createInputText('bm-input-ty', 'Tl Y', '', '4'));
+    containerAutomationCoords.appendChild(this.createInputText('bm-input-px', 'Px X', '', '4'));
+    containerAutomationCoords.appendChild(this.createInputText('bm-input-py', 'Px Y', '', '4'));
 
     containerAutomation.appendChild(containerAutomationCoords); // Adds coord container to automation container
 
-    const fileUpload = document.createElement('input');
-    fileUpload.id = 'bm-input-file';
-    fileUpload.type = 'file';
-    fileUpload.addEventListener('change', (event) => {
-      const file = event.target.files[0];
-      if (!file) {return;} // Kills itself if there is no file
-      console.log(`Uploaded file: ${file.name}`);
-    })
-    containerAutomation.appendChild(fileUpload); // Adds the file upload element to the automation container
+    containerAutomation.appendChild(this.createInputFile('bm-input-file', 20)); // Adds the file upload element to the automation container
 
     const containerAutomationButtons = document.createElement('div'); // Button array for bot
     containerAutomationButtons.id = 'bm-contain-buttons';
@@ -267,6 +259,42 @@ export class Overlay {
     return label;
   }
 
+  /** Creates a custom file upload input.
+   * Only the button is displayed, but interacting with it will simulate the file input
+   * @param {string} inputId - The file input element ID
+   * @param {number} [maxChars] - (Optional) The maximum number of characters in the displayed file name. Zero by default
+   * @returns {HTMLDivElement} HTML Div Element with Button and Input children
+   * @since 0.36.1
+   */
+  createInputFile(inputId, maxChars=0) {
+    const container = document.createElement('div');
+
+    const input = document.createElement('input');
+    input.id = inputId;
+    input.type = 'file';
+    input.style = 'display: none'; // Hides the file input
+
+    const button = document.createElement('button');
+    button.textContent = 'Upload File';
+    button.addEventListener('click', () => {
+      input.click(); // Clicks the file input
+    });
+
+    // Changes the button text content (and trims the file name)
+    input.addEventListener('change', () => {
+      if (input.files.length > 0) {
+        const name = input.files[0].name;
+        button.textContent = !!maxChars ? `${name.slice(0, maxChars)}${name.length > maxChars ? `…` : ``}` : input.files[0].name;
+      } else {
+        button.textContent = 'Upload File';
+      }
+    });
+
+    container.appendChild(input);
+    container.appendChild(button);
+    return container;
+  }
+
   /** Handles dragging of the overlay.
    * @param {HTMLElement} overlay - The overlay element to be moved.
    * @param {HTMLElement} barDrag - The element that acts as the drag handle.