Building a web MUD client with xterm.js (mudbud)


#1

[Crosspost from reddit https://old.reddit.com/r/MUD/comments/amupju/building_a_web_mud_client_with_xtermjs_mudbud/?ref=share&ref_source=link.]

After discussion in this post https://old.reddit.com/r/MUD/comments/aj56rd/selfhosted_webbased_mud_client/ I decided to explore the idea of building a web client using xterm.js.

I got a very basic version working:

http://mudslinger.rooflez.com:88/

I’m curious if others have tried similar and if you have any insights.

Here are a few notes on issues I saw so far and potential concerns in moving forward adding features.

Scaling terminal size with window size

Terminal size must be explicitly specified (row and column count). I implemented some calculation to come up with the right number of cols and rows to fill the window. Seems to work but not sure if it’s completely solid.

Cursor

Seems there is no way to completely disable the cursor (I don’t want one since I’m using a separate command input). I just set the color to same as background color which works for now.

ANSI color

With default settings, bright color text was also being bolded. Setting option enableBold to false fixes that, but not sure if that completely disables bold text in the terminal.

Unicode

Terminal only takes strings directly. Since telnet data comes as a byte stream, it needs to be decoded as ASCII or Unicode before writing to the Terminal.

Triggers

May be tricky to do. One possibility it to handle the Terminal ‘linefeed’ event then get the line and check it against trigger patterns. I don’t see an easy way to get a specific line from the Terminal though. Alternately, could track latest line separately from the terminal, but ideally we want match patterns against the printable text of the line only (excluding any escape sequences) so we would have to have our own logic to strip these out in that situation.

MXP

Most likely would need to parse out MXP tags before sending to terminal. The trickier part is implementing the effects of the tags. Text format tags such as <i>, <b>, <s> may not be too bad as they can just be converted to equivalent ANSI escapes, but <send> and <a> will be harder. Terminal does have a registerLinkMatcher API which seems to give some ability to insert links, but not sure if will support these well.