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

Update debugger

Browse Source
This commit is contained in:
Terncode
2025-02-11 22:18:54 +01:00
parent 006786ea29
commit 70de7cf170
3 changed files with 112 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
debugger/coordinates.js
+77 -3
View File
@@ -1,12 +1,86 @@
const cords = document.getElementById("coordinates"); const cords = document.getElementById("coordinates");
const [canvas] = document.getElementsByClassName("leaflet-tile");
const key = "storage_location";
const s = JSON.parse(localStorage.getItem(key) || JSON.stringify([0, 1000, 2]));
const cordsArr = s;
const url = [-1.1,-1.1,-1.1];
let down = undefined;
setInterval(() => {
if (url[0] !== cordsArr[0] || url[1] !== cordsArr[1] || url[2] !== cordsArr[2]) {
url[0] = cordsArr[0];
url[1] = cordsArr[1];
url[2] = cordsArr[2];
history.pushState(null, "", `/@${url[0]},${url[1]},${url[2]}`);
}
}, 1000);
function updateCords(x, y) { function updateCords(x, y) {
cords.textContent = `(${Math.round(x)}, ${Math.round(y)})`; localStorage.setItem(key, JSON.stringify([x,y, cordsArr[2]]));
const text = `(${Math.round(x)}, ${Math.round(y)})`;
if (cords.firstChild) {
cords.firstChild.nodeValue = text;
} else {
cords.textContent = text;
}
if (down) {
const size = 250;
const half = size / 2;
canvas.style.height = canvas.style.width = `${size + 4}px`;
const centerW = Math.round(window.innerWidth / 2) - half;
const centerH = Math.round(window.innerHeight / 2) - half;
canvas.style.left = `${centerW + ((Math.abs(x) % size) - half)}px`;
canvas.style.top = `${centerH + ((Math.abs(y) % size) - half)}px`;
}
} }
updateCords(0, 1000); updateCords(cordsArr[0], cordsArr[1]);
cords.addEventListener("click", () => {
const cord = prompt("cords");
if (cord) {
down = undefined;
const [x, y] = cord.split(",");
cordsArr[0] = parseInt(x);
cordsArr[1] = parseInt(y);
cordsArr[2] = cordsArr[2] ?? 2;
updateCords(cordsArr[0], cordsArr[1]);
}
});
window.addEventListener("mousemove", event => { window.addEventListener("mousemove", event => {
updateCords(event.x, event.y);
if (down) {
updateCords(
down[0] - event.x,
down[1] - event.y
);
} else {
updateCords(
cordsArr[0] + event.x,
cordsArr[1] + event.y
);
}
});
window.addEventListener("mousedown", event => down = [event.x, event.y]);
window.addEventListener("mouseup", event => {
if (down) {
cordsArr[0] -= down[0] - event.x;
cordsArr[1] -= down[1] - event.y;
updateCords(cordsArr[0], cordsArr[1]);
down = null;
}
});
window.addEventListener("keypress", event => {
if (event.key === "+") {
cordsArr[2]++;
} else if (event.key === "-") {
cordsArr[2]--;
}
}); });
debugger/index.html
+21 -1
View File
@@ -6,10 +6,30 @@
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
<title>Pixel canvas emulator</title> <title>Pixel canvas emulator</title>
<style>
.mid {
position: fixed;
width: 5px;
height: 5px;
background-color: black;
top: 50%;
left: 50%
}
.leaflet-tile {
position: fixed;
width: 250px;
height: 250px;
top: calc(50% - 250px);
left: calc(50% - 250px);
border: 1px solid black
}
</style>
</head> </head>
<body> <body>
<canvas class="leaflet-tile" ></canvas>
<div class="mid"></div>
<!-- palette --> <!-- palette -->
<div> <div>
<button style="background-color: rgb(255, 255, 255);"></button> <button style="background-color: rgb(255, 255, 255);"></button>
debugger/poll.js
+14 -14
View File
@@ -1,15 +1,15 @@
(async () => { // (async () => {
const file = await fetch("../dist/user-script.user.js").then((e => e.text())); // const file = await fetch("../dist/user-script.user.js").then((e => e.text()));
while (true) { // while (true) {
await new Promise(resolve => setTimeout(resolve), 100); // await new Promise(resolve => setTimeout(resolve), 100);
const file2 = await fetch("../dist/user-script.user.js") // const file2 = await fetch("../dist/user-script.user.js")
.then((e => e.status === 200 ? e.text() : Promise.resolve(file))); // .then((e => e.status === 200 ? e.text() : Promise.resolve(file)));
if (file !== file2) { // if (file !== file2) {
console.log(file); // console.log(file);
break; // break;
} // }
} // }
await new Promise(resolve => setTimeout(resolve), 1000); // await new Promise(resolve => setTimeout(resolve), 1000);
location.reload(); // location.reload();
})(); // })();