atagen

jelq

public

an http based roguelike rpg about jelqing

Star0
Watch0
139164489032852fc1d60b88c7c430c9939858f7
1
ssh://brewery@pls.lobotomise.me:33/atagen/jelq.git
src/ui.htmlHtml486 lines18.7 KB
1
<!DOCTYPE html>
2
<html>
3
<head>
4
<meta charset="utf-8">
5
<title>jelqd</title>
6
<style>
7
.frame { border: 2px inset; background: #fff; height: 85vh; overflow: scroll; padding: 4px; }
8
#log { white-space: pre-wrap; margin: 0; }
9
pre, li, p, td, label { overflow-wrap: anywhere; }
10
</style>
11
</head>
12
<body>
13
14
<h1>jelqd</h1>
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.
16
Language <select id="locale"><option>en-GB</option><option>en-US</option><option>en-AU</option></select></p>
17
18
<table width="100%" cellspacing="6">
19
<tr>
20
<td width="45%" valign="top">
21
<div class="frame">
22
23
<div id="alerts"></div>
24
25
<form id="form">
26
<h3>Method</h3>
27
<div id="methods"></div>
28
<datalist id="excuses">
29
<option value="changing"><option value="homework"><option value="pulled a muscle">
30
<option value="tidying"><option value="the washing up"><option value="fed the cat">
31
<option value="revising"><option value="on a call"><option value="wrapping presents">
32
<option value="folding the washing"><option value="hanging the lights">
33
<option value="helping Nan"><option value="peeling sprouts"><option value="the truth">
34
</datalist>
35
36
<h3>Request</h3>
37
<table id="fields" cellpadding="2"></table>
38
39
<p><input type="submit" id="send" value="Send" style="font-size: 1.3em"></p>
40
41
<h3>Stats</h3>
42
<table id="stats" border="1" cellspacing="0" cellpadding="3"></table>
43
44
<h3>Resource</h3>
45
<div id="targets"></div>
46
</form>
47
48
<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>
49
</div>
50
</td>
51
<td valign="top">
52
<div class="frame" id="frame"><pre id="log"></pre></div>
53
</td>
54
</tr>
55
</table>
56
57
<script>
58
const REL = "https://jelq.dev/rels/";
59
const METHODS = ["JELQ", "HOLD", "GET", "HEAD", "POST", "PUT", "PATCH", "DELETE", "OPTIONS", "TRACE"];
60
const ALL_LUBES = ["", "application/baby-oil", "application/coconut-oil", "application/lotion", "application/vaseline", "text/plain; charset=spit", "image/jpeg"];
61
const DEATHS = ["vascular-event", "caught", "opened", "banned", "degloved", "zip", "watermelon", "run-ended"];
62
let stocked = null;
63
const STATS = [
64
  ["x-floor", "Floor"],
65
  ["x-self-reported-length", "Self-reported length"],
66
  ["x-girth", "Girth"],
67
  ["x-foreskin", "Foreskin"],
68
  ["x-friction", "Friction"],
69
  ["x-eq", "EQ (aim for 50 to 70)"],
70
  ["x-stamina", "Stamina"],
71
  ["x-suspicion", "Suspicion"],
72
  ["x-shame", "Shame"],
73
  ["x-cash", "Cash"],
74
];
75
const MEASURED = ["x-length", "Length"];
76
const QUIET = new Set(["link", "set-cookie", "server", "x-powered-by", "cache-control", "content-length", "content-type", "date"].concat(STATS.map(s => s[0]), MEASURED[0]));
77
78
const FIELDS = {
79
  seed: { label: "seed (unranked)", kind: "text" },
80
  technique: { label: "technique", kind: "select" },
81
  also: { label: "combo with", kind: "select" },
82
  intensity: { label: "intensity, 1 to 10", kind: "number", value: "5" },
83
  lube: { label: "Content-Type", header: "Content-Type", kind: "select" },
84
  patch: { label: "body", kind: "textarea", value: '[{"op": "test", "path": "/length", "value": 6}]' },
85
  range: { label: "Range", header: "Range", kind: "text", placeholder: "inches=0-2" },
86
  ifMatch: { label: "If-Match", header: "If-Match", kind: "text" },
87
  ifNoneMatch: { label: "If-None-Match", header: "If-None-Match", kind: "text" },
88
  ifModifiedSince: { label: "If-Modified-Since", header: "If-Modified-Since", kind: "text", placeholder: "an HTTP-date" },
89
  proxy: { label: "Proxy-Authorization", header: "Proxy-Authorization", kind: "text", placeholder: "Ruler 5.4" },
90
  upgrade: { label: "Upgrade", header: "Upgrade", kind: "select", options: ["", "underhand", "overhand"] },
91
  authorization: { label: "Authorization", header: "Authorization", kind: "text", placeholder: 'Excuse "homework"' },
92
  extra: { label: "other headers, one per line", kind: "textarea", placeholder: "Expect: gains" },
93
};
94
const BY_TARGET = {
95
  "runs POST": ["seed"],
96
  "run PATCH": ["patch"],
97
  "length GET": ["range"],
98
  "length HEAD": ["range"],
99
  "foreskin DELETE": ["ifMatch"],
100
  "elder GET": ["proxy", "ifModifiedSince"],
101
  "grip GET": ["upgrade"],
102
  "diagnosis GET": ["authorization", "ifNoneMatch"],
103
};
104
const GROUPS = [
105
  ["play", "Play"],
106
  ["shop", "Shop"],
107
  ["you", "You"],
108
  ["said", "From the last response"],
109
  ["reading", "Reading"],
110
  ["meta", "Meta"],
111
];
112
const GROUP_OF = { run: "play", floor: "play", drawer: "play", shop: "play", "shop-item": "shop", kitchen: "play", portal: "play", elder: "play", diagnosis: "play", length: "you", foreskin: "you", grip: "you", inventory: "you", footage: "you", techniques: "reading", thread: "reading" };
113
const NAMES = { run: "the run", thread: "the 2009 forum thread" };
114
const GLOBALS = [
115
  { key: "runs", group: "play", name: "start a new run", path: "/runs", methods: ["POST"] },
116
  { key: "global", group: "meta", name: "leaderboard", path: "/leaderboard", methods: ["GET", "HEAD", "OPTIONS"] },
117
  { key: "global", group: "meta", name: "graveyard", path: "/graveyard", methods: ["GET", "HEAD", "OPTIONS"] },
118
];
119
120
let run = null;
121
let linked = [];
122
let techniques = [];
123
let offered = [];
124
let challenged = false;
125
const etags = {};
126
let target = "/runs";
127
let method = "POST";
128
const values = {};
129
130
const $ = id => document.getElementById(id);
131
132
function short(path) {
133
  return path.replace(/[0-9a-f]{32}/, id => id.slice(0, 6) + "…");
134
}
135
136
function el(tag, props, ...children) {
137
  const node = Object.assign(document.createElement(tag), props || {});
138
  for (const child of children) node.append(child);
139
  return node;
140
}
141
142
function titled(text) {
143
  return text.charAt(0).toUpperCase() + text.slice(1);
144
}
145
146
function technique(name) {
147
  return techniques.find(t => t.name === name);
148
}
149
150
function clashes(a, b) {
151
  const rules = [a.lubricant, b.lubricant];
152
  return rules.includes("required") && rules.includes("forbidden");
153
}
154
155
// The options a field can take right now, or null for free text.
156
function options(name) {
157
  if (name === "technique") return techniques.map(t => t.name);
158
  if (name === "also") {
159
    const first = technique(fieldValue("technique"));
160
    if (!first || !first.lubricant) return [""];
161
    const partners = techniques.filter(t => t.lubricant && t.name !== first.name && !clashes(first, t));
162
    return [""].concat(partners.map(t => t.name));
163
  }
164
  if (name === "lube") {
165
    const lubes = stocked === null ? ALL_LUBES : ALL_LUBES.filter(l => l === "" || l.includes("/") && !l.startsWith("application/") || stocked.includes(l.replace("application/", "")));
166
    return lubeRule() === "required" ? lubes.filter(Boolean) : lubes;
167
  }
168
  return FIELDS[name].options || null;
169
}
170
171
function raw(name) {
172
  return values[name] ?? FIELDS[name].value ?? "";
173
}
174
175
function fieldValue(name) {
176
  const allowed = options(name);
177
  const value = raw(name);
178
  if (allowed && !allowed.includes(value)) return allowed[0] ?? "";
179
  return value;
180
}
181
182
function lubeRule() {
183
  const picked = [technique(fieldValue("technique")), technique(fieldValue("also"))].filter(Boolean);
184
  if (!picked.some(t => t.lubricant)) return "none";
185
  for (const rule of ["forbidden", "required"]) {
186
    if (picked.some(t => t.lubricant === rule)) return rule;
187
  }
188
  return "optional";
189
}
190
191
function allowedMethods(t) {
192
  return t.key === "run" && !techniques.length ? t.methods.filter(m => m !== "JELQ") : t.methods;
193
}
194
195
function targets() {
196
  const listed = run ? linked : [];
197
  const known = new Set(listed.concat(GLOBALS).map(t => t.path));
198
  const fresh = offered.filter((t, i) => !known.has(t.path) && offered.findIndex(o => o.path === t.path) === i);
199
  return listed.concat(fresh, GLOBALS);
200
}
201
202
function current() {
203
  return targets().find(t => t.path === target) || GLOBALS[0];
204
}
205
206
function chooseTarget(t) {
207
  const allowed = allowedMethods(t);
208
  target = t.path;
209
  method = allowed.includes("JELQ") ? "JELQ" : allowed.find(m => m !== "HEAD" && m !== "OPTIONS") || allowed[0];
210
  render();
211
}
212
213
function renderStats(headers) {
214
  const table = $("stats");
215
  table.replaceChildren();
216
  const stats = STATS.map(s => s[0] === "x-self-reported-length" && headers && MEASURED[0] in headers ? MEASURED : s);
217
  for (let i = 0; i < stats.length; i += 2) {
218
    const row = el("tr");
219
    for (const [name, label] of stats.slice(i, i + 2)) {
220
      const value = headers ? headers[name] : undefined;
221
      row.append(el("th", { align: "left", textContent: label }), el("td", { textContent: value === undefined ? "—" : value }));
222
    }
223
    table.append(row);
224
  }
225
}
226
227
function renderAlerts(list) {
228
  const box = $("alerts");
229
  box.replaceChildren();
230
  const alerts = [];
231
  for (const [name, value] of list || []) {
232
    if (name === "via") alerts.push(titled(value.split(" ").pop()) + " is at the door.");
233
    if (name === "x-observed-by") alerts.push((value === "cat" ? "The cat" : titled(value)) + " is watching.");
234
    if (name === "warning") {
235
      const text = (value.match(/"([^"]*)"/) || [, value])[1];
236
      alerts.push(titled(text) + ".");
237
    }
238
  }
239
  const stamina = (list || []).find(([name]) => name === "x-stamina");
240
  if (stamina && stamina[1].startsWith("0/")) alerts.push("Exhausted. Wait out the refractory period, then GET the run.");
241
  for (const alert of alerts) box.append(el("h2", { textContent: alert }));
242
}
243
244
function renderTargets() {
245
  const box = $("targets");
246
  box.replaceChildren();
247
  const all = targets();
248
  for (const [group, title] of GROUPS) {
249
    const members = all.filter(t => t.group === group);
250
    if (!members.length) continue;
251
    box.append(el("h4", { textContent: title }));
252
    for (const t of members) {
253
      const radio = el("input", { type: "radio", name: "target", checked: t.path === target, onchange: () => chooseTarget(t) });
254
      box.append(el("label", {}, radio, " " + t.name + " ", el("small", { textContent: short(t.path) })), el("br"));
255
    }
256
  }
257
}
258
259
function renderMethods() {
260
  const box = $("methods");
261
  box.replaceChildren();
262
  const allowed = allowedMethods(current());
263
  for (const m of METHODS.filter(m => allowed.includes(m))) {
264
    const radio = el("input", { type: "radio", name: "method", checked: m === method, onchange: () => { method = m; render(); } });
265
    const label = el("label", {}, radio, " ");
266
    label.append(m === "JELQ" ? el("big", {}, el("b", { textContent: "JELQ" })) : m);
267
    box.append(label, " ");
268
  }
269
}
270
271
function fieldNames() {
272
  const t = current();
273
  const key = t.key + " " + method;
274
  let names = BY_TARGET[key] || [];
275
  if (key === "run JELQ") {
276
    const chosen = technique(fieldValue("technique"));
277
    names = ["technique"];
278
    if (options("also").length > 1) names.push("also");
279
    if (chosen && chosen.lubricant) names.push("intensity");
280
    if (["required", "optional"].includes(lubeRule())) names.push("lube");
281
  }
282
  const scoped = run && !["runs", "global"].includes(t.key);
283
  const asked = challenged && scoped && !names.includes("authorization");
284
  return (asked ? ["authorization"] : []).concat(names);
285
}
286
287
function renderFields() {
288
  const table = $("fields");
289
  table.replaceChildren();
290
  for (const name of fieldNames()) {
291
    const f = FIELDS[name];
292
    let value = fieldValue(name);
293
    if (name === "ifMatch" && !value) value = values.ifMatch = etags[current().path] || "";
294
    const choices = options(name);
295
    let input;
296
    if (choices) {
297
      input = el("select", {}, ...choices.map(o => el("option", { value: o, textContent: o || "(none)", selected: o === value })));
298
    } else if (f.kind === "textarea") {
299
      input = el("textarea", { rows: 3, cols: 40, value, placeholder: f.placeholder || "" });
300
    } else {
301
      input = el("input", { type: f.kind, value, placeholder: f.placeholder || "", size: 30 });
302
    }
303
    input.oninput = () => { values[name] = input.value; };
304
    input.onchange = () => { values[name] = input.value; if (choices) renderFields(); };
305
    if (name === "authorization") input.setAttribute("list", "excuses");
306
    table.append(el("tr", {}, el("td", { align: "right", valign: "top", textContent: f.label }), el("td", {}, input)));
307
  }
308
  const extra = el("textarea", { rows: 3, cols: 40, value: raw("extra"), placeholder: FIELDS.extra.placeholder });
309
  extra.oninput = () => { values.extra = extra.value; };
310
  const more = el("details", { open: Boolean(values.extra) }, el("summary", { textContent: "more headers" }), extra);
311
  table.append(el("tr", {}, el("td"), el("td", {}, more)));
312
  $("send").value = method + " " + short(current().path);
313
}
314
315
function render() {
316
  if (!allowedMethods(current()).includes(method)) return chooseTarget(current());
317
  renderTargets();
318
  renderMethods();
319
  renderFields();
320
}
321
322
function parseLinks(header) {
323
  const resources = [];
324
  const moves = [];
325
  for (const match of header.matchAll(/<([^>]*)>((?:\s*;\s*[a-z-]+="[^"]*")*)/g)) {
326
    const params = Object.fromEntries([...match[2].matchAll(/([a-z-]+)="([^"]*)"/g)].map(p => [p[1], p[2]]));
327
    const name = (params.rel || "").replace(REL, "");
328
    if (name === "technique") {
329
      moves.push({ name: params.title, lubricant: params.lubricant || null });
330
      continue;
331
    }
332
    const methods = (params.allow || "GET").split(",").map(s => s.trim());
333
    resources.push({ key: name, group: GROUP_OF[name] || "play", name: NAMES[name] || params.title || name, path: match[1], methods });
334
  }
335
  return [resources, moves];
336
}
337
338
function hrefs(value, found) {
339
  if (value && typeof value === "object") {
340
    if (typeof value.href === "string") {
341
      const name = value.title || value.item || value.name || value.href.split("/").pop();
342
      found.push({ key: "offered", group: "said", name, path: value.href, methods: [value.method || "GET"] });
343
    }
344
    for (const key in value) hrefs(value[key], found);
345
  }
346
  return found;
347
}
348
349
function log(text) {
350
  $("log").prepend(text + "\n\n");
351
  $("frame").scrollTop = 0;
352
}
353
354
function describe(r) {
355
  const lines = ["< " + r.status + " " + r.reason];
356
  for (const [name, value] of r.headers) {
357
    if (!QUIET.has(name)) lines.push("< " + name + ": " + short(value));
358
  }
359
  let body = null;
360
  try { body = JSON.parse(r.body); } catch (e) {}
361
  if (body && typeof body === "object") {
362
    const rest = Object.assign({}, body);
363
    if (rest.detail) lines.push("  " + rest.detail);
364
    for (const key of ["type", "title", "status", "detail"]) delete rest[key];
365
    if (Object.keys(rest).length) lines.push(short(JSON.stringify(rest, null, 2)).replace(/^/gm, "  "));
366
  } else if (r.body) {
367
    const range = (r.headers.find(h => h[0] === "content-range") || [])[1] || "";
368
    const partial = r.status === 206 && range.match(/^bytes (\d+)-(\d+)\/(\d+)$/);
369
    lines.push("  " + r.body);
370
    if (partial) lines.push("  [bytes " + partial[1] + "-" + partial[2] + " of " + partial[3] + ". Half-mast.]");
371
  }
372
  return lines.join("\n");
373
}
374
375
function absorb(r, sentMethod, sentPath) {
376
  const headers = Object.fromEntries(r.headers.map(([n, v]) => [n.toLowerCase(), v]));
377
  if (headers.etag) etags[sentPath] = headers.etag;
378
  const digest = (headers["www-authenticate"] || "").match(/nonce="([^"]*)"/);
379
  if (digest && !(values.authorization || "").includes(digest[1])) {
380
    values.authorization = 'Digest username="", nonce="' + digest[1] + '"';
381
  }
382
  let body = null;
383
  try { body = JSON.parse(r.body); } catch (e) {}
384
  const problem = body && typeof body.type === "string" ? body.type.split("/").pop() : null;
385
  const started = r.status === 201 && (sentPath === "/runs" || sentPath.startsWith("/runs?"));
386
387
  if (started) {
388
    run = headers.location;
389
    log("--- a new run has started at " + short(run) + " ---");
390
  }
391
  if ("x-eq" in headers) {
392
    renderStats(headers);
393
    renderAlerts(r.headers);
394
    challenged = r.status === 401 || "via" in headers;
395
  }
396
  if (headers.link) [linked, techniques] = parseLinks(headers.link);
397
  if (run) {
398
    const active = run;
399
    fetch("/ui/send", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ method: "GET", path: run + "/inventory", headers: [], body: "" }) })
400
      .then(r => r.json())
401
      .then(r => {
402
        if (run !== active) return;
403
        try { stocked = (JSON.parse(r.body).items || []).map(i => i.name); render(); } catch (e) {}
404
      });
405
  }
406
  offered = body ? hrefs(body, []) : [];
407
  if (headers.location && !started) {
408
    offered.unshift({ key: "offered", group: "said", name: short(headers.location).split("/").pop() + " (Location)", path: headers.location, methods: ["GET"] });
409
  }
410
  const abandoned = sentMethod === "DELETE" && sentPath === run && r.status === 204;
411
  if (run && (abandoned || DEATHS.includes(problem))) {
412
    log("--- the run has ended ---");
413
    renderAlerts(null);
414
    challenged = false;
415
    run = null;
416
    linked = [];
417
    techniques = [];
418
  }
419
  if (started || !targets().some(t => t.path === target)) {
420
    const home = linked.find(t => t.key === "run");
421
    chooseTarget(home || GLOBALS[0]);
422
  } else {
423
    render();
424
  }
425
}
426
427
async function go(event) {
428
  event.preventDefault();
429
  const t = current();
430
  const key = t.key + " " + method;
431
  const value = name => fieldValue(name).trim();
432
  const headers = [];
433
  let path = t.path;
434
  let body = "";
435
  for (const name of fieldNames()) {
436
    const f = FIELDS[name];
437
    if (f.header && value(name)) headers.push([f.header, value(name)]);
438
  }
439
  if (fieldNames().includes("upgrade") && value("upgrade")) headers.push(["Connection", "upgrade"]);
440
  for (const line of raw("extra").split("\n")) {
441
    const at = line.indexOf(":");
442
    if (at > 0) headers.push([line.slice(0, at).trim(), line.slice(at + 1).trim()]);
443
  }
444
  if (key === "run JELQ") {
445
    const names = fieldNames();
446
    const chosen = [value("technique")].concat(names.includes("also") && value("also") ? [value("also")] : []);
447
    path += "?technique=" + encodeURIComponent(chosen.join(","));
448
    if (names.includes("intensity")) path += "&intensity=" + encodeURIComponent(value("intensity"));
449
  }
450
  if (key === "runs POST" && value("seed")) path += "?seed=" + encodeURIComponent(value("seed"));
451
  if (method === "PATCH") {
452
    headers.push(["Content-Type", "application/json-patch+json"]);
453
    body = value("patch");
454
  }
455
456
  const sent = ["> " + method + " " + short(path)].concat(headers.map(([name, v]) => "> " + name + ": " + v)).join("\n");
457
  headers.push(["Accept-Language", $("locale").value]);
458
  let r;
459
  try {
460
    const response = await fetch("/ui/send", {
461
      method: "POST",
462
      headers: { "Content-Type": "application/json" },
463
      body: JSON.stringify({ method, path, headers, body }),
464
    });
465
    r = await response.json();
466
  } catch (error) {
467
    log(sent + "\n! The server did not answer. Is jelqd still running? (" + error.message + ")");
468
    return;
469
  }
470
  if (!Array.isArray(r.headers)) {
471
    log(sent + "\n! The page could not read that reply:\n  " + JSON.stringify(r));
472
    return;
473
  }
474
  log(sent + "\n" + describe(r));
475
  absorb(r, method, path);
476
}
477
478
$("form").onsubmit = go;
479
$("locale").value = localStorage.getItem("locale") || "en-GB";
480
$("locale").onchange = () => localStorage.setItem("locale", $("locale").value);
481
renderStats(null);
482
render();
483
log("Welcome. Choose \"start a new run\" and send POST to begin. The newest turn is always at the top.");
484
</script>
485
</body>
486
</html>