main.js

import {Terminal} from '@xterm/xterm';
import {FitAddon} from '@xterm/addon-fit';
import {AttachAddon} from '@xterm/addon-attach';
import {CanvasAddon} from '@xterm/addon-canvas';
import {Unicode11Addon} from '@xterm/addon-unicode11';

import '@xterm/xterm/css/xterm.css';
import './style.css';

function setup() {
    // THERE IS STILL SOMETHING CONFUSING HERE... SUCH AS IT CANT HANDLE ENDL WELL

    // setup terminal

    let term = new Terminal();
    term.options.allowProposedApi = true;

    term.loadAddon(new CanvasAddon());

    let fitAddon = new FitAddon();
    term.loadAddon(fitAddon);

    term.loadAddon(new Unicode11Addon());
    term.unicode.activeVersion = '11';

    term.open(document.getElementById('terminal'));
    fitAddon.fit();
    window.addEventListener('resize', ()=>{
        fitAddon.fit();
    });

    term.attachCustomKeyEventHandler((e) => {
        // Ctrl + Shift + C, to prevent browser from opening devtools
        if(e.ctrlKey && e.shiftKey && e.key.toLowerCase() === 'c') {
            e.preventDefault();
            document.execCommand('copy');
        }
    });

    // load wsrx

    let wsrx = new URLSearchParams(window.location.search).get('wsrx');
    window.history.replaceState({}, null, '/');

    if(!wsrx) {
        // ask user for wsrx
        wsrx = prompt('请输入 WSRX 地址：');
        if(wsrx) {
            wsrx = wsrx.trim();
        } else {
            alert('未提供 WSRX 地址，无法连接到题目。');
            return;
        }
    }

    // open socket

    let socket = new WebSocket(wsrx);
    term.loadAddon(new AttachAddon(socket));

    let firstmsg = true;
    socket.addEventListener('open', ()=>{
        term.clear();
    });
    socket.addEventListener('close', ()=>{
        term.writeln('');
        term.writeln('\n--- 连接中断 ---');
    });

    term.writeln('');
    term.writeln('\n--- 正在连接到题目 ---');

    // done

    window.term = term;
    window.socket = socket;

    queueMicrotask(console.log.bind(
        console,
        '%c网页终端不是题目的一部分，解出题目无需分析网页终端的源码。\n可以绕过网页终端，在使用 WSRX 等工具连接到 WebSocket 后使用 netcat 或 pwntools 等任何工具连接到本题目。',
        'font-size: 1.5em; background-color: yellow; color: black; font-weight: bold; padding: .5em',
    ));
    queueMicrotask(console.log.bind(
        console,
        '\n如果你仍然想用网页终端解题，可以借助全局变量 socket。\n例如通过 socket.send("...\\n"); 和 socket.onmessage = console.log; 来与题目交互。\n\n',
    ));
    term.focus();
}

setup();