Add local debugger

2025-02-09 15:46:27 +01:00
parent 502349b4ec
commit 46d5e7521f
4 changed files with 341 additions and 0 deletions
@@ -0,0 +1,12 @@
+const cords = document.getElementById("coordinates");
+
+function updateCords(x, y) {
+    cords.textContent = `(${Math.round(x)}, ${Math.round(y)})`;
+
+}
+
+updateCords(0, 1000);
+
+window.addEventListener("mousemove", event => {
+    updateCords(event.x, event.y);
+});
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="style.css">
+
+    <title>Pixel canvas emulator</title>
+</head>
+
+<body>
+
+    <!-- palette -->
+    <div>
+        <button style="background-color: rgb(255, 255, 255);"></button>
+        <button style="background-color: rgb(228, 228, 228);"></button>
+        <button style="background-color: rgb(136, 136, 136);"></button> 
+        <button style="background-color: rgb(34, 34, 34);"></button>
+        <button style="background-color: rgb(255, 167, 209);"></button>
+        <button style="background-color: rgb(229, 0, 0);"></button>
+        <button style="background-color: rgb(229, 149, 0);"></button>
+        <button style="background-color: rgb(160, 106, 66);"></button>
+        <button style="background-color: rgb(229, 217, 0);"></button>
+        <button style="background-color: rgb(148, 224, 68);"></button>
+        <button style="background-color: rgb(2, 190, 1);"></button>
+        <button style="background-color: rgb(0, 211, 221);"></button>
+        <button style="background-color: rgb(0, 131, 199);"></button>
+        <button style="background-color: rgb(0, 0, 234);"></button>
+        <button style="background-color: rgb(207, 110, 228);"></button>
+        <button style="background-color: rgb(130, 0, 128);"></button>
+    </div>
+
+    <div id="coordinates"></div>
+
+    <script src="poll.js"></script>
+    <script src="coordinates.js"></script>
+    <script src="../dist/user-script.user.js"></script>
+</body>
+
+</html>
@@ -0,0 +1,15 @@
+(async () => {
+    const file = await fetch("../dist/user-script.user.js").then((e => e.text()));
+    while (true) {
+        await new Promise(resolve => setTimeout(resolve), 100);
+        const file2 = await fetch("../dist/user-script.user.js")
+            .then((e => e.status === 200 ? e.text() : Promise.resolve(file)));
+        if (file !== file2) {
+            console.log(file);
+            break;
+        }
+    }
+    await new Promise(resolve => setTimeout(resolve), 1000);
+    location.reload();
+
+})();
@@ -0,0 +1,274 @@
+html {
+    line-height: 1.5;
+    -webkit-text-size-adjust: 100%;
+    -moz-tab-size: 4;
+    -o-tab-size: 4;
+    tab-size: 4;
+    font-family: ui-sans-serif, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
+    font-feature-settings: normal;
+    font-variation-settings: normal;
+    -webkit-tap-highlight-color: transparent
+}
+
+body {
+    margin: 0;
+    line-height: inherit
+}
+
+hr {
+    height: 0;
+    color: inherit;
+    border-top-width: 1px
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    font-size: inherit;
+    font-weight: inherit
+}
+
+a {
+    color: inherit;
+    text-decoration: inherit
+}
+
+b,
+strong {
+    font-weight: bolder
+}
+
+code,
+kbd,
+pre,
+samp {
+    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
+    font-feature-settings: normal;
+    font-variation-settings: normal;
+    font-size: 1em
+}
+
+small {
+    font-size: 80%
+}
+
+sub,
+sup {
+    font-size: 75%;
+    line-height: 0;
+    position: relative;
+    vertical-align: baseline
+}
+
+sub {
+    bottom: -.25em
+}
+
+sup {
+    top: -.5em
+}
+
+table {
+    text-indent: 0;
+    border-color: inherit;
+    border-collapse: collapse
+}
+
+button,
+input,
+optgroup,
+select,
+textarea {
+    font-family: inherit;
+    font-feature-settings: inherit;
+    font-variation-settings: inherit;
+    font-size: 100%;
+    font-weight: inherit;
+    line-height: inherit;
+    letter-spacing: inherit;
+    color: inherit;
+    margin: 0;
+    padding: 0
+}
+
+button,
+select {
+    text-transform: none
+}
+
+button,
+input:where([type=button]),
+input:where([type=reset]),
+input:where([type=submit]) {
+    -webkit-appearance: button;
+    background-color: transparent;
+    background-image: none
+}
+
+:-moz-focusring {
+    outline: auto
+}
+
+:-moz-ui-invalid {
+    box-shadow: none
+}
+
+progress {
+    vertical-align: baseline
+}
+
+::-webkit-inner-spin-button,
+::-webkit-outer-spin-button {
+    height: auto
+}
+
+[type=search] {
+    -webkit-appearance: textfield;
+    outline-offset: -2px
+}
+
+::-webkit-search-decoration {
+    -webkit-appearance: none
+}
+
+::-webkit-file-upload-button {
+    -webkit-appearance: button;
+    font: inherit
+}
+
+summary {
+    display: list-item
+}
+
+blockquote,
+dd,
+dl,
+figure,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+hr,
+p,
+pre {
+    margin: 0
+}
+
+fieldset {
+    margin: 0
+}
+
+fieldset,
+legend {
+    padding: 0
+}
+
+menu,
+ol,
+ul {
+    list-style: none;
+    margin: 0;
+    padding: 0
+}
+
+dialog {
+    padding: 0
+}
+
+textarea {
+    resize: vertical
+}
+
+input::-moz-placeholder,
+textarea::-moz-placeholder {
+    opacity: 1;
+    color: #9ca3af
+}
+
+input::placeholder,
+textarea::placeholder {
+    opacity: 1;
+    color: #9ca3af
+}
+
+[role=button],
+button {
+    cursor: pointer
+}
+
+:disabled {
+    cursor: default
+}
+
+audio,
+canvas,
+embed,
+iframe,
+img,
+object,
+svg,
+video {
+    display: block;
+    vertical-align: middle;
+}
+
+img,
+video {
+    max-width: 100%;
+    height: auto
+}
+
+[hidden]:where(:not([hidden=until-found])) {
+    display: none
+}
+
+.sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border-width: 0
+}
+
+
+@media (min-width:480px) {
+    .xs\:bottom-16 {
+        bottom: 4rem
+    }
+
+    .xs\:bottom-4 {
+        bottom: 1rem
+    }
+}
+
+@media (min-width:640px) {
+    .sm\:items-start {
+        align-items: flex-start
+    }
+
+    .sm\:items-end {
+        align-items: flex-end
+    }
+
+    .sm\:p-6 {
+        padding: 1.5rem
+    }
+
+    .sm\:px-6 {
+        padding-left: 1.5rem;
+        padding-right: 1.5rem
+    }
+
+    .sm\:text-left {
+        text-align: left
+    }
+}