129 lines
4.1 KiB
Markdown
129 lines
4.1 KiB
Markdown
|
# 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
|
||
|
|
|
||
|
|
```bash
|
||
|
|
# 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](LICENSE).
|
||
|
|
|
||
|
|
## Contributing
|
||
|
|
|
||
|
|
Contributions are welcome! Please feel free to submit a Pull Request.
|