an http based roguelike rpg about jelqing
Blame: src/ui.html
99524cf9f17c | atagen | 2026-10-10 10:53 UTC | 1 | <!DOCTYPE html> |
99524cf9f17c | atagen | 2026-10-10 10:53 UTC | 2 | <html> |
99524cf9f17c | atagen | 2026-10-10 10:53 UTC | 3 | <head> |
99524cf9f17c | atagen | 2026-10-10 10:53 UTC | 4 | <meta charset="utf-8"> |
99524cf9f17c | atagen | 2026-10-10 10:53 UTC | 5 | <title>jelqd</title> |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 6 | <style> |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 7 | .frame { border: 2px inset; background: #fff; height: 85vh; overflow: scroll; padding: 4px; } |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 8 | #log { white-space: pre-wrap; margin: 0; } |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 9 | pre, li, p, td, label { overflow-wrap: anywhere; } |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 10 | </style> |
99524cf9f17c | atagen | 2026-10-10 10:53 UTC | 11 | </head> |
99524cf9f17c | atagen | 2026-10-10 10:53 UTC | 12 | <body> |
99524cf9f17c | atagen | 2026-10-10 10:53 UTC | 13 | |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 14 | <h1>jelqd</h1> |
ef7d6dee5976 | atagen | 2026-10-10 13:23 UTC | 15 | <p>A roguelike played over HTTP. Pick a resource, pick a method, send it. The log on the right is everything the server has said to you. |
ef7d6dee5976 | atagen | 2026-10-10 13:23 UTC | 16 | Language <select id="locale"><option>en-GB</option><option>en-US</option><option>en-AU</option></select></p> |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 17 | |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 18 | <table width="100%" cellspacing="6"> |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 19 | <tr> |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 20 | <td width="45%" valign="top"> |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 21 | <div class="frame"> |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 22 | |
431c1bc8ded1 | atagen | 2026-10-10 13:20 UTC | 23 | <div id="alerts"></div> |
431c1bc8ded1 | atagen | 2026-10-10 13:20 UTC | 24 | |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 25 | <form id="form"> |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 26 | <h3>Method</h3> |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 27 | <div id="methods"></div> |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 28 | |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 29 | <h3>Request</h3> |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 30 | <table id="fields" cellpadding="2"></table> |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 31 | |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 32 | <p><input type="submit" id="send" value="Send" style="font-size: 1.3em"></p> |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 33 | |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 34 | <h3>Stats</h3> |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 35 | <table id="stats" border="1" cellspacing="0" cellpadding="3"></table> |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 36 | |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 37 | <h3>Resource</h3> |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 38 | <div id="targets"></div> |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 39 | </form> |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 40 | |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 41 | <p><small>Every request goes through <code>/ui/send</code>, which replays it inside the server, so the page can show redirects and send methods and headers that browsers refuse.</small></p> |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 42 | </div> |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 43 | </td> |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 44 | <td valign="top"> |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 45 | <div class="frame" id="frame"><pre id="log"></pre></div> |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 46 | </td> |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 47 | </tr> |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 48 | </table> |
99524cf9f17c | atagen | 2026-10-10 10:53 UTC | 49 | |
99524cf9f17c | atagen | 2026-10-10 10:53 UTC | 50 | <script> |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 51 | const REL = "https://jelq.dev/rels/"; |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 52 | const METHODS = ["JELQ", "GET", "HEAD", "POST", "PUT", "PATCH", "DELETE", "OPTIONS", "TRACE"]; |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 53 | const TECHNIQUES = ["warmup", "wet", "dry", "stretch", "uli", "edge", "pump", "ice", "supplement"]; |
9683736a2c5e | atagen | 2026-10-10 13:15 UTC | 54 | const DEATHS = ["vascular-event", "caught", "banned", "degloved", "zip", "run-ended"]; |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 55 | const STATS = [ |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 56 | ["x-floor", "Floor"], |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 57 | ["x-self-reported-length", "Self-reported length"], |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 58 | ["x-girth", "Girth"], |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 59 | ["x-foreskin", "Foreskin"], |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 60 | ["x-eq", "EQ (aim for 50 to 70)"], |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 61 | ["x-stamina", "Stamina"], |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 62 | ["x-suspicion", "Suspicion"], |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 63 | ["x-shame", "Shame"], |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 64 | ["x-cash", "Cash"], |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 65 | ]; |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 66 | const QUIET = new Set(["link", "set-cookie", "server", "x-powered-by", "cache-control", "content-length", "content-type", "date"].concat(STATS.map(s => s[0]))); |
99524cf9f17c | atagen | 2026-10-10 10:53 UTC | 67 | |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 68 | const FIELDS = { |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 69 | seed: { label: "seed (unranked)", kind: "text" }, |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 70 | technique: { label: "technique", kind: "select", options: TECHNIQUES }, |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 71 | also: { label: "combo with", kind: "select", options: ["", "wet", "dry", "stretch", "uli"] }, |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 72 | intensity: { label: "intensity, 1 to 10", kind: "number", value: "5" }, |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 73 | lube: { label: "Content-Type", header: "Content-Type", kind: "select", options: ["", "application/baby-oil", "application/coconut-oil", "application/lotion", "application/vaseline", "text/plain; charset=spit", "image/jpeg"] }, |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 74 | patch: { label: "body", kind: "textarea", value: '[{"op": "test", "path": "/length", "value": 6}]' }, |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 75 | accept: { label: "Accept", header: "Accept", kind: "text" }, |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 76 | range: { label: "Range", header: "Range", kind: "text", placeholder: "inches=0-2" }, |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 77 | ifMatch: { label: "If-Match", header: "If-Match", kind: "text" }, |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 78 | ifNoneMatch: { label: "If-None-Match", header: "If-None-Match", kind: "text" }, |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 79 | ifModifiedSince: { label: "If-Modified-Since", header: "If-Modified-Since", kind: "text", placeholder: "an HTTP-date" }, |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 80 | proxy: { label: "Proxy-Authorization", header: "Proxy-Authorization", kind: "text", placeholder: "Ruler 5.4" }, |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 81 | upgrade: { label: "Upgrade", header: "Upgrade", kind: "select", options: ["", "underhand", "overhand"] }, |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 82 | authorization: { label: "Authorization", header: "Authorization", kind: "text", placeholder: 'Excuse "homework"' }, |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 83 | extra: { label: "other headers, one per line", kind: "textarea", placeholder: "Expect: gains" }, |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 84 | }; |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 85 | const BY_TARGET = { |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 86 | "runs POST": ["seed"], |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 87 | "run JELQ": ["technique", "also", "intensity", "lube"], |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 88 | "run PATCH": ["patch"], |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 89 | "length GET": ["range"], |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 90 | "length HEAD": ["range"], |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 91 | "foreskin DELETE": ["ifMatch"], |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 92 | "elder GET": ["proxy", "ifModifiedSince"], |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 93 | "grip GET": ["upgrade"], |
4b690ff501b8 | atagen | 2026-10-10 13:27 UTC | 94 | "diagnosis GET": ["authorization", "ifNoneMatch"], |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 95 | }; |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 96 | const GLOBALS = [ |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 97 | { key: "runs", name: "start a new run", path: "/runs", methods: ["POST"] }, |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 98 | { key: "global", name: "leaderboard", path: "/leaderboard", methods: ["GET", "HEAD", "OPTIONS"] }, |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 99 | { key: "global", name: "graveyard", path: "/graveyard", methods: ["GET", "HEAD", "OPTIONS"] }, |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 100 | { key: "global", name: "the 2009 forum thread", path: "/forum/threads/2009", methods: ["GET", "HEAD", "OPTIONS"] }, |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 101 | ]; |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 102 | |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 103 | let run = null; |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 104 | let linked = []; |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 105 | let offered = []; |
4b690ff501b8 | atagen | 2026-10-10 13:27 UTC | 106 | let challenged = false; |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 107 | let target = "/runs"; |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 108 | let method = "POST"; |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 109 | const values = {}; |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 110 | |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 111 | const $ = id => document.getElementById(id); |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 112 | const fieldValue = name => values[name] ?? FIELDS[name].value ?? (FIELDS[name].options ? FIELDS[name].options[0] : ""); |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 113 | |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 114 | function short(path) { |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 115 | return path.replace(/[0-9a-f]{32}/, id => id.slice(0, 6) + "…"); |
99524cf9f17c | atagen | 2026-10-10 10:53 UTC | 116 | } |
99524cf9f17c | atagen | 2026-10-10 10:53 UTC | 117 | |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 118 | function el(tag, props, ...children) { |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 119 | const node = Object.assign(document.createElement(tag), props || {}); |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 120 | for (const child of children) node.append(child); |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 121 | return node; |
99524cf9f17c | atagen | 2026-10-10 10:53 UTC | 122 | } |
99524cf9f17c | atagen | 2026-10-10 10:53 UTC | 123 | |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 124 | function targets() { |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 125 | return (run ? linked : []).concat(offered, GLOBALS); |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 126 | } |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 127 | |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 128 | function current() { |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 129 | return targets().find(t => t.path === target) || GLOBALS[0]; |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 130 | } |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 131 | |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 132 | function chooseTarget(t) { |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 133 | target = t.path; |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 134 | method = t.methods.includes("JELQ") ? "JELQ" : t.methods.find(m => m !== "HEAD" && m !== "OPTIONS") || t.methods[0]; |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 135 | render(); |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 136 | } |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 137 | |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 138 | function renderStats(headers) { |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 139 | const table = $("stats"); |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 140 | table.replaceChildren(); |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 141 | for (let i = 0; i < STATS.length; i += 2) { |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 142 | const row = el("tr"); |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 143 | for (const [name, label] of STATS.slice(i, i + 2)) { |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 144 | const value = headers ? headers[name] : undefined; |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 145 | row.append(el("th", { align: "left", textContent: label }), el("td", { textContent: value === undefined ? "—" : value })); |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 146 | } |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 147 | table.append(row); |
99524cf9f17c | atagen | 2026-10-10 10:53 UTC | 148 | } |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 149 | } |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 150 | |
ef7d6dee5976 | atagen | 2026-10-10 13:23 UTC | 151 | function titled(text) { |
ef7d6dee5976 | atagen | 2026-10-10 13:23 UTC | 152 | return text.charAt(0).toUpperCase() + text.slice(1); |
ef7d6dee5976 | atagen | 2026-10-10 13:23 UTC | 153 | } |
ef7d6dee5976 | atagen | 2026-10-10 13:23 UTC | 154 | |
431c1bc8ded1 | atagen | 2026-10-10 13:20 UTC | 155 | function renderAlerts(list) { |
431c1bc8ded1 | atagen | 2026-10-10 13:20 UTC | 156 | const box = $("alerts"); |
431c1bc8ded1 | atagen | 2026-10-10 13:20 UTC | 157 | box.replaceChildren(); |
431c1bc8ded1 | atagen | 2026-10-10 13:20 UTC | 158 | const alerts = []; |
431c1bc8ded1 | atagen | 2026-10-10 13:20 UTC | 159 | for (const [name, value] of list || []) { |
ef7d6dee5976 | atagen | 2026-10-10 13:23 UTC | 160 | if (name === "via") alerts.push(titled(value.split(" ").pop()) + " is at the door."); |
ef7d6dee5976 | atagen | 2026-10-10 13:23 UTC | 161 | if (name === "x-observed-by") alerts.push((value === "cat" ? "The cat" : titled(value)) + " is watching."); |
431c1bc8ded1 | atagen | 2026-10-10 13:20 UTC | 162 | if (name === "warning") { |
431c1bc8ded1 | atagen | 2026-10-10 13:20 UTC | 163 | const text = (value.match(/"([^"]*)"/) || [, value])[1]; |
ef7d6dee5976 | atagen | 2026-10-10 13:23 UTC | 164 | alerts.push(titled(text) + "."); |
431c1bc8ded1 | atagen | 2026-10-10 13:20 UTC | 165 | } |
431c1bc8ded1 | atagen | 2026-10-10 13:20 UTC | 166 | } |
431c1bc8ded1 | atagen | 2026-10-10 13:20 UTC | 167 | for (const alert of alerts) box.append(el("h2", { textContent: alert })); |
431c1bc8ded1 | atagen | 2026-10-10 13:20 UTC | 168 | } |
431c1bc8ded1 | atagen | 2026-10-10 13:20 UTC | 169 | |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 170 | function renderTargets() { |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 171 | const box = $("targets"); |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 172 | box.replaceChildren(); |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 173 | for (const t of targets()) { |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 174 | const radio = el("input", { type: "radio", name: "target", checked: t.path === target, onchange: () => chooseTarget(t) }); |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 175 | box.append(el("label", {}, radio, " " + t.name + " ", el("small", { textContent: short(t.path) })), el("br")); |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 176 | } |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 177 | } |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 178 | |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 179 | function renderMethods() { |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 180 | const box = $("methods"); |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 181 | box.replaceChildren(); |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 182 | const allowed = current().methods; |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 183 | for (const m of METHODS) { |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 184 | const radio = el("input", { type: "radio", name: "method", disabled: !allowed.includes(m), checked: m === method, onchange: () => { method = m; render(); } }); |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 185 | const label = el("label", {}, radio, " "); |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 186 | label.append(m === "JELQ" ? el("big", {}, el("b", { textContent: "JELQ" })) : m); |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 187 | box.append(label, " "); |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 188 | } |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 189 | } |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 190 | |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 191 | function fieldNames() { |
4b690ff501b8 | atagen | 2026-10-10 13:27 UTC | 192 | const t = current(); |
4b690ff501b8 | atagen | 2026-10-10 13:27 UTC | 193 | const names = BY_TARGET[t.key + " " + method] || []; |
4b690ff501b8 | atagen | 2026-10-10 13:27 UTC | 194 | const scoped = run && !["runs", "global"].includes(t.key); |
4b690ff501b8 | atagen | 2026-10-10 13:27 UTC | 195 | const asked = challenged && scoped && !names.includes("authorization"); |
4b690ff501b8 | atagen | 2026-10-10 13:27 UTC | 196 | return (asked ? ["authorization"] : []).concat(names); |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 197 | } |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 198 | |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 199 | function renderFields() { |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 200 | const table = $("fields"); |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 201 | table.replaceChildren(); |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 202 | for (const name of fieldNames()) { |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 203 | const f = FIELDS[name]; |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 204 | const value = fieldValue(name); |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 205 | let input; |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 206 | if (f.kind === "select") { |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 207 | input = el("select", {}, ...f.options.map(o => el("option", { value: o, textContent: o || "(none)", selected: o === value }))); |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 208 | } else if (f.kind === "textarea") { |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 209 | input = el("textarea", { rows: 3, cols: 40, value, placeholder: f.placeholder || "" }); |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 210 | } else { |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 211 | input = el("input", { type: f.kind, value, placeholder: f.placeholder || "", size: 30 }); |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 212 | } |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 213 | input.oninput = input.onchange = () => { values[name] = input.value; }; |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 214 | table.append(el("tr", {}, el("td", { align: "right", valign: "top", textContent: f.label }), el("td", {}, input))); |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 215 | } |
4b690ff501b8 | atagen | 2026-10-10 13:27 UTC | 216 | const extra = el("textarea", { rows: 3, cols: 40, value: fieldValue("extra"), placeholder: FIELDS.extra.placeholder }); |
4b690ff501b8 | atagen | 2026-10-10 13:27 UTC | 217 | extra.oninput = () => { values.extra = extra.value; }; |
4b690ff501b8 | atagen | 2026-10-10 13:27 UTC | 218 | const more = el("details", { open: Boolean(values.extra) }, el("summary", { textContent: "more headers" }), extra); |
4b690ff501b8 | atagen | 2026-10-10 13:27 UTC | 219 | table.append(el("tr", {}, el("td"), el("td", {}, more))); |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 220 | $("send").value = method + " " + short(current().path); |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 221 | } |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 222 | |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 223 | function render() { |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 224 | if (!current().methods.includes(method)) return chooseTarget(current()); |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 225 | renderTargets(); |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 226 | renderMethods(); |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 227 | renderFields(); |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 228 | } |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 229 | |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 230 | function parseLinks(header) { |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 231 | const found = []; |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 232 | for (const match of header.matchAll(/<([^>]*)>((?:\s*;\s*[a-z-]+="[^"]*")*)/g)) { |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 233 | const params = Object.fromEntries([...match[2].matchAll(/([a-z-]+)="([^"]*)"/g)].map(p => [p[1], p[2]])); |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 234 | const name = (params.rel || "").replace(REL, ""); |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 235 | const methods = (params.allow || "GET").split(",").map(s => s.trim()); |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 236 | found.push({ key: name, name: name === "run" ? "the run" : name, path: match[1], methods }); |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 237 | } |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 238 | return found; |
99524cf9f17c | atagen | 2026-10-10 10:53 UTC | 239 | } |
99524cf9f17c | atagen | 2026-10-10 10:53 UTC | 240 | |
99524cf9f17c | atagen | 2026-10-10 10:53 UTC | 241 | function hrefs(value, found) { |
99524cf9f17c | atagen | 2026-10-10 10:53 UTC | 242 | if (value && typeof value === "object") { |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 243 | if (typeof value.href === "string") { |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 244 | const name = value.title || value.item || value.name || value.href.split("/").pop(); |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 245 | found.push({ key: "offered", name, path: value.href, methods: [value.method || "GET"] }); |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 246 | } |
99524cf9f17c | atagen | 2026-10-10 10:53 UTC | 247 | for (const key in value) hrefs(value[key], found); |
99524cf9f17c | atagen | 2026-10-10 10:53 UTC | 248 | } |
99524cf9f17c | atagen | 2026-10-10 10:53 UTC | 249 | return found; |
99524cf9f17c | atagen | 2026-10-10 10:53 UTC | 250 | } |
99524cf9f17c | atagen | 2026-10-10 10:53 UTC | 251 | |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 252 | function log(text) { |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 253 | $("log").append(text + "\n"); |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 254 | $("frame").scrollTop = $("frame").scrollHeight; |
99524cf9f17c | atagen | 2026-10-10 10:53 UTC | 255 | } |
99524cf9f17c | atagen | 2026-10-10 10:53 UTC | 256 | |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 257 | function describe(r) { |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 258 | const lines = ["< " + r.status + " " + r.reason]; |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 259 | for (const [name, value] of r.headers) { |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 260 | if (!QUIET.has(name)) lines.push("< " + name + ": " + short(value)); |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 261 | } |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 262 | let body = null; |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 263 | try { body = JSON.parse(r.body); } catch (e) {} |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 264 | if (body && typeof body === "object") { |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 265 | const rest = Object.assign({}, body); |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 266 | if (rest.detail) lines.push(" " + rest.detail); |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 267 | for (const key of ["type", "title", "status", "detail"]) delete rest[key]; |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 268 | if (Object.keys(rest).length) lines.push(short(JSON.stringify(rest, null, 2)).replace(/^/gm, " ")); |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 269 | } else if (r.body) { |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 270 | lines.push(" " + r.body); |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 271 | } |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 272 | return lines.join("\n"); |
99524cf9f17c | atagen | 2026-10-10 10:53 UTC | 273 | } |
99524cf9f17c | atagen | 2026-10-10 10:53 UTC | 274 | |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 275 | function absorb(r, sentMethod, sentPath) { |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 276 | const headers = Object.fromEntries(r.headers.map(([n, v]) => [n.toLowerCase(), v])); |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 277 | let body = null; |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 278 | try { body = JSON.parse(r.body); } catch (e) {} |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 279 | const problem = body && typeof body.type === "string" ? body.type.split("/").pop() : null; |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 280 | |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 281 | if (sentPath.startsWith("/runs?") || sentPath === "/runs") { |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 282 | if (r.status === 201) { |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 283 | run = headers.location; |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 284 | log("--- a new run has started at " + short(run) + " ---"); |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 285 | } |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 286 | } |
431c1bc8ded1 | atagen | 2026-10-10 13:20 UTC | 287 | if ("x-eq" in headers) { |
431c1bc8ded1 | atagen | 2026-10-10 13:20 UTC | 288 | renderStats(headers); |
431c1bc8ded1 | atagen | 2026-10-10 13:20 UTC | 289 | renderAlerts(r.headers); |
4b690ff501b8 | atagen | 2026-10-10 13:27 UTC | 290 | challenged = r.status === 401 || "via" in headers; |
431c1bc8ded1 | atagen | 2026-10-10 13:20 UTC | 291 | } |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 292 | if (headers.link) linked = parseLinks(headers.link); |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 293 | offered = body ? hrefs(body, []) : []; |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 294 | if (headers.location && !(sentPath === "/runs" || sentPath.startsWith("/runs?"))) { |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 295 | offered.unshift({ key: "offered", name: "Location", path: headers.location, methods: ["GET"] }); |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 296 | } |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 297 | const abandoned = sentMethod === "DELETE" && sentPath === run && r.status === 204; |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 298 | if (run && (abandoned || DEATHS.includes(problem))) { |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 299 | log("--- the run has ended ---"); |
431c1bc8ded1 | atagen | 2026-10-10 13:20 UTC | 300 | renderAlerts(null); |
4b690ff501b8 | atagen | 2026-10-10 13:27 UTC | 301 | challenged = false; |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 302 | run = null; |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 303 | linked = []; |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 304 | } |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 305 | const started = r.status === 201 && (sentPath === "/runs" || sentPath.startsWith("/runs?")); |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 306 | if (started || !targets().some(t => t.path === target)) { |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 307 | const home = linked.find(t => t.key === "run"); |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 308 | if (home) chooseTarget(home); else chooseTarget(GLOBALS[0]); |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 309 | } else { |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 310 | render(); |
99524cf9f17c | atagen | 2026-10-10 10:53 UTC | 311 | } |
99524cf9f17c | atagen | 2026-10-10 10:53 UTC | 312 | } |
99524cf9f17c | atagen | 2026-10-10 10:53 UTC | 313 | |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 314 | async function go(event) { |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 315 | event.preventDefault(); |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 316 | const t = current(); |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 317 | const key = t.key + " " + method; |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 318 | const value = name => fieldValue(name).trim(); |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 319 | const headers = []; |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 320 | let path = t.path; |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 321 | let body = ""; |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 322 | for (const name of fieldNames()) { |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 323 | const f = FIELDS[name]; |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 324 | if (f.header && value(name)) headers.push([f.header, value(name)]); |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 325 | } |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 326 | if (fieldNames().includes("upgrade") && value("upgrade")) headers.push(["Connection", "upgrade"]); |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 327 | for (const line of value("extra").split("\n")) { |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 328 | const at = line.indexOf(":"); |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 329 | if (at > 0) headers.push([line.slice(0, at).trim(), line.slice(at + 1).trim()]); |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 330 | } |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 331 | if (key === "run JELQ") { |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 332 | const techniques = value("also") ? value("technique") + "," + value("also") : value("technique"); |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 333 | path += "?technique=" + encodeURIComponent(techniques) + "&intensity=" + encodeURIComponent(value("intensity")); |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 334 | } |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 335 | if (key === "runs POST" && value("seed")) path += "?seed=" + encodeURIComponent(value("seed")); |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 336 | if (method === "PATCH") { |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 337 | headers.push(["Content-Type", "application/json-patch+json"]); |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 338 | body = value("patch"); |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 339 | } |
99524cf9f17c | atagen | 2026-10-10 10:53 UTC | 340 | |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 341 | log("> " + method + " " + short(path)); |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 342 | for (const [name, v] of headers) log("> " + name + ": " + v); |
ef7d6dee5976 | atagen | 2026-10-10 13:23 UTC | 343 | headers.push(["Accept-Language", $("locale").value]); |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 344 | const response = await fetch("/ui/send", { |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 345 | method: "POST", |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 346 | headers: { "Content-Type": "application/json" }, |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 347 | body: JSON.stringify({ method, path, headers, body }), |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 348 | }); |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 349 | const r = await response.json(); |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 350 | log(describe(r) + "\n"); |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 351 | absorb(r, method, path); |
99524cf9f17c | atagen | 2026-10-10 10:53 UTC | 352 | } |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 353 | |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 354 | $("form").onsubmit = go; |
ef7d6dee5976 | atagen | 2026-10-10 13:23 UTC | 355 | $("locale").value = localStorage.getItem("locale") || "en-GB"; |
ef7d6dee5976 | atagen | 2026-10-10 13:23 UTC | 356 | $("locale").onchange = () => localStorage.setItem("locale", $("locale").value); |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 357 | renderStats(null); |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 358 | render(); |
185851447ceb | atagen | 2026-10-10 12:58 UTC | 359 | log("Welcome. Choose \"start a new run\" and send POST to begin.\n"); |
99524cf9f17c | atagen | 2026-10-10 10:53 UTC | 360 | </script> |
99524cf9f17c | atagen | 2026-10-10 10:53 UTC | 361 | </body> |
99524cf9f17c | atagen | 2026-10-10 10:53 UTC | 362 | </html> |