Add web/ — PTY+WebSocket server, xterm.js PWA client, Dockerfile, and PyInstaller notes

2026-07-07 13:21:45 +12:00
parent dee742b1e4
commit 262292228e
11 changed files with 283 additions and 0 deletions
--- a/web/static/index.html
+++ b/web/static/index.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<meta name="description" content="Kanjin — A text adventure RPG based on the D&D 5e SRD">
+<meta name="theme-color" content="#1a1a2e">
+<link rel="manifest" href="/static/manifest.json">
+<link rel="icon" href="/static/icon-192.png">
+<link rel="apple-touch-icon" href="/static/icon-192.png">
+<title>Kanjin</title>
+<link href="https://cdn.jsdelivr.net/npm/xterm@5.3.0/css/xterm.min.css" rel="stylesheet">
+<style>
+* { margin: 0; padding: 0; box-sizing: border-box; }
+html, body { width: 100%; height: 100%; background: #1a1a2e; overflow: hidden; }
+#terminal { width: 100%; height: 100%; padding: 4px; }
+</style>
+</head>
+<body>
+<div id="terminal"></div>
+<script src="https://cdn.jsdelivr.net/npm/xterm@5.3.0/lib/xterm.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/xterm-addon-fit@0.8.0/lib/xterm-addon-fit.min.js"></script>
+<script>
+(function(){
+    const term = new Terminal({
+        cursorBlink: true,
+        fontSize: 15,
+        fontFamily: 'Menlo, Monaco, "Courier New", monospace',
+        theme: { background: '#1a1a2e', foreground: '#e0e0e0', cursor: '#e0e0e0' }
+    });
+    const fit = new FitAddon.FitAddon();
+    term.loadAddon(fit);
+    term.open(document.getElementById('terminal'));
+    fit.fit();
+
+    const proto = location.protocol === 'https:' ? 'wss:' : 'ws:';
+    const ws = new WebSocket(proto + '//' + location.host + '/ws');
+
+    ws.onopen = () => {
+        term.focus();
+        term.onData(data => ws.send(data));
+        term.onResize(({ cols, rows }) => {
+            ws.send(JSON.stringify({ resize: [cols, rows] }));
+        });
+    };
+
+    ws.onmessage = (e) => { term.write(e.data); };
+    ws.onclose = () => { term.write('\r\n\x1b[33m[Connection closed. Refresh to restart.]\x1b[0m\r\n'); };
+    window.addEventListener('resize', () => fit.fit());
+})();
+</script>
+</body>
+</html>