From 2fe862c9f15c1c509ab27d8aa480e9837105e739 Mon Sep 17 00:00:00 2001 From: Terncode Date: Sat, 27 Jul 2024 20:16:56 +0200 Subject: [PATCH] Fix pixel count on mobile --- dist/user-script.user.js | 6 +++--- src/UI/components/pixelCount.tsx | 15 +++++++++++---- 2 files changed, 14 insertions(+), 7 deletions(-) diff --git a/dist/user-script.user.js b/dist/user-script.user.js index ef891f3..ffadc75 100644 --- a/dist/user-script.user.js +++ b/dist/user-script.user.js @@ -1,7 +1,7 @@ // ==UserScript== // @name Pixel canvas overlay // @namespace http://tampermonkey.net/ -// @version 2024-07-28 +// @version 2024-07-29 // @description Scripts renders pixelated overlays over the tile map! // @author 0xa663, Terncode // @match https://pixelcanvas.io/* @@ -1043,7 +1043,7 @@ In order to be iterable, non-array objects must have a [Symbol.iterator]() metho position: fixed; display: flex; flex-direction: row; - bottom: 107px; + bottom: ${e=>e.width>480?107:187}px; right: 16px; background-color: rgba(255, 255, 255, 0.75); border: 2px solid black; @@ -1056,7 +1056,7 @@ In order to be iterable, non-array objects must have a [Symbol.iterator]() metho `,$N=u2.span` margin: 2px 5px; width: 19px; -`,yr=class extends E8.default.Component{constructor(c){super(c),this.state={count:0}}componentDidMount(){this.props.pixelCount.count.then(c=>{typeof c=="number"&&this.updateCount(c)}),this.props.pixelCount.on(this.updateCount)}componentWillUnmount(){this.props.pixelCount.on(this.updateCount)}updateCount=c=>{this.setState({count:c})};render(){return this.state.count?E8.default.createElement(KN,null,E8.default.createElement(QN,null,t7(this.state.count)),E8.default.createElement($N,null,E8.default.createElement(N1,{icon:wl}))):null}};function Ov(e,c,r,n,i){let s=[Tv(yi.default.createElement(yr,{pixelCount:i})),Tv(yi.default.createElement(xr,{cords:r,store:e,storage:c,palette:n}))];return()=>s.map(l=>l())}function Tv(e){let c=document.createElement("div");return(0,Rv.createRoot)(c).render(e),document.body.appendChild(c),()=>{c.parentElement?.removeChild(c)}}var wr=class{constructor(c){this.chrome=c}getItem(c){if(this.chrome)return new Promise(r=>{chrome.storage.local.get(c,n=>{n&&n[c]?r(JSON.parse(n[c])):r(null)})});{let r=localStorage.getItem(c);return Promise.resolve(r&&JSON.parse(r))}}async setItem(c,r){return this.chrome?new Promise(n=>{chrome.storage.local.set({[c]:JSON.stringify(r)},n)}):(localStorage.setItem(c,JSON.stringify(r)),Promise.resolve())}deleteItem(c){return this.chrome?new Promise(r=>{chrome.storage.local.remove(c,r)}):(localStorage.removeItem(c),Promise.resolve())}};var Sr=class e{constructor(c){this.storage=c;let r=document.createElement("script");r.addEventListener("load",()=>{document.body.removeChild(r)},{once:!0}),r.addEventListener("error",n=>{console.error(n)}),r.textContent=Pv,document.body.appendChild(r),document.addEventListener("__pixelsPlaced",n=>{typeof n.detail=="number"&&(this.storage.setItem(this.storageKey,n.detail),this.emitter.emit(0,n.detail))})}emitter=new $4;static instance;storageKey="__pixelsPlaced";static create(c){return this.instance||(this.instance=new e(c)),this.instance}on(c){this.emitter.on(0,c)}off(c){this.emitter.off(0,c)}get count(){return this.storage.getItem(this.storageKey)}};async function Dv(){let e=new s7;for(;!e.init();)await a7();let c=new wr(!1),r=Sr.create(c),n=new u7(c,e);await n.load();let i=new i7;await i.init(),Ov(n,c,i,e,r),console.log("%cOverlay by 0xa663","color: red; font-size: 15px; font-weight: bold; text-shadow: 2px 2px 4px #000000;"),console.log("%cTerncode's fork","color: #4a94cc; font-size: 10px; font-weight: bold; text-shadow: 1px 1px 0px #000000, -1px 1px 0px #000000, 1px -1px 0px #000000, -1px -1px 0px #000000;")}document.readyState==="complete"?Dv():window.addEventListener("load",Dv);})(); +`,yr=class extends E8.default.Component{constructor(c){super(c),this.state={count:0,width:window.innerWidth}}componentDidMount(){this.props.pixelCount.count.then(c=>{typeof c=="number"&&this.updateCount(c)}),this.props.pixelCount.on(this.updateCount),window.addEventListener("resize",this.onResize)}componentWillUnmount(){this.props.pixelCount.on(this.updateCount),window.removeEventListener("resize",this.onResize)}updateCount=c=>{this.setState({count:c})};onResize=()=>{this.setState({width:window.innerWidth})};render(){return this.state.count?E8.default.createElement(KN,{width:this.state.width},E8.default.createElement(QN,null,t7(this.state.count)),E8.default.createElement($N,null,E8.default.createElement(N1,{icon:wl}))):null}};function Ov(e,c,r,n,i){let s=[Tv(yi.default.createElement(yr,{pixelCount:i})),Tv(yi.default.createElement(xr,{cords:r,store:e,storage:c,palette:n}))];return()=>s.map(l=>l())}function Tv(e){let c=document.createElement("div");return(0,Rv.createRoot)(c).render(e),document.body.appendChild(c),()=>{c.parentElement?.removeChild(c)}}var wr=class{constructor(c){this.chrome=c}getItem(c){if(this.chrome)return new Promise(r=>{chrome.storage.local.get(c,n=>{n&&n[c]?r(JSON.parse(n[c])):r(null)})});{let r=localStorage.getItem(c);return Promise.resolve(r&&JSON.parse(r))}}async setItem(c,r){return this.chrome?new Promise(n=>{chrome.storage.local.set({[c]:JSON.stringify(r)},n)}):(localStorage.setItem(c,JSON.stringify(r)),Promise.resolve())}deleteItem(c){return this.chrome?new Promise(r=>{chrome.storage.local.remove(c,r)}):(localStorage.removeItem(c),Promise.resolve())}};var Sr=class e{constructor(c){this.storage=c;let r=document.createElement("script");r.addEventListener("load",()=>{document.body.removeChild(r)},{once:!0}),r.addEventListener("error",n=>{console.error(n)}),r.textContent=Pv,document.body.appendChild(r),document.addEventListener("__pixelsPlaced",n=>{typeof n.detail=="number"&&(this.storage.setItem(this.storageKey,n.detail),this.emitter.emit(0,n.detail))})}emitter=new $4;static instance;storageKey="__pixelsPlaced";static create(c){return this.instance||(this.instance=new e(c)),this.instance}on(c){this.emitter.on(0,c)}off(c){this.emitter.off(0,c)}get count(){return this.storage.getItem(this.storageKey)}};async function Dv(){let e=new s7;for(;!e.init();)await a7();let c=new wr(!1),r=Sr.create(c),n=new u7(c,e);await n.load();let i=new i7;await i.init(),Ov(n,c,i,e,r),console.log("%cOverlay by 0xa663","color: red; font-size: 15px; font-weight: bold; text-shadow: 2px 2px 4px #000000;"),console.log("%cTerncode's fork","color: #4a94cc; font-size: 10px; font-weight: bold; text-shadow: 1px 1px 0px #000000, -1px 1px 0px #000000, 1px -1px 0px #000000, -1px -1px 0px #000000;")}document.readyState==="complete"?Dv():window.addEventListener("load",Dv);})(); /*! Bundled license information: lodash/lodash.js: diff --git a/src/UI/components/pixelCount.tsx b/src/UI/components/pixelCount.tsx index e57b6c8..19f3855 100644 --- a/src/UI/components/pixelCount.tsx +++ b/src/UI/components/pixelCount.tsx @@ -5,11 +5,11 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { faSquare } from "@fortawesome/free-solid-svg-icons"; import { formatNumber } from "../../lib/utils"; -const CountBox = styled.div` +const CountBox = styled.div<{width: number}>` position: fixed; display: flex; flex-direction: row; - bottom: 107px; + bottom: ${props => (props.width > 480 ? 107 : 187)}px; right: 16px; background-color: rgba(255, 255, 255, 0.75); border: 2px solid black; @@ -34,6 +34,7 @@ interface Props { interface State { count: number; + width: number; } export class PixelCount extends React.Component { @@ -41,7 +42,8 @@ export class PixelCount extends React.Component { constructor(props:Props) { super(props); this.state = { - count: 0 + count: 0, + width: window.innerWidth, }; } componentDidMount() { @@ -51,19 +53,24 @@ export class PixelCount extends React.Component { } }); this.props.pixelCount.on(this.updateCount); + window.addEventListener("resize", this.onResize); } componentWillUnmount() { this.props.pixelCount.on(this.updateCount); + window.removeEventListener("resize", this.onResize); } updateCount = (count: number) => { this.setState({count}); }; + onResize = () => { + this.setState({ width: window.innerWidth }); + }; render() { if (!this.state.count) return null; return ( - + {formatNumber(this.state.count)}