diff --git a/dist/BlueMarble.user.css b/dist/BlueMarble.user.css index d8f9d80..9ccc311 100644 --- a/dist/BlueMarble.user.css +++ b/dist/BlueMarble.user.css @@ -1 +1 @@ -#bm-n{position:fixed;background-color:#153063e6;color:#fff;padding:10px;border-radius:8px;z-index:9000;transition:all .3s ease,transform 0s;max-width:300px;width:auto;will-change:transform;backface-visibility:hidden;-webkit-backface-visibility:hidden;transform-style:preserve-3d;-webkit-transform-style:preserve-3d}#bm-4,#bm-n hr,#bm-3,#bm-1{transition:opacity .2s ease,height .2s ease}div#bm-n{font-family:Roboto Mono,Courier New,Monaco,DejaVu Sans Mono,monospace,Arial;letter-spacing:.05em}#bm-i{margin-bottom:.5em;background:url('data:image/svg+xml;utf8,') repeat;cursor:grab;width:100%;height:1em}#bm-i.dragging{cursor:grabbing}#bm-n:has(#bm-i.dragging){pointer-events:none;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}#bm-i.dragging{pointer-events:auto}#bm-7{margin-bottom:.5em}#bm-7[style*="text-align: center"]{display:flex;flex-direction:column;align-items:center;justify-content:center}#bm-n[style*="padding: 5px"]{width:auto!important;max-width:300px;min-width:200px}#bm-n img{display:inline-block;height:2.5em;margin-right:1ch;vertical-align:middle;transition:opacity .2s ease}#bm-7[style*="text-align: center"] img{display:block;margin:0 auto}#bm-i{transition:margin-bottom .2s ease}#bm-n h1{display:inline-block;font-size:x-large;font-weight:700;vertical-align:middle}#bm-3 input[type=checkbox]{vertical-align:middle;margin-right:.5ch}#bm-3 label{margin-right:.5ch}.bm-q{border:white 1px solid;height:1.5em;width:1.5em;margin-top:2px;text-align:center;line-height:1em;padding:0!important}#bm-d{vertical-align:middle}#bm-d svg{width:50%;margin:0 auto;fill:#111}div:has(>#bm-button-teleport){display:flex;gap:.5ch}#bm-button-favorite svg,#bm-button-template svg{height:1em;margin:2px auto 0;text-align:center;line-height:1em;vertical-align:bottom}#bm-8 input[type=number]{appearance:auto;-moz-appearance:textfield;width:5.5ch;margin-left:1ch;background-color:#0003;padding:0 .5ch;font-size:small}#bm-8 input[type=number]::-webkit-outer-spin-button,#bm-8 input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}#bm-0{display:flex;flex-direction:row;flex-wrap:wrap;align-content:center;justify-content:center;align-items:center;gap:1ch}div:has(>#bm-2)>button{width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#bm-2,input[type=file][id*=template]{display:none!important;visibility:hidden!important;position:absolute!important;left:-9999px!important;top:-9999px!important;width:0!important;height:0!important;opacity:0!important;z-index:-9999!important;pointer-events:none!important}#bm-b{font-size:small;background-color:#0003;padding:0 .5ch;height:3.75em;width:100%}#bm-1{display:flex;justify-content:space-between}#bm-n small{font-size:x-small;color:#d3d3d3}#bm-4,#bm-3,#bm-8,#bm-0,div:has(>#bm-2),#bm-b{margin-top:.5em}#bm-n button{background-color:#144eb9;border-radius:1em;padding:0 .75ch}#bm-n button:hover,#bm-n button:focus-visible{background-color:#1061e5}#bm-n button:active,#bm-n button:disabled{background-color:#2e97ff}#bm-n button:disabled{text-decoration:line-through} +#bm-s,#bm-s-telemetry{position:fixed;background-color:#153063e6;color:#fff;padding:10px;border-radius:8px;z-index:9000;transition:all .3s ease,transform 0s;max-width:300px;width:auto;will-change:transform;backface-visibility:hidden;-webkit-backface-visibility:hidden;transform-style:preserve-3d;-webkit-transform-style:preserve-3d}#bm-8,#bm-s hr,#bm-s-telemetry hr,#bm-7,#bm-3{transition:opacity .2s ease,height .2s ease}div#bm-s,div#bm-s-telemetry{font-family:Roboto Mono,Courier New,Monaco,DejaVu Sans Mono,monospace,Arial;letter-spacing:.05em}#bm-r,#bm-r-telemetry{margin-bottom:.5em;background:url('data:image/svg+xml;utf8,') repeat;cursor:grab;width:100%;height:1em}#bm-r.dragging,#bm-r-telemetry.dragging{cursor:grabbing}#bm-s:has(#bm-r.dragging),#bm-s-telemetry:has(#bm-r-telemetry.dragging){pointer-events:none;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}#bm-r.dragging,#bm-r-telemetry.dragging{pointer-events:auto}#bm-c,#bm-c-telemetry{margin-bottom:.5em}#bm-c[style*="text-align: center"],#bm-c-telemetry[style*="text-align: center"]{display:flex;flex-direction:column;align-items:center;justify-content:center}#bm-s[style*="padding: 5px"],#bm-s-telemetry[style*="padding: 5px"]{width:auto!important;max-width:300px;min-width:200px}#bm-s img{display:inline-block;height:2.5em;margin-right:1ch;vertical-align:middle;transition:opacity .2s ease}#bm-c[style*="text-align: center"] img{display:block;margin:0 auto}#bm-r,#bm-r-telemetry{transition:margin-bottom .2s ease}#bm-s h1,#bm-s-telemetry h1{display:inline-block;font-size:x-large;font-weight:700;vertical-align:middle}#bm-7 input[type=checkbox]{vertical-align:middle;margin-right:.5ch}#bm-7 label{margin-right:.5ch}.bm-v{border:white 1px solid;height:1.5em;width:1.5em;margin-top:2px;text-align:center;line-height:1em;padding:0!important}#bm-i{vertical-align:middle}#bm-i svg{width:50%;margin:0 auto;fill:#111}div:has(>#bm-button-teleport){display:flex;gap:.5ch}#bm-button-favorite svg,#bm-button-template svg{height:1em;margin:2px auto 0;text-align:center;line-height:1em;vertical-align:bottom}#bm-d input[type=number]{appearance:auto;-moz-appearance:textfield;width:5.5ch;margin-left:1ch;background-color:#0003;padding:0 .5ch;font-size:small}#bm-d input[type=number]::-webkit-outer-spin-button,#bm-d input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}#bm-2{display:flex;flex-direction:row;flex-wrap:wrap;align-content:center;justify-content:center;align-items:center;gap:1ch}div:has(>#bm-5)>button{width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#bm-5,input[type=file][id*=template]{display:none!important;visibility:hidden!important;position:absolute!important;left:-9999px!important;top:-9999px!important;width:0!important;height:0!important;opacity:0!important;z-index:-9999!important;pointer-events:none!important}#bm-g{font-size:small;background-color:#0003;padding:0 .5ch;height:3.75em;width:100%}#bm-3{display:flex;justify-content:space-between}#bm-s small{font-size:x-small;color:#d3d3d3}#bm-8,#bm-7,#bm-d,#bm-2,div:has(>#bm-5),#bm-g{margin-top:.5em}#bm-s button,#bm-s-telemetry button{background-color:#144eb9;border-radius:1em;padding:0 .75ch}#bm-s button:hover,#bm-s button:focus-visible,#bm-s-telemetry button:hover,#bm-s-telemetry button:focus-visible{background-color:#1061e5}#bm-s button:active,#bm-s-telemetry button:active #bm-s button:disabled,#bm-s-telemetry button:disabled{background-color:#2e97ff}#bm-s button:disabled,#bm-s-telemetry button:disabled{text-decoration:line-through} diff --git a/dist/BlueMarble.user.css.map.json b/dist/BlueMarble.user.css.map.json index b925778..6883806 100644 --- a/dist/BlueMarble.user.css.map.json +++ b/dist/BlueMarble.user.css.map.json @@ -1,30 +1,35 @@ { - "bm-contain-buttons-template": "bm-0", - "bm-contain-buttons-action": "bm-1", - "bm-input-file-template": "bm-2", - "bm-contain-automation": "bm-3", - "bm-contain-userinfo": "bm-4", - "bm-display-coords": "bm-5", - "bm-user-nextlevel": "bm-6", - "bm-contain-header": "bm-7", - "bm-contain-coords": "bm-8", - "bm-button-disable": "bm-9", - "bm-button-convert": "bm-a", - "bm-output-status": "bm-b", - "bm-user-droplets": "bm-c", - "bm-button-coords": "bm-d", - "bm-button-create": "bm-e", - "bm-button-enable": "bm-f", - "bm-button-move": "bm-g", - "bm-user-name": "bm-h", - "bm-bar-drag": "bm-i", - "bm-input-tx": "bm-j", - "bm-input-ty": "bm-k", - "bm-input-px": "bm-l", - "bm-input-py": "bm-m", - "bm-overlay": "bm-n", - "bm-cStyle": "bm-o", - "bm-canvas": "bm-p", - "bm-help": "bm-q", - "bm-name": "bm-r" + "bm-button-colors-disable-all": "bm-0", + "bm-button-colors-enable-all": "bm-1", + "bm-contain-buttons-template": "bm-2", + "bm-contain-buttons-action": "bm-3", + "bm-contain-colorfilter": "bm-4", + "bm-input-file-template": "bm-5", + "bm-rebuild-color-list": "bm-6", + "bm-contain-automation": "bm-7", + "bm-contain-userinfo": "bm-8", + "bm-colorfilter-list": "bm-9", + "bm-display-coords": "bm-a", + "bm-user-nextlevel": "bm-b", + "bm-contain-header": "bm-c", + "bm-contain-coords": "bm-d", + "bm-button-disable": "bm-e", + "bm-button-convert": "bm-f", + "bm-output-status": "bm-g", + "bm-user-droplets": "bm-h", + "bm-button-coords": "bm-i", + "bm-button-create": "bm-j", + "bm-button-enable": "bm-k", + "bm-button-move": "bm-l", + "bm-user-name": "bm-m", + "bm-input-tx": "bm-n", + "bm-input-ty": "bm-o", + "bm-input-px": "bm-p", + "bm-input-py": "bm-q", + "bm-bar-drag": "bm-r", + "bm-overlay": "bm-s", + "bm-cStyle": "bm-t", + "bm-canvas": "bm-u", + "bm-help": "bm-v", + "bm-name": "bm-w" } \ No newline at end of file diff --git a/dist/BlueMarble.user.js b/dist/BlueMarble.user.js index 2bca6bb..d63b6ac 100644 --- a/dist/BlueMarble.user.js +++ b/dist/BlueMarble.user.js @@ -1,13 +1,13 @@ // ==UserScript== // @name Blue Marble // @namespace https://github.com/SwingTheVine/ -// @version 0.82.0 +// @version 0.82.54 // @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 // @supportURL https://discord.gg/tpeBPy46hf // @homepageURL https://github.com/SwingTheVine/Wplace-BlueMarble -// @icon https://raw.githubusercontent.com/SwingTheVine/Wplace-BlueMarble/e936688dc67a3f7aefd65afc8b96c23530674605/dist/assets/Favicon.png +// @icon https://raw.githubusercontent.com/SwingTheVine/Wplace-BlueMarble/1b71f0f8403b459cec0e1e298b73823570ed6016/dist/assets/Favicon.png // @updateURL https://raw.githubusercontent.com/SwingTheVine/Wplace-BlueMarble/main/dist/BlueMarble.user.js // @downloadURL https://raw.githubusercontent.com/SwingTheVine/Wplace-BlueMarble/main/dist/BlueMarble.user.js // @run-at document-start @@ -16,10 +16,12 @@ // @grant GM_addStyle // @grant GM.setValue // @grant GM_getValue +// @grant GM_xmlhttpRequest +// @connect telemetry.thebluecorner.net // @resource CSS-BM-File https://raw.githubusercontent.com/SwingTheVine/Wplace-BlueMarble/e936688dc67a3f7aefd65afc8b96c23530674605/dist/BlueMarble.user.css // ==/UserScript== // Wplace --> https://wplace.live // License --> https://www.mozilla.org/en-US/MPL/2.0/ -(()=>{var t,e,n=t=>{throw TypeError(t)},i=(t,e,i)=>e.has(t)?n("Cannot add the same private member more than once"):e instanceof WeakSet?e.add(t):e.set(t,i),s=(t,e,i)=>(((t,e)=>{e.has(t)||n("Cannot access private method")})(t,e),i),o=class{constructor(e,n){i(this,t),this.name=e,this.version=n,this.t=null,this.i="bm-b",this.o=null,this.l=null,this.h=[]}u(t){this.t=t}m(){return this.h.length>0&&(this.l=this.h.pop()),this}p(t){t?.appendChild(this.o),this.o=null,this.l=null,this.h=[]}v(n={},i=()=>{}){return i(this,s(this,t,e).call(this,"div",{},n)),this}M(n={},i=()=>{}){return i(this,s(this,t,e).call(this,"p",{},n)),this}$(n={},i=()=>{}){return i(this,s(this,t,e).call(this,"small",{},n)),this}C(n={},i=()=>{}){return i(this,s(this,t,e).call(this,"img",{},n)),this}D(n,i={},o=()=>{}){return o(this,s(this,t,e).call(this,"h"+n,{},i)),this}T(n={},i=()=>{}){return i(this,s(this,t,e).call(this,"hr",{},n)),this}I(n={},i=()=>{}){return i(this,s(this,t,e).call(this,"br",{},n)),this}k(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.m(),i(this,o,a),this}N(n={},i=()=>{}){return i(this,s(this,t,e).call(this,"button",{},n)),this}S(n={},i=()=>{}){const o=n.title??n.textContent??"Help: No info";delete n.textContent,n.title=`Help: ${o}`;const a={textContent:"?",className:"bm-q",onclick:()=>{this.B(this.i,o)}};return i(this,s(this,t,e).call(this,"button",a,n)),this}O(n={},i=()=>{}){return i(this,s(this,t,e).call(this,"input",{},n)),this}L(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 !important; visibility: hidden !important; position: absolute !important; left: -9999px !important; width: 0 !important; height: 0 !important; opacity: 0 !important;"},n);this.m();const c=s(this,t,e).call(this,"button",{textContent:o});return this.m(),this.m(),r.setAttribute("tabindex","-1"),r.setAttribute("aria-hidden","true"),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}H(n={},i=()=>{}){return i(this,s(this,t,e).call(this,"textarea",{},n)),this}B(t,e,n=!1){const i=document.getElementById(t.replace(/^#/,""));i&&(i instanceof HTMLInputElement?i.value=e:n?i.textContent=e:i.innerHTML=e)}j(t,e){let n,i=!1,s=0,o=null,a=0,r=0,c=0,l=0;if(t=document.querySelector("#"==t?.[0]?t:"#"+t),e=document.querySelector("#"==e?.[0]?e:"#"+e),!t||!e)return void this.q(`Can not drag! ${t?"":"moveMe"} ${t||e?"":"and "}${e?"":"iMoveThings "}was not found!`);const h=()=>{if(i){const e=Math.abs(a-c),n=Math.abs(r-l);(e>.5||n>.5)&&(a=c,r=l,t.style.transform=`translate(${a}px, ${r}px)`,t.style.left="0px",t.style.top="0px",t.style.right=""),o=requestAnimationFrame(h)}};let u=null;const m=(m,d)=>{i=!0,u=t.getBoundingClientRect(),n=m-u.left,s=d-u.top;const p=window.getComputedStyle(t).transform;if(p&&"none"!==p){const t=new DOMMatrix(p);a=t.m41,r=t.m42}else a=u.left,r=u.top;c=a,l=r,document.body.style.userSelect="none",e.classList.add("dragging"),o&&cancelAnimationFrame(o),h()},d=()=>{i=!1,o&&(cancelAnimationFrame(o),o=null),document.body.style.userSelect="",e.classList.remove("dragging")};e.addEventListener("mousedown",function(t){t.preventDefault(),m(t.clientX,t.clientY)}),e.addEventListener("touchstart",function(t){const e=t?.touches?.[0];e&&(m(e.clientX,e.clientY),t.preventDefault())},{passive:!1}),document.addEventListener("mousemove",function(t){i&&u&&(c=t.clientX-n,l=t.clientY-s)},{passive:!0}),document.addEventListener("touchmove",function(t){if(i&&u){const e=t?.touches?.[0];if(!e)return;c=e.clientX-n,l=e.clientY-s,t.preventDefault()}},{passive:!1}),document.addEventListener("mouseup",d),document.addEventListener("touchend",d),document.addEventListener("touchcancel",d)}A(t){(0,console.info)(`${this.name}: ${t}`),this.B(this.i,"Status: "+t,!0)}q(t){(0,console.error)(`${this.name}: ${t}`),this.B(this.i,"Error: "+t,!0)}};function a(t,e){if(0===t)return e[0];let n="";const i=e.length;for(;t>0;)n=e[t%i]+n,t=Math.floor(t/i);return n}function r(t){let e="";for(let n=0;n0)for(const t in e){const n=t,i=e[t];if(e.hasOwnProperty(t)){const t=n.split(" "),e=Number(t?.[0]),s=t?.[1]||"0",o=i.name||`Template ${e||""}`,a=i.tiles,r={};for(const t in a)if(a.hasOwnProperty(t)){const e=c(a[t]),n=new Blob([e],{type:"image/png"}),i=await createImageBitmap(n);r[t]=i}const l=new m({displayName:o,_:e||this.X?.length||0,F:s||""});l.P=r,this.X.push(l)}}};var d=GM_info.script.name.toString(),p=GM_info.script.version.toString();!function(t){const e=document.createElement("script");e.setAttribute("bm-r",d),e.setAttribute("bm-o","color: cornflowerblue;"),e.textContent=`(${t})();`,document.documentElement?.appendChild(e),e.remove()}(()=>{const t=document.currentScript,e=t?.getAttribute("bm-r")||"Blue Marble",n=t?.getAttribute("bm-o")||"",i=new Map;window.addEventListener("message",t=>{const{source:s,endpoint:o,blobID:a,blobData:r,blink:c}=t.data;if(Date.now(),"blue-marble"==s&&a&&r&&!o){const t=i.get(a);"function"==typeof t?t(r):function(...t){(0,console.warn)(...t)}(`%c${e}%c: Attempted to retrieve a blob (%s) from queue, but the blobID was not a function! Skipping...`,n,"",a),i.delete(a)}});const s=window.fetch;window.fetch=async function(...t){const e=await s.apply(this,t),n=e.clone(),o=(t[0]instanceof Request?t[0]?.url:t[0])||"ignore",a=n.headers.get("content-type")||"";if(a.includes("application/json"))n.json().then(t=>{window.postMessage({source:"blue-marble",endpoint:o,jsonData:t},"*")}).catch(t=>{});else if(a.includes("image/")&&!o.includes("openfreemap")&&!o.includes("maps")){const t=Date.now(),e=await n.blob();return new Promise(s=>{const a=crypto.randomUUID();i.set(a,t=>{s(new Response(t,{headers:n.headers,status:n.status,statusText:n.statusText}))}),window.postMessage({source:"blue-marble",endpoint:o,blobID:a,blobData:e,blink:t})}).catch(t=>{Date.now()})}return e}});var b=GM_getResourceText("CSS-BM-File");GM_addStyle(b);var f=document.createElement("link");f.href="https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap",f.rel="preload",f.as="style",f.onload=function(){this.onload=null,this.rel="stylesheet"},document.head?.appendChild(f),new class{constructor(){this.Z=null,this.K=null,this.tt="#bm-5"}et(t){return this.K=t,this.Z=new MutationObserver(t=>{for(const e of t)for(const t of e.addedNodes)t instanceof HTMLElement&&t.matches?.(this.tt)}),this}nt(){return this.Z}observe(t,e=!1,n=!1){t.observe(this.K,{childList:e,subtree:n})}};var w=new o(d,p),v=(new o(d,p),new class{constructor(t,e,n){i(this,l),this.name=t,this.version=e,this.o=n,this.it="1.0.0",this.st=null,this.ot="!#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[]^_`abcdefghijklmnopqrstuvwxyz{|}~",this.R=1e3,this.rt=3,this.ct=null,this.lt=null,this.ht="bm-p",this.ut="div#map canvas.maplibregl-canvas",this.dt=null,this.bt="",this.X=[],this.W=null,this.ft=!0}wt(){if(document.body.contains(this.ct))return this.ct;document.getElementById(this.ht)?.remove();const t=document.querySelector(this.ut),e=document.createElement("canvas");return e.id=this.ht,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.ct=e,window.addEventListener("move",this.vt),window.addEventListener("zoom",this.yt),window.addEventListener("resize",this.xt),this.ct}async gt(){return{whoami:this.name.replace(" ",""),scriptVersion:this.version,schemaVersion:this.it,templates:{}}}async Mt(t,e,n){this.W||(this.W=await this.gt()),this.o.A(`Creating template at ${n.join(", ")}...`);const i=new m({displayName:e,_:0,F:a(this.st||0,this.ot),file:t,coords:n}),{Y:o,J:r}=await i.U(this.R);i.P=o,this.W.templates[`${i._} ${i.F}`]={name:i.displayName,coords:n.join(", "),enabled:!0,tiles:r},this.X=[],this.X.push(i);const c=(new Intl.NumberFormat).format(i.G);this.o.A(`Template created at ${n.join(", ")}! Total pixels: ${c}`),await s(this,l,h).call(this)}$t(){}async Ct(){this.W||(this.W=await this.gt())}async Dt(t,e){if(!this.ft)return t;const n=this.R*this.rt;e=e[0].toString().padStart(4,"0")+","+e[1].toString().padStart(4,"0");const i=this.X;i.sort((t,e)=>t._-e._);const s=i.map(t=>{const n=Object.keys(t.P).filter(t=>t.startsWith(e));if(0===n.length)return null;const i=n.map(e=>{const n=e.split(",");return{Tt:t.P[e],It:[n[0],n[1]],kt:[n[2],n[3]]}});return i?.[0]}).filter(Boolean),o=s?.length||0;if(o>0){const t=i.filter(t=>Object.keys(t.P).filter(t=>t.startsWith(e)).length>0).reduce((t,e)=>t+(e.G||0),0),n=(new Intl.NumberFormat).format(t);this.o.A(`Displaying ${o} template${1==o?"":"s"}.\nTotal pixels: ${n}`)}else this.o.A(`Displaying ${o} templates.`);const a=await createImageBitmap(t),r=new OffscreenCanvas(n,n),c=r.getContext("2d");c.imageSmoothingEnabled=!1,c.beginPath(),c.rect(0,0,n,n),c.clip(),c.clearRect(0,0,n,n),c.drawImage(a,0,0,n,n);for(const t of s)c.drawImage(t.Tt,Number(t.kt[0])*this.rt,Number(t.kt[1])*this.rt);return await r.convertToBlob({type:"image/png"})}Nt(t){"BlueMarble"==t?.whoami&&s(this,l,u).call(this,t)}St(t){this.ft=t}}(d,p,w)),y=new class{constructor(t){this.Bt=t,this.Ot=!1,this.Lt=[],this.zt=[]}Ht(t){window.addEventListener("message",async e=>{const n=e.data,i=n.jsonData;if(!n||"blue-marble"!==n.source)return;if(!n.endpoint)return;const s=n.endpoint?.split("?")[0].split("/").filter(t=>t&&isNaN(Number(t))).filter(t=>t&&!t.includes(".")).pop();switch(s){case"me":if(i.status&&"2"!=i.status?.toString()[0])return void t.q("You are not logged in!\nCould not fetch userdata.");const e=Math.ceil(Math.pow(Math.floor(i.level)*Math.pow(30,.65),1/.65)-i.pixelsPainted);i.id||i.id,this.Bt.st=i.id,t.B("bm-h",`Username: ${function(t){const e=document.createElement("div");return e.textContent=t,e.innerHTML}(i.name)}`),t.B("bm-c",`Droplets: ${(new Intl.NumberFormat).format(i.droplets)}`),t.B("bm-6",`Next level in ${(new Intl.NumberFormat).format(e)} pixel${1==e?"":"s"}`);break;case"pixel":const s=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.Lt.length&&(!s.length||!c.length))return void t.q("Coordinates are malformed!\nDid you try clicking the canvas first?");this.Lt=[...s,...c];const l=(o=s,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-5");const n=`(Tl X: ${s[0]}, Tl Y: ${s[1]}, Px X: ${c[0]}, Px Y: ${c[1]})`;e?e.textContent=n:(e=document.createElement("span"),e.id="bm-5",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 u=n.endpoint.split("/");u=[parseInt(u[u.length-2]),parseInt(u[u.length-1].replace(".png",""))];const m=n.blobID,d=n.blobData,p=await this.Bt.Dt(d,u);window.postMessage({source:"blue-marble",blobID:m,blobData:p,blink:n.blink});break;case"robots":this.Ot="false"==i.userscript?.toString().toLowerCase()}var o,a})}}(v);w.u(y);var x=JSON.parse(GM_getValue("bmTemplates","{}"));v.Nt(x),function(){let t=!1;w.v({id:"bm-n",style:"top: 10px; right: 75px;"}).v({id:"bm-7"}).v({id:"bm-i"}).m().C({alt:"Blue Marble Icon - Click to minimize/maximize",src:"https://raw.githubusercontent.com/SwingTheVine/Wplace-BlueMarble/main/dist/assets/Favicon.png",style:"cursor: pointer;"},(e,n)=>{n.addEventListener("click",()=>{t=!t;const i=document.querySelector("#bm-n"),s=document.querySelector("#bm-7"),o=document.querySelector("#bm-i"),a=document.querySelector("#bm-8"),r=document.querySelector("#bm-d"),c=document.querySelector("#bm-e"),l=document.querySelector("#bm-f"),h=document.querySelector("#bm-9"),u=document.querySelectorAll("#bm-8 input");t||(i.style.width="auto",i.style.maxWidth="300px",i.style.minWidth="200px",i.style.padding="10px"),["#bm-n h1","#bm-4","#bm-n hr","#bm-3 > *:not(#bm-8)","#bm-2","#bm-1",`#${e.i}`].forEach(e=>{document.querySelectorAll(e).forEach(e=>{e.style.display=t?"none":""})}),t?(a&&(a.style.display="none"),r&&(r.style.display="none"),c&&(c.style.display="none"),l&&(l.style.display="none"),h&&(h.style.display="none"),u.forEach(t=>{t.style.display="none"}),i.style.width="60px",i.style.height="76px",i.style.maxWidth="60px",i.style.minWidth="60px",i.style.padding="8px",n.style.marginLeft="3px",s.style.textAlign="center",s.style.margin="0",s.style.marginBottom="0",o&&(o.style.display="",o.style.marginBottom="0.25em")):(a&&(a.style.display="",a.style.flexDirection="",a.style.justifyContent="",a.style.alignItems="",a.style.gap="",a.style.textAlign="",a.style.margin=""),r&&(r.style.display=""),c&&(c.style.display="",c.style.marginTop=""),l&&(l.style.display="",l.style.marginTop=""),h&&(h.style.display="",h.style.marginTop=""),u.forEach(t=>{t.style.display=""}),n.style.marginLeft="",i.style.padding="10px",s.style.textAlign="",s.style.margin="",s.style.marginBottom="",o&&(o.style.marginBottom="0.5em"),i.style.width="",i.style.height=""),n.alt=t?"Blue Marble Icon - Minimized (Click to maximize)":"Blue Marble Icon - Maximized (Click to minimize)"})}).m().D(1,{textContent:d}).m().m().T().m().v({id:"bm-4"}).M({id:"bm-h",textContent:"Username:"}).m().M({id:"bm-c",textContent:"Droplets:"}).m().M({id:"bm-6",textContent:"Next level in..."}).m().m().T().m().v({id:"bm-3"}).v({id:"bm-8"}).N({id:"bm-d",className:"bm-q",style:"margin-top: 0;",innerHTML:''},(t,e)=>{e.onclick=()=>{const e=t.t?.Lt;e?.[0]?(t.B("bm-j",e?.[0]||""),t.B("bm-k",e?.[1]||""),t.B("bm-l",e?.[2]||""),t.B("bm-m",e?.[3]||"")):t.q("Coordinates are malformed! Did you try clicking on the canvas first?")}}).m().O({type:"number",id:"bm-j",placeholder:"Tl X",min:0,max:2047,step:1,required:!0}).m().O({type:"number",id:"bm-k",placeholder:"Tl Y",min:0,max:2047,step:1,required:!0}).m().O({type:"number",id:"bm-l",placeholder:"Px X",min:0,max:2047,step:1,required:!0}).m().O({type:"number",id:"bm-m",placeholder:"Px Y",min:0,max:2047,step:1,required:!0}).m().m().L({id:"bm-2",textContent:"Upload Template",accept:"image/png, image/jpeg, image/webp, image/bmp, image/gif"}).m().v({id:"bm-0"}).N({id:"bm-f",textContent:"Enable"},(t,e)=>{e.onclick=()=>{t.t?.Bt?.St(!0),t.A("Enabled templates!")}}).m().N({id:"bm-e",textContent:"Create"},(t,e)=>{e.onclick=()=>{const e=document.querySelector("#bm-2"),n=document.querySelector("#bm-j");if(!n.checkValidity())return n.reportValidity(),void t.q("Coordinates are malformed! Did you try clicking on the canvas first?");const i=document.querySelector("#bm-k");if(!i.checkValidity())return i.reportValidity(),void t.q("Coordinates are malformed! Did you try clicking on the canvas first?");const s=document.querySelector("#bm-l");if(!s.checkValidity())return s.reportValidity(),void t.q("Coordinates are malformed! Did you try clicking on the canvas first?");const o=document.querySelector("#bm-m");if(!o.checkValidity())return o.reportValidity(),void t.q("Coordinates are malformed! Did you try clicking on the canvas first?");e?.files[0]?(v.Mt(e.files[0],e.files[0]?.name.replace(/\.[^/.]+$/,""),[Number(n.value),Number(i.value),Number(s.value),Number(o.value)]),t.A("Drew to canvas!")):t.q("No file selected!")}}).m().N({id:"bm-9",textContent:"Disable"},(t,e)=>{e.onclick=()=>{t.t?.Bt?.St(!1),t.A("Disabled templates!")}}).m().m().H({id:w.i,placeholder:`Status: Sleeping...\nVersion: ${p}`,readOnly:!0}).m().v({id:"bm-1"}).v().N({id:"bm-a",className:"bm-q",innerHTML:"🎨",title:"Template Color Converter"},(t,e)=>{e.addEventListener("click",()=>{window.open("https://pepoafonso.github.io/color_converter_wplace/","_blank","noopener noreferrer")})}).m().m().$({textContent:"Made by SwingTheVine",style:"margin-top: auto;"}).m().m().m().p(document.body)}(),w.j("#bm-n","#bm-i"),y.Ht(w),new MutationObserver((t,e)=>{const n=document.querySelector("#color-1");if(!n)return;let i=document.querySelector("#bm-g");if(!i){i=document.createElement("button"),i.id="bm-g",i.textContent="Move ↑",i.className="btn btn-soft",i.onclick=function(){const t=this.parentNode.parentNode.parentNode.parentNode,e="Move ↑"==this.textContent;t.parentNode.className=t.parentNode.className.replace(e?"bottom":"top",e?"top":"bottom"),t.style.borderTopLeftRadius=e?"0px":"var(--radius-box)",t.style.borderTopRightRadius=e?"0px":"var(--radius-box)",t.style.borderBottomLeftRadius=e?"var(--radius-box)":"0px",t.style.borderBottomRightRadius=e?"var(--radius-box)":"0px",this.textContent=e?"Move ↓":"Move ↑"};const t=n.parentNode.parentNode.parentNode.parentNode.querySelector("h2");t.parentNode?.appendChild(i)}}).observe(document.body,{childList:!0,subtree:!0}),function(...t){(0,console.log)(...t)}(`%c${d}%c (${p}) userscript has loaded!`,"color: cornflowerblue;","")})(); \ No newline at end of file +(()=>{var e,t,n=e=>{throw TypeError(e)},i=(e,t,i)=>t.has(e)?n("Cannot add the same private member more than once"):t instanceof WeakSet?t.add(e):t.set(e,i),o=(e,t,i)=>(((e,t)=>{t.has(e)||n("Cannot access private method")})(e,t),i),s=class{constructor(t,n){i(this,e),this.name=t,this.version=n,this.t=null,this.i="bm-g",this.o=null,this.l=null,this.m=[]}u(e){this.t=e}h(){return this.m.length>0&&(this.l=this.m.pop()),this}p(e){e?.appendChild(this.o),this.o=null,this.l=null,this.m=[]}v(n={},i=()=>{}){return i(this,o(this,e,t).call(this,"div",{},n)),this}$(n={},i=()=>{}){return i(this,o(this,e,t).call(this,"p",{},n)),this}S(n={},i=()=>{}){return i(this,o(this,e,t).call(this,"small",{},n)),this}M(n={},i=()=>{}){return i(this,o(this,e,t).call(this,"img",{},n)),this}O(n,i={},s=()=>{}){return s(this,o(this,e,t).call(this,"h"+n,{},i)),this}T(n={},i=()=>{}){return i(this,o(this,e,t).call(this,"hr",{},n)),this}D(n={},i=()=>{}){return i(this,o(this,e,t).call(this,"br",{},n)),this}C(n={},i=()=>{}){const s=o(this,e,t).call(this,"label",{textContent:n.textContent??""});delete n.textContent;const r=o(this,e,t).call(this,"input",{type:"checkbox"},n);return s.insertBefore(r,s.firstChild),this.h(),i(this,s,r),this}N(n={},i=()=>{}){return i(this,o(this,e,t).call(this,"button",{},n)),this}k(n={},i=()=>{}){const s=n.title??n.textContent??"Help: No info";delete n.textContent,n.title=`Help: ${s}`;const r={textContent:"?",className:"bm-v",onclick:()=>{this.B(this.i,s)}};return i(this,o(this,e,t).call(this,"button",r,n)),this}I(n={},i=()=>{}){return i(this,o(this,e,t).call(this,"input",{},n)),this}L(n={},i=()=>{}){const s=n.textContent??"";delete n.textContent;const r=o(this,e,t).call(this,"div"),a=o(this,e,t).call(this,"input",{type:"file",style:"display: none !important; visibility: hidden !important; position: absolute !important; left: -9999px !important; width: 0 !important; height: 0 !important; opacity: 0 !important;"},n);this.h();const l=o(this,e,t).call(this,"button",{textContent:s});return this.h(),this.h(),a.setAttribute("tabindex","-1"),a.setAttribute("aria-hidden","true"),l.addEventListener("click",()=>{a.click()}),a.addEventListener("change",()=>{l.style.maxWidth=`${l.offsetWidth}px`,a.files.length>0?l.textContent=a.files[0].name:l.textContent=s}),i(this,r,a,l),this}G(n={},i=()=>{}){return i(this,o(this,e,t).call(this,"textarea",{},n)),this}B(e,t,n=!1){const i=document.getElementById(e.replace(/^#/,""));i&&(i instanceof HTMLInputElement?i.value=t:n?i.textContent=t:i.innerHTML=t)}P(e,t){let n,i=!1,o=0,s=null,r=0,a=0,l=0,c=0;if(e=document.querySelector("#"==e?.[0]?e:"#"+e),t=document.querySelector("#"==t?.[0]?t:"#"+t),!e||!t)return void this.W(`Can not drag! ${e?"":"moveMe"} ${e||t?"":"and "}${t?"":"iMoveThings "}was not found!`);const m=()=>{if(i){const t=Math.abs(r-l),n=Math.abs(a-c);(t>.5||n>.5)&&(r=l,a=c,e.style.transform=`translate(${r}px, ${a}px)`,e.style.left="0px",e.style.top="0px",e.style.right=""),s=requestAnimationFrame(m)}};let u=null;const d=(d,h)=>{i=!0,u=e.getBoundingClientRect(),n=d-u.left,o=h-u.top;const b=window.getComputedStyle(e).transform;if(b&&"none"!==b){const e=new DOMMatrix(b);r=e.m41,a=e.m42}else r=u.left,a=u.top;l=r,c=a,document.body.style.userSelect="none",t.classList.add("dragging"),s&&cancelAnimationFrame(s),m()},h=()=>{i=!1,s&&(cancelAnimationFrame(s),s=null),document.body.style.userSelect="",t.classList.remove("dragging")};t.addEventListener("mousedown",function(e){e.preventDefault(),d(e.clientX,e.clientY)}),t.addEventListener("touchstart",function(e){const t=e?.touches?.[0];t&&(d(t.clientX,t.clientY),e.preventDefault())},{passive:!1}),document.addEventListener("mousemove",function(e){i&&u&&(l=e.clientX-n,c=e.clientY-o)},{passive:!0}),document.addEventListener("touchmove",function(e){if(i&&u){const t=e?.touches?.[0];if(!t)return;l=t.clientX-n,c=t.clientY-o,e.preventDefault()}},{passive:!1}),document.addEventListener("mouseup",h),document.addEventListener("touchend",h),document.addEventListener("touchcancel",h)}F(e){(0,console.info)(`${this.name}: ${e}`),this.B(this.i,"Status: "+e,!0)}W(e){(0,console.error)(`${this.name}: ${e}`),this.B(this.i,"Error: "+e,!0)}};function r(...e){(0,console.error)(...e)}function a(e,t){if(0===e)return t[0];let n="";const i=t.length;for(;e>0;)n=t[e%i]+n,e=Math.floor(e/i);return n}function l(e){let t="";for(let n=0;n"transparent"!==(e?.name||"").toLowerCase()&&Array.isArray(e?.rgb)).map(e=>`${e.rgb[0]},${e.rgb[1]},${e.rgb[2]}`));const c="222,250,206";this.H.add(c),this.K=new Map(l.filter(e=>Array.isArray(e?.rgb)).map(e=>[`${e.rgb[0]},${e.rgb[1]},${e.rgb[2]}`,{id:e.id,premium:!!e.premium,name:e.name}]));try{const e=l.find(e=>"transparent"===(e?.name||"").toLowerCase());e&&Array.isArray(e.rgb)&&this.K.set(c,{id:e.id,premium:!!e.premium,name:e.name})}catch(e){}}async Z(){console.log("Template coordinates:",this.coords);const e=await createImageBitmap(this.file),t=e.width,n=e.height,i=t*n;console.log(`Template pixel analysis - Dimensions: ${t}Γ—${n} = ${i.toLocaleString()} pixels`),this.X=i;try{const i=new OffscreenCanvas(t,n).getContext("2d",{ee:!0});i.imageSmoothingEnabled=!1,i.clearRect(0,0,t,n),i.drawImage(e,0,0);const o=i.getImageData(0,0,t,n).data;let s=0,r=0;const a=new Map;for(let e=0;e0){for(const e in t){const n=e,i=t[e];if(console.log(n),t.hasOwnProperty(e)){const e=n.split(" "),o=Number(e?.[0]),s=e?.[1]||"0",r=i.name||`Template ${o||""}`,a=i.tiles,l={};let m=0;const u=new Map;for(const e in a)if(console.log(e),a.hasOwnProperty(e)){const t=c(a[e]),n=new Blob([t],{type:"image/png"}),i=await createImageBitmap(n);l[e]=i;try{const e=i.width,t=i.height,n=new OffscreenCanvas(e,t).getContext("2d",{ee:!0});n.imageSmoothingEnabled=!1,n.clearRect(0,0,e,t),n.drawImage(i,0,0);const o=n.getImageData(0,0,e,t).data;for(let n=0;n{d.U?.add(e.split(",").slice(0,2).join(","))})}catch(e){}try{const e=t?.[n]?.palette;if(e)for(const[t,n]of Object.entries(e))d.Y[t]?d.Y[t].enabled=!!n?.enabled:d.Y[t]={count:n?.count||0,enabled:!!n?.enabled}}catch(e){}d.V=n,this.se.push(d),console.log(this.se),console.log("^^^ This ^^^")}}try{const e=document.querySelector("#bm-4");e&&(e.style.display=""),window.postMessage({source:"blue-marble",re:"bm-6"},"*")}catch(e){}}},h=new WeakSet,b=async function(e=navigator.userAgent){return(e=e||"").includes("OPR/")||e.includes("Opera")?"Opera":e.includes("Edg/")?"Edge":e.includes("Vivaldi")?"Vivaldi":e.includes("YaBrowser")?"Yandex":e.includes("Kiwi")?"Kiwi":e.includes("Brave")?"Brave":e.includes("Firefox/")?"Firefox":e.includes("Chrome/")?"Chrome":e.includes("Safari/")?"Safari":navigator.brave&&"function"==typeof navigator.brave.isBrave&&await navigator.brave.isBrave()?"Brave":"Unknown"},p=function(e=navigator.userAgent){return/Windows NT 11/i.test(e=e||"")?"Windows 11":/Windows NT 10/i.test(e)?"Windows 10":/Windows NT 6\.3/i.test(e)?"Windows 8.1":/Windows NT 6\.2/i.test(e)?"Windows 8":/Windows NT 6\.1/i.test(e)?"Windows 7":/Windows NT 6\.0/i.test(e)?"Windows Vista":/Windows NT 5\.1|Windows XP/i.test(e)?"Windows XP":/Mac OS X 10[_\.]15/i.test(e)?"macOS Catalina":/Mac OS X 10[_\.]14/i.test(e)?"macOS Mojave":/Mac OS X 10[_\.]13/i.test(e)?"macOS High Sierra":/Mac OS X 10[_\.]12/i.test(e)?"macOS Sierra":/Mac OS X 10[_\.]11/i.test(e)?"OS X El Capitan":/Mac OS X 10[_\.]10/i.test(e)?"OS X Yosemite":/Mac OS X 10[_\.]/i.test(e)?"macOS":/Android/i.test(e)?"Android":/iPhone|iPad|iPod/i.test(e)?"iOS":/Linux/i.test(e)?"Linux":"Unknown"};var w=GM_info.script.name.toString(),y=GM_info.script.version.toString();!function(e){const t=document.createElement("script");t.setAttribute("bm-w",w),t.setAttribute("bm-t","color: cornflowerblue;"),t.textContent=`(${e})();`,document.documentElement?.appendChild(t),t.remove()}(()=>{const e=document.currentScript,t=e?.getAttribute("bm-w")||"Blue Marble",n=e?.getAttribute("bm-t")||"",i=new Map;window.addEventListener("message",e=>{const{source:o,endpoint:s,blobID:r,blobData:a,blink:l}=e.data,c=Date.now()-l;if(console.groupCollapsed(`%c${t}%c: ${i.size} Recieved IMAGE message about blob "${r}"`,n,""),console.log(`Blob fetch took %c${String(Math.floor(c/6e4)).padStart(2,"0")}:${String(Math.floor(c/1e3)%60).padStart(2,"0")}.${String(c%1e3).padStart(3,"0")}%c MM:SS.mmm`,n,""),console.log(i),console.groupEnd(),"blue-marble"==o&&r&&a&&!s){const e=i.get(r);"function"==typeof e?e(a):function(...e){(0,console.warn)(...e)}(`%c${t}%c: Attempted to retrieve a blob (%s) from queue, but the blobID was not a function! Skipping...`,n,"",r),i.delete(r)}});const o=window.fetch;window.fetch=async function(...e){const s=await o.apply(this,e),r=s.clone(),a=(e[0]instanceof Request?e[0]?.url:e[0])||"ignore",l=r.headers.get("content-type")||"";if(l.includes("application/json"))console.log(`%c${t}%c: Sending JSON message about endpoint "${a}"`,n,""),r.json().then(e=>{window.postMessage({source:"blue-marble",endpoint:a,jsonData:e},"*")}).catch(e=>{console.error(`%c${t}%c: Failed to parse JSON: `,n,"",e)});else if(l.includes("image/")&&!a.includes("openfreemap")&&!a.includes("maps")){const e=Date.now(),o=await r.blob();return console.log(`%c${t}%c: ${i.size} Sending IMAGE message about endpoint "${a}"`,n,""),new Promise(s=>{const l=crypto.randomUUID();i.set(l,e=>{s(new Response(e,{headers:r.headers,status:r.status,statusText:r.statusText})),console.log(`%c${t}%c: ${i.size} Processed blob "${l}"`,n,"")}),window.postMessage({source:"blue-marble",endpoint:a,blobID:l,blobData:o,blink:e})}).catch(o=>{const s=Date.now();console.error(`%c${t}%c: Failed to Promise blob!`,n,""),console.groupCollapsed(`%c${t}%c: Details of failed blob Promise:`,n,""),console.log(`Endpoint: ${a}\nThere are ${i.size} blobs processing...\nBlink: ${e.toLocaleString()}\nTime Since Blink: ${String(Math.floor(s/6e4)).padStart(2,"0")}:${String(Math.floor(s/1e3)%60).padStart(2,"0")}.${String(s%1e3).padStart(3,"0")} MM:SS.mmm`),console.error("Exception stack:",o),console.groupEnd()})}return s}});var v=GM_getResourceText("CSS-BM-File");GM_addStyle(v);var $=document.createElement("link");$.href="https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap",$.rel="preload",$.as="style",$.onload=function(){this.onload=null,this.rel="stylesheet"},document.head?.appendChild($),new class{constructor(){this.ae=null,this.le=null,this.ce="#bm-a"}me(e){return this.le=e,this.ae=new MutationObserver(e=>{for(const t of e)for(const e of t.addedNodes)e instanceof HTMLElement&&e.matches?.(this.ce)}),this}ue(){return this.ae}observe(e,t=!1,n=!1){e.observe(this.le,{childList:t,subtree:n})}};var x=new s(w,y),S=(new s(w,y),new class{constructor(e,t,n){i(this,m),this.name=e,this.version=t,this.o=n,this.de="1.0.0",this.he=null,this.be="!#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[]^_`abcdefghijklmnopqrstuvwxyz{|}~",this.R=1e3,this.oe=3,this.pe=null,this.ge=null,this.fe="bm-u",this.we="div#map canvas.maplibregl-canvas",this.ye=null,this.ve="",this.se=[],this.ie=null,this.$e=!0,this.xe=new Map}Se(){if(document.body.contains(this.pe))return this.pe;document.getElementById(this.fe)?.remove();const e=document.querySelector(this.we),t=document.createElement("canvas");return t.id=this.fe,t.className="maplibregl-canvas",t.style.position="absolute",t.style.top="0",t.style.left="0",t.style.height=e?.clientHeight*(window.devicePixelRatio||1)+"px",t.style.width=e?.clientWidth*(window.devicePixelRatio||1)+"px",t.height=e?.clientHeight*(window.devicePixelRatio||1),t.width=e?.clientWidth*(window.devicePixelRatio||1),t.style.zIndex="8999",t.style.pointerEvents="none",e?.parentElement?.appendChild(t),this.pe=t,window.addEventListener("move",this.Me),window.addEventListener("zoom",this.Oe),window.addEventListener("resize",this.Te),this.pe}async De(){return{whoami:this.name.replace(" ",""),scriptVersion:this.version,schemaVersion:this.de,templates:{}}}async Ce(e,t,n){this.ie||(this.ie=await this.De(),console.log("Creating JSON...")),this.o.F(`Creating template at ${n.join(", ")}...`);const i=new f({displayName:t,_:0,J:a(this.he||0,this.be),file:e,coords:n}),{te:s,ne:r}=await i.Z(this.R);i.j=s;const l=`${i._} ${i.J}`;i.V=l,this.ie.templates[l]={name:i.displayName,coords:n.join(", "),enabled:!0,tiles:r,palette:i.Y},this.se=[],this.se.push(i);const c=(new Intl.NumberFormat).format(i.X);this.o.F(`Template created at ${n.join(", ")}! Total pixels: ${c}`);try{const e=document.querySelector("#bm-4");e&&(e.style.display=""),window.postMessage({source:"blue-marble",re:"bm-6"},"*")}catch(e){}console.log(Object.keys(this.ie.templates).length),console.log(this.ie),console.log(this.se),console.log(JSON.stringify(this.ie)),await o(this,m,u).call(this)}Ne(){}async ke(){this.ie||(this.ie=await this.De(),console.log("Creating JSON..."))}async Be(e,t){if(!this.$e)return e;const n=this.R*this.oe;t=t[0].toString().padStart(4,"0")+","+t[1].toString().padStart(4,"0"),console.log(`Searching for templates in tile: "${t}"`);const i=this.se;if(console.log(i),i.sort((e,t)=>e._-t._),console.log(i),!i.some(e=>!!e?.j&&(e.U&&e.U.size>0?e.U.has(t):Object.keys(e.j).some(e=>e.startsWith(t)))))return e;const o=i.map(e=>{const n=Object.keys(e.j).filter(e=>e.startsWith(t));if(0===n.length)return null;const i=n.map(t=>{const n=t.split(",");return{Ie:e.j[t],Le:[n[0],n[1]],Ge:[n[2],n[3]]}});return i?.[0]}).filter(Boolean);console.log(o);const s=o?.length||0;console.log(`templateCount = ${s}`);let r=0,a=0,l=0;const c=await createImageBitmap(e),m=new OffscreenCanvas(n,n),u=m.getContext("2d");u.imageSmoothingEnabled=!1,u.beginPath(),u.rect(0,0,n,n),u.clip(),u.clearRect(0,0,n,n),u.drawImage(c,0,0,n,n);let d=null;try{d=u.getImageData(0,0,n,n).data}catch(e){}for(const e of o){if(console.log("Template:"),console.log(e),d)try{const t=e.Ie.width,i=e.Ie.height,o=new OffscreenCanvas(t,i).getContext("2d",{ee:!0});o.imageSmoothingEnabled=!1,o.clearRect(0,0,t,i),o.drawImage(e.Ie,0,0);const s=o.getImageData(0,0,t,i).data,c=Number(e.Ge[0])*this.oe,m=Number(e.Ge[1])*this.oe;for(let e=0;e=n||u>=n)continue;const h=4*(e*t+i),b=s[h],p=s[h+1],g=s[h+2];if(s[h+3]<64){try{const e=this.se?.[0],t=4*(u*n+o),i=d[t],s=d[t+1],r=d[t+2],l=d[t+3],c=`${i},${s},${r}`,m=!!e?.H&&e.H.has(c);l>=64&&m&&a++}catch(e){}continue}try{const e=this.se?.[0];if(e?.H&&!e.H.has(`${b},${p},${g}`))continue}catch(e){}l++;const f=4*(u*n+o),w=d[f],y=d[f+1],v=d[f+2];d[f+3]<64||(w===b&&y===p&&v===g?r++:a++)}}catch(e){console.warn("Failed to compute per-tile painted/wrong stats:",e)}try{const t=this.se?.[0],n=t?.Y||{};if(Object.values(n).some(e=>!1===e?.enabled)){const i=e.Ie.width,o=e.Ie.height,s=new OffscreenCanvas(i,o),r=s.getContext("2d",{ee:!0});r.imageSmoothingEnabled=!1,r.clearRect(0,0,i,o),r.drawImage(e.Ie,0,0);const a=r.getImageData(0,0,i,o),l=a.data;for(let e=0;e0){const e=t;this.xe.set(e,{Pe:r,required:l,We:a});let n=0,i=0,o=0;for(const e of this.xe.values())n+=e.Pe||0,i+=e.required||0,o+=e.We||0;const c=this.se.reduce((e,t)=>e+(t.A||t.X||0),0),m=c>0?c:i,u=(new Intl.NumberFormat).format(n),d=(new Intl.NumberFormat).format(m),h=(new Intl.NumberFormat).format(m-n);this.o.F(`Displaying ${s} template${1==s?"":"s"}.\nPainted ${u} / ${d} β€’ Wrong ${h}`)}else this.o.F(`Displaying ${s} templates.`);return await m.convertToBlob({type:"image/png"})}Fe(e){console.log("Importing JSON..."),console.log(e),"BlueMarble"==e?.whoami&&o(this,m,d).call(this,e)}Ee(e){this.$e=e}}(w,y,x)),M=new class{constructor(e){i(this,h),this._e=e,this.Je=!1,this.je=[],this.Re=[]}Xe(e){window.addEventListener("message",async t=>{const n=t.data,i=n.jsonData;if(!n||"blue-marble"!==n.source)return;if(!n.endpoint)return;const o=n.endpoint?.split("?")[0].split("/").filter(e=>e&&isNaN(Number(e))).filter(e=>e&&!e.includes(".")).pop();switch(console.log('%cBlue Marble%c: Recieved message about "%s"',"color: cornflowerblue;","",o),o){case"me":if(i.status&&"2"!=i.status?.toString()[0])return void e.W("You are not logged in!\nCould not fetch userdata.");const t=Math.ceil(Math.pow(Math.floor(i.level)*Math.pow(30,.65),1/.65)-i.pixelsPainted);console.log(i.id),(i.id||0===i.id)&&console.log(a(i.id,"!#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[]^_`abcdefghijklmnopqrstuvwxyz{|}~")),this._e.he=i.id,e.B("bm-m",`Username: ${function(e){const t=document.createElement("div");return t.textContent=e,t.innerHTML}(i.name)}`),e.B("bm-h",`Droplets: ${(new Intl.NumberFormat).format(i.droplets)}`),e.B("bm-b",`Next level in ${(new Intl.NumberFormat).format(t)} pixel${1==t?"":"s"}`);break;case"pixel":const o=n.endpoint.split("?")[0].split("/").filter(e=>e&&!isNaN(Number(e))),l=new URLSearchParams(n.endpoint.split("?")[1]),c=[l.get("x"),l.get("y")];if(this.je.length&&(!o.length||!c.length))return void e.W("Coordinates are malformed!\nDid you try clicking the canvas first?");this.je=[...o,...c];const m=(s=o,r=c,[parseInt(s[0])%4*1e3+parseInt(r[0]),parseInt(s[1])%4*1e3+parseInt(r[1])]),u=document.querySelectorAll("span");for(const e of u)if(e.textContent.trim().includes(`${m[0]}, ${m[1]}`)){let t=document.querySelector("#bm-a");const n=`(Tl X: ${o[0]}, Tl Y: ${o[1]}, Px X: ${c[0]}, Px Y: ${c[1]})`;t?t.textContent=n:(t=document.createElement("span"),t.id="bm-a",t.textContent=n,t.style="margin-left: calc(var(--spacing)*3); font-size: small;",e.parentNode.parentNode.parentNode.insertAdjacentElement("afterend",t))}break;case"tiles":let d=n.endpoint.split("/");d=[parseInt(d[d.length-2]),parseInt(d[d.length-1].replace(".png",""))];const h=n.blobID,b=n.blobData,p=await this._e.Be(b,d);window.postMessage({source:"blue-marble",blobID:h,blobData:p,blink:n.blink});break;case"robots":this.Je="false"==i.userscript?.toString().toLowerCase();break}var s,r})}async Ae(e){console.log("Sending heartbeat to telemetry server...");let t=GM_getValue("bmUserSettings","{}");if(t=JSON.parse(t),!t||!t.telemetry||!t.uuid)return void console.log("Telemetry is disabled, not sending heartbeat.");const n=navigator.userAgent;let i=await o(this,h,b).call(this,n),s=o(this,h,p).call(this,n);GM_xmlhttpRequest({method:"POST",url:"https://telemetry.thebluecorner.net/heartbeat",headers:{"Content-Type":"application/json"},data:JSON.stringify({uuid:t.uuid,version:e,browser:i,os:s}),onload:e=>{200!==e.status&&r("Failed to send heartbeat:",e.statusText)},onerror:e=>{r("Error sending heartbeat:",e)}})}}(S);x.u(M);var O=JSON.parse(GM_getValue("bmTemplates","{}"));console.log(O),S.Fe(O);var T=JSON.parse(GM_getValue("bmUserSettings","{}"));if(console.log(T),console.log(Object.keys(T).length),0==Object.keys(T).length){const e=crypto.randomUUID();console.log(e),GM.setValue("bmUserSettings",JSON.stringify({uuid:e}))}if(setInterval(()=>M.Ae(y),18e5),console.log(`Telemetry is ${!(null==T?.telemetry)}`),null==T?.telemetry||T?.telemetry>1){const e=new s(w,y);e.u(M),e.v({id:"bm-s-telemetry",style:"top: 0px; left: 0px; width: 100vw; max-width: 100vw; height: 100vh; max-height: 100vh; z-index: 9999;"}).v({id:"bm-G",style:"display: flex; flex-direction: column; align-items: center;"}).v({id:"bm-c-telemetry",style:"margin-top: 10%;"}).O(1,{textContent:`${w} Telemetry`}).h().h().v({id:"bm-N",style:"max-width: 50%; overflow-y: auto; max-height: 80vh;"}).T().h().D().h().v({style:"width: fit-content; margin: auto; text-align: center;"}).N({id:"bm-H",textContent:"More Information"},(e,t)=>{t.onclick=()=>{window.open("https://github.com/SwingTheVine/Wplace-TelemetryServer#telemetry-data","_blank","noopener noreferrer")}}).h().h().D().h().v({style:"width: fit-content; margin: auto; text-align: center;"}).N({id:"bm-E",textContent:"Enable Telemetry",style:"margin-right: 2ch;"},(e,t)=>{t.onclick=()=>{const e=JSON.parse(GM_getValue("bmUserSettings","{}"));e.telemetry=1,GM.setValue("bmUserSettings",JSON.stringify(e));const t=document.getElementById("bm-s-telemetry");t&&(t.style.display="none")}}).h().N({id:"bm-B",textContent:"Disable Telemetry"},(e,t)=>{t.onclick=()=>{const e=JSON.parse(GM_getValue("bmUserSettings","{}"));e.telemetry=0,GM.setValue("bmUserSettings",JSON.stringify(e));const t=document.getElementById("bm-s-telemetry");t&&(t.style.display="none")}}).h().h().D().h().$({textContent:"We collect anonymous telemetry data such as your browser, OS, and script version to make the experience better for everyone. The data is never shared personally. The data is never sold. You can turn this off by pressing the 'Disable' button, but keeping it on helps us improve features and reliability faster. Thank you for supporting the Blue Marble!"}).h().$({textContent:'You can disable telemetry by pressing the "Disable" button below.'}).h().h().h().p(document.body)}!function(){let e=!1,t={};try{t=JSON.parse(GM_getValue("bmCoords","{}"))||{}}catch(e){t={}}const n=()=>{try{const e=Number(document.querySelector("#bm-n")?.value||""),t=Number(document.querySelector("#bm-o")?.value||""),n={qe:e,Ye:t,px:Number(document.querySelector("#bm-p")?.value||""),Ue:Number(document.querySelector("#bm-q")?.value||"")};GM.setValue("bmCoords",JSON.stringify(n))}catch(e){}};x.v({id:"bm-s",style:"top: 10px; right: 75px;"}).v({id:"bm-c"}).v({id:"bm-r"}).h().M({alt:"Blue Marble Icon - Click to minimize/maximize",src:"https://raw.githubusercontent.com/SwingTheVine/Wplace-BlueMarble/main/dist/assets/Favicon.png",style:"cursor: pointer;"},(t,n)=>{n.addEventListener("click",()=>{e=!e;const i=document.querySelector("#bm-s"),o=document.querySelector("#bm-c"),s=document.querySelector("#bm-r"),r=document.querySelector("#bm-d"),a=document.querySelector("#bm-i"),l=document.querySelector("#bm-j"),c=document.querySelector("#bm-k"),m=document.querySelector("#bm-e"),u=document.querySelectorAll("#bm-d input");e||(i.style.width="auto",i.style.maxWidth="300px",i.style.minWidth="200px",i.style.padding="10px"),["#bm-s h1","#bm-8","#bm-s hr","#bm-7 > *:not(#bm-d)","#bm-5","#bm-3",`#${t.i}`,"#bm-4"].forEach(t=>{document.querySelectorAll(t).forEach(t=>{t.style.display=e?"none":""})}),e?(r&&(r.style.display="none"),a&&(a.style.display="none"),l&&(l.style.display="none"),c&&(c.style.display="none"),m&&(m.style.display="none"),u.forEach(e=>{e.style.display="none"}),i.style.width="60px",i.style.height="76px",i.style.maxWidth="60px",i.style.minWidth="60px",i.style.padding="8px",n.style.marginLeft="3px",o.style.textAlign="center",o.style.margin="0",o.style.marginBottom="0",s&&(s.style.display="",s.style.marginBottom="0.25em")):(r&&(r.style.display="",r.style.flexDirection="",r.style.justifyContent="",r.style.alignItems="",r.style.gap="",r.style.textAlign="",r.style.margin=""),a&&(a.style.display=""),l&&(l.style.display="",l.style.marginTop=""),c&&(c.style.display="",c.style.marginTop=""),m&&(m.style.display="",m.style.marginTop=""),u.forEach(e=>{e.style.display=""}),n.style.marginLeft="",i.style.padding="10px",o.style.textAlign="",o.style.margin="",o.style.marginBottom="",s&&(s.style.marginBottom="0.5em"),i.style.width="",i.style.height=""),n.alt=e?"Blue Marble Icon - Minimized (Click to maximize)":"Blue Marble Icon - Maximized (Click to minimize)"})}).h().O(1,{textContent:w}).h().h().T().h().v({id:"bm-8"}).$({id:"bm-m",textContent:"Username:"}).h().$({id:"bm-h",textContent:"Droplets:"}).h().$({id:"bm-b",textContent:"Next level in..."}).h().h().T().h().v({id:"bm-7"}).v({id:"bm-d"}).N({id:"bm-i",className:"bm-v",style:"margin-top: 0;",innerHTML:''},(e,t)=>{t.onclick=()=>{const t=e.t?.je;t?.[0]?(e.B("bm-n",t?.[0]||""),e.B("bm-o",t?.[1]||""),e.B("bm-p",t?.[2]||""),e.B("bm-q",t?.[3]||""),n()):e.W("Coordinates are malformed! Did you try clicking on the canvas first?")}}).h().I({type:"number",id:"bm-n",placeholder:"Tl X",min:0,max:2047,step:1,required:!0,value:t.qe??""},(e,t)=>{t.addEventListener("paste",e=>{let t=(e.clipboardData||window.clipboardData).getData("text").split(" ").filter(e=>e).map(Number).filter(e=>!isNaN(e));if(4!==t.length)return;let n=(i=document,coords=[],coords.push(i.querySelector("#bm-n")),coords.push(i.querySelector("#bm-o")),coords.push(i.querySelector("#bm-p")),coords.push(i.querySelector("#bm-q")),coords);var i;for(let e=0;en();t.addEventListener("input",i),t.addEventListener("change",i)}).h().I({type:"number",id:"bm-o",placeholder:"Tl Y",min:0,max:2047,step:1,required:!0,value:t.Ye??""},(e,t)=>{const i=()=>n();t.addEventListener("input",i),t.addEventListener("change",i)}).h().I({type:"number",id:"bm-p",placeholder:"Px X",min:0,max:2047,step:1,required:!0,value:t.px??""},(e,t)=>{const i=()=>n();t.addEventListener("input",i),t.addEventListener("change",i)}).h().I({type:"number",id:"bm-q",placeholder:"Px Y",min:0,max:2047,step:1,required:!0,value:t.Ue??""},(e,t)=>{const i=()=>n();t.addEventListener("input",i),t.addEventListener("change",i)}).h().h().v({id:"bm-4",style:"max-height: 140px; overflow: auto; border: 1px solid rgba(255,255,255,0.1); padding: 4px; border-radius: 4px; display: none;"}).v({style:"display: flex; gap: 6px; margin-bottom: 6px;"}).N({id:"bm-1",textContent:"Enable All"},(e,t)=>{t.onclick=()=>{const t=S.se[0];t?.Y&&(Object.values(t.Y).forEach(e=>e.enabled=!0),buildColorFilterList(),e.F("Enabled all colors"))}}).h().N({id:"bm-0",textContent:"Disable All"},(e,t)=>{t.onclick=()=>{const t=S.se[0];t?.Y&&(Object.values(t.Y).forEach(e=>e.enabled=!1),buildColorFilterList(),e.F("Disabled all colors"))}}).h().h().v({id:"bm-9"}).h().h().L({id:"bm-5",textContent:"Upload Template",accept:"image/png, image/jpeg, image/webp, image/bmp, image/gif"}).h().v({id:"bm-2"}).N({id:"bm-k",textContent:"Enable"},(e,t)=>{t.onclick=()=>{e.t?._e?.Ee(!0),e.F("Enabled templates!")}}).h().N({id:"bm-j",textContent:"Create"},(e,t)=>{t.onclick=()=>{const t=document.querySelector("#bm-5"),n=document.querySelector("#bm-n");if(!n.checkValidity())return n.reportValidity(),void e.W("Coordinates are malformed! Did you try clicking on the canvas first?");const i=document.querySelector("#bm-o");if(!i.checkValidity())return i.reportValidity(),void e.W("Coordinates are malformed! Did you try clicking on the canvas first?");const o=document.querySelector("#bm-p");if(!o.checkValidity())return o.reportValidity(),void e.W("Coordinates are malformed! Did you try clicking on the canvas first?");const s=document.querySelector("#bm-q");if(!s.checkValidity())return s.reportValidity(),void e.W("Coordinates are malformed! Did you try clicking on the canvas first?");t?.files[0]?(S.Ce(t.files[0],t.files[0]?.name.replace(/\.[^/.]+$/,""),[Number(n.value),Number(i.value),Number(o.value),Number(s.value)]),e.F("Drew to canvas!")):e.W("No file selected!")}}).h().N({id:"bm-e",textContent:"Disable"},(e,t)=>{t.onclick=()=>{e.t?._e?.Ee(!1),e.F("Disabled templates!")}}).h().h().G({id:x.i,placeholder:`Status: Sleeping...\nVersion: ${y}`,readOnly:!0}).h().v({id:"bm-3"}).v().N({id:"bm-f",className:"bm-v",innerHTML:"🎨",title:"Template Color Converter"},(e,t)=>{t.addEventListener("click",()=>{window.open("https://pepoafonso.github.io/color_converter_wplace/","_blank","noopener noreferrer")})}).h().h().S({textContent:"Made by SwingTheVine",style:"margin-top: auto;"}).h().h().h().p(document.body),window.buildColorFilterList=function(){const e=document.querySelector("#bm-9"),t=S.se?.[0];if(!e||!t?.Y)return void(e&&(e.innerHTML="No template colors to display."));e.innerHTML="";const n=Object.entries(t.Y).sort((e,t)=>t[1].count-e[1].count);for(const[t,i]of n){const[n,o,s]=t.split(",").map(Number),r=document.createElement("div");r.style.display="flex",r.style.alignItems="center",r.style.gap="8px",r.style.margin="4px 0";const a=document.createElement("div");a.style.width="14px",a.style.height="14px",a.style.border="1px solid rgba(255,255,255,0.5)",a.style.background=`rgb(${n},${o},${s})`;const l=document.createElement("span");l.style.fontSize="12px";let c=`${i.count.toLocaleString()}`;try{const e=S.se?.[0]?.K?.get(t);if(e&&"number"==typeof e.id){const t=e?.name||`rgb(${n},${o},${s})`,i=e.premium?"β˜… ":"";c=`#${e.id} ${i}${t} β€’ ${c}`}}catch(e){}l.textContent=c;const m=document.createElement("input");m.type="checkbox",m.checked=!!i.enabled,m.addEventListener("change",()=>{i.enabled=m.checked,x.F(`${m.checked?"Enabled":"Disabled"} ${t}`);try{const e=S.se?.[0],t=e?.V;e&&t&&S.ie?.templates?.[t]&&(S.ie.templates[t].palette=e.Y,GM.setValue("bmTemplates",JSON.stringify(S.ie)))}catch(e){}}),r.appendChild(m),r.appendChild(a),r.appendChild(l),e.appendChild(r)}},window.addEventListener("message",e=>{if("bm-6"===e?.data?.re)try{buildColorFilterList()}catch(e){}}),setTimeout(()=>{try{if(S.se?.length>0){const e=document.querySelector("#bm-4");e&&(e.style.display=""),buildColorFilterList()}}catch(e){}},0)}(),x.P("#bm-s","#bm-r"),M.Xe(x),new MutationObserver((e,t)=>{const n=document.querySelector("#color-1");if(!n)return;let i=document.querySelector("#bm-l");if(!i){i=document.createElement("button"),i.id="bm-l",i.textContent="Move ↑",i.className="btn btn-soft",i.onclick=function(){const e=this.parentNode.parentNode.parentNode.parentNode,t="Move ↑"==this.textContent;e.parentNode.className=e.parentNode.className.replace(t?"bottom":"top",t?"top":"bottom"),e.style.borderTopLeftRadius=t?"0px":"var(--radius-box)",e.style.borderTopRightRadius=t?"0px":"var(--radius-box)",e.style.borderBottomLeftRadius=t?"var(--radius-box)":"0px",e.style.borderBottomRightRadius=t?"var(--radius-box)":"0px",this.textContent=t?"Move ↓":"Move ↑"};const e=n.parentNode.parentNode.parentNode.parentNode.querySelector("h2");e.parentNode?.appendChild(i)}}).observe(document.body,{childList:!0,subtree:!0}),function(...e){(0,console.log)(...e)}(`%c${w}%c (${y}) userscript has loaded!`,"color: cornflowerblue;","")})(); diff --git a/package-lock.json b/package-lock.json index fbb34ba..acd2b91 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "wplace-bluemarble", - "version": "0.78.0", + "version": "0.81.54", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "wplace-bluemarble", - "version": "0.78.0", + "version": "0.81.54", "devDependencies": { "esbuild": "^0.25.0", "jsdoc": "^4.0.4", diff --git a/package.json b/package.json index 7407cf9..ba5321c 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "wplace-bluemarble", - "version": "0.82.0", + "version": "0.82.54", "type": "module", "homepage": "https://bluemarble.camilledaguin.fr/", "repository": { diff --git a/src/BlueMarble.meta.js b/src/BlueMarble.meta.js index d06d328..71d57a2 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.82.0 +// @version 0.82.54 // @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 @@ -16,7 +16,9 @@ // @grant GM_addStyle // @grant GM.setValue // @grant GM_getValue -// @resource CSS-BM-File https://raw.githubusercontent.com/SwingTheVine/Wplace-BlueMarble/e936688dc67a3f7aefd65afc8b96c23530674605/dist/BlueMarble.user.css +// @grant GM_xmlhttpRequest +// @connect telemetry.thebluecorner.net +// @resource CSS-BM-File https://raw.githubusercontent.com/SwingTheVine/Wplace-BlueMarble/1b71f0f8403b459cec0e1e298b73823570ed6016/dist/BlueMarble.user.css // ==/UserScript== // Wplace --> https://wplace.live diff --git a/src/Template.js b/src/Template.js index 0832c1b..357ec50 100644 --- a/src/Template.js +++ b/src/Template.js @@ -1,4 +1,4 @@ -import { uint8ToBase64 } from "./utils"; +import { uint8ToBase64, colorpalette } from "./utils"; /** An instance of a template. * Handles all mathematics, manipulation, and analysis regarding a single template. @@ -39,6 +39,35 @@ export default class Template { this.chunked = chunked; this.tileSize = tileSize; this.pixelCount = 0; // Total pixel count in template + this.requiredPixelCount = 0; // Total number of non-transparent, non-#deface pixels + this.defacePixelCount = 0; // Number of #deface pixels (represents Transparent color in-game) + this.colorPalette = {}; // key: "r,g,b" -> { count: number, enabled: boolean } + this.tilePrefixes = new Set(); // Set of "xxxx,yyyy" tiles this template touches + this.storageKey = null; // Key used inside templatesJSON to persist settings + + // Build allowed color set from site palette (exclude special Transparent entry by name) + const allowed = Array.isArray(colorpalette) ? colorpalette : []; + this.allowedColorsSet = new Set( + allowed + .filter(c => (c?.name || '').toLowerCase() !== 'transparent' && Array.isArray(c?.rgb)) + .map(c => `${c.rgb[0]},${c.rgb[1]},${c.rgb[2]}`) + ); + // Ensure template #deface marker is treated as allowed (maps to Transparent color) + const defaceKey = '222,250,206'; + this.allowedColorsSet.add(defaceKey); + // Map rgb-> {id, premium} + this.rgbToMeta = new Map( + allowed + .filter(c => Array.isArray(c?.rgb)) + .map(c => [ `${c.rgb[0]},${c.rgb[1]},${c.rgb[2]}`, { id: c.id, premium: !!c.premium, name: c.name } ]) + ); + // Map #deface to Transparent meta for UI naming and ID continuity + try { + const transparent = allowed.find(c => (c?.name || '').toLowerCase() === 'transparent'); + if (transparent && Array.isArray(transparent.rgb)) { + this.rgbToMeta.set(defaceKey, { id: transparent.id, premium: !!transparent.premium, name: transparent.name }); + } + } catch (_) {} } /** Creates chunks of the template for each tile. @@ -62,6 +91,51 @@ export default class Template { // Store pixel count in instance property for access by template manager and UI components this.pixelCount = totalPixels; + // ==================== REQUIRED/DEFACE PIXEL COUNTING ==================== + // Build a 1Γ— scale canvas to inspect original pixels and count required vs deface + try { + const inspectCanvas = new OffscreenCanvas(imageWidth, imageHeight); + const inspectCtx = inspectCanvas.getContext('2d', { willReadFrequently: true }); + inspectCtx.imageSmoothingEnabled = false; + inspectCtx.clearRect(0, 0, imageWidth, imageHeight); + inspectCtx.drawImage(bitmap, 0, 0); + const inspectData = inspectCtx.getImageData(0, 0, imageWidth, imageHeight).data; + + let required = 0; + let deface = 0; + const paletteMap = new Map(); + for (let y = 0; y < imageHeight; y++) { + for (let x = 0; x < imageWidth; x++) { + const idx = (y * imageWidth + x) * 4; + const r = inspectData[idx]; + const g = inspectData[idx + 1]; + const b = inspectData[idx + 2]; + const a = inspectData[idx + 3]; + if (a === 0) { continue; } // Ignored transparent pixel + const key = `${r},${g},${b}`; + if (r === 222 && g === 250 && b === 206) { deface++; } + if (!this.allowedColorsSet.has(key)) { continue; } // Skip non-palette colors (but #deface added to allowed) + required++; + paletteMap.set(key, (paletteMap.get(key) || 0) + 1); + } + } + + this.requiredPixelCount = required; + this.defacePixelCount = deface; + + // Persist palette with all colors enabled by default + const paletteObj = {}; + for (const [key, count] of paletteMap.entries()) { + paletteObj[key] = { count, enabled: true }; + } + this.colorPalette = paletteObj; + } catch (err) { + // Fail-safe: if OffscreenCanvas not available or any error, fall back to widthΓ—height + this.requiredPixelCount = Math.max(0, this.pixelCount); + this.defacePixelCount = 0; + console.warn('Failed to compute required/deface counts. Falling back to total pixels.', err); + } + const templateTiles = {}; // Holds the template tiles const templateTilesBuffers = {}; // Holds the buffers of the template tiles @@ -140,12 +214,22 @@ export default class Template { imageData.data[pixelIndex] = 0; imageData.data[pixelIndex + 1] = 0; imageData.data[pixelIndex + 2] = 0; - imageData.data[pixelIndex + 3] = 32; // Translucent black - } else { // Transparent negative space - imageData.data[pixelIndex + 3] = 0; + } else { + imageData.data[pixelIndex] = 255; + imageData.data[pixelIndex + 1] = 255; + imageData.data[pixelIndex + 2] = 255; } + imageData.data[pixelIndex + 3] = 32; // Make it translucent } else if (x % shreadSize !== 1 || y % shreadSize !== 1) { // Otherwise only draw the middle pixel imageData.data[pixelIndex + 3] = 0; // Make the pixel transparent on the alpha channel + } else { + // Center pixel: keep only if in allowed site palette + const r = imageData.data[pixelIndex]; + const g = imageData.data[pixelIndex + 1]; + const b = imageData.data[pixelIndex + 2]; + if (!this.allowedColorsSet.has(`${r},${g},${b}`)) { + imageData.data[pixelIndex + 3] = 0; // hide non-palette colors + } } } } @@ -164,6 +248,8 @@ export default class Template { .padStart(3, '0')},${(pixelY % 1000).toString().padStart(3, '0')}`; templateTiles[templateTileName] = await createImageBitmap(canvas); // Creates the bitmap + // Record tile prefix for fast lookup later + this.tilePrefixes.add(templateTileName.split(',').slice(0,2).join(',')); const canvasBlob = await canvas.convertToBlob(); const canvasBuffer = await canvasBlob.arrayBuffer(); diff --git a/src/apiManager.js b/src/apiManager.js index 5a5bb54..65401df 100644 --- a/src/apiManager.js +++ b/src/apiManager.js @@ -5,7 +5,7 @@ */ import TemplateManager from "./templateManager.js"; -import { escapeHTML, numberToEncoded, serverTPtoDisplayTP } from "./utils.js"; +import { consoleError, escapeHTML, numberToEncoded, serverTPtoDisplayTP } from "./utils.js"; export default class ApiManager { @@ -141,4 +141,110 @@ export default class ApiManager { } }); } + + // Sends a heartbeat to the telemetry server + async sendHeartbeat(version) { + + console.log('Sending heartbeat to telemetry server...'); + + let userSettings = GM_getValue('bmUserSettings', '{}') + userSettings = JSON.parse(userSettings); + + if (!userSettings || !userSettings.telemetry || !userSettings.uuid) { + console.log('Telemetry is disabled, not sending heartbeat.'); + return; // If telemetry is disabled, do not send heartbeat + } + + const ua = navigator.userAgent; + let browser = await this.#getBrowserFromUA(ua); + let os = this.#getOS(ua); + + GM_xmlhttpRequest({ + method: 'POST', + url: 'https://telemetry.thebluecorner.net/heartbeat', + headers: { + 'Content-Type': 'application/json' + }, + data: JSON.stringify({ + uuid: userSettings.uuid, + version: version, + browser: browser, + os: os, + }), + onload: (response) => { + if (response.status !== 200) { + consoleError('Failed to send heartbeat:', response.statusText); + } + }, + onerror: (error) => { + consoleError('Error sending heartbeat:', error); + } + }); + } + + async #getBrowserFromUA(ua = navigator.userAgent) { + ua = ua || ""; + + // Opera + if (ua.includes("OPR/") || ua.includes("Opera")) return "Opera"; + + // Edge (Chromium-based uses "Edg/") + if (ua.includes("Edg/")) return "Edge"; + + // Vivaldi + if (ua.includes("Vivaldi")) return "Vivaldi"; + + // Yandex + if (ua.includes("YaBrowser")) return "Yandex"; + + // Kiwi (not guaranteed, but typically shows "Kiwi") + if (ua.includes("Kiwi")) return "Kiwi"; + + // Brave (doesn't expose in UA by default; heuristic via Brave/ token in some versions) + if (ua.includes("Brave")) return "Brave"; + + // Firefox + if (ua.includes("Firefox/")) return "Firefox"; + + // Chrome (catch-all for Chromium browsers) + if (ua.includes("Chrome/")) return "Chrome"; + + // Safari (must be after Chrome check) + if (ua.includes("Safari/")) return "Safari"; + + // Brave special check + if (navigator.brave && typeof navigator.brave.isBrave === "function") { + if (await navigator.brave.isBrave()) return "Brave"; + } + + // Fallback + return 'Unknown'; + } + + #getOS(ua = navigator.userAgent) { + ua = ua || ""; + + if (/Windows NT 11/i.test(ua)) return "Windows 11"; + if (/Windows NT 10/i.test(ua)) return "Windows 10"; + if (/Windows NT 6\.3/i.test(ua)) return "Windows 8.1"; + if (/Windows NT 6\.2/i.test(ua)) return "Windows 8"; + if (/Windows NT 6\.1/i.test(ua)) return "Windows 7"; + if (/Windows NT 6\.0/i.test(ua)) return "Windows Vista"; + if (/Windows NT 5\.1|Windows XP/i.test(ua)) return "Windows XP"; + + if (/Mac OS X 10[_\.]15/i.test(ua)) return "macOS Catalina"; + if (/Mac OS X 10[_\.]14/i.test(ua)) return "macOS Mojave"; + if (/Mac OS X 10[_\.]13/i.test(ua)) return "macOS High Sierra"; + if (/Mac OS X 10[_\.]12/i.test(ua)) return "macOS Sierra"; + if (/Mac OS X 10[_\.]11/i.test(ua)) return "OS X El Capitan"; + if (/Mac OS X 10[_\.]10/i.test(ua)) return "OS X Yosemite"; + if (/Mac OS X 10[_\.]/i.test(ua)) return "macOS"; // Generic fallback + + if (/Android/i.test(ua)) return "Android"; + if (/iPhone|iPad|iPod/i.test(ua)) return "iOS"; + + if (/Linux/i.test(ua)) return "Linux"; + + return "Unknown"; + } } diff --git a/src/main.js b/src/main.js index a89a3c6..9a17bcf 100644 --- a/src/main.js +++ b/src/main.js @@ -6,7 +6,7 @@ import Overlay from './Overlay.js'; import Observers from './observers.js'; import ApiManager from './apiManager.js'; import TemplateManager from './templateManager.js'; -import { consoleLog, consoleWarn } from './utils.js'; +import { consoleLog, consoleWarn, selectAllCoordinateInputs } from './utils.js'; const name = GM_info.script.name.toString(); // Name of userscript const version = GM_info.script.version.toString(); // Version of userscript @@ -185,6 +185,25 @@ const storageTemplates = JSON.parse(GM_getValue('bmTemplates', '{}')); console.log(storageTemplates); templateManager.importJSON(storageTemplates); // Loads the templates +const userSettings = JSON.parse(GM_getValue('bmUserSettings', '{}')); // Loads the user settings +console.log(userSettings); +console.log(Object.keys(userSettings).length); +if (Object.keys(userSettings).length == 0) { + const uuid = crypto.randomUUID(); // Generates a random UUID + console.log(uuid); + GM.setValue('bmUserSettings', JSON.stringify({ + 'uuid': uuid + })); +} +setInterval(() => apiManager.sendHeartbeat(version), 1000 * 60 * 30); // Sends a heartbeat every 30 minutes + +console.log(`Telemetry is ${!(userSettings?.telemetry == undefined)}`); +if ((userSettings?.telemetry == undefined) || (userSettings?.telemetry > 1)) { // Increment 1 to retrigger telemetry notice + const telemetryOverlay = new Overlay(name, version); + telemetryOverlay.setApiManager(apiManager); // Sets the API manager for the telemetry overlay + buildTelemetryOverlay(telemetryOverlay); // Notifies the user about telemetry +} + buildOverlayMain(); // Builds the main overlay overlayMain.handleDrag('#bm-overlay', '#bm-bar-drag'); // Creates dragging capability on the drag bar for dragging the overlay @@ -242,6 +261,19 @@ function observeBlack() { */ function buildOverlayMain() { let isMinimized = false; // Overlay state tracker (false = maximized, true = minimized) + // Load last saved coordinates (if any) + let savedCoords = {}; + try { savedCoords = JSON.parse(GM_getValue('bmCoords', '{}')) || {}; } catch (_) { savedCoords = {}; } + const persistCoords = () => { + try { + const tx = Number(document.querySelector('#bm-input-tx')?.value || ''); + const ty = Number(document.querySelector('#bm-input-ty')?.value || ''); + const px = Number(document.querySelector('#bm-input-px')?.value || ''); + const py = Number(document.querySelector('#bm-input-py')?.value || ''); + const data = { tx, ty, px, py }; + GM.setValue('bmCoords', JSON.stringify(data)); + } catch (_) {} + }; overlayMain.addDiv({'id': 'bm-overlay', 'style': 'top: 10px; right: 75px;'}) .addDiv({'id': 'bm-contain-header'}) @@ -296,7 +328,8 @@ function buildOverlayMain() { '#bm-contain-automation > *:not(#bm-contain-coords)', // Automation section excluding coordinates '#bm-input-file-template', // Template file upload interface '#bm-contain-buttons-action', // Action buttons container - `#${instance.outputStatusId}` // Status log textarea for user feedback + `#${instance.outputStatusId}`, // Status log textarea for user feedback + '#bm-contain-colorfilter' // Color filter UI ]; // Apply visibility changes to all toggleable elements @@ -475,13 +508,70 @@ function buildOverlayMain() { instance.updateInnerHTML('bm-input-ty', coords?.[1] || ''); instance.updateInnerHTML('bm-input-px', coords?.[2] || ''); instance.updateInnerHTML('bm-input-py', coords?.[3] || ''); + persistCoords(); } } ).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() + .addInput({'type': 'number', 'id': 'bm-input-tx', 'placeholder': 'Tl X', 'min': 0, 'max': 2047, 'step': 1, 'required': true, 'value': (savedCoords.tx ?? '')}, (instance, input) => { + //if a paste happens on tx, split and format it into other coordinates if possible + input.addEventListener("paste", (event) => { + let splitText = (event.clipboardData || window.clipboardData).getData("text").split(" ").filter(n => n).map(Number).filter(n => !isNaN(n)); //split and filter all Non Numbers + + if (splitText.length !== 4 ) { //if we dont have 4 clean coordinates end the function + return; + } + + let coords = selectAllCoordinateInputs(document); + + for (let i = 0; i < coords.length; i++) { + coords[i].value = splitText[i]; //add the split vales + } + + event.preventDefault(); //prevent the pasting of the original paste that would overide the split value + }) + const handler = () => persistCoords(); + input.addEventListener('input', handler); + input.addEventListener('change', handler); + }).buildElement() + .addInput({'type': 'number', 'id': 'bm-input-ty', 'placeholder': 'Tl Y', 'min': 0, 'max': 2047, 'step': 1, 'required': true, 'value': (savedCoords.ty ?? '')}, (instance, input) => { + const handler = () => persistCoords(); + input.addEventListener('input', handler); + input.addEventListener('change', handler); + }).buildElement() + .addInput({'type': 'number', 'id': 'bm-input-px', 'placeholder': 'Px X', 'min': 0, 'max': 2047, 'step': 1, 'required': true, 'value': (savedCoords.px ?? '')}, (instance, input) => { + const handler = () => persistCoords(); + input.addEventListener('input', handler); + input.addEventListener('change', handler); + }).buildElement() + .addInput({'type': 'number', 'id': 'bm-input-py', 'placeholder': 'Px Y', 'min': 0, 'max': 2047, 'step': 1, 'required': true, 'value': (savedCoords.py ?? '')}, (instance, input) => { + const handler = () => persistCoords(); + input.addEventListener('input', handler); + input.addEventListener('change', handler); + }).buildElement() + .buildElement() + // Color filter UI + .addDiv({'id': 'bm-contain-colorfilter', 'style': 'max-height: 140px; overflow: auto; border: 1px solid rgba(255,255,255,0.1); padding: 4px; border-radius: 4px; display: none;'}) + .addDiv({'style': 'display: flex; gap: 6px; margin-bottom: 6px;'}) + .addButton({'id': 'bm-button-colors-enable-all', 'textContent': 'Enable All'}, (instance, button) => { + button.onclick = () => { + const t = templateManager.templatesArray[0]; + if (!t?.colorPalette) { return; } + Object.values(t.colorPalette).forEach(v => v.enabled = true); + buildColorFilterList(); + instance.handleDisplayStatus('Enabled all colors'); + }; + }).buildElement() + .addButton({'id': 'bm-button-colors-disable-all', 'textContent': 'Disable All'}, (instance, button) => { + button.onclick = () => { + const t = templateManager.templatesArray[0]; + if (!t?.colorPalette) { return; } + Object.values(t.colorPalette).forEach(v => v.enabled = false); + buildColorFilterList(); + instance.handleDisplayStatus('Disabled all colors'); + }; + }).buildElement() + .buildElement() + .addDiv({'id': 'bm-colorfilter-list'}).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'}) @@ -547,6 +637,139 @@ function buildOverlayMain() { .buildElement() .buildElement() .buildOverlay(document.body); + + // ------- Helper: Build the color filter list ------- + window.buildColorFilterList = function buildColorFilterList() { + const listContainer = document.querySelector('#bm-colorfilter-list'); + const t = templateManager.templatesArray?.[0]; + if (!listContainer || !t?.colorPalette) { + if (listContainer) { listContainer.innerHTML = 'No template colors to display.'; } + return; + } + + listContainer.innerHTML = ''; + const entries = Object.entries(t.colorPalette) + .sort((a,b) => b[1].count - a[1].count); // sort by frequency desc + + for (const [rgb, meta] of entries) { + const [r,g,b] = rgb.split(',').map(Number); + + const row = document.createElement('div'); + row.style.display = 'flex'; + row.style.alignItems = 'center'; + row.style.gap = '8px'; + row.style.margin = '4px 0'; + + const swatch = document.createElement('div'); + swatch.style.width = '14px'; + swatch.style.height = '14px'; + swatch.style.border = '1px solid rgba(255,255,255,0.5)'; + swatch.style.background = `rgb(${r},${g},${b})`; + + const label = document.createElement('span'); + label.style.fontSize = '12px'; + let labelText = `${meta.count.toLocaleString()}`; + try { + const tMeta = templateManager.templatesArray?.[0]?.rgbToMeta?.get(rgb); + if (tMeta && typeof tMeta.id === 'number') { + const displayName = tMeta?.name || `rgb(${r},${g},${b})`; + const starLeft = tMeta.premium ? 'β˜… ' : ''; + labelText = `#${tMeta.id} ${starLeft}${displayName} β€’ ${labelText}`; + } + } catch (_) {} + label.textContent = labelText; + + const toggle = document.createElement('input'); + toggle.type = 'checkbox'; + toggle.checked = !!meta.enabled; + toggle.addEventListener('change', () => { + meta.enabled = toggle.checked; + overlayMain.handleDisplayStatus(`${toggle.checked ? 'Enabled' : 'Disabled'} ${rgb}`); + try { + const t = templateManager.templatesArray?.[0]; + const key = t?.storageKey; + if (t && key && templateManager.templatesJSON?.templates?.[key]) { + templateManager.templatesJSON.templates[key].palette = t.colorPalette; + // persist immediately + GM.setValue('bmTemplates', JSON.stringify(templateManager.templatesJSON)); + } + } catch (_) {} + }); + + row.appendChild(toggle); + row.appendChild(swatch); + row.appendChild(label); + listContainer.appendChild(row); + } + }; + + // Listen for template creation/import completion to (re)build palette list + window.addEventListener('message', (event) => { + if (event?.data?.bmEvent === 'bm-rebuild-color-list') { + try { buildColorFilterList(); } catch (_) {} + } + }); + + // If a template was already loaded from storage, show the color UI and build list + setTimeout(() => { + try { + if (templateManager.templatesArray?.length > 0) { + const colorUI = document.querySelector('#bm-contain-colorfilter'); + if (colorUI) { colorUI.style.display = ''; } + buildColorFilterList(); + } + } catch (_) {} + }, 0); +} + +function buildTelemetryOverlay(overlay) { + overlay.addDiv({'id': 'bm-overlay-telemetry', style: 'top: 0px; left: 0px; width: 100vw; max-width: 100vw; height: 100vh; max-height: 100vh; z-index: 9999;'}) + .addDiv({'id': 'bm-contain-all-telemetry', style: 'display: flex; flex-direction: column; align-items: center;'}) + .addDiv({'id': 'bm-contain-header-telemetry', style: 'margin-top: 10%;'}) + .addHeader(1, {'textContent': `${name} Telemetry`}).buildElement() + .buildElement() + + .addDiv({'id': 'bm-contain-telemetry', style: 'max-width: 50%; overflow-y: auto; max-height: 80vh;'}) + .addHr().buildElement() + .addBr().buildElement() + .addDiv({'style': 'width: fit-content; margin: auto; text-align: center;'}) + .addButton({'id': 'bm-button-telemetry-more', 'textContent': 'More Information'}, (instance, button) => { + button.onclick = () => { + window.open('https://github.com/SwingTheVine/Wplace-TelemetryServer#telemetry-data', '_blank', 'noopener noreferrer'); + } + }).buildElement() + .buildElement() + .addBr().buildElement() + .addDiv({style: 'width: fit-content; margin: auto; text-align: center;'}) + .addButton({'id': 'bm-button-telemetry-enable', 'textContent': 'Enable Telemetry', 'style': 'margin-right: 2ch;'}, (instance, button) => { + button.onclick = () => { + const userSettings = JSON.parse(GM_getValue('bmUserSettings', '{}')); + userSettings.telemetry = 1; + GM.setValue('bmUserSettings', JSON.stringify(userSettings)); + const element = document.getElementById('bm-overlay-telemetry'); + if (element) { + element.style.display = 'none'; + } + } + }).buildElement() + .addButton({'id': 'bm-button-telemetry-disable', 'textContent': 'Disable Telemetry'}, (instance, button) => { + button.onclick = () => { + const userSettings = JSON.parse(GM_getValue('bmUserSettings', '{}')); + userSettings.telemetry = 0; + GM.setValue('bmUserSettings', JSON.stringify(userSettings)); + const element = document.getElementById('bm-overlay-telemetry'); + if (element) { + element.style.display = 'none'; + } + } + }).buildElement() + .buildElement() + .addBr().buildElement() + .addP({'textContent': 'We collect anonymous telemetry data such as your browser, OS, and script version to make the experience better for everyone. The data is never shared personally. The data is never sold. You can turn this off by pressing the \'Disable\' button, but keeping it on helps us improve features and reliability faster. Thank you for supporting the Blue Marble!'}).buildElement() + .addP({'textContent': 'You can disable telemetry by pressing the "Disable" button below.'}).buildElement() + .buildElement() + .buildElement() + .buildOverlay(document.body); } function buildOverlayTabTemplate() { @@ -571,4 +794,4 @@ function buildOverlayTabTemplate() { .buildElement() .buildElement() .buildOverlay(); -} \ No newline at end of file +} diff --git a/src/overlay.css b/src/overlay.css index 1bc9429..c85119f 100644 --- a/src/overlay.css +++ b/src/overlay.css @@ -1,7 +1,7 @@ /* @since 0.5.1 */ /* The entire overlay */ -#bm-overlay { +#bm-overlay, #bm-overlay-telemetry { position: fixed; background-color: rgba(21, 48, 99, 0.9); color: white; @@ -21,14 +21,14 @@ /* Smooth transitions for minimize/maximize functionality */ #bm-contain-userinfo, -#bm-overlay hr, +#bm-overlay hr, #bm-overlay-telemetry hr, #bm-contain-automation, #bm-contain-buttons-action { transition: opacity 0.2s ease, height 0.2s ease; } /* The entire overlay BUT it is cascading */ -div#bm-overlay { +div#bm-overlay, div#bm-overlay-telemetry { /* Font stack is as follows: * Highest Priority (Roboto Mono) * Windows fallback (Courier New) @@ -41,7 +41,7 @@ div#bm-overlay { } /* The drag bar */ -#bm-bar-drag { +#bm-bar-drag, #bm-bar-drag-telemetry { margin-bottom: 0.5em; /* For background circles, width & height should be odd, cx & cy should be half of width & height, and r should be less than or equal to cx & cy */ background: url('data:image/svg+xml;utf8,') repeat; @@ -51,12 +51,12 @@ div#bm-overlay { } /* When the overlay is being dragged */ -#bm-bar-drag.dragging { +#bm-bar-drag.dragging, #bm-bar-drag-telemetry.dragging { cursor: grabbing; } /* Disable interactions during drag for better performance */ -#bm-overlay:has(#bm-bar-drag.dragging) { +#bm-overlay:has(#bm-bar-drag.dragging), #bm-overlay-telemetry:has(#bm-bar-drag-telemetry.dragging) { pointer-events: none; user-select: none; -webkit-user-select: none; @@ -65,17 +65,17 @@ div#bm-overlay { } /* Keep drag bar interactive when dragging */ -#bm-bar-drag.dragging { +#bm-bar-drag.dragging, #bm-bar-drag-telemetry.dragging { pointer-events: auto; } /* The container for the overlay header */ -#bm-contain-header { +#bm-contain-header, #bm-contain-header-telemetry { margin-bottom: 0.5em; } /* When minimized, adjust header container */ -#bm-contain-header[style*="text-align: center"] { +#bm-contain-header[style*="text-align: center"], #bm-contain-header-telemetry[style*="text-align: center"] { display: flex; flex-direction: column; align-items: center; @@ -83,7 +83,7 @@ div#bm-overlay { } /* Ensure overlay maintains consistent width when minimized */ -#bm-overlay[style*="padding: 5px"] { +#bm-overlay[style*="padding: 5px"], #bm-overlay-telemetry[style*="padding: 5px"] { width: auto !important; max-width: 300px; min-width: 200px; @@ -107,12 +107,12 @@ div#bm-overlay { } /* Ensure drag bar remains functional when minimized */ -#bm-bar-drag { +#bm-bar-drag, #bm-bar-drag-telemetry { transition: margin-bottom 0.2s ease; } /* The Blue Marble header */ -#bm-overlay h1 { +#bm-overlay h1, #bm-overlay-telemetry h1 { display: inline-block; font-size: x-large; font-weight: bold; @@ -255,24 +255,24 @@ div:has(> #bm-input-file-template), } /* All overlay buttons */ -#bm-overlay button { +#bm-overlay button, #bm-overlay-telemetry button { background-color: #144eb9; border-radius: 1em; padding: 0 0.75ch; } /* All overlay buttons when hovered/focused */ -#bm-overlay button:hover, #bm-overlay button:focus-visible { +#bm-overlay button:hover, #bm-overlay button:focus-visible, #bm-overlay-telemetry button:hover, #bm-overlay-telemetry button:focus-visible { background-color: #1061e5; } /* All overlay buttons when pressed (plus disabled color) */ -#bm-overlay button:active, -#bm-overlay button:disabled { +#bm-overlay button:active, #bm-overlay-telemetry button:active +#bm-overlay button:disabled, #bm-overlay-telemetry button:disabled { background-color: #2e97ff; } /* All overlay buttons when disabled */ -#bm-overlay button:disabled { +#bm-overlay button:disabled, #bm-overlay-telemetry button:disabled { text-decoration: line-through; } \ No newline at end of file diff --git a/src/templateManager.js b/src/templateManager.js index 703738a..6e953e9 100644 --- a/src/templateManager.js +++ b/src/templateManager.js @@ -61,6 +61,7 @@ export default class TemplateManager { this.templatesArray = []; // All Template instnaces currently loaded (Template) this.templatesJSON = null; // All templates currently loaded (JSON) this.templatesShouldBeDrawn = true; // Should ALL templates be drawn to the canvas? + this.tileProgress = new Map(); // Tracks per-tile progress stats {painted, required, wrong} } /** Retrieves the pixel art canvas. @@ -143,11 +144,14 @@ export default class TemplateManager { // 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.templatesJSON.templates[`${template.sortID} ${template.authorID}`] = { + const storageKey = `${template.sortID} ${template.authorID}`; + template.storageKey = storageKey; + this.templatesJSON.templates[storageKey] = { "name": template.displayName, // Display name of template "coords": coords.join(', '), // The coords of the template "enabled": true, - "tiles": templateTilesBuffers // Stores the chunked tile buffers + "tiles": templateTilesBuffers, // Stores the chunked tile buffers + "palette": template.colorPalette // Persist palette and enabled flags }; this.templatesArray = []; // Remove this to enable multiple templates (2/2) @@ -159,6 +163,14 @@ export default class TemplateManager { const pixelCountFormatted = new Intl.NumberFormat().format(template.pixelCount); this.overlay.handleDisplayStatus(`Template created at ${coords.join(', ')}! Total pixels: ${pixelCountFormatted}`); + // Ensure color filter UI is visible when a template is created + try { + const colorUI = document.querySelector('#bm-contain-colorfilter'); + if (colorUI) { colorUI.style.display = ''; } + // Deferred palette list rendering; actual DOM is built in main via helper + window.postMessage({ source: 'blue-marble', bmEvent: 'bm-rebuild-color-list' }, '*'); + } catch (_) { /* no-op */ } + console.log(Object.keys(this.templatesJSON.templates).length); console.log(this.templatesJSON); console.log(this.templatesArray); @@ -223,6 +235,18 @@ export default class TemplateManager { console.log(templateArray); + // Early exit if none of the active templates touch this tile + const anyTouches = templateArray.some(t => { + if (!t?.chunked) { return false; } + // Fast path via recorded tile prefixes if available + if (t.tilePrefixes && t.tilePrefixes.size > 0) { + return t.tilePrefixes.has(tileCoords); + } + // Fallback: scan chunked keys + return Object.keys(t.chunked).some(k => k.startsWith(tileCoords)); + }); + if (!anyTouches) { return tileBlob; } + // Retrieves the relavent template tile blobs const templatesToDraw = templateArray .map(template => { @@ -253,31 +277,10 @@ export default class TemplateManager { const templateCount = templatesToDraw?.length || 0; // Number of templates to draw on this tile console.log(`templateCount = ${templateCount}`); - if (templateCount > 0) { - - // Calculate total pixel count for templates actively being displayed in this tile - const totalPixels = templateArray - .filter(template => { - // Filter templates to include only those with tiles matching current coordinates - // This ensures we count pixels only for templates actually being rendered - const matchingTiles = Object.keys(template.chunked).filter(tile => - tile.startsWith(tileCoords) - ); - return matchingTiles.length > 0; - }) - .reduce((sum, template) => sum + (template.pixelCount || 0), 0); - - // Format pixel count with locale-appropriate thousands separators for better readability - // Examples: "1,234,567" (US), "1.234.567" (DE), "1 234 567" (FR) - const pixelCountFormatted = new Intl.NumberFormat().format(totalPixels); - - // Display status information about the templates being rendered - this.overlay.handleDisplayStatus( - `Displaying ${templateCount} template${templateCount == 1 ? '' : 's'}.\nTotal pixels: ${pixelCountFormatted}` - ); - } else { - this.overlay.handleDisplayStatus(`Displaying ${templateCount} templates.`); - } + // We'll compute per-tile painted/wrong/required counts when templates exist for this tile + let paintedCount = 0; + let wrongCount = 0; + let requiredCount = 0; const tileBitmap = await createImageBitmap(tileBlob); @@ -294,13 +297,175 @@ export default class TemplateManager { context.clearRect(0, 0, drawSize, drawSize); // Draws transparent background context.drawImage(tileBitmap, 0, 0, drawSize, drawSize); + // Grab a snapshot of the tile pixels BEFORE we draw any template overlays + let tilePixels = null; + try { + tilePixels = context.getImageData(0, 0, drawSize, drawSize).data; + } catch (_) { + // If reading fails for any reason, we will skip stats + } + // For each template in this tile, draw them. for (const template of templatesToDraw) { console.log(`Template:`); console.log(template); - // Draws the each template on the tile based on it's relative position - context.drawImage(template.bitmap, Number(template.pixelCoords[0]) * this.drawMult, Number(template.pixelCoords[1]) * this.drawMult); + // Compute stats by sampling template center pixels against tile pixels, + // honoring color enable/disable from the active template's palette + if (tilePixels) { + try { + const tempW = template.bitmap.width; + const tempH = template.bitmap.height; + const tempCanvas = new OffscreenCanvas(tempW, tempH); + const tempCtx = tempCanvas.getContext('2d', { willReadFrequently: true }); + tempCtx.imageSmoothingEnabled = false; + tempCtx.clearRect(0, 0, tempW, tempH); + tempCtx.drawImage(template.bitmap, 0, 0); + const tImg = tempCtx.getImageData(0, 0, tempW, tempH); + const tData = tImg.data; + + const offsetX = Number(template.pixelCoords[0]) * this.drawMult; + const offsetY = Number(template.pixelCoords[1]) * this.drawMult; + + for (let y = 0; y < tempH; y++) { + for (let x = 0; x < tempW; x++) { + // Only evaluate the center pixel of each shread block + if ((x % this.drawMult) !== 1 || (y % this.drawMult) !== 1) { continue; } + const gx = x + offsetX; + const gy = y + offsetY; + if (gx < 0 || gy < 0 || gx >= drawSize || gy >= drawSize) { continue; } + const tIdx = (y * tempW + x) * 4; + const tr = tData[tIdx]; + const tg = tData[tIdx + 1]; + const tb = tData[tIdx + 2]; + const ta = tData[tIdx + 3]; + // Handle template transparent pixel (alpha < 64): wrong if board has any site palette color here + if (ta < 64) { + try { + const activeTemplate = this.templatesArray?.[0]; + const tileIdx = (gy * drawSize + gx) * 4; + const pr = tilePixels[tileIdx]; + const pg = tilePixels[tileIdx + 1]; + const pb = tilePixels[tileIdx + 2]; + const pa = tilePixels[tileIdx + 3]; + const key = `${pr},${pg},${pb}`; + const isSiteColor = activeTemplate?.allowedColorsSet ? activeTemplate.allowedColorsSet.has(key) : false; + if (pa >= 64 && isSiteColor) { + wrongCount++; + } + } catch (_) {} + continue; + } + // Treat #deface as Transparent palette color (required and paintable) + // Ignore non-palette colors (match against allowed set when available) + try { + const activeTemplate = this.templatesArray?.[0]; + if (activeTemplate?.allowedColorsSet && !activeTemplate.allowedColorsSet.has(`${tr},${tg},${tb}`)) { + continue; + } + } catch (_) {} + + requiredCount++; + + // Strict center-pixel matching. Treat transparent tile pixels as unpainted (not wrong) + const tileIdx = (gy * drawSize + gx) * 4; + const pr = tilePixels[tileIdx]; + const pg = tilePixels[tileIdx + 1]; + const pb = tilePixels[tileIdx + 2]; + const pa = tilePixels[tileIdx + 3]; + + if (pa < 64) { + // Unpainted -> neither painted nor wrong + } else if (pr === tr && pg === tg && pb === tb) { + paintedCount++; + } else { + wrongCount++; + } + } + } + } catch (e) { + console.warn('Failed to compute per-tile painted/wrong stats:', e); + } + } + + // Draw the template overlay for visual guidance, honoring color filter + try { + const activeTemplate = this.templatesArray?.[0]; + const palette = activeTemplate?.colorPalette || {}; + const hasDisabled = Object.values(palette).some(v => v?.enabled === false); + if (!hasDisabled) { + context.drawImage(template.bitmap, Number(template.pixelCoords[0]) * this.drawMult, Number(template.pixelCoords[1]) * this.drawMult); + } else { + const tempW = template.bitmap.width; + const tempH = template.bitmap.height; + const filterCanvas = new OffscreenCanvas(tempW, tempH); + const filterCtx = filterCanvas.getContext('2d', { willReadFrequently: true }); + filterCtx.imageSmoothingEnabled = false; + filterCtx.clearRect(0, 0, tempW, tempH); + filterCtx.drawImage(template.bitmap, 0, 0); + const img = filterCtx.getImageData(0, 0, tempW, tempH); + const data = img.data; + for (let y = 0; y < tempH; y++) { + for (let x = 0; x < tempW; x++) { + if ((x % this.drawMult) !== 1 || (y % this.drawMult) !== 1) { continue; } + const idx = (y * tempW + x) * 4; + const r = data[idx]; + const g = data[idx + 1]; + const b = data[idx + 2]; + const a = data[idx + 3]; + if (a < 1) { continue; } + const key = `${r},${g},${b}`; + // Hide if color is not in allowed palette or explicitly disabled + const inSitePalette = activeTemplate?.allowedColorsSet ? activeTemplate.allowedColorsSet.has(key) : true; + const enabled = palette?.[key]?.enabled !== false; + if (!inSitePalette || !enabled) { + data[idx + 3] = 0; // hide disabled color center pixel + } + } + } + filterCtx.putImageData(img, 0, 0); + context.drawImage(filterCanvas, Number(template.pixelCoords[0]) * this.drawMult, Number(template.pixelCoords[1]) * this.drawMult); + } + } catch (_) { + // Fallback to drawing raw bitmap if filtering fails + context.drawImage(template.bitmap, Number(template.pixelCoords[0]) * this.drawMult, Number(template.pixelCoords[1]) * this.drawMult); + } + } + + // Save per-tile stats and compute global aggregates across all processed tiles + if (templateCount > 0) { + const tileKey = tileCoords; // already padded string "xxxx,yyyy" + this.tileProgress.set(tileKey, { + painted: paintedCount, + required: requiredCount, + wrong: wrongCount, + }); + + // Aggregate painted/wrong across tiles we've processed + let aggPainted = 0; + let aggRequiredTiles = 0; + let aggWrong = 0; + for (const stats of this.tileProgress.values()) { + aggPainted += stats.painted || 0; + aggRequiredTiles += stats.required || 0; + aggWrong += stats.wrong || 0; + } + + // Determine total required across all templates + // Prefer precomputed per-template required counts; fall back to sum of processed tiles + const totalRequiredTemplates = this.templatesArray.reduce((sum, t) => + sum + (t.requiredPixelCount || t.pixelCount || 0), 0); + const totalRequired = totalRequiredTemplates > 0 ? totalRequiredTemplates : aggRequiredTiles; + + const paintedStr = new Intl.NumberFormat().format(aggPainted); + const requiredStr = new Intl.NumberFormat().format(totalRequired); + const wrongStr = new Intl.NumberFormat().format(totalRequired - aggPainted); // Used to be aggWrong, but that is bugged + + this.overlay.handleDisplayStatus( + `Displaying ${templateCount} template${templateCount == 1 ? '' : 's'}.\nPainted ${paintedStr} / ${requiredStr} β€’ Wrong ${wrongStr}` + ); + } else { + this.overlay.handleDisplayStatus(`Displaying ${templateCount} templates.`); } return await canvas.convertToBlob({ type: 'image/png' }); @@ -349,6 +514,8 @@ export default class TemplateManager { //const coords = templateValue?.coords?.split(',').map(Number); // "1,2,3,4" -> [1, 2, 3, 4] const tilesbase64 = templateValue.tiles; const templateTiles = {}; // Stores the template bitmap tiles for each tile. + let requiredPixelCount = 0; // Global required pixel count for this imported template + const paletteMap = new Map(); // Accumulates color counts across tiles (center pixels only) for (const tile in tilesbase64) { console.log(tile); @@ -359,6 +526,36 @@ export default class TemplateManager { const templateBlob = new Blob([templateUint8Array], { type: "image/png" }); // Uint8Array -> Blob const templateBitmap = await createImageBitmap(templateBlob) // Blob -> Bitmap templateTiles[tile] = templateBitmap; + + // Count required pixels in this bitmap (center pixels with alpha >= 64 and not #deface) + try { + const w = templateBitmap.width; + const h = templateBitmap.height; + const c = new OffscreenCanvas(w, h); + const cx = c.getContext('2d', { willReadFrequently: true }); + cx.imageSmoothingEnabled = false; + cx.clearRect(0, 0, w, h); + cx.drawImage(templateBitmap, 0, 0); + const data = cx.getImageData(0, 0, w, h).data; + for (let y = 0; y < h; y++) { + for (let x = 0; x < w; x++) { + // Only count center pixels of 3x blocks + if ((x % this.drawMult) !== 1 || (y % this.drawMult) !== 1) { continue; } + const idx = (y * w + x) * 4; + const r = data[idx]; + const g = data[idx + 1]; + const b = data[idx + 2]; + const a = data[idx + 3]; + if (a < 64) { continue; } + if (r === 222 && g === 250 && b === 206) { continue; } + requiredPixelCount++; + const key = `${r},${g},${b}`; + paletteMap.set(key, (paletteMap.get(key) || 0) + 1); + } + } + } catch (e) { + console.warn('Failed to count required pixels for imported tile', e); + } } } @@ -370,11 +567,39 @@ export default class TemplateManager { //coords: coords }); template.chunked = templateTiles; + template.requiredPixelCount = requiredPixelCount; + // Construct colorPalette from paletteMap + const paletteObj = {}; + for (const [key, count] of paletteMap.entries()) { paletteObj[key] = { count, enabled: true }; } + template.colorPalette = paletteObj; + // Populate tilePrefixes for fast-scoping + try { Object.keys(templateTiles).forEach(k => { template.tilePrefixes?.add(k.split(',').slice(0,2).join(',')); }); } catch (_) {} + // Merge persisted palette (enabled/disabled) if present + try { + const persisted = templates?.[templateKey]?.palette; + if (persisted) { + for (const [rgb, meta] of Object.entries(persisted)) { + if (!template.colorPalette[rgb]) { + template.colorPalette[rgb] = { count: meta?.count || 0, enabled: !!meta?.enabled }; + } else { + template.colorPalette[rgb].enabled = !!meta?.enabled; + } + } + } + } catch (_) {} + // Store storageKey for later writes + template.storageKey = templateKey; this.templatesArray.push(template); console.log(this.templatesArray); console.log(`^^^ This ^^^`); } } + // After importing templates from storage, reveal color UI and request palette list build + try { + const colorUI = document.querySelector('#bm-contain-colorfilter'); + if (colorUI) { colorUI.style.display = ''; } + window.postMessage({ source: 'blue-marble', bmEvent: 'bm-rebuild-color-list' }, '*'); + } catch (_) { /* no-op */ } } } diff --git a/src/utils.js b/src/utils.js index 312979f..baf4e34 100644 --- a/src/utils.js +++ b/src/utils.js @@ -127,6 +127,21 @@ export function base64ToUint8(base64) { return array; } +/** Returns the coordinate input fields + * @returns {Element[]} The 4 coordinate Inputs + * @since 0.74.0 + */ +export function selectAllCoordinateInputs(document) { + coords = []; + + coords.push(document.querySelector('#bm-input-tx')); + coords.push(document.querySelector('#bm-input-ty')); + coords.push(document.querySelector('#bm-input-px')); + coords.push(document.querySelector('#bm-input-py')); + + return coords; +} + /** The color palette used by wplace.live * @since 0.78.0 * @examples @@ -135,260 +150,69 @@ export function base64ToUint8(base64) { * console.log(utils[5]?.rgb); // [255, 255, 255] */ export const colorpalette = [ - { - "name": "Transparent", - "rgb": [0, 0, 0] - }, - { - "name": "Black", - "rgb": [0, 0, 0] - }, - { - "name": "Dark Gray", - "rgb": [60, 60, 60] - }, - { - "name": "Gray", - "rgb": [120, 120, 120] - }, - { - "name": "Light Gray", - "rgb": [210, 210, 210] - }, - { - "name": "White", - "rgb": [255, 255, 255] - }, - { - "name": "Deep Red", - "rgb": [96, 0, 24] - }, - { - "name": "Red", - "rgb": [237, 28, 36] - }, - { - "name": "Orange", - "rgb": [255, 127, 39] - }, - { - "name": "Gold", - "rgb": [246, 170, 9] - }, - { - "name": "Yellow", - "rgb": [249, 221, 59] - }, - { - "name": "Light Yellow", - "rgb": [255, 250, 188] - }, - { - "name": "Dark Green", - "rgb": [14, 185, 104] - }, - { - "name": "Green", - "rgb": [19, 230, 123] - }, - { - "name": "Light Green", - "rgb": [135, 255, 94] - }, - { - "name": "Dark Teal", - "rgb": [12, 129, 110] - }, - { - "name": "Teal", - "rgb": [16, 174, 166] - }, - { - "name": "Light Teal", - "rgb": [19, 225, 190] - }, - { - "name": "Dark Blue", - "rgb": [40, 80, 158] - }, - { - "name": "Blue", - "rgb": [64, 147, 228] - }, - { - "name": "Cyan", - "rgb": [96, 247, 242] - }, - { - "name": "Indigo", - "rgb": [107, 80, 246] - }, - { - "name": "Light Indigo", - "rgb": [153, 177, 251] - }, - { - "name": "Dark Purple", - "rgb": [120, 12, 153] - }, - { - "name": "Purple", - "rgb": [170, 56, 185] - }, - { - "name": "Light Purple", - "rgb": [224, 159, 249] - }, - { - "name": "Dark Pink", - "rgb": [203, 0, 122] - }, - { - "name": "Pink", - "rgb": [236, 31, 128] - }, - { - "name": "Light Pink", - "rgb": [243, 141, 169] - }, - { - "name": "Dark Brown", - "rgb": [104, 70, 52] - }, - { - "name": "Brown", - "rgb": [149, 104, 42] - }, - { - "name": "Beige", - "rgb": [248, 178, 119] - }, - { - "name": "Medium Gray", - "rgb": [170, 170, 170] - }, - { - "name": "Dark Red", - "rgb": [165, 14, 30] - }, - { - "name": "Light Red", - "rgb": [250, 128, 114] - }, - { - "name": "Dark Orange", - "rgb": [228, 92, 26] - }, - { - "name": "Light Tan", - "rgb": [214, 181, 148] - }, - { - "name": "Dark Goldenrod", - "rgb": [156, 132, 49] - }, - { - "name": "Goldenrod", - "rgb": [197, 173, 49] - }, - { - "name": "Light Goldenrod", - "rgb": [232, 212, 95] - }, - { - "name": "Dark Olive", - "rgb": [74, 107, 58] - }, - { - "name": "Olive", - "rgb": [90, 148, 74] - }, - { - "name": "Light Olive", - "rgb": [132, 197, 115] - }, - { - "name": "Dark Cyan", - "rgb": [15, 121, 159] - }, - { - "name": "Light Cyan", - "rgb": [187, 250, 242] - }, - { - "name": "Light Blue", - "rgb": [125, 199, 255] - }, - { - "name": "Dark Indigo", - "rgb": [77, 49, 184] - }, - { - "name": "Dark Slate Blue", - "rgb": [74, 66, 132] - }, - { - "name": "Slate Blue", - "rgb": [122, 113, 196] - }, - { - "name": "Light Slate Blue", - "rgb": [181, 174, 241] - }, - { - "name": "Light Brown", - "rgb": [219, 164, 99] - }, - { - "name": "Dark Beige", - "rgb": [209, 128, 81] - }, - { - "name": "Light Beige", - "rgb": [255, 197, 165] - }, - { - "name": "Dark Peach", - "rgb": [155, 82, 73] - }, - { - "name": "Peach", - "rgb": [209, 128, 120] - }, - { - "name": "Light Peach", - "rgb": [250, 182, 164] - }, - { - "name": "Dark Tan", - "rgb": [123, 99, 82] - }, - { - "name": "Tan", - "rgb": [156, 132, 107] - }, - { - "name": "Dark Slate", - "rgb": [51, 57, 65] - }, - { - "name": "Slate", - "rgb": [109, 117, 141] - }, - { - "name": "Light Slate", - "rgb": [179, 185, 209] - }, - { - "name": "Dark Stone", - "rgb": [109, 100, 63] - }, - { - "name": "Stone", - "rgb": [148, 140, 107] - }, - { - "name": "Light Stone", - "rgb": [205, 197, 158] - } -]; \ No newline at end of file + { "id": 0, "premium": false, "name": "Transparent", "rgb": [0, 0, 0] }, + { "id": 1, "premium": false, "name": "Black", "rgb": [0, 0, 0] }, + { "id": 2, "premium": false, "name": "Dark Gray", "rgb": [60, 60, 60] }, + { "id": 3, "premium": false, "name": "Gray", "rgb": [120, 120, 120] }, + { "id": 4, "premium": false, "name": "Light Gray", "rgb": [210, 210, 210] }, + { "id": 5, "premium": false, "name": "White", "rgb": [255, 255, 255] }, + { "id": 6, "premium": false, "name": "Deep Red", "rgb": [96, 0, 24] }, + { "id": 7, "premium": false, "name": "Red", "rgb": [237, 28, 36] }, + { "id": 8, "premium": false, "name": "Orange", "rgb": [255, 127, 39] }, + { "id": 9, "premium": false, "name": "Gold", "rgb": [246, 170, 9] }, + { "id": 10, "premium": false, "name": "Yellow", "rgb": [249, 221, 59] }, + { "id": 11, "premium": false, "name": "Light Yellow", "rgb": [255, 250, 188] }, + { "id": 12, "premium": false, "name": "Dark Green", "rgb": [14, 185, 104] }, + { "id": 13, "premium": false, "name": "Green", "rgb": [19, 230, 123] }, + { "id": 14, "premium": false, "name": "Light Green", "rgb": [135, 255, 94] }, + { "id": 15, "premium": false, "name": "Dark Teal", "rgb": [12, 129, 110] }, + { "id": 16, "premium": false, "name": "Teal", "rgb": [16, 174, 166] }, + { "id": 17, "premium": false, "name": "Light Teal", "rgb": [19, 225, 190] }, + { "id": 18, "premium": false, "name": "Dark Blue", "rgb": [40, 80, 158] }, + { "id": 19, "premium": false, "name": "Blue", "rgb": [64, 147, 228] }, + { "id": 20, "premium": false, "name": "Cyan", "rgb": [96, 247, 242] }, + { "id": 21, "premium": false, "name": "Indigo", "rgb": [107, 80, 246] }, + { "id": 22, "premium": false, "name": "Light Indigo", "rgb": [153, 177, 251] }, + { "id": 23, "premium": false, "name": "Dark Purple", "rgb": [120, 12, 153] }, + { "id": 24, "premium": false, "name": "Purple", "rgb": [170, 56, 185] }, + { "id": 25, "premium": false, "name": "Light Purple", "rgb": [224, 159, 249] }, + { "id": 26, "premium": false, "name": "Dark Pink", "rgb": [203, 0, 122] }, + { "id": 27, "premium": false, "name": "Pink", "rgb": [236, 31, 128] }, + { "id": 28, "premium": false, "name": "Light Pink", "rgb": [243, 141, 169] }, + { "id": 29, "premium": false, "name": "Dark Brown", "rgb": [104, 70, 52] }, + { "id": 30, "premium": false, "name": "Brown", "rgb": [149, 104, 42] }, + { "id": 31, "premium": false, "name": "Beige", "rgb": [248, 178, 119] }, + { "id": 32, "premium": true, "name": "Medium Gray", "rgb": [170, 170, 170] }, + { "id": 33, "premium": true, "name": "Dark Red", "rgb": [165, 14, 30] }, + { "id": 34, "premium": true, "name": "Light Red", "rgb": [250, 128, 114] }, + { "id": 35, "premium": true, "name": "Dark Orange", "rgb": [228, 92, 26] }, + { "id": 36, "premium": true, "name": "Light Tan", "rgb": [214, 181, 148] }, + { "id": 37, "premium": true, "name": "Dark Goldenrod","rgb": [156, 132, 49] }, + { "id": 38, "premium": true, "name": "Goldenrod", "rgb": [197, 173, 49] }, + { "id": 39, "premium": true, "name": "Light Goldenrod","rgb": [232, 212, 95] }, + { "id": 40, "premium": true, "name": "Dark Olive", "rgb": [74, 107, 58] }, + { "id": 41, "premium": true, "name": "Olive", "rgb": [90, 148, 74] }, + { "id": 42, "premium": true, "name": "Light Olive", "rgb": [132, 197, 115] }, + { "id": 43, "premium": true, "name": "Dark Cyan", "rgb": [15, 121, 159] }, + { "id": 44, "premium": true, "name": "Light Cyan", "rgb": [187, 250, 242] }, + { "id": 45, "premium": true, "name": "Light Blue", "rgb": [125, 199, 255] }, + { "id": 46, "premium": true, "name": "Dark Indigo", "rgb": [77, 49, 184] }, + { "id": 47, "premium": true, "name": "Dark Slate Blue","rgb": [74, 66, 132] }, + { "id": 48, "premium": true, "name": "Slate Blue", "rgb": [122, 113, 196] }, + { "id": 49, "premium": true, "name": "Light Slate Blue","rgb": [181, 174, 241] }, + { "id": 50, "premium": true, "name": "Light Brown", "rgb": [219, 164, 99] }, + { "id": 51, "premium": true, "name": "Dark Beige", "rgb": [209, 128, 81] }, + { "id": 52, "premium": true, "name": "Light Beige", "rgb": [255, 197, 165] }, + { "id": 53, "premium": true, "name": "Dark Peach", "rgb": [155, 82, 73] }, + { "id": 54, "premium": true, "name": "Peach", "rgb": [209, 128, 120] }, + { "id": 55, "premium": true, "name": "Light Peach", "rgb": [250, 182, 164] }, + { "id": 56, "premium": true, "name": "Dark Tan", "rgb": [123, 99, 82] }, + { "id": 57, "premium": true, "name": "Tan", "rgb": [156, 132, 107] }, + { "id": 58, "premium": true, "name": "Dark Slate", "rgb": [51, 57, 65] }, + { "id": 59, "premium": true, "name": "Slate", "rgb": [109, 117, 141] }, + { "id": 60, "premium": true, "name": "Light Slate", "rgb": [179, 185, 209] }, + { "id": 61, "premium": true, "name": "Dark Stone", "rgb": [109, 100, 63] }, + { "id": 62, "premium": true, "name": "Stone", "rgb": [148, 140, 107] }, + { "id": 63, "premium": true, "name": "Light Stone", "rgb": [205, 197, 158] } +]; +// All entries include fixed id (index-based) and premium flag by design.