diff --git a/dist/user-script.js b/dist/user-script.js index fcc8583..368f9ed 100644 --- a/dist/user-script.js +++ b/dist/user-script.js @@ -1,7 +1,7 @@ // ==UserScript== // @name Pixel canvas overlay // @namespace http://tampermonkey.net/ -// @version 2024-02-16 +// @version 2024-02-17 // @description Scripts renders pixelated overlays over the tile map! // @author 0xa663 // @match https://pixelcanvas.io/* @@ -3854,7 +3854,7 @@ result2.placeholder = curryRight.placeholder; return result2; } - function debounce3(func, wait, options) { + function debounce2(func, wait, options) { var lastArgs, lastThis, maxWait, result2, timerId, lastCallTime, lastInvokeTime = 0, leading = false, maxing = false, trailing = true; if (typeof func != "function") { throw new TypeError2(FUNC_ERROR_TEXT); @@ -4034,7 +4034,7 @@ leading = "leading" in options ? !!options.leading : leading; trailing = "trailing" in options ? !!options.trailing : trailing; } - return debounce3(func, wait, { + return debounce2(func, wait, { "leading": leading, "maxWait": wait, "trailing": trailing @@ -5048,7 +5048,7 @@ lodash.create = create; lodash.curry = curry; lodash.curryRight = curryRight; - lodash.debounce = debounce3; + lodash.debounce = debounce2; lodash.defaults = defaults; lodash.defaultsDeep = defaultsDeep; lodash.defer = defer; @@ -36557,7 +36557,7 @@ this.draw(); } } - click = (0, import_lodash3.debounce)((colorIndex) => { + click(colorIndex) { if (colorIndex >= 0 && colorIndex < this.props.palette.palette.length) { if (!this.props.palette.buttons[colorIndex].classList.contains("outline-2")) { if (this.state.colorAssistant) { @@ -36565,7 +36565,7 @@ } } } - }, 50); + } componentDidMount() { this.props.cords.on(0 /* Div */, this.update); this.props.cords.on(0 /* Div */, this.onCords); diff --git a/src/UI/Popup.tsx b/src/UI/Popup.tsx deleted file mode 100644 index 62b7443..0000000 --- a/src/UI/Popup.tsx +++ /dev/null @@ -1,234 +0,0 @@ -import React, { createRef } from "react"; -import styled from "styled-components"; -import { createRoot } from "react-dom/client"; - -const Box = styled.div` - border: 1px solid white; - background-color: black; - min-width: 250px; - min-height: 50px; - max-width: fit-content; - max-height: fit-content; - margin: 15px auto 15px auto; - padding: 10px; - pointer-events: all; - touch-action: auto; -`; - -const P = styled.p` - white-space: pre-warp; -`; - -const BtnFlex = styled.div` - display: flex; -`; - -const Input = styled.input` - color: white; - border: 1px solid white; - background-color: black; - margin: 2px; - padding: 5px; - outline: none !important; -`; - -const Btn = styled.button` - border: 1px solid white; - width: 100%; - border-radius: none; - margin: 2px; - padding: 2px; - outline: none !important; - &:hover { - background-color: rgba(255, 255, 255, 0.15); - } - transition: background-color 250ms; -`; - -export class Popup { - private static _ref: HTMLDivElement; - private static active?: () => void; - private static root: any; - static alert(message: string, title?: string) { - return new Promise(resolve => { - Popup.clear(); - const onClick = () => { - resolve(); - this.active = undefined; - this.clear(); - }; - this.active = onClick; - - Popup.renderContent( -
-
{title || `${location.host} says`}
-

{message}

- onClick()}>OK -
, - ); - }); - } - static async confirm(message: string, title?: string): Promise { - return new Promise(resolve => { - Popup.clear(); - const onClick = (value: boolean) => { - resolve(value); - this.active = undefined; - this.clear(); - }; - this.active = () => onClick(false); - - Popup.renderContent( -
-
{title || `${location.host} says`}
-

{message}

- - onClick(true)}>OK - onClick(false)}>Cancel - -
, - ); - }); - } - static async prompt(message?: string, _default?: string, title?: string) { - return new Promise(resolve => { - Popup.clear(); - const onClick = (value: string | null) => { - resolve(value); - this.active = undefined; - this.clear(); - }; - this.active = () => onClick(""); - const inputRef = createRef(); - Popup.renderContent( -
-
{title || `${location.host} says`}
-

{message}

- - - onClick(inputRef.current && inputRef.current.value)}>OK - onClick(null)}>Cancel - -
, - ); - if (inputRef.current) { - inputRef.current.focus(); - inputRef.current.value = _default || ""; - inputRef.current.addEventListener("keyup", event => { - if (event.key.toLowerCase() === "enter") { - if (inputRef.current) { - onClick(inputRef.current.value); - } - } - }); - } else { - console.error("Missing reference"); - } - }); - } - static custom( - element: JSX.Element, - buttons?: { - content: string | JSX.Element; - click: (event: React.MouseEvent) => void | boolean | null | Promise; - }[], - ) { - return new Promise(resolve => { - Popup.clear(); - const onClick = () => { - this.active = undefined; - resolve(); - this.clear(); - }; - this.active = () => onClick(); - Popup.renderContent( -
- {element} - - {buttons - ? buttons.map((e, i) => ( - { - const raw = e.click(ev); - let stayActive: any; - if (raw instanceof Promise) { - stayActive = await raw; - } else { - stayActive = raw; - } - - if (!stayActive) { - this.active = undefined; - this.clear(); - resolve(); - } - }} - > - {e.content} - - )) - : null} - -
, - ); - }); - } - static close() { - this.clear(); - } - - private static clear() { - if (this.root) { - this.root.unmount(); - this.root = undefined; - } - // while (Popup.ref.children.length) { - // const child = Popup._ref.children[0]; - // child.parentNode.removeChild(child); - // } - const style = Popup.ref.style; - style.pointerEvents = "none"; - style.touchAction = "none"; - style.backgroundColor = "rgba(0, 0, 0, 0)"; - if (this.active) { - this.active(); - } - this.active = undefined; - } - - private static renderContent(content: JSX.Element) { - const rootElement = Popup.createBase(content); - this.root = createRoot(Popup.ref); - this.root.render(rootElement); - const style = Popup.ref.style; - style.pointerEvents = "all"; - style.touchAction = "auto"; - style.backgroundColor = "rgba(0, 0, 0, 0.5)"; - } - - private static createBase(content: JSX.Element) { - return {content}; - } - - private static get ref() { - if (Popup._ref) { - return Popup._ref; - } - const ref = document.createElement("div"); - document.body.appendChild(ref); - Popup._ref = ref; - const style = ref.style; - style.position = "fixed"; - style.zIndex = `${Number.MAX_SAFE_INTEGER}`; - style.width = "100%"; - style.height = "100%"; - style.pointerEvents = "none"; - style.touchAction = "none"; - style.backgroundColor = "rgba(0, 0, 0, 0)"; - style.transition = "background-color 1s"; - style.overflowY = "auto"; - style.overflowX = "hidden"; - return ref; - } -} diff --git a/src/UI/components/minimap.tsx b/src/UI/components/minimap.tsx index c937401..9ed5bfa 100644 --- a/src/UI/components/minimap.tsx +++ b/src/UI/components/minimap.tsx @@ -7,7 +7,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import styled from "styled-components"; import { createCanvas, drawPixelsOntoCanvas } from "../../utils"; import { Palette } from "../../palette"; -import { clamp, debounce } from "lodash"; +import { clamp} from "lodash"; import { Store } from "../../store"; import { Storage } from "../../storage"; @@ -81,19 +81,18 @@ export class Minimap extends React.Component { this.draw(); } else if (prevState.size !== this.state.size) { this.draw(); - } - + } } - private click = debounce((colorIndex: number) => { + private click(colorIndex: number) { if (colorIndex >= 0 && colorIndex < this.props.palette.palette.length) { - if (!this.props.palette.buttons[colorIndex].classList.contains("outline-2")) { - if (this.state.colorAssistant) { - this.props.palette.buttons[colorIndex].click(); + if (!this.props.palette.buttons[colorIndex].classList.contains("outline-2")) { + if (this.state.colorAssistant) { + this.props.palette.buttons[colorIndex].click(); + } } - } - } - }, 50); + } + } componentDidMount () {