Terncode/Pixelcanvas.io-overlay
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix pixel count on mobile

Browse Source
This commit is contained in:
Terncode
2024-07-27 20:16:56 +02:00
parent d5aaccd616
commit 2fe862c9f1
2 changed files with 14 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dist/user-script.user.js
Vendored
+3 -3
View File
@@ -1,7 +1,7 @@
// ==UserScript== // ==UserScript==
// @name Pixel canvas overlay // @name Pixel canvas overlay
// @namespace http://tampermonkey.net/ // @namespace http://tampermonkey.net/
// @version 2024-07-28 // @version 2024-07-29
// @description Scripts renders pixelated overlays over the tile map! // @description Scripts renders pixelated overlays over the tile map!
// @author 0xa663, Terncode // @author 0xa663, Terncode
// @match https://pixelcanvas.io/* // @match https://pixelcanvas.io/*
@@ -1043,7 +1043,7 @@ In order to be iterable, non-array objects must have a [Symbol.iterator]() metho
position: fixed; position: fixed;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
bottom: 107px; bottom: ${e=>e.width>480?107:187}px;
right: 16px; right: 16px;
background-color: rgba(255, 255, 255, 0.75); background-color: rgba(255, 255, 255, 0.75);
border: 2px solid black; 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` `,$N=u2.span`
margin: 2px 5px; margin: 2px 5px;
width: 19px; 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: /*! Bundled license information:
lodash/lodash.js: lodash/lodash.js:
src/UI/components/pixelCount.tsx
+11 -4
View File
@@ -5,11 +5,11 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faSquare } from "@fortawesome/free-solid-svg-icons"; import { faSquare } from "@fortawesome/free-solid-svg-icons";
import { formatNumber } from "../../lib/utils"; import { formatNumber } from "../../lib/utils";
const CountBox = styled.div` const CountBox = styled.div<{width: number}>`
position: fixed; position: fixed;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
bottom: 107px; bottom: ${props => (props.width > 480 ? 107 : 187)}px;
right: 16px; right: 16px;
background-color: rgba(255, 255, 255, 0.75); background-color: rgba(255, 255, 255, 0.75);
border: 2px solid black; border: 2px solid black;
@@ -34,6 +34,7 @@ interface Props {
interface State { interface State {
count: number; count: number;
width: number;
} }
export class PixelCount extends React.Component<Props, State> { export class PixelCount extends React.Component<Props, State> {
@@ -41,7 +42,8 @@ export class PixelCount extends React.Component<Props, State> {
constructor(props:Props) { constructor(props:Props) {
super(props); super(props);
this.state = { this.state = {
count: 0 count: 0,
width: window.innerWidth,
}; };
} }
componentDidMount() { componentDidMount() {
@@ -51,19 +53,24 @@ export class PixelCount extends React.Component<Props, State> {
} }
}); });
this.props.pixelCount.on(this.updateCount); this.props.pixelCount.on(this.updateCount);
window.addEventListener("resize", this.onResize);
} }
componentWillUnmount() { componentWillUnmount() {
this.props.pixelCount.on(this.updateCount); this.props.pixelCount.on(this.updateCount);
window.removeEventListener("resize", this.onResize);
} }
updateCount = (count: number) => { updateCount = (count: number) => {
this.setState({count}); this.setState({count});
}; };
onResize = () => {
this.setState({ width: window.innerWidth });
};
render() { render() {
if (!this.state.count) return null; if (!this.state.count) return null;
return ( return (
<CountBox> <CountBox width={this.state.width}>
<Count>{formatNumber(this.state.count)}</Count> <Count>{formatNumber(this.state.count)}</Count>
<Icon><FontAwesomeIcon icon={ faSquare }></FontAwesomeIcon></Icon> <Icon><FontAwesomeIcon icon={ faSquare }></FontAwesomeIcon></Icon>
</CountBox> </CountBox>