thibault-ketterer · June 20, 2025 09:20 · Jun 20, 2025
diff --git a/napchart.js b/napchart.js
@@ -0,0 +1,75 @@
+// ==UserScript==
+// @name         Add 24h Clock Indicator to Canvas
+// @namespace    http://tampermonkey.net/
+// @version      2025-06-20
+// @description  Adds a current time indicator to 24h radial canvas chart
+// @author       You
+// @match        https://napchart.com/*
+// @icon         https://www.google.com/s2/favicons?sz=64&domain=napchart.com
+// @grant        none
+// ==/UserScript==
+
+
+(function() {
+    'use strict';
+
+    const canvasId = "asdf";
+    const lineColor = "rgba(0, 0, 0, 0.5)"; // semi-transparent
+    const lineWidth = 4;
+    const pollInterval = 2000; // ms
+
+    function drawClockHand(ctx, canvas) {
+        const now = new Date();
+        const secondsSinceMidnight = now.getHours() * 3600 + now.getMinutes() * 60 + now.getSeconds();
+        const angle = (secondsSinceMidnight / 86400) * 2 * Math.PI - Math.PI / 2;
+
+        const cx = canvas.width / 2;
+        const cy = canvas.height / 2;
+        const radius = Math.min(cx, cy) * 0.85;
+
+        const x = cx + radius * Math.cos(angle);
+        const y = cy + radius * Math.sin(angle);
+
+        ctx.save();
+        ctx.beginPath();
+        ctx.strokeStyle = lineColor;
+        ctx.lineWidth = lineWidth;
+        ctx.moveTo(cx, cy);
+        ctx.lineTo(x, y);
+        ctx.stroke();
+        ctx.beginPath();
+        ctx.arc(x, y, 5, 0, 2 * Math.PI);
+        ctx.fillStyle = lineColor;
+        ctx.fill();
+        ctx.restore();
+    }
+
+    function enhanceCanvas() {
+        console.log("canva launch");
+        const canvas = document.getElementById(canvasId);
+        if (!canvas) return;
+        console.log("canva found");
+
+        const ctx = canvas.getContext("2d");
+        if (!ctx) return;
+
+        const backup = ctx.getImageData(0, 0, canvas.width, canvas.height);
+
+        function update() {
+            ctx.putImageData(backup, 0, 0);
+            drawClockHand(ctx, canvas);
+        }
+
+        update();
+        setInterval(update, pollInterval);
+    }
+
+    const checkExist = setInterval(() => {
+        const canvas = document.getElementById(canvasId);
+        console.log("canva check");
+        if (canvas) {
+            clearInterval(checkExist);
+            enhanceCanvas();
+        }
+    }, 1000);
+})();