SettingsManager failed to override the ${t} function inside WindowSettings.`}).D().D()},T=new WeakSet,$=function(t,e){t.disabled=!0;const i=t.dataset.status,n=this.kt?.highlight??[[1,0,1],[2,0,0],[1,-1,0],[1,1,0],[1,0,-1]];let s=[2,0,0];const o=n;switch(i){case"Disabled":t.dataset.status="Incorrect",t.ariaLabel="Sub-pixel incorrect",s=[1,...e];break;case"Incorrect":t.dataset.status="Template",t.ariaLabel="Sub-pixel template",s=[2,...e];break;case"Template":t.dataset.status="Disabled",t.ariaLabel="Sub-pixel disabled",s=[0,...e]}const a=n.findIndex(([,t,e])=>t==s[1]&&e==s[2]);0!=s[0]?-1!=a?o[a]=s:o.push(s):-1!=a&&o.splice(a,1),this.kt.highlight=o,t.disabled=!1},S=async function(t){const e=document.querySelectorAll(".bm-3 button");for(const t of e)t.disabled=!0;let i=[0,0,0,0,2,0,0,0,0];switch(t){case"Cross":i=[0,1,0,1,2,1,0,1,0];break;case"X":i=[1,0,1,0,2,0,1,0,1];break;case"Full":i=[2,2,2,2,2,2,2,2,2]}const s=document.querySelector(".bm-n")?.childNodes??[];for(let t=0;tNo futher action required. (Reason: Semantic version matches)',this.we="Good"):(n='Template storage health: Poor!
You can still use your template, but some features may not work. It is recommended that you update Blue Marble\'s template storage. (Reason: MINOR version mismatch)',this.we="Poor"):t[0]
It is guaranteed that some features are broken. You might still be able to use the template. It is HIGHLY recommended that you download all templates and update Blue Marble\'s template storage before continuing. (Reason: MAJOR version mismatch)',this.we="Bad"):(n='Template storage health: Dead!
Blue Marble can not load the template storage. (Reason: MAJOR version unknown)',this.we="Dead");const s=`
If you want to continue using your current templates, then make sure the template storage (schema) is up-to-date.
If you don't want to update the template storage, then downgrade Blue Marble to version ${r(this.scriptVersion)} to continue using your templates.
Alternatively, if you don't care about corrupting the templates listed below, you can fix any issues with the template storage by uploading a new template.`,o=function(){const t=[...document.querySelectorAll("body > div > .hidden")].filter(t=>/version:/i.test(t.textContent));if(t[0]){const e=t[0].textContent?.match(/\d+/);return e?new Date(Number(e[0])):void 0}}();let l=o?a(o):"???";this.ct("#bm-v",`${n}
Your templates were created during Blue Marble version ${r(this.scriptVersion)} with schema version ${r(this.schemaVersion)}.
The current Blue Marble version is ${r(this.version)} and requires schema version ${r(this.xe)}.
Wplace was last updated on ${l}.${"Good"!=this.we?s:""}`);const h=new M(this.name,this.version);"Dead"!=this.we&&(h.H({class:"bm-L bm-D bm-h",style:"gap: 1.5ch;"}),h.lt({textContent:"Download all templates"},(t,e)=>{e.onclick=()=>{e.disabled=!0,this.qt.ye().then(()=>{e.disabled=!1})}}).D()),"Poor"!=this.we&&"Bad"!=this.we||h.lt({textContent:`Update template storage to ${this.xe}`},(t,e)=>{e.onclick=()=>{e.disabled=!0,i(this,V,F).call(this,!0)}}).D(),h.D().L(document.querySelector("#bm-v").parentNode)},z=function(){const t=this.ge?.templates;if(Object.keys(t).length>0){const e=document.querySelector(`#${this.Ct} .bm-H`),i=new M(this.name,this.version);i.H({id:"bm-B",class:"bm-L"});for(const e in t){const n=e,o=t[e];if(t.hasOwnProperty(e)){const t=n.split(" "),e=Number(t?.[0]),a=d(t?.[1]||"0",this.qt.ve),r=o.name||`Template ${e||""}`,l=o?.coords?.split(",").map(Number),h=o.pixels?.total??void 0,c=void 0,m="number"==typeof e?s(e):"???",u="number"==typeof a?s(a):"???",b="number"==typeof h?s(h):"???";i.H({class:"bm-L bm-D"}).H({class:"bm-D",style:"flex-direction: column; gap: 0;"}).H({class:"bm-1",textContent:c||"🖼️"}).D().O({textContent:`#${m}`}).D().D().H({class:"bm-D bm-0"}).W(3,{textContent:r}).D().B({textContent:`Uploaded by user #${u}`}).D().B({textContent:`Coordinates: ${l.join(", ")}`}).D().B({textContent:`Total Pixels: ${b}`}).D().D().D()}}i.D().L(e)}},F=async function(t){if(t){const t=document.querySelector(`#${this.Ct} .bm-m`);t.innerHTML="",new M(this.name,this.version).H({class:"bm-L"}).H({class:"bm-L bm-h"}).W(1,{textContent:"Template Wizard"}).D().D().V().D().H({class:"bm-L"}).W(2,{textContent:"Status"}).D().N({textContent:"Updating template storage. Please wait..."}).D().D().D().L(t)}GM_deleteValue("bmCoords");const e=this.ge?.templates;if(Object.keys(e).length>0)for(const[t,i]of Object.entries(e))if(e.hasOwnProperty(t)){const t=new H({displayName:i.name,Ht:i.tiles});t.Rt();const e=await this.qt.Ce(t);await this.qt.Me(e,t.displayName,t.coords)}t&&(document.querySelector(`#${this.Ct}`).remove(),new R(this.name,this.version,this.xe,this.qt).Tt())};var j,E,Y,X,J,q,Z,Q,K,tt=R;j=new WeakSet,E=function(){new G(this).Tt()},Y=async function(t,e,i){i.preventDefault();const n=await async function(t){let e="";return t&&(e=t.clipboardData.getData("text/plain")),0!=e.length||(await navigator.clipboard.readText().then(t=>{e=t}).catch(t=>{l("Failed to retrieve clipboard data using navigator! Using fallback methods...")}),0!=e.length||(e=window.clipboardData?.getData("Text"))),e}(i),s=n.split(/[^a-zA-Z0-9]+/).filter(t=>t).map(Number).filter(t=>!isNaN(t));2==s.length&&"bm-O"==e.id?(t.ct("bm-O",s?.[0]||""),t.ct("bm-P",s?.[1]||"")):1==s.length?t.ct(e.id,s?.[0]||""):(t.ct("bm-Q",s?.[0]||""),t.ct("bm-R",s?.[1]||""),t.ct("bm-O",s?.[2]||""),t.ct("bm-P",s?.[3]||""))},X=new WeakSet,J=async function(){GM.setValue("bmTemplates",JSON.stringify(this.Te))},q=async function(t){const e=t.templates,i=t?.schemaVersion,n=i.split(/[-\.\+]/),s=this.schemaVersion.split(/[-\.\+]/),o=t?.scriptVersion;n[0]==s[0]?(n[1]!=s[1]&&new tt(this.name,this.version,this.schemaVersion,this).Tt(),this.fe=await async function({Ot:t,$e:i,fe:n}){if(Object.keys(e).length>0)for(const s in e){const o=s,a=e[s];if(e.hasOwnProperty(s)){const e=o.split(" "),s=Number(e?.[0]),r=e?.[1]||"0",l=a.name||`Template ${s||""}`,h={total:a.pixels?.total,colors:new Map(Object.entries(a.pixels?.colors||{}).map(([t,e])=>[Number(t),e]))},c=a.tiles,m={},d={},u=t*i;for(const t in c)if(c.hasOwnProperty(t)){const e=b(c[t]),i=new Blob([e],{type:"image/png"}),n=await createImageBitmap(i);m[t]=n;const s=new OffscreenCanvas(u,u).getContext("2d");s.drawImage(n,0,0);const o=s.getImageData(0,0,n.width,n.height);d[t]=new Uint32Array(o.data.buffer)}const p=new H({displayName:l,Dt:s||this.fe?.length||0,Lt:r||""});p.Bt=h,p.Ht=m,p.Nt=d,n.push(p)}}return n}({Ot:this.Ot,$e:this.$e,fe:this.fe})):n[0]
This is the data stored on our servers:'}).D().J().Z({innerHTML:`A unique identifier (UUIDv4) generated by Blue Marble. This enables our telemetry to function without tracking your actual user ID.
Your UUID is: ${r(this.uuid)}`}).D().Z({innerHTML:`The version of Blue Marble you are using.
Your version is: ${r(this.version)}`}).D().Z({innerHTML:`Your browser type, which is used to determine Blue Marble outages and browser popularity.
Your browser type is: ${r(t)}`}).D().Z({innerHTML:`Your OS type, which is used to determine Blue Marble outages and OS popularity.
Your OS type is: ${r(e)}`}).D().Z({innerHTML:"The date and time that Blue Marble sent the telemetry information."}).D().D().N({innerHTML:'All of the data mentioned above is aggregated every hour. This means every hour, anything that could even remotly be considered "personal data" is deleted from our server. Here, "aggregated" data means things like "42 people used Blue Marble on Google Chrome this hour", which can\'t be used to identify anyone in particular.'}).D().D().D().D().D().L(this.Mt)}}(et,it,1,at?.uuid);t.S(ht),t.Tt()}rt.Tt(),ht.ri(rt),new MutationObserver((t,e)=>{const i=document.querySelector("#color-1");if(!i)return;let n=document.querySelector("#bm-G");if(!n){n=document.createElement("button"),n.id="bm-G",n.textContent="Move ↑",n.className="btn btn-soft",n.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=i.parentNode.parentNode.parentNode.parentNode.querySelector("h2");t.parentNode?.appendChild(n)}}).observe(document.body,{childList:!0,subtree:!0}),l(`%c${et}%c (${it}) userscript has loaded!`,"color: cornflowerblue;","")})(); \ No newline at end of file +(()=>{var t=t=>{throw TypeError(t)},e=(e,i,s)=>i.has(e)?t("Cannot add the same private member more than once"):i instanceof WeakSet?i.add(e):i.set(e,s),i=(e,i,s)=>(((e,i)=>{i.has(e)||t("Cannot access private method")})(e,i),s);function s(t){return new Promise(e=>setTimeout(e,t))}function n(t){return(new Intl.NumberFormat).format(t)}function o(t){return new Intl.NumberFormat(void 0,{style:"percent",t:2,i:2}).format(t)}function a(t){return t.toLocaleString(void 0,{o:"long",l:"numeric",h:"2-digit",m:"2-digit",u:"2-digit"})}function r(t){const e=document.createElement("div");return e.textContent=t,e.innerHTML}function l(...t){(0,console.log)(...t)}function c(...t){(0,console.error)(...t)}function h(...t){(0,console.warn)(...t)}function m(t,e){if(0===t)return e[0];let i="";const s=e.length;for(;t>0;)i=e[t%s]+i,t=Math.floor(t/s);return i}function d(t,e){let i=0;const s=e.length;for(const n of t){const t=e.indexOf(n);-1==t&&c(`Invalid character '${n}' encountered whilst decoding! Is the decode alphabet/base incorrect?`),i=i*s+t}return i}function u(t){let e="";for(let i=0;i
SettingsManager failed to override the ${t} function inside WindowSettings.`}).D().D()},T=new WeakSet,S=function(t,e){t.disabled=!0;const i=t.dataset.status,s=this.Nt?.highlight??[[1,0,1],[2,0,0],[1,-1,0],[1,1,0],[1,0,-1]];let n=[2,0,0];const o=s;switch(i){case"Disabled":t.dataset.status="Incorrect",t.ariaLabel="Sub-pixel incorrect",n=[1,...e];break;case"Incorrect":t.dataset.status="Template",t.ariaLabel="Sub-pixel template",n=[2,...e];break;case"Template":t.dataset.status="Disabled",t.ariaLabel="Sub-pixel disabled",n=[0,...e];break}const a=s.findIndex(([,t,e])=>t==n[1]&&e==n[2]);0!=n[0]?-1!=a?o[a]=n:o.push(n):-1!=a&&o.splice(a,1),this.Nt.highlight=o,t.disabled=!1},k=async function(t){const e=document.querySelectorAll(".bm-3 button");for(const t of e)t.disabled=!0;let i=[0,0,0,0,2,0,0,0,0];switch(t){case"Cross":i=[0,1,0,1,2,1,0,1,0];break;case"X":i=[1,0,1,0,2,0,1,0,1];break;case"Full":i=[2,2,2,2,2,2,2,2,2];break}const n=document.querySelector(".bm-n")?.childNodes??[];for(let t=0;tNo futher action required. (Reason: Semantic version matches)',this.Pe="Good"):(s='Template storage health: Poor!
You can still use your template, but some features may not work. It is recommended that you update Blue Marble\'s template storage. (Reason: MINOR version mismatch)',this.Pe="Poor"):t[0]
It is guaranteed that some features are broken. You might still be able to use the template. It is HIGHLY recommended that you download all templates and update Blue Marble\'s template storage before continuing. (Reason: MAJOR version mismatch)',this.Pe="Bad"):(s='Template storage health: Dead!
Blue Marble can not load the template storage. (Reason: MAJOR version unknown)',this.Pe="Dead");const n=`
If you want to continue using your current templates, then make sure the template storage (schema) is up-to-date.
If you don't want to update the template storage, then downgrade Blue Marble to version ${r(this.scriptVersion)} to continue using your templates.
Alternatively, if you don't care about corrupting the templates listed below, you can fix any issues with the template storage by uploading a new template.`,o=function(){const t=[...document.querySelectorAll("body > div > .hidden")].filter(t=>/version:/i.test(t.textContent));if(t[0]){const e=t[0].textContent?.match(/\d+/);return e?new Date(Number(e[0])):void 0}}();let l=o?a(o):"???";this.ht("#bm-v",`${s}
Your templates were created during Blue Marble version ${r(this.scriptVersion)} with schema version ${r(this.schemaVersion)}.
The current Blue Marble version is ${r(this.version)} and requires schema version ${r(this.Ae)}.
Wplace was last updated on ${l}.${"Good"!=this.Pe?n:""}`);const c=new v(this.name,this.version);"Dead"!=this.Pe&&(c.L({class:"bm-L bm-D bm-h",style:"gap: 1.5ch;"}),c.lt({textContent:"Download all templates"},(t,e)=>{e.onclick=()=>{e.disabled=!0,this.ce.ze().then(()=>{e.disabled=!1})}}).D()),"Poor"!=this.Pe&&"Bad"!=this.Pe||c.lt({textContent:`Update template storage to ${this.Ae}`},(t,e)=>{e.onclick=()=>{e.disabled=!0,i(this,et,nt).call(this,!0)}}).D(),c.D().N(document.querySelector("#bm-v").parentNode)},st=function(){const t=this.Be?.templates;if(Object.keys(t).length>0){const e=document.querySelector(`#${this.Ct} .bm-H`),i=new v(this.name,this.version);i.L({id:"bm-B",class:"bm-L"});for(const e in t){const s=e,o=t[e];if(t.hasOwnProperty(e)){const t=s.split(" "),e=Number(t?.[0]),a=d(t?.[1]||"0",this.ce.We),r=o.name||`Template ${e||""}`,l=o?.coords?.split(",").map(Number),c=o.pixels?.total??void 0,h=void 0,m="number"==typeof e?n(e):"???",u="number"==typeof a?n(a):"???",b="number"==typeof c?n(c):"???";i.L({class:"bm-L bm-D"}).L({class:"bm-D",style:"flex-direction: column; gap: 0;"}).L({class:"bm-1",textContent:h||"🖼️"}).D().O({textContent:`#${m}`}).D().D().L({class:"bm-D bm-0"}).W(3,{textContent:r}).D().I({textContent:`Uploaded by user #${u}`}).D().I({textContent:`Coordinates: ${l.join(", ")}`}).D().I({textContent:`Total Pixels: ${b}`}).D().D().D()}}i.D().N(e)}},nt=async function(t){if(t){const t=document.querySelector(`#${this.Ct} .bm-m`);t.innerHTML="",new v(this.name,this.version).L({class:"bm-L"}).L({class:"bm-L bm-h"}).W(1,{textContent:"Template Wizard"}).D().D().F().D().L({class:"bm-L"}).W(2,{textContent:"Status"}).D().H({textContent:"Updating template storage. Please wait..."}).D().D().D().N(t)}GM_deleteValue("bmCoords");const e=this.Be?.templates;if(Object.keys(e).length>0)for(const[t,i]of Object.entries(e))if(e.hasOwnProperty(t)){const t=new H({displayName:i.name,Ot:i.tiles});t.Yt();const e=await this.ce.Fe(t);await this.ce.Ue(e,t.displayName,t.coords)}t&&(console.log("Restarting Template Wizard..."),document.querySelector(`#${this.Ct}`).remove(),new lt(this.name,this.version,this.Ae,this.ce).St())};var ct,ht,mt,dt,ut,bt,pt,ft,gt=lt;ct=new WeakSet,ht=function(){const t=this.$?.Nt?.filter,e=Array.isArray(t)?t:[];this.He.clear();for(const t of e){const e=Number(t);Number.isFinite(e)&&this.He.set(e,!0)}},mt=function(){this.$&&(this.$.Nt.filter=Array.from(this.He.keys()).map(t=>Number(t)).filter(t=>Number.isFinite(t)).sort((t,e)=>t-e),this.$.Le())},dt=async function(){GM.setValue("bmTemplates",JSON.stringify(this.Ve))},ut=async function(t){console.log("Parsing BlueMarble...");const e=t.templates;console.log(`BlueMarble length: ${Object.keys(e).length}`);const i=t?.schemaVersion,s=i.split(/[-\.\+]/),n=this.schemaVersion.split(/[-\.\+]/),o=t?.scriptVersion;console.log(`BlueMarble Template Schema: ${i}; Script Version: ${o}`),s[0]==n[0]?(s[1]!=n[1]&&new gt(this.name,this.version,this.schemaVersion,this).St(),this.Ie=await async function({Bt:t,Ge:i,Ie:s}){if(Object.keys(e).length>0)for(const n in e){const o=n,a=e[n];if(console.log(`Template Key: ${o}`),e.hasOwnProperty(n)){const e=o.split(" "),n=Number(e?.[0]),r=e?.[1]||"0",l=a.name||`Template ${n||""}`,c={total:a.pixels?.total,colors:new Map(Object.entries(a.pixels?.colors||{}).map(([t,e])=>[Number(t),e]))},h=a.tiles,m={},d={},u=t*i;for(const t in h)if(console.log(t),h.hasOwnProperty(t)){const e=b(h[t]),i=new Blob([e],{type:"image/png"}),s=await createImageBitmap(i);m[t]=s;const n=new OffscreenCanvas(u,u).getContext("2d");n.drawImage(s,0,0);const o=n.getImageData(0,0,s.width,s.height);d[t]=new Uint32Array(o.data.buffer)}const p=new H({displayName:l,Lt:n||this.Ie?.length||0,Ht:r||""});p.Pt=c,p.Ot=m,p.It=d,s.push(p),console.log(this.Ie),console.log("^^^ This ^^^")}}return s}({Bt:this.Bt,Ge:this.Ge,Ie:this.Ie})):s[0]
This is the data stored on our servers:'}).D()._().Z({innerHTML:`A unique identifier (UUIDv4) generated by Blue Marble. This enables our telemetry to function without tracking your actual user ID.
Your UUID is: ${r(this.uuid)}`}).D().Z({innerHTML:`The version of Blue Marble you are using.
Your version is: ${r(this.version)}`}).D().Z({innerHTML:`Your browser type, which is used to determine Blue Marble outages and browser popularity.
Your browser type is: ${r(t)}`}).D().Z({innerHTML:`Your OS type, which is used to determine Blue Marble outages and OS popularity.
Your OS type is: ${r(e)}`}).D().Z({innerHTML:"The date and time that Blue Marble sent the telemetry information."}).D().D().H({innerHTML:'All of the data mentioned above is aggregated every hour. This means every hour, anything that could even remotly be considered "personal data" is deleted from our server. Here, "aggregated" data means things like "42 people used Blue Marble on Google Chrome this hour", which can\'t be used to identify anyone in particular.'}).D().D().D().D().D().N(this.Tt)}}(wt,xt,1,Mt?.uuid);t.S(St),t.St()}!async function(){await Tt.Mi(Dt),St.Si(Ct),Ct.St(),Ct.ai(),St.Ni(Ct),St.Di(Ct),new MutationObserver((t,e)=>{const i=document.querySelector("#color-1");if(!i)return;let s=document.querySelector("#bm-G");if(!s){s=document.createElement("button"),s.id="bm-G",s.textContent="Move ↑",s.className="btn btn-soft",s.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=i.parentNode.parentNode.parentNode.parentNode.querySelector("h2");t.parentNode?.appendChild(s)}}).observe(document.body,{childList:!0,subtree:!0}),l(`%c${wt}%c (${xt}) userscript has loaded!`,"color: cornflowerblue;","")}()})(); + +// Build Hash: cb988ac65208 diff --git a/dist/BlueMarble.user.css b/dist/BlueMarble.user.css index e2e47fa..385f24c 100644 --- a/dist/BlueMarble.user.css +++ b/dist/BlueMarble.user.css @@ -1 +1,3 @@ -#bm-t p svg{display:inline;height:1em;fill:#fff}#bm-E{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;gap:1em 3ch}#bm-t .bm-z{width:fit-content;max-width:35ch;background-color:#153063e6;border-radius:1em;padding:.5em;gap:1ch;transition:background-color .3s ease}#bm-t .bm-z:hover,#bm-t.bm-z:focus-within{background-color:#112855e6}#bm-t .bm-a{display:block;border:thick double darkslategray;width:fit-content;height:fit-content;padding:1ch}#bm-t .bm-z[data-id="-2"] .bm-a{background:conic-gradient(#a00,#aa0 16.6%,#0a0,#0aa 50%,#00a 66.6%,#a0a,#a00)}#bm-t .bm-z[data-id="-1"] .bm-a{background:url('data:image/svg+xml;utf8,') repeat;background-color:transparent!important}#bm-t .bm-z[data-id="-1"] .bm-a svg{fill:#fff!important}#bm-t .bm-z[data-id="0"] .bm-a{background-color:transparent!important}#bm-t .bm-a button{padding:.75em .5ch}#bm-t .bm-a svg{width:4ch}#bm-t .bm-z>.bm-x{flex-direction:column;align-items:flex-start;gap:0}#bm-t .bm-z small{font-size:.75em}#bm-t .bm-z.bm-I{display:none}#bm-t.bm-N #bm-E{flex-direction:column;gap:.25em}#bm-t.bm-N .bm-z{width:auto;margin:0;padding:0}#bm-t.bm-N .bm-a{display:flex;width:100%;gap:.5ch;align-items:center;padding:.1em .5ch;border:none;border-radius:1em}#bm-t.bm-N .bm-a button{padding:.5em .25ch}#bm-t.bm-N .bm-a svg{width:3ch}#bm-t.bm-N .bm-z h2{font-size:.75em}#bm-t #bm-2{font-size:1em}#bm-l div:has(>.bm-3){width:fit-content;justify-content:flex-start}#bm-l .bm-3{display:flex;flex-direction:column;width:13%}#bm-l .bm-3 span{width:fit-content;margin:auto;font-size:.7em}#bm-l .bm-3 button{width:fit-content;padding:0;border-radius:0}#bm-l .bm-3 svg{stroke:#333;stroke-width:.02px;width:100%;min-width:1.5ch;max-width:14.5ch}#bm-l .bm-3 button:hover svg,#bm-l .bm-3 button:focus svg{opacity:.9}#bm-l .bm-n{display:grid;grid-template-columns:1fr 1fr 1fr;width:25%;min-width:3ch;max-width:15ch}#bm-l .bm-n>button{width:100%;padding:0;aspect-ratio:1 / 1;background-color:#fff;border:#333 1px solid;border-radius:0;box-sizing:border-box}#bm-l .bm-n>button[data-status=Incorrect]{background-color:brown}#bm-l .bm-n>button[data-status=Template]{background-color:#2f4f4f}#bm-l .bm-n>button:hover,#bm-l .bm-n>button:focus{opacity:.8}#bm-B{display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start}#bm-B>.bm-L{width:100%;justify-content:flex-start;background-color:#153063e6;border-radius:1em;padding:.5em;transition:background-color .3s ease}#bm-B>.bm-L:hover,#bm-B>.bm-L:focus-within{background-color:#112855e6}#bm-B .bm-1{height:100%;font-size:xxx-large}#bm-B .bm-0{flex-direction:column;align-items:flex-start;gap:0}div:has(>confetti-piece){position:absolute;inset:0;overflow:hidden;pointer-events:none}confetti-piece{position:absolute;top:-10px;width:var(--size);height:var(--size);background:currentColor;transform:translate3d(var(--x),-10vh,0) rotate(var(--rot));animation:fall var(--duration) linear var(--delay);will-change:transform;pointer-events:none}@keyframes fall{to{transform:translate3d(var(--x),110vh,0) rotate(calc(var(--rot) + 720deg))}}.bm-screenreader{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.bm-W{position:fixed;background-color:#153063e6;color:#fff;padding:10px;border-radius:8px;z-index:9000;transition:all .3s ease,transform 0s;top:75px;left:60px;width:auto;max-height:fit-content;max-width:calc(100% - 135px);font-family:Roboto Mono,Courier New,Monaco,DejaVu Sans Mono,monospace,Arial;letter-spacing:.05em}.bm-W.bm-N{max-width:300px}.bm-S{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.5ch;background:url('data:image/svg+xml;utf8,') repeat;cursor:grab;width:100%;height:fit-content}.bm-S.bm-M{cursor:grabbing}.bm-W:has(.bm-S.bm-M){pointer-events:none;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}.bm-S.bm-M{pointer-events:auto}.bm-T{display:inline-block;height:2.5em;margin-right:1ch;vertical-align:middle}.bm-W h1{display:inline-block;font-size:x-large;font-weight:700;vertical-align:middle}.bm-S h1,.bm-y{font-size:1.2em;user-select:none;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-shadow:3px 0px rgba(21,48,99,.5),-3px 0px rgba(21,48,99,.5),0px 3px rgba(21,48,99,.5),0px -3px rgba(21,48,99,.5),3px 3px rgba(21,48,99,.5),-3px 3px rgba(21,48,99,.5),3px -3px rgba(21,48,99,.5),-3px -3px rgba(21,48,99,.5)}.bm-S div:has(h1){display:contents}.bm-W h2{display:inline-block;font-size:larger;font-weight:700;vertical-align:middle}.bm-W h3{display:inline-block;font-size:large;font-weight:700}.bm-L.bm-h{width:fit-content;margin-left:auto;margin-right:auto}.bm-L{margin:.5em 0}.bm-W button{background-color:#144eb9;border-radius:1em;padding:0 .75ch}.bm-W button:hover,.bm-W button:focus-visible{background-color:#1061e5}.bm-W button:active,.bm-W button:disabled{background-color:#2e97ff}.bm-W button:disabled{text-decoration:line-through;cursor:not-allowed}.bm-s{border:white 1px solid;height:1.5em;width:1.5em;margin-top:2px;text-align:center;line-height:1em;padding:0!important}.bm-J{vertical-align:middle}.bm-J svg{width:50%;margin:0 auto;fill:#111}.bm-W button.bm-A{background-color:unset}.bm-A.bm-f:hover,.bm-A.bm-f:focus{background-color:#ffffff2b}.bm-A.bm-f:active{background-color:#ffffff38}.bm-A.bm-g:hover,.bm-A.bm-g:focus{background-color:#0000002b}.bm-A.bm-g:active{background-color:#00000038}input[type=number].bm-C{appearance:auto;-moz-appearance:textfield;width:5.5ch;margin-left:1ch;background-color:#0003;padding:0 .5ch;font-size:small}input[type=number].bm-C::-webkit-outer-spin-button,input[type=number].bm-C::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}div:has(>.bm-K)>button{width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bm-K,input[type=file]{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-W select{color:#fff;background-color:#144eb9;border-radius:1em;padding:0 .5ch}.bm-W label:has(input[type=checkbox]){display:flex;width:fit-content;gap:1ch}.bm-W input[type=checkbox]{width:1em}.bm-m{overflow:hidden;transition:height .3s cubic-bezier(.4,0,.2,1)}.bm-W textarea{font-size:small;background-color:#0003;padding:0 .5ch;height:5.25em;width:100%}.bm-W a:not(:has(*)){text-decoration:underline}.bm-W small{font-size:x-small;color:#d3d3d3}.bm-W ul li{list-style:disc;margin-left:5ch}.bm-W .bm-L.bm-H{max-height:calc(80vh - 150px);overflow:auto}.bm-x{display:flex;align-content:center;justify-content:space-between;align-items:center;gap:.5ch}.bm-D{display:flex;align-content:center;justify-content:center;align-items:center;gap:.5ch}.bm-_{white-space:pre;letter-spacing:0;line-height:1!important;font-size:1.6em;font-family:monospace}.bm-N .bm-L:not(#bm-F .bm-L){margin-top:.25em;margin-bottom:.25em}.bm-N h1:not(#bm-F h1){font-size:1em} +div:has(>confetti-piece){position:absolute;inset:0;overflow:hidden;pointer-events:none}confetti-piece{position:absolute;top:-10px;width:var(--size);height:var(--size);background:currentColor;transform:translate3d(var(--x),-10vh,0) rotate(var(--rot));animation:fall var(--duration) linear var(--delay);will-change:transform;pointer-events:none}@keyframes fall{to{transform:translate3d(var(--x),110vh,0) rotate(calc(var(--rot) + 720deg))}}.bm-screenreader{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.bm-W{--bm-surface-strong: rgba(9, 20, 42, .5);--bm-surface-soft: rgba(24, 41, 74, .28);--bm-surface-glass: rgba(255, 255, 255, .1);--bm-surface-glass-strong: rgba(255, 255, 255, .18);--bm-border-soft: rgba(255, 255, 255, .18);--bm-border-strong: rgba(163, 228, 255, .34);--bm-text-primary: rgba(17, 36, 66, .96);--bm-text-secondary: rgba(36, 57, 90, .84);--bm-accent-start: #baf6ff;--bm-accent-end: #81b6ff;--bm-accent-shadow: rgba(132, 182, 255, .22);--bm-font-body: "Rajdhani", "Segoe UI Variable Text", "Segoe UI", sans-serif;--bm-font-display: "Michroma", "Orbitron", "Segoe UI", sans-serif;--bm-font-mono: "Roboto Mono", "Rajdhani", "Courier New", monospace;position:fixed;isolation:isolate;overflow:hidden;background:radial-gradient(circle at 14% 12%,rgba(255,255,255,.24),transparent 18%),radial-gradient(circle at 86% 8%,rgba(186,246,255,.22),transparent 24%),radial-gradient(circle at 82% 84%,rgba(129,182,255,.18),transparent 28%),linear-gradient(145deg,#ffffff2e,#ffffff0f 22%,#6991d414 54%,#09142a2e);color:var(--bm-text-primary);padding:6px;border-radius:16px;border:1px solid var(--bm-border-soft);box-shadow:0 18px 40px #0003,inset 0 1px #ffffff38,inset 0 -1px #ffffff0d;z-index:9000;transition:background .32s ease,border-color .22s ease,box-shadow .22s ease,opacity .22s ease,transform 0s,width .22s ease,max-width .22s ease,max-height .22s ease;top:75px;left:60px;width:auto;max-height:fit-content;max-width:calc(100% - 135px);backdrop-filter:blur(26px) saturate(1.25);font-family:var(--bm-font-body);letter-spacing:.04em}.bm-W:before,.bm-W:after{content:"";position:absolute;inset:0;pointer-events:none}.bm-W:before{border-radius:inherit;padding:1px;background:linear-gradient(135deg,#ffffff73,#ffffff1f 24%,#baf6ff38 58%,#81b6ff4d);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.85}.bm-W:after{border-radius:inherit;background:linear-gradient(180deg,rgba(255,255,255,.2),transparent 24%),radial-gradient(circle at 18% 0%,rgba(255,255,255,.22),transparent 22%),radial-gradient(circle at 88% 16%,rgba(186,246,255,.18),transparent 18%);opacity:1}.bm-S{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.28ch;padding:.18rem .24rem;border-radius:10px;border:1px solid rgba(255,255,255,.16);background:radial-gradient(circle at 0 0,rgba(255,255,255,.22) 0,transparent 42%),linear-gradient(135deg,#ffffff2e,#ffffff14);cursor:grab;width:100%;height:fit-content;box-shadow:inset 0 1px #ffffff29,0 6px 18px #0000001a}.bm-S.bm-M{cursor:grabbing}.bm-W:has(.bm-S.bm-M){pointer-events:none;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}.bm-S.bm-M{pointer-events:auto}.bm-T{display:inline-block;height:2.2em;margin-right:.45ch;padding:.2rem;border-radius:12px;vertical-align:middle;background:linear-gradient(135deg,#ffffff38,#ffffff14);box-shadow:inset 0 1px #ffffff29,0 8px 18px #0000001f}.bm-W h1{display:inline-block;font-size:1rem;font-weight:700;vertical-align:middle;font-family:var(--bm-font-display);text-transform:uppercase;letter-spacing:.14em;color:#10213cf5}.bm-S h1,.bm-y{font-size:.78rem;user-select:none;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-family:var(--bm-font-display);letter-spacing:.14em;color:#122542f2;text-shadow:0 1px 0 rgba(255,255,255,.28)}.bm-S div:has(h1){display:contents}.bm-W h2{display:inline-block;font-size:.88rem;font-weight:700;vertical-align:middle;font-family:var(--bm-font-display);letter-spacing:.1em;color:#122340f5}.bm-W h3{display:inline-block;font-size:large;font-weight:700;font-family:var(--bm-font-display);letter-spacing:.08em;color:#122340f5}.bm-W p{color:var(--bm-text-secondary);line-height:1.5;letter-spacing:.035em}.bm-W hr{border:none;height:1px;margin:.32rem 0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent)}.bm-L.bm-h{width:fit-content;margin-left:auto;margin-right:auto}.bm-L{margin:.24em 0}.bm-W input,.bm-W select,.bm-W textarea,.bm-W button{font:inherit}.bm-W button{appearance:none;color:var(--bm-text-primary);font-family:var(--bm-font-display);background:linear-gradient(135deg,#ffffff38,#a4d0ff24);border:1px solid rgba(255,255,255,.22);border-radius:999px;padding:.28em .62em;min-height:1.78em;font-weight:600;letter-spacing:.1em;box-shadow:inset 0 1px #ffffff38,0 8px 20px #0000001a;transition:background .18s ease,border-color .18s ease,box-shadow .18s ease,filter .18s ease,opacity .18s ease,transform .18s ease}.bm-W button:hover,.bm-W button:focus-visible{background:linear-gradient(135deg,#ffffff47,#baf6ff2e);border-color:#e6f5ff5c;box-shadow:inset 0 1px #ffffff42,0 10px 22px #0000001f;transform:translateY(-1px)}.bm-W button:focus-visible,.bm-W input:focus-visible,.bm-W select:focus-visible,.bm-W textarea:focus-visible{outline:none;border-color:#74e7ff9e;box-shadow:0 0 0 3px #74e7ff26,inset 0 1px #ffffff1f}.bm-W button:active{transform:translateY(0) scale(.98);filter:brightness(.98);box-shadow:inset 0 1px #ffffff1f,0 8px 16px #12244e3d}.bm-W button:disabled{opacity:.56;cursor:not-allowed;text-decoration:none;transform:none;filter:saturate(.72);box-shadow:none}.bm-W button.bm-1G{color:#07203b;background:linear-gradient(135deg,#ffffff6b,#baf6ff57);border-color:#eff8ff6b;box-shadow:inset 0 1px #ffffff70,0 10px 22px #81b6ff24}.bm-W button.bm-1G:hover,.bm-W button.bm-1G:focus-visible{background:linear-gradient(135deg,#ffffff85,#ccfaff5c)}.bm-W button.bm-1u{background:linear-gradient(135deg,#ffffff29,#ffffff14);border-color:#ffffff2e;box-shadow:inset 0 1px #ffffff24,0 8px 20px #00000014}.bm-W button.bm-1u:hover,.bm-W button.bm-1u:focus-visible{background:linear-gradient(135deg,#ffffff3d,#baf6ff1f)}.bm-s{display:inline-flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.16);inline-size:1.62rem;block-size:1.62rem;min-height:1.62rem!important;min-width:1.62rem;margin-top:0;text-align:center;line-height:1;padding:0!important;aspect-ratio:1 / 1;border-radius:50%!important;background:linear-gradient(135deg,#ffffff3d,#ffffff1a)!important;box-shadow:inset 0 1px #ffffff2e,0 8px 18px #0000001a!important;overflow:hidden;flex:0 0 auto;font-size:.74rem}.bm-s svg{display:block;width:70%;height:70%;flex:0 0 auto;margin:auto;color:currentColor;pointer-events:none;transform:translateZ(0);overflow:visible}.bm-s .bm-1g{width:68%;height:68%;transform:translateY(.5px) translateZ(0)}.bm-s .bm-1b{width:62%;height:62%;transform:translateY(.75px) translateZ(0)}#bm-t.bm-N .bm-s .bm-1b{transform:translateZ(0)}.bm-J{vertical-align:middle}.bm-J svg{width:50%;margin:0 auto;fill:#111}.bm-W button.bm-A{background:transparent!important;box-shadow:none!important;border-color:transparent!important}.bm-A.bm-f:hover,.bm-A.bm-f:focus{background-color:#ffffff2e!important}.bm-A.bm-f:active{background-color:#ffffff3d!important}.bm-A.bm-g:hover,.bm-A.bm-g:focus{background-color:#00000024!important}.bm-A.bm-g:active{background-color:#0003!important}.bm-W input[type=number],.bm-W select,.bm-W textarea{color:var(--bm-text-primary);font-family:var(--bm-font-body);background:linear-gradient(180deg,#ffffff29,#ffffff0f);border:1px solid rgba(255,255,255,.18);border-radius:12px;box-shadow:inset 0 1px #ffffff1f}input[type=number].bm-C{appearance:auto;-moz-appearance:textfield;width:5.9ch;margin-left:1ch;padding:.2em .35ch;font-size:small}input[type=number].bm-C::-webkit-outer-spin-button,input[type=number].bm-C::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}div:has(>.bm-K)>button{width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bm-K,input[type=file]{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-W select{padding:.22em .45ch}.bm-W label:has(input[type=checkbox]){display:flex;width:fit-content;gap:1ch;align-items:center;color:var(--bm-text-secondary)}.bm-W input[type=checkbox]{width:1em;accent-color:#74e7ff}.bm-m{overflow:hidden;max-height:calc(100% - 5px);transition:height .3s cubic-bezier(.4,0,.2,1)}.bm-W textarea{font-size:small;padding:.38em .52em;height:4em;width:100%;resize:vertical;line-height:1.45}.bm-W textarea::placeholder,.bm-W input::placeholder{color:#2f446699}.bm-W a:not(:has(*)){color:#1558a4f0;text-decoration:underline;text-decoration-color:#1558a459}.bm-W small{font-size:x-small;font-family:var(--bm-font-display);letter-spacing:.12em;color:var(--bm-text-secondary)}.bm-W ul li{list-style:disc;margin-left:5ch}.bm-W .bm-L.bm-H{max-height:var(--bm-H-max-height, calc(80vh - 150px) );overflow:auto;scrollbar-width:thin;scrollbar-color:rgba(146,221,255,.42) rgba(255,255,255,.05)}.bm-W .bm-L.bm-H::-webkit-scrollbar{width:10px;height:10px}.bm-W .bm-L.bm-H::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#74e7ff7a,#538dff66);border-radius:999px;border:2px solid transparent;background-clip:padding-box}.bm-W .bm-L.bm-H::-webkit-scrollbar-track{background:#ffffff0a;border-radius:999px}.bm-x{display:flex;align-content:center;justify-content:space-between;align-items:center;gap:.35ch}.bm-D{display:flex;align-content:center;justify-content:center;align-items:center;gap:.35ch}.bm-_{white-space:pre;letter-spacing:0;line-height:1!important;font-size:1.6em;font-family:monospace}.bm-N .bm-L:not(#bm-F .bm-L){margin-top:.18em;margin-bottom:.18em}.bm-N h1:not(#bm-F h1){font-size:1em}#bm-t .bm-1z{display:block;width:1.28em;height:1.28em;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;overflow:visible}#bm-t p svg{display:inline-block;height:1em;width:1em;color:currentColor;vertical-align:-.16em}#bm-t:not(.bm-N){width:min(50rem,calc(100vw - .55rem));max-width:min(50rem,calc(100vw - .55rem))!important}#bm-t .bm-1N{padding-top:.08rem}#bm-t .bm-1F{gap:.22rem;flex-wrap:wrap;width:100%;padding:.16rem}#bm-t .bm-1F>button{flex:1 1 10rem}#bm-t .bm-1r{padding-right:.08rem}#bm-t .bm-1A{display:grid;grid-template-columns:minmax(16rem,20rem) minmax(0,1fr);gap:.24rem .3rem;align-items:stretch}#bm-t .bm-1A>hr,#bm-t .bm-1t{grid-column:1 / -1}#bm-t .bm-1s,#bm-t .bm-20,#bm-t .bm-1t{padding:.38rem .48rem;border-radius:13px;border:1px solid rgba(255,255,255,.18);background:linear-gradient(155deg,#ffffff2e,#ffffff12);box-shadow:inset 0 1px #ffffff29,0 8px 20px #00000014}#bm-t .bm-1s{display:grid;gap:.18rem}#bm-t .bm-1s br{display:none}#bm-t .bm-1s span{display:block;padding:.28rem .38rem;border-radius:10px;background:linear-gradient(180deg,#fff3,#ffffff14)}#bm-t .bm-20 p{margin:0}#bm-t .bm-1t fieldset{border:none;padding:0;margin:0}#bm-t .bm-1t legend{margin-bottom:.12rem}#bm-t .bm-1t .bm-L{margin-top:.1rem;margin-bottom:.1rem}#bm-t .bm-1l{display:flex;justify-content:flex-start}#bm-t .bm-1l button{min-width:7.8rem}#bm-E{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:stretch;gap:.3rem}#bm-t .bm-z{position:relative;overflow:hidden;width:fit-content;max-width:35ch;padding:.28rem;gap:.28rem;border-radius:13px;border:1px solid rgba(255,255,255,.18);background:linear-gradient(160deg,#ffffff2e,#ffffff12);box-shadow:inset 0 1px #ffffff29,0 8px 20px #00000014;transition:background .25s ease,border-color .25s ease,box-shadow .25s ease,transform .25s ease}#bm-t .bm-z:before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at top right,rgba(255,255,255,.18),transparent 24%),radial-gradient(circle at 18% 0%,rgba(186,246,255,.12),transparent 22%)}#bm-t .bm-z:hover,#bm-t .bm-z:focus-within{transform:translateY(-2px);border-color:#92ddff42;background:linear-gradient(160deg,#ffffff38,#baf6ff1a);box-shadow:inset 0 1px #fff3,0 10px 24px #0000001a}#bm-t .bm-a{display:block;width:fit-content;height:fit-content;padding:.26rem;border:1px solid rgba(255,255,255,.18);border-radius:10px;box-shadow:inset 0 1px #ffffff24,0 6px 16px #00000014}#bm-t .bm-z[data-id="-2"] .bm-a{background:conic-gradient(#a00,#aa0 16.6%,#0a0,#0aa 50%,#00a 66.6%,#a0a,#a00)}#bm-t .bm-z[data-id="-1"] .bm-a{background:url('data:image/svg+xml;utf8,') repeat;background-color:transparent!important}#bm-t .bm-z[data-id="-1"] .bm-a svg{color:#fff!important}#bm-t .bm-z[data-id="0"] .bm-a{background-color:transparent!important}#bm-t .bm-a button{display:inline-flex;align-items:center;justify-content:center;padding:.24em;min-width:2.05rem;min-height:2.05rem;border-radius:999px;line-height:1}#bm-t .bm-a .bm-1z{width:1.55rem;height:1.55rem;filter:drop-shadow(0 1px 0 rgba(255,255,255,.18))}#bm-t .bm-z>.bm-x{flex-direction:column;align-items:flex-start;gap:.02rem}#bm-t .bm-z h2{margin:.04rem 0 0}#bm-t .bm-z .bm-6{margin:.1rem 0 0}#bm-t .bm-z small{font-size:.75em}#bm-t .bm-z.bm-I{display:none}#bm-t.bm-N{--bm-H-max-height: 100%;display:grid;grid-template-rows:auto minmax(0,1fr);width:360px;height:min(60vh,22rem);min-width:360px;min-height:180px;max-width:min(1000px,calc(100vw - 16px))!important;max-height:min(1400px,calc(100vh - 16px))!important;overflow:hidden;box-sizing:border-box;position:fixed;transition:background .32s ease,border-color .22s ease,box-shadow .22s ease,transform 0s}#bm-t.bm-N .bm-m{display:grid;grid-template-rows:auto auto auto auto minmax(0,1fr);grid-row:2;min-height:0;min-width:0;overflow:hidden}#bm-t.bm-N .bm-1F{gap:.16rem;flex-wrap:nowrap;width:100%;padding:.12rem}#bm-t.bm-N .bm-1F>button{flex:1 1 0;min-width:0}#bm-t.bm-N #bm-E{flex-direction:column;align-items:stretch;gap:.16rem;width:100%;align-self:stretch;min-width:0;box-sizing:border-box}#bm-t.bm-N .bm-z{width:100%;max-width:none;align-self:stretch;flex:1 1 auto;min-width:0;margin:0;padding:.12rem;border-radius:11px;box-sizing:border-box}#bm-t.bm-N .bm-z>.bm-x{width:100%;min-width:0;flex:1 1 auto}#bm-t.bm-N .bm-L.bm-H{display:block;grid-row:5;min-height:0;min-width:0;height:100%;width:100%;max-height:100%!important;overflow:auto;box-sizing:border-box}#bm-t.bm-N .bm-1O{position:absolute;right:4px;bottom:4px;display:flex;width:20px;height:20px;align-items:flex-end;justify-content:flex-end;padding-right:4px;padding-bottom:4px;box-sizing:border-box;z-index:5;cursor:nwse-resize;pointer-events:auto;opacity:.78;touch-action:none;user-select:none;color:#ffffffdb;background:linear-gradient(135deg,#ffffff24,#538dff24);border:1px solid rgba(255,255,255,.12);border-radius:8px;box-shadow:inset 0 1px #ffffff14}#bm-t.bm-N .bm-1O:hover,#bm-t.bm-N .bm-1O.bm-2g{opacity:1;border-color:#92ddff5c;box-shadow:inset 0 1px #ffffff1a,0 8px 16px #00000029}#bm-t.bm-N .bm-a{display:flex;width:100%;min-width:0;flex:1 1 auto;gap:.5ch;align-items:center;padding:.1rem .2rem;border:none;border-radius:8px;box-sizing:border-box}#bm-t.bm-N .bm-a button{padding:.2em;flex:0 0 auto}#bm-t.bm-N .bm-a .bm-1z{width:1.36rem;height:1.36rem}#bm-t.bm-N .bm-z h2{font-size:.78rem;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#bm-t #bm-2{display:inline-flex;align-items:center;padding:.08rem .24rem;border-radius:999px;background:#ffffff1f;box-shadow:inset 0 1px #ffffff14;font-size:1em}@media (max-width: 980px){#bm-t:not(.bm-N){width:min(100vw - .35rem,50rem);max-width:min(100vw - .35rem,50rem)!important}#bm-t .bm-1A{grid-template-columns:1fr}#bm-t .bm-20,#bm-t .bm-1t,#bm-t .bm-1A>hr{grid-column:auto}}#bm-F{width:min(25.5rem,calc(100vw - .65rem));max-width:min(25.5rem,calc(100vw - .65rem))!important}#bm-F .bm-m{display:flex;flex-direction:column}#bm-F .bm-2d,#bm-F .bm-29{position:relative;overflow:hidden;border-radius:14px;border:1px solid rgba(255,255,255,.18);background:linear-gradient(150deg,#ffffff2e,#ffffff14);box-shadow:inset 0 1px #fff3,0 10px 24px #0000001a}#bm-F .bm-2d:before,#bm-F .bm-29:before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at top right,rgba(255,255,255,.2),transparent 26%),radial-gradient(circle at 20% 0%,rgba(186,246,255,.16),transparent 24%)}#bm-F .bm-2d{display:flex;align-items:center;gap:.5rem;padding:.48rem .58rem}#bm-F .bm-2d h1{margin:0}#bm-F .bm-28{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.24rem}#bm-F .bm-1I{min-width:0;min-height:2.55rem;display:flex;align-items:flex-start;padding:.34rem .45rem;border-radius:11px;border:1px solid rgba(255,255,255,.18);background:linear-gradient(160deg,#ffffff2e,#ffffff12);box-shadow:inset 0 1px #ffffff29;color:#12233ff5;line-height:1.22}#bm-F .bm-1I>span,#bm-F .bm-1I>time{min-width:0}#bm-F .bm-1h,#bm-F .bm-1i{flex-direction:column;justify-content:center;gap:.08rem}#bm-F .bm-1C{display:inline-block;font-size:1.3em;color:#0f1f38f5;white-space:normal;overflow-wrap:anywhere}#bm-F .bm-1C b{font-size:1em}#bm-F .bm-1B{color:#314769d1;font-size:.62rem;letter-spacing:.08em;font-family:var(--bm-font-display);text-transform:uppercase}#bm-F .bm-1I time{white-space:nowrap;font-family:var(--bm-font-mono);letter-spacing:.06em}#bm-F .bm-29{padding:.48rem}#bm-F .bm-22{display:grid;grid-template-columns:auto repeat(4,minmax(0,1fr));gap:.22rem;align-items:center}#bm-F .bm-22 .bm-J{width:1.8rem;height:1.8rem}#bm-F .bm-22 .bm-C{width:100%;margin-left:0;text-align:center}#bm-F .bm-23,#bm-F .bm-24{margin-top:.24rem}#bm-F .bm-23>div{width:100%}#bm-F .bm-1Y{gap:.24rem;margin-top:.3rem}#bm-F .bm-1Y>button{flex:1 1 0}#bm-F .bm-24 textarea{min-height:4.1rem}@media (max-width: 720px){#bm-F{width:min(100vw - .45rem,25.5rem);max-width:min(100vw - .45rem,25.5rem)!important}#bm-F .bm-28{grid-template-columns:1fr}#bm-F .bm-22{grid-template-columns:repeat(2,minmax(0,1fr))}#bm-F .bm-22 .bm-J{grid-column:1 / -1;width:100%;aspect-ratio:auto;height:1.8rem}#bm-F .bm-1Y{flex-direction:column}}#bm-l div:has(>.bm-3){width:fit-content;justify-content:flex-start}#bm-l .bm-3{display:flex;flex-direction:column;width:13%}#bm-l .bm-3 span{width:fit-content;margin:auto;font-size:.7em}#bm-l .bm-3 button{width:fit-content;padding:0;border-radius:0}#bm-l .bm-3 svg{stroke:#333;stroke-width:.02px;width:100%;min-width:1.5ch;max-width:14.5ch}#bm-l .bm-3 button:hover svg,#bm-l .bm-3 button:focus svg{opacity:.9}#bm-l .bm-n{display:grid;grid-template-columns:1fr 1fr 1fr;width:25%;min-width:3ch;max-width:15ch}#bm-l .bm-n>button{width:100%;padding:0;aspect-ratio:1 / 1;background-color:#fff;border:#333 1px solid;border-radius:0;box-sizing:border-box}#bm-l .bm-n>button[data-status=Incorrect]{background-color:brown}#bm-l .bm-n>button[data-status=Template]{background-color:#2f4f4f}#bm-l .bm-n>button:hover,#bm-l .bm-n>button:focus{opacity:.8}#bm-B{display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start}#bm-B>.bm-L{width:100%;justify-content:flex-start;background-color:#153063e6;border-radius:1em;padding:.5em;transition:background-color .3s ease}#bm-B>.bm-L:hover,#bm-B>.bm-L:focus-within{background-color:#112855e6}#bm-B .bm-1{height:100%;font-size:xxx-large}#bm-B .bm-0{flex-direction:column;align-items:flex-start;gap:0} + +/* Build Hash: 3c5ee345af9c */ diff --git a/dist/BlueMarble.user.js b/dist/BlueMarble.user.js index 6fecec5..495d9b9 100644 --- a/dist/BlueMarble.user.js +++ b/dist/BlueMarble.user.js @@ -2,7 +2,7 @@ // @name Blue Marble // @name:en Blue Marble // @namespace https://github.com/SwingTheVine/ -// @version 0.92.0 +// @version 0.94.0 // @description A userscript to enhance the user experience on Wplace.live. This includes, but is not limited to: uploading images to display locally on a canvas, adding a button to move the Wplace color palette menu, and other QoL features. // @description:en A userscript to enhance the user experience on Wplace.live. This includes, but is not limited to: uploading images to display locally on a canvas, adding a button to move the Wplace color palette menu, and other QoL features. // @author SwingTheVine @@ -39,4 +39,6 @@ The "Blue Marble" image is owned by NASA. */ -(()=>{var t=t=>{throw TypeError(t)},e=(e,i,n)=>i.has(e)?t("Cannot add the same private member more than once"):i instanceof WeakSet?i.add(e):i.set(e,n),i=(e,i,n)=>(((e,i)=>{i.has(e)||t("Cannot access private method")})(e,i),n);function n(t){return new Promise(e=>setTimeout(e,t))}function s(t){return(new Intl.NumberFormat).format(t)}function o(t){return new Intl.NumberFormat(void 0,{style:"percent",t:2,i:2}).format(t)}function a(t){return t.toLocaleString(void 0,{o:"long",l:"numeric",h:"2-digit",m:"2-digit",u:"2-digit"})}function r(t){const e=document.createElement("div");return e.textContent=t,e.innerHTML}function l(...t){(0,console.log)(...t)}function h(...t){(0,console.error)(...t)}function c(...t){(0,console.warn)(...t)}function m(t,e){if(0===t)return e[0];let i="";const n=e.length;for(;t>0;)i=e[t%n]+i,t=Math.floor(t/n);return i}function d(t,e){let i=0;const n=e.length;for(const s of t){const t=e.indexOf(s);-1==t&&h(`Invalid character '${s}' encountered whilst decoding! Is the decode alphabet/base incorrect?`),i=i*n+t}return i}function u(t){let e="";for(let i=0;i
SettingsManager failed to override the ${t} function inside WindowSettings.`}).D().D()},T=new WeakSet,$=function(t,e){t.disabled=!0;const i=t.dataset.status,n=this.kt?.highlight??[[1,0,1],[2,0,0],[1,-1,0],[1,1,0],[1,0,-1]];let s=[2,0,0];const o=n;switch(i){case"Disabled":t.dataset.status="Incorrect",t.ariaLabel="Sub-pixel incorrect",s=[1,...e];break;case"Incorrect":t.dataset.status="Template",t.ariaLabel="Sub-pixel template",s=[2,...e];break;case"Template":t.dataset.status="Disabled",t.ariaLabel="Sub-pixel disabled",s=[0,...e]}const a=n.findIndex(([,t,e])=>t==s[1]&&e==s[2]);0!=s[0]?-1!=a?o[a]=s:o.push(s):-1!=a&&o.splice(a,1),this.kt.highlight=o,t.disabled=!1},S=async function(t){const e=document.querySelectorAll(".bm-3 button");for(const t of e)t.disabled=!0;let i=[0,0,0,0,2,0,0,0,0];switch(t){case"Cross":i=[0,1,0,1,2,1,0,1,0];break;case"X":i=[1,0,1,0,2,0,1,0,1];break;case"Full":i=[2,2,2,2,2,2,2,2,2]}const s=document.querySelector(".bm-n")?.childNodes??[];for(let t=0;tNo futher action required. (Reason: Semantic version matches)',this.we="Good"):(n='Template storage health: Poor!
You can still use your template, but some features may not work. It is recommended that you update Blue Marble\'s template storage. (Reason: MINOR version mismatch)',this.we="Poor"):t[0]
It is guaranteed that some features are broken. You might still be able to use the template. It is HIGHLY recommended that you download all templates and update Blue Marble\'s template storage before continuing. (Reason: MAJOR version mismatch)',this.we="Bad"):(n='Template storage health: Dead!
Blue Marble can not load the template storage. (Reason: MAJOR version unknown)',this.we="Dead");const s=`
If you want to continue using your current templates, then make sure the template storage (schema) is up-to-date.
If you don't want to update the template storage, then downgrade Blue Marble to version ${r(this.scriptVersion)} to continue using your templates.
Alternatively, if you don't care about corrupting the templates listed below, you can fix any issues with the template storage by uploading a new template.`,o=function(){const t=[...document.querySelectorAll("body > div > .hidden")].filter(t=>/version:/i.test(t.textContent));if(t[0]){const e=t[0].textContent?.match(/\d+/);return e?new Date(Number(e[0])):void 0}}();let l=o?a(o):"???";this.ct("#bm-v",`${n}
Your templates were created during Blue Marble version ${r(this.scriptVersion)} with schema version ${r(this.schemaVersion)}.
The current Blue Marble version is ${r(this.version)} and requires schema version ${r(this.xe)}.
Wplace was last updated on ${l}.${"Good"!=this.we?s:""}`);const h=new M(this.name,this.version);"Dead"!=this.we&&(h.H({class:"bm-L bm-D bm-h",style:"gap: 1.5ch;"}),h.lt({textContent:"Download all templates"},(t,e)=>{e.onclick=()=>{e.disabled=!0,this.qt.ye().then(()=>{e.disabled=!1})}}).D()),"Poor"!=this.we&&"Bad"!=this.we||h.lt({textContent:`Update template storage to ${this.xe}`},(t,e)=>{e.onclick=()=>{e.disabled=!0,i(this,V,F).call(this,!0)}}).D(),h.D().L(document.querySelector("#bm-v").parentNode)},z=function(){const t=this.ge?.templates;if(Object.keys(t).length>0){const e=document.querySelector(`#${this.Ct} .bm-H`),i=new M(this.name,this.version);i.H({id:"bm-B",class:"bm-L"});for(const e in t){const n=e,o=t[e];if(t.hasOwnProperty(e)){const t=n.split(" "),e=Number(t?.[0]),a=d(t?.[1]||"0",this.qt.ve),r=o.name||`Template ${e||""}`,l=o?.coords?.split(",").map(Number),h=o.pixels?.total??void 0,c=void 0,m="number"==typeof e?s(e):"???",u="number"==typeof a?s(a):"???",b="number"==typeof h?s(h):"???";i.H({class:"bm-L bm-D"}).H({class:"bm-D",style:"flex-direction: column; gap: 0;"}).H({class:"bm-1",textContent:c||"🖼️"}).D().O({textContent:`#${m}`}).D().D().H({class:"bm-D bm-0"}).W(3,{textContent:r}).D().B({textContent:`Uploaded by user #${u}`}).D().B({textContent:`Coordinates: ${l.join(", ")}`}).D().B({textContent:`Total Pixels: ${b}`}).D().D().D()}}i.D().L(e)}},F=async function(t){if(t){const t=document.querySelector(`#${this.Ct} .bm-m`);t.innerHTML="",new M(this.name,this.version).H({class:"bm-L"}).H({class:"bm-L bm-h"}).W(1,{textContent:"Template Wizard"}).D().D().V().D().H({class:"bm-L"}).W(2,{textContent:"Status"}).D().N({textContent:"Updating template storage. Please wait..."}).D().D().D().L(t)}GM_deleteValue("bmCoords");const e=this.ge?.templates;if(Object.keys(e).length>0)for(const[t,i]of Object.entries(e))if(e.hasOwnProperty(t)){const t=new H({displayName:i.name,Ht:i.tiles});t.Rt();const e=await this.qt.Ce(t);await this.qt.Me(e,t.displayName,t.coords)}t&&(document.querySelector(`#${this.Ct}`).remove(),new R(this.name,this.version,this.xe,this.qt).Tt())};var j,E,Y,X,J,q,Z,Q,K,tt=R;j=new WeakSet,E=function(){new G(this).Tt()},Y=async function(t,e,i){i.preventDefault();const n=await async function(t){let e="";return t&&(e=t.clipboardData.getData("text/plain")),0!=e.length||(await navigator.clipboard.readText().then(t=>{e=t}).catch(t=>{l("Failed to retrieve clipboard data using navigator! Using fallback methods...")}),0!=e.length||(e=window.clipboardData?.getData("Text"))),e}(i),s=n.split(/[^a-zA-Z0-9]+/).filter(t=>t).map(Number).filter(t=>!isNaN(t));2==s.length&&"bm-O"==e.id?(t.ct("bm-O",s?.[0]||""),t.ct("bm-P",s?.[1]||"")):1==s.length?t.ct(e.id,s?.[0]||""):(t.ct("bm-Q",s?.[0]||""),t.ct("bm-R",s?.[1]||""),t.ct("bm-O",s?.[2]||""),t.ct("bm-P",s?.[3]||""))},X=new WeakSet,J=async function(){GM.setValue("bmTemplates",JSON.stringify(this.Te))},q=async function(t){const e=t.templates,i=t?.schemaVersion,n=i.split(/[-\.\+]/),s=this.schemaVersion.split(/[-\.\+]/),o=t?.scriptVersion;n[0]==s[0]?(n[1]!=s[1]&&new tt(this.name,this.version,this.schemaVersion,this).Tt(),this.fe=await async function({Ot:t,$e:i,fe:n}){if(Object.keys(e).length>0)for(const s in e){const o=s,a=e[s];if(e.hasOwnProperty(s)){const e=o.split(" "),s=Number(e?.[0]),r=e?.[1]||"0",l=a.name||`Template ${s||""}`,h={total:a.pixels?.total,colors:new Map(Object.entries(a.pixels?.colors||{}).map(([t,e])=>[Number(t),e]))},c=a.tiles,m={},d={},u=t*i;for(const t in c)if(c.hasOwnProperty(t)){const e=b(c[t]),i=new Blob([e],{type:"image/png"}),n=await createImageBitmap(i);m[t]=n;const s=new OffscreenCanvas(u,u).getContext("2d");s.drawImage(n,0,0);const o=s.getImageData(0,0,n.width,n.height);d[t]=new Uint32Array(o.data.buffer)}const p=new H({displayName:l,Dt:s||this.fe?.length||0,Lt:r||""});p.Bt=h,p.Ht=m,p.Nt=d,n.push(p)}}return n}({Ot:this.Ot,$e:this.$e,fe:this.fe})):n[0]
This is the data stored on our servers:'}).D().J().Z({innerHTML:`A unique identifier (UUIDv4) generated by Blue Marble. This enables our telemetry to function without tracking your actual user ID.
Your UUID is: ${r(this.uuid)}`}).D().Z({innerHTML:`The version of Blue Marble you are using.
Your version is: ${r(this.version)}`}).D().Z({innerHTML:`Your browser type, which is used to determine Blue Marble outages and browser popularity.
Your browser type is: ${r(t)}`}).D().Z({innerHTML:`Your OS type, which is used to determine Blue Marble outages and OS popularity.
Your OS type is: ${r(e)}`}).D().Z({innerHTML:"The date and time that Blue Marble sent the telemetry information."}).D().D().N({innerHTML:'All of the data mentioned above is aggregated every hour. This means every hour, anything that could even remotly be considered "personal data" is deleted from our server. Here, "aggregated" data means things like "42 people used Blue Marble on Google Chrome this hour", which can\'t be used to identify anyone in particular.'}).D().D().D().D().D().L(this.Mt)}}(et,it,1,at?.uuid);t.S(ht),t.Tt()}rt.Tt(),ht.ri(rt),new MutationObserver((t,e)=>{const i=document.querySelector("#color-1");if(!i)return;let n=document.querySelector("#bm-G");if(!n){n=document.createElement("button"),n.id="bm-G",n.textContent="Move ↑",n.className="btn btn-soft",n.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=i.parentNode.parentNode.parentNode.parentNode.querySelector("h2");t.parentNode?.appendChild(n)}}).observe(document.body,{childList:!0,subtree:!0}),l(`%c${et}%c (${it}) userscript has loaded!`,"color: cornflowerblue;","")})(); \ No newline at end of file +(()=>{var t=t=>{throw TypeError(t)},e=(e,i,s)=>i.has(e)?t("Cannot add the same private member more than once"):i instanceof WeakSet?i.add(e):i.set(e,s),i=(e,i,s)=>(((e,i)=>{i.has(e)||t("Cannot access private method")})(e,i),s);function s(t){return new Promise(e=>setTimeout(e,t))}function n(t){return(new Intl.NumberFormat).format(t)}function o(t){return new Intl.NumberFormat(void 0,{style:"percent",t:2,i:2}).format(t)}function a(t){return t.toLocaleString(void 0,{o:"long",l:"numeric",h:"2-digit",m:"2-digit",u:"2-digit"})}function r(t){const e=document.createElement("div");return e.textContent=t,e.innerHTML}function l(...t){(0,console.log)(...t)}function c(...t){(0,console.error)(...t)}function h(...t){(0,console.warn)(...t)}function m(t,e){if(0===t)return e[0];let i="";const s=e.length;for(;t>0;)i=e[t%s]+i,t=Math.floor(t/s);return i}function d(t,e){let i=0;const s=e.length;for(const n of t){const t=e.indexOf(n);-1==t&&c(`Invalid character '${n}' encountered whilst decoding! Is the decode alphabet/base incorrect?`),i=i*s+t}return i}function u(t){let e="";for(let i=0;i
SettingsManager failed to override the ${t} function inside WindowSettings.`}).D().D()},T=new WeakSet,S=function(t,e){t.disabled=!0;const i=t.dataset.status,s=this.Nt?.highlight??[[1,0,1],[2,0,0],[1,-1,0],[1,1,0],[1,0,-1]];let n=[2,0,0];const o=s;switch(i){case"Disabled":t.dataset.status="Incorrect",t.ariaLabel="Sub-pixel incorrect",n=[1,...e];break;case"Incorrect":t.dataset.status="Template",t.ariaLabel="Sub-pixel template",n=[2,...e];break;case"Template":t.dataset.status="Disabled",t.ariaLabel="Sub-pixel disabled",n=[0,...e];break}const a=s.findIndex(([,t,e])=>t==n[1]&&e==n[2]);0!=n[0]?-1!=a?o[a]=n:o.push(n):-1!=a&&o.splice(a,1),this.Nt.highlight=o,t.disabled=!1},k=async function(t){const e=document.querySelectorAll(".bm-3 button");for(const t of e)t.disabled=!0;let i=[0,0,0,0,2,0,0,0,0];switch(t){case"Cross":i=[0,1,0,1,2,1,0,1,0];break;case"X":i=[1,0,1,0,2,0,1,0,1];break;case"Full":i=[2,2,2,2,2,2,2,2,2];break}const n=document.querySelector(".bm-n")?.childNodes??[];for(let t=0;tNo futher action required. (Reason: Semantic version matches)',this.Pe="Good"):(s='Template storage health: Poor!
You can still use your template, but some features may not work. It is recommended that you update Blue Marble\'s template storage. (Reason: MINOR version mismatch)',this.Pe="Poor"):t[0]
It is guaranteed that some features are broken. You might still be able to use the template. It is HIGHLY recommended that you download all templates and update Blue Marble\'s template storage before continuing. (Reason: MAJOR version mismatch)',this.Pe="Bad"):(s='Template storage health: Dead!
Blue Marble can not load the template storage. (Reason: MAJOR version unknown)',this.Pe="Dead");const n=`
If you want to continue using your current templates, then make sure the template storage (schema) is up-to-date.
If you don't want to update the template storage, then downgrade Blue Marble to version ${r(this.scriptVersion)} to continue using your templates.
Alternatively, if you don't care about corrupting the templates listed below, you can fix any issues with the template storage by uploading a new template.`,o=function(){const t=[...document.querySelectorAll("body > div > .hidden")].filter(t=>/version:/i.test(t.textContent));if(t[0]){const e=t[0].textContent?.match(/\d+/);return e?new Date(Number(e[0])):void 0}}();let l=o?a(o):"???";this.ht("#bm-v",`${s}
Your templates were created during Blue Marble version ${r(this.scriptVersion)} with schema version ${r(this.schemaVersion)}.
The current Blue Marble version is ${r(this.version)} and requires schema version ${r(this.Ae)}.
Wplace was last updated on ${l}.${"Good"!=this.Pe?n:""}`);const c=new v(this.name,this.version);"Dead"!=this.Pe&&(c.L({class:"bm-L bm-D bm-h",style:"gap: 1.5ch;"}),c.lt({textContent:"Download all templates"},(t,e)=>{e.onclick=()=>{e.disabled=!0,this.ce.ze().then(()=>{e.disabled=!1})}}).D()),"Poor"!=this.Pe&&"Bad"!=this.Pe||c.lt({textContent:`Update template storage to ${this.Ae}`},(t,e)=>{e.onclick=()=>{e.disabled=!0,i(this,et,nt).call(this,!0)}}).D(),c.D().N(document.querySelector("#bm-v").parentNode)},st=function(){const t=this.Be?.templates;if(Object.keys(t).length>0){const e=document.querySelector(`#${this.Ct} .bm-H`),i=new v(this.name,this.version);i.L({id:"bm-B",class:"bm-L"});for(const e in t){const s=e,o=t[e];if(t.hasOwnProperty(e)){const t=s.split(" "),e=Number(t?.[0]),a=d(t?.[1]||"0",this.ce.We),r=o.name||`Template ${e||""}`,l=o?.coords?.split(",").map(Number),c=o.pixels?.total??void 0,h=void 0,m="number"==typeof e?n(e):"???",u="number"==typeof a?n(a):"???",b="number"==typeof c?n(c):"???";i.L({class:"bm-L bm-D"}).L({class:"bm-D",style:"flex-direction: column; gap: 0;"}).L({class:"bm-1",textContent:h||"🖼️"}).D().O({textContent:`#${m}`}).D().D().L({class:"bm-D bm-0"}).W(3,{textContent:r}).D().I({textContent:`Uploaded by user #${u}`}).D().I({textContent:`Coordinates: ${l.join(", ")}`}).D().I({textContent:`Total Pixels: ${b}`}).D().D().D()}}i.D().N(e)}},nt=async function(t){if(t){const t=document.querySelector(`#${this.Ct} .bm-m`);t.innerHTML="",new v(this.name,this.version).L({class:"bm-L"}).L({class:"bm-L bm-h"}).W(1,{textContent:"Template Wizard"}).D().D().F().D().L({class:"bm-L"}).W(2,{textContent:"Status"}).D().H({textContent:"Updating template storage. Please wait..."}).D().D().D().N(t)}GM_deleteValue("bmCoords");const e=this.Be?.templates;if(Object.keys(e).length>0)for(const[t,i]of Object.entries(e))if(e.hasOwnProperty(t)){const t=new H({displayName:i.name,Ot:i.tiles});t.Yt();const e=await this.ce.Fe(t);await this.ce.Ue(e,t.displayName,t.coords)}t&&(console.log("Restarting Template Wizard..."),document.querySelector(`#${this.Ct}`).remove(),new lt(this.name,this.version,this.Ae,this.ce).St())};var ct,ht,mt,dt,ut,bt,pt,ft,gt=lt;ct=new WeakSet,ht=function(){const t=this.$?.Nt?.filter,e=Array.isArray(t)?t:[];this.He.clear();for(const t of e){const e=Number(t);Number.isFinite(e)&&this.He.set(e,!0)}},mt=function(){this.$&&(this.$.Nt.filter=Array.from(this.He.keys()).map(t=>Number(t)).filter(t=>Number.isFinite(t)).sort((t,e)=>t-e),this.$.Le())},dt=async function(){GM.setValue("bmTemplates",JSON.stringify(this.Ve))},ut=async function(t){console.log("Parsing BlueMarble...");const e=t.templates;console.log(`BlueMarble length: ${Object.keys(e).length}`);const i=t?.schemaVersion,s=i.split(/[-\.\+]/),n=this.schemaVersion.split(/[-\.\+]/),o=t?.scriptVersion;console.log(`BlueMarble Template Schema: ${i}; Script Version: ${o}`),s[0]==n[0]?(s[1]!=n[1]&&new gt(this.name,this.version,this.schemaVersion,this).St(),this.Ie=await async function({Bt:t,Ge:i,Ie:s}){if(Object.keys(e).length>0)for(const n in e){const o=n,a=e[n];if(console.log(`Template Key: ${o}`),e.hasOwnProperty(n)){const e=o.split(" "),n=Number(e?.[0]),r=e?.[1]||"0",l=a.name||`Template ${n||""}`,c={total:a.pixels?.total,colors:new Map(Object.entries(a.pixels?.colors||{}).map(([t,e])=>[Number(t),e]))},h=a.tiles,m={},d={},u=t*i;for(const t in h)if(console.log(t),h.hasOwnProperty(t)){const e=b(h[t]),i=new Blob([e],{type:"image/png"}),s=await createImageBitmap(i);m[t]=s;const n=new OffscreenCanvas(u,u).getContext("2d");n.drawImage(s,0,0);const o=n.getImageData(0,0,s.width,s.height);d[t]=new Uint32Array(o.data.buffer)}const p=new H({displayName:l,Lt:n||this.Ie?.length||0,Ht:r||""});p.Pt=c,p.Ot=m,p.It=d,s.push(p),console.log(this.Ie),console.log("^^^ This ^^^")}}return s}({Bt:this.Bt,Ge:this.Ge,Ie:this.Ie})):s[0]
This is the data stored on our servers:'}).D()._().Z({innerHTML:`A unique identifier (UUIDv4) generated by Blue Marble. This enables our telemetry to function without tracking your actual user ID.
Your UUID is: ${r(this.uuid)}`}).D().Z({innerHTML:`The version of Blue Marble you are using.
Your version is: ${r(this.version)}`}).D().Z({innerHTML:`Your browser type, which is used to determine Blue Marble outages and browser popularity.
Your browser type is: ${r(t)}`}).D().Z({innerHTML:`Your OS type, which is used to determine Blue Marble outages and OS popularity.
Your OS type is: ${r(e)}`}).D().Z({innerHTML:"The date and time that Blue Marble sent the telemetry information."}).D().D().H({innerHTML:'All of the data mentioned above is aggregated every hour. This means every hour, anything that could even remotly be considered "personal data" is deleted from our server. Here, "aggregated" data means things like "42 people used Blue Marble on Google Chrome this hour", which can\'t be used to identify anyone in particular.'}).D().D().D().D().D().N(this.Tt)}}(wt,xt,1,Mt?.uuid);t.S(St),t.St()}!async function(){await Tt.Mi(Dt),St.Si(Ct),Ct.St(),Ct.ai(),St.Ni(Ct),St.Di(Ct),new MutationObserver((t,e)=>{const i=document.querySelector("#color-1");if(!i)return;let s=document.querySelector("#bm-G");if(!s){s=document.createElement("button"),s.id="bm-G",s.textContent="Move ↑",s.className="btn btn-soft",s.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=i.parentNode.parentNode.parentNode.parentNode.querySelector("h2");t.parentNode?.appendChild(s)}}).observe(document.body,{childList:!0,subtree:!0}),l(`%c${wt}%c (${xt}) userscript has loaded!`,"color: cornflowerblue;","")}()})(); + +// Build Hash: 835bfa613e8c diff --git a/docs/README.md b/docs/README.md index 6fd577b..c22e4b0 100644 --- a/docs/README.md +++ b/docs/README.md @@ -1,292 +1,45 @@ -
| Blue Marble | - |
-
| Quick Guide | -|
| Overview | -|
| Installation Instructions | -|
| Script Settings | -|
| Template Settings | -|
| How Versioning Works | -|
| Licenses | -|
| FAQ | -|
| Is Blue Marble malware? | -|
| Why are some pixels not showing on the overlay? | -|
| How can Blue Marble place pixels for me? | -|
| How do I hide the overlay? | -|
| Why do game notifications appear on top of the overlay? | -
Blue Marble
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-Quick Guide
-
- Press the arrows to reveal the option you want.
-
-
-
- I want to download Blue Marble. (Click to Expand)
-
- Click here to view the installation instructions.
-
-
-
- I want to ask questions about Blue Marble. (Click to Expand)
-
- Click here for the Discord server invite to the Blue Marble support server.
-
- Click here for the GitHub help & question page for Blue Marble.
-
-
-
- I want to report a bug. (Click to Expand)
-
- Click here to report a bug, then choose the "Bug Report" option.
-
-
-
- I want to suggest a feature. (Click to Expand)
-
- Click here to suggest a feature, then choose the Feature Request" option.
-
-
-
- I want to contribute. (Click to Expand)
-
- Click here to read the contributing guidelines.
-
-
-
- I want to report a vulnerability. (Click to Expand)
-
- Click here to submit a vulnerability report.
-
-
-
- I want to visit the website. (Click to Expand)
-
- Click here to visit the official Blue Marble website.
-
Overview
-- Welcome to Blue Marble! Blue Marble is a userscript for the website wplace.live. The purpose of Blue Marble is to allow you to take an image, and layer it onto the canvas! That way, you can easily trace the image of your art, without having to look back and forth between multiple tabs/monitors. In addition, Blue Marble supports some neat extra features such as: -
-
-
- Displaying the number of pixels you need to level up -
- Displaying a simple coordinate system (tile coordinats & pixel coordinates) -
- Allowing you to move the color palette to the top of the screen when placing pixels -
- Allowing you to use the eyedropper on the template image, provided the colors are correct -
- Minimizing or maximizing the menu to switch between compact and full views -
- Filtering overlay colors by toggling individual template colors or using global enable/disable buttons -
- ...and more! -
docs/.
+The goal is not to replace the upstream project. This fork keeps the original Blue Marble workflow, then adds usability, workflow, and Color Filter improvements on top.
- 
+## What Is Different
- Installation Instructions
-
- 
-
- Blue Marble has been verified to work on mobile devices. Blue Marble was designed on Chrome, but Blue Marble might work on "unsupported" browsers not listed above. Some versions/forks of Firefox work. Some versions/forks of Firefox do not work.
-
- Installation instructions for Blue Marble are below. Click the arrows to expand the instructions you want to see. Blue text is a link.
-
-
-
- Install Chrome (Click to expand)
-
- 
-
-
- 
- 
- 
- TamperMonkey will automatically detect the userscript and prompt you to Install it.
-
-
- Install on Microsoft Edge (Click to expand)
-
-
-
-
- 
- 
- 
- 
BlueMarble.user.js file inside the dashboard of TamperMonkey.
-
- 
- 
- 
-
-
- Install on Firefox (Click to expand)
-
-
-
-
- 
- TamperMonkey will automatically detect the userscript and prompt you to install it.
Template Instructions
-- Blue Marble will display your template as the same size. If your image is 500 pixels tall and 300 pixels wide, the template will be 500 pixels tall and 300 pixels wide. Here is the instructions to display a template image on the canvas: -
-
-
- Find the pixel of the top left corner. Fill in
Tl X,Tl Y,Px X, andPx Ywith the coordinates. You can use the "Pin" icon to auto-fill the coordinates after clicking the pixel. -
-
- - Upload a PNG or WEBP image. -
- Click the "Create" button. -
- If your template still does not show, try clicking the "Enable" button. -
Script Settings
-- There are many settings available for the Blue Marble userscript! Through these settings, you can control how the script behaves. -
+## Installation -Template Settings
--
Transparent Pixels
-- Templates for Blue Marble work slightly different from normal. Since there is a "Transparent" color, and transparent pixels in templates are typically ignored, your template should have a custom color to signify "Transparent" colored pixels. -
-
-
- If you want a specific pixel to be any color, it should be transparent in your template. -
- If you want a specific pixel to be the "Transparent" color on the Wplace palette, it should have the
#defacehex color.
-
Coordinates
--
Tile Coordinates
-
- The coordinate system for wplace.live is unique. Instead of all pixels having a global coordinate number (x, y), the coordinate number is relative to the tile. This means you need to know the tile number and the coordinate number to do anything. In Blue Marble, the tile coordinates and the pixel coordinates are displayed when you click on a pixel. These are the coordinates you should use for aligning a template.
-
- 
-
Template Coordinates
-- The template is aligned from the top left corner of the template. You can auto-fill this position using the "pin" (also called "waypoint") icon next to the coordinate input boxes. -
- - - +Install the latest userscript from the release page: -How Versioning Works
-
- The versioning system for this userscript follows the Semantic Versioning rules. As such, it is formatted in an X.Y.Z format where:
-
-
-
- X is the major version. This is incremented when a non-backward compatible update is pushed. This is for new features that break previous versions of the userscript. Additionally, if wplace.live breaks the userscript, this will be incremented. -
- Y is the minor version. This is incremented whenever I push to GitHub. This is for stable bug-fixes and new (non-breaking) features. -
- Z is the patch version. This is incremented whenever I launch a development version of the userscript to test a patch. This is for unstable bug-fixes/features. -
Licenses
-
- (Below, all mentions of the "userscript" refer to the "Blue Marble" userscript made by SwingTheVine)
- Most of this userscript is licensed under the Mozilla Public License Version 2.0 (MPL-2.0). All software, code, and libraries in this repository are licensed under the MPL-2.0 license. However, the "Blue Marble" image in this userscript is owned by NASA and is licensed under the Creative Commons 0 1.0 Universal (CC0 1.0) license.
-
FAQ
--
Is Blue Marble malware?
-A: Blue Marble does not contain malicious code. The Blue Marble code can be found in the src/ folder. If you worry about Blue Marble being malware, you can read the code, then bundle it yourself using the tools in build/.
+## Color Filter
-
Why are some pixels not showing on the overlay?
-A: This usually happens if the template image is not converted to the Wplace color palette. You should convert your template using a color converter for Wplace, or manually adjust the template image to match the Wplace color palette. Also check that no pixels are disabled in the filter settings of the Blue Marble menu.
+Color Filter is one of the main areas improved here. It can be opened as a compact window, resized, moved around the canvas, and restored with the same size and position the next time you use it. -How can Blue Marble place pixels for me?
-A: Unfortunately, Blue Marble will not support the automatic placement of pixels without user interaction because it is not allowed by Wplace. +Hidden and visible colors are remembered, so you can isolate the colors you are actively painting without rebuilding the filter state every session. The list also refreshes automatically every 10 seconds, keeping pixel counts current without a manual refresh button. -
How do I hide the overlay?
-A: You can temporarily hide the overlay by clicking the "Disable" button in the Blue Marble menu.
-
- If you want to completely remove both the overlay and the Blue Marble menu, turn off the userscript in Tampermonkey and refresh the page.
How do I tell colors apart?
-A: Find the color in the color filter list. Click the checkbox to turn the color on or off. If you want to work on only one color at a time (recommended), then click "Disable All" in the color filter. Finally, enable the checkbox next to the color you want to place. This way, only one color on your template will appear at a time.
+Original project: -How do get the color of a pixel?
-A: Use the eyedropper in the palette menu of wplace. If your template colors match the wplace palette, you can select the template pixel dot to get the template's color for that pixel.
+[SwingTheVine/Wplace-BlueMarble](https://github.com/SwingTheVine/Wplace-BlueMarble) -Why do game notifications appear on top of the overlay?
-A: Game notifications only appear when they need immediate attention. Therefore, they have priority over the overlay (which typically needs no attention).
- +This fork keeps the original license and credits. For upstream documentation, contribution rules, and project background, refer to the original repository. + +## License + +Blue Marble is licensed under the Mozilla Public License 2.0. See [LICENSE.txt](../LICENSE.txt). diff --git a/docs/assets/ComputerChromeInstall1.png b/docs/assets/ComputerChromeInstall1.png deleted file mode 100644 index ca40cad..0000000 Binary files a/docs/assets/ComputerChromeInstall1.png and /dev/null differ diff --git a/docs/assets/ComputerChromeInstall2.png b/docs/assets/ComputerChromeInstall2.png deleted file mode 100644 index ac1f732..0000000 Binary files a/docs/assets/ComputerChromeInstall2.png and /dev/null differ diff --git a/docs/assets/ComputerChromeInstall3.png b/docs/assets/ComputerChromeInstall3.png deleted file mode 100644 index 80f7c4d..0000000 Binary files a/docs/assets/ComputerChromeInstall3.png and /dev/null differ diff --git a/docs/assets/ComputerChromeInstall4.png b/docs/assets/ComputerChromeInstall4.png deleted file mode 100644 index 6595bac..0000000 Binary files a/docs/assets/ComputerChromeInstall4.png and /dev/null differ diff --git a/docs/assets/ComputerChromeInstall5.png b/docs/assets/ComputerChromeInstall5.png deleted file mode 100644 index 7b17ddd..0000000 Binary files a/docs/assets/ComputerChromeInstall5.png and /dev/null differ diff --git a/docs/assets/ComputerChromeInstall6.png b/docs/assets/ComputerChromeInstall6.png deleted file mode 100644 index 4d16961..0000000 Binary files a/docs/assets/ComputerChromeInstall6.png and /dev/null differ diff --git a/docs/assets/ComputerChromeInstall7.png b/docs/assets/ComputerChromeInstall7.png deleted file mode 100644 index f7ea77d..0000000 Binary files a/docs/assets/ComputerChromeInstall7.png and /dev/null differ diff --git a/docs/assets/ComputerEdgeInstall1.png b/docs/assets/ComputerEdgeInstall1.png deleted file mode 100644 index 8c0a4fe..0000000 Binary files a/docs/assets/ComputerEdgeInstall1.png and /dev/null differ diff --git a/docs/assets/ComputerEdgeInstall2.png b/docs/assets/ComputerEdgeInstall2.png deleted file mode 100644 index caf5908..0000000 Binary files a/docs/assets/ComputerEdgeInstall2.png and /dev/null differ diff --git a/docs/assets/ComputerEdgeInstall3.png b/docs/assets/ComputerEdgeInstall3.png deleted file mode 100644 index 2c1bdf9..0000000 Binary files a/docs/assets/ComputerEdgeInstall3.png and /dev/null differ diff --git a/docs/assets/ComputerEdgeInstall4.png b/docs/assets/ComputerEdgeInstall4.png deleted file mode 100644 index e0a4743..0000000 Binary files a/docs/assets/ComputerEdgeInstall4.png and /dev/null differ diff --git a/docs/assets/ComputerEdgeInstall5.png b/docs/assets/ComputerEdgeInstall5.png deleted file mode 100644 index 8b8d00e..0000000 Binary files a/docs/assets/ComputerEdgeInstall5.png and /dev/null differ diff --git a/docs/assets/ComputerFirefoxInstall1.png b/docs/assets/ComputerFirefoxInstall1.png deleted file mode 100644 index f02fcef..0000000 Binary files a/docs/assets/ComputerFirefoxInstall1.png and /dev/null differ diff --git a/docs/assets/ComputerFirefoxInstall2.png b/docs/assets/ComputerFirefoxInstall2.png deleted file mode 100644 index 633fe8b..0000000 Binary files a/docs/assets/ComputerFirefoxInstall2.png and /dev/null differ diff --git a/docs/assets/ComputerFirefoxInstall3.png b/docs/assets/ComputerFirefoxInstall3.png deleted file mode 100644 index a2ea838..0000000 Binary files a/docs/assets/ComputerFirefoxInstall3.png and /dev/null differ diff --git a/docs/assets/Showcase1.png b/docs/assets/Showcase1.png deleted file mode 100644 index ef79e3f..0000000 Binary files a/docs/assets/Showcase1.png and /dev/null differ diff --git a/docs/assets/TemplateCoordinates1.png b/docs/assets/TemplateCoordinates1.png deleted file mode 100644 index c042228..0000000 Binary files a/docs/assets/TemplateCoordinates1.png and /dev/null differ diff --git a/docs/assets/TemplateCoordinatesDisplay.png b/docs/assets/TemplateCoordinatesDisplay.png deleted file mode 100644 index ffcca77..0000000 Binary files a/docs/assets/TemplateCoordinatesDisplay.png and /dev/null differ diff --git a/docs/assets/blue-marble.png b/docs/assets/blue-marble.png new file mode 100644 index 0000000..8648b1f Binary files /dev/null and b/docs/assets/blue-marble.png differ diff --git a/package-lock.json b/package-lock.json index f078be1..703c6d3 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "wplace-bluemarble", - "version": "0.91.116", + "version": "0.94.0", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "wplace-bluemarble", - "version": "0.91.116", + "version": "0.94.0", "devDependencies": { "esbuild": "^0.25.0", "jsdoc": "^4.0.5", @@ -37,6 +37,7 @@ "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.28.0.tgz", "integrity": "sha512-jVZGvOxOuNSsuQuLRTh13nU0AogFlw32w/MT+LV6D3sP5WdbW61E77RnkbaO2dUvmPAYrBDJXGn5gGS6tH4j8g==", "dev": true, + "peer": true, "dependencies": { "@babel/types": "^7.28.0" }, @@ -52,6 +53,7 @@ "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.28.2.tgz", "integrity": "sha512-ruv7Ae4J5dUYULmeXw1gmb7rYRz57OWCPM57pHojnLq/3Z1CK2lNSLTCVjxVk1F/TZHwOZZrOWi0ur95BbLxNQ==", "dev": true, + "peer": true, "dependencies": { "@babel/helper-string-parser": "^7.27.1", "@babel/helper-validator-identifier": "^7.27.1" @@ -544,7 +546,6 @@ "resolved": "https://registry.npmjs.org/@types/markdown-it/-/markdown-it-14.1.2.tgz", "integrity": "sha512-promo4eFwuiW+TfGxhi+0x3czqTYJkG8qB17ZUJiVF10Xm7NLVRSLUsfRTU/6h1e24VvRnXCx+hG7li58lkzog==", "dev": true, - "peer": true, "dependencies": { "@types/linkify-it": "^5", "@types/mdurl": "^2" @@ -741,7 +742,6 @@ "resolved": "https://registry.npmjs.org/markdown-it/-/markdown-it-14.1.0.tgz", "integrity": "sha512-a54IwgWPaeBCAAsv13YgmALOF1elABB08FxO9i+r4VFk5Vl4pKokRPeX8u5TCgSsPi6ec1otfLjdOpVcgbpshg==", "dev": true, - "peer": true, "dependencies": { "argparse": "^2.0.1", "entities": "^4.4.0", diff --git a/package.json b/package.json index 95f85fa..9249617 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "wplace-bluemarble", - "version": "0.92.0", + "version": "0.94.0", "type": "module", "homepage": "https://bluemarble.lol/", "repository": { diff --git a/src/BlueMarble.meta.js b/src/BlueMarble.meta.js index d08e900..ac5baa1 100644 --- a/src/BlueMarble.meta.js +++ b/src/BlueMarble.meta.js @@ -2,7 +2,7 @@ // @name Blue Marble // @name:en Blue Marble // @namespace https://github.com/SwingTheVine/ -// @version 0.92.0 +// @version 0.94.0 // @description A userscript to enhance the user experience on Wplace.live. This includes, but is not limited to: uploading images to display locally on a canvas, adding a button to move the Wplace color palette menu, and other QoL features. // @description:en A userscript to enhance the user experience on Wplace.live. This includes, but is not limited to: uploading images to display locally on a canvas, adding a button to move the Wplace color palette menu, and other QoL features. // @author SwingTheVine diff --git a/src/Overlay.js b/src/Overlay.js index 96ceb2a..c0a06d0 100644 --- a/src/Overlay.js +++ b/src/Overlay.js @@ -1,3 +1,6 @@ +export const minimizeIconExpanded = ''; +export const minimizeIconCollapsed = ''; + /** The overlay builder for the Blue Marble script. * @description This class handles the overlay UI for the Blue Marble script. * @class Overlay @@ -1217,8 +1220,50 @@ export default class Overlay { const window = button.closest('.bm-window'); // Get the window const dragbar = button.closest('.bm-dragbar'); // Get the dragbar - const header = window.querySelector('h1'); // Get the header - const windowContent = window.querySelector('.bm-window-content'); // Get the window content container + const header = window?.querySelector('h1'); // Get the header + const windowContent = window?.querySelector('.bm-window-content'); // Get the window content container + + if (!window || !dragbar || !windowContent) { + button.disabled = false; + button.style.textDecoration = ''; + return; + } + + const finishMinimizeTransition = (callback) => { + let isFinished = false; + let fallbackTimer; + + const finish = () => { + if (isFinished) {return;} + isFinished = true; + clearTimeout(fallbackTimer); + windowContent.removeEventListener('transitionend', handler); + callback(); + button.disabled = false; + button.style.textDecoration = ''; + }; + + const handler = event => { + if (event.target != windowContent || event.propertyName != 'height') {return;} + finish(); + }; + + windowContent.addEventListener('transitionend', handler); + fallbackTimer = setTimeout(finish, 360); + }; + + const getCollapsedHeight = () => { + const windowStyle = getComputedStyle(window); + const toPixels = value => parseFloat(value) || 0; + const extraHeight = windowStyle.boxSizing == 'border-box' + ? toPixels(windowStyle.paddingTop) + + toPixels(windowStyle.paddingBottom) + + toPixels(windowStyle.borderTopWidth) + + toPixels(windowStyle.borderBottomWidth) + : 0; + + return Math.ceil(dragbar.getBoundingClientRect().height + extraHeight + 2); + }; window.parentElement.append(window); // Moves the window to the top @@ -1227,22 +1272,29 @@ export default class Overlay { // ...we want to close it // Logic for the transition animation to collapse the window + window.dataset['widthBeforeMinimize'] = window.style.width; + window.dataset['heightBeforeMinimize'] = window.style.height; + window.dataset['minHeightBeforeMinimize'] = window.style.minHeight; windowContent.style.height = windowContent.scrollHeight + 'px'; - window.style.width = window.scrollWidth + 'px'; // So the width of the window does not change due to the lack of content - windowContent.style.height = '0'; // Set the height to 0px - windowContent.addEventListener('transitionend', function handler() { // Add an event listener to cleanup once the minimize transition is complete + void windowContent.offsetHeight; // Force layout so the height transition always has a real start value + if (!window.style.width) { + window.style.width = window.scrollWidth + 'px'; // So the width of the window does not change due to the lack of content + } + finishMinimizeTransition(() => { windowContent.style.display = 'none'; // Changes "display" to "none" for screen readers - button.disabled = false; // Enables the button - button.style.textDecoration = ''; // Resets the text decoration to default - windowContent.removeEventListener('transitionend', handler); // Removes the event listener }); + windowContent.style.height = '0'; // Set the height to 0px + if (window.style.height || window.classList.contains('bm-windowed')) { + window.style.minHeight = '0px'; + window.style.height = getCollapsedHeight() + 'px'; + } // Makes a clone of the h1 element inside the window, and adds it to the dragbar - const dragbarHeader1 = header.cloneNode(true); + const dragbarHeader1 = header?.cloneNode(true) ?? document.createElement('h1'); const dragbarHeader1Text = dragbarHeader1.textContent; button.nextElementSibling.appendChild(dragbarHeader1); - button.textContent = '▶'; // Swap button icon + button.innerHTML = minimizeIconCollapsed; // Swap button icon button.dataset['buttonStatus'] = 'collapsed'; // Swap button status tracker button.ariaLabel = `Unminimize window "${dragbarHeader1Text}"`; // Screen reader label } else { @@ -1256,16 +1308,19 @@ export default class Overlay { // Logic for the transition animation to expand the window windowContent.style.display = ''; // Resets display to default windowContent.style.height = '0'; // Sets the height to 0 - window.style.width = ''; // Resets the window width to default - windowContent.style.height = windowContent.scrollHeight + 'px'; // Change the height back to normal - windowContent.addEventListener('transitionend', function handler() { // Add an event listener to cleanup once the minimize transition is complete + window.style.width = window.dataset['widthBeforeMinimize'] ?? ''; // Restores width to the pre-minimized value + window.style.minHeight = window.dataset['minHeightBeforeMinimize'] ?? ''; // Restores resizable windows + window.style.height = window.dataset['heightBeforeMinimize'] ?? ''; // Restores height to the pre-minimized value + void windowContent.offsetHeight; // Force layout before expanding from 0px + finishMinimizeTransition(() => { windowContent.style.height = ''; // Changes the height back to default - button.disabled = false; // Enables the button - button.style.textDecoration = ''; // Resets the text decoration to default - windowContent.removeEventListener('transitionend', handler); // Removes the event listener + delete window.dataset['widthBeforeMinimize']; + delete window.dataset['heightBeforeMinimize']; + delete window.dataset['minHeightBeforeMinimize']; }); + windowContent.style.height = windowContent.scrollHeight + 'px'; // Change the height back to normal - button.textContent = '▼'; // Swap button icon + button.innerHTML = minimizeIconExpanded; // Swap button icon button.dataset['buttonStatus'] = 'expanded'; // Swap button status tracker button.ariaLabel = `Minimize window "${dragbarHeader1Text}"`; // Screen reader label } @@ -1278,11 +1333,12 @@ export default class Overlay { * @param {string} iMoveThingsSelector - The drag handle element * @since 0.8.2 */ - handleDrag(moveMeSelector, iMoveThingsSelector) { + handleDrag(moveMeSelector, iMoveThingsSelector, options = {}) { // Retrieves the elements const moveMe = document.querySelector(moveMeSelector); const iMoveThings = document.querySelector(iMoveThingsSelector); + const onEnd = options?.onEnd ?? (() => {}); // What to do when one of the two elements are not found if (!moveMe || !iMoveThings) { @@ -1375,6 +1431,14 @@ export default class Overlay { document.removeEventListener('mouseup', endDrag); document.removeEventListener('touchend', endDrag); document.removeEventListener('touchcancel', endDrag); + + onEnd({ + element: moveMe, + x: currentX, + y: currentY + }); + + initialRect = null; }; // Mouse move @@ -1411,6 +1475,135 @@ export default class Overlay { }, { passive: false }); } + /** Handles resizing of an overlay window from a resize handle. + * @param {string} resizeMeSelector - The element to resize + * @param {string} iResizeThingsSelector - The resize handle element + * @param {{onEnd?: function({element: HTMLElement, width: number, height: number}): void, minWidth?: number, minHeight?: number, maxWidth?: number, maxHeight?: number}} [options={}] + * @since 0.92.0 + */ + handleResize(resizeMeSelector, iResizeThingsSelector, options = {}) { + + const resizeMe = document.querySelector(resizeMeSelector); + const iResizeThings = document.querySelector(iResizeThingsSelector); + const onEnd = options?.onEnd ?? (() => {}); + + if (!resizeMe || !iResizeThings) { + this.handleDisplayError(`Can not resize! ${!resizeMe ? 'resizeMe' : ''} ${!resizeMe && !iResizeThings ? 'and ' : ''}${!iResizeThings ? 'iResizeThings ' : ''}was not found!`); + return; + } + + let isResizing = false; + let startX = 0; + let startY = 0; + let startWidth = 0; + let startHeight = 0; + let currentWidth = 0; + let currentHeight = 0; + let targetWidth = 0; + let targetHeight = 0; + let animationFrame = null; + + const getMaximumWidth = () => Number.isFinite(options?.maxWidth) ? options.maxWidth : window.innerWidth - 16; + const getMaximumHeight = () => Number.isFinite(options?.maxHeight) ? options.maxHeight : window.innerHeight - 16; + const minimumWidth = Number.isFinite(options?.minWidth) ? options.minWidth : 200; + const minimumHeight = Number.isFinite(options?.minHeight) ? options.minHeight : 160; + + const clamp = (value, minimum, maximum) => Math.min(Math.max(value, minimum), Math.max(minimum, maximum)); + + const updateSize = () => { + if (isResizing) { + const deltaWidth = Math.abs(currentWidth - targetWidth); + const deltaHeight = Math.abs(currentHeight - targetHeight); + + if (deltaWidth > 0.5 || deltaHeight > 0.5) { + currentWidth = targetWidth; + currentHeight = targetHeight; + resizeMe.style.width = `${currentWidth}px`; + resizeMe.style.height = `${currentHeight}px`; + } + + animationFrame = requestAnimationFrame(updateSize); + } + }; + + const startResize = (clientX, clientY) => { + isResizing = true; + startX = clientX; + startY = clientY; + startWidth = resizeMe.offsetWidth; + startHeight = resizeMe.offsetHeight; + currentWidth = startWidth; + currentHeight = startHeight; + targetWidth = startWidth; + targetHeight = startHeight; + + document.body.style.userSelect = 'none'; + iResizeThings.classList.add('bm-resizing'); + + document.addEventListener('mousemove', onMouseMove); + document.addEventListener('touchmove', onTouchMove, { passive: false }); + document.addEventListener('mouseup', endResize); + document.addEventListener('touchend', endResize); + document.addEventListener('touchcancel', endResize); + + if (animationFrame) { + cancelAnimationFrame(animationFrame); + } + updateSize(); + }; + + const endResize = () => { + isResizing = false; + if (animationFrame) { + cancelAnimationFrame(animationFrame); + animationFrame = null; + } + document.body.style.userSelect = ''; + iResizeThings.classList.remove('bm-resizing'); + + document.removeEventListener('mousemove', onMouseMove); + document.removeEventListener('touchmove', onTouchMove); + document.removeEventListener('mouseup', endResize); + document.removeEventListener('touchend', endResize); + document.removeEventListener('touchcancel', endResize); + + onEnd({ + element: resizeMe, + width: currentWidth, + height: currentHeight + }); + }; + + const onMouseMove = event => { + if (!isResizing) {return;} + targetWidth = clamp(startWidth + (event.clientX - startX), minimumWidth, getMaximumWidth()); + targetHeight = clamp(startHeight + (event.clientY - startY), minimumHeight, getMaximumHeight()); + }; + + const onTouchMove = event => { + if (!isResizing) {return;} + const touch = event?.touches?.[0]; + if (!touch) {return;} + targetWidth = clamp(startWidth + (touch.clientX - startX), minimumWidth, getMaximumWidth()); + targetHeight = clamp(startHeight + (touch.clientY - startY), minimumHeight, getMaximumHeight()); + event.preventDefault(); + }; + + iResizeThings.addEventListener('mousedown', event => { + event.preventDefault(); + event.stopPropagation(); + startResize(event.clientX, event.clientY); + }); + + iResizeThings.addEventListener('touchstart', event => { + const touch = event?.touches?.[0]; + if (!touch) {return;} + event.preventDefault(); + event.stopPropagation(); + startResize(touch.clientX, touch.clientY); + }, { passive: false }); + } + /** Handles status display. * This will output plain text into the output Status box. * Additionally, this will output an info message to the console. @@ -1434,4 +1627,4 @@ export default class Overlay { consoleError(`${this.name}: ${text}`); // Outputs something like "ScriptName: text" as an error message to the console this.updateInnerHTML(this.outputStatusId, 'Error: ' + text, true); // Update output Status box } -} \ No newline at end of file +} diff --git a/src/WindowCredits.js b/src/WindowCredits.js index 6cef669..13b12cc 100644 --- a/src/WindowCredits.js +++ b/src/WindowCredits.js @@ -1,4 +1,4 @@ -import Overlay from "./Overlay"; +import Overlay, { minimizeIconExpanded } from "./Overlay"; import { localizeDate } from "./utils"; /** Manages the credits window for Blue Marble. @@ -54,7 +54,7 @@ export default class WindowCredts extends Overlay { // Creates a new credits window this.window = this.addDiv({'id': this.windowID, 'class': 'bm-window'}, (instance, div) => {}) .addDragbar() - .addButton({'class': 'bm-button-circle', 'textContent': '▼', 'aria-label': 'Minimize window "Credits"', 'data-button-status': 'expanded'}, (instance, button) => { + .addButton({'class': 'bm-button-circle', 'innerHTML': minimizeIconExpanded, 'aria-label': 'Minimize window "Credits"', 'data-button-status': 'expanded'}, (instance, button) => { button.onclick = () => instance.handleMinimization(button); button.ontouchend = () => {button.click()}; // Needed only to negate weird interaction with dragbar }).buildElement() @@ -116,4 +116,4 @@ export default class WindowCredts extends Overlay { // Creates dragging capability on the drag bar for dragging the window this.handleDrag(`#${this.windowID}.bm-window`, `#${this.windowID} .bm-dragbar`); } -} \ No newline at end of file +} diff --git a/src/WindowFilter.css b/src/WindowFilter.css index bc5135f..6b9027f 100644 --- a/src/WindowFilter.css +++ b/src/WindowFilter.css @@ -1,10 +1,117 @@ /* @since 0.88.459 */ -/* Filter window eye icon inside paragraphs */ +/* Filter window visibility icon */ +#bm-window-filter .bm-filter-eye-icon { + display: block; + width: 1.28em; + height: 1.28em; + fill: none; + stroke: currentColor; + stroke-width: 1.9; + stroke-linecap: round; + stroke-linejoin: round; + overflow: visible; +} + +/* Filter window inline icons inside paragraphs */ #bm-window-filter p svg { - display: inline; + display: inline-block; height: 1em; - fill: white; + width: 1em; + color: currentColor; + vertical-align: -0.16em; +} + +#bm-window-filter:not(.bm-windowed) { + width: min(50rem, calc(100vw - 0.55rem)); + max-width: min(50rem, calc(100vw - 0.55rem)) !important; +} + +#bm-window-filter .bm-filter-header { + padding-top: 0.08rem; +} + +#bm-window-filter .bm-filter-toolbar { + gap: 0.22rem; + flex-wrap: wrap; + width: 100%; + padding: 0.16rem; +} + +#bm-window-filter .bm-filter-toolbar > button { + flex: 1 1 10rem; +} + +#bm-window-filter .bm-filter-scrollable { + padding-right: 0.08rem; +} + +#bm-window-filter .bm-filter-insights { + display: grid; + grid-template-columns: minmax(16rem, 20rem) minmax(0, 1fr); + gap: 0.24rem 0.3rem; + align-items: stretch; +} + +#bm-window-filter .bm-filter-insights > hr, +#bm-window-filter .bm-filter-sort-panel { + grid-column: 1 / -1; +} + +#bm-window-filter .bm-filter-stats-card, +#bm-window-filter .bm-filter-note, +#bm-window-filter .bm-filter-sort-panel { + padding: 0.38rem 0.48rem; + border-radius: 13px; + border: 1px solid rgba(255, 255, 255, 0.18); + background: linear-gradient(155deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.07)); + box-shadow: + inset 0 1px 0 rgba(255, 255, 255, 0.16), + 0 8px 20px rgba(0, 0, 0, 0.08); +} + +#bm-window-filter .bm-filter-stats-card { + display: grid; + gap: 0.18rem; +} + +#bm-window-filter .bm-filter-stats-card br { + display: none; +} + +#bm-window-filter .bm-filter-stats-card span { + display: block; + padding: 0.28rem 0.38rem; + border-radius: 10px; + background: linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.08)); +} + +#bm-window-filter .bm-filter-note p { + margin: 0; +} + +#bm-window-filter .bm-filter-sort-panel fieldset { + border: none; + padding: 0; + margin: 0; +} + +#bm-window-filter .bm-filter-sort-panel legend { + margin-bottom: 0.12rem; +} + +#bm-window-filter .bm-filter-sort-panel .bm-container { + margin-top: 0.1rem; + margin-bottom: 0.1rem; +} + +#bm-window-filter .bm-filter-sort-actions { + display: flex; + justify-content: flex-start; +} + +#bm-window-filter .bm-filter-sort-actions button { + min-width: 7.8rem; } /* Filter flex */ @@ -13,33 +120,63 @@ flex-direction: row; flex-wrap: wrap; justify-content: center; - gap: 1em 3ch; + align-items: stretch; + gap: 0.3rem; } /* Filter color */ #bm-window-filter .bm-filter-color { + position: relative; + overflow: hidden; width: fit-content; max-width: 35ch; - background-color: rgba(21, 48, 99, 0.9); - border-radius: 1em; - padding: 0.5em; - gap: 1ch; - transition: background-color 0.3s ease; + padding: 0.28rem; + gap: 0.28rem; + border-radius: 13px; + border: 1px solid rgba(255, 255, 255, 0.18); + background: linear-gradient(160deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.07)); + box-shadow: + inset 0 1px 0 rgba(255, 255, 255, 0.16), + 0 8px 20px rgba(0, 0, 0, 0.08); + transition: + background 0.25s ease, + border-color 0.25s ease, + box-shadow 0.25s ease, + transform 0.25s ease; +} + +#bm-window-filter .bm-filter-color::before { + content: ""; + position: absolute; + inset: 0; + pointer-events: none; + background: + radial-gradient(circle at top right, rgba(255, 255, 255, 0.18), transparent 24%), + radial-gradient(circle at 18% 0%, rgba(186, 246, 255, 0.12), transparent 22%); } /* Filter color on hover */ #bm-window-filter .bm-filter-color:hover, -#bm-window-filter.bm-filter-color:focus-within { - background-color: rgba(17, 40, 85, 0.9); +#bm-window-filter .bm-filter-color:focus-within { + transform: translateY(-2px); + border-color: rgba(146, 221, 255, 0.26); + background: linear-gradient(160deg, rgba(255, 255, 255, 0.22), rgba(186, 246, 255, 0.1)); + box-shadow: + inset 0 1px 0 rgba(255, 255, 255, 0.2), + 0 10px 24px rgba(0, 0, 0, 0.1); } /* Filter window container for RGB color display */ #bm-window-filter .bm-filter-container-rgb { display: block; - border: thick double darkslategray; width: fit-content; height: fit-content; - padding: 1ch; + padding: 0.26rem; + border: 1px solid rgba(255, 255, 255, 0.18); + border-radius: 10px; + box-shadow: + inset 0 1px 0 rgba(255, 255, 255, 0.14), + 0 6px 16px rgba(0, 0, 0, 0.08); } /* Filter window container for RGB color display for Other color */ @@ -60,8 +197,9 @@ background: url('data:image/svg+xml;utf8,') repeat; background-color: transparent !important; } + #bm-window-filter .bm-filter-color[data-id="-1"] .bm-filter-container-rgb svg { - fill: white !important; + color: white !important; } /* Filter window container for RGB color display for Transparent color */ @@ -71,19 +209,36 @@ /* Filter window hide color button */ #bm-window-filter .bm-filter-container-rgb button { - padding: 0.75em 0.5ch; + display: inline-flex; + align-items: center; + justify-content: center; + padding: 0.24em; + min-width: 2.05rem; + min-height: 2.05rem; + border-radius: 999px; + line-height: 1; } /* Filter window hide color button SVG */ -#bm-window-filter .bm-filter-container-rgb svg { - width: 4ch; +#bm-window-filter .bm-filter-container-rgb .bm-filter-eye-icon { + width: 1.55rem; + height: 1.55rem; + filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.18)); } /* Filter window container for color information */ #bm-window-filter .bm-filter-color > .bm-flex-between { flex-direction: column; align-items: flex-start; - gap: 0; + gap: 0.02rem; +} + +#bm-window-filter .bm-filter-color h2 { + margin: 0.04rem 0 0; +} + +#bm-window-filter .bm-filter-color .bm-filter-color-pxl-desc { + margin: 0.1rem 0 0; } /* Filter window color flavor text */ @@ -98,46 +253,186 @@ /* WINDOWED MODE */ +/* Resizable filter window in windowed mode */ +#bm-window-filter.bm-windowed { + --bm-scrollable-max-height: 100%; + display: grid; + grid-template-rows: auto minmax(0, 1fr); + width: 360px; + height: min(60vh, 22rem); + min-width: 360px; + min-height: 180px; + max-width: min(1000px, calc(100vw - 16px)) !important; + max-height: min(1400px, calc(100vh - 16px)) !important; + overflow: hidden; + box-sizing: border-box; + position: fixed; + transition: + background 320ms ease, + border-color 220ms ease, + box-shadow 220ms ease, + transform 0s; +} + +/* Keep the content area flexible inside the resizable window */ +#bm-window-filter.bm-windowed .bm-window-content { + display: grid; + grid-template-rows: auto auto auto auto minmax(0, 1fr); + grid-row: 2; + min-height: 0; + min-width: 0; + overflow: hidden; +} + +#bm-window-filter.bm-windowed .bm-filter-toolbar { + gap: 0.16rem; + flex-wrap: nowrap; + width: 100%; + padding: 0.12rem; +} + +#bm-window-filter.bm-windowed .bm-filter-toolbar > button { + flex: 1 1 0; + min-width: 0; +} + /* Filter flex in windowed mode */ #bm-window-filter.bm-windowed #bm-filter-flex { flex-direction: column; - gap: 0.25em; + align-items: stretch; + gap: 0.16rem; + width: 100%; + align-self: stretch; + min-width: 0; + box-sizing: border-box; } /* Filter color in windowed mode */ #bm-window-filter.bm-windowed .bm-filter-color { - width: auto; + width: 100%; + max-width: none; + align-self: stretch; + flex: 1 1 auto; + min-width: 0; margin: 0; - padding: 0; + padding: 0.12rem; + border-radius: 11px; + box-sizing: border-box; +} + +#bm-window-filter.bm-windowed .bm-filter-color > .bm-flex-between { + width: 100%; + min-width: 0; + flex: 1 1 auto; +} + +/* Let the scroll area grow and shrink with the resizable window */ +#bm-window-filter.bm-windowed .bm-container.bm-scrollable { + display: block; + grid-row: 5; + min-height: 0; + min-width: 0; + height: 100%; + width: 100%; + max-height: 100% !important; + overflow: auto; + box-sizing: border-box; +} + +/* Visible resize handle in the bottom-right corner */ +#bm-window-filter.bm-windowed .bm-resize-corner { + position: absolute; + right: 4px; + bottom: 4px; + display: flex; + width: 20px; + height: 20px; + align-items: flex-end; + justify-content: flex-end; + padding-right: 4px; + padding-bottom: 4px; + box-sizing: border-box; + z-index: 5; + cursor: nwse-resize; + pointer-events: auto; + opacity: 0.78; + touch-action: none; + user-select: none; + color: rgba(255, 255, 255, 0.86); + background: linear-gradient(135deg, rgba(255, 255, 255, 0.14), rgba(83, 141, 255, 0.14)); + border: 1px solid rgba(255, 255, 255, 0.12); + border-radius: 8px; + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08); +} + +#bm-window-filter.bm-windowed .bm-resize-corner:hover, +#bm-window-filter.bm-windowed .bm-resize-corner.bm-resizing { + opacity: 1; + border-color: rgba(146, 221, 255, 0.36); + box-shadow: + inset 0 1px 0 rgba(255, 255, 255, 0.1), + 0 8px 16px rgba(0, 0, 0, 0.16); } /* Filter window container for RGB color display in windowed mode */ #bm-window-filter.bm-windowed .bm-filter-container-rgb { display: flex; width: 100%; + min-width: 0; + flex: 1 1 auto; gap: 0.5ch; align-items: center; - padding: 0.1em 0.5ch; + padding: 0.1rem 0.2rem; border: none; - border-radius: 1em; + border-radius: 8px; + box-sizing: border-box; } /* Filter window hide color button */ #bm-window-filter.bm-windowed .bm-filter-container-rgb button { - padding: 0.5em 0.25ch; + padding: 0.2em; + flex: 0 0 auto; } /* Filter window hide color button SVG in windowed mode */ -#bm-window-filter.bm-windowed .bm-filter-container-rgb svg { - width: 3ch; +#bm-window-filter.bm-windowed .bm-filter-container-rgb .bm-filter-eye-icon { + width: 1.36rem; + height: 1.36rem; } /* Filter window header 2 in windowed mode */ #bm-window-filter.bm-windowed .bm-filter-color h2 { - font-size: 0.75em; + font-size: 0.78rem; + min-width: 0; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; } /* Filter window dragbar text area in windowed mode */ #bm-window-filter #bm-filter-windowed-color-totals { + display: inline-flex; + align-items: center; + padding: 0.08rem 0.24rem; + border-radius: 999px; + background: rgba(255, 255, 255, 0.12); + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08); font-size: 1em; -} \ No newline at end of file +} + +@media (max-width: 980px) { + #bm-window-filter:not(.bm-windowed) { + width: min(100vw - 0.35rem, 50rem); + max-width: min(100vw - 0.35rem, 50rem) !important; + } + + #bm-window-filter .bm-filter-insights { + grid-template-columns: 1fr; + } + + #bm-window-filter .bm-filter-note, + #bm-window-filter .bm-filter-sort-panel, + #bm-window-filter .bm-filter-insights > hr { + grid-column: auto; + } +} diff --git a/src/WindowFilter.js b/src/WindowFilter.js index 9cedaa8..4c0ed15 100644 --- a/src/WindowFilter.js +++ b/src/WindowFilter.js @@ -1,7 +1,11 @@ import ConfettiManager from "./confetttiManager"; -import Overlay from "./Overlay"; +import Overlay, { minimizeIconExpanded } from "./Overlay"; import { calculateRelativeLuminance, localizeDate, localizeNumber, localizePercent, rgbToHex } from "./utils"; +const closeIcon = ''; +const fullscreenIcon = ''; +const windowedIcon = ''; + /** The overlay builder for the color filter Blue Marble window. * @description This class handles the overlay UI for the color filter window of the Blue Marble userscript. * @class WindowFilter @@ -21,13 +25,25 @@ export default class WindowFilter extends Overlay { this.windowID = 'bm-window-filter'; // The ID attribute for this window this.colorListID = 'bm-filter-flex'; // The ID attribute for the color list this.windowParent = document.body; // The parent of the window DOM tree + this.settingsManager = executor.settingsManager ?? null; // Settings manager from the executor + this.windowModeFlag = 'ftr-oWin'; // User setting flag for opening the filter in windowed mode + this.windowStateKey = 'windowFilter'; // User setting key for the persisted window state + this.windowResizeObserver = null; // Resize observer for the windowed mode + this.windowViewportResizeHandler = null; // Resize handler for viewport changes + this.windowSaveTimeout = null; // Debounce timer for resize persistence + this.colorRefreshInterval = null; // Auto-refresh timer for live color statistics + this.colorRefreshIntervalMS = 10000; // Refresh Color Filter statistics every 10 seconds + this.windowMinWidth = 360; // Minimum width for the windowed filter + this.windowMinHeight = 220; // Minimum height for the windowed filter + this.windowMaxWidth = 1000; // Maximum width for the windowed filter + this.windowMaxHeight = 1400; // Maximum height for the windowed filter /** The templateManager instance currently being used. @type {TemplateManager} */ this.templateManager = executor.apiManager?.templateManager; // Eye icons - this.eyeOpen = ''; - this.eyeClosed = ''; + this.eyeOpen = ''; + this.eyeClosed = ''; // Obtains the color palette Blue Marble currently uses const { palette: palette, LUT: _ } = this.templateManager.paletteBM; @@ -46,11 +62,22 @@ export default class WindowFilter extends Overlay { this.timeRemainingLocalized = ''; // The date & time the user will complete the templates in the date-time format of the user's device, as a string // Color list display settings - this.sortPrimary = 'id'; // The last used primary sort option - this.sortSecondary = 'ascending'; // The last used secondary sort option + this.sortPrimary = 'total'; // The last used primary sort option + this.sortSecondary = 'descending'; // The last used secondary sort option this.showUnused = false; // Were unused colors shown the last time the user sorted the color list? } + /** Builds the preferred filter window mode for the user. + * @since 0.92.0 + */ + buildPreferredWindow() { + if (this.#prefersWindowedMode()) { + this.buildWindowed(); + return; + } + this.buildWindow(); + } + /** Spawns a Color Filter window. * If another color filter window already exists, we DON'T spawn another! * Parent/child relationships in the DOM structure below are indicated by indentation. @@ -60,7 +87,7 @@ export default class WindowFilter extends Overlay { // If a color filter wizard window already exists, close it if (document.querySelector(`#${this.windowID}`)) { - document.querySelector(`#${this.windowID}`).remove(); + this.#closeWindow(); return; } @@ -71,48 +98,43 @@ export default class WindowFilter extends Overlay { // div.parentElement.appendChild(div); // When the window is clicked on, bring to top // } }).addDragbar() - .addButton({'class': 'bm-button-circle', 'textContent': '▼', 'aria-label': 'Minimize window "Color Filter"', 'data-button-status': 'expanded'}, (instance, button) => { + .addButton({'class': 'bm-button-circle', 'innerHTML': minimizeIconExpanded, 'aria-label': 'Minimize window "Color Filter"', 'data-button-status': 'expanded'}, (instance, button) => { button.onclick = () => instance.handleMinimization(button); button.ontouchend = () => {button.click()}; // Needed only to negate weird interaction with dragbar }).buildElement() .addDiv().buildElement() // Contains the minimized h1 element .addDiv({'class': 'bm-flex-center'}) - .addButton({'class': 'bm-button-circle', 'textContent': '🗗', 'aria-label': 'Switch to windowed mode for "Color Filter"'}, (instance, button) => { + .addButton({'class': 'bm-button-circle', 'innerHTML': windowedIcon, 'aria-label': 'Switch to windowed mode for "Color Filter"'}, (instance, button) => { button.onclick = () => { - document.querySelector(`#${this.windowID}`)?.remove(); + this.#setWindowModePreference(true); + this.#closeWindow(); this.buildWindowed(); }; button.ontouchend = () => {button.click();}; // Needed only to negate weird interaction with dragbar }).buildElement() - .addButton({'class': 'bm-button-circle', 'textContent': '✖', 'aria-label': 'Close window "Color Filter"'}, (instance, button) => { - button.onclick = () => {document.querySelector(`#${this.windowID}`)?.remove();}; + .addButton({'class': 'bm-button-circle', 'innerHTML': closeIcon, 'aria-label': 'Close window "Color Filter"'}, (instance, button) => { + button.onclick = () => this.#closeWindow(); button.ontouchend = () => {button.click();}; // Needed only to negate weird interaction with dragbar }).buildElement() .buildElement() .buildElement() .addDiv({'class': 'bm-window-content'}) - .addDiv({'class': 'bm-container bm-center-vertically'}) + .addDiv({'class': 'bm-container bm-center-vertically bm-filter-header'}) .addHeader(1, {'textContent': 'Color Filter'}).buildElement() .buildElement() .addHr().buildElement() - .addDiv({'class': 'bm-container bm-flex-between bm-center-vertically', 'style': 'gap: 1.5ch;'}) - .addButton({'textContent': 'Hide All Colors'}, (instance, button) => { + .addDiv({'class': 'bm-container bm-flex-between bm-center-vertically bm-filter-toolbar', 'style': 'gap: 1.5ch;'}) + .addButton({'class': 'bm-button-secondary', 'textContent': 'Hide All Colors'}, (instance, button) => { button.onclick = () => this.#selectColorList(false); }).buildElement() - .addButton({'textContent': 'Refresh Data'}, (instance, button) => { - button.onclick = () => { - button.disabled = true; - this.updateColorList(); - button.disabled = false; - }; - }).buildElement() - .addButton({'textContent': 'Show All Colors'}, (instance, button) => { + .addButton({'class': 'bm-button-secondary', 'textContent': 'Show All Colors'}, (instance, button) => { button.onclick = () => this.#selectColorList(true); }).buildElement() .buildElement() - .addDiv({'class': 'bm-container bm-scrollable'}) - .addDiv({'class': 'bm-container', 'style': 'margin-left: 2.5ch; margin-right: 2.5ch;'}) - .addDiv({'class': 'bm-container'}) + .addHr().buildElement() + .addDiv({'class': 'bm-container bm-scrollable bm-filter-scrollable'}) + .addDiv({'class': 'bm-container bm-filter-insights', 'style': 'margin-left: 2.5ch; margin-right: 2.5ch;'}) + .addDiv({'class': 'bm-container bm-filter-stats-card'}) .addSpan({'id': 'bm-filter-tile-load', 'innerHTML': 'Tiles Loaded: 0 / ???'}).buildElement() .addBr().buildElement() .addSpan({'id': 'bm-filter-tot-correct', 'innerHTML': 'Correct Pixels: ???'}).buildElement() @@ -123,11 +145,11 @@ export default class WindowFilter extends Overlay { .addBr().buildElement() .addSpan({'id': 'bm-filter-tot-completed', 'innerHTML': '??? ???'}).buildElement() .buildElement() - .addDiv({'class': 'bm-container'}) - .addP({'innerHTML': `Press the 🗗 button to make this window smaller. Colors with the icon ${this.eyeOpen.replace('