SvelteMUD - A Modern MUD Client

SvelteMUD is a feature-rich MUD (Multi-User Dungeon) client built with Svelte and SvelteKit, designed to provide a modern, accessible, and customizable interface for connecting to MUD servers.

Features

Core Functionality

• WebSocket to Telnet proxy for connecting to MUD servers
• Multiple simultaneous MUD connections via an MDI (Multiple Document Interface)
• ANSI color support
• Command history
• Configurable profiles for different MUD servers
• Auto-login functionality
• Progressive Web App (PWA) support for offline use and installation

GMCP Support

• Generic MUD Communication Protocol (GMCP) handling
• Support for common packages:
  • Client.Media for sound playback
  • Client.Keystroke for key capturing
  • Easily extendable with custom GMCP packages

Triggers System

• Pattern matching with plain text or regular expressions
• Actions:
  • Sound playback on triggers
  • Highlight matched text
  • Send commands to the server
  • Execute custom JavaScript code

Accessibility Features

• Text-to-speech for incoming MUD text
• High contrast mode
• Configurable font size and family
• Keyboard navigation
• ARIA attributes for screen readers

Installation

# Clone the repository
git clone https://your-repo-url/svelte-mud.git
cd svelte-mud

# Install dependencies
npm install

# Start the development server
npm run dev

# Build for production
npm run build

Usage

1. Creating a Profile: Click "New Profile" to set up a connection to your MUD server. Configure host, port, and optional auto-login.

2. Connecting: After creating a profile, click the connect button in the tab to establish a connection.

3. Setting Up Triggers: Navigate to the Triggers tab and click "New Trigger" to create pattern matching triggers with various actions.

4. Customizing Settings: Adjust appearance and accessibility options in the Settings tab.

Project Structure

• src/lib/connection/ - MUD connection handling code
• src/lib/gmcp/ - GMCP protocol handling
• src/lib/triggers/ - Trigger system implementation
• src/lib/accessibility/ - Accessibility features
• src/lib/profiles/ - Profile management
• src/lib/components/ - Svelte components
• src/lib/stores/ - Svelte stores for state management
• src/routes/api/ - Server endpoints for WebSocket proxying
• static/sounds/ - Trigger sound files
• static/icons/ - PWA icons in various sizes
• static/manifest.json - PWA manifest file
• static/service-worker.js - Service worker for offline capabilities

Configuration

The client can be configured through the UI, with settings stored in local browser storage:

• MUD server profiles
• Trigger patterns and actions
• UI preferences (dark mode, font size, etc.)
• Accessibility settings

WebSocket to Telnet Proxy

For security reasons, browser WebSockets cannot connect directly to telnet ports. SvelteMUD uses a server-side proxy to facilitate this connection. The proxy is implemented in the src/routes/api/mud-connect and src/routes/api/mud-ws endpoints.

Progressive Web App (PWA) Support

SvelteMUD is configured as a Progressive Web App, allowing users to install it on their devices and use it offline:

Features

• Installable: Add to home screen on mobile or desktop
• Offline Support: Basic functionality works without an internet connection
• Automatic Updates: Notifies users when a new version is available
• Responsive Design: Works on all screen sizes

Installation

Mobile (iOS/Android)

1. Open SvelteMUD in your browser
2. Tap the Share button (iOS) or menu (Android)
3. Select "Add to Home Screen" or "Install App"

Desktop (Chrome, Edge, etc.)

1. Open SvelteMUD in your browser
2. Look for the install icon in the address bar
3. Click "Install" when prompted

Customizing Icons

To replace the default PWA icons:

1. Replace the SVG template in /static/icons/icon-512x512.svg
2. Run the icon generator: npm run generate-icons

License

This project is licensed under the MIT License.

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.