54 lines
1.9 KiB
HTML
54 lines
1.9 KiB
HTML
<!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>
|