jelq

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>jelqd</title>

<style>

.frame { border: 2px inset; background: #fff; height: 85vh; overflow: scroll; padding: 4px; }

#log { white-space: pre-wrap; margin: 0; }

pre, li, p, td, label { overflow-wrap: anywhere; }

</style>

</head>

<body>

<h1>jelqd</h1>

<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.

Language <select id="locale"><option>en-GB</option><option>en-US</option><option>en-AU</option></select></p>

<table width="100%" cellspacing="6">

<tr>

<td width="45%" valign="top">

<div class="frame">

<div id="alerts"></div>

<form id="form">

<h3>Method</h3>

<div id="methods"></div>

<h3>Request</h3>

<table id="fields" cellpadding="2"></table>

<p><input type="submit" id="send" value="Send" style="font-size: 1.3em"></p>

<h3>Stats</h3>

<table id="stats" border="1" cellspacing="0" cellpadding="3"></table>

<h3>Resource</h3>

<div id="targets"></div>

</form>

<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>

</div>

</td>

<td valign="top">

<div class="frame" id="frame"><pre id="log"></pre></div>

</td>

</tr>

</table>

<script>

const REL = "https://jelq.dev/rels/";

const METHODS = ["JELQ", "GET", "HEAD", "POST", "PUT", "PATCH", "DELETE", "OPTIONS", "TRACE"];

const TECHNIQUES = ["warmup", "wet", "dry", "stretch", "uli", "edge", "pump", "ice", "supplement"];

const DEATHS = ["vascular-event", "caught", "banned", "degloved", "zip", "run-ended"];

const STATS = [

  ["x-floor", "Floor"],

  ["x-self-reported-length", "Self-reported length"],

  ["x-girth", "Girth"],

  ["x-foreskin", "Foreskin"],

  ["x-eq", "EQ (aim for 50 to 70)"],

  ["x-stamina", "Stamina"],

  ["x-suspicion", "Suspicion"],

  ["x-shame", "Shame"],

  ["x-cash", "Cash"],

];

const QUIET = new Set(["link", "set-cookie", "server", "x-powered-by", "cache-control", "content-length", "content-type", "date"].concat(STATS.map(s => s[0])));

const FIELDS = {

  seed: { label: "seed (unranked)", kind: "text" },

  technique: { label: "technique", kind: "select", options: TECHNIQUES },

  also: { label: "combo with", kind: "select", options: ["", "wet", "dry", "stretch", "uli"] },

  intensity: { label: "intensity, 1 to 10", kind: "number", value: "5" },

  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"] },

  patch: { label: "body", kind: "textarea", value: '[{"op": "test", "path": "/length", "value": 6}]' },

  accept: { label: "Accept", header: "Accept", kind: "text" },

  range: { label: "Range", header: "Range", kind: "text", placeholder: "inches=0-2" },

  ifMatch: { label: "If-Match", header: "If-Match", kind: "text" },

  ifNoneMatch: { label: "If-None-Match", header: "If-None-Match", kind: "text" },

  ifModifiedSince: { label: "If-Modified-Since", header: "If-Modified-Since", kind: "text", placeholder: "an HTTP-date" },

  proxy: { label: "Proxy-Authorization", header: "Proxy-Authorization", kind: "text", placeholder: "Ruler 5.4" },

  upgrade: { label: "Upgrade", header: "Upgrade", kind: "select", options: ["", "underhand", "overhand"] },

  authorization: { label: "Authorization", header: "Authorization", kind: "text", placeholder: 'Excuse "homework"' },

  extra: { label: "other headers, one per line", kind: "textarea", placeholder: "Expect: gains" },

};

const BY_TARGET = {

  "runs POST": ["seed"],

  "run JELQ": ["technique", "also", "intensity", "lube"],

  "run GET": ["accept"],

  "run PATCH": ["patch"],

  "length GET": ["range"],

  "length HEAD": ["range"],

  "foreskin DELETE": ["ifMatch"],

  "elder GET": ["proxy", "ifModifiedSince"],

  "grip GET": ["upgrade"],

  "diagnosis GET": ["ifNoneMatch"],

};

const ALWAYS = ["authorization", "extra"];

const GLOBALS = [

  { key: "runs", name: "start a new run", path: "/runs", methods: ["POST"] },

  { key: "global", name: "leaderboard", path: "/leaderboard", methods: ["GET", "HEAD", "OPTIONS"] },

  { key: "global", name: "graveyard", path: "/graveyard", methods: ["GET", "HEAD", "OPTIONS"] },

  { key: "global", name: "the 2009 forum thread", path: "/forum/threads/2009", methods: ["GET", "HEAD", "OPTIONS"] },

];

let run = null;

let linked = [];

let offered = [];

let target = "/runs";

let method = "POST";

const values = {};

const $ = id => document.getElementById(id);

const fieldValue = name => values[name] ?? FIELDS[name].value ?? (FIELDS[name].options ? FIELDS[name].options[0] : "");

function short(path) {

  return path.replace(/[0-9a-f]{32}/, id => id.slice(0, 6) + "…");

}

function el(tag, props, ...children) {

  const node = Object.assign(document.createElement(tag), props || {});

  for (const child of children) node.append(child);

  return node;

}

function targets() {

  return (run ? linked : []).concat(offered, GLOBALS);

}

function current() {

  return targets().find(t => t.path === target) || GLOBALS[0];

}

function chooseTarget(t) {

  target = t.path;

  method = t.methods.includes("JELQ") ? "JELQ" : t.methods.find(m => m !== "HEAD" && m !== "OPTIONS") || t.methods[0];

  render();

}

function renderStats(headers) {

  const table = $("stats");

  table.replaceChildren();

  for (let i = 0; i < STATS.length; i += 2) {

    const row = el("tr");

    for (const [name, label] of STATS.slice(i, i + 2)) {

      const value = headers ? headers[name] : undefined;

      row.append(el("th", { align: "left", textContent: label }), el("td", { textContent: value === undefined ? "—" : value }));

    }

    table.append(row);

  }

}

function titled(text) {

  return text.charAt(0).toUpperCase() + text.slice(1);

}

function renderAlerts(list) {

  const box = $("alerts");

  box.replaceChildren();

  const alerts = [];

  for (const [name, value] of list || []) {

    if (name === "via") alerts.push(titled(value.split(" ").pop()) + " is at the door.");

    if (name === "x-observed-by") alerts.push((value === "cat" ? "The cat" : titled(value)) + " is watching.");

    if (name === "warning") {

      const text = (value.match(/"([^"]*)"/) || [, value])[1];

      alerts.push(titled(text) + ".");

    }

  }

  for (const alert of alerts) box.append(el("h2", { textContent: alert }));

}

function renderTargets() {

  const box = $("targets");

  box.replaceChildren();

  for (const t of targets()) {

    const radio = el("input", { type: "radio", name: "target", checked: t.path === target, onchange: () => chooseTarget(t) });

    box.append(el("label", {}, radio, " " + t.name + " ", el("small", { textContent: short(t.path) })), el("br"));

  }

}

function renderMethods() {

  const box = $("methods");

  box.replaceChildren();

  const allowed = current().methods;

  for (const m of METHODS) {

    const radio = el("input", { type: "radio", name: "method", disabled: !allowed.includes(m), checked: m === method, onchange: () => { method = m; render(); } });

    const label = el("label", {}, radio, " ");

    label.append(m === "JELQ" ? el("big", {}, el("b", { textContent: "JELQ" })) : m);

    box.append(label, " ");

  }

}

function fieldNames() {

  const key = current().key + " " + method;

  return (BY_TARGET[key] || []).concat(ALWAYS);

}

function renderFields() {

  const table = $("fields");

  table.replaceChildren();

  for (const name of fieldNames()) {

    const f = FIELDS[name];

    const value = fieldValue(name);

    let input;

    if (f.kind === "select") {

      input = el("select", {}, ...f.options.map(o => el("option", { value: o, textContent: o || "(none)", selected: o === value })));

    } else if (f.kind === "textarea") {

      input = el("textarea", { rows: 3, cols: 40, value, placeholder: f.placeholder || "" });

    } else {

      input = el("input", { type: f.kind, value, placeholder: f.placeholder || "", size: 30 });

    }

    input.oninput = input.onchange = () => { values[name] = input.value; };

    table.append(el("tr", {}, el("td", { align: "right", valign: "top", textContent: f.label }), el("td", {}, input)));

  }

  $("send").value = method + " " + short(current().path);

}

function render() {

  if (!current().methods.includes(method)) return chooseTarget(current());

  renderTargets();

  renderMethods();

  renderFields();

}

function parseLinks(header) {

  const found = [];

  for (const match of header.matchAll(/<([^>]*)>((?:\s*;\s*[a-z-]+="[^"]*")*)/g)) {

    const params = Object.fromEntries([...match[2].matchAll(/([a-z-]+)="([^"]*)"/g)].map(p => [p[1], p[2]]));

    const name = (params.rel || "").replace(REL, "");

    const methods = (params.allow || "GET").split(",").map(s => s.trim());

    found.push({ key: name, name: name === "run" ? "the run" : name, path: match[1], methods });

  }

  return found;

}

function hrefs(value, found) {

  if (value && typeof value === "object") {

    if (typeof value.href === "string") {

      const name = value.title || value.item || value.name || value.href.split("/").pop();

      found.push({ key: "offered", name, path: value.href, methods: [value.method || "GET"] });

    }

    for (const key in value) hrefs(value[key], found);

  }

  return found;

}

function log(text) {

  $("log").append(text + "\n");

  $("frame").scrollTop = $("frame").scrollHeight;

}

function describe(r) {

  const lines = ["< " + r.status + " " + r.reason];

  for (const [name, value] of r.headers) {

    if (!QUIET.has(name)) lines.push("< " + name + ": " + short(value));

  }

  let body = null;

  try { body = JSON.parse(r.body); } catch (e) {}

  if (body && typeof body === "object") {

    const rest = Object.assign({}, body);

    if (rest.detail) lines.push("  " + rest.detail);

    for (const key of ["type", "title", "status", "detail"]) delete rest[key];

    if (Object.keys(rest).length) lines.push(short(JSON.stringify(rest, null, 2)).replace(/^/gm, "  "));

  } else if (r.body) {

    lines.push("  " + r.body);

  }

  return lines.join("\n");

}

function absorb(r, sentMethod, sentPath) {

  const headers = Object.fromEntries(r.headers.map(([n, v]) => [n.toLowerCase(), v]));

  let body = null;

  try { body = JSON.parse(r.body); } catch (e) {}

  const problem = body && typeof body.type === "string" ? body.type.split("/").pop() : null;

  if (sentPath.startsWith("/runs?") || sentPath === "/runs") {

    if (r.status === 201) {

      run = headers.location;

      log("--- a new run has started at " + short(run) + " ---");

    }

  }

  if ("x-eq" in headers) {

    renderStats(headers);

    renderAlerts(r.headers);

  }

  if (headers.link) linked = parseLinks(headers.link);

  offered = body ? hrefs(body, []) : [];

  if (headers.location && !(sentPath === "/runs" || sentPath.startsWith("/runs?"))) {

    offered.unshift({ key: "offered", name: "Location", path: headers.location, methods: ["GET"] });

  }

  const abandoned = sentMethod === "DELETE" && sentPath === run && r.status === 204;

  if (run && (abandoned || DEATHS.includes(problem))) {

    log("--- the run has ended ---");

    renderAlerts(null);

    run = null;

    linked = [];

  }

  const started = r.status === 201 && (sentPath === "/runs" || sentPath.startsWith("/runs?"));

  if (started || !targets().some(t => t.path === target)) {

    const home = linked.find(t => t.key === "run");

    if (home) chooseTarget(home); else chooseTarget(GLOBALS[0]);

  } else {

    render();

  }

}

async function go(event) {

  event.preventDefault();

  const t = current();

  const key = t.key + " " + method;

  const value = name => fieldValue(name).trim();

  const headers = [];

  let path = t.path;

  let body = "";

  for (const name of fieldNames()) {

    const f = FIELDS[name];

    if (f.header && value(name)) headers.push([f.header, value(name)]);

  }

  if (fieldNames().includes("upgrade") && value("upgrade")) headers.push(["Connection", "upgrade"]);

  for (const line of value("extra").split("\n")) {

    const at = line.indexOf(":");

    if (at > 0) headers.push([line.slice(0, at).trim(), line.slice(at + 1).trim()]);

  }

  if (key === "run JELQ") {

    const techniques = value("also") ? value("technique") + "," + value("also") : value("technique");

    path += "?technique=" + encodeURIComponent(techniques) + "&intensity=" + encodeURIComponent(value("intensity"));

  }

  if (key === "runs POST" && value("seed")) path += "?seed=" + encodeURIComponent(value("seed"));

  if (method === "PATCH") {

    headers.push(["Content-Type", "application/json-patch+json"]);

    body = value("patch");

  }

  log("> " + method + " " + short(path));

  for (const [name, v] of headers) log("> " + name + ": " + v);

  headers.push(["Accept-Language", $("locale").value]);

  const response = await fetch("/ui/send", {

    method: "POST",

    headers: { "Content-Type": "application/json" },

    body: JSON.stringify({ method, path, headers, body }),

  });

  const r = await response.json();

  log(describe(r) + "\n");

  absorb(r, method, path);

}

$("form").onsubmit = go;

$("locale").value = localStorage.getItem("locale") || "en-GB";

$("locale").onchange = () => localStorage.setItem("locale", $("locale").value);

renderStats(null);

render();

log("Welcome. Choose \"start a new run\" and send POST to begin.\n");

</script>

</body>

</html>