diff --git a/dist/BlueMarble.user.js b/dist/BlueMarble.user.js index c326a3c..81db46d 100644 --- a/dist/BlueMarble.user.js +++ b/dist/BlueMarble.user.js @@ -1,7 +1,7 @@ // ==UserScript== // @name Blue Marble // @namespace https://github.com/SwingTheVine/ -// @version 0.65.0 +// @version 0.65.41 // @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,4 +20,4 @@ // Wplace --> https://wplace.live // License --> https://www.mozilla.org/en-US/MPL/2.0/ -(()=>{var t,e,n=t=>{throw TypeError(t)},s=(t,e,s)=>(((t,e)=>{e.has(t)||n("Cannot access private method")})(t,e),s);t=new WeakSet,e=function(t,e={},n={}){const s=document.createElement(t);this.t?(this.i.appendChild(s),this.o.push(this.i),this.i=s):(this.t=s,this.i=s);for(const[t,n]of Object.entries(e))s[t]=n;for(const[t,e]of Object.entries(n))s[t]=e;return s};var i=GM_info.script.name.toString(),o=GM_info.script.version.toString();!function(t){const e=document.createElement("script");e.setAttribute("bm-s",i),e.setAttribute("bm-q","color: cornflowerblue;"),e.textContent=`(${t})();`,document.documentElement.appendChild(e),e.remove()}(()=>{const t=document.currentScript,e=(t?.getAttribute("bm-s"),t?.getAttribute("bm-q"),new Map);window.addEventListener("message",t=>{const{source:n,endpoint:s,blobID:i,blobData:o,blink:a}=t.data;Date.now(),"blue-marble"==n&&i&&o&&!s&&e.get(i)(o)});const n=window.fetch;window.fetch=async function(...t){const s=await n.apply(this,t),i=s.clone(),o=(t[0]instanceof Request?t[0]?.url:t[0])||"ignore",a=i.headers.get("content-type")||"";if(a.includes("application/json"))i.json().then(t=>{window.postMessage({source:"blue-marble",endpoint:o,jsonData:t},"*")}).catch(t=>{});else if(a.includes("image/")&&!o.includes("openfreemap")){const t=Date.now(),n=await i.blob();return new Promise(s=>{const a=crypto.randomUUID();e.set(a,t=>{s(new Response(t,{headers:i.headers,status:i.status,statusText:i.statusText})),e.delete(a)}),window.postMessage({source:"blue-marble",endpoint:o,blobID:a,blobData:n,blink:t})}).catch(t=>{Date.now()})}return s}});var a=GM_getResourceText("CSS-BM-File");GM_addStyle(a);var r=document.createElement("link");r.href="https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap",r.rel="preload",r.as="style",r.onload=function(){this.onload=null,this.rel="stylesheet"},document.head.appendChild(r),new class{constructor(){this.l=null,this.h=null,this.u="#bm-9"}m(t){return this.h=t,this.l=new MutationObserver(t=>{for(const e of t)for(const t of e.addedNodes)t instanceof HTMLElement&&t.matches?.(this.u)}),this}p(){return this.l}observe(t,e=!1,n=!1){t.observe(this.h,{childList:e,subtree:n})}};var c=new class{constructor(e,s){var i,o;i=this,(o=t).has(i)?n("Cannot add the same private member more than once"):o instanceof WeakSet?o.add(i):o.set(i,undefined),this.name=e,this.version=s,this.v=null,this.M="bm-e",this.t=null,this.i=null,this.o=[]}C(t){this.v=t}$(){return this.o.length>0&&(this.i=this.o.pop()),this}I(t){t.appendChild(this.t),this.t=null,this.i=null,this.o=[]}T(n={},i=()=>{}){return i(this,s(this,t,e).call(this,"div",{},n)),this}D(n={},i=()=>{}){return i(this,s(this,t,e).call(this,"p",{},n)),this}k(n={},i=()=>{}){return i(this,s(this,t,e).call(this,"small",{},n)),this}S(n={},i=()=>{}){return i(this,s(this,t,e).call(this,"img",{},n)),this}N(n,i={},o=()=>{}){return o(this,s(this,t,e).call(this,"h"+n,{},i)),this}B(n={},i=()=>{}){return i(this,s(this,t,e).call(this,"hr",{},n)),this}H(n={},i=()=>{}){return i(this,s(this,t,e).call(this,"br",{},n)),this}L(n={},i=()=>{}){const o=s(this,t,e).call(this,"label",{textContent:n.textContent??""});delete n.textContent;const a=s(this,t,e).call(this,"input",{type:"checkbox"},n);return o.insertBefore(a,o.firstChild),this.$(),i(this,o,a),this}P(n={},i=()=>{}){return i(this,s(this,t,e).call(this,"button",{},n)),this}O(n={},i=()=>{}){const o=n.title??n.textContent??"Help: No info";delete n.textContent,n.title=`Help: ${o}`;const a={textContent:"?",className:"bm-t",onclick:()=>{this.R(this.M,o)}};return i(this,s(this,t,e).call(this,"button",a,n)),this}j(n={},i=()=>{}){return i(this,s(this,t,e).call(this,"input",{},n)),this}G(n={},i=()=>{}){const o=n.textContent??"";delete n.textContent;const a=s(this,t,e).call(this,"div"),r=s(this,t,e).call(this,"input",{type:"file",style:"display: none;"},n);this.$();const c=s(this,t,e).call(this,"button",{textContent:o});return this.$(),this.$(),c.addEventListener("click",()=>{r.click()}),r.addEventListener("change",()=>{c.style.maxWidth=`${c.offsetWidth}px`,r.files.length>0?c.textContent=r.files[0].name:c.textContent=o}),i(this,a,r,c),this}U(n={},i=()=>{}){return i(this,s(this,t,e).call(this,"textarea",{},n)),this}R(t,e,n=!1){const s=document.getElementById(t.replace(/^#/,""));s&&(s instanceof HTMLInputElement?s.value=e:n?s.textContent=e:s.innerHTML=e)}W(t,e){let n,s=!1,i=0;t=document.querySelector("#"==t?.[0]?t:"#"+t),e=document.querySelector("#"==e?.[0]?e:"#"+e),t&&e?(e.addEventListener("mousedown",function(o){s=!0,n=o.clientX-t.getBoundingClientRect().left,i=o.clientY-t.getBoundingClientRect().top,document.body.style.userSelect="none",e.classList.add("dragging")}),e.addEventListener("touchstart",function(o){s=!0;const a=o?.touches?.[0];a&&(n=a.clientX-t.getBoundingClientRect().left,i=a.clientY-t.getBoundingClientRect().top,document.body.style.userSelect="none",e.classList.add("dragging"))},{passive:!1}),document.addEventListener("mousemove",function(e){s&&(t.style.left=e.clientX-n+"px",t.style.top=e.clientY-i+"px",t.style.right="")}),document.addEventListener("touchmove",function(e){if(s){const s=e?.touches?.[0];if(!s)return;t.style.left=s.clientX-n+"px",t.style.top=s.clientY-i+"px",e.preventDefault()}},{passive:!1}),document.addEventListener("mouseup",function(){s=!1,document.body.style.userSelect="",e.classList.remove("dragging")}),document.addEventListener("touchend",function(){s=!1,document.body.style.userSelect="",e.classList.remove("dragging")}),document.addEventListener("touchcancel",function(){s=!1,document.body.style.userSelect="",e.classList.remove("dragging")})):this.X(`Can not drag! ${t?"":"moveMe"} ${t||e?"":"and "}${e?"":"iMoveThings "}was not found!`)}Y(t){(0,console.info)(`${this.name}: ${t}`),this.R(this.M,"Status: "+t,!0)}X(t){(0,console.error)(`${this.name}: ${t}`),this.R(this.M,"Error: "+t,!0)}}(i,o),l=new class{constructor(){this._=null,this.q=null,this.F="bm-r",this.V="div#map canvas.maplibregl-canvas",this.A=null,this.Z=""}J(){if(document.body.contains(this._))return this._;document.getElementById(this.F)?.remove();const t=document.querySelector(this.V),e=document.createElement("canvas");return e.id=this.F,e.className="maplibregl-canvas",e.style.position="absolute",e.style.top="0",e.style.left="0",e.style.height=t?.clientHeight*(window.devicePixelRatio||1)+"px",e.style.width=t?.clientWidth*(window.devicePixelRatio||1)+"px",e.height=t?.clientHeight*(window.devicePixelRatio||1),e.width=t?.clientWidth*(window.devicePixelRatio||1),e.style.zIndex="8999",e.style.pointerEvents="none",t?.parentElement?.appendChild(e),this._=e,window.addEventListener("move",this.K),window.addEventListener("zoom",this.tt),window.addEventListener("resize",this.et),this._}nt(t){this.A=t,this.Z="file"}async st(t,e=[0,0,0,0]){if("file"!=this.Z&&"template"!=this.Z)return;const n=3e3;e=e?.length?e:[0,0,0,0];const s="template"==this.Z?this.A:await createImageBitmap(await this.it(this.A)),i=await createImageBitmap(t),o=new OffscreenCanvas(n,n),a=o.getContext("2d");a.imageSmoothingEnabled=!1,a.beginPath(),a.rect(0,0,n,n),a.clip(),a.clearRect(0,0,n,n),a.drawImage(i,0,0,n,n),a.drawImage(s,3*e[2],3*e[3]);const r=await o.convertToBlob({type:"image/png"});return"template"!=this.Z&&(this.A=s,this.Z="template"),r}async it(t,e=3,n="image/png"){const s=await createImageBitmap(t);e|=1;const i=s.width*Math.round(e),o=s.height*Math.round(e),a=document.createElement("canvas");a.width=i,a.height=o;const r=a.getContext("2d");r.imageSmoothingEnabled=!1,r.drawImage(s,0,0,i,o);const c=r.getImageData(0,0,i,o);for(let t=0;t{a.toBlob(t,n)})}},h=new class{constructor(t){this.ot=t,this.rt=!1,this.ct=[],this.lt=[]}ht(t){window.addEventListener("message",async e=>{const n=e.data,s=n.jsonData;if(!n||"blue-marble"!==n.source)return;if(!n.endpoint)return;const i=n.endpoint?.split("?")[0].split("/").filter(t=>t&&isNaN(Number(t))).filter(t=>t&&!t.includes(".")).pop();switch(i){case"me":if(s.status&&"2"!=s.status?.toString()[0])return void t.X("The game is down!\nCould not fetch userdata.");const e=Math.ceil(Math.pow(Math.floor(s.level)*Math.pow(30,.65),1/.65)-s.pixelsPainted);t.R("bm-j",`Username: ${function(t){const e=document.createElement("div");return e.textContent=t,e.innerHTML}(s.name)}`),t.R("bm-f",`Droplets: ${(new Intl.NumberFormat).format(s.droplets)}`),t.R("bm-a",`Next level in ${(new Intl.NumberFormat).format(e)} pixel${1==e?"":"s"}`);break;case"pixel":const i=n.endpoint.split("?")[0].split("/").filter(t=>t&&!isNaN(Number(t))),r=new URLSearchParams(n.endpoint.split("?")[1]),c=[r.get("x"),r.get("y")];if(this.ct.length&&(!i.length||!c.length))return void t.X("Coordinates are malformed!\nDid you try clicking the canvas first?");this.ct=[...i,...c];const l=(o=i,a=c,[parseInt(o[0])%4*1e3+parseInt(a[0]),parseInt(o[1])%4*1e3+parseInt(a[1])]),h=document.querySelectorAll("span");for(const t of h)if(t.textContent.trim().includes(`${l[0]}, ${l[1]}`)){let e=document.querySelector("#bm-9");const n=`(Tl X: ${i[0]}, Tl Y: ${i[1]}, Px X: ${c[0]}, Px Y: ${c[1]})`;e?e.textContent=n:(e=document.createElement("span"),e.id="bm-9",e.textContent=n,e.style="margin-left: calc(var(--spacing)*3); font-size: small;",t.parentNode.parentNode.parentNode.insertAdjacentElement("afterend",e))}break;case"tiles":let d=n.endpoint.split("/");d=[parseInt(d[d.length-2]),parseInt(d[d.length-1].replace(".png",""))];const u=n.blobID,m=n.blobData;let p=m;this.lt?.length>=4&&d[0]==this.lt[0]&&d[1]==this.lt[1]&&(p=this.ot.Z?await this.ot.st(m,this.lt):m),window.postMessage({source:"blue-marble",blobID:u,blobData:p,blink:n.blink});break;case"robots":this.rt="false"==s.userscript?.toString().toLowerCase()}var o,a})}}(l);c.C(h),c.T({id:"bm-p",style:"top: 10px; right: 75px;"}).T({id:"bm-b"}).T({id:"bm-k"}).$().S({alt:"Blue Marble Icon",src:"https://raw.githubusercontent.com/SwingTheVine/Wplace-BlueMarble/main/dist/assets/Favicon.png"}).$().N(1,{textContent:i}).$().$().B().$().T({id:"bm-4"}).D({id:"bm-j",textContent:"Username:"}).$().D({id:"bm-f",textContent:"Droplets:"}).$().D({id:"bm-a",textContent:"Next level in..."}).$().$().B().$().T({id:"bm-3"}).L({id:"bm-g",textContent:"Stealth",checked:!0}).$().O({title:"Waits for the website to make requests, instead of sending requests."}).$().H().$().L({id:"bm-6",textContent:"Possessed",checked:!0}).$().O({title:"Controls the website as if it were possessed."}).$().H().$().T({id:"bm-c"}).P({id:"bm-h",className:"bm-t",style:"margin-top: 0;",innerHTML:''},(t,e)=>{e.onclick=()=>{const e=t.v?.ct;e?.[0]?(t.R("bm-l",e?.[0]||""),t.R("bm-m",e?.[1]||""),t.R("bm-n",e?.[2]||""),t.R("bm-o",e?.[3]||"")):t.X("Coordinates are malformed! Did you try clicking on the canvas first?")}}).$().j({type:"number",id:"bm-l",placeholder:"Tl X",min:0,max:2047,step:1}).$().j({type:"number",id:"bm-m",placeholder:"Tl Y",min:0,max:2047,step:1}).$().j({type:"number",id:"bm-n",placeholder:"Px X",min:0,max:2047,step:1}).$().j({type:"number",id:"bm-o",placeholder:"Px Y",min:0,max:2047,step:1}).$().$().G({id:"bm-2",textContent:"Upload Template",accept:"image/png, image/jpeg, image/webp, image/bmp, image/gif"}).$().T({id:"bm-0"}).P({id:"bm-i",textContent:"Enable"},(t,e)=>{e.onclick=()=>{const e=document.querySelector("#bm-2");e?.files[0]?(h.lt=h.ct,l.nt(e.files[0]),t.Y("Drew to canvas!")):t.X("No file selected!")}}).$().P({id:"bm-d",textContent:"Disable"}).$().$().U({id:c.M,placeholder:`Status: Sleeping...\nVersion: ${o}`,readOnly:!0}).$().T({id:"bm-1"}).T().P({id:"bm-7",className:"bm-t",textContent:"✈"}).$().P({id:"bm-8",className:"bm-t",innerHTML:''}).$().P({id:"bm-5",className:"bm-t",innerHTML:"🖌"}).$().$().k({textContent:"Made by SwingTheVine",style:"margin-top: auto;"}).$().$().$().I(document.body),c.W("#bm-p","#bm-k"),h.ht(c),function(...t){(0,console.log)(...t)}(`%c${i}%c (${o}) userscript has loaded!`,"color: cornflowerblue;","")})(); \ No newline at end of file +(()=>{var t,e,n,s,i=t=>{throw TypeError(t)},o=(t,e,n)=>e.has(t)?i("Cannot add the same private member more than once"):e instanceof WeakSet?e.add(t):e.set(t,n),a=(t,e,n)=>(((t,e)=>{e.has(t)||i("Cannot access private method")})(t,e),n);function r(t,e){if(0===t)return e[0];let n="";const s=e.length;for(;t>0;)n=e[t%s]+n,t=Math.floor(t/s);return n}t=new WeakSet,e=function(t,e={},n={}){const s=document.createElement(t);this.t?(this.i.appendChild(s),this.o.push(this.i),this.i=s):(this.t=s,this.i=s);for(const[t,n]of Object.entries(e))s[t]=n;for(const[t,e]of Object.entries(n))s[t]=e;return s},n=new WeakSet,s=async function(t,e,n){console.log(e);const s=await createImageBitmap(t),i=s.width,o=s.height,a={},r=new OffscreenCanvas(n,n),c=r.getContext("2d",{l:!0});for(let t=e[3];t{const t=document.currentScript,e=t?.getAttribute("bm-s")||"Blue Marble",n=t?.getAttribute("bm-q")||"",s=new Map;window.addEventListener("message",t=>{const{source:i,endpoint:o,blobID:a,blobData:r,blink:c}=t.data,l=Date.now()-c;console.groupCollapsed(`%c${e}%c: ${s.size} Recieved IMAGE message about blob "${a}"`,n,""),console.log(`Blob fetch took %c${String(Math.floor(l/6e4)).padStart(2,"0")}:${String(Math.floor(l/1e3)%60).padStart(2,"0")}.${String(l%1e3).padStart(3,"0")}%c MM:SS.mmm`,n,""),console.log(s),console.groupEnd(),"blue-marble"==i&&a&&r&&!o&&s.get(a)(r)});const i=window.fetch;window.fetch=async function(...t){const o=await i.apply(this,t),a=o.clone(),r=(t[0]instanceof Request?t[0]?.url:t[0])||"ignore",c=a.headers.get("content-type")||"";if(c.includes("application/json"))console.log(`%c${e}%c: Sending JSON message about endpoint "${r}"`,n,""),a.json().then(t=>{window.postMessage({source:"blue-marble",endpoint:r,jsonData:t},"*")}).catch(t=>{console.error(`%c${e}%c: Failed to parse JSON: `,n,"",t)});else if(c.includes("image/")&&!r.includes("openfreemap")){const t=Date.now(),i=await a.blob();return console.log(`%c${e}%c: ${s.size} Sending IMAGE message about endpoint "${r}"`,n,""),new Promise(o=>{const c=crypto.randomUUID();s.set(c,t=>{o(new Response(t,{headers:a.headers,status:a.status,statusText:a.statusText})),s.delete(c),console.log(`%c${e}%c: ${s.size} Processed blob "${c}"`,n,"")}),window.postMessage({source:"blue-marble",endpoint:r,blobID:c,blobData:i,blink:t})}).catch(i=>{const o=Date.now();console.error(`%c${e}%c: Failed to Promise blob!`,n,""),console.groupCollapsed(`%c${e}%c: Details of failed blob Promise:`,n,""),console.log(`Endpoint: ${r}\nThere are ${s.size} blobs processing...\nBlink: ${t.toLocaleString()}\nTime Since Blink: ${String(Math.floor(o/6e4)).padStart(2,"0")}:${String(Math.floor(o/1e3)%60).padStart(2,"0")}.${String(o%1e3).padStart(3,"0")} MM:SS.mmm`),console.error("Exception stack:",i),console.groupEnd()})}return o}});var h=GM_getResourceText("CSS-BM-File");GM_addStyle(h);var m=document.createElement("link");m.href="https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap",m.rel="preload",m.as="style",m.onload=function(){this.onload=null,this.rel="stylesheet"},document.head.appendChild(m),new class{constructor(){this.h=null,this.m=null,this.u="#bm-9"}p(t){return this.m=t,this.h=new MutationObserver(t=>{for(const e of t)for(const t of e.addedNodes)t instanceof HTMLElement&&t.matches?.(this.u)}),this}$(){return this.h}observe(t,e=!1,n=!1){t.observe(this.m,{childList:e,subtree:n})}};var d=new class{constructor(e,n){o(this,t),this.name=e,this.version=n,this.v=null,this.M="bm-e",this.t=null,this.i=null,this.o=[]}S(t){this.v=t}C(){return this.o.length>0&&(this.i=this.o.pop()),this}k(t){t.appendChild(this.t),this.t=null,this.i=null,this.o=[]}D(n={},s=()=>{}){return s(this,a(this,t,e).call(this,"div",{},n)),this}T(n={},s=()=>{}){return s(this,a(this,t,e).call(this,"p",{},n)),this}I(n={},s=()=>{}){return s(this,a(this,t,e).call(this,"small",{},n)),this}N(n={},s=()=>{}){return s(this,a(this,t,e).call(this,"img",{},n)),this}B(n,s={},i=()=>{}){return i(this,a(this,t,e).call(this,"h"+n,{},s)),this}O(n={},s=()=>{}){return s(this,a(this,t,e).call(this,"hr",{},n)),this}P(n={},s=()=>{}){return s(this,a(this,t,e).call(this,"br",{},n)),this}H(n={},s=()=>{}){const i=a(this,t,e).call(this,"label",{textContent:n.textContent??""});delete n.textContent;const o=a(this,t,e).call(this,"input",{type:"checkbox"},n);return i.insertBefore(o,i.firstChild),this.C(),s(this,i,o),this}L(n={},s=()=>{}){return s(this,a(this,t,e).call(this,"button",{},n)),this}R(n={},s=()=>{}){const i=n.title??n.textContent??"Help: No info";delete n.textContent,n.title=`Help: ${i}`;const o={textContent:"?",className:"bm-t",onclick:()=>{this.Y(this.M,i)}};return s(this,a(this,t,e).call(this,"button",o,n)),this}q(n={},s=()=>{}){return s(this,a(this,t,e).call(this,"input",{},n)),this}G(n={},s=()=>{}){const i=n.textContent??"";delete n.textContent;const o=a(this,t,e).call(this,"div"),r=a(this,t,e).call(this,"input",{type:"file",style:"display: none;"},n);this.C();const c=a(this,t,e).call(this,"button",{textContent:i});return this.C(),this.C(),c.addEventListener("click",()=>{r.click()}),r.addEventListener("change",()=>{c.style.maxWidth=`${c.offsetWidth}px`,r.files.length>0?c.textContent=r.files[0].name:c.textContent=i}),s(this,o,r,c),this}X(n={},s=()=>{}){return s(this,a(this,t,e).call(this,"textarea",{},n)),this}Y(t,e,n=!1){const s=document.getElementById(t.replace(/^#/,""));s&&(s instanceof HTMLInputElement?s.value=e:n?s.textContent=e:s.innerHTML=e)}_(t,e){let n,s=!1,i=0;t=document.querySelector("#"==t?.[0]?t:"#"+t),e=document.querySelector("#"==e?.[0]?e:"#"+e),t&&e?(e.addEventListener("mousedown",function(o){s=!0,n=o.clientX-t.getBoundingClientRect().left,i=o.clientY-t.getBoundingClientRect().top,document.body.style.userSelect="none",e.classList.add("dragging")}),e.addEventListener("touchstart",function(o){s=!0;const a=o?.touches?.[0];a&&(n=a.clientX-t.getBoundingClientRect().left,i=a.clientY-t.getBoundingClientRect().top,document.body.style.userSelect="none",e.classList.add("dragging"))},{passive:!1}),document.addEventListener("mousemove",function(e){s&&(t.style.left=e.clientX-n+"px",t.style.top=e.clientY-i+"px",t.style.right="")}),document.addEventListener("touchmove",function(e){if(s){const s=e?.touches?.[0];if(!s)return;t.style.left=s.clientX-n+"px",t.style.top=s.clientY-i+"px",e.preventDefault()}},{passive:!1}),document.addEventListener("mouseup",function(){s=!1,document.body.style.userSelect="",e.classList.remove("dragging")}),document.addEventListener("touchend",function(){s=!1,document.body.style.userSelect="",e.classList.remove("dragging")}),document.addEventListener("touchcancel",function(){s=!1,document.body.style.userSelect="",e.classList.remove("dragging")})):this.F(`Can not drag! ${t?"":"moveMe"} ${t||e?"":"and "}${e?"":"iMoveThings "}was not found!`)}W(t){(0,console.info)(`${this.name}: ${t}`),this.Y(this.M,"Status: "+t,!0)}F(t){(0,console.error)(`${this.name}: ${t}`),this.Y(this.M,"Error: "+t,!0)}}(c,l),u=new class{constructor(t,e){o(this,n),this.name=t,this.version=e,this.j="1.0.0",this.V=null,this.A="!#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[]^_`abcdefghijklmnopqrstuvwxyz{|}~",this.J=null,this.U=null,this.Z="bm-r",this.K="div#map canvas.maplibregl-canvas",this.tt=null,this.et="",this.templates=null}nt(){if(document.body.contains(this.J))return this.J;document.getElementById(this.Z)?.remove();const t=document.querySelector(this.K),e=document.createElement("canvas");return e.id=this.Z,e.className="maplibregl-canvas",e.style.position="absolute",e.style.top="0",e.style.left="0",e.style.height=t?.clientHeight*(window.devicePixelRatio||1)+"px",e.style.width=t?.clientWidth*(window.devicePixelRatio||1)+"px",e.height=t?.clientHeight*(window.devicePixelRatio||1),e.width=t?.clientWidth*(window.devicePixelRatio||1),e.style.zIndex="8999",e.style.pointerEvents="none",t?.parentElement?.appendChild(e),this.J=e,window.addEventListener("move",this.st),window.addEventListener("zoom",this.it),window.addEventListener("resize",this.ot),this.J}async rt(){return{whoami:this.name.replace(" ",""),scriptVersion:this.version,schemaVersion:this.j,templates:{}}}async ct(t,e,i){this.templates||(this.templates=await this.rt()),console.log("Awaiting creation..."),this.templates.templates[`${this.templates.templates.length||0} ${r(this.V||0,this.A)}`]={name:e,tiles:await a(this,n,s).call(this,t,i,1e3)},console.log(this.templates)}lt(){}ht(){}dt(){}ut(t){this.tt=t,this.et="file"}async bt(t,e=[0,0,0,0]){if("file"!=this.et&&"template"!=this.et)return;const n=3e3;e=e?.length?e:[0,0,0,0],console.log(this.tt);const s="template"==this.et?this.tt:await createImageBitmap(await this.ft(this.tt)),i=await createImageBitmap(t),o=new OffscreenCanvas(n,n),a=o.getContext("2d");a.imageSmoothingEnabled=!1,a.beginPath(),a.rect(0,0,n,n),a.clip(),a.clearRect(0,0,n,n),a.drawImage(i,0,0,n,n),a.drawImage(s,3*e[2],3*e[3]);const r=await o.convertToBlob({type:"image/png"});return"template"!=this.et&&(this.tt=s,this.et="template"),r}async ft(t,e=3,n="image/png"){const s=await createImageBitmap(t);e|=1;const i=s.width*Math.round(e),o=s.height*Math.round(e),a=document.createElement("canvas");a.width=i,a.height=o;const r=a.getContext("2d");r.imageSmoothingEnabled=!1,r.drawImage(s,0,0,i,o);const c=r.getImageData(0,0,i,o);for(let t=0;t{a.toBlob(t,n)})}}(c,l),p=new class{constructor(t){this.gt=t,this.wt=!1,this.$t=[],this.vt=[]}yt(t){window.addEventListener("message",async e=>{const n=e.data,s=n.jsonData;if(!n||"blue-marble"!==n.source)return;if(!n.endpoint)return;const i=n.endpoint?.split("?")[0].split("/").filter(t=>t&&isNaN(Number(t))).filter(t=>t&&!t.includes(".")).pop();switch(console.log(`%cBlue Marble%c: Recieved message about "${i}"`,"color: cornflowerblue;",""),i){case"me":if(s.status&&"2"!=s.status?.toString()[0])return void t.F("You are not logged in!\nCould not fetch userdata.");const e=Math.ceil(Math.pow(Math.floor(s.level)*Math.pow(30,.65),1/.65)-s.pixelsPainted);console.log(s.id),(s.id||0===s.id)&&console.log(r(s.id,"!#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[]^_`abcdefghijklmnopqrstuvwxyz{|}~")),this.gt.V=s.id,t.Y("bm-j",`Username: ${function(t){const e=document.createElement("div");return e.textContent=t,e.innerHTML}(s.name)}`),t.Y("bm-f",`Droplets: ${(new Intl.NumberFormat).format(s.droplets)}`),t.Y("bm-a",`Next level in ${(new Intl.NumberFormat).format(e)} pixel${1==e?"":"s"}`);break;case"pixel":const i=n.endpoint.split("?")[0].split("/").filter(t=>t&&!isNaN(Number(t))),c=new URLSearchParams(n.endpoint.split("?")[1]),l=[c.get("x"),c.get("y")];if(this.$t.length&&(!i.length||!l.length))return void t.F("Coordinates are malformed!\nDid you try clicking the canvas first?");this.$t=[...i,...l];const h=(o=i,a=l,[parseInt(o[0])%4*1e3+parseInt(a[0]),parseInt(o[1])%4*1e3+parseInt(a[1])]),m=document.querySelectorAll("span");for(const t of m)if(t.textContent.trim().includes(`${h[0]}, ${h[1]}`)){let e=document.querySelector("#bm-9");const n=`(Tl X: ${i[0]}, Tl Y: ${i[1]}, Px X: ${l[0]}, Px Y: ${l[1]})`;e?e.textContent=n:(e=document.createElement("span"),e.id="bm-9",e.textContent=n,e.style="margin-left: calc(var(--spacing)*3); font-size: small;",t.parentNode.parentNode.parentNode.insertAdjacentElement("afterend",e))}break;case"tiles":let d=n.endpoint.split("/");d=[parseInt(d[d.length-2]),parseInt(d[d.length-1].replace(".png",""))];const u=n.blobID,p=n.blobData;let b=p;this.vt?.length>=4&&d[0]==this.vt[0]&&d[1]==this.vt[1]&&(console.log(`templateState: ${this.gt.et||null}`),b=this.gt.et?await this.gt.bt(p,this.vt):p),window.postMessage({source:"blue-marble",blobID:u,blobData:b,blink:n.blink});break;case"robots":this.wt="false"==s.userscript?.toString().toLowerCase();break}var o,a})}}(u);d.S(p),d.D({id:"bm-p",style:"top: 10px; right: 75px;"}).D({id:"bm-b"}).D({id:"bm-k"}).C().N({alt:"Blue Marble Icon",src:"https://raw.githubusercontent.com/SwingTheVine/Wplace-BlueMarble/main/dist/assets/Favicon.png"}).C().B(1,{textContent:c}).C().C().O().C().D({id:"bm-4"}).T({id:"bm-j",textContent:"Username:"}).C().T({id:"bm-f",textContent:"Droplets:"}).C().T({id:"bm-a",textContent:"Next level in..."}).C().C().O().C().D({id:"bm-3"}).H({id:"bm-g",textContent:"Stealth",checked:!0}).C().R({title:"Waits for the website to make requests, instead of sending requests."}).C().P().C().H({id:"bm-6",textContent:"Possessed",checked:!0}).C().R({title:"Controls the website as if it were possessed."}).C().P().C().D({id:"bm-c"}).L({id:"bm-h",className:"bm-t",style:"margin-top: 0;",innerHTML:''},(t,e)=>{e.onclick=()=>{const e=t.v?.$t;e?.[0]?(t.Y("bm-l",e?.[0]||""),t.Y("bm-m",e?.[1]||""),t.Y("bm-n",e?.[2]||""),t.Y("bm-o",e?.[3]||"")):t.F("Coordinates are malformed! Did you try clicking on the canvas first?")}}).C().q({type:"number",id:"bm-l",placeholder:"Tl X",min:0,max:2047,step:1,required:!0}).C().q({type:"number",id:"bm-m",placeholder:"Tl Y",min:0,max:2047,step:1,required:!0}).C().q({type:"number",id:"bm-n",placeholder:"Px X",min:0,max:2047,step:1,required:!0}).C().q({type:"number",id:"bm-o",placeholder:"Px Y",min:0,max:2047,step:1,required:!0}).C().C().G({id:"bm-2",textContent:"Upload Template",accept:"image/png, image/jpeg, image/webp, image/bmp, image/gif"}).C().D({id:"bm-0"}).L({id:"bm-i",textContent:"Enable"},(t,e)=>{e.onclick=()=>{const e=document.querySelector("#bm-2"),n=document.querySelector("#bm-l");if(!n.checkValidity())return n.reportValidity(),void t.F("Coordinates are malformed! Did you try clicking on the canvas first?");const s=document.querySelector("#bm-m");if(!s.checkValidity())return s.reportValidity(),void t.F("Coordinates are malformed! Did you try clicking on the canvas first?");const i=document.querySelector("#bm-n");if(!i.checkValidity())return i.reportValidity(),void t.F("Coordinates are malformed! Did you try clicking on the canvas first?");const o=document.querySelector("#bm-o");if(!o.checkValidity())return o.reportValidity(),void t.F("Coordinates are malformed! Did you try clicking on the canvas first?");e?.files[0]?(u.ct(e.files[0],e.files[0]?.name.replace(/\.[^/.]+$/,""),[Number(n.value),Number(s.value),Number(i.value),Number(o.value)]),t.W("Drew to canvas!")):t.F("No file selected!")}}).C().L({id:"bm-d",textContent:"Disable"}).C().C().X({id:d.M,placeholder:`Status: Sleeping...\nVersion: ${l}`,readOnly:!0}).C().D({id:"bm-1"}).D().L({id:"bm-7",className:"bm-t",textContent:"✈"}).C().L({id:"bm-8",className:"bm-t",innerHTML:''}).C().L({id:"bm-5",className:"bm-t",innerHTML:"🖌"}).C().L({id:"bm-K",className:"bm-t",innerHTML:"🎨"},(t,e)=>{e.addEventListener("click",()=>{window.open("https://pepoafonso.github.io/color_converter_wplace/","_blank","noopener noreferrer")})}).C().C().I({textContent:"Made by SwingTheVine",style:"margin-top: auto;"}).C().C().C().k(document.body),d._("#bm-p","#bm-k"),p.yt(d),function(...t){(0,console.log)(...t)}(`%c${c}%c (${l}) userscript has loaded!`,"color: cornflowerblue;","")})(); \ No newline at end of file diff --git a/docs/README.md b/docs/README.md index 261807f..f1637cf 100644 --- a/docs/README.md +++ b/docs/README.md @@ -35,7 +35,7 @@ Software License: MPL-2.0 Contact Me WakaTime -Total Patches +Total Patches Total Lines of Code Total Comments Compression @@ -44,7 +44,7 @@

Overview

- Welcome to Blue Marble! Blue Marble is a userscript for the website wplace.live. + Welcome to Blue Marble! Blue Marble is a userscript for the website wplace.live. If you like this userscript, please ⭐ the repository!

Installation Instructions

Supported Browsers diff --git a/package-lock.json b/package-lock.json index d638ba9..aeb4ad8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "wplace-bluemarble", - "version": "0.64.12", + "version": "0.65.41", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "wplace-bluemarble", - "version": "0.64.12", + "version": "0.65.41", "devDependencies": { "esbuild": "^0.25.0", "terser": "^5.43.1" diff --git a/package.json b/package.json index 7640ba9..1b5216d 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "wplace-bluemarble", - "version": "0.65.0", + "version": "0.65.41", "type": "module", "scripts": { "build": "node build/build.js", diff --git a/src/BlueMarble.meta.js b/src/BlueMarble.meta.js index 2a7bc7d..6aebe41 100644 --- a/src/BlueMarble.meta.js +++ b/src/BlueMarble.meta.js @@ -1,7 +1,7 @@ // ==UserScript== // @name Blue Marble // @namespace https://github.com/SwingTheVine/ -// @version 0.65.0 +// @version 0.65.41 // @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 diff --git a/src/apiManager.js b/src/apiManager.js index 71f353b..23eb7f0 100644 --- a/src/apiManager.js +++ b/src/apiManager.js @@ -4,7 +4,7 @@ */ import TemplateManager from "./templateManager.js"; -import { escapeHTML, serverTPtoDisplayTP } from "./utils.js"; +import { escapeHTML, numberToEncoded, serverTPtoDisplayTP } from "./utils.js"; export default class ApiManager { @@ -62,6 +62,15 @@ export default class ApiManager { } const nextLevelPixels = Math.ceil(Math.pow(Math.floor(dataJSON['level']) * Math.pow(30, 0.65), (1/0.65)) - dataJSON['pixelsPainted']); // Calculates pixels to the next level + + console.log(dataJSON['id']); + if (!!dataJSON['id'] || dataJSON['id'] === 0) { + console.log(numberToEncoded( + dataJSON['id'], + '!#$%&\'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[]^_`abcdefghijklmnopqrstuvwxyz{|}~' + )); + } + this.templateManager.userID = dataJSON['id']; overlay.updateInnerHTML('bm-user-name', `Username: ${escapeHTML(dataJSON['name'])}`); // Updates the text content of the username field overlay.updateInnerHTML('bm-user-droplets', `Droplets: ${new Intl.NumberFormat().format(dataJSON['droplets'])}`); // Updates the text content of the droplets field diff --git a/src/main.js b/src/main.js index 6eb173b..a406600 100644 --- a/src/main.js +++ b/src/main.js @@ -165,7 +165,7 @@ document.head.appendChild(stylesheetLink); // CONSTRUCTORS const observers = new Observers(); // Constructs a new Observers object const overlay = new Overlay(name, version); // Constructs a new Overlay object -const templateManager = new TemplateManager(); // Constructs a new TemplateManager object +const templateManager = new TemplateManager(name, version); // Constructs a new TemplateManager object const apiManager = new ApiManager(templateManager); // Constructs a new ApiManager object overlay.setApiManager(apiManager); // Sets the API manager @@ -223,10 +223,10 @@ function buildOverlayMain() { } } ).buildElement() - .addInput({'type': 'number', 'id': 'bm-input-tx', 'placeholder': 'Tl X', 'min': 0, 'max': 2047, 'step': 1}).buildElement() - .addInput({'type': 'number', 'id': 'bm-input-ty', 'placeholder': 'Tl Y', 'min': 0, 'max': 2047, 'step': 1}).buildElement() - .addInput({'type': 'number', 'id': 'bm-input-px', 'placeholder': 'Px X', 'min': 0, 'max': 2047, 'step': 1}).buildElement() - .addInput({'type': 'number', 'id': 'bm-input-py', 'placeholder': 'Px Y', 'min': 0, 'max': 2047, 'step': 1}).buildElement() + .addInput({'type': 'number', 'id': 'bm-input-tx', 'placeholder': 'Tl X', 'min': 0, 'max': 2047, 'step': 1, 'required': true}).buildElement() + .addInput({'type': 'number', 'id': 'bm-input-ty', 'placeholder': 'Tl Y', 'min': 0, 'max': 2047, 'step': 1, 'required': true}).buildElement() + .addInput({'type': 'number', 'id': 'bm-input-px', 'placeholder': 'Px X', 'min': 0, 'max': 2047, 'step': 1, 'required': true}).buildElement() + .addInput({'type': 'number', 'id': 'bm-input-py', 'placeholder': 'Px Y', 'min': 0, 'max': 2047, 'step': 1, 'required': true}).buildElement() .buildElement() .addInputFile({'id': 'bm-input-file-template', 'textContent': 'Upload Template', 'accept': 'image/png, image/jpeg, image/webp, image/bmp, image/gif'}).buildElement() .addDiv({'id': 'bm-contain-buttons-template'}) @@ -234,13 +234,24 @@ function buildOverlayMain() { button.onclick = () => { const input = document.querySelector('#bm-input-file-template'); + const coordTlX = document.querySelector('#bm-input-tx'); + if (!coordTlX.checkValidity()) {coordTlX.reportValidity(); instance.handleDisplayError('Coordinates are malformed! Did you try clicking on the canvas first?'); return;} + const coordTlY = document.querySelector('#bm-input-ty'); + if (!coordTlY.checkValidity()) {coordTlY.reportValidity(); instance.handleDisplayError('Coordinates are malformed! Did you try clicking on the canvas first?'); return;} + const coordPxX = document.querySelector('#bm-input-px'); + if (!coordPxX.checkValidity()) {coordPxX.reportValidity(); instance.handleDisplayError('Coordinates are malformed! Did you try clicking on the canvas first?'); return;} + const coordPxY = document.querySelector('#bm-input-py'); + if (!coordPxY.checkValidity()) {coordPxY.reportValidity(); instance.handleDisplayError('Coordinates are malformed! Did you try clicking on the canvas first?'); return;} + // Kills itself if there is no file if (!input?.files[0]) {instance.handleDisplayError(`No file selected!`); return;} - console.log(`TCoords: ${apiManager.templateCoordsTilePixel}\nCoords: ${apiManager.coordsTilePixel}`); - apiManager.templateCoordsTilePixel = apiManager.coordsTilePixel; // Update template coords - console.log(`TCoords: ${apiManager.templateCoordsTilePixel}\nCoords: ${apiManager.coordsTilePixel}`); - templateManager.setTemplateImage(input.files[0]); + templateManager.createTemplate(input.files[0], input.files[0]?.name.replace(/\.[^/.]+$/, ''), [Number(coordTlX.value), Number(coordTlY.value), Number(coordPxX.value), Number(coordPxY.value)]); + + // console.log(`TCoords: ${apiManager.templateCoordsTilePixel}\nCoords: ${apiManager.coordsTilePixel}`); + // apiManager.templateCoordsTilePixel = apiManager.coordsTilePixel; // Update template coords + // console.log(`TCoords: ${apiManager.templateCoordsTilePixel}\nCoords: ${apiManager.coordsTilePixel}`); + // templateManager.setTemplateImage(input.files[0]); instance.handleDisplayStatus(`Drew to canvas!`); } @@ -253,6 +264,12 @@ function buildOverlayMain() { .addButton({'id': 'bm-button-teleport', 'className': 'bm-help', 'textContent': '✈'}).buildElement() .addButton({'id': 'bm-button-favorite', 'className': 'bm-help', 'innerHTML': ''}).buildElement() .addButton({'id': 'bm-button-templates', 'className': 'bm-help', 'innerHTML': '🖌'}).buildElement() + .addButton({'id': 'bm-button-convert', 'className': 'bm-help', 'innerHTML': '🎨'}, + (instance, button) => { + button.addEventListener('click', () => { + window.open('https://pepoafonso.github.io/color_converter_wplace/', '_blank', 'noopener noreferrer'); + }); + }).buildElement() .buildElement() .addSmall({'textContent': 'Made by SwingTheVine', 'style': 'margin-top: auto;'}).buildElement() .buildElement() diff --git a/src/templateManager.js b/src/templateManager.js index e01820a..9e16399 100644 --- a/src/templateManager.js +++ b/src/templateManager.js @@ -1,28 +1,56 @@ +import { numberToEncoded } from "./utils"; + /** Manages the template system. * This class handles all external requests for modification to a Template. * @since 0.55.8 * @example - * // Example of JSON structure for a template -{ - "scriptVersion": "1.13.0", - "schemaVersion": "2.1.0", - "templates": { - "" - } -} + * // JSON structure for a template + * { + * "whoami": "BlueMarble", + * "scriptVersion": "1.13.0", + * "schemaVersion": "2.1.0", + * "templates": { + * "0 $Z": { + * "name": "My Template", + * "enabled": true, + * "tiles": { + * "1231,0047,183,593": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA", + * "1231,0048,183,000": "data:image/png;AAAFCAYAAACNbyblAAAAHElEQVQI12P4" + * } + * }, + * "1 $Z": { + * "name": "My Template", + * "enabled": false, + * "tiles": { + * "375,1846,276,188": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA", + * "376,1846,000,188": "data:image/png;AAAFCAYAAACNbyblAAAAHElEQVQI12P4" + * } + * } + * } + * } */ export default class TemplateManager { /** The constructor for the {@link TemplateManager} class. * @since 0.55.8 */ - constructor() { + constructor(name, version) { + + // Meta + this.name = name; // Name of userscript + this.version = version; // Version of userscript + this.templatesVersion = '1.0.0'; // Version of JSON schema + this.userID = null; // The ID of the current user + this.encodingBase = '!#$%&\'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[]^_`abcdefghijklmnopqrstuvwxyz{|}~'; // Characters to use for encoding/decoding + + // Template this.canvasTemplate = null; // Our canvas this.canvasTemplateZoomed = null; // The template when zoomed out this.canvasTemplateID = 'bm-canvas'; // Our canvas ID this.canvasMainID = 'div#map canvas.maplibregl-canvas'; // The selector for the main canvas this.template = null; // The template image. this.templateState = ''; // The state of the template ('blob', 'proccessing', 'template', etc.) + this.templates = null; // All templates currently loaded (JSON) } /** Retrieves the pixel art canvas. @@ -65,18 +93,177 @@ export default class TemplateManager { return this.canvasTemplate; // Return the new canvas } - createTemplate() { + /** Creates the JSON object to store templates in + * @returns {{ whoami: string, scriptVersion: string, schemaVersion: string, templates: Object }} The JSON object + * @since 0.65.4 + */ + async createJSON() { + return { + "whoami": this.name.replace(' ', ''), // Name of userscript without spaces + "scriptVersion": this.version, // Version of userscript + "schemaVersion": this.templatesVersion, // Version of JSON schema + "templates": {} // The templates + }; + } + + /** Creates the template from the inputed file blob + * @param {File} blob - The file blob to create a template from + * @param {string} name - The display name of the template + * @param {Array} coords - The coordinates of the top left corner of the template + */ + async createTemplate(blob, name, coords) { + + // Creates the JSON object if it does not already exist + if (!this.templates) {this.templates = await this.createJSON();} + + const tileSize = 1000; // The size of a tile in pixels + + console.log(`Awaiting creation...`); + + // Appends a child into the templates object + // The child's name is the number of templates already in the list (sort order) plus the encoded player ID + this.templates.templates[`${this.templates.templates.length || 0} ${numberToEncoded(this.userID || 0, this.encodingBase)}`] = { + "name": name, // Display name of template + "tiles": await this.#createTemplateTiles(blob, coords, tileSize) + }; + + console.log(this.templates); + } + + /** Creates chunks of the template for each tile. + * @param {File} blob - The File blob to process + * @param {Array} coords - The coordinates of the top left corner of the template + * @param {number} tileSize - The size of a tile (assumes tiles are square) + * @returns {Object} Collection of template bitmaps in a Object + * @since 0.65.4 + */ + async #createTemplateTiles(blob, coords, tileSize) { + + console.log(coords); + + const shreadSize = 3; // Scale image factor. Must be odd + const bitmap = await createImageBitmap(blob); // Creates a bitmap image + const imageWidth = bitmap.width; + const imageHeight = bitmap.height; + + const templateTiles = {}; // Holds the template tiles + + const canvas = new OffscreenCanvas(tileSize, tileSize); + const context = canvas.getContext('2d', { willReadFrequently: true }); + + // For every tile... + for (let pixelY = coords[3]; pixelY < (imageHeight + coords[3]);) { + + // Draws the partial tile first, if any + // This calculates the size based on which is smaller: + // A. The top left corner of the current tile to the bottom right corner of the current tile + // B. The top left corner of the current tile to the bottom right corner of the image + const drawSizeY = Math.min(tileSize - (pixelY % tileSize), imageHeight - ((pixelY - coords[3]) * (pixelY != coords[3]))); + console.log(`Math.min(${tileSize} - (${pixelY} % ${tileSize}), ${imageHeight} - (${pixelY - coords[3]} * (${pixelY} != ${coords[3]})))`); + + for (let pixelX = coords[2]; pixelX < (imageWidth + coords[2]);) { + console.log(`Pixel X: ${pixelX}\nPixel Y: ${pixelY}`); + + // Draws the partial tile first, if any + // This calculates the size based on which is smaller: + // A. The top left corner of the current tile to the bottom right corner of the current tile + // B. The top left corner of the current tile to the bottom right corner of the image + const drawSizeX = Math.min(tileSize - (pixelX % tileSize), imageWidth - ((pixelX - coords[2]) * (pixelX != coords[2]))); + console.log(`Math.min(${tileSize} - (${pixelX} % ${tileSize}), ${imageWidth} - (${pixelX} * (${pixelX} != ${coords[2]})))`); + + console.log(`Draw Size X: ${drawSizeX}\nDraw Size Y: ${drawSizeY}`); + + console.log(`Draw X: ${drawSizeX}\nDraw Y: ${drawSizeY}\nCanvas Width: ${drawSizeX * shreadSize}\nCanvas Height: ${drawSizeY * shreadSize}`); + + // Change the canvas size and wipe the canvas + canvas.width = drawSizeX * shreadSize; + canvas.height = drawSizeY * shreadSize; + + console.log(`Getting X ${pixelX}-${pixelX + drawSizeX}\nGetting Y ${pixelY}-${pixelY + drawSizeY}`); + + // Draws the template segment on this tile segment + context.clearRect(0, 0, drawSizeX * shreadSize, drawSizeY * shreadSize); // Clear any previous drawing (only runs when canvas size does not change) + context.drawImage(bitmap, pixelX, pixelY, drawSizeX, drawSizeY, 0, 0, drawSizeX * shreadSize, drawSizeY * shreadSize); // Coordinates and size of draw area of source image, then canvas + + const imageData = context.getImageData(0, 0, drawSizeX * shreadSize, drawSizeY * shreadSize); // Data of the image on the canvas + + for (let y = 0; y < drawSizeY * shreadSize; y++) { + for (let x = 0; x < drawSizeX * shreadSize; x++) { + // For every pixel... + + // ... Make it transparent unless it is the "center" + if ((x % shreadSize !== 1) || (y % shreadSize !== 1)) { + const pixelIndex = (y * drawSizeX + x) * 4; // Find the pixel index in an array where every 4 indexes are 1 pixel + imageData.data[pixelIndex + 3] = 0; // Make the pixel transparent on the alpha channel + } + } + } + + console.log(`Shreaded pixels for ${pixelX}, ${pixelY}`, imageData); + + context.putImageData(imageData, 0, 0); + templateTiles[`${(coords[0] + Math.floor(pixelX / 1000)).toString().padStart(4, '0')},${(coords[1] + Math.floor(pixelY / 1000)).toString().padStart(4, '0')},${(pixelX % 1000).toString().padStart(3, '0')},${(pixelY % 1000).toString().padStart(3, '0')}`] = await canvas.convertToBlob({ type: 'image/png' }); + + console.log(templateTiles); + + pixelX += drawSizeX; + } + + pixelY += drawSizeY; + } + + console.log('Template Tiles: ', templateTiles); + return templateTiles; + } + + /** Creates an image from a blob File + * @param {File} blob - The blob to convert to an Image + * @returns {Image} The image of the blob as an Image + * @since 0.65.4 + */ + #loadImageFromBlob(blob) { + return new Promise((resolve, reject) => { + const image = new Image(); // Create a blank image + image.onload = () => resolve(image); // When the blank image loads, populate it with the blob + image.onerror = reject; // Return the error, if any + image.src = URL.createObjectURL(blob); + }); + } + + /** Generates a {@link Template} class instance from the JSON object template + * + */ + #loadTemplate() { } + /** Deletes a template from the JSON object. + * Also delete's the corrosponding {@link Template} class instance + * + */ deleteTemplate() { } + /** Draws all templates on that tile + * + */ drawTemplateOnTile() { } + importJSON() { + + } + + #parseBlueMarble() { + + } + + #parseOSU() { + + } + /** Sets the template to the image passed in. * @param {File} file - The file of the template image. * @since 0.55.8 diff --git a/src/utils.js b/src/utils.js index 0bb1e70..7de0c89 100644 --- a/src/utils.js +++ b/src/utils.js @@ -70,4 +70,32 @@ export function consoleError(...args) {((consoleError) => consoleError(...args)) * @param {...any} args - Arguments to be passed into the `warn()` function of the Console * @since 0.58.13 */ -export function consoleWarn(...args) {((consoleWarn) => consoleWarn(...args))(console.warn);} \ No newline at end of file +export function consoleWarn(...args) {((consoleWarn) => consoleWarn(...args))(console.warn);} + +/** Encodes a number into a custom encoded string. + * @param {number} number - The number to encode + * @param {string} encoding - The characters to use when encoding + * @since 0.65.2 + * @returns {string} Encoded string + * @example + * const encode = '012abcABC'; // Base 9 + * console.log(numberToEncoded(0, encode)); // 0 + * console.log(numberToEncoded(5, encode)); // c + * console.log(numberToEncoded(15, encode)); // 1A + * console.log(numberToEncoded(12345, encode)); // 1BCaA + */ +export function numberToEncoded(number, encoding) { + + if (number === 0) return encoding[0]; // End quickly if number equals 0. No special calculation needed + + let result = ''; // The encoded string + const base = encoding.length; // The number of characters used, which determines the base + + // Base conversion algorithm + while (number > 0) { + result = encoding[number % base] + result; // Find's the character's encoded value determined by the modulo of the base + number = Math.floor(number / base); // Divides the number by the base so the next iteration can find the next modulo character + } + + return result; // The final encoded string +} \ No newline at end of file