diff --git a/dist/BlueMarble.user.js b/dist/BlueMarble.user.js index 81db46d..77306f4 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.41 +// @version 0.65.51 // @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,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 +(()=>{var t,e,s=t=>{throw TypeError(t)},n=(t,e,n)=>e.has(t)?s("Cannot add the same private member more than once"):e instanceof WeakSet?e.add(t):e.set(t,n),i=(t,e,n)=>(((t,e)=>{e.has(t)||s("Cannot access private method")})(t,e),n);t=new WeakSet,e=function(t,e={},s={}){const n=document.createElement(t);this.t?(this.i.appendChild(n),this.o.push(this.i),this.i=n):(this.t=n,this.i=n);for(const[t,s]of Object.entries(e))n[t]=s;for(const[t,e]of Object.entries(s))n[t]=e;return n};var o,a=class{constructor({displayName:t="My template",l:e=0,h:s="",url:n="",file:i=null,coords:o=null,m:a=null,u:r=1e3}={}){this.displayName=t,this.l=e,this.h=s,this.url=n,this.file=i,this.coords=o,this.m=a,this.u=r}async p(){console.log(this.coords);const t=await createImageBitmap(this.file),e=t.width,s=t.height,n={},i=new OffscreenCanvas(this.u,this.u),o=i.getContext("2d",{$:!0});for(let a=this.coords[3];a0;)s=e[t%n]+s,t=Math.floor(t/n);return s}o=new WeakSet;var c=GM_info.script.name.toString(),l=GM_info.script.version.toString();!function(t){const e=document.createElement("script");e.setAttribute("bm-s",c),e.setAttribute("bm-q","color: cornflowerblue;"),e.textContent=`(${t})();`,document.documentElement.appendChild(e),e.remove()}(()=>{const t=document.currentScript,e=t?.getAttribute("bm-s")||"Blue Marble",s=t?.getAttribute("bm-q")||"",n=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: ${n.size} Recieved IMAGE message about blob "${a}"`,s,""),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`,s,""),console.log(n),console.groupEnd(),"blue-marble"==i&&a&&r&&!o&&n.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}"`,s,""),a.json().then(t=>{window.postMessage({source:"blue-marble",endpoint:r,jsonData:t},"*")}).catch(t=>{console.error(`%c${e}%c: Failed to parse JSON: `,s,"",t)});else if(c.includes("image/")&&!r.includes("openfreemap")){const t=Date.now(),i=await a.blob();return console.log(`%c${e}%c: ${n.size} Sending IMAGE message about endpoint "${r}"`,s,""),new Promise(o=>{const c=crypto.randomUUID();n.set(c,t=>{o(new Response(t,{headers:a.headers,status:a.status,statusText:a.statusText})),n.delete(c),console.log(`%c${e}%c: ${n.size} Processed blob "${c}"`,s,"")}),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!`,s,""),console.groupCollapsed(`%c${e}%c: Details of failed blob Promise:`,s,""),console.log(`Endpoint: ${r}\nThere are ${n.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.v=null,this.M=null,this.S="#bm-9"}C(t){return this.M=t,this.v=new MutationObserver(t=>{for(const e of t)for(const t of e.addedNodes)t instanceof HTMLElement&&t.matches?.(this.S)}),this}D(){return this.v}observe(t,e=!1,s=!1){t.observe(this.M,{childList:e,subtree:s})}};var d=new class{constructor(e,s){n(this,t),this.name=e,this.version=s,this.k=null,this.T="bm-e",this.t=null,this.i=null,this.o=[]}I(t){this.k=t}N(){return this.o.length>0&&(this.i=this.o.pop()),this}B(t){t.appendChild(this.t),this.t=null,this.i=null,this.o=[]}O(s={},n=()=>{}){return n(this,i(this,t,e).call(this,"div",{},s)),this}P(s={},n=()=>{}){return n(this,i(this,t,e).call(this,"p",{},s)),this}H(s={},n=()=>{}){return n(this,i(this,t,e).call(this,"small",{},s)),this}L(s={},n=()=>{}){return n(this,i(this,t,e).call(this,"img",{},s)),this}R(s,n={},o=()=>{}){return o(this,i(this,t,e).call(this,"h"+s,{},n)),this}Y(s={},n=()=>{}){return n(this,i(this,t,e).call(this,"hr",{},s)),this}q(s={},n=()=>{}){return n(this,i(this,t,e).call(this,"br",{},s)),this}G(s={},n=()=>{}){const o=i(this,t,e).call(this,"label",{textContent:s.textContent??""});delete s.textContent;const a=i(this,t,e).call(this,"input",{type:"checkbox"},s);return o.insertBefore(a,o.firstChild),this.N(),n(this,o,a),this}X(s={},n=()=>{}){return n(this,i(this,t,e).call(this,"button",{},s)),this}j(s={},n=()=>{}){const o=s.title??s.textContent??"Help: No info";delete s.textContent,s.title=`Help: ${o}`;const a={textContent:"?",className:"bm-t",onclick:()=>{this._(this.T,o)}};return n(this,i(this,t,e).call(this,"button",a,s)),this}F(s={},n=()=>{}){return n(this,i(this,t,e).call(this,"input",{},s)),this}W(s={},n=()=>{}){const o=s.textContent??"";delete s.textContent;const a=i(this,t,e).call(this,"div"),r=i(this,t,e).call(this,"input",{type:"file",style:"display: none;"},s);this.N();const c=i(this,t,e).call(this,"button",{textContent:o});return this.N(),this.N(),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}),n(this,a,r,c),this}J(s={},n=()=>{}){return n(this,i(this,t,e).call(this,"textarea",{},s)),this}_(t,e,s=!1){const n=document.getElementById(t.replace(/^#/,""));n&&(n instanceof HTMLInputElement?n.value=e:s?n.textContent=e:n.innerHTML=e)}V(t,e){let s,n=!1,i=0;t=document.querySelector("#"==t?.[0]?t:"#"+t),e=document.querySelector("#"==e?.[0]?e:"#"+e),t&&e?(e.addEventListener("mousedown",function(o){n=!0,s=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){n=!0;const a=o?.touches?.[0];a&&(s=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){n&&(t.style.left=e.clientX-s+"px",t.style.top=e.clientY-i+"px",t.style.right="")}),document.addEventListener("touchmove",function(e){if(n){const n=e?.touches?.[0];if(!n)return;t.style.left=n.clientX-s+"px",t.style.top=n.clientY-i+"px",e.preventDefault()}},{passive:!1}),document.addEventListener("mouseup",function(){n=!1,document.body.style.userSelect="",e.classList.remove("dragging")}),document.addEventListener("touchend",function(){n=!1,document.body.style.userSelect="",e.classList.remove("dragging")}),document.addEventListener("touchcancel",function(){n=!1,document.body.style.userSelect="",e.classList.remove("dragging")})):this.A(`Can not drag! ${t?"":"moveMe"} ${t||e?"":"and "}${e?"":"iMoveThings "}was not found!`)}U(t){(0,console.info)(`${this.name}: ${t}`),this._(this.T,"Status: "+t,!0)}A(t){(0,console.error)(`${this.name}: ${t}`),this._(this.T,"Error: "+t,!0)}}(c,l),u=new class{constructor(t,e){n(this,o),this.name=t,this.version=e,this.Z="1.0.0",this.K=null,this.tt="!#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[]^_`abcdefghijklmnopqrstuvwxyz{|}~",this.et=null,this.st=null,this.nt="bm-r",this.it="div#map canvas.maplibregl-canvas",this.ot=null,this.rt="",this.ct=[],this.lt=null}ht(){if(document.body.contains(this.et))return this.et;document.getElementById(this.nt)?.remove();const t=document.querySelector(this.it),e=document.createElement("canvas");return e.id=this.nt,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.et=e,window.addEventListener("move",this.dt),window.addEventListener("zoom",this.ut),window.addEventListener("resize",this.bt),this.et}async ft(){return{whoami:this.name.replace(" ",""),scriptVersion:this.version,schemaVersion:this.Z,templates:{}}}async gt(t,e,s){this.lt||(this.lt=await this.ft(),console.log("Creating JSON...")),console.log("Awaiting creation...");const n=new a({displayName:e,l:Object.keys(this.lt.templates).length||0,h:r(this.K||0,this.tt),file:t,coords:s});n.m=await n.p(1e3),this.lt.templates[`${n.l} ${n.h}`]={name:n.displayName,tiles:n.m},this.ct.push(n),console.log(Object.keys(this.lt.templates).length),console.log(this.lt),console.log(this.ct)}wt(){}$t(){}vt(){}yt(t){this.ot=t,this.rt="file"}async xt(t,e=[0,0,0,0]){if("file"!=this.rt&&"template"!=this.rt)return;const s=3e3;e=e?.length?e:[0,0,0,0],console.log(this.ot);const n="template"==this.rt?this.ot:await createImageBitmap(await this.Mt(this.ot)),i=await createImageBitmap(t),o=new OffscreenCanvas(s,s),a=o.getContext("2d");a.imageSmoothingEnabled=!1,a.beginPath(),a.rect(0,0,s,s),a.clip(),a.clearRect(0,0,s,s),a.drawImage(i,0,0,s,s),a.drawImage(n,3*e[2],3*e[3]);const r=await o.convertToBlob({type:"image/png"});return"template"!=this.rt&&(this.ot=n,this.rt="template"),r}async Mt(t,e=3,s="image/png"){const n=await createImageBitmap(t);e|=1;const i=n.width*Math.round(e),o=n.height*Math.round(e),a=document.createElement("canvas");a.width=i,a.height=o;const r=a.getContext("2d");r.imageSmoothingEnabled=!1,r.drawImage(n,0,0,i,o);const c=r.getImageData(0,0,i,o);for(let t=0;t{a.toBlob(t,s)})}}(c,l),p=new class{constructor(t){this.St=t,this.Ct=!1,this.Dt=[],this.kt=[]}Tt(t){window.addEventListener("message",async e=>{const s=e.data,n=s.jsonData;if(!s||"blue-marble"!==s.source)return;if(!s.endpoint)return;const i=s.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(n.status&&"2"!=n.status?.toString()[0])return void t.A("You are not logged in!\nCould not fetch userdata.");const e=Math.ceil(Math.pow(Math.floor(n.level)*Math.pow(30,.65),1/.65)-n.pixelsPainted);console.log(n.id),(n.id||0===n.id)&&console.log(r(n.id,"!#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[]^_`abcdefghijklmnopqrstuvwxyz{|}~")),this.St.K=n.id,t._("bm-j",`Username: ${function(t){const e=document.createElement("div");return e.textContent=t,e.innerHTML}(n.name)}`),t._("bm-f",`Droplets: ${(new Intl.NumberFormat).format(n.droplets)}`),t._("bm-a",`Next level in ${(new Intl.NumberFormat).format(e)} pixel${1==e?"":"s"}`);break;case"pixel":const i=s.endpoint.split("?")[0].split("/").filter(t=>t&&!isNaN(Number(t))),c=new URLSearchParams(s.endpoint.split("?")[1]),l=[c.get("x"),c.get("y")];if(this.Dt.length&&(!i.length||!l.length))return void t.A("Coordinates are malformed!\nDid you try clicking the canvas first?");this.Dt=[...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 s=`(Tl X: ${i[0]}, Tl Y: ${i[1]}, Px X: ${l[0]}, Px Y: ${l[1]})`;e?e.textContent=s:(e=document.createElement("span"),e.id="bm-9",e.textContent=s,e.style="margin-left: calc(var(--spacing)*3); font-size: small;",t.parentNode.parentNode.parentNode.insertAdjacentElement("afterend",e))}break;case"tiles":let d=s.endpoint.split("/");d=[parseInt(d[d.length-2]),parseInt(d[d.length-1].replace(".png",""))];const u=s.blobID,p=s.blobData;let b=p;this.kt?.length>=4&&d[0]==this.kt[0]&&d[1]==this.kt[1]&&(console.log(`templateState: ${this.St.rt||null}`),b=this.St.rt?await this.St.xt(p,this.kt):p),window.postMessage({source:"blue-marble",blobID:u,blobData:b,blink:s.blink});break;case"robots":this.Ct="false"==n.userscript?.toString().toLowerCase();break}var o,a})}}(u);d.I(p),d.O({id:"bm-p",style:"top: 10px; right: 75px;"}).O({id:"bm-b"}).O({id:"bm-k"}).N().L({alt:"Blue Marble Icon",src:"https://raw.githubusercontent.com/SwingTheVine/Wplace-BlueMarble/main/dist/assets/Favicon.png"}).N().R(1,{textContent:c}).N().N().Y().N().O({id:"bm-4"}).P({id:"bm-j",textContent:"Username:"}).N().P({id:"bm-f",textContent:"Droplets:"}).N().P({id:"bm-a",textContent:"Next level in..."}).N().N().Y().N().O({id:"bm-3"}).G({id:"bm-g",textContent:"Stealth",checked:!0}).N().j({title:"Waits for the website to make requests, instead of sending requests."}).N().q().N().G({id:"bm-6",textContent:"Possessed",checked:!0}).N().j({title:"Controls the website as if it were possessed."}).N().q().N().O({id:"bm-c"}).X({id:"bm-h",className:"bm-t",style:"margin-top: 0;",innerHTML:''},(t,e)=>{e.onclick=()=>{const e=t.k?.Dt;e?.[0]?(t._("bm-l",e?.[0]||""),t._("bm-m",e?.[1]||""),t._("bm-n",e?.[2]||""),t._("bm-o",e?.[3]||"")):t.A("Coordinates are malformed! Did you try clicking on the canvas first?")}}).N().F({type:"number",id:"bm-l",placeholder:"Tl X",min:0,max:2047,step:1,required:!0}).N().F({type:"number",id:"bm-m",placeholder:"Tl Y",min:0,max:2047,step:1,required:!0}).N().F({type:"number",id:"bm-n",placeholder:"Px X",min:0,max:2047,step:1,required:!0}).N().F({type:"number",id:"bm-o",placeholder:"Px Y",min:0,max:2047,step:1,required:!0}).N().N().W({id:"bm-2",textContent:"Upload Template",accept:"image/png, image/jpeg, image/webp, image/bmp, image/gif"}).N().O({id:"bm-0"}).X({id:"bm-i",textContent:"Enable"},(t,e)=>{e.onclick=()=>{const e=document.querySelector("#bm-2"),s=document.querySelector("#bm-l");if(!s.checkValidity())return s.reportValidity(),void t.A("Coordinates are malformed! Did you try clicking on the canvas first?");const n=document.querySelector("#bm-m");if(!n.checkValidity())return n.reportValidity(),void t.A("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.A("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.A("Coordinates are malformed! Did you try clicking on the canvas first?");e?.files[0]?(u.gt(e.files[0],e.files[0]?.name.replace(/\.[^/.]+$/,""),[Number(s.value),Number(n.value),Number(i.value),Number(o.value)]),t.U("Drew to canvas!")):t.A("No file selected!")}}).N().X({id:"bm-d",textContent:"Disable"}).N().N().J({id:d.T,placeholder:`Status: Sleeping...\nVersion: ${l}`,readOnly:!0}).N().O({id:"bm-1"}).O().X({id:"bm-7",className:"bm-t",textContent:"✈"}).N().X({id:"bm-8",className:"bm-t",innerHTML:''}).N().X({id:"bm-5",className:"bm-t",innerHTML:"🖌"}).N().X({id:"bm-K",className:"bm-t",innerHTML:"🎨"},(t,e)=>{e.addEventListener("click",()=>{window.open("https://pepoafonso.github.io/color_converter_wplace/","_blank","noopener noreferrer")})}).N().N().H({textContent:"Made by SwingTheVine",style:"margin-top: auto;"}).N().N().N().B(document.body),d.V("#bm-p","#bm-k"),p.Tt(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 f1637cf..e13c9c4 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 diff --git a/package-lock.json b/package-lock.json index aeb4ad8..207ac05 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "wplace-bluemarble", - "version": "0.65.41", + "version": "0.65.51", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "wplace-bluemarble", - "version": "0.65.41", + "version": "0.65.51", "devDependencies": { "esbuild": "^0.25.0", "terser": "^5.43.1" diff --git a/package.json b/package.json index 1b5216d..15ab67d 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "wplace-bluemarble", - "version": "0.65.41", + "version": "0.65.51", "type": "module", "scripts": { "build": "node build/build.js", diff --git a/src/BlueMarble.meta.js b/src/BlueMarble.meta.js index 6aebe41..8fc35d2 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.41 +// @version 0.65.51 // @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/Template.js b/src/Template.js index 436a0a0..1789416 100644 --- a/src/Template.js +++ b/src/Template.js @@ -5,81 +5,117 @@ export default class Template { /** The constructor for the {@link Template} class. + * @param {Object} [params={}] - Object containing all optional params + * @param {string} [params.displayName='My template'] - The display name of the template + * @param {number} [params.sortID=0] - The sort number of the template + * @param {string} [params.authorID=''] - The user ID of the person who exported the template. This is to prevent sort ID collisions when importing + * @param {string} [params.url=''] - The URL to the image + * @param {File} [params.file=null] - The template file. This can be a pre-processed File, or a processed bitmap + * @param {[number, number, number, number]} [params.coords=null] - The coordinates of the top left corner as (x, y, x, y) + * @param {Object} [params.chunked=null] - The affected chunks of the template, and their template for each chunk + * @param {number} [params.tileSize=1000] - The size of a tile in pixels. Assumes the tile is a square * @since 0.65.2 */ - constructor() { - this.templateName = ''; // The name of the template - this.templateFile = null; // The template file. This can be a pre-processed File, or a processed bitmap - this.templateState = ''; // The state of the template file. This is how you tell if it is a File, bitmap, or nothing - this.templateCoords = null; // The coordinates of the top left corner as (x, y, x, y) - this.templateChunked = null; // The affected chunks of the template, and their template for each chunk + constructor({ + displayName = 'My template', + sortID = 0, + authorID = '', + url = '', + file = null, + coords = null, + chunked = null, + tileSize = 1000 + } = {}) { + this.displayName = displayName; + this.sortID = sortID; + this.authorID = authorID; + this.url = url; + this.file = file; + this.coords = coords; + this.chunked = chunked; + this.tileSize = tileSize; } - /** Sets the template to the image passed in. - * @param {File} file - The file of the template image. - * @since 0.65.2 + /** Creates chunks of the template for each tile. + * @returns {Object} Collection of template bitmaps in a Object + * @since 0.65.4 */ - setTemplateImage(file) { + async createTemplateTiles() { - this.templateName = file.name.replace(/\.[^/.]+$/, ''); // "foo.bar.png" -> "foo.bar" - this.template = file; // Overrides The previous template image/bitmap with the new image - this.templateState = 'file'; // Indicates that the template is now an image (not a bitmap) + console.log(this.coords); - // const url = URL.createObjectURL(file); // Creates a blob URL - // window.open(url, '_blank'); // Opens a new tab with blob - // setTimeout(() => URL.revokeObjectURL(url), 10000); // Destroys the blob 10 seconds later - } + const shreadSize = 3; // Scale image factor. Must be odd + const bitmap = await createImageBitmap(this.file); // Creates a bitmap image from the uploaded file + const imageWidth = bitmap.width; + const imageHeight = bitmap.height; - /** Draws the template on the tile. Returns the tile plus the overlay. - * @param {File|Blob} tileBlob - The blob of the tile - * @param {Array} [coordsTilePixel=[0,0,0,0]] - A number array of the four coordinates - * @returns {File|Blob} A image/png blob file - * @since 0.63.59 - */ - async drawTemplate(tileBlob, coordsTilePixel=[0, 0, 0, 0]) { + const templateTiles = {}; // Holds the template tiles - // Only continue if template state is NOT 'file' NOR 'template' - if (!((this.templateState == 'file') || (this.templateState == 'template'))) {return;} + const canvas = new OffscreenCanvas(this.tileSize, this.tileSize); + const context = canvas.getContext('2d', { willReadFrequently: true }); - const tileSize = 1000; // Pixels in a tile - const drawMult = 3; // Multiplier of draw size - const drawSize = tileSize * drawMult; // Draw multiplier + // For every tile... + for (let pixelY = this.coords[3]; pixelY < (imageHeight + this.coords[3]);) { - coordsTilePixel = !!coordsTilePixel?.length ? coordsTilePixel : [0, 0, 0, 0]; // Set to default if [] passed in - - console.log(this.template); - // If the template has already been drawn, don't draw it again - const templateBitmap = this.templateState == 'template' ? this.template : await createImageBitmap(await this.shreadBlob(this.template)); - const tileBitmap = await createImageBitmap(tileBlob); + // 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(this.tileSize - (pixelY % this.tileSize), imageHeight - ((pixelY - this.coords[3]) * (pixelY != this.coords[3]))); + console.log(`Math.min(${this.tileSize} - (${pixelY} % ${this.tileSize}), ${imageHeight} - (${pixelY - this.coords[3]} * (${pixelY} != ${this.coords[3]})))`); - const canvas = new OffscreenCanvas(drawSize, drawSize); - const context = canvas.getContext('2d'); + for (let pixelX = this.coords[2]; pixelX < (imageWidth + this.coords[2]);) { + console.log(`Pixel X: ${pixelX}\nPixel Y: ${pixelY}`); - context.imageSmoothingEnabled = false; // Nearest neighbor scaleing + // 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(this.tileSize - (pixelX % this.tileSize), imageWidth - ((pixelX - this.coords[2]) * (pixelX != this.coords[2]))); + console.log(`Math.min(${this.tileSize} - (${pixelX} % ${this.tileSize}), ${imageWidth} - (${pixelX} * (${pixelX} != ${this.coords[2]})))`); - // Tells the canvas to ignore anything outside of this area - context.beginPath(); - context.rect(0, 0, drawSize, drawSize); - context.clip(); + console.log(`Draw Size X: ${drawSizeX}\nDraw Size Y: ${drawSizeY}`); - context.clearRect(0, 0, drawSize, drawSize); // Draws transparent background - context.drawImage(tileBitmap, 0, 0, drawSize, drawSize); // Draws the tile - context.drawImage(templateBitmap, coordsTilePixel[2]*3, coordsTilePixel[3]*3); // Draws the template on top of the tile + console.log(`Draw X: ${drawSizeX}\nDraw Y: ${drawSizeY}\nCanvas Width: ${drawSizeX * shreadSize}\nCanvas Height: ${drawSizeY * shreadSize}`); - const final = await canvas.convertToBlob({ type: 'image/png' }); + // Change the canvas size and wipe the canvas + canvas.width = drawSizeX * shreadSize; + canvas.height = drawSizeY * shreadSize; - // If the template is not drawn yet... - if (this.templateState != 'template') { - // (99% chance templateState is 'file') + console.log(`Getting X ${pixelX}-${pixelX + drawSizeX}\nGetting Y ${pixelY}-${pixelY + drawSizeY}`); - this.template = templateBitmap; // Store the drawn template - this.templateState = 'template'; // Indicate that the template has been drawn, and this.template now stores a bitmap + // 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 url = URL.createObjectURL(final); // Creates a blob URL - // window.open(url, '_blank'); // Opens a new tab with blob - // setTimeout(() => URL.revokeObjectURL(url), 10000); // Destroys the blob 10 seconds later + 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[`${(this.coords[0] + Math.floor(pixelX / 1000)).toString().padStart(4, '0')},${(this.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; } - return final; + console.log('Template Tiles: ', templateTiles); + return templateTiles; } } \ No newline at end of file diff --git a/src/templateManager.js b/src/templateManager.js index 9e16399..e305f6a 100644 --- a/src/templateManager.js +++ b/src/templateManager.js @@ -1,3 +1,4 @@ +import Template from "./Template"; import { numberToEncoded } from "./utils"; /** Manages the template system. @@ -20,6 +21,7 @@ import { numberToEncoded } from "./utils"; * }, * "1 $Z": { * "name": "My Template", + * "URL": "https://github.com/SwingTheVine/Wplace-BlueMarble/blob/main/dist/assets/Favicon.png", * "enabled": false, * "tiles": { * "375,1846,276,188": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA", @@ -50,7 +52,8 @@ export default class TemplateManager { 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) + this.templatesArray = []; // All Template instnaces currently loaded (Template) + this.templatesJSON = null; // All templates currently loaded (JSON) } /** Retrieves the pixel art canvas. @@ -114,124 +117,37 @@ export default class TemplateManager { async createTemplate(blob, name, coords) { // Creates the JSON object if it does not already exist - if (!this.templates) {this.templates = await this.createJSON();} + if (!this.templatesJSON) {this.templatesJSON = await this.createJSON(); console.log(`Creating JSON...`);} const tileSize = 1000; // The size of a tile in pixels console.log(`Awaiting creation...`); + + // Creates a new template instance + const template = new Template({ + displayName: name, + sortID: Object.keys(this.templatesJSON.templates).length || 0, + authorID: numberToEncoded(this.userID || 0, this.encodingBase), + file: blob, + coords: coords + }); + template.chunked = await template.createTemplateTiles(tileSize); // Chunks the tiles // 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) + this.templatesJSON.templates[`${template.sortID} ${template.authorID}`] = { + "name": template.displayName, // Display name of template + "tiles": template.chunked }; - console.log(this.templates); - } + this.templatesArray.push(template); // Pushes the Template object instance to the Template Array - /** 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); - }); + console.log(Object.keys(this.templatesJSON.templates).length); + console.log(this.templatesJSON); + console.log(this.templatesArray); } /** Generates a {@link Template} class instance from the JSON object template - * */ #loadTemplate() { @@ -239,27 +155,31 @@ export default class TemplateManager { /** Deletes a template from the JSON object. * Also delete's the corrosponding {@link Template} class instance - * */ deleteTemplate() { } /** Draws all templates on that tile - * */ drawTemplateOnTile() { } + /** Imports the JSON object, and appends it to any JSON object already loaded + */ importJSON() { } + /** Parses the Blue Marble JSON object + */ #parseBlueMarble() { } + /** Parses the OSU! Place JSON object + */ #parseOSU() { } @@ -267,6 +187,7 @@ export default class TemplateManager { /** Sets the template to the image passed in. * @param {File} file - The file of the template image. * @since 0.55.8 + * @deprecated Since 0.65.43 */ setTemplateImage(file) { @@ -283,6 +204,7 @@ export default class TemplateManager { * @param {Array} [coordsTilePixel=[0,0,0,0]] - A number array of the four coordinates * @returns {File|Blob} A image/png blob file * @since 0.63.59 + * @deprecated Since 0.65.43 */ async drawTemplate(tileBlob, coordsTilePixel=[0, 0, 0, 0]) {