ADD: debug pages

girasolenergy · Dec 11, 2024 · e402fb5 · e402fb5
1 parent 3257df6
commit e402fb5
Show file tree

Hide file tree

Showing 5 changed files with 248 additions and 0 deletions.
diff --git a/debug/debug.html b/debug/debug.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <title>Debug Pages</title>
+    <meta charset="UTF-8">
+</head>
+<body>
+<h1>Debug Pages</h1>
+<ul>
+    <li><a href="timer.html">Timer</a></li>
+    <li><a href="memory_leak.html">Memory Leak</a></li>
+    <li><a href="svg.html">SVG</a></li>
+    <li><a href="emoji.html">Emoji</a></li>
+    <li><a href="scroll.html">Scroll</a></li>
+</ul>
+</body>
+</html>
diff --git a/debug/emoji.html b/debug/emoji.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <title>Emoji Page</title>
+    <style>
+        body {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            height: 100vh;
+            margin: 0;
+            font-size: 3vw;
+        }
+    </style>
+</head>
+<body>
+<div id="emojis" style="text-align: center;"></div>
+<script>
+    function randomEmoji() {
+        return String.fromCodePoint(0x1F300 + Math.floor(Math.random() * (0x1F5FF - 0x1F300)));
+    }
+    function randomEmojis() {
+        return Array.from({length: 9}, () => Array.from({length: 12}, randomEmoji).join('')).join('<br>');
+    }
+    setInterval(() => {
+        document.getElementById('emojis').innerHTML = randomEmojis();
+    }, 100);
+</script>
+</body>
+</html>
diff --git a/debug/memory_leak.html b/debug/memory_leak.html
@@ -0,0 +1,113 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <title>Memory Leak Page</title>
+    <style>
+        body {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            height: 100vh;
+            margin: 0;
+            color: #444;
+        }
+        h1 {
+            font-size: 5vw;
+        }
+        p {
+            margin: 0.4em;
+            font-size: 2.5vw;
+        }
+        p.small {
+            font-size: 1.8vw;
+        }
+        button {
+            font-size: 3vw;
+            padding: 0.5em 1em;
+            margin: 1em;
+            border: none;
+            border-radius: 0.5em;
+            background-color: #007bff;
+            color: white;
+            cursor: pointer;
+        }
+        a {
+            padding: 0.2em 0.4em;
+            margin: 0.1em;
+            border: none;
+            border-radius: 0.5em;
+            background-color: #007bff;
+            color: white;
+            cursor: pointer;
+        }
+    </style>
+</head>
+<body>
+<div style="text-align: center;">
+    <h1>Memory Leak Page</h1>
+
+    <p class="small">Limit JS Heap Size: <span id="limit"></span>MB</p>
+    <p class="small">Total JS Heap Size: <span id="total"></span>MB</p>
+    <p class="small">Used JS Heap Size: <span id="used"></span>MB</p>
+    <p>Total Garbage Size: <span id="totalGarbageSize"></span> items</p>
+    <p>Additional Garbage Size: <span id="additionalGarbageSize"></span> items / 10ms</p>
+    <p>Wait: <span id="wait"></span>s</p>
+    <p>
+        Seconds to x10: <span id="secondsToTenfold"></span>s
+        <a href='javascript:navigateWithSecondsToTenfold(0.5)'>0.5s</a>
+        <a href='javascript:navigateWithSecondsToTenfold(1)'>1s</a>
+        <a href='javascript:navigateWithSecondsToTenfold(2)'>2s</a>
+        <a href='javascript:navigateWithSecondsToTenfold(3)'>3s</a>
+        <a href='javascript:navigateWithSecondsToTenfold(5)'>5s</a>
+        <a href='javascript:navigateWithSecondsToTenfold(10)'>10s</a>
+    </p>
+
+    <button onclick="enabled = !enabled;">Toggle Memory Leak</button>
+    <button onclick="memoryArray = []; totalGarbageSize = 0; seconds = 0; wait = 0;">Reset</button>
+</div>
+<script>
+    let memoryArray = [];
+    let totalGarbageSize = 0;
+    let seconds = 0;
+    let enabled = true;
+    let wait = parseFloat(new URL(location).searchParams.get('wait')) || 0;
+    let secondsToTenfold = parseFloat(new URL(location).searchParams.get('secondsToTenfold')) || 3;
+
+    setInterval(() => {
+        document.getElementById('limit').textContent = (performance.memory.jsHeapSizeLimit / 1024 / 1024).toFixed(3);
+        document.getElementById('total').textContent = (performance.memory.totalJSHeapSize / 1024 / 1024).toFixed(3);
+        document.getElementById('used').textContent = (performance.memory.usedJSHeapSize / 1024 / 1024).toFixed(3);
+
+        const additionalGarbageSize = Math.floor(1000 * Math.pow(10, seconds / secondsToTenfold));
+        document.getElementById('additionalGarbageSize').textContent = additionalGarbageSize;
+
+        document.getElementById('wait').textContent = wait.toFixed(2);
+        document.getElementById('secondsToTenfold').textContent = secondsToTenfold.toFixed(1);
+
+
+        if (wait > 0) {
+            wait -= 0.01;
+            if (wait < 0) wait = 0;
+            return;
+        }
+
+        if (enabled) {
+            memoryArray.push(Array.from({length: additionalGarbageSize}, (_, index) => index));
+            totalGarbageSize += additionalGarbageSize;
+
+            seconds += 0.01;
+        }
+
+        document.getElementById('totalGarbageSize').textContent = totalGarbageSize;
+
+    }, 10);
+
+    function navigateWithSecondsToTenfold(secondsToTenfold) {
+        const url = new URL(window.location.href);
+        url.searchParams.set("secondsToTenfold", secondsToTenfold);
+        window.location.href = url;
+    }
+</script>
+</body>
+</html>
diff --git a/debug/svg.html b/debug/svg.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <title>SVG Page</title>
+    <style>
+        body {
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            height: 100vh;
+            margin: 0;
+        }
+    </style>
+</head>
+<body>
+<svg width="400" height="200">
+    <rect x="20" y="20" width="360" height="160" fill="#ffffff" filter="drop-shadow(0 0 5 #000)"/>
+    <path id="arc" d="" transform="translate(200,125)" fill="#cccccc" stroke="#888888"></path>
+    <text id="timer" x="200" y="100" font-size="45" text-anchor="middle" dominant-baseline="middle" fill="black">00:00:00.00</text>
+    <rect id="progress" x="40" y="140" width="320" height="20" fill="#cccccc" stroke="#888888"/>
+</svg>
+<button onclick="update = !update;" style="margin: 2vw;padding: 1vw;font-size: 2vw;">Update</button>
+<script>
+    let update = true;
+    const timer = document.getElementById('timer');
+    const progress = document.getElementById('progress');
+    const arc = document.getElementById('arc');
+    const startTime = Date.now();
+    setInterval(() => {
+        if (!update) return;
+        const elapsedTime = Date.now() - startTime;
+        const hh = String(Math.floor(elapsedTime / 1000 / 60 / 60)).padStart(2, '0');
+        const mm = String(Math.floor(elapsedTime / 1000 / 60) % 60).padStart(2, '0');
+        const ss = String(Math.floor(elapsedTime / 1000) % 60).padStart(2, '0');
+        const SS = String(Math.floor(elapsedTime / 10) % 100).padStart(2, '0');
+        timer.textContent = `${hh}:${mm}:${ss}.${SS}`;
+        const d1 = elapsedTime / 2500 % 1;
+        progress.setAttribute('width', `${320 * d1}`);
+        const d2 = elapsedTime / 3255 % 1;
+        arc.setAttribute('d', `
+            M ${100 * Math.cos(-135 / 180 *  Math.PI)},${100 * Math.sin(-135 / 180 *  Math.PI)}
+            A 100,100,0,0,1,${100 * Math.cos((-135 + 90 * d2) / 180 *  Math.PI)},${100 * Math.sin((-135 + 90 * d2) / 180 *  Math.PI)}
+            L ${80 * Math.cos((-135 + 90 * d2) / 180 *  Math.PI)},${80 * Math.sin((-135 + 90 * d2) / 180 *  Math.PI)}
+            A 80,80,0,0,0,${80 * Math.cos(-135 / 180 *  Math.PI)},${80 * Math.sin(-135 / 180 *  Math.PI)}
+            Z
+        `);
+    }, 10);
+</script>
+</body>
+</html>
diff --git a/debug/timer.html b/debug/timer.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <title>Timer Page</title>
+    <style>
+        body {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            height: 100vh;
+            margin: 0;
+        }
+        #timer {
+            font-size: 10vw;
+            color: #444;
+        }
+    </style>
+</head>
+<body>
+<div id="timer"></div>
+<script>
+    const timer = document.getElementById('timer');
+    const startTime = Date.now();
+    setInterval(() => {
+        const elapsedTime = Date.now() - startTime;
+        const hh = String(Math.floor(elapsedTime / 1000 / 60 / 60)).padStart(2, '0');
+        const mm = String(Math.floor(elapsedTime / 1000 / 60) % 60).padStart(2, '0');
+        const ss = String(Math.floor(elapsedTime / 1000) % 60).padStart(2, '0');
+        const SS = String(Math.floor(elapsedTime / 10) % 100).padStart(2, '0');
+        timer.textContent = `${hh}:${mm}:${ss}.${SS}`;
+    }, 30);
+</script>
+</body>
+</html>