Initial commit
This commit is contained in:
55
.gitignore
vendored
Normal file
55
.gitignore
vendored
Normal file
@@ -0,0 +1,55 @@
|
||||
# SvelteKit specific
|
||||
/build
|
||||
/.svelte-kit
|
||||
/package
|
||||
|
||||
# Node.js dependencies
|
||||
/node_modules
|
||||
npm-debug.log
|
||||
yarn-debug.log
|
||||
yarn-error.log
|
||||
.pnpm-debug.log
|
||||
.npm
|
||||
|
||||
# Environment variables
|
||||
.env
|
||||
.env.*
|
||||
!.env.example
|
||||
|
||||
# Editor directories and files
|
||||
.idea
|
||||
.vscode/*
|
||||
!.vscode/extensions.json
|
||||
!.vscode/settings.json
|
||||
!.vscode/tasks.json
|
||||
!.vscode/launch.json
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
.DS_Store
|
||||
|
||||
# OS generated files
|
||||
.DS_Store
|
||||
.DS_Store?
|
||||
._*
|
||||
.Spotlight-V100
|
||||
.Trashes
|
||||
ehthumbs.db
|
||||
Thumbs.db
|
||||
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
|
||||
# Docker specific
|
||||
docker-compose.override.yml
|
||||
|
||||
# Testing
|
||||
/coverage
|
||||
/.nyc_output
|
||||
|
||||
# Production build extras
|
||||
/dist
|
||||
/.output
|
||||
100
DOCKER-README.md
Normal file
100
DOCKER-README.md
Normal file
@@ -0,0 +1,100 @@
|
||||
# Svelte MUD Docker Setup
|
||||
|
||||
This guide explains how to use Docker to build and run the Svelte MUD client.
|
||||
|
||||
## Prerequisites
|
||||
|
||||
- [Docker](https://docs.docker.com/get-docker/)
|
||||
- [Docker Compose](https://docs.docker.com/compose/install/) (usually included with Docker Desktop)
|
||||
|
||||
## Quick Start
|
||||
|
||||
1. Navigate to the project directory:
|
||||
```bash
|
||||
cd path/to/svelte-mud
|
||||
```
|
||||
|
||||
2. Build and start the containers:
|
||||
```bash
|
||||
docker-compose up -d
|
||||
```
|
||||
|
||||
3. Access the application:
|
||||
- Web interface: http://localhost:3000
|
||||
- WebSocket server: ws://localhost:3001/mud-ws
|
||||
|
||||
## Docker Commands
|
||||
|
||||
### Starting the Application
|
||||
|
||||
```bash
|
||||
# Build and start in detached mode
|
||||
docker-compose up -d
|
||||
|
||||
# Build and start with logs
|
||||
docker-compose up
|
||||
|
||||
# Force rebuild
|
||||
docker-compose up --build
|
||||
```
|
||||
|
||||
### Stopping the Application
|
||||
|
||||
```bash
|
||||
# Stop containers
|
||||
docker-compose down
|
||||
|
||||
# Stop containers and remove volumes
|
||||
docker-compose down -v
|
||||
```
|
||||
|
||||
### Viewing Logs
|
||||
|
||||
```bash
|
||||
# View all logs
|
||||
docker-compose logs
|
||||
|
||||
# Follow logs
|
||||
docker-compose logs -f
|
||||
|
||||
# View logs for specific service
|
||||
docker-compose logs -f svelte-mud
|
||||
```
|
||||
|
||||
## Configuration
|
||||
|
||||
The Docker setup uses the following ports:
|
||||
- Port 3000: Web server
|
||||
- Port 3001: WebSocket server
|
||||
|
||||
You can modify these ports in the `docker-compose.yml` file if needed.
|
||||
|
||||
## Customization
|
||||
|
||||
### Environment Variables
|
||||
|
||||
You can add environment variables in the `docker-compose.yml` file:
|
||||
|
||||
```yaml
|
||||
services:
|
||||
svelte-mud:
|
||||
environment:
|
||||
- NODE_ENV=production
|
||||
- WS_PORT=3001
|
||||
# Add your custom environment variables here
|
||||
```
|
||||
|
||||
### Building for Production
|
||||
|
||||
The default configuration is optimized for production use. It:
|
||||
- Uses a multi-stage build process to minimize image size
|
||||
- Runs as a non-root user for better security
|
||||
- Includes only production dependencies
|
||||
|
||||
## Troubleshooting
|
||||
|
||||
1. **Port conflicts**: If ports 3000 or 3001 are already in use, modify the port mappings in `docker-compose.yml`.
|
||||
|
||||
2. **Build failures**: Ensure that all dependencies are properly defined in your package.json.
|
||||
|
||||
3. **Connection issues**: If you can't connect to the WebSocket server, verify that your client is using the correct URL format: `ws://localhost:3001/mud-ws?host=YOUR_MUD_HOST&port=YOUR_MUD_PORT`.
|
||||
51
Dockerfile
Normal file
51
Dockerfile
Normal file
@@ -0,0 +1,51 @@
|
||||
# Multi-stage build Dockerfile for Svelte MUD client
|
||||
|
||||
# Build stage
|
||||
FROM node:20-alpine AS build
|
||||
|
||||
# Set working directory
|
||||
WORKDIR /app
|
||||
|
||||
# Copy package files
|
||||
COPY package*.json ./
|
||||
|
||||
# Install dependencies
|
||||
RUN npm ci
|
||||
|
||||
# Copy source files
|
||||
COPY . .
|
||||
|
||||
# Build the application
|
||||
RUN npm run build
|
||||
|
||||
# Production stage
|
||||
FROM node:20-alpine AS production
|
||||
|
||||
# Set working directory
|
||||
WORKDIR /app
|
||||
|
||||
# Create a non-root user and group with the node user ID
|
||||
RUN addgroup -g 1001 -S nodejs && \
|
||||
adduser -S -u 1001 -G nodejs nodejs
|
||||
|
||||
# Install only production dependencies
|
||||
COPY package*.json ./
|
||||
RUN npm ci --omit=dev
|
||||
|
||||
# Copy built application from the build stage
|
||||
COPY --from=build /app/build ./build
|
||||
COPY --from=build /app/src/websocket-server.js ./src/
|
||||
COPY production.js ./
|
||||
|
||||
# Switch to non-root user
|
||||
USER nodejs
|
||||
|
||||
# Expose ports for both web and websocket servers
|
||||
EXPOSE 3000
|
||||
EXPOSE 3001
|
||||
|
||||
# Set environment variables
|
||||
ENV NODE_ENV=production
|
||||
|
||||
# Start the full application (web + websocket)
|
||||
CMD ["node", "production.js"]
|
||||
128
README.md
Normal file
128
README.md
Normal file
@@ -0,0 +1,128 @@
|
||||
# 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.
|
||||
27
docker-compose.yml
Normal file
27
docker-compose.yml
Normal file
@@ -0,0 +1,27 @@
|
||||
version: '3.8'
|
||||
|
||||
services:
|
||||
svelte-mud:
|
||||
build:
|
||||
context: .
|
||||
dockerfile: Dockerfile
|
||||
container_name: svelte-mud
|
||||
restart: unless-stopped
|
||||
ports:
|
||||
- "3000:3000" # Web server
|
||||
- "3001:3001" # WebSocket server
|
||||
environment:
|
||||
- NODE_ENV=production
|
||||
# Optional: You can override the WebSocket port if needed
|
||||
# - WS_PORT=3001
|
||||
# Uncomment for adding custom healthcheck
|
||||
# healthcheck:
|
||||
# test: ["CMD", "wget", "--no-verbose", "--tries=1", "--spider", "http://localhost:3000/"]
|
||||
# interval: 30s
|
||||
# timeout: 10s
|
||||
# retries: 3
|
||||
# start_period: 10s
|
||||
volumes:
|
||||
# Optional: Add persistent volumes if needed
|
||||
# - ./logs:/app/logs
|
||||
- /app/node_modules # Don't mount local node_modules
|
||||
38
generate-icons.js
Normal file
38
generate-icons.js
Normal file
@@ -0,0 +1,38 @@
|
||||
// Script to convert SVG to various PNG sizes for PWA icons
|
||||
// Requires: npm install sharp
|
||||
// Usage: node generate-icons.js
|
||||
|
||||
const fs = require('fs');
|
||||
const path = require('path');
|
||||
const sharp = require('sharp');
|
||||
|
||||
// Define icon sizes needed
|
||||
const sizes = [72, 96, 128, 144, 152, 192, 384, 512];
|
||||
|
||||
// Input SVG file
|
||||
const svgFile = path.join(__dirname, 'static/icons/icon-512x512.svg');
|
||||
|
||||
// Read the SVG file
|
||||
fs.readFile(svgFile, (err, data) => {
|
||||
if (err) throw err;
|
||||
|
||||
// Convert to each size
|
||||
sizes.forEach(size => {
|
||||
const outputFile = path.join(__dirname, `static/icons/icon-${size}x${size}.png`);
|
||||
|
||||
sharp(data)
|
||||
.resize(size, size)
|
||||
.png()
|
||||
.toFile(outputFile)
|
||||
.then(() => {
|
||||
console.log(`Created icon: ${outputFile}`);
|
||||
})
|
||||
.catch(err => {
|
||||
console.error(`Error creating ${outputFile}:`, err);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
console.log('To use this script, first install the required dependency:');
|
||||
console.log('npm install sharp');
|
||||
console.log('Then run: node generate-icons.js');
|
||||
9582
package-lock.json
generated
Normal file
9582
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
46
package.json
Normal file
46
package.json
Normal file
@@ -0,0 +1,46 @@
|
||||
{
|
||||
"name": "svelte-mud",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite dev",
|
||||
"ws": "node src/websocket-server.js",
|
||||
"dev:full": "node start-server.js",
|
||||
"build": "vite build",
|
||||
"preview": "vite preview",
|
||||
"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
|
||||
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
|
||||
"start": "node build/index.js",
|
||||
"start:full": "node production.js",
|
||||
"generate-icons": "node generate-icons.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@types/node": "^22.14.1",
|
||||
"@types/ws": "^8.18.1",
|
||||
"ansi-to-html": "^0.7.2",
|
||||
"events": "^3.3.0",
|
||||
"howler": "^2.2.4",
|
||||
"net": "^1.0.2",
|
||||
"split.js": "^1.6.5",
|
||||
"ws": "^8.18.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@sveltejs/adapter-auto": "^3.1.1",
|
||||
"@sveltejs/adapter-node": "^5.2.12",
|
||||
"@sveltejs/kit": "^2.5.0",
|
||||
"@sveltejs/vite-plugin-svelte": "^3.0.1",
|
||||
"@types/howler": "^2.2.11",
|
||||
"autoprefixer": "^10.4.16",
|
||||
"postcss": "^8.4.32",
|
||||
"sharp": "^0.33.2",
|
||||
"svelte": "^4.2.8",
|
||||
"svelte-check": "^3.6.2",
|
||||
"tailwindcss": "^3.3.6",
|
||||
"tslib": "^2.6.2",
|
||||
"typescript": "^5.3.3",
|
||||
"vite": "^5.0.10",
|
||||
"vite-plugin-node-polyfills": "^0.19.0",
|
||||
"vite-plugin-pwa": "^0.19.4"
|
||||
}
|
||||
}
|
||||
44
production.js
Normal file
44
production.js
Normal file
@@ -0,0 +1,44 @@
|
||||
import { spawn } from 'child_process';
|
||||
import { dirname } from 'path';
|
||||
import { fileURLToPath } from 'url';
|
||||
|
||||
const __dirname = dirname(fileURLToPath(import.meta.url));
|
||||
|
||||
// Start the WebSocket server
|
||||
console.log('Starting WebSocket server');
|
||||
const wsServer = spawn('node', ['src/websocket-server.js'], {
|
||||
stdio: 'inherit',
|
||||
shell: true,
|
||||
cwd: __dirname
|
||||
});
|
||||
|
||||
// Start the SvelteKit production server
|
||||
console.log('Starting SvelteKit production server');
|
||||
const sveltekit = spawn('node', ['build/index.js'], {
|
||||
stdio: 'inherit',
|
||||
shell: true,
|
||||
cwd: __dirname
|
||||
});
|
||||
|
||||
// Handle process exit
|
||||
process.on('exit', () => {
|
||||
console.log('Shutting down servers...');
|
||||
wsServer.kill();
|
||||
sveltekit.kill();
|
||||
});
|
||||
|
||||
// Handle ctrl+c
|
||||
process.on('SIGINT', () => {
|
||||
console.log('Received SIGINT, shutting down servers...');
|
||||
wsServer.kill('SIGINT');
|
||||
sveltekit.kill('SIGINT');
|
||||
process.exit(0);
|
||||
});
|
||||
|
||||
// Handle termination
|
||||
process.on('SIGTERM', () => {
|
||||
console.log('Received SIGTERM, shutting down servers...');
|
||||
wsServer.kill('SIGTERM');
|
||||
sveltekit.kill('SIGTERM');
|
||||
process.exit(0);
|
||||
});
|
||||
241
src/app.css
Normal file
241
src/app.css
Normal file
@@ -0,0 +1,241 @@
|
||||
/* Base styles */
|
||||
:root {
|
||||
--color-bg: #f8f9fa;
|
||||
--color-bg-alt: #e9ecef;
|
||||
--color-text: #212529;
|
||||
--color-text-muted: #6c757d;
|
||||
--color-border: #dee2e6;
|
||||
--color-primary: #2196f3;
|
||||
--color-primary-hover: #1976d2;
|
||||
--color-success: #4caf50;
|
||||
--color-warning: #ff9800;
|
||||
--color-error: #f44336;
|
||||
--color-terminal-bg: #f8f8f8;
|
||||
--color-terminal-text: #333;
|
||||
--color-input-bg: #fff;
|
||||
--color-input-border: #ced4da;
|
||||
--border-radius: 4px;
|
||||
--shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
|
||||
--font-mono: monospace, 'Courier New', Courier;
|
||||
}
|
||||
|
||||
.dark-mode {
|
||||
--color-bg: #282a36;
|
||||
--color-bg-alt: #44475a;
|
||||
--color-text: #f8f8f2;
|
||||
--color-text-muted: #bd93f9;
|
||||
--color-border: #6272a4;
|
||||
--color-primary: #8be9fd;
|
||||
--color-primary-hover: #6bbed4;
|
||||
--color-success: #50fa7b;
|
||||
--color-warning: #ffb86c;
|
||||
--color-error: #ff5555;
|
||||
--color-terminal-bg: #282a36;
|
||||
--color-terminal-text: #f8f8f2;
|
||||
--color-input-bg: #44475a;
|
||||
--color-input-border: #6272a4;
|
||||
--shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.high-contrast {
|
||||
--color-bg: #000;
|
||||
--color-bg-alt: #222;
|
||||
--color-text: #fff;
|
||||
--color-text-muted: #eee;
|
||||
--color-border: #fff;
|
||||
--color-primary: #ff0;
|
||||
--color-primary-hover: #ff0;
|
||||
--color-success: #0f0;
|
||||
--color-warning: #ff0;
|
||||
--color-error: #f00;
|
||||
--color-terminal-bg: #000;
|
||||
--color-terminal-text: #fff;
|
||||
--color-input-bg: #000;
|
||||
--color-input-border: #fff;
|
||||
}
|
||||
|
||||
/* Typography */
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
|
||||
line-height: 1.5;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0.5rem;
|
||||
font-weight: 500;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
/* Layout */
|
||||
.container {
|
||||
width: 100%;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 15px;
|
||||
}
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-right: -15px;
|
||||
margin-left: -15px;
|
||||
}
|
||||
|
||||
.col {
|
||||
flex: 1 0 0%;
|
||||
padding: 0 15px;
|
||||
}
|
||||
|
||||
/* Components */
|
||||
.card {
|
||||
background-color: var(--color-input-bg);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--border-radius);
|
||||
padding: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
|
||||
.card-header {
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
padding-bottom: 0.5rem;
|
||||
margin-bottom: 1rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.btn {
|
||||
display: inline-block;
|
||||
font-weight: 400;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
vertical-align: middle;
|
||||
user-select: none;
|
||||
border: 1px solid transparent;
|
||||
padding: 0.375rem 0.75rem;
|
||||
font-size: 1rem;
|
||||
line-height: 1.5;
|
||||
border-radius: var(--border-radius);
|
||||
cursor: pointer;
|
||||
transition: all 0.15s ease-in-out;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background-color: var(--color-primary);
|
||||
color: white;
|
||||
border-color: var(--color-primary);
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background-color: var(--color-primary-hover);
|
||||
border-color: var(--color-primary-hover);
|
||||
}
|
||||
|
||||
.btn-success {
|
||||
background-color: var(--color-success);
|
||||
color: white;
|
||||
border-color: var(--color-success);
|
||||
}
|
||||
|
||||
.btn-warning {
|
||||
background-color: var(--color-warning);
|
||||
color: white;
|
||||
border-color: var(--color-warning);
|
||||
}
|
||||
|
||||
.btn-danger {
|
||||
background-color: var(--color-error);
|
||||
color: white;
|
||||
border-color: var(--color-error);
|
||||
}
|
||||
|
||||
.btn-sm {
|
||||
padding: 0.25rem 0.5rem;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.btn-lg {
|
||||
padding: 0.5rem 1rem;
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
/* Form elements */
|
||||
.form-group {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.form-control {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 0.375rem 0.75rem;
|
||||
font-size: 1rem;
|
||||
line-height: 1.5;
|
||||
color: var(--color-text);
|
||||
background-color: var(--color-input-bg);
|
||||
background-clip: padding-box;
|
||||
border: 1px solid var(--color-input-border);
|
||||
border-radius: var(--border-radius);
|
||||
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
|
||||
}
|
||||
|
||||
.form-control:focus {
|
||||
color: var(--color-text);
|
||||
background-color: var(--color-input-bg);
|
||||
border-color: var(--color-primary);
|
||||
outline: 0;
|
||||
box-shadow: 0 0 0 0.2rem rgba(33, 150, 243, 0.25);
|
||||
}
|
||||
|
||||
/* Accessibility */
|
||||
.visually-hidden {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
white-space: nowrap;
|
||||
border-width: 0;
|
||||
}
|
||||
|
||||
.focus-visible:focus {
|
||||
outline: 2px solid var(--color-primary);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
/* MUD specific */
|
||||
.ansi-black { color: #000000; }
|
||||
.ansi-red { color: #ff0000; }
|
||||
.ansi-green { color: #00ff00; }
|
||||
.ansi-yellow { color: #ffff00; }
|
||||
.ansi-blue { color: #0000ff; }
|
||||
.ansi-magenta { color: #ff00ff; }
|
||||
.ansi-cyan { color: #00ffff; }
|
||||
.ansi-white { color: #ffffff; }
|
||||
.ansi-bright-black { color: #808080; }
|
||||
.ansi-bright-red { color: #ff5555; }
|
||||
.ansi-bright-green { color: #50fa7b; }
|
||||
.ansi-bright-yellow { color: #f1fa8c; }
|
||||
.ansi-bright-blue { color: #bd93f9; }
|
||||
.ansi-bright-magenta { color: #ff79c6; }
|
||||
.ansi-bright-cyan { color: #8be9fd; }
|
||||
.ansi-bright-white { color: #f8f8f2; }
|
||||
|
||||
.ansi-bg-black { background-color: #000000; }
|
||||
.ansi-bg-red { background-color: #ff0000; }
|
||||
.ansi-bg-green { background-color: #00ff00; }
|
||||
.ansi-bg-yellow { background-color: #ffff00; }
|
||||
.ansi-bg-blue { background-color: #0000ff; }
|
||||
.ansi-bg-magenta { background-color: #ff00ff; }
|
||||
.ansi-bg-cyan { background-color: #00ffff; }
|
||||
.ansi-bg-white { background-color: #ffffff; }
|
||||
.ansi-bg-bright-black { background-color: #808080; }
|
||||
.ansi-bg-bright-red { background-color: #ff5555; }
|
||||
.ansi-bg-bright-green { background-color: #50fa7b; }
|
||||
.ansi-bg-bright-yellow { background-color: #f1fa8c; }
|
||||
.ansi-bg-bright-blue { background-color: #bd93f9; }
|
||||
.ansi-bg-bright-magenta { background-color: #ff79c6; }
|
||||
.ansi-bg-bright-cyan { background-color: #8be9fd; }
|
||||
.ansi-bg-bright-white { background-color: #f8f8f2; }
|
||||
12
src/app.d.ts
vendored
Normal file
12
src/app.d.ts
vendored
Normal file
@@ -0,0 +1,12 @@
|
||||
// See https://kit.svelte.dev/docs/types#app
|
||||
// for information about these interfaces
|
||||
declare global {
|
||||
namespace App {
|
||||
// interface Error {}
|
||||
// interface Locals {}
|
||||
// interface PageData {}
|
||||
// interface Platform {}
|
||||
}
|
||||
}
|
||||
|
||||
export {};
|
||||
27
src/app.html
Normal file
27
src/app.html
Normal file
@@ -0,0 +1,27 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
|
||||
<!-- PWA Meta Tags -->
|
||||
<meta name="theme-color" content="#6272a4" />
|
||||
<meta name="description" content="A modern MUD client built with Svelte" />
|
||||
<meta name="apple-mobile-web-app-capable" content="yes" />
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
|
||||
<meta name="apple-mobile-web-app-title" content="SvelteMUD" />
|
||||
|
||||
<!-- PWA Icons and Manifest -->
|
||||
<link rel="manifest" href="%sveltekit.assets%/manifest.json" />
|
||||
<link rel="apple-touch-icon" href="%sveltekit.assets%/icons/icon-192x192.png" />
|
||||
|
||||
<!-- Service Worker Registration -->
|
||||
<script src="%sveltekit.assets%/register-sw.js" defer></script>
|
||||
|
||||
%sveltekit.head%
|
||||
</head>
|
||||
<body data-sveltekit-preload-data="hover">
|
||||
<div style="display: contents">%sveltekit.body%</div>
|
||||
</body>
|
||||
</html>
|
||||
6
src/hooks.server.js
Normal file
6
src/hooks.server.js
Normal file
@@ -0,0 +1,6 @@
|
||||
// This is a placeholder hooks.server.js file
|
||||
// We're using a standalone WebSocket server instead of integrating with SvelteKit hooks
|
||||
|
||||
export async function handle({ event, resolve }) {
|
||||
return await resolve(event);
|
||||
}
|
||||
200
src/lib/accessibility/AccessibilityManager.ts
Normal file
200
src/lib/accessibility/AccessibilityManager.ts
Normal file
@@ -0,0 +1,200 @@
|
||||
import { EventEmitter } from '$lib/utils/EventEmitter';
|
||||
|
||||
export interface SpeechOptions {
|
||||
pitch?: number;
|
||||
rate?: number;
|
||||
volume?: number;
|
||||
voice?: SpeechSynthesisVoice;
|
||||
}
|
||||
|
||||
export class AccessibilityManager extends EventEmitter {
|
||||
private isSpeechEnabled: boolean = false;
|
||||
private speechSynthesis: SpeechSynthesis | null = null;
|
||||
private speechOptions: SpeechOptions = {
|
||||
pitch: 1,
|
||||
rate: 1,
|
||||
volume: 0.8
|
||||
};
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
console.log('AccessibilityManager constructed');
|
||||
|
||||
// Simple initialization - no speech synthesis by default
|
||||
if (typeof window !== 'undefined' && window.speechSynthesis) {
|
||||
this.speechSynthesis = window.speechSynthesis;
|
||||
console.log('Speech synthesis is available');
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Enable or disable speech
|
||||
*/
|
||||
public setSpeechEnabled(enabled: boolean): void {
|
||||
console.log('Setting speech enabled:', enabled);
|
||||
this.isSpeechEnabled = enabled;
|
||||
|
||||
// Cancel speech if disabling
|
||||
if (!enabled && this.speechSynthesis) {
|
||||
try {
|
||||
this.speechSynthesis.cancel();
|
||||
} catch (error) {
|
||||
console.error('Error cancelling speech:', error);
|
||||
}
|
||||
}
|
||||
|
||||
this.emit('speechEnabledChanged', enabled);
|
||||
|
||||
// Test speech synthesis if enabling was successful
|
||||
if (this.isSpeechEnabled) {
|
||||
try {
|
||||
console.log('Text-to-speech is now enabled');
|
||||
} catch (error) {
|
||||
console.error('Error testing speech:', error);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Update speech options
|
||||
*/
|
||||
public updateSpeechOptions(options: SpeechOptions): void {
|
||||
console.log('Speech options updated:', options);
|
||||
|
||||
// Update stored options
|
||||
if (options.rate !== undefined) this.speechOptions.rate = options.rate;
|
||||
if (options.pitch !== undefined) this.speechOptions.pitch = options.pitch;
|
||||
if (options.volume !== undefined) this.speechOptions.volume = options.volume;
|
||||
if (options.voice !== undefined) this.speechOptions.voice = options.voice;
|
||||
|
||||
console.log('New speech options:', this.speechOptions);
|
||||
|
||||
this.emit('speechOptionsChanged', this.speechOptions);
|
||||
}
|
||||
|
||||
/**
|
||||
* Speak text using text-to-speech
|
||||
*/
|
||||
public speak(text: string): void {
|
||||
// Skip if speech is disabled
|
||||
if (!this.isSpeechEnabled || !this.speechSynthesis) {
|
||||
// console.log('Speech is disabled, not speaking');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
// Clean and truncate text to prevent issues with large blocks
|
||||
const cleanText = this.cleanTextForSpeech(text);
|
||||
|
||||
// Only speak if there's meaningful text after cleaning
|
||||
if (cleanText && cleanText.trim().length > 0) {
|
||||
console.log('Speaking text with options:', {
|
||||
rate: this.speechOptions.rate,
|
||||
pitch: this.speechOptions.pitch,
|
||||
volume: this.speechOptions.volume
|
||||
});
|
||||
|
||||
const utterance = new SpeechSynthesisUtterance(cleanText);
|
||||
|
||||
// Explicitly set options
|
||||
utterance.rate = Number(this.speechOptions.rate) || 1;
|
||||
utterance.pitch = Number(this.speechOptions.pitch) || 1;
|
||||
utterance.volume = Number(this.speechOptions.volume) || 0.8;
|
||||
|
||||
console.log('Created utterance with:', {
|
||||
rate: utterance.rate,
|
||||
pitch: utterance.pitch,
|
||||
volume: utterance.volume
|
||||
});
|
||||
|
||||
// Add event handlers for debugging
|
||||
utterance.onstart = () => console.log('Speech started');
|
||||
utterance.onend = () => console.log('Speech ended');
|
||||
utterance.onerror = (e) => console.error('Speech error:', e);
|
||||
|
||||
// Apply voice if set
|
||||
if (this.speechOptions.voice) {
|
||||
utterance.voice = this.speechOptions.voice;
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Speak the text
|
||||
this.speechSynthesis.speak(utterance);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error in speak:', error);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Clean text for speech synthesis
|
||||
*/
|
||||
private cleanTextForSpeech(text: string): string {
|
||||
if (!text) return '';
|
||||
|
||||
try {
|
||||
// Limit text length to prevent freezes with very long text
|
||||
let cleanText = text.length > 200 ? text.substring(0, 200) : text;
|
||||
|
||||
// Remove ANSI color codes
|
||||
cleanText = cleanText.replace(/\u001b\[\d+(;\d+)*m/g, '');
|
||||
|
||||
// Remove HTML tags
|
||||
cleanText = cleanText.replace(/<[^>]*>/g, '');
|
||||
|
||||
return cleanText.trim();
|
||||
} catch (error) {
|
||||
console.error('Error cleaning text for speech:', error);
|
||||
return '';
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Stop current speech
|
||||
*/
|
||||
public stopSpeech(): void {
|
||||
if (!this.speechSynthesis) return;
|
||||
|
||||
try {
|
||||
// Make sure we cancel any pending or active speech
|
||||
this.speechSynthesis.cancel();
|
||||
|
||||
console.log('Speech stopped');
|
||||
this.emit('speechStopped');
|
||||
|
||||
// Force a small delay to ensure the speech engine has time to process the cancel
|
||||
setTimeout(() => {
|
||||
if (this.speechSynthesis && this.speechSynthesis.speaking) {
|
||||
console.log('Force stopping speech again after delay');
|
||||
this.speechSynthesis.cancel();
|
||||
}
|
||||
}, 50);
|
||||
} catch (error) {
|
||||
console.error('Error stopping speech:', error);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Check if speech is currently speaking
|
||||
*/
|
||||
public isSpeaking(): boolean {
|
||||
// Ensure the speech synthesis is available
|
||||
if (!this.speechSynthesis) return false;
|
||||
|
||||
// Check if speech is currently active
|
||||
try {
|
||||
return this.speechSynthesis.speaking || this.speechSynthesis.pending;
|
||||
} catch (error) {
|
||||
console.error('Error checking if speech is speaking:', error);
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Check if speech is currently enabled
|
||||
*/
|
||||
public isSpeechActive(): boolean {
|
||||
return this.isSpeechEnabled;
|
||||
}
|
||||
}
|
||||
284
src/lib/components/KeyboardShortcutsHelp.svelte
Normal file
284
src/lib/components/KeyboardShortcutsHelp.svelte
Normal file
@@ -0,0 +1,284 @@
|
||||
<script lang="ts">
|
||||
import { onMount, onDestroy } from 'svelte';
|
||||
import { shortcutManager, type KeyboardShortcut } from '$lib/utils/KeyboardShortcutManager';
|
||||
|
||||
export let showModal = false;
|
||||
|
||||
let shortcuts: KeyboardShortcut[] = [];
|
||||
|
||||
function closeModal() {
|
||||
showModal = false;
|
||||
}
|
||||
|
||||
function formatShortcut(shortcut: KeyboardShortcut): string {
|
||||
const parts = [];
|
||||
|
||||
if (shortcut.ctrlKey) parts.push('Ctrl');
|
||||
if (shortcut.altKey) parts.push('Alt');
|
||||
if (shortcut.shiftKey) parts.push('Shift');
|
||||
if (shortcut.metaKey) parts.push('Meta');
|
||||
|
||||
// Format key name for better readability
|
||||
let keyName = shortcut.key;
|
||||
|
||||
// Handle special keys
|
||||
if (keyName === ' ') keyName = 'Space';
|
||||
else if (keyName.length === 1) keyName = keyName.toUpperCase();
|
||||
|
||||
parts.push(keyName);
|
||||
|
||||
return parts.join(' + ');
|
||||
}
|
||||
|
||||
function handleShortcutsChanged() {
|
||||
shortcuts = shortcutManager.getShortcuts();
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
// Get initial shortcuts
|
||||
shortcuts = shortcutManager.getShortcuts();
|
||||
|
||||
// Listen for changes
|
||||
shortcutManager.on('shortcutsChanged', handleShortcutsChanged);
|
||||
});
|
||||
|
||||
onDestroy(() => {
|
||||
// Clean up listeners
|
||||
shortcutManager.off('shortcutsChanged', handleShortcutsChanged);
|
||||
});
|
||||
</script>
|
||||
|
||||
{#if showModal}
|
||||
<div class="keyboard-shortcuts-modal">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h2>Keyboard Shortcuts</h2>
|
||||
<button class="close-button" on:click={closeModal}>×</button>
|
||||
</div>
|
||||
|
||||
<div class="modal-body">
|
||||
<p class="intro">These shortcuts help you quickly navigate the SvelteMUD client. Press the key combinations to activate them from anywhere in the application.</p>
|
||||
|
||||
<h3>Global Navigation</h3>
|
||||
<table class="shortcuts-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Shortcut</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each shortcuts.filter(s => s.action.startsWith('focus-') || s.action === 'toggle-sidebar') as shortcut}
|
||||
<tr>
|
||||
<td class="shortcut-key">{formatShortcut(shortcut)}</td>
|
||||
<td>{shortcut.description}</td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h3>Connection Controls</h3>
|
||||
<table class="shortcuts-table">
|
||||
<tbody>
|
||||
{#each shortcuts.filter(s => s.action === 'connect' || s.action === 'disconnect' || s.action.includes('tab')) as shortcut}
|
||||
<tr>
|
||||
<td class="shortcut-key">{formatShortcut(shortcut)}</td>
|
||||
<td>{shortcut.description}</td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h3>Terminal Navigation</h3>
|
||||
<p class="note">Terminal navigation works when the terminal output is focused.</p>
|
||||
<table class="shortcuts-table">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="shortcut-key">↑</td>
|
||||
<td>Previous message</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="shortcut-key">↓</td>
|
||||
<td>Next message</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="shortcut-key">Home</td>
|
||||
<td>First message</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="shortcut-key">End</td>
|
||||
<td>Last message</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="shortcut-key">Page Up</td>
|
||||
<td>Scroll up one page</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="shortcut-key">Page Down</td>
|
||||
<td>Scroll down one page</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h3>Input History Navigation</h3>
|
||||
<p class="note">Input history navigation works when the input field is focused.</p>
|
||||
<table class="shortcuts-table">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="shortcut-key">↑</td>
|
||||
<td>Previous command in history</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="shortcut-key">↓</td>
|
||||
<td>Next command in history</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="shortcut-key">Esc</td>
|
||||
<td>Clear input</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="modal-footer">
|
||||
<button on:click={closeModal}>Close</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
.keyboard-shortcuts-modal {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
background-color: var(--color-bg, #f8f8f8);
|
||||
border-radius: 5px;
|
||||
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
|
||||
width: 90%;
|
||||
max-width: 600px;
|
||||
max-height: 90vh;
|
||||
overflow-y: auto;
|
||||
animation: modal-appear 0.3s ease-out;
|
||||
color: var(--color-text, #333);
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 1rem;
|
||||
border-bottom: 1px solid var(--color-border, #ddd);
|
||||
}
|
||||
|
||||
.modal-header h2 {
|
||||
margin: 0;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.close-button {
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 1.5rem;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
color: var(--color-text, #333);
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.close-button:hover {
|
||||
background-color: var(--color-bg-hover, #e9e9e9);
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
padding: 1rem;
|
||||
border-top: 1px solid var(--color-border, #ddd);
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.modal-footer button {
|
||||
padding: 0.5rem 1rem;
|
||||
background-color: var(--color-primary, #2196f3);
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.shortcuts-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.shortcuts-table th,
|
||||
.shortcuts-table td {
|
||||
padding: 0.5rem;
|
||||
text-align: left;
|
||||
border-bottom: 1px solid var(--color-border, #ddd);
|
||||
}
|
||||
|
||||
.shortcuts-table th {
|
||||
font-weight: bold;
|
||||
background-color: var(--color-bg-alt, #f1f1f1);
|
||||
}
|
||||
|
||||
.shortcut-key {
|
||||
font-family: monospace;
|
||||
background-color: var(--color-bg-alt, #f1f1f1);
|
||||
padding: 0.25rem 0.5rem;
|
||||
border-radius: 4px;
|
||||
font-weight: bold;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin-top: 1.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.intro {
|
||||
margin-bottom: 1.5rem;
|
||||
color: var(--color-text-muted, #555);
|
||||
}
|
||||
|
||||
.note {
|
||||
margin-top: -0.5rem;
|
||||
margin-bottom: 0.75rem;
|
||||
font-style: italic;
|
||||
color: var(--color-text-muted, #555);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
@keyframes modal-appear {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
244
src/lib/components/Modal.svelte
Normal file
244
src/lib/components/Modal.svelte
Normal file
@@ -0,0 +1,244 @@
|
||||
<script lang="ts">
|
||||
import { onMount, onDestroy, createEventDispatcher } from 'svelte';
|
||||
import { fade, scale } from 'svelte/transition';
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
|
||||
// Props
|
||||
export let title = '';
|
||||
export let closable = true;
|
||||
export let component = null;
|
||||
export let componentProps = {};
|
||||
|
||||
// State
|
||||
let isOpen = false;
|
||||
let modalContent;
|
||||
let componentInstance = null;
|
||||
|
||||
// Event callbacks
|
||||
let onSubmitCallback = null;
|
||||
let onCancelCallback = null;
|
||||
|
||||
// Handle component dispatch events
|
||||
function handleComponentEvent(event) {
|
||||
if (event.type === 'save') {
|
||||
if (onSubmitCallback) {
|
||||
onSubmitCallback(event.detail);
|
||||
}
|
||||
close();
|
||||
} else if (event.type === 'cancel') {
|
||||
if (onCancelCallback) {
|
||||
onCancelCallback();
|
||||
}
|
||||
close();
|
||||
}
|
||||
}
|
||||
|
||||
// Open the modal
|
||||
export function open() {
|
||||
console.log('Opening modal');
|
||||
isOpen = true;
|
||||
}
|
||||
|
||||
// Close the modal
|
||||
export function close() {
|
||||
console.log('Closing modal');
|
||||
isOpen = false;
|
||||
|
||||
// Schedule component cleanup
|
||||
setTimeout(() => {
|
||||
if (!isOpen) {
|
||||
cleanupComponent();
|
||||
}
|
||||
}, 300); // Wait for transitions to complete
|
||||
}
|
||||
|
||||
// Set properties and callbacks
|
||||
export function setProps(props) {
|
||||
if (props.title !== undefined) title = props.title;
|
||||
if (props.closable !== undefined) closable = props.closable;
|
||||
if (props.component !== undefined) component = props.component;
|
||||
if (props.componentProps !== undefined) componentProps = props.componentProps;
|
||||
if (props.onSubmit) onSubmitCallback = props.onSubmit;
|
||||
if (props.onCancel) onCancelCallback = props.onCancel;
|
||||
}
|
||||
|
||||
// Clean up any previous component instance
|
||||
function cleanupComponent() {
|
||||
if (componentInstance) {
|
||||
try {
|
||||
componentInstance.$destroy();
|
||||
} catch (error) {
|
||||
console.error('Error destroying component instance:', error);
|
||||
}
|
||||
componentInstance = null;
|
||||
}
|
||||
}
|
||||
|
||||
// Only create component when modal is open and modalContent is available
|
||||
$: if (isOpen && component && modalContent) {
|
||||
console.log('Creating component in modal:', component.name || 'Unknown component');
|
||||
|
||||
// Clean up previous component first to prevent conflicts
|
||||
cleanupComponent();
|
||||
|
||||
try {
|
||||
// Create the component instance
|
||||
componentInstance = new component({
|
||||
target: modalContent,
|
||||
props: componentProps
|
||||
});
|
||||
|
||||
console.log('Component created successfully');
|
||||
|
||||
// Listen for events from the component
|
||||
for (const event of ['save', 'cancel']) {
|
||||
componentInstance.$on(event, (e) => handleComponentEvent({ type: event, detail: e.detail }));
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error creating component in modal:', error);
|
||||
}
|
||||
}
|
||||
|
||||
// Close on ESC key
|
||||
function handleKeydown(event) {
|
||||
if (event.key === 'Escape' && closable && isOpen) {
|
||||
close();
|
||||
if (onCancelCallback) onCancelCallback();
|
||||
}
|
||||
}
|
||||
|
||||
// Cleanup on destroy
|
||||
onDestroy(() => {
|
||||
cleanupComponent();
|
||||
window.removeEventListener('keydown', handleKeydown);
|
||||
});
|
||||
|
||||
// Listen for ESC key
|
||||
onMount(() => {
|
||||
window.addEventListener('keydown', handleKeydown);
|
||||
return () => {
|
||||
window.removeEventListener('keydown', handleKeydown);
|
||||
};
|
||||
});
|
||||
|
||||
// Prevent clicks inside the modal from bubbling up
|
||||
function handleModalClick(event) {
|
||||
event.stopPropagation();
|
||||
}
|
||||
|
||||
// Handle backdrop click
|
||||
function handleBackdropClick() {
|
||||
if (closable) {
|
||||
close();
|
||||
if (onCancelCallback) onCancelCallback();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<svelte:window on:keydown={handleKeydown} />
|
||||
|
||||
{#if isOpen}
|
||||
<div class="modal-backdrop" on:click={handleBackdropClick} transition:fade={{ duration: 150 }}>
|
||||
<div class="modal-content" on:click={handleModalClick} transition:scale={{ start: 0.95, duration: 200 }}>
|
||||
<div class="modal-header">
|
||||
<h2 class="modal-title">{title}</h2>
|
||||
{#if closable}
|
||||
<button type="button" class="modal-close-button" on:click={close} aria-label="Close modal">
|
||||
×
|
||||
</button>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div class="modal-body" bind:this={modalContent}></div>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
.modal-backdrop {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
background-color: #fff;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
|
||||
width: 90%;
|
||||
max-width: 600px;
|
||||
max-height: 90vh;
|
||||
overflow-y: auto;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 16px 20px;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
margin: 0;
|
||||
font-size: 1.25rem;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.modal-close-button {
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 24px;
|
||||
cursor: pointer;
|
||||
color: #999;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.modal-close-button:hover {
|
||||
color: #333;
|
||||
background-color: #f0f0f0;
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
max-height: calc(90vh - 70px);
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
/* Dark mode support */
|
||||
:global(body.dark) .modal-content {
|
||||
background-color: #2d3748;
|
||||
color: #f8f9fa;
|
||||
}
|
||||
|
||||
:global(body.dark) .modal-header {
|
||||
border-bottom-color: #4a5568;
|
||||
}
|
||||
|
||||
:global(body.dark) .modal-title {
|
||||
color: #f8f9fa;
|
||||
}
|
||||
|
||||
:global(body.dark) .modal-close-button {
|
||||
color: #cbd5e0;
|
||||
}
|
||||
|
||||
:global(body.dark) .modal-close-button:hover {
|
||||
color: #f8f9fa;
|
||||
background-color: #4a5568;
|
||||
}
|
||||
</style>
|
||||
420
src/lib/components/MudConnection.svelte
Normal file
420
src/lib/components/MudConnection.svelte
Normal file
@@ -0,0 +1,420 @@
|
||||
<script lang="ts">
|
||||
import { onMount, onDestroy, createEventDispatcher } from 'svelte';
|
||||
import { MudConnection } from '$lib/connection/MudConnection';
|
||||
import { GmcpHandler } from '$lib/gmcp/GmcpHandler';
|
||||
import { TriggerSystem } from '$lib/triggers/TriggerSystem';
|
||||
import { AccessibilityManager } from '$lib/accessibility/AccessibilityManager';
|
||||
import {
|
||||
connections,
|
||||
connectionStatus,
|
||||
activeProfileId,
|
||||
activeProfile,
|
||||
addToOutputHistory,
|
||||
updateGmcpData,
|
||||
accessibilitySettings,
|
||||
uiSettings
|
||||
} from '$lib/stores/mudStore';
|
||||
import { get } from 'svelte/store';
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
|
||||
// Props
|
||||
export let profileId: string;
|
||||
export let autoConnect = false;
|
||||
|
||||
// Local state
|
||||
let connection: MudConnection | null = null;
|
||||
let gmcpHandler: GmcpHandler | null = null;
|
||||
let triggerSystem: TriggerSystem | null = null;
|
||||
let accessibilityManager: AccessibilityManager | null = null;
|
||||
|
||||
/**
|
||||
* Handle keyboard events for speech control
|
||||
*/
|
||||
function handleKeyDown(event: KeyboardEvent): void {
|
||||
// Control key stops speech - the key code for Control is 17
|
||||
if (event.key === 'Control' || event.ctrlKey || event.keyCode === 17) {
|
||||
// Stop propagation to ensure no other handlers interfere
|
||||
event.stopPropagation();
|
||||
|
||||
if (accessibilityManager && accessibilityManager.isSpeaking()) {
|
||||
console.log('Control key pressed - stopping speech');
|
||||
accessibilityManager.stopSpeech();
|
||||
}
|
||||
}
|
||||
|
||||
// Enter key stops speech if the setting is enabled
|
||||
if ((event.key === 'Enter' || event.keyCode === 13) && $accessibilitySettings.interruptSpeechOnEnter) {
|
||||
if (accessibilityManager && accessibilityManager.isSpeaking()) {
|
||||
console.log('Enter key pressed - interrupting speech');
|
||||
accessibilityManager.stopSpeech();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
// Initialize components
|
||||
initializeComponents();
|
||||
|
||||
// Set up keyboard listener for speech control - use capture phase and make it top-level
|
||||
document.addEventListener('keydown', handleKeyDown, true); // Using document instead of window
|
||||
|
||||
// Auto-connect if enabled
|
||||
if (autoConnect) {
|
||||
console.log('Auto-connecting profile:', profileId);
|
||||
connect();
|
||||
}
|
||||
|
||||
// Update connection status - ensure UI shows status as 'disconnected' at start
|
||||
connectionStatus.update(statuses => ({
|
||||
...statuses,
|
||||
[profileId]: 'disconnected'
|
||||
}));
|
||||
});
|
||||
|
||||
onDestroy(() => {
|
||||
// Remove keyboard listener
|
||||
document.removeEventListener('keydown', handleKeyDown, true); // Match document and capture phase
|
||||
|
||||
// Clean up connection
|
||||
if (connection) {
|
||||
connection.disconnect();
|
||||
}
|
||||
|
||||
// Remove from connections store
|
||||
connections.update(conns => {
|
||||
const newConns = { ...conns };
|
||||
delete newConns[profileId];
|
||||
return newConns;
|
||||
});
|
||||
|
||||
// Update connection status
|
||||
connectionStatus.update(statuses => {
|
||||
const newStatuses = { ...statuses };
|
||||
delete newStatuses[profileId];
|
||||
return newStatuses;
|
||||
});
|
||||
});
|
||||
|
||||
/**
|
||||
* Initialize connection components
|
||||
*/
|
||||
function initializeComponents() {
|
||||
// Create GMCP handler
|
||||
gmcpHandler = new GmcpHandler();
|
||||
|
||||
// Create trigger system
|
||||
triggerSystem = new TriggerSystem();
|
||||
|
||||
// Create accessibility manager
|
||||
accessibilityManager = new AccessibilityManager();
|
||||
|
||||
// Set up event listeners
|
||||
setupEventListeners();
|
||||
}
|
||||
|
||||
/**
|
||||
* Set up event listeners for components
|
||||
*/
|
||||
function setupEventListeners() {
|
||||
if (!gmcpHandler || !triggerSystem || !accessibilityManager) return;
|
||||
|
||||
// GMCP handler events
|
||||
gmcpHandler.on('gmcp', (module, data) => {
|
||||
updateGmcpData(module, data);
|
||||
});
|
||||
|
||||
gmcpHandler.on('sendGmcp', (module, data) => {
|
||||
if (connection) {
|
||||
connection.sendGmcp(module, data);
|
||||
}
|
||||
});
|
||||
|
||||
gmcpHandler.on('playSound', (url, volume, loop) => {
|
||||
dispatch('playSound', { url, volume, loop });
|
||||
});
|
||||
|
||||
// Trigger system events
|
||||
triggerSystem.on('sendText', (text) => {
|
||||
if (connection) {
|
||||
connection.send(text);
|
||||
}
|
||||
});
|
||||
|
||||
triggerSystem.on('highlight', (text, pattern, color, isRegex) => {
|
||||
dispatch('highlight', { text, pattern, color, isRegex });
|
||||
});
|
||||
|
||||
// Set up TTS subscription - use direct subscription to avoid circular updates
|
||||
const unsubscribeTts = accessibilitySettings.subscribe(settings => {
|
||||
try {
|
||||
// Set speech enabled directly based on the store value
|
||||
if (accessibilityManager) {
|
||||
console.log('Setting TTS from store:', settings.textToSpeech);
|
||||
accessibilityManager.setSpeechEnabled(settings.textToSpeech);
|
||||
|
||||
// Update speech options when settings change
|
||||
accessibilityManager.updateSpeechOptions({
|
||||
rate: settings.speechRate,
|
||||
pitch: settings.speechPitch,
|
||||
volume: settings.speechVolume
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error updating TTS setting:', error);
|
||||
}
|
||||
});
|
||||
|
||||
// Set up only GMCP debugging subscription
|
||||
let previousGmcpDebug = $uiSettings.debugGmcp;
|
||||
const unsubscribeUiSettings = uiSettings.subscribe(settings => {
|
||||
if (settings.debugGmcp !== previousGmcpDebug) {
|
||||
previousGmcpDebug = settings.debugGmcp;
|
||||
}
|
||||
});
|
||||
|
||||
// Clean up subscriptions on component destruction
|
||||
onDestroy(() => {
|
||||
unsubscribeUiSettings();
|
||||
unsubscribeTts();
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Connect to the MUD server
|
||||
*/
|
||||
export function connect() {
|
||||
const profile = get(activeProfile);
|
||||
console.log('Connecting to profile:', profile);
|
||||
|
||||
if (!profile) {
|
||||
addToOutputHistory('Error: No active profile selected.');
|
||||
console.error('No active profile selected');
|
||||
return;
|
||||
}
|
||||
|
||||
// Update connection status
|
||||
connectionStatus.update(statuses => ({
|
||||
...statuses,
|
||||
[profileId]: 'connecting'
|
||||
}));
|
||||
|
||||
try {
|
||||
addToOutputHistory(`Connecting to ${profile.host}:${profile.port}...`);
|
||||
|
||||
// Create connection
|
||||
connection = new MudConnection({
|
||||
host: profile.host,
|
||||
port: profile.port,
|
||||
useSSL: profile.useSSL,
|
||||
gmcpHandler: gmcpHandler || undefined
|
||||
});
|
||||
|
||||
console.log('Connection object created:', connection);
|
||||
|
||||
// Set up connection event listeners
|
||||
connection.on('connected', handleConnected);
|
||||
connection.on('disconnected', handleDisconnected);
|
||||
connection.on('error', handleError);
|
||||
connection.on('received', handleReceived);
|
||||
connection.on('sent', handleSent);
|
||||
|
||||
// Add to connections store
|
||||
connections.update(conns => ({
|
||||
...conns,
|
||||
[profileId]: connection as MudConnection
|
||||
}));
|
||||
|
||||
// Connect
|
||||
connection.connect();
|
||||
} catch (error) {
|
||||
console.error('Failed to connect:', error);
|
||||
|
||||
connectionStatus.update(statuses => ({
|
||||
...statuses,
|
||||
[profileId]: 'error'
|
||||
}));
|
||||
|
||||
addToOutputHistory(`Error connecting to ${profile.host}:${profile.port} - ${error}`);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Disconnect from the MUD server
|
||||
*/
|
||||
export function disconnect() {
|
||||
if (connection) {
|
||||
connection.disconnect();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Handle connection established
|
||||
*/
|
||||
function handleConnected() {
|
||||
const profile = get(activeProfile);
|
||||
|
||||
connectionStatus.update(statuses => ({
|
||||
...statuses,
|
||||
[profileId]: 'connected'
|
||||
}));
|
||||
|
||||
addToOutputHistory(`Connected to ${profile?.host}:${profile?.port}`);
|
||||
|
||||
// Handle auto-login if enabled
|
||||
if (profile?.autoLogin?.enabled) {
|
||||
setTimeout(() => {
|
||||
// Send username
|
||||
if (profile.autoLogin?.username) {
|
||||
if (connection) connection.send(profile.autoLogin.username);
|
||||
}
|
||||
|
||||
// Send password after a delay
|
||||
if (profile.autoLogin?.password) {
|
||||
setTimeout(() => {
|
||||
if (connection) connection.send(profile.autoLogin?.password || '');
|
||||
|
||||
// Send additional commands
|
||||
if (profile.autoLogin?.commands && profile.autoLogin.commands.length > 0) {
|
||||
let delay = 500;
|
||||
profile.autoLogin.commands.forEach((cmd) => {
|
||||
setTimeout(() => {
|
||||
if (connection) connection.send(cmd);
|
||||
}, delay);
|
||||
delay += 500;
|
||||
});
|
||||
}
|
||||
}, 1000);
|
||||
}
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
dispatch('connected');
|
||||
}
|
||||
|
||||
/**
|
||||
* Handle connection closed
|
||||
*/
|
||||
function handleDisconnected() {
|
||||
connectionStatus.update(statuses => ({
|
||||
...statuses,
|
||||
[profileId]: 'disconnected'
|
||||
}));
|
||||
|
||||
addToOutputHistory('Disconnected from server.');
|
||||
dispatch('disconnected');
|
||||
}
|
||||
|
||||
/**
|
||||
* Handle connection error
|
||||
*/
|
||||
function handleError(error: any) {
|
||||
connectionStatus.update(statuses => ({
|
||||
...statuses,
|
||||
[profileId]: 'error'
|
||||
}));
|
||||
|
||||
// Format the error message for display
|
||||
const errorMessage = typeof error === 'object' ?
|
||||
(error.message || JSON.stringify(error)) :
|
||||
String(error);
|
||||
|
||||
addToOutputHistory(`Connection error: ${errorMessage}`, false, [
|
||||
{ pattern: 'Connection error', color: '#ff5555', isRegex: false }
|
||||
]);
|
||||
|
||||
dispatch('error', { error });
|
||||
}
|
||||
|
||||
/**
|
||||
* Handle received data
|
||||
*/
|
||||
function handleReceived(text: string) {
|
||||
// Add to output history first
|
||||
addToOutputHistory(text);
|
||||
|
||||
// Process triggers with safe error handling
|
||||
if (triggerSystem) {
|
||||
try {
|
||||
triggerSystem.processTriggers(text);
|
||||
} catch (error) {
|
||||
console.error('Error processing triggers:', error);
|
||||
}
|
||||
}
|
||||
|
||||
// Try to use text-to-speech if enabled
|
||||
if (accessibilityManager && $accessibilitySettings.textToSpeech) {
|
||||
// Use a small timeout to avoid UI blocking
|
||||
setTimeout(() => {
|
||||
try {
|
||||
accessibilityManager.speak(text);
|
||||
} catch (error) {
|
||||
console.error('Error using text-to-speech:', error);
|
||||
}
|
||||
}, 10);
|
||||
}
|
||||
|
||||
dispatch('received', { text });
|
||||
}
|
||||
|
||||
/**
|
||||
* Handle sent data
|
||||
*/
|
||||
function handleSent(text: string) {
|
||||
dispatch('sent', { text });
|
||||
}
|
||||
</script>
|
||||
|
||||
{#if $connectionStatus[profileId]}
|
||||
<div class="mud-connection-status" role="status" aria-live="polite">
|
||||
<div class="status-indicator status-{$connectionStatus[profileId]}" aria-hidden="true"></div>
|
||||
<span>Server status: {$connectionStatus[profileId]}</span>
|
||||
{#if $connectionStatus[profileId] === 'error'}
|
||||
<span class="sr-only">There was an error connecting to the MUD server. Please check your settings and try again.</span>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
.mud-connection-status {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 5px;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
.status-indicator {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.status-connected {
|
||||
background-color: #50fa7b;
|
||||
}
|
||||
|
||||
.status-connecting {
|
||||
background-color: #f1fa8c;
|
||||
}
|
||||
|
||||
.status-disconnected {
|
||||
background-color: #999;
|
||||
}
|
||||
|
||||
.status-error {
|
||||
background-color: #ff5555;
|
||||
}
|
||||
|
||||
.sr-only {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
white-space: nowrap;
|
||||
border-width: 0;
|
||||
}
|
||||
</style>
|
||||
507
src/lib/components/MudMdi.svelte
Normal file
507
src/lib/components/MudMdi.svelte
Normal file
@@ -0,0 +1,507 @@
|
||||
<script lang="ts">
|
||||
import { onMount, onDestroy } from 'svelte';
|
||||
import MudTerminal from './MudTerminal.svelte';
|
||||
import MudConnection from './MudConnection.svelte';
|
||||
import { activeProfileId, profiles, connectionStatus, addToOutputHistory } from '$lib/stores/mudStore';
|
||||
import type { MudProfile } from '$lib/profiles/ProfileManager';
|
||||
|
||||
// Local state
|
||||
let tabs: { id: string; profile: MudProfile }[] = [];
|
||||
let activeTab: string | null = null;
|
||||
let autoConnectOnStart = true; // Auto-connect to the active profile on start
|
||||
|
||||
// Component references
|
||||
let connections: { [key: string]: any } = {};
|
||||
|
||||
// Initialize tabs from profiles
|
||||
function initializeTabs() {
|
||||
// Get the profiles from the store
|
||||
const allProfiles = $profiles || [];
|
||||
console.log('Initializing tabs with profiles:', allProfiles);
|
||||
|
||||
if (allProfiles.length === 0) {
|
||||
console.warn('No profiles available to create tabs');
|
||||
tabs = [];
|
||||
// If no tabs are available, we should show a message to create a profile
|
||||
addToOutputHistory('No profiles available. Please create a profile in the sidebar.');
|
||||
return;
|
||||
}
|
||||
|
||||
tabs = allProfiles.map(profile => ({
|
||||
id: profile.id,
|
||||
profile
|
||||
}));
|
||||
|
||||
console.log('Created tabs:', tabs);
|
||||
|
||||
// Set the active tab from the store or default to the first tab
|
||||
activeTab = $activeProfileId || (tabs.length > 0 ? tabs[0].id : null);
|
||||
console.log('Active tab set to:', activeTab);
|
||||
|
||||
// Update the active profile ID in the store
|
||||
if (activeTab) {
|
||||
activeProfileId.set(activeTab);
|
||||
|
||||
// Auto-connect if enabled
|
||||
if (autoConnectOnStart && tabs.length > 0 && !$connectionStatus[activeTab]) {
|
||||
console.log(`Auto-connecting to tab: ${activeTab}`);
|
||||
setTimeout(() => connectToMud(activeTab), 500);
|
||||
}
|
||||
}
|
||||
|
||||
// Force a rerender of the tabs
|
||||
setTimeout(() => {
|
||||
console.log('Forcing tab rerender');
|
||||
tabs = [...tabs];
|
||||
}, 0);
|
||||
}
|
||||
|
||||
// Handle tab changes
|
||||
function changeTab(tabId: string) {
|
||||
activeTab = tabId;
|
||||
activeProfileId.set(tabId);
|
||||
}
|
||||
|
||||
// Connect to a MUD server
|
||||
function connectToMud(profileId: string) {
|
||||
const connectionComponent = connections[profileId];
|
||||
if (connectionComponent) {
|
||||
connectionComponent.connect();
|
||||
}
|
||||
}
|
||||
|
||||
// Disconnect from a MUD server
|
||||
function disconnectFromMud(profileId: string) {
|
||||
const connectionComponent = connections[profileId];
|
||||
if (connectionComponent) {
|
||||
connectionComponent.disconnect();
|
||||
}
|
||||
}
|
||||
|
||||
// Close a tab
|
||||
function closeTab(profileId: string) {
|
||||
// Disconnect if connected
|
||||
if ($connectionStatus[profileId] === 'connected') {
|
||||
disconnectFromMud(profileId);
|
||||
}
|
||||
|
||||
// Remove the tab
|
||||
tabs = tabs.filter(tab => tab.id !== profileId);
|
||||
|
||||
// If the closed tab was active, activate another tab
|
||||
if (activeTab === profileId) {
|
||||
activeTab = tabs.length > 0 ? tabs[0].id : null;
|
||||
activeProfileId.set(activeTab);
|
||||
}
|
||||
}
|
||||
|
||||
// Add a new tab
|
||||
function addTab(profile: MudProfile) {
|
||||
// Check if a tab already exists for this profile
|
||||
const existingTabIndex = tabs.findIndex(tab => tab.id === profile.id);
|
||||
|
||||
if (existingTabIndex !== -1) {
|
||||
// If it exists, just switch to it
|
||||
changeTab(profile.id);
|
||||
} else {
|
||||
// Otherwise, add a new tab
|
||||
tabs = [...tabs, { id: profile.id, profile }];
|
||||
activeTab = profile.id;
|
||||
activeProfileId.set(profile.id);
|
||||
}
|
||||
}
|
||||
|
||||
// Handle keyboard events for accessibility
|
||||
function handleTabKeyDown(event: KeyboardEvent, tabId: string) {
|
||||
if (event.key === 'Enter' || event.key === ' ') {
|
||||
event.preventDefault();
|
||||
changeTab(tabId);
|
||||
}
|
||||
}
|
||||
|
||||
// Update when profiles change
|
||||
$: if ($profiles) {
|
||||
console.log('Profiles updated in store, reinitializing tabs:', $profiles);
|
||||
initializeTabs();
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
// Initial setup of tabs
|
||||
initializeTabs();
|
||||
|
||||
// Force a refresh of the UI after a short delay to ensure components render correctly
|
||||
setTimeout(() => {
|
||||
console.log('Forcing UI refresh');
|
||||
tabs = [...tabs]; // Create a new array reference to trigger UI updates
|
||||
}, 500);
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="mud-mdi">
|
||||
<div class="mud-mdi-tabs" role="tablist">
|
||||
{#each tabs as tab}
|
||||
<button
|
||||
class="mud-mdi-tab"
|
||||
class:active={activeTab === tab.id}
|
||||
class:connected={$connectionStatus[tab.id] === 'connected'}
|
||||
class:connecting={$connectionStatus[tab.id] === 'connecting'}
|
||||
class:error={$connectionStatus[tab.id] === 'error'}
|
||||
role="tab"
|
||||
aria-selected={activeTab === tab.id}
|
||||
aria-controls={`panel-${tab.id}`}
|
||||
id={`tab-${tab.id}`}
|
||||
on:click={() => changeTab(tab.id)}
|
||||
on:keydown={(e) => handleTabKeyDown(e, tab.id)}
|
||||
>
|
||||
<span class="tab-name">{tab.profile.name}</span>
|
||||
<span class="tab-status" aria-hidden="true">
|
||||
{#if $connectionStatus[tab.id] === 'connected'}
|
||||
<span class="status-indicator connected" title="Connected"></span>
|
||||
{:else if $connectionStatus[tab.id] === 'connecting'}
|
||||
<span class="status-indicator connecting" title="Connecting"></span>
|
||||
{:else if $connectionStatus[tab.id] === 'error'}
|
||||
<span class="status-indicator error" title="Error"></span>
|
||||
{:else}
|
||||
<span class="status-indicator disconnected" title="Disconnected"></span>
|
||||
{/if}
|
||||
</span>
|
||||
</button>
|
||||
{/each}
|
||||
<div class="tab-spacer"></div>
|
||||
</div>
|
||||
|
||||
<div class="mud-mdi-content">
|
||||
{#if tabs.length === 0}
|
||||
<div class="mud-mdi-no-profiles">
|
||||
<div class="no-profiles-message">
|
||||
<h3>No Profiles Available</h3>
|
||||
<p>Please create a new profile in the sidebar to get started.</p>
|
||||
</div>
|
||||
</div>
|
||||
{:else}
|
||||
{#each tabs as tab (tab.id)}
|
||||
<div
|
||||
class="mud-mdi-pane"
|
||||
style="display: {activeTab === tab.id ? 'flex' : 'none'}"
|
||||
role="tabpanel"
|
||||
id={`panel-${tab.id}`}
|
||||
aria-labelledby={`tab-${tab.id}`}
|
||||
>
|
||||
<div class="mud-mdi-pane-header">
|
||||
<div class="mud-mdi-pane-title">
|
||||
<span class="profile-name">{tab.profile.name}</span>
|
||||
<span class="profile-host">{tab.profile.host}:{tab.profile.port} {tab.profile.useSSL ? '(SSL)' : ''}</span>
|
||||
</div>
|
||||
|
||||
<div class="mud-mdi-pane-actions">
|
||||
{#if $connectionStatus[tab.id] === 'connected' || $connectionStatus[tab.id] === 'connecting'}
|
||||
<button
|
||||
type="button"
|
||||
class="btn-disconnect"
|
||||
on:click={() => disconnectFromMud(tab.id)}
|
||||
aria-label="Disconnect from MUD server"
|
||||
>
|
||||
Disconnect
|
||||
</button>
|
||||
{:else}
|
||||
<button
|
||||
type="button"
|
||||
class="btn-connect"
|
||||
on:click={() => connectToMud(tab.id)}
|
||||
aria-label="Connect to MUD server"
|
||||
>
|
||||
Connect
|
||||
</button>
|
||||
{/if}
|
||||
<button
|
||||
type="button"
|
||||
class="btn-close"
|
||||
on:click={() => closeTab(tab.id)}
|
||||
aria-label="Close this MUD connection"
|
||||
>
|
||||
Close
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<MudConnection
|
||||
profileId={tab.id}
|
||||
bind:this={connections[tab.id]}
|
||||
/>
|
||||
<MudTerminal
|
||||
autofocus={activeTab === tab.id}
|
||||
/>
|
||||
</div>
|
||||
{/each}
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.mud-mdi {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background-color: var(--color-bg);
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.mud-mdi-tabs {
|
||||
display: flex;
|
||||
background-color: var(--color-bg-alt);
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
overflow-x: auto;
|
||||
min-height: 40px;
|
||||
}
|
||||
|
||||
.mud-mdi-tab {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 8px 16px;
|
||||
background-color: var(--color-bg);
|
||||
border-right: 1px solid var(--color-border);
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
min-width: 150px;
|
||||
max-width: 200px;
|
||||
height: 40px;
|
||||
position: relative;
|
||||
text-align: left;
|
||||
border: none;
|
||||
border-bottom: 2px solid transparent;
|
||||
}
|
||||
|
||||
.mud-mdi-tab:hover {
|
||||
background-color: var(--color-bg-hover);
|
||||
}
|
||||
|
||||
.mud-mdi-tab:focus {
|
||||
outline: 3px solid var(--color-primary);
|
||||
outline-offset: -2px;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.mud-mdi-tab:focus:not(:focus-visible) {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.mud-mdi-tab:focus-visible {
|
||||
outline: 3px solid var(--color-primary);
|
||||
outline-offset: -2px;
|
||||
}
|
||||
|
||||
.mud-mdi-tab.active {
|
||||
background-color: var(--color-bg-active);
|
||||
border-bottom: 2px solid var(--color-primary);
|
||||
}
|
||||
|
||||
.tab-status {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.status-indicator {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.status-indicator.connected {
|
||||
background-color: #4caf50;
|
||||
}
|
||||
|
||||
.status-indicator.connecting {
|
||||
background-color: #ff9800;
|
||||
}
|
||||
|
||||
.status-indicator.error {
|
||||
background-color: #f44336;
|
||||
}
|
||||
|
||||
.status-indicator.disconnected {
|
||||
background-color: #999;
|
||||
}
|
||||
|
||||
.tab-name {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.tab-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.tab-connect,
|
||||
.tab-disconnect,
|
||||
.tab-close {
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
padding: 2px 4px;
|
||||
margin-left: 2px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.tab-connect:hover,
|
||||
.tab-disconnect:hover,
|
||||
.tab-close:hover {
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.tab-connect:focus,
|
||||
.tab-disconnect:focus,
|
||||
.tab-close:focus {
|
||||
outline: 2px solid var(--color-primary);
|
||||
outline-offset: 1px;
|
||||
}
|
||||
|
||||
.tab-connect {
|
||||
color: #4caf50;
|
||||
}
|
||||
|
||||
.tab-disconnect {
|
||||
color: #f44336;
|
||||
}
|
||||
|
||||
.tab-close {
|
||||
color: #757575;
|
||||
}
|
||||
|
||||
.tab-spacer {
|
||||
flex: 1;
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
.mud-mdi-content {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
background-color: var(--color-bg);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.mud-mdi-pane {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
display: flex !important; /* Force display flex */
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
overflow: hidden; /* Prevent overflow issues */
|
||||
}
|
||||
|
||||
.mud-mdi-pane-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 8px 16px;
|
||||
background-color: var(--color-bg-alt);
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.mud-mdi-pane-title {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.profile-name {
|
||||
font-weight: bold;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.profile-host {
|
||||
font-size: 0.8rem;
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
.mud-mdi-pane-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.btn-connect, .btn-disconnect, .btn-close {
|
||||
padding: 6px 12px;
|
||||
border-radius: 4px;
|
||||
font-size: 0.9rem;
|
||||
cursor: pointer;
|
||||
border: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
.btn-connect {
|
||||
background-color: #4caf50;
|
||||
color: white;
|
||||
border-color: #43a047;
|
||||
}
|
||||
|
||||
.btn-disconnect {
|
||||
background-color: #ff9800;
|
||||
color: white;
|
||||
border-color: #f57c00;
|
||||
}
|
||||
|
||||
.btn-close {
|
||||
background-color: #f44336;
|
||||
color: white;
|
||||
border-color: #e53935;
|
||||
}
|
||||
|
||||
.btn-connect:hover, .btn-disconnect:hover, .btn-close:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.btn-connect:focus, .btn-disconnect:focus, .btn-close:focus {
|
||||
outline: 3px solid var(--color-primary);
|
||||
outline-offset: 2px;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.btn-connect:focus:not(:focus-visible),
|
||||
.btn-disconnect:focus:not(:focus-visible),
|
||||
.btn-close:focus:not(:focus-visible) {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.btn-connect:focus-visible,
|
||||
.btn-disconnect:focus-visible,
|
||||
.btn-close:focus-visible {
|
||||
outline: 3px solid var(--color-primary);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.mud-mdi-no-profiles {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.no-profiles-message {
|
||||
text-align: center;
|
||||
padding: 2rem;
|
||||
max-width: 400px;
|
||||
background-color: var(--color-bg-alt);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.no-profiles-message h3 {
|
||||
margin-top: 0;
|
||||
color: var(--color-primary);
|
||||
}
|
||||
</style>
|
||||
567
src/lib/components/MudTerminal.svelte
Normal file
567
src/lib/components/MudTerminal.svelte
Normal file
@@ -0,0 +1,567 @@
|
||||
<script lang="ts">
|
||||
import { onMount, onDestroy, createEventDispatcher } from 'svelte';
|
||||
import { outputHistory, addToOutputHistory, addToInputHistory, navigateInputHistory, inputHistoryIndex, activeConnection, uiSettings, accessibilitySettings, inputHistory } from '$lib/stores/mudStore';
|
||||
import { tick } from 'svelte';
|
||||
import AnsiToHtml from 'ansi-to-html';
|
||||
import { AccessibilityManager } from '$lib/accessibility/AccessibilityManager';
|
||||
|
||||
// Create event dispatcher
|
||||
const dispatch = createEventDispatcher();
|
||||
|
||||
// Props
|
||||
export let autofocus = true;
|
||||
export let placeholder = 'Enter command...';
|
||||
export let aria_label = 'MUD Input';
|
||||
|
||||
// Local state
|
||||
let terminalElement: HTMLDivElement;
|
||||
let inputElement: HTMLInputElement;
|
||||
let currentInput = '';
|
||||
let accessibilityManager: AccessibilityManager | null = null;
|
||||
let ansiConverter = new AnsiToHtml({
|
||||
fg: '#f8f8f2',
|
||||
bg: '#282a36',
|
||||
newline: false, // We'll handle newlines ourselves
|
||||
escapeXML: true,
|
||||
stream: false
|
||||
});
|
||||
|
||||
// Message navigation state
|
||||
let currentFocusedMessageIndex: number = -1;
|
||||
let messageElements: HTMLElement[] = [];
|
||||
|
||||
// Process ANSI color codes
|
||||
function processAnsi(text: string): string {
|
||||
if ($uiSettings.ansiColor) {
|
||||
try {
|
||||
// First process ANSI to HTML without replacing newlines
|
||||
const ansiProcessed = ansiConverter.toHtml(text);
|
||||
|
||||
// Then replace newlines with <br> tags
|
||||
return ansiProcessed.replace(/\r\n|\r|\n/g, '<br>');
|
||||
} catch (error) {
|
||||
console.error('Error processing ANSI colors:', error);
|
||||
// Fallback to just replacing newlines
|
||||
return text.replace(/\r\n|\r|\n/g, '<br>');
|
||||
}
|
||||
} else {
|
||||
// Strip ANSI codes if color is disabled
|
||||
return text.replace(/\u001b\[\d+(;\d+)*m/g, '')
|
||||
.replace(/\r\n|\r|\n/g, '<br>');
|
||||
}
|
||||
}
|
||||
|
||||
// Split text into individual lines (for better screen reader navigation)
|
||||
function splitIntoLines(text: string): string[] {
|
||||
// First handle any text that already has <br> tags from ANSI processing
|
||||
if (text.includes('<br>')) {
|
||||
return text.split('<br>').filter(line => line.trim().length > 0);
|
||||
}
|
||||
|
||||
// Otherwise split by newlines
|
||||
return text.split(/\r\n|\r|\n/).filter(line => line.trim().length > 0);
|
||||
}
|
||||
|
||||
// Apply highlighting to text
|
||||
function applyHighlights(text: string, highlights: { pattern: string; color: string; isRegex: boolean }[]): string {
|
||||
if (!highlights || highlights.length === 0) return text;
|
||||
|
||||
let highlightedText = text;
|
||||
|
||||
highlights.forEach(({ pattern, color, isRegex }) => {
|
||||
if (isRegex) {
|
||||
try {
|
||||
const regex = new RegExp(pattern, 'g');
|
||||
highlightedText = highlightedText.replace(regex, (match) => {
|
||||
return `<span style="background-color: ${color};">${match}</span>`;
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('Invalid regex pattern:', pattern, error);
|
||||
}
|
||||
} else {
|
||||
// Escape special characters in the pattern for use in a regex
|
||||
const safePattern = pattern.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
|
||||
const regex = new RegExp(safePattern, 'g');
|
||||
highlightedText = highlightedText.replace(regex, (match) => {
|
||||
return `<span style="background-color: ${color};">${match}</span>`;
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
return highlightedText;
|
||||
}
|
||||
|
||||
// Handle input submission
|
||||
function handleSubmit(event: Event) {
|
||||
event.preventDefault();
|
||||
|
||||
if (!currentInput.trim()) return;
|
||||
|
||||
// Interrupt speech if enabled
|
||||
if ($accessibilitySettings.interruptSpeechOnEnter && accessibilityManager && accessibilityManager.isSpeaking()) {
|
||||
accessibilityManager.stopSpeech();
|
||||
}
|
||||
|
||||
// Add to input history
|
||||
addToInputHistory(currentInput);
|
||||
|
||||
// Show the command in the output (only if not password - for privacy)
|
||||
const isPassword = currentInput.startsWith('password') || currentInput.toLowerCase() === $inputHistory[$inputHistory.length - 2]?.toLowerCase().replace('username', 'password');
|
||||
if (!isPassword) {
|
||||
addToOutputHistory(`> ${currentInput}`, true);
|
||||
} else {
|
||||
addToOutputHistory(`> ********`, true);
|
||||
}
|
||||
|
||||
// Send the command if connected
|
||||
if ($activeConnection) {
|
||||
try {
|
||||
$activeConnection.send(currentInput);
|
||||
} catch (error) {
|
||||
console.error('Error sending command:', error);
|
||||
addToOutputHistory(`Error sending command: ${error}`, false, [{ pattern: 'Error', color: '#ff5555', isRegex: false }]);
|
||||
}
|
||||
} else {
|
||||
addToOutputHistory('Not connected to any MUD server.', false, [{ pattern: 'Not connected', color: '#ff5555', isRegex: false }]);
|
||||
}
|
||||
|
||||
// Clear the input
|
||||
currentInput = '';
|
||||
dispatch('input', { text: currentInput });
|
||||
|
||||
// Focus the input again
|
||||
if (inputElement) {
|
||||
inputElement.focus();
|
||||
}
|
||||
}
|
||||
|
||||
// Handle keyboard shortcuts
|
||||
function handleKeyDown(event: KeyboardEvent) {
|
||||
if (event.key === 'ArrowUp') {
|
||||
event.preventDefault();
|
||||
currentInput = navigateInputHistory('up', currentInput);
|
||||
} else if (event.key === 'ArrowDown') {
|
||||
event.preventDefault();
|
||||
currentInput = navigateInputHistory('down', currentInput);
|
||||
} else if (event.key === 'Escape') {
|
||||
event.preventDefault();
|
||||
currentInput = '';
|
||||
inputHistoryIndex.set(-1);
|
||||
}
|
||||
}
|
||||
|
||||
// Scroll to bottom of terminal
|
||||
async function scrollToBottom() {
|
||||
await tick();
|
||||
if (terminalElement) {
|
||||
terminalElement.scrollTop = terminalElement.scrollHeight;
|
||||
}
|
||||
}
|
||||
|
||||
// Handle keyboard navigation in output window
|
||||
function handleOutputKeyDown(event: KeyboardEvent) {
|
||||
if (event.key === 'PageUp') {
|
||||
event.preventDefault();
|
||||
if (terminalElement) {
|
||||
terminalElement.scrollTop -= terminalElement.clientHeight;
|
||||
}
|
||||
} else if (event.key === 'PageDown') {
|
||||
event.preventDefault();
|
||||
if (terminalElement) {
|
||||
terminalElement.scrollTop += terminalElement.clientHeight;
|
||||
}
|
||||
} else if (event.key === 'Home') {
|
||||
event.preventDefault();
|
||||
if (terminalElement) {
|
||||
terminalElement.scrollTop = 0;
|
||||
// Focus first message
|
||||
navigateToMessage(0);
|
||||
}
|
||||
} else if (event.key === 'End') {
|
||||
event.preventDefault();
|
||||
scrollToBottom();
|
||||
// Focus last message
|
||||
navigateToMessage(messageElements.length - 1);
|
||||
} else if (event.key === 'ArrowUp') {
|
||||
event.preventDefault();
|
||||
navigatePreviousMessage();
|
||||
} else if (event.key === 'ArrowDown') {
|
||||
event.preventDefault();
|
||||
navigateNextMessage();
|
||||
}
|
||||
}
|
||||
|
||||
// Update message elements reference and prepare for navigation
|
||||
function updateMessageElements() {
|
||||
if (terminalElement) {
|
||||
// Get all line elements to make them individually navigable
|
||||
messageElements = Array.from(terminalElement.querySelectorAll('.mud-terminal-line'));
|
||||
|
||||
// Add tabindex and aria attributes for accessibility
|
||||
messageElements.forEach((el, index) => {
|
||||
const element = el as HTMLElement;
|
||||
element.setAttribute('tabindex', '-1'); // Can be focused but not in tab order
|
||||
element.setAttribute('aria-posinset', (index + 1).toString());
|
||||
element.setAttribute('aria-setsize', messageElements.length.toString());
|
||||
|
||||
// Don't add navigation instructions text to the elements
|
||||
// Let the screen reader just read the content
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Navigate to specific message by index
|
||||
function navigateToMessage(index: number) {
|
||||
if (index < 0 || index >= messageElements.length) return;
|
||||
|
||||
// Remove focus from current message
|
||||
if (currentFocusedMessageIndex >= 0 && currentFocusedMessageIndex < messageElements.length) {
|
||||
messageElements[currentFocusedMessageIndex].classList.remove('focused-message');
|
||||
}
|
||||
|
||||
// Set current message index
|
||||
currentFocusedMessageIndex = index;
|
||||
|
||||
// Add focus class to current message
|
||||
const messageElement = messageElements[currentFocusedMessageIndex];
|
||||
messageElement.classList.add('focused-message');
|
||||
messageElement.focus();
|
||||
|
||||
// Make sure the message is in view
|
||||
messageElement.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
|
||||
|
||||
// Announce for screen readers - simplified and concise announcement
|
||||
const messageNumber = currentFocusedMessageIndex + 1;
|
||||
const totalMessages = messageElements.length;
|
||||
const messageContent = messageElement.textContent || '';
|
||||
|
||||
// Only announce the message number and content, not terminal instructions
|
||||
const announcement = `${messageNumber} of ${totalMessages}: ${messageContent.substring(0, 100)}`;
|
||||
|
||||
// Use aria-live region for announcement
|
||||
const announcementElement = document.getElementById('message-announcement');
|
||||
if (announcementElement) {
|
||||
announcementElement.textContent = announcement;
|
||||
}
|
||||
}
|
||||
|
||||
// Navigate to previous message
|
||||
function navigatePreviousMessage() {
|
||||
if (currentFocusedMessageIndex <= 0) {
|
||||
// Already at the first message - go to the first one
|
||||
navigateToMessage(0);
|
||||
} else {
|
||||
navigateToMessage(currentFocusedMessageIndex - 1);
|
||||
}
|
||||
}
|
||||
|
||||
// Navigate to next message
|
||||
function navigateNextMessage() {
|
||||
if (currentFocusedMessageIndex >= messageElements.length - 1) {
|
||||
// Already at the last message
|
||||
navigateToMessage(messageElements.length - 1);
|
||||
} else {
|
||||
navigateToMessage(currentFocusedMessageIndex + 1);
|
||||
}
|
||||
}
|
||||
|
||||
// Watch output history changes to scroll to bottom
|
||||
$: {
|
||||
if ($outputHistory) {
|
||||
scrollToBottom();
|
||||
// Update message elements when output history changes
|
||||
setTimeout(updateMessageElements, 0);
|
||||
}
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
// Initialize accessibility manager
|
||||
accessibilityManager = new AccessibilityManager();
|
||||
|
||||
// Focus input on mount if autofocus is true
|
||||
if (autofocus && inputElement) {
|
||||
inputElement.focus();
|
||||
}
|
||||
|
||||
// Initial scroll to bottom
|
||||
scrollToBottom();
|
||||
|
||||
// Initialize message elements for navigation
|
||||
updateMessageElements();
|
||||
});
|
||||
|
||||
// Format timestamp
|
||||
function formatTimestamp(timestamp: number): string {
|
||||
const date = new Date(timestamp);
|
||||
return date.toLocaleTimeString();
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="mud-terminal-container"
|
||||
class:dark-mode={$uiSettings.isDarkMode}
|
||||
class:high-contrast={$accessibilitySettings.highContrast}
|
||||
role="region"
|
||||
aria-label="MUD Terminal"
|
||||
tabindex="-1">
|
||||
|
||||
<!-- Screen reader announcements -->
|
||||
<div id="message-announcement" class="sr-only" aria-live="polite"></div>
|
||||
|
||||
<div class="mud-terminal-output"
|
||||
bind:this={terminalElement}
|
||||
role="log"
|
||||
aria-live="polite"
|
||||
aria-atomic="false"
|
||||
aria-relevant="additions"
|
||||
aria-label="MUD output"
|
||||
tabindex="0"
|
||||
on:keydown={handleOutputKeyDown}
|
||||
style="font-family: {$uiSettings.font}; font-size: {$accessibilitySettings.fontSize}px; line-height: {$accessibilitySettings.lineSpacing};">
|
||||
{#each $outputHistory as item (item.id)}
|
||||
<!-- For input lines, keep them as a single block -->
|
||||
{#if item.isInput}
|
||||
<div class="mud-terminal-line mud-input-line" tabindex="-1">
|
||||
{#if $uiSettings.showTimestamps}
|
||||
<span class="mud-timestamp" aria-hidden="true">[{formatTimestamp(item.timestamp)}]</span>
|
||||
{/if}
|
||||
<div class="mud-terminal-content">
|
||||
{@html item.text}
|
||||
</div>
|
||||
</div>
|
||||
<!-- For MUD output, split into individual navigable lines -->
|
||||
{:else}
|
||||
<!-- Process the content first -->
|
||||
{@const processedContent = applyHighlights(processAnsi(item.text), item.highlights || [])}
|
||||
{@const lines = splitIntoLines(processedContent)}
|
||||
|
||||
<!-- If no lines or only one line, render as is -->
|
||||
{#if lines.length <= 1}
|
||||
<div class="mud-terminal-line" tabindex="-1">
|
||||
{#if $uiSettings.showTimestamps}
|
||||
<span class="mud-timestamp" aria-hidden="true">[{formatTimestamp(item.timestamp)}]</span>
|
||||
{/if}
|
||||
<div class="mud-terminal-content">
|
||||
{@html processedContent}
|
||||
</div>
|
||||
</div>
|
||||
<!-- Otherwise render each line separately for better navigation -->
|
||||
{:else}
|
||||
{#each lines as line, lineIndex}
|
||||
<div class="mud-terminal-line mud-terminal-subline" tabindex="-1">
|
||||
{#if $uiSettings.showTimestamps && lineIndex === 0}
|
||||
<span class="mud-timestamp" aria-hidden="true">[{formatTimestamp(item.timestamp)}]</span>
|
||||
{/if}
|
||||
<div class="mud-terminal-content">
|
||||
{@html line}
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
{/if}
|
||||
{/if}
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<form class="mud-terminal-input-form" on:submit={handleSubmit} aria-label="MUD command input form">
|
||||
<input
|
||||
type="text"
|
||||
class="mud-terminal-input"
|
||||
bind:this={inputElement}
|
||||
bind:value={currentInput}
|
||||
on:keydown={handleKeyDown}
|
||||
placeholder={placeholder}
|
||||
aria-label={aria_label}
|
||||
autocomplete="off"
|
||||
spellcheck="false"
|
||||
style="font-family: {$uiSettings.font}; font-size: {$accessibilitySettings.fontSize}px;"
|
||||
/>
|
||||
<button type="submit" class="mud-terminal-submit-button" aria-label="Send command">Send</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.mud-terminal-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
width: 100%; /* Ensure full width */
|
||||
background-color: #f8f8f8;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
position: relative; /* Ensure proper stacking */
|
||||
z-index: 1; /* Ensure proper stacking */
|
||||
}
|
||||
|
||||
.mud-terminal-container.dark-mode {
|
||||
background-color: #282a36;
|
||||
border-color: #44475a;
|
||||
color: #f8f8f2;
|
||||
}
|
||||
|
||||
.mud-terminal-container.high-contrast {
|
||||
background-color: #000;
|
||||
color: #fff;
|
||||
border-color: #fff;
|
||||
}
|
||||
|
||||
.mud-terminal-output {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 10px;
|
||||
font-family: monospace;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.mud-terminal-output:focus {
|
||||
outline: 2px solid var(--color-primary, #2196f3);
|
||||
outline-offset: -2px;
|
||||
}
|
||||
|
||||
.mud-terminal-output:focus:not(:focus-visible) {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.mud-terminal-line {
|
||||
margin-bottom: 4px;
|
||||
overflow-wrap: break-word;
|
||||
padding: 2px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.mud-terminal-subline {
|
||||
margin-bottom: 1px; /* Less space between split lines */
|
||||
margin-left: 10px; /* Indent sublines to show they belong together */
|
||||
padding: 1px;
|
||||
}
|
||||
|
||||
.mud-terminal-content {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
/* Ensure <br> tags are properly rendered */
|
||||
:global(.mud-terminal-content br) {
|
||||
display: block;
|
||||
content: "";
|
||||
margin-top: 0.25em;
|
||||
}
|
||||
|
||||
.mud-input-line {
|
||||
color: #6272a4;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.dark-mode .mud-input-line {
|
||||
color: #8be9fd;
|
||||
}
|
||||
|
||||
.high-contrast .mud-input-line {
|
||||
color: #ff0;
|
||||
}
|
||||
|
||||
.mud-timestamp {
|
||||
color: #999;
|
||||
margin-right: 8px;
|
||||
font-size: 0.9em;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.dark-mode .mud-timestamp {
|
||||
color: #6272a4;
|
||||
}
|
||||
|
||||
.high-contrast .mud-timestamp {
|
||||
color: #0f0;
|
||||
}
|
||||
|
||||
.mud-terminal-input-form {
|
||||
display: flex;
|
||||
padding: 10px;
|
||||
border-top: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.dark-mode .mud-terminal-input-form {
|
||||
border-top-color: #44475a;
|
||||
}
|
||||
|
||||
.high-contrast .mud-terminal-input-form {
|
||||
border-top-color: #fff;
|
||||
}
|
||||
|
||||
.mud-terminal-input {
|
||||
flex: 1;
|
||||
padding: 8px;
|
||||
font-family: monospace;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.dark-mode .mud-terminal-input {
|
||||
background-color: #383a59;
|
||||
color: #f8f8f2;
|
||||
border-color: #44475a;
|
||||
}
|
||||
|
||||
.high-contrast .mud-terminal-input {
|
||||
background-color: #000;
|
||||
color: #fff;
|
||||
border-color: #fff;
|
||||
}
|
||||
|
||||
.mud-terminal-submit-button {
|
||||
margin-left: 10px;
|
||||
padding: 8px 16px;
|
||||
background-color: #6272a4;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.dark-mode .mud-terminal-submit-button {
|
||||
background-color: #ff79c6;
|
||||
}
|
||||
|
||||
.high-contrast .mud-terminal-submit-button {
|
||||
background-color: #fff;
|
||||
color: #000;
|
||||
border: 2px solid #fff;
|
||||
}
|
||||
|
||||
.mud-terminal-submit-button:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.mud-terminal-submit-button:active {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.sr-only {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
white-space: nowrap;
|
||||
border-width: 0;
|
||||
}
|
||||
|
||||
.focused-message {
|
||||
outline: 2px solid var(--color-primary, #2196f3);
|
||||
background-color: rgba(33, 150, 243, 0.1);
|
||||
}
|
||||
|
||||
.dark-mode .focused-message {
|
||||
background-color: rgba(255, 121, 198, 0.2); /* Use a pink highlight for dark mode */
|
||||
}
|
||||
|
||||
.high-contrast .focused-message {
|
||||
outline: 3px solid #fff;
|
||||
background-color: #444;
|
||||
}
|
||||
</style>
|
||||
363
src/lib/components/ProfileEditor.svelte
Normal file
363
src/lib/components/ProfileEditor.svelte
Normal file
@@ -0,0 +1,363 @@
|
||||
<script lang="ts">
|
||||
import { createEventDispatcher } from 'svelte';
|
||||
import type { MudProfile } from '$lib/profiles/ProfileManager';
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
|
||||
// Props
|
||||
export let profile: MudProfile;
|
||||
export let isNewProfile = false;
|
||||
|
||||
// Local state
|
||||
let localProfile = { ...profile };
|
||||
let autoLogin = { ...localProfile.autoLogin || { enabled: false, username: '', password: '', commands: [] } };
|
||||
let newCommand = '';
|
||||
let accessibilityOptions = { ...localProfile.accessibilityOptions || {
|
||||
textToSpeech: false,
|
||||
highContrast: false,
|
||||
speechRate: 1,
|
||||
speechPitch: 1,
|
||||
speechVolume: 1
|
||||
}};
|
||||
|
||||
// Handle form submission
|
||||
function handleSubmit() {
|
||||
console.log('Saving profile:', localProfile);
|
||||
// Update local profile
|
||||
localProfile.autoLogin = autoLogin;
|
||||
localProfile.accessibilityOptions = accessibilityOptions;
|
||||
|
||||
// Dispatch save event
|
||||
dispatch('save', { profile: localProfile });
|
||||
}
|
||||
|
||||
// Handle cancel
|
||||
function handleCancel() {
|
||||
dispatch('cancel');
|
||||
}
|
||||
|
||||
// Add command to auto-login commands
|
||||
function addCommand() {
|
||||
if (newCommand.trim()) {
|
||||
autoLogin.commands = [...autoLogin.commands, newCommand];
|
||||
newCommand = '';
|
||||
}
|
||||
}
|
||||
|
||||
// Remove command from auto-login commands
|
||||
function removeCommand(index: number) {
|
||||
autoLogin.commands = autoLogin.commands.filter((_, i) => i !== index);
|
||||
}
|
||||
</script>
|
||||
|
||||
<form class="profile-editor" on:submit|preventDefault={handleSubmit}>
|
||||
<h2>{isNewProfile ? 'Create New Profile' : 'Edit Profile'}</h2>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="name">Profile Name</label>
|
||||
<input type="text" id="name" bind:value={localProfile.name} required />
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="host">Host</label>
|
||||
<input type="text" id="host" bind:value={localProfile.host} required />
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="port">Port</label>
|
||||
<input type="number" id="port" bind:value={localProfile.port} min="1" max="65535" required />
|
||||
</div>
|
||||
|
||||
<div class="form-group checkbox">
|
||||
<label for="useSSL">
|
||||
<input type="checkbox" id="useSSL" bind:checked={localProfile.useSSL} />
|
||||
Use SSL
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="form-group checkbox">
|
||||
<label for="ansiColor">
|
||||
<input type="checkbox" id="ansiColor" bind:checked={localProfile.ansiColor} />
|
||||
Enable ANSI Colors
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<fieldset>
|
||||
<legend>Auto Login</legend>
|
||||
|
||||
<div class="form-group checkbox">
|
||||
<label for="autoLoginEnabled">
|
||||
<input type="checkbox" id="autoLoginEnabled" bind:checked={autoLogin.enabled} />
|
||||
Enable Auto Login
|
||||
</label>
|
||||
</div>
|
||||
|
||||
{#if autoLogin.enabled}
|
||||
<div class="form-group">
|
||||
<label for="username">Username</label>
|
||||
<input type="text" id="username" bind:value={autoLogin.username} />
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="password">Password</label>
|
||||
<input type="password" id="password" bind:value={autoLogin.password} />
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label id="commands-label">Auto-Login Commands</label>
|
||||
<div class="commands-list" role="list" aria-labelledby="commands-label">
|
||||
{#each autoLogin.commands as command, index}
|
||||
<div class="command-item" role="listitem">
|
||||
<span>{command}</span>
|
||||
<button type="button" class="btn-remove" on:click={() => removeCommand(index)} aria-label={`Remove command ${command}`}>✕</button>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<div class="command-add">
|
||||
<label for="new-command">New command</label>
|
||||
<input type="text" id="new-command" placeholder="Add command" bind:value={newCommand} />
|
||||
<button type="button" class="btn-add" on:click={addCommand}>Add</button>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</fieldset>
|
||||
|
||||
<fieldset>
|
||||
<legend>Appearance</legend>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="font">Font</label>
|
||||
<select id="font" bind:value={localProfile.font}>
|
||||
<option value="monospace">Monospace</option>
|
||||
<option value="'Courier New', monospace">Courier New</option>
|
||||
<option value="'Roboto Mono', monospace">Roboto Mono</option>
|
||||
<option value="'Source Code Pro', monospace">Source Code Pro</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="fontSize">Font Size</label>
|
||||
<input type="number" id="fontSize" bind:value={localProfile.fontSize} min="8" max="24" />
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="theme">Theme</label>
|
||||
<select id="theme" bind:value={localProfile.theme}>
|
||||
<option value="light">Light</option>
|
||||
<option value="dark">Dark</option>
|
||||
<option value="dracula">Dracula</option>
|
||||
<option value="solarized">Solarized</option>
|
||||
</select>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<fieldset>
|
||||
<legend>Accessibility</legend>
|
||||
|
||||
<div class="form-group checkbox">
|
||||
<label for="textToSpeech">
|
||||
<input type="checkbox" id="textToSpeech" bind:checked={accessibilityOptions.textToSpeech} />
|
||||
Enable Text-to-Speech
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="form-group checkbox">
|
||||
<label for="highContrast">
|
||||
<input type="checkbox" id="highContrast" bind:checked={accessibilityOptions.highContrast} />
|
||||
High Contrast Mode
|
||||
</label>
|
||||
</div>
|
||||
|
||||
{#if accessibilityOptions.textToSpeech}
|
||||
<div class="form-group">
|
||||
<label for="speechRate">Speech Rate</label>
|
||||
<input type="range" id="speechRate" bind:value={accessibilityOptions.speechRate} min="0.5" max="2" step="0.1" />
|
||||
<span class="range-value">{accessibilityOptions.speechRate.toFixed(1)}</span>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="speechPitch">Speech Pitch</label>
|
||||
<input type="range" id="speechPitch" bind:value={accessibilityOptions.speechPitch} min="0.5" max="2" step="0.1" />
|
||||
<span class="range-value">{accessibilityOptions.speechPitch.toFixed(1)}</span>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="speechVolume">Speech Volume</label>
|
||||
<input type="range" id="speechVolume" bind:value={accessibilityOptions.speechVolume} min="0.1" max="1" step="0.1" />
|
||||
<span class="range-value">{accessibilityOptions.speechVolume.toFixed(1)}</span>
|
||||
</div>
|
||||
{/if}
|
||||
</fieldset>
|
||||
|
||||
<div class="form-actions">
|
||||
<button type="button" class="btn-cancel" on:click={handleCancel}>Cancel</button>
|
||||
<button type="submit" class="btn-save">Save</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<style>
|
||||
.profile-editor {
|
||||
padding: 20px;
|
||||
max-width: 100%;
|
||||
margin: 0;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 20px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
font-weight: bold;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
input[type="text"],
|
||||
input[type="number"],
|
||||
input[type="password"],
|
||||
select {
|
||||
width: 100%;
|
||||
padding: 8px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.checkbox {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.checkbox label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-weight: normal;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.checkbox input {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
padding: 15px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
legend {
|
||||
padding: 0 10px;
|
||||
font-weight: bold;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.commands-list {
|
||||
margin-bottom: 10px;
|
||||
max-height: 150px;
|
||||
overflow-y: auto;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.command-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 5px;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
.command-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.command-add {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.command-add label {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
margin: -1px;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.btn-add {
|
||||
background-color: #4caf50;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 8px 12px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.btn-remove {
|
||||
background-color: #f44336;
|
||||
color: white;
|
||||
border: none;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.form-actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 10px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.btn-cancel {
|
||||
background-color: #f0f0f0;
|
||||
border: 1px solid #ddd;
|
||||
padding: 8px 16px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.btn-save {
|
||||
background-color: #2196f3;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 8px 16px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.btn-cancel:hover, .btn-add:hover, .btn-save:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
input[type="range"] {
|
||||
width: 80%;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.range-value {
|
||||
display: inline-block;
|
||||
width: 15%;
|
||||
text-align: right;
|
||||
color: #555;
|
||||
}
|
||||
</style>
|
||||
141
src/lib/components/PwaUpdater.svelte
Normal file
141
src/lib/components/PwaUpdater.svelte
Normal file
@@ -0,0 +1,141 @@
|
||||
<script lang="ts">
|
||||
import { onMount } from 'svelte';
|
||||
|
||||
let updateAvailable = false;
|
||||
let registration: ServiceWorkerRegistration | null = null;
|
||||
let offlineReady = false;
|
||||
|
||||
function closeUpdateNotification() {
|
||||
updateAvailable = false;
|
||||
}
|
||||
|
||||
function closeOfflineNotification() {
|
||||
offlineReady = false;
|
||||
}
|
||||
|
||||
function updateApp() {
|
||||
if (registration && registration.waiting) {
|
||||
// Send a message to the waiting service worker
|
||||
registration.waiting.postMessage({ type: 'SKIP_WAITING' });
|
||||
}
|
||||
window.location.reload();
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
if ('serviceWorker' in navigator) {
|
||||
// Handle service worker update detection
|
||||
navigator.serviceWorker.ready.then(reg => {
|
||||
registration = reg;
|
||||
|
||||
// Initial installation
|
||||
if (reg.active) {
|
||||
offlineReady = true;
|
||||
setTimeout(() => { offlineReady = false; }, 3000); // Auto-hide after 3 seconds
|
||||
}
|
||||
|
||||
// Check for updates
|
||||
reg.addEventListener('updatefound', () => {
|
||||
const newWorker = reg.installing;
|
||||
if (!newWorker) return;
|
||||
|
||||
newWorker.addEventListener('statechange', () => {
|
||||
if (newWorker.state === 'installed' && navigator.serviceWorker.controller) {
|
||||
updateAvailable = true;
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
// Listen for controller change (after skipWaiting)
|
||||
let refreshing = false;
|
||||
navigator.serviceWorker.addEventListener('controllerchange', () => {
|
||||
if (refreshing) return;
|
||||
refreshing = true;
|
||||
window.location.reload();
|
||||
});
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
{#if updateAvailable}
|
||||
<div class="pwa-update-notification">
|
||||
<div class="notification-content">
|
||||
<p>A new version of SvelteMUD is available!</p>
|
||||
<div class="notification-actions">
|
||||
<button class="update-button" on:click={updateApp}>Update Now</button>
|
||||
<button class="close-button" on:click={closeUpdateNotification}>Later</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if offlineReady}
|
||||
<div class="pwa-offline-notification">
|
||||
<div class="notification-content">
|
||||
<p>SvelteMUD is now available offline!</p>
|
||||
<button class="close-button" on:click={closeOfflineNotification}>Close</button>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
.pwa-update-notification, .pwa-offline-notification {
|
||||
position: fixed;
|
||||
bottom: 20px;
|
||||
right: 20px;
|
||||
background-color: #282a36;
|
||||
color: #f8f8f2;
|
||||
padding: 15px;
|
||||
border-radius: 5px;
|
||||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
|
||||
z-index: 1000;
|
||||
max-width: 300px;
|
||||
animation: slide-in 0.3s ease-out;
|
||||
}
|
||||
|
||||
.pwa-offline-notification {
|
||||
background-color: #50fa7b;
|
||||
color: #282a36;
|
||||
}
|
||||
|
||||
.notification-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.notification-actions {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
button {
|
||||
padding: 8px 12px;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.update-button {
|
||||
background-color: #ff79c6;
|
||||
color: #282a36;
|
||||
}
|
||||
|
||||
.close-button {
|
||||
background-color: transparent;
|
||||
border: 1px solid currentColor;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
@keyframes slide-in {
|
||||
from {
|
||||
transform: translateY(100px);
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
transform: translateY(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
58
src/lib/components/SimpleModal.svelte
Normal file
58
src/lib/components/SimpleModal.svelte
Normal file
@@ -0,0 +1,58 @@
|
||||
<script>
|
||||
export let show = true; // Force modal to be visible by default
|
||||
|
||||
function closeModal() {
|
||||
show = false;
|
||||
}
|
||||
|
||||
function stopPropagation(e) {
|
||||
e.stopPropagation();
|
||||
}
|
||||
|
||||
function handleKeydown(e) {
|
||||
if (e.key === 'Escape') {
|
||||
closeModal();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
{#if show}
|
||||
<div
|
||||
class="modal-backdrop"
|
||||
on:click={closeModal}
|
||||
on:keydown={handleKeydown}
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
>
|
||||
<div
|
||||
class="modal-content"
|
||||
on:click={stopPropagation}
|
||||
on:keydown={handleKeydown}
|
||||
role="document"
|
||||
>
|
||||
<slot></slot>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
.modal-backdrop {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.6);
|
||||
z-index: 1000;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
background-color: white;
|
||||
max-width: 90%;
|
||||
max-height: 90%;
|
||||
overflow: auto;
|
||||
}
|
||||
</style>
|
||||
104
src/lib/components/SimpleProfileEditor.svelte
Normal file
104
src/lib/components/SimpleProfileEditor.svelte
Normal file
@@ -0,0 +1,104 @@
|
||||
<script>
|
||||
import { createEventDispatcher } from 'svelte';
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
|
||||
// Simple default profile
|
||||
export let profile = {
|
||||
id: `profile-${Date.now()}`,
|
||||
name: 'New Profile',
|
||||
host: 'mud.example.com',
|
||||
port: 23,
|
||||
useSSL: false,
|
||||
ansiColor: true
|
||||
};
|
||||
|
||||
function handleSubmit() {
|
||||
console.log('Saving profile:', profile);
|
||||
dispatch('save', { profile });
|
||||
}
|
||||
|
||||
function handleCancel() {
|
||||
dispatch('cancel');
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="simple-editor">
|
||||
<h2>Create New Profile</h2>
|
||||
|
||||
<div class="form-row">
|
||||
<label for="name">Name:</label>
|
||||
<input type="text" id="name" bind:value={profile.name} />
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<label for="host">Host:</label>
|
||||
<input type="text" id="host" bind:value={profile.host} />
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<label for="port">Port:</label>
|
||||
<input type="number" id="port" bind:value={profile.port} />
|
||||
</div>
|
||||
|
||||
<div class="buttons">
|
||||
<button type="button" on:click={handleCancel}>Cancel</button>
|
||||
<button type="button" on:click={handleSubmit}>Save</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.simple-editor {
|
||||
background: white;
|
||||
padding: 20px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
||||
width: 400px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-top: 0;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.form-row {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
input {
|
||||
width: 100%;
|
||||
padding: 8px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.buttons {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 10px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
button {
|
||||
padding: 8px 16px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button:first-child {
|
||||
background: #f5f5f5;
|
||||
border: 1px solid #ddd;
|
||||
}
|
||||
|
||||
button:last-child {
|
||||
background: #2196f3;
|
||||
color: white;
|
||||
border: none;
|
||||
}
|
||||
</style>
|
||||
360
src/lib/components/TriggerEditor.svelte
Normal file
360
src/lib/components/TriggerEditor.svelte
Normal file
@@ -0,0 +1,360 @@
|
||||
<script lang="ts">
|
||||
import { createEventDispatcher } from 'svelte';
|
||||
import type { Trigger } from '$lib/triggers/TriggerSystem';
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
|
||||
// Props
|
||||
export let trigger: Trigger | null = null;
|
||||
export let isNew = false;
|
||||
|
||||
// Local state
|
||||
let localTrigger: Trigger = trigger ? { ...trigger } : {
|
||||
id: `trigger-${Date.now()}-${Math.random().toString(36).substring(2, 9)}`,
|
||||
name: '',
|
||||
pattern: '',
|
||||
isRegex: false,
|
||||
isEnabled: true,
|
||||
soundFile: '',
|
||||
sendText: '',
|
||||
highlightColor: '',
|
||||
priority: 0
|
||||
};
|
||||
|
||||
// Available sounds
|
||||
let availableSounds: string[] = [
|
||||
'alert.mp3',
|
||||
'beep.mp3',
|
||||
'chime.mp3',
|
||||
'ding.mp3',
|
||||
'notify.mp3'
|
||||
];
|
||||
|
||||
// Track if we're using a built-in sound or custom URL
|
||||
let soundType = localTrigger.soundFile?.startsWith('http') ? 'url' : 'preloaded';
|
||||
|
||||
// Watch for changes in soundType
|
||||
$: if (soundType === 'preloaded' && localTrigger.soundFile?.startsWith('http')) {
|
||||
localTrigger.soundFile = '';
|
||||
}
|
||||
|
||||
// Handle form submission
|
||||
function handleSubmit() {
|
||||
dispatch('save', { trigger: localTrigger });
|
||||
}
|
||||
|
||||
// Handle cancel
|
||||
function handleCancel() {
|
||||
dispatch('cancel');
|
||||
}
|
||||
|
||||
// Test the regex pattern
|
||||
let testInput = '';
|
||||
let testResult: RegExpMatchArray | null = null;
|
||||
let testError: string | null = null;
|
||||
|
||||
function testPattern() {
|
||||
testError = null;
|
||||
testResult = null;
|
||||
|
||||
if (!localTrigger.pattern || !testInput) return;
|
||||
|
||||
if (localTrigger.isRegex) {
|
||||
try {
|
||||
const regex = new RegExp(localTrigger.pattern, 'g');
|
||||
testResult = testInput.match(regex);
|
||||
} catch (error) {
|
||||
testError = `Invalid regex pattern: ${error}`;
|
||||
}
|
||||
} else {
|
||||
testResult = testInput.includes(localTrigger.pattern) ? [localTrigger.pattern] : null;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="trigger-editor">
|
||||
<h2>{isNew ? 'Create New Trigger' : 'Edit Trigger'}</h2>
|
||||
|
||||
<form on:submit|preventDefault={handleSubmit}>
|
||||
<div class="form-group">
|
||||
<label for="name">Trigger Name</label>
|
||||
<input type="text" id="name" bind:value={localTrigger.name} required />
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="pattern">Pattern</label>
|
||||
<input type="text" id="pattern" bind:value={localTrigger.pattern} required />
|
||||
</div>
|
||||
|
||||
<div class="form-group checkbox">
|
||||
<label for="isRegex">
|
||||
<input type="checkbox" id="isRegex" bind:checked={localTrigger.isRegex} />
|
||||
Use Regular Expression
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="form-group checkbox">
|
||||
<label for="isEnabled">
|
||||
<input type="checkbox" id="isEnabled" bind:checked={localTrigger.isEnabled} />
|
||||
Enable Trigger
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="priority">Priority</label>
|
||||
<input type="number" id="priority" bind:value={localTrigger.priority} min="0" max="100" />
|
||||
<small>Higher values trigger first</small>
|
||||
</div>
|
||||
|
||||
<fieldset>
|
||||
<legend>Actions</legend>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="soundType">Sound Type</label>
|
||||
<select id="soundType" bind:value={soundType}>
|
||||
<option value="preloaded">Built-in Sound</option>
|
||||
<option value="url">Custom URL</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{#if soundType === 'preloaded'}
|
||||
<div class="form-group">
|
||||
<label for="soundFile">Play Sound</label>
|
||||
<select id="soundFile" bind:value={localTrigger.soundFile}>
|
||||
<option value="">None</option>
|
||||
{#each availableSounds as sound}
|
||||
<option value={sound}>{sound}</option>
|
||||
{/each}
|
||||
</select>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="form-group">
|
||||
<label for="soundUrl">Sound URL</label>
|
||||
<input type="text" id="soundUrl" bind:value={localTrigger.soundFile} placeholder="https://example.com/sound.mp3" />
|
||||
<small>Enter a full URL to an audio file (MP3, WAV, OGG)</small>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div class="form-group">
|
||||
<label for="sendText">Send Text</label>
|
||||
<input type="text" id="sendText" bind:value={localTrigger.sendText} />
|
||||
{#if localTrigger.isRegex}
|
||||
<small>Use $1, $2, etc. to reference captured groups</small>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="highlightColor">Highlight Color</label>
|
||||
<input type="color" id="highlightColor" bind:value={localTrigger.highlightColor} />
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="action">Custom Action (JavaScript)</label>
|
||||
<textarea id="action" bind:value={localTrigger.action} rows="5" placeholder="// JavaScript code to run when trigger matches"></textarea>
|
||||
<small>Available variables: text, matches</small>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<fieldset>
|
||||
<legend>Pattern Tester</legend>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="testInput">Test Input</label>
|
||||
<textarea id="testInput" bind:value={testInput} rows="3" placeholder="Enter sample text to test your pattern"></textarea>
|
||||
</div>
|
||||
|
||||
<button type="button" class="btn-test" on:click={testPattern}>Test Pattern</button>
|
||||
|
||||
{#if testError}
|
||||
<div class="test-error">
|
||||
{testError}
|
||||
</div>
|
||||
{:else if testResult !== null}
|
||||
<div class="test-result">
|
||||
<strong>Result:</strong>
|
||||
{#if testResult.length > 0}
|
||||
<span class="match-success">Matched {testResult.length} {testResult.length === 1 ? 'time' : 'times'}</span>
|
||||
<div class="match-list">
|
||||
{#each testResult as match, index}
|
||||
<div class="match-item">
|
||||
<strong>Match {index + 1}:</strong> {match}
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
{:else}
|
||||
<span class="match-fail">No matches found</span>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
</fieldset>
|
||||
|
||||
<div class="form-actions">
|
||||
<button type="button" class="btn-cancel" on:click={handleCancel}>Cancel</button>
|
||||
<button type="submit" class="btn-save">Save Trigger</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.trigger-editor {
|
||||
background-color: #fff;
|
||||
padding: 20px;
|
||||
border-radius: 5px;
|
||||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
||||
max-width: 700px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 20px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
font-weight: bold;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
input[type="text"],
|
||||
input[type="number"],
|
||||
select,
|
||||
textarea {
|
||||
width: 100%;
|
||||
padding: 8px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
textarea {
|
||||
resize: vertical;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
input[type="color"] {
|
||||
width: 50px;
|
||||
height: 30px;
|
||||
padding: 0;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.checkbox {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.checkbox label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-weight: normal;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.checkbox input {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
small {
|
||||
display: block;
|
||||
color: #777;
|
||||
margin-top: 3px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
padding: 15px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
legend {
|
||||
padding: 0 10px;
|
||||
font-weight: bold;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.test-error {
|
||||
margin-top: 10px;
|
||||
padding: 10px;
|
||||
background-color: #ffebee;
|
||||
color: #c62828;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.test-result {
|
||||
margin-top: 10px;
|
||||
padding: 10px;
|
||||
background-color: #f5f5f5;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.match-success {
|
||||
color: #2e7d32;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.match-fail {
|
||||
color: #c62828;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.match-list {
|
||||
margin-top: 10px;
|
||||
padding: 10px;
|
||||
background-color: #fff;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
max-height: 200px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.match-item {
|
||||
padding: 5px 0;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
.match-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.form-actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 10px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.btn-cancel {
|
||||
background-color: #f0f0f0;
|
||||
border: 1px solid #ddd;
|
||||
padding: 8px 16px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.btn-save, .btn-test {
|
||||
background-color: #2196f3;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 8px 16px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.btn-test {
|
||||
background-color: #4caf50;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.btn-cancel:hover, .btn-save:hover, .btn-test:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
</style>
|
||||
456
src/lib/connection/MudConnection.ts
Normal file
456
src/lib/connection/MudConnection.ts
Normal file
@@ -0,0 +1,456 @@
|
||||
import { EventEmitter } from '$lib/utils/EventEmitter';
|
||||
import type { GmcpHandler } from '$lib/gmcp/GmcpHandler';
|
||||
|
||||
// IAC codes for telnet negotiation
|
||||
enum TelnetCommand {
|
||||
IAC = 255, // Interpret As Command
|
||||
DONT = 254,
|
||||
DO = 253,
|
||||
WONT = 252,
|
||||
WILL = 251,
|
||||
SB = 250, // Subnegotiation Begin
|
||||
SE = 240, // Subnegotiation End
|
||||
GMCP = 201, // Generic MUD Communication Protocol
|
||||
}
|
||||
|
||||
interface MudConnectionOptions {
|
||||
host: string;
|
||||
port: number;
|
||||
gmcpHandler?: GmcpHandler;
|
||||
useSSL?: boolean;
|
||||
}
|
||||
|
||||
export class MudConnection extends EventEmitter {
|
||||
private host: string;
|
||||
private port: number;
|
||||
private useSSL: boolean;
|
||||
private webSocket: WebSocket | null = null;
|
||||
private gmcpHandler: GmcpHandler | null = null;
|
||||
private buffer: number[] = [];
|
||||
private connected: boolean = false;
|
||||
private negotiationBuffer: number[] = [];
|
||||
private isInIAC: boolean = false;
|
||||
private inSubnegotiation: boolean = false;
|
||||
private simulationMode: boolean = false; // Disable simulation mode to use real connections
|
||||
|
||||
constructor(options: MudConnectionOptions) {
|
||||
super();
|
||||
this.host = options.host;
|
||||
this.port = options.port;
|
||||
this.useSSL = options.useSSL || false;
|
||||
this.gmcpHandler = options.gmcpHandler || null;
|
||||
}
|
||||
|
||||
/**
|
||||
* Connect to the MUD server
|
||||
*/
|
||||
public connect(): void {
|
||||
// For development/testing purposes, we'll use a simulated connection
|
||||
if (this.simulationMode) {
|
||||
this.connectSimulated();
|
||||
return;
|
||||
}
|
||||
|
||||
// Connect through the standalone WebSocket server on port 3001
|
||||
const wsProtocol = window.location.protocol === 'https:' ? 'wss' : 'ws';
|
||||
const wsHost = `${window.location.hostname}:3001`;
|
||||
|
||||
const url = `${wsProtocol}://${wsHost}/mud-ws?host=${encodeURIComponent(this.host)}&port=${this.port}&useSSL=${this.useSSL}`;
|
||||
console.log('Connecting to WebSocket server:', url);
|
||||
|
||||
this.webSocket = new WebSocket(url);
|
||||
|
||||
this.webSocket.binaryType = 'arraybuffer';
|
||||
|
||||
this.webSocket.onopen = () => {
|
||||
this.connected = true;
|
||||
this.emit('connected');
|
||||
|
||||
// Send GMCP negotiation upon connection
|
||||
if (this.gmcpHandler) {
|
||||
this.sendIAC(TelnetCommand.WILL, TelnetCommand.GMCP);
|
||||
}
|
||||
};
|
||||
|
||||
this.webSocket.onclose = () => {
|
||||
this.connected = false;
|
||||
this.emit('disconnected');
|
||||
};
|
||||
|
||||
this.webSocket.onerror = (error) => {
|
||||
console.error('WebSocket error:', error);
|
||||
this.emit('error', `WebSocket error: Connection to ${this.host}:${this.port} failed. Please check your settings and ensure the MUD server is running.`);
|
||||
};
|
||||
|
||||
this.webSocket.onmessage = (event) => {
|
||||
if (event.data instanceof ArrayBuffer) {
|
||||
// Binary data
|
||||
this.handleIncomingData(new Uint8Array(event.data));
|
||||
} else if (typeof event.data === 'string') {
|
||||
// Text data
|
||||
this.emit('received', event.data);
|
||||
} else if (event.data instanceof Blob) {
|
||||
// Blob data (sometimes WebSockets send this instead of ArrayBuffer)
|
||||
const reader = new FileReader();
|
||||
reader.onload = () => {
|
||||
if (reader.result instanceof ArrayBuffer) {
|
||||
this.handleIncomingData(new Uint8Array(reader.result));
|
||||
}
|
||||
};
|
||||
reader.readAsArrayBuffer(event.data);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Connect to a simulated MUD server for testing
|
||||
*/
|
||||
private connectSimulated(): void {
|
||||
console.log('Using simulated MUD connection');
|
||||
|
||||
// Simulate connection delay
|
||||
setTimeout(() => {
|
||||
this.connected = true;
|
||||
this.emit('connected');
|
||||
|
||||
// Send welcome message
|
||||
const welcomeMessage = `
|
||||
============================================================
|
||||
| Welcome to ${this.host} |
|
||||
============================================================
|
||||
|
||||
This is a simulated connection for testing purposes.
|
||||
Commands you type will be echoed back to the terminal.
|
||||
|
||||
Type 'help' for a list of available commands.
|
||||
Type 'look' to see the current room.
|
||||
`;
|
||||
setTimeout(() => {
|
||||
this.emit('received', welcomeMessage);
|
||||
}, 500);
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
/**
|
||||
* Send text to the MUD server
|
||||
*/
|
||||
public send(text: string): void {
|
||||
if (!this.connected) {
|
||||
throw new Error('Not connected to MUD server');
|
||||
}
|
||||
|
||||
// In simulation mode, generate appropriate responses
|
||||
if (this.simulationMode) {
|
||||
this.handleSimulatedCommand(text);
|
||||
return;
|
||||
}
|
||||
|
||||
if (!this.webSocket) {
|
||||
throw new Error('WebSocket not initialized');
|
||||
}
|
||||
|
||||
// Check if the WebSocket is in a valid state for sending
|
||||
if (this.webSocket.readyState !== WebSocket.OPEN) {
|
||||
this.emit('error', `Cannot send message: WebSocket is not open (state: ${this.webSocket.readyState})`);
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
// Append newline to the text
|
||||
const data = new TextEncoder().encode(text + '\n');
|
||||
this.webSocket.send(data);
|
||||
|
||||
// Emit the data for possible triggers
|
||||
this.emit('sent', text);
|
||||
} catch (error) {
|
||||
console.error('Error sending data:', error);
|
||||
this.emit('error', `Failed to send message: ${error.message}`);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Handle commands in simulation mode
|
||||
*/
|
||||
private handleSimulatedCommand(command: string): void {
|
||||
// Emit that we sent the command
|
||||
this.emit('sent', command);
|
||||
|
||||
// Process command with a small delay to simulate network latency
|
||||
setTimeout(() => {
|
||||
const cmd = command.trim().toLowerCase();
|
||||
|
||||
if (cmd === 'help') {
|
||||
this.emit('received', `
|
||||
Available commands:
|
||||
- help: Show this help message
|
||||
- look: Look at the current room
|
||||
- say <message>: Say something
|
||||
- who: Show who's online
|
||||
- inventory: Show your inventory
|
||||
- quit: Disconnect
|
||||
`);
|
||||
} else if (cmd === 'look') {
|
||||
this.emit('received', `
|
||||
The Testing Room
|
||||
================
|
||||
You are in a simple testing room. The walls are white and featureless,
|
||||
with a single door to the north. A sign on the wall reads "Simulation Mode".
|
||||
|
||||
Obvious exits: north
|
||||
|
||||
You see a test object here.
|
||||
`);
|
||||
} else if (cmd.startsWith('say ')) {
|
||||
const message = command.substring(4);
|
||||
this.emit('received', `You say, "${message}"\n`);
|
||||
} else if (cmd === 'who') {
|
||||
this.emit('received', `
|
||||
Players online:
|
||||
- TestPlayer1 (Idle)
|
||||
- TestPlayer2 (AFK)
|
||||
- You
|
||||
|
||||
Total: 3 players
|
||||
`);
|
||||
} else if (cmd === 'inventory' || cmd === 'i') {
|
||||
this.emit('received', `
|
||||
You are carrying:
|
||||
- a test item
|
||||
- a notebook
|
||||
- some coins (15)
|
||||
`);
|
||||
} else if (cmd === 'quit' || cmd === 'exit') {
|
||||
this.emit('received', 'Goodbye! Thanks for testing.\n');
|
||||
setTimeout(() => this.disconnect(), 1000);
|
||||
} else {
|
||||
this.emit('received', `Unknown command: ${command}\nType 'help' for a list of commands.\n`);
|
||||
}
|
||||
}, 200);
|
||||
}
|
||||
|
||||
/**
|
||||
* Disconnect from the MUD server
|
||||
*/
|
||||
public disconnect(): void {
|
||||
if (this.simulationMode) {
|
||||
this.connected = false;
|
||||
this.emit('disconnected');
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.webSocket) {
|
||||
this.webSocket.close();
|
||||
this.webSocket = null;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Handle incoming data from the MUD server
|
||||
*/
|
||||
private handleIncomingData(data: Uint8Array): void {
|
||||
console.log(`Received ${data.length} bytes from server`);
|
||||
|
||||
// Quickly check if we need to handle telnet negotiation
|
||||
let containsIAC = false;
|
||||
for (let i = 0; i < data.length; i++) {
|
||||
if (data[i] === TelnetCommand.IAC) {
|
||||
containsIAC = true;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
// Fast path if no IAC codes
|
||||
if (!containsIAC && !this.isInIAC) {
|
||||
const text = new TextDecoder().decode(data);
|
||||
this.emit('received', text);
|
||||
return;
|
||||
}
|
||||
|
||||
// Debug: Log the raw bytes if IAC is present
|
||||
if (containsIAC) {
|
||||
const hexData = Array.from(data).map(b => b.toString(16).padStart(2, '0')).join(' ');
|
||||
console.log(`Data with IAC: ${hexData}`);
|
||||
}
|
||||
|
||||
// Process each byte in the incoming data
|
||||
for (let i = 0; i < data.length; i++) {
|
||||
const byte = data[i];
|
||||
|
||||
if (this.isInIAC) {
|
||||
// Add byte to negotiation buffer
|
||||
this.negotiationBuffer.push(byte);
|
||||
|
||||
// Check for special sequences
|
||||
if (this.inSubnegotiation) {
|
||||
// Inside subnegotiation - look for IAC SE
|
||||
if (byte === TelnetCommand.SE &&
|
||||
this.negotiationBuffer.length > 0 &&
|
||||
this.negotiationBuffer[this.negotiationBuffer.length - 2] === TelnetCommand.IAC) {
|
||||
|
||||
console.log('FOUND IAC SE SEQUENCE - End of subnegotiation');
|
||||
|
||||
// Process the complete subnegotiation
|
||||
this.handleCompleteSubnegotiation();
|
||||
|
||||
// Reset state
|
||||
this.isInIAC = false;
|
||||
this.inSubnegotiation = false;
|
||||
this.negotiationBuffer = [];
|
||||
}
|
||||
} else if (this.negotiationBuffer.length === 2) {
|
||||
// After IAC, check what command it is
|
||||
if (byte === TelnetCommand.SB) {
|
||||
// Start of subnegotiation
|
||||
this.inSubnegotiation = true;
|
||||
console.log('Started subnegotiation - waiting for option code');
|
||||
} else if (byte === TelnetCommand.WILL || byte === TelnetCommand.DO) {
|
||||
// Need one more byte for option
|
||||
console.log(`Telnet WILL/DO command, waiting for option`);
|
||||
} else {
|
||||
// Simple 3-byte command
|
||||
this.processSimpleTelnetCommand();
|
||||
this.isInIAC = false;
|
||||
this.negotiationBuffer = [];
|
||||
}
|
||||
} else if (this.negotiationBuffer.length === 3 && !this.inSubnegotiation) {
|
||||
// Complete 3-byte command like IAC WILL X or IAC DO X
|
||||
this.processSimpleTelnetCommand();
|
||||
this.isInIAC = false;
|
||||
this.negotiationBuffer = [];
|
||||
}
|
||||
} else if (byte === TelnetCommand.IAC) {
|
||||
// Start of telnet command
|
||||
this.isInIAC = true;
|
||||
this.negotiationBuffer = [byte];
|
||||
console.log('Found IAC - start of telnet command');
|
||||
} else {
|
||||
// Normal data byte, add to buffer
|
||||
this.buffer.push(byte);
|
||||
}
|
||||
}
|
||||
|
||||
// Process any complete text in the buffer
|
||||
if (this.buffer.length > 0) {
|
||||
const text = new TextDecoder().decode(new Uint8Array(this.buffer));
|
||||
this.buffer = [];
|
||||
|
||||
// Emit the received text for display and trigger processing
|
||||
this.emit('received', text);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Process a simple telnet command (3 bytes: IAC CMD OPTION)
|
||||
*/
|
||||
private processSimpleTelnetCommand(): void {
|
||||
try {
|
||||
const [iac, command, option] = this.negotiationBuffer;
|
||||
|
||||
console.log(`Processing telnet command: IAC(${iac}) ${command} ${option}`);
|
||||
|
||||
// Handle specific commands
|
||||
if ((command === TelnetCommand.WILL || command === TelnetCommand.DO) && option === TelnetCommand.GMCP) {
|
||||
console.log('Server indicates WILL/DO GMCP, responding with DO GMCP');
|
||||
// Server wants to use GMCP, we'll respond with IAC DO GMCP
|
||||
this.sendIAC(TelnetCommand.DO, TelnetCommand.GMCP);
|
||||
|
||||
// And request Core.Hello
|
||||
if (this.gmcpHandler) {
|
||||
console.log('Requesting GMCP capabilities');
|
||||
this.gmcpHandler.requestCapabilities();
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error processing telnet command:', error);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Handle a complete telnet subnegotiation sequence
|
||||
*/
|
||||
private handleCompleteSubnegotiation(): void {
|
||||
try {
|
||||
console.log(`Handling subnegotiation, buffer length: ${this.negotiationBuffer.length}`);
|
||||
|
||||
// Check if this is a GMCP subnegotiation
|
||||
// IAC SB GMCP ... IAC SE
|
||||
// Indexes: 0 1 2 ... -2 -1
|
||||
if (this.negotiationBuffer.length >= 5 && this.negotiationBuffer[2] === TelnetCommand.GMCP) {
|
||||
console.log('Processing complete GMCP subnegotiation');
|
||||
|
||||
try {
|
||||
// Extract the GMCP data (skip IAC SB GMCP, and the final IAC SE)
|
||||
const gmcpData = this.negotiationBuffer.slice(3, -2);
|
||||
const gmcpText = new TextDecoder().decode(new Uint8Array(gmcpData));
|
||||
|
||||
console.log('RECEIVED GMCP DATA:', gmcpText);
|
||||
|
||||
// Process the GMCP message
|
||||
if (this.gmcpHandler) {
|
||||
setTimeout(() => {
|
||||
try {
|
||||
console.log('Passing GMCP to handler:', gmcpText);
|
||||
this.gmcpHandler?.handleGmcpMessage(gmcpText);
|
||||
} catch (error) {
|
||||
console.error('Error in GMCP handler:', error);
|
||||
}
|
||||
}, 0);
|
||||
} else {
|
||||
console.warn('No GMCP handler available for message:', gmcpText);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error processing GMCP data:', error, 'Buffer:', this.negotiationBuffer);
|
||||
}
|
||||
} else {
|
||||
console.log(`Non-GMCP subnegotiation complete, option: ${this.negotiationBuffer[2]}`);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error handling subnegotiation:', error);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Send a telnet IAC sequence
|
||||
*/
|
||||
private sendIAC(command: TelnetCommand, option: TelnetCommand): void {
|
||||
if (!this.connected || !this.webSocket) {
|
||||
return;
|
||||
}
|
||||
|
||||
const data = new Uint8Array([TelnetCommand.IAC, command, option]);
|
||||
this.webSocket.send(data);
|
||||
}
|
||||
|
||||
/**
|
||||
* Send a GMCP message
|
||||
*/
|
||||
public sendGmcp(module: string, data: any): void {
|
||||
if (!this.connected) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.simulationMode) {
|
||||
console.log(`GMCP send (simulated): ${module}`, data);
|
||||
return;
|
||||
}
|
||||
|
||||
if (!this.webSocket) {
|
||||
return;
|
||||
}
|
||||
|
||||
const gmcpString = `${module} ${JSON.stringify(data)}`;
|
||||
const gmcpData = new TextEncoder().encode(gmcpString);
|
||||
|
||||
// Create the IAC SB GMCP <data> IAC SE sequence
|
||||
const telnetSequence = new Uint8Array([
|
||||
TelnetCommand.IAC,
|
||||
TelnetCommand.SB,
|
||||
TelnetCommand.GMCP,
|
||||
...gmcpData,
|
||||
TelnetCommand.IAC,
|
||||
TelnetCommand.SE
|
||||
]);
|
||||
|
||||
this.webSocket.send(telnetSequence);
|
||||
}
|
||||
}
|
||||
123
src/lib/gmcp/GmcpHandler.ts
Normal file
123
src/lib/gmcp/GmcpHandler.ts
Normal file
@@ -0,0 +1,123 @@
|
||||
import { EventEmitter } from '$lib/utils/EventEmitter';
|
||||
import { logGmcpMessage } from '$lib/stores/mudStore';
|
||||
import type { GmcpPackageHandler } from './packages/GmcpPackageHandler';
|
||||
import { ClientMediaPackage } from './packages/ClientMediaPackage';
|
||||
import { ClientKeystrokePackage } from './packages/ClientKeystrokePackage';
|
||||
import { CorePackage } from './packages/CorePackage';
|
||||
|
||||
export type GmcpPackage = {
|
||||
name: string;
|
||||
version: string;
|
||||
};
|
||||
|
||||
export class GmcpHandler extends EventEmitter {
|
||||
private supportedPackages: Map<string, GmcpPackage> = new Map();
|
||||
private receivedCapabilities: boolean = false;
|
||||
private packageHandlers: Map<string, GmcpPackageHandler> = new Map();
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
|
||||
// Register and initialize package handlers
|
||||
this.registerPackageHandler(new CorePackage());
|
||||
this.registerPackageHandler(new ClientMediaPackage());
|
||||
this.registerPackageHandler(new ClientKeystrokePackage());
|
||||
}
|
||||
|
||||
/**
|
||||
* Register a GMCP package handler
|
||||
*/
|
||||
public registerPackageHandler(handler: GmcpPackageHandler): void {
|
||||
// Initialize the handler with this event emitter
|
||||
handler.initialize(this);
|
||||
|
||||
// Register the package
|
||||
this.registerPackage(handler.packageName, handler.version);
|
||||
|
||||
// Store the handler
|
||||
this.packageHandlers.set(handler.packageName, handler);
|
||||
|
||||
console.log(`Registered GMCP package handler: ${handler.packageName} v${handler.version}`);
|
||||
}
|
||||
|
||||
/**
|
||||
* Register a GMCP package that the client supports
|
||||
*/
|
||||
public registerPackage(name: string, version: string): void {
|
||||
this.supportedPackages.set(name, { name, version });
|
||||
}
|
||||
|
||||
/**
|
||||
* Request capabilities from the server
|
||||
*/
|
||||
public requestCapabilities(): void {
|
||||
this.emit('sendGmcp', 'Core.Hello', {
|
||||
client: 'SvelteMUD',
|
||||
version: '0.1.0'
|
||||
});
|
||||
|
||||
this.emit('sendGmcp', 'Core.Supports.Set', [
|
||||
...Array.from(this.supportedPackages.values())
|
||||
.map(pkg => `${pkg.name} ${pkg.version}`)
|
||||
]);
|
||||
}
|
||||
|
||||
/**
|
||||
* Handle an incoming GMCP message
|
||||
*/
|
||||
public handleGmcpMessage(message: string): void {
|
||||
try {
|
||||
console.log('GmcpHandler received message:', message);
|
||||
|
||||
// Extract module and data from the message
|
||||
const spaceIndex = message.indexOf(' ');
|
||||
if (spaceIndex === -1) {
|
||||
// No space found, might be a module without data
|
||||
console.log('GMCP message has no data, using module name only:', message);
|
||||
this.emit('gmcp', message, {});
|
||||
return;
|
||||
}
|
||||
|
||||
const module = message.substring(0, spaceIndex);
|
||||
const jsonData = message.substring(spaceIndex + 1);
|
||||
let data: any;
|
||||
|
||||
try {
|
||||
data = JSON.parse(jsonData);
|
||||
console.log('GMCP data successfully parsed for module:', module, data);
|
||||
} catch (e) {
|
||||
console.error('Failed to parse GMCP data:', jsonData);
|
||||
data = {};
|
||||
}
|
||||
|
||||
// Find the appropriate package handler
|
||||
let handled = false;
|
||||
for (const [packagePrefix, handler] of this.packageHandlers.entries()) {
|
||||
if (module.startsWith(packagePrefix)) {
|
||||
handler.handleMessage(module, data);
|
||||
handled = true;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
// If not handled by a specific package, handle it generically
|
||||
if (!handled) {
|
||||
console.log(`No specific handler for GMCP module: ${module}`);
|
||||
}
|
||||
|
||||
// Log the GMCP message for debugging
|
||||
console.log('Calling logGmcpMessage for module:', module);
|
||||
logGmcpMessage(module, data);
|
||||
|
||||
// Emit the general GMCP event for custom handling
|
||||
this.emit('gmcp', module, data);
|
||||
|
||||
// Emit a module-specific event
|
||||
this.emit(`gmcp:${module}`, data);
|
||||
} catch (error) {
|
||||
console.error('Error handling GMCP message:', error);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
22
src/lib/gmcp/packages/ClientKeystrokePackage.ts
Normal file
22
src/lib/gmcp/packages/ClientKeystrokePackage.ts
Normal file
@@ -0,0 +1,22 @@
|
||||
import type { EventEmitter } from '$lib/utils/EventEmitter';
|
||||
import type { GmcpPackageHandler } from './GmcpPackageHandler';
|
||||
|
||||
export class ClientKeystrokePackage implements GmcpPackageHandler {
|
||||
public readonly packageName = 'Client.Keystroke';
|
||||
public readonly version = '1';
|
||||
private emitter: EventEmitter | null = null;
|
||||
|
||||
initialize(emitter: EventEmitter): void {
|
||||
this.emitter = emitter;
|
||||
}
|
||||
|
||||
handleMessage(module: string, data: any): void {
|
||||
if (module === 'Client.Keystroke.Capture') {
|
||||
// Handle keystroke capture request
|
||||
this.emitter?.emit('captureKeystroke', data.keys || [], data.type || 'all');
|
||||
} else if (module === 'Client.Keystroke.Release') {
|
||||
// Handle keystroke release request
|
||||
this.emitter?.emit('releaseKeystroke');
|
||||
}
|
||||
}
|
||||
}
|
||||
302
src/lib/gmcp/packages/ClientMediaPackage.ts
Normal file
302
src/lib/gmcp/packages/ClientMediaPackage.ts
Normal file
@@ -0,0 +1,302 @@
|
||||
import type { EventEmitter } from '$lib/utils/EventEmitter';
|
||||
import type { GmcpPackageHandler } from './GmcpPackageHandler';
|
||||
import { Howl } from 'howler';
|
||||
import { get } from 'svelte/store';
|
||||
import { uiSettings } from '$lib/stores/mudStore';
|
||||
|
||||
// Interface to track sound information
|
||||
interface SoundInfo {
|
||||
key?: number;
|
||||
sound: Howl;
|
||||
url?: string;
|
||||
tag?: string;
|
||||
originalVolume?: number; // Store the original volume to recalculate with global
|
||||
}
|
||||
|
||||
export class ClientMediaPackage implements GmcpPackageHandler {
|
||||
public readonly packageName = 'Client.Media';
|
||||
public readonly version = '1';
|
||||
private emitter: EventEmitter | null = null;
|
||||
|
||||
// Maps to track active sounds
|
||||
private activeSounds: Map<string, SoundInfo> = new Map(); // id -> SoundInfo
|
||||
private keyToIdMap: Map<number, string> = new Map(); // key -> id
|
||||
private tagToIdsMap: Map<string, Set<string>> = new Map(); // tag -> Set of ids
|
||||
|
||||
initialize(emitter: EventEmitter): void {
|
||||
this.emitter = emitter;
|
||||
console.log('ClientMediaPackage initialized');
|
||||
|
||||
// Subscribe to global volume changes to update active sounds
|
||||
this.setupVolumeSubscription();
|
||||
}
|
||||
|
||||
/**
|
||||
* Set up subscription to global volume changes
|
||||
*/
|
||||
private setupVolumeSubscription(): void {
|
||||
try {
|
||||
// Only available in browser context
|
||||
if (typeof window !== 'undefined') {
|
||||
uiSettings.subscribe(settings => {
|
||||
// Update all active sounds with the new global volume
|
||||
this.updateAllSoundVolumes(settings.globalVolume);
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error setting up volume subscription:', error);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Update all active sound volumes based on new global volume
|
||||
*/
|
||||
private updateAllSoundVolumes(globalVolume: number): void {
|
||||
try {
|
||||
console.log(`Updating all sound volumes with global volume: ${globalVolume}`);
|
||||
|
||||
// Update each active sound
|
||||
for (const [id, info] of this.activeSounds.entries()) {
|
||||
if (info.sound && typeof info.sound.volume === 'function') {
|
||||
// Calculate new volume based on original volume (if available) or current volume
|
||||
const originalVolume = info.originalVolume !== undefined ? info.originalVolume : 1.0;
|
||||
const newVolume = originalVolume * globalVolume;
|
||||
|
||||
console.log(`Updating sound ${id} volume: ${originalVolume} * ${globalVolume} = ${newVolume}`);
|
||||
info.sound.volume(newVolume);
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error updating sound volumes:', error);
|
||||
}
|
||||
}
|
||||
|
||||
handleMessage(module: string, data: any): void {
|
||||
try {
|
||||
if (module === 'Client.Media.Play') {
|
||||
this.handlePlay(data);
|
||||
} else if (module === 'Client.Media.Stop') {
|
||||
this.handleStop(data);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error handling GMCP Media message:', error);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Handle Client.Media.Play GMCP message
|
||||
*/
|
||||
private handlePlay(data: any): void {
|
||||
try {
|
||||
console.log('GMCP Media.Play received:', data);
|
||||
|
||||
// Extract key and tag if present
|
||||
const key = data.key;
|
||||
const tag = data.tag;
|
||||
|
||||
// Build the full URL
|
||||
let fullUrl = '';
|
||||
|
||||
if (data.url && data.name) {
|
||||
const baseUrl = data.url.endsWith('/') ? data.url.slice(0, -1) : data.url;
|
||||
const fileName = data.name.startsWith('/') ? data.name.slice(1) : data.name;
|
||||
fullUrl = `${baseUrl}/${fileName}`;
|
||||
} else if (data.url) {
|
||||
fullUrl = data.url;
|
||||
} else if (data.name) {
|
||||
fullUrl = data.name;
|
||||
}
|
||||
|
||||
if (!fullUrl) {
|
||||
console.error('No URL provided for media playback');
|
||||
return;
|
||||
}
|
||||
|
||||
console.log(`Playing sound from: ${fullUrl}`);
|
||||
|
||||
// Get global volume setting
|
||||
const globalVolume = get(uiSettings).globalVolume || 0.7;
|
||||
|
||||
// Calculate volume (normalize from 0-100 to 0-1 if needed)
|
||||
let soundVolume = globalVolume;
|
||||
|
||||
// Store original volume for later adjustments
|
||||
let originalVolume = 1.0;
|
||||
|
||||
// Apply volume from the GMCP data if provided
|
||||
if (typeof data.volume === 'number') {
|
||||
// Convert 0-100 range to 0-1 if needed
|
||||
originalVolume = data.volume > 1 ? data.volume / 100 : data.volume;
|
||||
|
||||
// Scale relative to global volume
|
||||
soundVolume = originalVolume * globalVolume;
|
||||
|
||||
console.log(`Using sound volume: ${originalVolume} (original: ${data.volume}) * global: ${globalVolume} = ${soundVolume}`);
|
||||
} else {
|
||||
console.log(`No volume specified, using global volume: ${globalVolume}`);
|
||||
}
|
||||
|
||||
// Create sound
|
||||
const sound = new Howl({
|
||||
src: [fullUrl],
|
||||
volume: soundVolume,
|
||||
loop: !!data.loop,
|
||||
html5: true
|
||||
});
|
||||
|
||||
// Generate a unique ID for this sound
|
||||
const soundId = `sound-${Date.now()}-${Math.random().toString(36).substring(2, 5)}`;
|
||||
|
||||
// Store sound info
|
||||
this.activeSounds.set(soundId, {
|
||||
key: key,
|
||||
sound: sound,
|
||||
url: fullUrl,
|
||||
tag: tag,
|
||||
originalVolume: originalVolume // Store original volume for volume adjustments
|
||||
});
|
||||
|
||||
// Map key to ID if provided
|
||||
if (key !== undefined) {
|
||||
this.keyToIdMap.set(key, soundId);
|
||||
}
|
||||
|
||||
// Map tag to ID if provided
|
||||
if (tag) {
|
||||
if (!this.tagToIdsMap.has(tag)) {
|
||||
this.tagToIdsMap.set(tag, new Set());
|
||||
}
|
||||
this.tagToIdsMap.get(tag)?.add(soundId);
|
||||
}
|
||||
|
||||
// Play the sound
|
||||
sound.play();
|
||||
|
||||
// Set up cleanup when sound ends
|
||||
sound.once('end', () => {
|
||||
console.log(`Sound ${soundId} finished playing`);
|
||||
this.cleanupSound(soundId);
|
||||
});
|
||||
|
||||
// Emit an event for other components
|
||||
this.emitter?.emit('playSound', fullUrl, soundVolume, !!data.loop);
|
||||
} catch (error) {
|
||||
console.error('Error in handlePlay:', error);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Handle Client.Media.Stop GMCP message
|
||||
*/
|
||||
private handleStop(data: any): void {
|
||||
try {
|
||||
console.log('GMCP Media.Stop received:', data);
|
||||
|
||||
// Stop by key if provided
|
||||
if (data.key !== undefined) {
|
||||
console.log(`Stopping sound with key: ${data.key}`);
|
||||
const soundId = this.keyToIdMap.get(data.key);
|
||||
|
||||
if (soundId) {
|
||||
this.stopSound(soundId);
|
||||
console.log(`Stopped sound with key ${data.key}`);
|
||||
} else {
|
||||
console.log(`No sound found with key ${data.key}`);
|
||||
}
|
||||
}
|
||||
// Stop by tag if provided
|
||||
else if (data.tag) {
|
||||
console.log(`Stopping sounds with tag: ${data.tag}`);
|
||||
const ids = this.tagToIdsMap.get(data.tag);
|
||||
|
||||
if (ids && ids.size > 0) {
|
||||
// Create a copy of the set to avoid iteration issues during deletion
|
||||
[...ids].forEach(id => {
|
||||
this.stopSound(id);
|
||||
});
|
||||
console.log(`Stopped ${ids.size} sounds with tag ${data.tag}`);
|
||||
} else {
|
||||
console.log(`No sounds found with tag ${data.tag}`);
|
||||
}
|
||||
}
|
||||
// If url provided, find and stop matching sounds
|
||||
else if (data.url) {
|
||||
console.log(`Stopping sounds matching URL: ${data.url}`);
|
||||
let count = 0;
|
||||
|
||||
for (const [id, info] of this.activeSounds.entries()) {
|
||||
if (info.url && info.url.includes(data.url)) {
|
||||
this.stopSound(id);
|
||||
count++;
|
||||
}
|
||||
}
|
||||
|
||||
console.log(`Stopped ${count} sounds matching URL`);
|
||||
}
|
||||
// Stop all sounds if no specifics provided
|
||||
else {
|
||||
console.log('Stopping all sounds');
|
||||
const count = this.activeSounds.size;
|
||||
|
||||
for (const [id] of this.activeSounds.entries()) {
|
||||
this.stopSound(id);
|
||||
}
|
||||
|
||||
console.log(`Stopped all ${count} sounds`);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error in handleStop:', error);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Stop a specific sound by ID and clean up
|
||||
*/
|
||||
private stopSound(soundId: string): void {
|
||||
const info = this.activeSounds.get(soundId);
|
||||
if (!info) return;
|
||||
|
||||
try {
|
||||
// Stop the sound
|
||||
info.sound.stop();
|
||||
|
||||
// Clean up resources
|
||||
this.cleanupSound(soundId);
|
||||
} catch (error) {
|
||||
console.error(`Error stopping sound ${soundId}:`, error);
|
||||
// Still try to clean up even if stop fails
|
||||
this.cleanupSound(soundId);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Clean up resources for a sound
|
||||
*/
|
||||
private cleanupSound(soundId: string): void {
|
||||
try {
|
||||
const info = this.activeSounds.get(soundId);
|
||||
if (!info) return;
|
||||
|
||||
// Remove key mapping if exists
|
||||
if (info.key !== undefined) {
|
||||
this.keyToIdMap.delete(info.key);
|
||||
}
|
||||
|
||||
// Remove from tag mapping if exists
|
||||
if (info.tag && this.tagToIdsMap.has(info.tag)) {
|
||||
this.tagToIdsMap.get(info.tag)?.delete(soundId);
|
||||
// Clean up empty tag sets
|
||||
if (this.tagToIdsMap.get(info.tag)?.size === 0) {
|
||||
this.tagToIdsMap.delete(info.tag);
|
||||
}
|
||||
}
|
||||
|
||||
// Remove from active sounds
|
||||
this.activeSounds.delete(soundId);
|
||||
|
||||
console.log(`Cleaned up sound ${soundId}`);
|
||||
} catch (error) {
|
||||
console.error(`Error cleaning up sound ${soundId}:`, error);
|
||||
}
|
||||
}
|
||||
}
|
||||
28
src/lib/gmcp/packages/CorePackage.ts
Normal file
28
src/lib/gmcp/packages/CorePackage.ts
Normal file
@@ -0,0 +1,28 @@
|
||||
import type { EventEmitter } from '$lib/utils/EventEmitter';
|
||||
import type { GmcpPackageHandler } from './GmcpPackageHandler';
|
||||
|
||||
export class CorePackage implements GmcpPackageHandler {
|
||||
public readonly packageName = 'Core';
|
||||
public readonly version = '1';
|
||||
private emitter: EventEmitter | null = null;
|
||||
|
||||
initialize(emitter: EventEmitter): void {
|
||||
this.emitter = emitter;
|
||||
}
|
||||
|
||||
handleMessage(module: string, data: any): void {
|
||||
if (module === 'Core.Hello') {
|
||||
this.emitter?.emit('gmcp:coreHello', data);
|
||||
} else if (module === 'Core.Supports.Set') {
|
||||
if (Array.isArray(data)) {
|
||||
// Process the supported packages
|
||||
const serverPackages = data.map(pkg => {
|
||||
const [name, version] = pkg.split(' ');
|
||||
return { name, version: version || '1' };
|
||||
});
|
||||
|
||||
this.emitter?.emit('gmcp:coreSupportsSet', serverPackages);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
15
src/lib/gmcp/packages/GmcpPackageHandler.ts
Normal file
15
src/lib/gmcp/packages/GmcpPackageHandler.ts
Normal file
@@ -0,0 +1,15 @@
|
||||
import type { EventEmitter } from '$lib/utils/EventEmitter';
|
||||
|
||||
export interface GmcpPackageHandler {
|
||||
// The name of the GMCP package (e.g., "Client.Media")
|
||||
readonly packageName: string;
|
||||
|
||||
// The version of the GMCP package
|
||||
readonly version: string;
|
||||
|
||||
// Initialize the package handler with an event emitter
|
||||
initialize(emitter: EventEmitter): void;
|
||||
|
||||
// Handle an incoming GMCP message for this package
|
||||
handleMessage(module: string, data: any): void;
|
||||
}
|
||||
265
src/lib/profiles/ProfileManager.ts
Normal file
265
src/lib/profiles/ProfileManager.ts
Normal file
@@ -0,0 +1,265 @@
|
||||
import { EventEmitter } from '$lib/utils/EventEmitter';
|
||||
|
||||
export interface MudProfile {
|
||||
id: string;
|
||||
name: string;
|
||||
host: string;
|
||||
port: number;
|
||||
useSSL: boolean;
|
||||
autoLogin?: {
|
||||
enabled: boolean;
|
||||
username: string;
|
||||
password: string;
|
||||
commands: string[];
|
||||
};
|
||||
triggers?: string; // JSON string of triggers
|
||||
aliases?: {
|
||||
[key: string]: string;
|
||||
};
|
||||
macros?: {
|
||||
[key: string]: string;
|
||||
};
|
||||
gmcpPackages?: string[]; // Additional GMCP packages to support
|
||||
font?: string;
|
||||
fontSize?: number;
|
||||
theme?: string;
|
||||
ansiColor: boolean;
|
||||
accessibilityOptions?: {
|
||||
textToSpeech: boolean;
|
||||
highContrast: boolean;
|
||||
speechRate: number;
|
||||
speechPitch: number;
|
||||
speechVolume: number;
|
||||
};
|
||||
}
|
||||
|
||||
export class ProfileManager extends EventEmitter {
|
||||
private profiles: MudProfile[] = [];
|
||||
private activeProfileId: string | null = null;
|
||||
private storageKey = 'svelte-mud-profiles';
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
this.loadProfiles();
|
||||
}
|
||||
|
||||
/**
|
||||
* Load profiles from local storage
|
||||
*/
|
||||
private loadProfiles(): void {
|
||||
if (typeof window === 'undefined') {
|
||||
return; // Skip during SSR
|
||||
}
|
||||
|
||||
try {
|
||||
const storedProfiles = localStorage.getItem(this.storageKey);
|
||||
if (storedProfiles) {
|
||||
this.profiles = JSON.parse(storedProfiles);
|
||||
console.log('Loaded profiles from localStorage:', this.profiles);
|
||||
this.emit('profilesLoaded', this.profiles);
|
||||
} else {
|
||||
console.log('No profiles found in localStorage, creating default profile');
|
||||
// Add a default profile if none exist
|
||||
const defaultProfile = this.createDefaultProfile();
|
||||
defaultProfile.name = 'Aardwolf MUD';
|
||||
defaultProfile.host = 'aardmud.org';
|
||||
defaultProfile.port = 23;
|
||||
this.addProfile(defaultProfile);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to load profiles from local storage:', error);
|
||||
// Add a default profile if there was an error
|
||||
const defaultProfile = this.createDefaultProfile();
|
||||
defaultProfile.name = 'Aardwolf MUD';
|
||||
defaultProfile.host = 'aardmud.org';
|
||||
defaultProfile.port = 23;
|
||||
this.addProfile(defaultProfile);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Save profiles to local storage
|
||||
*/
|
||||
private saveProfiles(): void {
|
||||
if (typeof window === 'undefined') {
|
||||
return; // Skip during SSR
|
||||
}
|
||||
|
||||
try {
|
||||
localStorage.setItem(this.storageKey, JSON.stringify(this.profiles));
|
||||
} catch (error) {
|
||||
console.error('Failed to save profiles to local storage:', error);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Add a new profile
|
||||
*/
|
||||
public addProfile(profile: MudProfile): void {
|
||||
// Ensure all required fields are present
|
||||
if (!profile.id) {
|
||||
profile.id = `profile-${Date.now()}-${Math.random().toString(36).substring(2, 9)}`;
|
||||
}
|
||||
|
||||
if (profile.useSSL === undefined) {
|
||||
profile.useSSL = false;
|
||||
}
|
||||
|
||||
if (profile.ansiColor === undefined) {
|
||||
profile.ansiColor = true;
|
||||
}
|
||||
|
||||
// Check if a profile with the same ID already exists
|
||||
const existingIndex = this.profiles.findIndex(p => p.id === profile.id);
|
||||
|
||||
if (existingIndex !== -1) {
|
||||
// Update existing profile
|
||||
this.profiles[existingIndex] = profile;
|
||||
console.log(`Updated profile ${profile.id} (${profile.name})`, profile);
|
||||
this.emit('profileUpdated', profile);
|
||||
} else {
|
||||
// Add new profile
|
||||
this.profiles.push(profile);
|
||||
console.log(`Added new profile ${profile.id} (${profile.name})`, profile);
|
||||
this.emit('profileAdded', profile);
|
||||
}
|
||||
|
||||
// Save to storage
|
||||
this.saveProfiles();
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove a profile by ID
|
||||
*/
|
||||
public removeProfile(profileId: string): void {
|
||||
const index = this.profiles.findIndex(p => p.id === profileId);
|
||||
|
||||
if (index !== -1) {
|
||||
const removedProfile = this.profiles[index];
|
||||
this.profiles.splice(index, 1);
|
||||
|
||||
// If the active profile was removed, clear the active profile
|
||||
if (this.activeProfileId === profileId) {
|
||||
this.activeProfileId = null;
|
||||
this.emit('activeProfileChanged', null);
|
||||
}
|
||||
|
||||
this.emit('profileRemoved', removedProfile);
|
||||
this.saveProfiles();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Get all profiles
|
||||
*/
|
||||
public getProfiles(): MudProfile[] {
|
||||
return [...this.profiles];
|
||||
}
|
||||
|
||||
/**
|
||||
* Get a profile by ID
|
||||
*/
|
||||
public getProfile(profileId: string): MudProfile | undefined {
|
||||
return this.profiles.find(p => p.id === profileId);
|
||||
}
|
||||
|
||||
/**
|
||||
* Set the active profile
|
||||
*/
|
||||
public setActiveProfile(profileId: string): void {
|
||||
const profile = this.getProfile(profileId);
|
||||
|
||||
if (profile) {
|
||||
this.activeProfileId = profileId;
|
||||
this.emit('activeProfileChanged', profile);
|
||||
} else {
|
||||
throw new Error(`Profile with ID ${profileId} not found`);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the active profile
|
||||
*/
|
||||
public getActiveProfile(): MudProfile | null {
|
||||
if (!this.activeProfileId) return null;
|
||||
|
||||
const activeProfile = this.getProfile(this.activeProfileId);
|
||||
return activeProfile || null;
|
||||
}
|
||||
|
||||
/**
|
||||
* Import profiles from a JSON string
|
||||
*/
|
||||
public importProfiles(json: string): void {
|
||||
try {
|
||||
const imported = JSON.parse(json);
|
||||
|
||||
if (Array.isArray(imported)) {
|
||||
imported.forEach(profile => {
|
||||
if (this.isValidProfile(profile)) {
|
||||
this.addProfile(profile);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
this.emit('profilesImported', imported);
|
||||
} catch (error) {
|
||||
console.error('Failed to import profiles:', error);
|
||||
throw new Error('Failed to import profiles. Invalid format.');
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Export profiles to a JSON string
|
||||
*/
|
||||
public exportProfiles(): string {
|
||||
return JSON.stringify(this.profiles, null, 2);
|
||||
}
|
||||
|
||||
/**
|
||||
* Validate a profile object
|
||||
*/
|
||||
private isValidProfile(obj: any): boolean {
|
||||
return (
|
||||
typeof obj === 'object' &&
|
||||
typeof obj.id === 'string' &&
|
||||
typeof obj.name === 'string' &&
|
||||
typeof obj.host === 'string' &&
|
||||
typeof obj.port === 'number' &&
|
||||
typeof obj.useSSL === 'boolean' &&
|
||||
typeof obj.ansiColor === 'boolean'
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Create a default profile
|
||||
*/
|
||||
public createDefaultProfile(): MudProfile {
|
||||
const id = `profile-${Date.now()}`;
|
||||
|
||||
return {
|
||||
id,
|
||||
name: 'New Profile',
|
||||
host: 'mud.example.com',
|
||||
port: 23,
|
||||
useSSL: false,
|
||||
ansiColor: true,
|
||||
autoLogin: {
|
||||
enabled: false,
|
||||
username: '',
|
||||
password: '',
|
||||
commands: []
|
||||
},
|
||||
aliases: {},
|
||||
macros: {},
|
||||
gmcpPackages: [],
|
||||
accessibilityOptions: {
|
||||
textToSpeech: false,
|
||||
highContrast: false,
|
||||
speechRate: 1,
|
||||
speechPitch: 1,
|
||||
speechVolume: 1
|
||||
}
|
||||
};
|
||||
}
|
||||
}
|
||||
214
src/lib/stores/mudStore.ts
Normal file
214
src/lib/stores/mudStore.ts
Normal file
@@ -0,0 +1,214 @@
|
||||
import { writable, derived, get } from 'svelte/store';
|
||||
import type { MudProfile } from '$lib/profiles/ProfileManager';
|
||||
import type { MudConnection } from '$lib/connection/MudConnection';
|
||||
import type { Trigger } from '$lib/triggers/TriggerSystem';
|
||||
|
||||
// Store for active connections
|
||||
export const connections = writable<{ [key: string]: MudConnection }>({});
|
||||
|
||||
// Store for profiles
|
||||
export const profiles = writable<MudProfile[]>([]);
|
||||
|
||||
// Store for active profile ID
|
||||
export const activeProfileId = writable<string | null>(null);
|
||||
|
||||
// Store for triggers
|
||||
export const triggers = writable<Trigger[]>([]);
|
||||
|
||||
// Store for MUD output history
|
||||
export const outputHistory = writable<{
|
||||
id: string;
|
||||
text: string;
|
||||
timestamp: number;
|
||||
isInput?: boolean;
|
||||
highlights?: { pattern: string; color: string; isRegex: boolean }[]
|
||||
}[]>([]);
|
||||
|
||||
// Store for connection status
|
||||
export const connectionStatus = writable<{ [key: string]: 'connected' | 'disconnected' | 'connecting' | 'error' }>({});
|
||||
|
||||
// Store for accessibility settings
|
||||
export const accessibilitySettings = writable({
|
||||
textToSpeech: false,
|
||||
highContrast: false,
|
||||
fontSize: 16,
|
||||
lineSpacing: 1.2,
|
||||
speechRate: 1,
|
||||
speechPitch: 1,
|
||||
speechVolume: 1,
|
||||
interruptSpeechOnEnter: true // New setting for interrupting speech on Enter key
|
||||
});
|
||||
|
||||
// Store for UI settings
|
||||
export const uiSettings = writable({
|
||||
isDarkMode: true,
|
||||
showTimestamps: true,
|
||||
showSidebar: true,
|
||||
splitViewDirection: 'horizontal', // or 'vertical'
|
||||
inputHistorySize: 100,
|
||||
outputBufferSize: 1000,
|
||||
ansiColor: true,
|
||||
font: 'monospace',
|
||||
debugGmcp: false, // Setting for GMCP debugging
|
||||
globalVolume: 0.7 // Global volume control for sounds (0-1)
|
||||
});
|
||||
|
||||
// Store for input history
|
||||
export const inputHistory = writable<string[]>([]);
|
||||
export const inputHistoryIndex = writable<number>(-1);
|
||||
|
||||
// Derived store for active profile
|
||||
export const activeProfile = derived(
|
||||
[profiles, activeProfileId],
|
||||
([$profiles, $activeProfileId]) => {
|
||||
if (!$activeProfileId) return null;
|
||||
return $profiles.find(profile => profile.id === $activeProfileId) || null;
|
||||
}
|
||||
);
|
||||
|
||||
// Derived store for active connection
|
||||
export const activeConnection = derived(
|
||||
[connections, activeProfileId],
|
||||
([$connections, $activeProfileId]) => {
|
||||
if (!$activeProfileId) return null;
|
||||
return $connections[$activeProfileId] || null;
|
||||
}
|
||||
);
|
||||
|
||||
// Store for GMCP data
|
||||
export const gmcpData = writable<{ [module: string]: any }>({});
|
||||
|
||||
// Store for GMCP debug messages
|
||||
export const gmcpDebugLog = writable<{ id: string; module: string; data: any; timestamp: number }[]>([]);
|
||||
|
||||
// Helper functions
|
||||
export function addToOutputHistory(text: string, isInput = false, highlights: { pattern: string; color: string; isRegex: boolean }[] = []) {
|
||||
outputHistory.update(history => {
|
||||
const maxSize = get(uiSettings).outputBufferSize;
|
||||
const newItem = {
|
||||
id: `output-${Date.now()}-${Math.random().toString(36).substring(2, 9)}`,
|
||||
text,
|
||||
timestamp: Date.now(),
|
||||
isInput,
|
||||
highlights
|
||||
};
|
||||
|
||||
// Limit history size
|
||||
const updatedHistory = [...history, newItem];
|
||||
if (updatedHistory.length > maxSize) {
|
||||
return updatedHistory.slice(updatedHistory.length - maxSize);
|
||||
}
|
||||
return updatedHistory;
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Add GMCP message to debug log and possibly to output history if enabled
|
||||
*/
|
||||
export function logGmcpMessage(module: string, data: any) {
|
||||
console.log('logGmcpMessage called for module:', module);
|
||||
|
||||
// Always add to debug log
|
||||
gmcpDebugLog.update(log => {
|
||||
const maxSize = 100; // Keep last 100 GMCP messages
|
||||
const newItem = {
|
||||
id: `gmcp-${Date.now()}-${Math.random().toString(36).substring(2, 9)}`,
|
||||
module,
|
||||
data,
|
||||
timestamp: Date.now()
|
||||
};
|
||||
|
||||
const updatedLog = [...log, newItem];
|
||||
if (updatedLog.length > maxSize) {
|
||||
return updatedLog.slice(updatedLog.length - maxSize);
|
||||
}
|
||||
return updatedLog;
|
||||
});
|
||||
|
||||
// Get the CURRENT state of the debugGmcp setting, not a snapshot
|
||||
let currentSettings = get(uiSettings);
|
||||
console.log('Current debugGmcp setting:', currentSettings.debugGmcp);
|
||||
|
||||
// If debug mode is enabled, also add to normal output
|
||||
if (currentSettings.debugGmcp) {
|
||||
console.log('GMCP debug is enabled, adding to output history');
|
||||
const dataString = typeof data === 'object' ? JSON.stringify(data, null, 2) : String(data);
|
||||
const gmcpText = `[GMCP] ${module}: ${dataString}`;
|
||||
|
||||
addToOutputHistory(gmcpText, false, [
|
||||
{ pattern: '\\[GMCP\\]', color: '#8be9fd', isRegex: true },
|
||||
{ pattern: module, color: '#ff79c6', isRegex: false }
|
||||
]);
|
||||
} else {
|
||||
console.log('GMCP debug is disabled, not adding to output history');
|
||||
}
|
||||
}
|
||||
|
||||
export function addToInputHistory(text: string) {
|
||||
inputHistory.update(history => {
|
||||
// Don't add empty strings or duplicates of the last command
|
||||
if (!text || (history.length > 0 && history[history.length - 1] === text)) {
|
||||
return history;
|
||||
}
|
||||
|
||||
const maxSize = get(uiSettings).inputHistorySize;
|
||||
const updatedHistory = [...history, text];
|
||||
|
||||
// Limit history size
|
||||
if (updatedHistory.length > maxSize) {
|
||||
return updatedHistory.slice(updatedHistory.length - maxSize);
|
||||
}
|
||||
|
||||
return updatedHistory;
|
||||
});
|
||||
|
||||
// Reset history index to point to the end
|
||||
inputHistoryIndex.set(-1);
|
||||
}
|
||||
|
||||
export function navigateInputHistory(direction: 'up' | 'down', currentInput: string) {
|
||||
const history = get(inputHistory);
|
||||
let index = get(inputHistoryIndex);
|
||||
|
||||
if (history.length === 0) return currentInput;
|
||||
|
||||
if (direction === 'up') {
|
||||
// If we're at the beginning of navigation, save the current input
|
||||
if (index === -1) {
|
||||
inputHistory.update(h => {
|
||||
if (currentInput && h[h.length - 1] !== currentInput) {
|
||||
return [...h, currentInput];
|
||||
}
|
||||
return h;
|
||||
});
|
||||
}
|
||||
|
||||
// Move up in history
|
||||
index = Math.min(history.length - 1, index + 1);
|
||||
} else if (direction === 'down') {
|
||||
// Move down in history
|
||||
index = Math.max(-1, index - 1);
|
||||
}
|
||||
|
||||
inputHistoryIndex.set(index);
|
||||
|
||||
// Return appropriate value from history or empty string
|
||||
if (index === -1) {
|
||||
return '';
|
||||
} else {
|
||||
return history[history.length - 1 - index];
|
||||
}
|
||||
}
|
||||
|
||||
export function clearOutputHistory() {
|
||||
outputHistory.set([]);
|
||||
}
|
||||
|
||||
export function updateGmcpData(module: string, data: any) {
|
||||
gmcpData.update(currentData => {
|
||||
return {
|
||||
...currentData,
|
||||
[module]: data
|
||||
};
|
||||
});
|
||||
}
|
||||
278
src/lib/triggers/TriggerSystem.ts
Normal file
278
src/lib/triggers/TriggerSystem.ts
Normal file
@@ -0,0 +1,278 @@
|
||||
import { EventEmitter } from '$lib/utils/EventEmitter';
|
||||
import { Howl } from 'howler';
|
||||
import { get } from 'svelte/store';
|
||||
import { uiSettings } from '$lib/stores/mudStore';
|
||||
|
||||
export interface Trigger {
|
||||
id: string;
|
||||
name: string;
|
||||
pattern: string;
|
||||
isRegex: boolean;
|
||||
isEnabled: boolean;
|
||||
soundFile?: string;
|
||||
action?: string;
|
||||
sendText?: string;
|
||||
highlightColor?: string;
|
||||
priority: number;
|
||||
}
|
||||
|
||||
export class TriggerSystem extends EventEmitter {
|
||||
private triggers: Trigger[] = [];
|
||||
private sounds: Map<string, Howl> = new Map();
|
||||
private storage: Storage | null = null;
|
||||
private readonly STORAGE_KEY = 'mud-triggers';
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
|
||||
// Initialize storage if available
|
||||
if (typeof window !== 'undefined') {
|
||||
this.storage = window.localStorage;
|
||||
this.loadTriggersFromStorage();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Load triggers from storage
|
||||
*/
|
||||
private loadTriggersFromStorage(): void {
|
||||
if (!this.storage) return;
|
||||
|
||||
try {
|
||||
const triggersJson = this.storage.getItem(this.STORAGE_KEY);
|
||||
if (triggersJson) {
|
||||
const loadedTriggers = JSON.parse(triggersJson);
|
||||
if (Array.isArray(loadedTriggers)) {
|
||||
loadedTriggers.forEach(trigger => {
|
||||
if (this.isValidTrigger(trigger)) {
|
||||
this.triggers.push(trigger);
|
||||
}
|
||||
});
|
||||
|
||||
// Sort by priority
|
||||
this.triggers.sort((a, b) => b.priority - a.priority);
|
||||
|
||||
console.log(`Loaded ${this.triggers.length} triggers from storage`);
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error loading triggers from storage:', error);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Save triggers to storage
|
||||
*/
|
||||
private saveTriggersToStorage(): void {
|
||||
if (!this.storage) return;
|
||||
|
||||
try {
|
||||
this.storage.setItem(this.STORAGE_KEY, JSON.stringify(this.triggers));
|
||||
console.log(`Saved ${this.triggers.length} triggers to storage`);
|
||||
} catch (error) {
|
||||
console.error('Error saving triggers to storage:', error);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Add a new trigger
|
||||
*/
|
||||
public addTrigger(trigger: Trigger): void {
|
||||
const existingTriggerIndex = this.triggers.findIndex(t => t.id === trigger.id);
|
||||
|
||||
if (existingTriggerIndex !== -1) {
|
||||
// Update existing trigger
|
||||
this.triggers[existingTriggerIndex] = trigger;
|
||||
} else {
|
||||
// Add new trigger
|
||||
this.triggers.push(trigger);
|
||||
}
|
||||
|
||||
// Sort triggers by priority
|
||||
this.triggers.sort((a, b) => b.priority - a.priority);
|
||||
|
||||
// Preload sound if specified
|
||||
if (trigger.soundFile) {
|
||||
this.loadSound(trigger.id, trigger.soundFile);
|
||||
}
|
||||
|
||||
// Save triggers to storage
|
||||
this.saveTriggersToStorage();
|
||||
|
||||
this.emit('triggerAdded', trigger);
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove a trigger by ID
|
||||
*/
|
||||
public removeTrigger(triggerId: string): void {
|
||||
const index = this.triggers.findIndex(t => t.id === triggerId);
|
||||
|
||||
if (index !== -1) {
|
||||
const trigger = this.triggers[index];
|
||||
this.triggers.splice(index, 1);
|
||||
|
||||
// Unload sound if it was loaded
|
||||
if (this.sounds.has(triggerId)) {
|
||||
this.sounds.delete(triggerId);
|
||||
}
|
||||
|
||||
// Save triggers to storage
|
||||
this.saveTriggersToStorage();
|
||||
|
||||
this.emit('triggerRemoved', trigger);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Process text for triggers
|
||||
*/
|
||||
public processTriggers(text: string): void {
|
||||
// Process only enabled triggers
|
||||
for (const trigger of this.triggers.filter(t => t.isEnabled)) {
|
||||
let matched = false;
|
||||
let matches: RegExpMatchArray | null = null;
|
||||
|
||||
if (trigger.isRegex) {
|
||||
try {
|
||||
const regex = new RegExp(trigger.pattern, 'g');
|
||||
matches = text.match(regex);
|
||||
matched = matches !== null;
|
||||
} catch (error) {
|
||||
console.error(`Invalid regex pattern in trigger ${trigger.name}:`, error);
|
||||
}
|
||||
} else {
|
||||
// Simple text matching
|
||||
matched = text.includes(trigger.pattern);
|
||||
}
|
||||
|
||||
if (matched) {
|
||||
this.executeTrigger(trigger, text, matches);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Execute a triggered action - simplified for stability
|
||||
*/
|
||||
private executeTrigger(trigger: Trigger, text: string, matches: RegExpMatchArray | null): void {
|
||||
// Play sound if specified - with minimal options
|
||||
if (trigger.soundFile && this.sounds.has(trigger.id)) {
|
||||
try {
|
||||
const sound = this.sounds.get(trigger.id);
|
||||
if (sound) {
|
||||
sound.volume(0.7); // Fixed volume for stability
|
||||
sound.play();
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error playing sound:', error);
|
||||
}
|
||||
}
|
||||
|
||||
// Send text if specified
|
||||
if (trigger.sendText) {
|
||||
this.emit('sendText', trigger.sendText);
|
||||
}
|
||||
|
||||
// Skip custom actions for stability
|
||||
|
||||
// Emit highlight event if color specified
|
||||
if (trigger.highlightColor) {
|
||||
this.emit('highlight', text, trigger.pattern, trigger.highlightColor, trigger.isRegex);
|
||||
}
|
||||
|
||||
// Emit basic trigger fired event
|
||||
this.emit('triggerFired', trigger.id);
|
||||
}
|
||||
|
||||
/**
|
||||
* Load a sound file for a trigger - simplified version
|
||||
*/
|
||||
private loadSound(triggerId: string, soundFile: string): void {
|
||||
try {
|
||||
console.log(`Loading sound for trigger ${triggerId}: ${soundFile}`);
|
||||
|
||||
// Build path based on whether it's a URL or local file
|
||||
const soundPath = soundFile.startsWith('http') || soundFile.startsWith('/')
|
||||
? soundFile
|
||||
: `/sounds/${soundFile}`;
|
||||
|
||||
// Create minimal sound object
|
||||
const sound = new Howl({ src: [soundPath] });
|
||||
|
||||
// Set only necessary handlers
|
||||
sound.once('load', () => {
|
||||
this.sounds.set(triggerId, sound);
|
||||
});
|
||||
|
||||
sound.once('loaderror', () => {
|
||||
console.error(`Failed to load sound ${soundFile}`);
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('Error loading sound:', error);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Get all triggers
|
||||
*/
|
||||
public getTriggers(): Trigger[] {
|
||||
return [...this.triggers];
|
||||
}
|
||||
|
||||
/**
|
||||
* Enable or disable a trigger
|
||||
*/
|
||||
public setTriggerEnabled(triggerId: string, enabled: boolean): void {
|
||||
const trigger = this.triggers.find(t => t.id === triggerId);
|
||||
|
||||
if (trigger) {
|
||||
trigger.isEnabled = enabled;
|
||||
this.emit('triggerUpdated', trigger);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Import triggers from a JSON string
|
||||
*/
|
||||
public importTriggers(json: string): void {
|
||||
try {
|
||||
const imported = JSON.parse(json);
|
||||
|
||||
if (Array.isArray(imported)) {
|
||||
imported.forEach(trigger => {
|
||||
if (this.isValidTrigger(trigger)) {
|
||||
this.addTrigger(trigger);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
this.emit('triggersImported', imported);
|
||||
} catch (error) {
|
||||
console.error('Failed to import triggers:', error);
|
||||
throw new Error('Failed to import triggers. Invalid format.');
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Export triggers to a JSON string
|
||||
*/
|
||||
public exportTriggers(): string {
|
||||
return JSON.stringify(this.triggers, null, 2);
|
||||
}
|
||||
|
||||
/**
|
||||
* Validate a trigger object
|
||||
*/
|
||||
private isValidTrigger(obj: any): boolean {
|
||||
return (
|
||||
typeof obj === 'object' &&
|
||||
typeof obj.id === 'string' &&
|
||||
typeof obj.name === 'string' &&
|
||||
typeof obj.pattern === 'string' &&
|
||||
typeof obj.isRegex === 'boolean' &&
|
||||
typeof obj.isEnabled === 'boolean' &&
|
||||
typeof obj.priority === 'number'
|
||||
);
|
||||
}
|
||||
}
|
||||
48
src/lib/utils/EventEmitter.ts
Normal file
48
src/lib/utils/EventEmitter.ts
Normal file
@@ -0,0 +1,48 @@
|
||||
// A minimal EventEmitter implementation for browser
|
||||
export class EventEmitter {
|
||||
private events: Record<string, Function[]> = {};
|
||||
|
||||
on(event: string, listener: Function): this {
|
||||
if (!this.events[event]) {
|
||||
this.events[event] = [];
|
||||
}
|
||||
this.events[event].push(listener);
|
||||
return this;
|
||||
}
|
||||
|
||||
once(event: string, listener: Function): this {
|
||||
const onceWrapper = (...args: any[]) => {
|
||||
listener(...args);
|
||||
this.off(event, onceWrapper);
|
||||
};
|
||||
return this.on(event, onceWrapper);
|
||||
}
|
||||
|
||||
off(event: string, listener: Function): this {
|
||||
if (this.events[event]) {
|
||||
this.events[event] = this.events[event].filter(l => l !== listener);
|
||||
}
|
||||
return this;
|
||||
}
|
||||
|
||||
emit(event: string, ...args: any[]): boolean {
|
||||
if (this.events[event]) {
|
||||
this.events[event].forEach(listener => listener(...args));
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
removeAllListeners(event?: string): this {
|
||||
if (event) {
|
||||
this.events[event] = [];
|
||||
} else {
|
||||
this.events = {};
|
||||
}
|
||||
return this;
|
||||
}
|
||||
|
||||
listenerCount(event: string): number {
|
||||
return this.events[event]?.length || 0;
|
||||
}
|
||||
}
|
||||
211
src/lib/utils/KeyboardShortcutManager.ts
Normal file
211
src/lib/utils/KeyboardShortcutManager.ts
Normal file
@@ -0,0 +1,211 @@
|
||||
import { EventEmitter } from './EventEmitter';
|
||||
|
||||
// Define keyboard shortcut action types
|
||||
export type ShortcutAction =
|
||||
| 'focus-input'
|
||||
| 'focus-terminal'
|
||||
| 'focus-sidebar'
|
||||
| 'focus-profiles'
|
||||
| 'focus-triggers'
|
||||
| 'focus-settings'
|
||||
| 'toggle-sidebar'
|
||||
| 'cycle-tabs'
|
||||
| 'previous-tab'
|
||||
| 'next-tab'
|
||||
| 'connect'
|
||||
| 'disconnect';
|
||||
|
||||
// Keyboard shortcut definition
|
||||
export interface KeyboardShortcut {
|
||||
key: string; // Key code (e.g., 'i', 'ArrowUp')
|
||||
altKey?: boolean; // Whether Alt is required
|
||||
ctrlKey?: boolean; // Whether Ctrl is required
|
||||
shiftKey?: boolean; // Whether Shift is required
|
||||
metaKey?: boolean; // Whether Meta/Command is required
|
||||
action: ShortcutAction;
|
||||
description: string;
|
||||
}
|
||||
|
||||
// Default keyboard shortcuts
|
||||
const DEFAULT_SHORTCUTS: KeyboardShortcut[] = [
|
||||
{ key: 'i', altKey: true, action: 'focus-input', description: 'Focus input box' },
|
||||
{ key: 't', altKey: true, action: 'focus-terminal', description: 'Focus terminal output' },
|
||||
{ key: 's', altKey: true, action: 'focus-sidebar', description: 'Focus sidebar' },
|
||||
{ key: 'p', altKey: true, action: 'focus-profiles', description: 'Focus profiles tab' },
|
||||
{ key: 'r', altKey: true, action: 'focus-triggers', description: 'Focus triggers tab' },
|
||||
{ key: 'o', altKey: true, action: 'focus-settings', description: 'Focus settings tab' },
|
||||
{ key: 'b', altKey: true, action: 'toggle-sidebar', description: 'Toggle sidebar' },
|
||||
{ key: 'Tab', ctrlKey: true, action: 'cycle-tabs', description: 'Cycle through connection tabs' },
|
||||
{ key: 'Tab', ctrlKey: true, shiftKey: true, action: 'previous-tab', description: 'Previous connection tab' },
|
||||
{ key: 'c', altKey: true, action: 'connect', description: 'Connect active profile' },
|
||||
{ key: 'd', altKey: true, action: 'disconnect', description: 'Disconnect active profile' },
|
||||
];
|
||||
|
||||
/**
|
||||
* Keyboard shortcut manager - handles global keyboard shortcuts
|
||||
*/
|
||||
export class KeyboardShortcutManager extends EventEmitter {
|
||||
private shortcuts: KeyboardShortcut[];
|
||||
private enabled: boolean = true;
|
||||
private boundHandleKeyDown: (event: KeyboardEvent) => void;
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
|
||||
// Initialize with default shortcuts
|
||||
this.shortcuts = [...DEFAULT_SHORTCUTS];
|
||||
|
||||
// Bind event handler to make it removable
|
||||
this.boundHandleKeyDown = this.handleKeyDown.bind(this);
|
||||
|
||||
// See if we can load custom shortcuts from storage
|
||||
this.loadCustomShortcuts();
|
||||
}
|
||||
|
||||
/**
|
||||
* Initialize keyboard shortcuts
|
||||
*/
|
||||
initialize(): void {
|
||||
// Add global keydown listener
|
||||
document.addEventListener('keydown', this.boundHandleKeyDown, true);
|
||||
console.log('Keyboard shortcut manager initialized');
|
||||
}
|
||||
|
||||
/**
|
||||
* Clean up event listeners
|
||||
*/
|
||||
cleanup(): void {
|
||||
document.removeEventListener('keydown', this.boundHandleKeyDown, true);
|
||||
console.log('Keyboard shortcut manager cleaned up');
|
||||
}
|
||||
|
||||
/**
|
||||
* Handle keydown events globally
|
||||
*/
|
||||
private handleKeyDown(event: KeyboardEvent): void {
|
||||
// Skip if disabled
|
||||
if (!this.enabled) return;
|
||||
|
||||
const target = event.target as HTMLElement;
|
||||
const tagName = target.tagName.toLowerCase();
|
||||
|
||||
// Always allow global Alt+key shortcuts for navigation and UI control
|
||||
// even when typing in input elements or textareas
|
||||
if (event.altKey) {
|
||||
// Log that we have an alt key combo
|
||||
console.log(`Alt key combo detected: Alt+${event.key}`);
|
||||
} else if (tagName === 'input' || tagName === 'textarea') {
|
||||
// Don't trigger non-Alt shortcuts when typing in input elements
|
||||
return;
|
||||
}
|
||||
|
||||
// Check if this key combination matches any shortcut
|
||||
for (const shortcut of this.shortcuts) {
|
||||
if (
|
||||
event.key === shortcut.key &&
|
||||
event.altKey === !!shortcut.altKey &&
|
||||
event.ctrlKey === !!shortcut.ctrlKey &&
|
||||
event.shiftKey === !!shortcut.shiftKey &&
|
||||
event.metaKey === !!shortcut.metaKey
|
||||
) {
|
||||
// Matching shortcut found
|
||||
console.log(`Keyboard shortcut triggered: ${shortcut.action}`, shortcut);
|
||||
|
||||
// Prevent default behavior for special keys
|
||||
event.preventDefault();
|
||||
|
||||
// Emit event to notify listeners
|
||||
this.emit('shortcut', shortcut.action);
|
||||
|
||||
// Exit early - we found a match
|
||||
return;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Load custom shortcuts from storage if available
|
||||
*/
|
||||
private loadCustomShortcuts(): void {
|
||||
try {
|
||||
if (typeof localStorage !== 'undefined') {
|
||||
const storedShortcuts = localStorage.getItem('keyboard-shortcuts');
|
||||
if (storedShortcuts) {
|
||||
this.shortcuts = JSON.parse(storedShortcuts);
|
||||
console.log('Loaded custom keyboard shortcuts from storage');
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error loading custom shortcuts:', error);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Save custom shortcuts to storage
|
||||
*/
|
||||
saveCustomShortcuts(): void {
|
||||
try {
|
||||
if (typeof localStorage !== 'undefined') {
|
||||
localStorage.setItem('keyboard-shortcuts', JSON.stringify(this.shortcuts));
|
||||
console.log('Saved custom keyboard shortcuts to storage');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error saving custom shortcuts:', error);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Add or update a shortcut
|
||||
*/
|
||||
updateShortcut(shortcut: KeyboardShortcut): void {
|
||||
// Find existing shortcut with the same action
|
||||
const index = this.shortcuts.findIndex(s => s.action === shortcut.action);
|
||||
|
||||
if (index !== -1) {
|
||||
// Update existing shortcut
|
||||
this.shortcuts[index] = shortcut;
|
||||
} else {
|
||||
// Add new shortcut
|
||||
this.shortcuts.push(shortcut);
|
||||
}
|
||||
|
||||
// Save to storage
|
||||
this.saveCustomShortcuts();
|
||||
|
||||
// Notify listeners
|
||||
this.emit('shortcutsChanged', this.shortcuts);
|
||||
}
|
||||
|
||||
/**
|
||||
* Get all registered shortcuts
|
||||
*/
|
||||
getShortcuts(): KeyboardShortcut[] {
|
||||
return [...this.shortcuts];
|
||||
}
|
||||
|
||||
/**
|
||||
* Reset shortcuts to defaults
|
||||
*/
|
||||
resetToDefaults(): void {
|
||||
this.shortcuts = [...DEFAULT_SHORTCUTS];
|
||||
this.saveCustomShortcuts();
|
||||
this.emit('shortcutsChanged', this.shortcuts);
|
||||
}
|
||||
|
||||
/**
|
||||
* Enable or disable keyboard shortcuts
|
||||
*/
|
||||
setEnabled(enabled: boolean): void {
|
||||
this.enabled = enabled;
|
||||
}
|
||||
|
||||
/**
|
||||
* Check if shortcuts are enabled
|
||||
*/
|
||||
isEnabled(): boolean {
|
||||
return this.enabled;
|
||||
}
|
||||
}
|
||||
|
||||
// Export singleton instance
|
||||
export const shortcutManager = new KeyboardShortcutManager();
|
||||
184
src/lib/utils/ModalHelper.ts
Normal file
184
src/lib/utils/ModalHelper.ts
Normal file
@@ -0,0 +1,184 @@
|
||||
import { ProfileManager } from '$lib/profiles/ProfileManager';
|
||||
import { get } from 'svelte/store';
|
||||
import { activeProfile } from '$lib/stores/mudStore';
|
||||
import type { MudProfile } from '$lib/profiles/ProfileManager';
|
||||
import type { Trigger } from '$lib/triggers/TriggerSystem';
|
||||
import Modal from '$lib/components/Modal.svelte';
|
||||
import ProfileEditor from '$lib/components/ProfileEditor.svelte';
|
||||
import TriggerEditor from '$lib/components/TriggerEditor.svelte';
|
||||
|
||||
/**
|
||||
* Helper class for creating and showing modals programmatically
|
||||
*/
|
||||
export class ModalHelper {
|
||||
private static modal: Modal | null = null;
|
||||
private static profileManager = new ProfileManager();
|
||||
|
||||
/**
|
||||
* Show the full-featured profile editor modal
|
||||
* @param onSave Callback when profile is saved
|
||||
* @param onCancel Callback when operation is cancelled
|
||||
* @param existingProfile Optional existing profile to edit
|
||||
*/
|
||||
static showProfileEditor(
|
||||
onSave: (profile: MudProfile) => void,
|
||||
onCancel: () => void,
|
||||
existingProfile?: MudProfile
|
||||
): void {
|
||||
console.log('ModalHelper.showProfileEditor called');
|
||||
|
||||
try {
|
||||
// Make sure document.body is available
|
||||
if (!document.body) {
|
||||
throw new Error('document.body is not available');
|
||||
}
|
||||
|
||||
// Destroy existing modal if it exists to prevent memory leaks
|
||||
if (this.modal) {
|
||||
try {
|
||||
this.modal.$destroy();
|
||||
} catch (error) {
|
||||
console.error('Error destroying previous modal:', error);
|
||||
}
|
||||
this.modal = null;
|
||||
}
|
||||
|
||||
// Create a new modal instance
|
||||
console.log('Creating new Modal instance');
|
||||
this.modal = new Modal({
|
||||
target: document.body,
|
||||
props: {
|
||||
closable: true,
|
||||
title: '',
|
||||
}
|
||||
});
|
||||
|
||||
if (!this.modal) {
|
||||
throw new Error('Failed to create modal instance');
|
||||
}
|
||||
|
||||
// Get profile to edit or create new one
|
||||
const profile = existingProfile || this.profileManager.createDefaultProfile();
|
||||
const isNewProfile = !existingProfile;
|
||||
|
||||
console.log('Setting up modal with profile:', profile);
|
||||
|
||||
// Set up the modal with a short delay to ensure the DOM is ready
|
||||
setTimeout(() => {
|
||||
if (this.modal) {
|
||||
// Set up the modal
|
||||
this.modal.setProps({
|
||||
title: isNewProfile ? 'Create New Profile' : 'Edit Profile',
|
||||
component: ProfileEditor,
|
||||
componentProps: {
|
||||
profile,
|
||||
isNewProfile
|
||||
},
|
||||
onSubmit: (result) => {
|
||||
console.log('Modal submit callback with result:', result);
|
||||
onSave(result.profile);
|
||||
},
|
||||
onCancel: () => {
|
||||
console.log('Modal cancel callback');
|
||||
onCancel();
|
||||
}
|
||||
});
|
||||
|
||||
// Open the modal
|
||||
this.modal.open();
|
||||
console.log('Modal opened');
|
||||
} else {
|
||||
console.error('Modal instance was destroyed before it could be opened');
|
||||
}
|
||||
}, 50);
|
||||
} catch (error) {
|
||||
console.error('Error in showProfileEditor:', error);
|
||||
// Call onCancel to ensure the flow continues even if there's an error
|
||||
onCancel();
|
||||
throw error; // Re-throw to allow +page.svelte to handle it
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Show the trigger editor modal
|
||||
* @param onSave Callback when trigger is saved
|
||||
* @param onCancel Callback when operation is cancelled
|
||||
* @param existingTrigger Optional existing trigger to edit
|
||||
*/
|
||||
static showTriggerEditor(
|
||||
onSave: (trigger: Trigger) => void,
|
||||
onCancel: () => void,
|
||||
existingTrigger?: Trigger
|
||||
): void {
|
||||
console.log('ModalHelper.showTriggerEditor called');
|
||||
|
||||
try {
|
||||
// Make sure document.body is available
|
||||
if (!document.body) {
|
||||
throw new Error('document.body is not available');
|
||||
}
|
||||
|
||||
// Destroy existing modal if it exists to prevent memory leaks
|
||||
if (this.modal) {
|
||||
try {
|
||||
this.modal.$destroy();
|
||||
} catch (error) {
|
||||
console.error('Error destroying previous modal:', error);
|
||||
}
|
||||
this.modal = null;
|
||||
}
|
||||
|
||||
// Create a new modal instance
|
||||
console.log('Creating new Modal instance');
|
||||
this.modal = new Modal({
|
||||
target: document.body,
|
||||
props: {
|
||||
closable: true,
|
||||
title: '',
|
||||
}
|
||||
});
|
||||
|
||||
if (!this.modal) {
|
||||
throw new Error('Failed to create modal instance');
|
||||
}
|
||||
|
||||
const isNewTrigger = !existingTrigger;
|
||||
|
||||
console.log('Setting up trigger modal:', existingTrigger || 'new trigger');
|
||||
|
||||
// Set up the modal with a short delay to ensure the DOM is ready
|
||||
setTimeout(() => {
|
||||
if (this.modal) {
|
||||
// Set up the modal
|
||||
this.modal.setProps({
|
||||
title: isNewTrigger ? 'Create New Trigger' : 'Edit Trigger',
|
||||
component: TriggerEditor,
|
||||
componentProps: {
|
||||
trigger: existingTrigger || null,
|
||||
isNew: isNewTrigger
|
||||
},
|
||||
onSubmit: (result) => {
|
||||
console.log('Modal submit callback with result:', result);
|
||||
onSave(result.trigger);
|
||||
},
|
||||
onCancel: () => {
|
||||
console.log('Modal cancel callback');
|
||||
onCancel();
|
||||
}
|
||||
});
|
||||
|
||||
// Open the modal
|
||||
this.modal.open();
|
||||
console.log('Modal opened');
|
||||
} else {
|
||||
console.error('Modal instance was destroyed before it could be opened');
|
||||
}
|
||||
}, 50);
|
||||
} catch (error) {
|
||||
console.error('Error in showTriggerEditor:', error);
|
||||
// Call onCancel to ensure the flow continues even if there's an error
|
||||
onCancel();
|
||||
throw error; // Re-throw to allow +page.svelte to handle it
|
||||
}
|
||||
}
|
||||
}
|
||||
278
src/routes/+layout.svelte
Normal file
278
src/routes/+layout.svelte
Normal file
@@ -0,0 +1,278 @@
|
||||
<script lang="ts">
|
||||
import { onMount, onDestroy } from 'svelte';
|
||||
import { profiles, activeProfileId, uiSettings, accessibilitySettings } from '$lib/stores/mudStore';
|
||||
import { ProfileManager } from '$lib/profiles/ProfileManager';
|
||||
import { AccessibilityManager } from '$lib/accessibility/AccessibilityManager';
|
||||
import { shortcutManager } from '$lib/utils/KeyboardShortcutManager';
|
||||
import PwaUpdater from '$lib/components/PwaUpdater.svelte';
|
||||
import '../app.css';
|
||||
|
||||
// Initialize profile manager and accessibility manager
|
||||
let profileManager: ProfileManager;
|
||||
let accessibilityManager: AccessibilityManager;
|
||||
|
||||
// Subscriptions for cleanup
|
||||
let unsubAccessibility: () => void;
|
||||
|
||||
// Flag to determine if we're in browser environment
|
||||
const isBrowser = typeof window !== 'undefined';
|
||||
|
||||
/**
|
||||
* Handle global keyboard shortcuts
|
||||
*/
|
||||
function handleGlobalShortcut(action: string): void {
|
||||
console.log(`Global shortcut triggered: ${action}`);
|
||||
|
||||
// Handle the different shortcut actions
|
||||
switch (action) {
|
||||
case 'focus-input':
|
||||
// Find and focus the terminal input
|
||||
const inputElement = document.querySelector('.mud-terminal-input');
|
||||
if (inputElement) {
|
||||
(inputElement as HTMLElement).focus();
|
||||
}
|
||||
break;
|
||||
|
||||
case 'focus-terminal':
|
||||
// Find and focus the terminal output
|
||||
const terminalElement = document.querySelector('.mud-terminal-output');
|
||||
if (terminalElement) {
|
||||
(terminalElement as HTMLElement).focus();
|
||||
}
|
||||
break;
|
||||
|
||||
case 'focus-sidebar':
|
||||
// Find and focus the sidebar
|
||||
const sidebarElement = document.querySelector('.mud-sidebar');
|
||||
if (sidebarElement) {
|
||||
(sidebarElement as HTMLElement).focus();
|
||||
}
|
||||
break;
|
||||
|
||||
case 'focus-profiles':
|
||||
// Find and activate the profiles tab
|
||||
const profilesTab = document.getElementById('tab-profiles');
|
||||
if (profilesTab) {
|
||||
(profilesTab as HTMLElement).click();
|
||||
(profilesTab as HTMLElement).focus();
|
||||
}
|
||||
break;
|
||||
|
||||
case 'focus-triggers':
|
||||
// Find and activate the triggers tab
|
||||
const triggersTab = document.getElementById('tab-triggers');
|
||||
if (triggersTab) {
|
||||
(triggersTab as HTMLElement).click();
|
||||
(triggersTab as HTMLElement).focus();
|
||||
}
|
||||
break;
|
||||
|
||||
case 'focus-settings':
|
||||
// Find and activate the settings tab
|
||||
const settingsTab = document.getElementById('tab-settings');
|
||||
if (settingsTab) {
|
||||
(settingsTab as HTMLElement).click();
|
||||
(settingsTab as HTMLElement).focus();
|
||||
}
|
||||
break;
|
||||
|
||||
case 'toggle-sidebar':
|
||||
// Programmatically click the sidebar toggle button
|
||||
const sidebarToggleButton = document.querySelector('.app-actions button');
|
||||
if (sidebarToggleButton) {
|
||||
(sidebarToggleButton as HTMLElement).click();
|
||||
}
|
||||
break;
|
||||
|
||||
case 'connect':
|
||||
// Find active tab and click connect button
|
||||
const connectButton = document.querySelector('.mud-mdi-pane[style*="display: flex"] .btn-connect');
|
||||
if (connectButton) {
|
||||
(connectButton as HTMLElement).click();
|
||||
}
|
||||
break;
|
||||
|
||||
case 'disconnect':
|
||||
// Find active tab and click disconnect button
|
||||
const disconnectButton = document.querySelector('.mud-mdi-pane[style*="display: flex"] .btn-disconnect');
|
||||
if (disconnectButton) {
|
||||
(disconnectButton as HTMLElement).click();
|
||||
}
|
||||
break;
|
||||
|
||||
default:
|
||||
console.log(`Unhandled shortcut action: ${action}`);
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Global keydown handler for accessibility controls
|
||||
*/
|
||||
function handleGlobalKeydown(event: KeyboardEvent): void {
|
||||
// Only handle events in the browser
|
||||
if (!isBrowser) return;
|
||||
|
||||
// Check if Control key is pressed (multiple ways to detect Control key)
|
||||
if (event.key === 'Control' || event.code === 'ControlLeft' || event.code === 'ControlRight' ||
|
||||
event.keyCode === 17 || event.ctrlKey) {
|
||||
|
||||
console.log('GLOBAL CONTROL KEY DETECTED');
|
||||
|
||||
// Check if speech is enabled and active
|
||||
if ($accessibilitySettings.textToSpeech && accessibilityManager && accessibilityManager.isSpeaking()) {
|
||||
// Stop the speech synthesis
|
||||
console.log('Stopping speech from global keydown handler');
|
||||
accessibilityManager.stopSpeech();
|
||||
|
||||
// Prevent default and stop propagation to ensure no other handlers interfere
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Handle Control key release to ensure we catch the event
|
||||
*/
|
||||
function handleKeyUp(event: KeyboardEvent): void {
|
||||
// Only handle events in the browser
|
||||
if (!isBrowser) return;
|
||||
|
||||
// Check for Control key release
|
||||
if (event.key === 'Control' || event.code === 'ControlLeft' || event.code === 'ControlRight' || event.keyCode === 17) {
|
||||
console.log('Control key released');
|
||||
|
||||
// Check if speech is enabled and active
|
||||
if ($accessibilitySettings.textToSpeech && accessibilityManager && accessibilityManager.isSpeaking()) {
|
||||
console.log('Stopping speech on Control key release');
|
||||
accessibilityManager.stopSpeech();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
// Only execute browser-specific code in browser environment
|
||||
if (!isBrowser) return;
|
||||
|
||||
profileManager = new ProfileManager();
|
||||
|
||||
// Initialize accessibility manager for global control
|
||||
accessibilityManager = new AccessibilityManager();
|
||||
|
||||
// Initialize keyboard shortcut manager
|
||||
shortcutManager.initialize();
|
||||
|
||||
// Setup shortcut handlers
|
||||
shortcutManager.on('shortcut', handleGlobalShortcut);
|
||||
|
||||
// Sync accessibility manager with store settings
|
||||
accessibilityManager.setSpeechEnabled($accessibilitySettings.textToSpeech);
|
||||
accessibilityManager.updateSpeechOptions({
|
||||
rate: $accessibilitySettings.speechRate,
|
||||
pitch: $accessibilitySettings.speechPitch,
|
||||
volume: $accessibilitySettings.speechVolume
|
||||
});
|
||||
|
||||
// Subscribe to changes in accessibility settings
|
||||
unsubAccessibility = accessibilitySettings.subscribe(settings => {
|
||||
if (accessibilityManager) {
|
||||
accessibilityManager.setSpeechEnabled(settings.textToSpeech);
|
||||
accessibilityManager.updateSpeechOptions({
|
||||
rate: settings.speechRate,
|
||||
pitch: settings.speechPitch,
|
||||
volume: settings.speechVolume
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// Set up global keydown handler
|
||||
window.addEventListener('keydown', handleGlobalKeydown, true);
|
||||
document.addEventListener('keydown', handleGlobalKeydown, true);
|
||||
|
||||
// Set up keyup handler
|
||||
window.addEventListener('keyup', handleKeyUp, true);
|
||||
document.addEventListener('keyup', handleKeyUp, true);
|
||||
|
||||
// Load profiles from storage
|
||||
const loadedProfiles = profileManager.getProfiles();
|
||||
profiles.set(loadedProfiles);
|
||||
|
||||
// Set active profile if available
|
||||
if (loadedProfiles.length > 0) {
|
||||
activeProfileId.set(loadedProfiles[0].id);
|
||||
}
|
||||
|
||||
// Apply dark mode setting from UI settings
|
||||
if ($uiSettings.isDarkMode) {
|
||||
document.body.classList.add('dark-mode');
|
||||
} else {
|
||||
document.body.classList.remove('dark-mode');
|
||||
}
|
||||
});
|
||||
|
||||
onDestroy(() => {
|
||||
// Only execute browser-specific code in browser environment
|
||||
if (!isBrowser) return;
|
||||
|
||||
// Clean up event listeners
|
||||
window.removeEventListener('keydown', handleGlobalKeydown, true);
|
||||
document.removeEventListener('keydown', handleGlobalKeydown, true);
|
||||
window.removeEventListener('keyup', handleKeyUp, true);
|
||||
document.removeEventListener('keyup', handleKeyUp, true);
|
||||
|
||||
// Clean up keyboard shortcut manager
|
||||
shortcutManager.off('shortcut', handleGlobalShortcut);
|
||||
shortcutManager.cleanup();
|
||||
|
||||
// Clean up subscriptions
|
||||
if (unsubAccessibility) unsubAccessibility();
|
||||
});
|
||||
|
||||
// Watch for dark mode changes only in browser environment
|
||||
$: if (isBrowser && $uiSettings) {
|
||||
if ($uiSettings.isDarkMode) {
|
||||
document.body.classList.add('dark-mode');
|
||||
} else {
|
||||
document.body.classList.remove('dark-mode');
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<svelte:window on:keydown={handleGlobalKeydown} on:keyup={handleKeyUp} />
|
||||
|
||||
<svelte:head>
|
||||
<title>SvelteMUD Client</title>
|
||||
</svelte:head>
|
||||
|
||||
<div class="app-container" class:dark-mode={$uiSettings.isDarkMode}>
|
||||
<slot />
|
||||
<PwaUpdater />
|
||||
</div>
|
||||
|
||||
<style>
|
||||
:global(html, body) {
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
|
||||
}
|
||||
|
||||
:global(body) {
|
||||
background-color: #f8f9fa;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
:global(body.dark-mode) {
|
||||
background-color: #282a36;
|
||||
color: #f8f8f2;
|
||||
}
|
||||
|
||||
.app-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
max-height: 100vh;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
932
src/routes/+page.svelte
Normal file
932
src/routes/+page.svelte
Normal file
@@ -0,0 +1,932 @@
|
||||
<script lang="ts">
|
||||
import { onMount } from 'svelte';
|
||||
|
||||
// Declare global window property for volume debounce
|
||||
declare global {
|
||||
interface Window {
|
||||
volumeDebounceTimeout?: number;
|
||||
}
|
||||
}
|
||||
import MudMdi from '$lib/components/MudMdi.svelte';
|
||||
import KeyboardShortcutsHelp from '$lib/components/KeyboardShortcutsHelp.svelte';
|
||||
import { ModalHelper } from '$lib/utils/ModalHelper';
|
||||
import {
|
||||
profiles,
|
||||
activeProfileId,
|
||||
activeProfile,
|
||||
triggers,
|
||||
uiSettings,
|
||||
accessibilitySettings,
|
||||
addToOutputHistory
|
||||
} from '$lib/stores/mudStore';
|
||||
import { ProfileManager } from '$lib/profiles/ProfileManager';
|
||||
import type { MudProfile } from '$lib/profiles/ProfileManager';
|
||||
import { TriggerSystem } from '$lib/triggers/TriggerSystem';
|
||||
import type { Trigger } from '$lib/triggers/TriggerSystem';
|
||||
|
||||
// Component state
|
||||
let profileManager: ProfileManager;
|
||||
let triggerSystem: TriggerSystem;
|
||||
let showTriggerEditor = false;
|
||||
let editingTrigger: Trigger | null = null;
|
||||
let showSidebar = true;
|
||||
let sidebarTab: 'profiles' | 'triggers' | 'settings' = 'profiles';
|
||||
let showKeyboardShortcutsHelp = false;
|
||||
|
||||
// Save profile from component
|
||||
function saveProfile(event) {
|
||||
const profile = event.detail.profile;
|
||||
console.log('Saving profile from component:', profile);
|
||||
|
||||
if (profileManager) {
|
||||
// Ensure profile has a valid ID
|
||||
if (!profile.id) {
|
||||
profile.id = `profile-${Date.now()}-${Math.random().toString(36).substring(2, 9)}`;
|
||||
}
|
||||
|
||||
// Ensure all required fields are set
|
||||
if (!profile.ansiColor) profile.ansiColor = true;
|
||||
|
||||
console.log('Saving validated profile:', profile);
|
||||
profileManager.addProfile(profile);
|
||||
|
||||
// Force reload all profiles
|
||||
loadProfiles();
|
||||
|
||||
// Set this as the active profile if no profile is active
|
||||
if (!$activeProfileId) {
|
||||
activeProfileId.set(profile.id);
|
||||
}
|
||||
|
||||
// Feedback to user
|
||||
addToOutputHistory(`Profile "${profile.name}" saved successfully.`);
|
||||
} else {
|
||||
console.error('Profile manager not initialized');
|
||||
}
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
console.log('Page mounted');
|
||||
// Initialize profile manager
|
||||
profileManager = new ProfileManager();
|
||||
console.log('Profile manager initialized');
|
||||
|
||||
// Initialize trigger system
|
||||
triggerSystem = new TriggerSystem();
|
||||
console.log('Trigger system initialized');
|
||||
|
||||
// Load profiles
|
||||
loadProfiles();
|
||||
|
||||
// Load triggers
|
||||
loadTriggers();
|
||||
|
||||
// Check URL parameters for debug mode
|
||||
checkUrlParams();
|
||||
|
||||
// Subscribe to profile manager events for real-time updates
|
||||
profileManager.on('profileAdded', () => {
|
||||
console.log('Profile added event detected');
|
||||
loadProfiles();
|
||||
});
|
||||
|
||||
profileManager.on('profileUpdated', () => {
|
||||
console.log('Profile updated event detected');
|
||||
loadProfiles();
|
||||
});
|
||||
|
||||
profileManager.on('profileRemoved', () => {
|
||||
console.log('Profile removed event detected');
|
||||
loadProfiles();
|
||||
});
|
||||
});
|
||||
|
||||
// Check URL for debug parameters
|
||||
function checkUrlParams() {
|
||||
const urlParams = new URLSearchParams(window.location.search);
|
||||
|
||||
// Check for debug=gmcp parameter
|
||||
if (urlParams.has('debug')) {
|
||||
const debugValue = urlParams.get('debug');
|
||||
if (debugValue === 'gmcp' || debugValue === 'all') {
|
||||
console.log('GMCP debugging enabled via URL parameter');
|
||||
uiSettings.update(settings => ({
|
||||
...settings,
|
||||
debugGmcp: true
|
||||
}));
|
||||
|
||||
// Add a notification to the output
|
||||
addToOutputHistory(
|
||||
'🔍 GMCP debugging enabled via URL parameter. You will see all GMCP protocol messages in this window.',
|
||||
false,
|
||||
[{ pattern: 'GMCP debugging enabled', color: '#8be9fd', isRegex: false }]
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Load profiles from manager
|
||||
function loadProfiles() {
|
||||
const allProfiles = profileManager.getProfiles();
|
||||
console.log('Loaded profiles:', allProfiles); // Debug
|
||||
profiles.set(allProfiles);
|
||||
|
||||
// Set active profile if available and not already set
|
||||
if (!$activeProfileId && allProfiles.length > 0) {
|
||||
activeProfileId.set(allProfiles[0].id);
|
||||
}
|
||||
}
|
||||
|
||||
// Load triggers from system
|
||||
function loadTriggers() {
|
||||
const allTriggers = triggerSystem.getTriggers();
|
||||
triggers.set(allTriggers);
|
||||
}
|
||||
|
||||
// Edit an existing profile
|
||||
function editProfile(profile: MudProfile) {
|
||||
console.log('Editing profile:', profile);
|
||||
ModalHelper.showProfileEditor(
|
||||
(updatedProfile) => {
|
||||
console.log('Profile updated from modal:', updatedProfile);
|
||||
// Use the same saveProfile function for consistency
|
||||
saveProfile({ detail: { profile: updatedProfile } });
|
||||
},
|
||||
() => {
|
||||
console.log('Profile edit cancelled');
|
||||
},
|
||||
profile
|
||||
);
|
||||
}
|
||||
|
||||
// Delete profile
|
||||
function deleteProfile(profileId: string) {
|
||||
if (confirm(`Are you sure you want to delete this profile?`)) {
|
||||
profileManager.removeProfile(profileId);
|
||||
loadProfiles();
|
||||
}
|
||||
}
|
||||
|
||||
// Create a new trigger
|
||||
function createTrigger() {
|
||||
console.log('Creating new trigger using ModalHelper');
|
||||
try {
|
||||
ModalHelper.showTriggerEditor(
|
||||
(trigger) => {
|
||||
console.log('Trigger saved from trigger editor:', trigger);
|
||||
saveTrigger({ detail: { trigger } });
|
||||
},
|
||||
() => {
|
||||
console.log('Trigger creation cancelled');
|
||||
}
|
||||
);
|
||||
} catch (error) {
|
||||
console.error('Error showing trigger editor:', error);
|
||||
alert('Error showing modal: ' + error.message);
|
||||
}
|
||||
}
|
||||
|
||||
// Edit an existing trigger
|
||||
function editTrigger(trigger: Trigger) {
|
||||
console.log('Editing trigger using ModalHelper:', trigger);
|
||||
try {
|
||||
ModalHelper.showTriggerEditor(
|
||||
(updatedTrigger) => {
|
||||
console.log('Trigger updated from trigger editor:', updatedTrigger);
|
||||
saveTrigger({ detail: { trigger: updatedTrigger } });
|
||||
},
|
||||
() => {
|
||||
console.log('Trigger edit cancelled');
|
||||
},
|
||||
trigger
|
||||
);
|
||||
} catch (error) {
|
||||
console.error('Error showing trigger editor:', error);
|
||||
alert('Error showing modal: ' + error.message);
|
||||
}
|
||||
}
|
||||
|
||||
// Save trigger
|
||||
function saveTrigger(event: CustomEvent) {
|
||||
const trigger = event.detail.trigger;
|
||||
triggerSystem.addTrigger(trigger);
|
||||
loadTriggers();
|
||||
showTriggerEditor = false;
|
||||
editingTrigger = null;
|
||||
}
|
||||
|
||||
// Delete trigger
|
||||
function deleteTrigger(triggerId: string) {
|
||||
if (confirm(`Are you sure you want to delete this trigger?`)) {
|
||||
triggerSystem.removeTrigger(triggerId);
|
||||
loadTriggers();
|
||||
}
|
||||
}
|
||||
|
||||
// Toggle keyboard shortcuts help
|
||||
function toggleKeyboardShortcutsHelp() {
|
||||
showKeyboardShortcutsHelp = !showKeyboardShortcutsHelp;
|
||||
}
|
||||
|
||||
// Toggle sidebar
|
||||
function toggleSidebar() {
|
||||
showSidebar = !showSidebar;
|
||||
uiSettings.update(settings => ({
|
||||
...settings,
|
||||
showSidebar
|
||||
}));
|
||||
}
|
||||
|
||||
// Toggle dark mode
|
||||
function toggleDarkMode() {
|
||||
uiSettings.update(settings => ({
|
||||
...settings,
|
||||
isDarkMode: !settings.isDarkMode
|
||||
}));
|
||||
}
|
||||
|
||||
// Toggle text-to-speech - minimal implementation
|
||||
function toggleTextToSpeech() {
|
||||
accessibilitySettings.update(settings => ({
|
||||
...settings,
|
||||
textToSpeech: !settings.textToSpeech
|
||||
}));
|
||||
}
|
||||
|
||||
// Update font size
|
||||
function updateFontSize(size: number) {
|
||||
accessibilitySettings.update(settings => ({
|
||||
...settings,
|
||||
fontSize: size
|
||||
}));
|
||||
}
|
||||
|
||||
// Handle keyboard navigation for sidebar tabs
|
||||
function handleSidebarTabKeydown(event: KeyboardEvent) {
|
||||
// Define the tab order
|
||||
const tabs = ['profiles', 'triggers', 'settings'];
|
||||
const currentIndex = tabs.indexOf(sidebarTab);
|
||||
|
||||
switch (event.key) {
|
||||
case 'ArrowRight':
|
||||
case 'ArrowDown':
|
||||
// Move to next tab
|
||||
event.preventDefault();
|
||||
const nextIndex = (currentIndex + 1) % tabs.length;
|
||||
sidebarTab = tabs[nextIndex];
|
||||
document.getElementById(`tab-${tabs[nextIndex]}`)?.focus();
|
||||
break;
|
||||
|
||||
case 'ArrowLeft':
|
||||
case 'ArrowUp':
|
||||
// Move to previous tab
|
||||
event.preventDefault();
|
||||
const prevIndex = (currentIndex - 1 + tabs.length) % tabs.length;
|
||||
sidebarTab = tabs[prevIndex];
|
||||
document.getElementById(`tab-${tabs[prevIndex]}`)?.focus();
|
||||
break;
|
||||
|
||||
case 'Home':
|
||||
// Move to first tab
|
||||
event.preventDefault();
|
||||
sidebarTab = tabs[0];
|
||||
document.getElementById(`tab-${tabs[0]}`)?.focus();
|
||||
break;
|
||||
|
||||
case 'End':
|
||||
// Move to last tab
|
||||
event.preventDefault();
|
||||
sidebarTab = tabs[tabs.length - 1];
|
||||
document.getElementById(`tab-${tabs[tabs.length - 1]}`)?.focus();
|
||||
break;
|
||||
|
||||
case 'Enter':
|
||||
case ' ':
|
||||
// Activate current tab
|
||||
event.preventDefault();
|
||||
// The click handler will handle the tab change
|
||||
break;
|
||||
|
||||
default:
|
||||
// Let other keys function normally
|
||||
break;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="mud-client">
|
||||
<header class="app-header">
|
||||
<div class="app-title">SvelteMUD Client</div>
|
||||
<div class="app-actions">
|
||||
<button class="btn btn-sm" on:click={toggleSidebar} aria-label="Toggle Sidebar">
|
||||
{showSidebar ? '⇦' : '⇨'}
|
||||
</button>
|
||||
<button class="btn btn-sm" on:click={toggleDarkMode} aria-label="Toggle Dark Mode">
|
||||
{$uiSettings.isDarkMode ? '☀️' : '🌙'}
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="mud-content">
|
||||
{#if showSidebar}
|
||||
<aside class="mud-sidebar">
|
||||
<div class="sidebar-tabs" role="tablist" aria-label="Sidebar tabs">
|
||||
<button
|
||||
class="sidebar-tab"
|
||||
id="tab-profiles"
|
||||
role="tab"
|
||||
aria-controls="panel-profiles"
|
||||
aria-selected={sidebarTab === 'profiles'}
|
||||
class:active={sidebarTab === 'profiles'}
|
||||
tabindex={sidebarTab === 'profiles' ? "0" : "-1"}
|
||||
on:click={() => sidebarTab = 'profiles'}
|
||||
on:keydown={handleSidebarTabKeydown}>
|
||||
Profiles
|
||||
</button>
|
||||
<button
|
||||
class="sidebar-tab"
|
||||
id="tab-triggers"
|
||||
role="tab"
|
||||
aria-controls="panel-triggers"
|
||||
aria-selected={sidebarTab === 'triggers'}
|
||||
class:active={sidebarTab === 'triggers'}
|
||||
tabindex={sidebarTab === 'triggers' ? "0" : "-1"}
|
||||
on:click={() => sidebarTab = 'triggers'}
|
||||
on:keydown={handleSidebarTabKeydown}>
|
||||
Triggers
|
||||
</button>
|
||||
<button
|
||||
class="sidebar-tab"
|
||||
id="tab-settings"
|
||||
role="tab"
|
||||
aria-controls="panel-settings"
|
||||
aria-selected={sidebarTab === 'settings'}
|
||||
class:active={sidebarTab === 'settings'}
|
||||
tabindex={sidebarTab === 'settings' ? "0" : "-1"}
|
||||
on:click={() => sidebarTab = 'settings'}
|
||||
on:keydown={handleSidebarTabKeydown}>
|
||||
Settings
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="sidebar-content">
|
||||
{#if sidebarTab === 'profiles'}
|
||||
<div
|
||||
id="panel-profiles"
|
||||
role="tabpanel"
|
||||
aria-labelledby="tab-profiles"
|
||||
tabindex="0">
|
||||
<div class="sidebar-header">
|
||||
<h3>MUD Profiles</h3>
|
||||
<button
|
||||
class="btn btn-sm btn-primary"
|
||||
on:click={() => {
|
||||
console.log('New Profile button clicked - using full profile editor');
|
||||
try {
|
||||
ModalHelper.showProfileEditor(
|
||||
(profile) => {
|
||||
console.log('Profile saved from profile editor:', profile);
|
||||
// Use the same saveProfile function for consistency
|
||||
saveProfile({ detail: { profile } });
|
||||
},
|
||||
() => {
|
||||
console.log('Profile creation cancelled');
|
||||
}
|
||||
);
|
||||
} catch (error) {
|
||||
console.error('Error showing profile editor:', error);
|
||||
alert('Error showing modal: ' + error.message);
|
||||
}
|
||||
}}>New Profile</button>
|
||||
</div>
|
||||
|
||||
<div class="profile-list">
|
||||
{#if $profiles.length === 0}
|
||||
<p class="no-items">No profiles found. Create one to get started.</p>
|
||||
{:else}
|
||||
{#each $profiles as profile (profile.id)}
|
||||
<div class="profile-item" class:active={$activeProfileId === profile.id}>
|
||||
<span class="profile-name">{profile.name}</span>
|
||||
<div class="profile-actions">
|
||||
<button class="btn btn-sm" on:click={() => editProfile(profile)} aria-label="Edit profile {profile.name}">✏️</button>
|
||||
<button class="btn btn-sm" on:click={() => deleteProfile(profile.id)} aria-label="Delete profile {profile.name}">🗑️</button>
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
{:else if sidebarTab === 'triggers'}
|
||||
<div
|
||||
id="panel-triggers"
|
||||
role="tabpanel"
|
||||
aria-labelledby="tab-triggers"
|
||||
tabindex="0">
|
||||
<div class="sidebar-header">
|
||||
<h3>Triggers</h3>
|
||||
<button class="btn btn-sm btn-primary" on:click={createTrigger}>New Trigger</button>
|
||||
</div>
|
||||
|
||||
<div class="trigger-list">
|
||||
{#if $triggers.length === 0}
|
||||
<p class="no-items">No triggers found. Create one to get started.</p>
|
||||
{:else}
|
||||
{#each $triggers as trigger (trigger.id)}
|
||||
<div class="trigger-item" class:disabled={!trigger.isEnabled}>
|
||||
<span class="trigger-name">{trigger.name}</span>
|
||||
<div class="trigger-info">
|
||||
<span class="trigger-pattern">{trigger.pattern}</span>
|
||||
{#if trigger.soundFile}
|
||||
<span class="trigger-sound" aria-label="Has sound">🔊</span>
|
||||
{/if}
|
||||
{#if trigger.highlightColor}
|
||||
<span class="trigger-highlight" style="background-color: {trigger.highlightColor}" aria-label="Highlight color"></span>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="trigger-actions">
|
||||
<button class="btn btn-sm" on:click={() => triggerSystem.setTriggerEnabled(trigger.id, !trigger.isEnabled)} aria-label="{trigger.isEnabled ? 'Disable' : 'Enable'} trigger {trigger.name}">
|
||||
{trigger.isEnabled ? '✓' : '✗'}
|
||||
</button>
|
||||
<button class="btn btn-sm" on:click={() => editTrigger(trigger)} aria-label="Edit trigger {trigger.name}">✏️</button>
|
||||
<button class="btn btn-sm" on:click={() => deleteTrigger(trigger.id)} aria-label="Delete trigger {trigger.name}">🗑️</button>
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
{:else if sidebarTab === 'settings'}
|
||||
<div
|
||||
id="panel-settings"
|
||||
role="tabpanel"
|
||||
aria-labelledby="tab-settings"
|
||||
tabindex="0">
|
||||
<div class="sidebar-header">
|
||||
<h3>Settings</h3>
|
||||
</div>
|
||||
|
||||
<div class="settings-list">
|
||||
<div class="setting-item">
|
||||
<span class="setting-name">Dark Mode</span>
|
||||
<label class="switch">
|
||||
<input type="checkbox" bind:checked={$uiSettings.isDarkMode}>
|
||||
<span class="slider round"></span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="setting-item">
|
||||
<span class="setting-name">Show Timestamps</span>
|
||||
<label class="switch">
|
||||
<input type="checkbox" bind:checked={$uiSettings.showTimestamps}>
|
||||
<span class="slider round"></span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="setting-item">
|
||||
<span class="setting-name">ANSI Colors</span>
|
||||
<label class="switch">
|
||||
<input type="checkbox" bind:checked={$uiSettings.ansiColor}>
|
||||
<span class="slider round"></span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="setting-item">
|
||||
<span class="setting-name">Font</span>
|
||||
<select bind:value={$uiSettings.font} class="form-control">
|
||||
<option value="monospace">Monospace</option>
|
||||
<option value="'Courier New', monospace">Courier New</option>
|
||||
<option value="'Roboto Mono', monospace">Roboto Mono</option>
|
||||
<option value="'Source Code Pro', monospace">Source Code Pro</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="setting-item">
|
||||
<span class="setting-name">Global Sound Volume</span>
|
||||
<div class="range-control">
|
||||
<input
|
||||
type="range"
|
||||
min="0"
|
||||
max="1"
|
||||
step="0.1"
|
||||
on:input={(e) => {
|
||||
// Debounce volume changes to avoid performance issues with rapid changes
|
||||
if (window.volumeDebounceTimeout) {
|
||||
clearTimeout(window.volumeDebounceTimeout);
|
||||
}
|
||||
|
||||
// Read value directly from the input
|
||||
const newVolume = parseFloat(e.target.value);
|
||||
|
||||
// Update the store with a slight delay to avoid excessive updates
|
||||
window.volumeDebounceTimeout = setTimeout(() => {
|
||||
uiSettings.update(settings => ({
|
||||
...settings,
|
||||
globalVolume: newVolume
|
||||
}));
|
||||
}, 100);
|
||||
}}
|
||||
bind:value={$uiSettings.globalVolume}
|
||||
>
|
||||
<span class="range-value">{($uiSettings.globalVolume * 100).toFixed(0)}%</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h4>Debugging</h4>
|
||||
|
||||
<div class="setting-item">
|
||||
<span class="setting-name">Show GMCP Messages</span>
|
||||
<label class="switch">
|
||||
<input type="checkbox" bind:checked={$uiSettings.debugGmcp}>
|
||||
<span class="slider round"></span>
|
||||
</label>
|
||||
<div class="setting-description">
|
||||
Shows GMCP protocol messages in the output window for debugging
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h4>Accessibility</h4>
|
||||
|
||||
<div class="setting-item">
|
||||
<span class="setting-name">Text-to-Speech</span>
|
||||
<label class="switch">
|
||||
<input type="checkbox" bind:checked={$accessibilitySettings.textToSpeech}>
|
||||
<span class="slider round"></span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="setting-item">
|
||||
<span class="setting-name">High Contrast</span>
|
||||
<label class="switch">
|
||||
<input type="checkbox" bind:checked={$accessibilitySettings.highContrast}>
|
||||
<span class="slider round"></span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="setting-item">
|
||||
<span class="setting-name">Font Size</span>
|
||||
<div class="range-control">
|
||||
<input
|
||||
type="range"
|
||||
min="12"
|
||||
max="24"
|
||||
step="1"
|
||||
bind:value={$accessibilitySettings.fontSize}
|
||||
>
|
||||
<span class="range-value">{$accessibilitySettings.fontSize}px</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{#if $accessibilitySettings.textToSpeech}
|
||||
<div class="setting-item">
|
||||
<span class="setting-name">Interrupt Speech on Enter</span>
|
||||
<label class="switch">
|
||||
<input type="checkbox" bind:checked={$accessibilitySettings.interruptSpeechOnEnter}>
|
||||
<span class="slider round"></span>
|
||||
</label>
|
||||
<div class="setting-description">
|
||||
Automatically stop speaking when the Enter key is pressed
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="setting-item">
|
||||
<span class="setting-name">Speech Rate</span>
|
||||
<div class="range-control">
|
||||
<input
|
||||
type="range"
|
||||
min="0.5"
|
||||
max="2"
|
||||
step="0.1"
|
||||
bind:value={$accessibilitySettings.speechRate}
|
||||
>
|
||||
<span class="range-value">{$accessibilitySettings.speechRate.toFixed(1)}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="setting-item">
|
||||
<span class="setting-name">Speech Pitch</span>
|
||||
<div class="range-control">
|
||||
<input
|
||||
type="range"
|
||||
min="0.5"
|
||||
max="2"
|
||||
step="0.1"
|
||||
bind:value={$accessibilitySettings.speechPitch}
|
||||
>
|
||||
<span class="range-value">{$accessibilitySettings.speechPitch.toFixed(1)}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="setting-item">
|
||||
<span class="setting-name">Speech Volume</span>
|
||||
<div class="range-control">
|
||||
<input
|
||||
type="range"
|
||||
min="0"
|
||||
max="1"
|
||||
step="0.1"
|
||||
bind:value={$accessibilitySettings.speechVolume}
|
||||
>
|
||||
<span class="range-value">{($accessibilitySettings.speechVolume * 100).toFixed(0)}%</span>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</aside>
|
||||
{/if}
|
||||
|
||||
<main class="mud-main">
|
||||
<MudMdi />
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- The modal will be created programmatically using DOM APIs -->
|
||||
|
||||
<style>
|
||||
.mud-client {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.app-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0.5rem 1rem;
|
||||
background-color: var(--color-bg-alt);
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
.app-title {
|
||||
font-size: 1.25rem;
|
||||
font-weight: bold;
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.app-actions {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.mud-content {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.mud-sidebar {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 250px;
|
||||
border-right: 1px solid var(--color-border);
|
||||
background-color: var(--color-bg);
|
||||
}
|
||||
|
||||
.sidebar-tabs {
|
||||
display: flex;
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
.sidebar-tab {
|
||||
flex: 1;
|
||||
padding: 0.5rem;
|
||||
text-align: center;
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
.sidebar-tab.active {
|
||||
color: var(--color-text);
|
||||
border-bottom: 2px solid var(--color-primary);
|
||||
}
|
||||
|
||||
.sidebar-tab:focus {
|
||||
outline: 2px solid var(--color-primary);
|
||||
outline-offset: -2px;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.sidebar-tab:focus:not(:focus-visible) {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
[role="tabpanel"]:focus {
|
||||
outline: 2px solid var(--color-primary);
|
||||
outline-offset: -2px;
|
||||
}
|
||||
|
||||
[role="tabpanel"]:focus:not(:focus-visible) {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.sidebar-content {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.sidebar-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.sidebar-header h3 {
|
||||
margin: 0;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.profile-list, .trigger-list, .settings-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.profile-item, .trigger-item, .setting-item {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0.5rem;
|
||||
border-radius: var(--border-radius);
|
||||
background-color: var(--color-input-bg);
|
||||
border: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
.setting-description {
|
||||
flex-basis: 100%;
|
||||
margin-top: 5px;
|
||||
font-size: 0.85rem;
|
||||
color: var(--color-text-muted);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.profile-item.active {
|
||||
border-color: var(--color-primary);
|
||||
background-color: rgba(33, 150, 243, 0.1);
|
||||
}
|
||||
|
||||
.profile-name, .trigger-name, .setting-name {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.profile-actions, .trigger-actions {
|
||||
display: flex;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.trigger-item.disabled {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.trigger-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
margin-top: 0.25rem;
|
||||
font-size: 0.9rem;
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
.trigger-pattern {
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.trigger-highlight {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
.no-items {
|
||||
color: var(--color-text-muted);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.mud-main {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* Switch styling */
|
||||
.switch {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 40px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
.switch input {
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.slider {
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: #ccc;
|
||||
transition: 0.4s;
|
||||
}
|
||||
|
||||
.slider:before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
left: 4px;
|
||||
bottom: 4px;
|
||||
background-color: white;
|
||||
transition: 0.4s;
|
||||
}
|
||||
|
||||
input:checked + .slider {
|
||||
background-color: var(--color-primary);
|
||||
}
|
||||
|
||||
input:focus + .slider {
|
||||
box-shadow: 0 0 1px var(--color-primary);
|
||||
}
|
||||
|
||||
input:checked + .slider:before {
|
||||
transform: translateX(16px);
|
||||
}
|
||||
|
||||
.slider.round {
|
||||
border-radius: 24px;
|
||||
}
|
||||
|
||||
.slider.round:before {
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.range-control {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.range-control input {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.range-value {
|
||||
min-width: 40px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
/* Form elements for modals */
|
||||
.form-row {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.form-row label {
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.form-row input {
|
||||
width: 100%;
|
||||
padding: 8px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.buttons {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.buttons button {
|
||||
padding: 8px 16px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.buttons button:first-child {
|
||||
background-color: #f5f5f5;
|
||||
border: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.buttons button:last-child {
|
||||
background-color: #2196f3;
|
||||
color: white;
|
||||
border: none;
|
||||
}
|
||||
</style>
|
||||
36
src/routes/api/mud-connect/+server.ts
Normal file
36
src/routes/api/mud-connect/+server.ts
Normal file
@@ -0,0 +1,36 @@
|
||||
import { error } from '@sveltejs/kit';
|
||||
import type { RequestHandler } from './$types';
|
||||
import * as net from 'net';
|
||||
|
||||
// This is a server endpoint to handle MUD connections
|
||||
export const POST: RequestHandler = async ({ request }) => {
|
||||
try {
|
||||
const data = await request.json();
|
||||
const { host, port } = data;
|
||||
|
||||
if (!host || !port) {
|
||||
throw error(400, 'Missing host or port');
|
||||
}
|
||||
|
||||
// Validate host and port
|
||||
if (typeof host !== 'string' || typeof port !== 'number') {
|
||||
throw error(400, 'Invalid host or port');
|
||||
}
|
||||
|
||||
// In a real implementation, we would establish a WebSocket connection
|
||||
// and proxy data to a telnet connection here.
|
||||
// For security reasons, this would typically be done on the server side.
|
||||
|
||||
return new Response(JSON.stringify({
|
||||
success: true,
|
||||
message: `Connection request received for ${host}:${port}`
|
||||
}), {
|
||||
headers: {
|
||||
'content-type': 'application/json'
|
||||
}
|
||||
});
|
||||
} catch (err) {
|
||||
console.error('Error connecting to MUD server:', err);
|
||||
throw error(500, 'Failed to connect to MUD server');
|
||||
}
|
||||
};
|
||||
27
src/routes/api/mud-ws/+server.ts
Normal file
27
src/routes/api/mud-ws/+server.ts
Normal file
@@ -0,0 +1,27 @@
|
||||
import { error } from '@sveltejs/kit';
|
||||
import type { RequestHandler } from './$types';
|
||||
|
||||
// WebSocket server for MUD connections
|
||||
export const GET: RequestHandler = async ({ request, url }) => {
|
||||
const host = url.searchParams.get('host');
|
||||
const port = url.searchParams.get('port');
|
||||
const useSSL = url.searchParams.get('useSSL') === 'true';
|
||||
|
||||
if (!host || !port) {
|
||||
throw error(400, 'Missing host or port parameters');
|
||||
}
|
||||
|
||||
// In a real implementation, we would establish a WebSocket proxy to the MUD server
|
||||
// Since SvelteKit server endpoints don't natively support WebSockets,
|
||||
// this endpoint would be used to create a connection in a dedicated WebSocket server
|
||||
|
||||
// Use proper response status and headers for WebSocket upgrade
|
||||
return new Response(null, {
|
||||
status: 101,
|
||||
headers: {
|
||||
'Connection': 'Upgrade',
|
||||
'Upgrade': 'websocket',
|
||||
'Sec-WebSocket-Accept': 'placeholder-for-real-implementation' // In a real implementation, this would be calculated
|
||||
}
|
||||
});
|
||||
};
|
||||
240
src/routes/websocket-test/+page.svelte
Normal file
240
src/routes/websocket-test/+page.svelte
Normal file
@@ -0,0 +1,240 @@
|
||||
<script>
|
||||
import { onMount } from 'svelte';
|
||||
|
||||
let messages = [];
|
||||
let status = 'Disconnected';
|
||||
let errorMessage = '';
|
||||
let socket = null;
|
||||
|
||||
// Connect to the WebSocket server
|
||||
function connect() {
|
||||
try {
|
||||
// Clear previous state
|
||||
status = 'Connecting...';
|
||||
errorMessage = '';
|
||||
messages = [];
|
||||
|
||||
// Create WebSocket connection to the standalone server on port 3001
|
||||
const wsProtocol = window.location.protocol === 'https:' ? 'wss' : 'ws';
|
||||
const wsHost = `${window.location.hostname}:3001`;
|
||||
const url = `${wsProtocol}://${wsHost}/mud-ws?host=example.com&port=23&useSSL=false`;
|
||||
|
||||
addMessage('System', `Connecting to ${url}`);
|
||||
|
||||
socket = new WebSocket(url);
|
||||
|
||||
// Connection opened
|
||||
socket.addEventListener('open', (event) => {
|
||||
status = 'Connected';
|
||||
addMessage('System', 'Connection established');
|
||||
});
|
||||
|
||||
// Listen for messages
|
||||
socket.addEventListener('message', (event) => {
|
||||
const text = event.data instanceof Blob
|
||||
? '[Binary data]'
|
||||
: event.data;
|
||||
addMessage('Server', text);
|
||||
});
|
||||
|
||||
// Connection closed
|
||||
socket.addEventListener('close', (event) => {
|
||||
status = 'Disconnected';
|
||||
addMessage('System', `Connection closed: ${event.code}`);
|
||||
});
|
||||
|
||||
// Connection error
|
||||
socket.addEventListener('error', (event) => {
|
||||
status = 'Error';
|
||||
errorMessage = 'Connection error, check console for details';
|
||||
addMessage('System', 'Connection error');
|
||||
});
|
||||
} catch (error) {
|
||||
status = 'Error';
|
||||
errorMessage = error.message;
|
||||
addMessage('System', `Error: ${error.message}`);
|
||||
}
|
||||
}
|
||||
|
||||
// Send a test message
|
||||
function sendMessage() {
|
||||
if (socket && socket.readyState === WebSocket.OPEN) {
|
||||
const testMessage = 'Test message from client';
|
||||
socket.send(testMessage);
|
||||
addMessage('Client', testMessage);
|
||||
} else {
|
||||
errorMessage = 'Socket is not connected';
|
||||
}
|
||||
}
|
||||
|
||||
// Disconnect
|
||||
function disconnect() {
|
||||
if (socket) {
|
||||
socket.close();
|
||||
socket = null;
|
||||
}
|
||||
}
|
||||
|
||||
// Add message to the log
|
||||
function addMessage(source, text) {
|
||||
messages = [...messages, { source, text, timestamp: new Date() }];
|
||||
}
|
||||
|
||||
// Cleanup on component unmount
|
||||
onMount(() => {
|
||||
return () => {
|
||||
if (socket) {
|
||||
socket.close();
|
||||
}
|
||||
};
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="websocket-test">
|
||||
<h1>WebSocket Test Page</h1>
|
||||
<p>This page tests the standalone WebSocket server at port 3001</p>
|
||||
|
||||
<div class="connection-status">
|
||||
<strong>Status:</strong> <span class={status.toLowerCase()}>{status}</span>
|
||||
{#if errorMessage}
|
||||
<div class="error">{errorMessage}</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div class="controls">
|
||||
<button on:click={connect} disabled={status === 'Connected' || status === 'Connecting...'}>
|
||||
Connect
|
||||
</button>
|
||||
<button on:click={sendMessage} disabled={status !== 'Connected'}>
|
||||
Send Test Message
|
||||
</button>
|
||||
<button on:click={disconnect} disabled={status !== 'Connected'}>
|
||||
Disconnect
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="message-log">
|
||||
<h2>Message Log</h2>
|
||||
{#if messages.length === 0}
|
||||
<p class="empty-log">No messages yet. Connect and send a test message.</p>
|
||||
{:else}
|
||||
<div class="messages">
|
||||
{#each messages as message}
|
||||
<div class="message">
|
||||
<div class="message-header">
|
||||
<span class="source">{message.source}</span>
|
||||
<span class="timestamp">{message.timestamp.toLocaleTimeString()}</span>
|
||||
</div>
|
||||
<pre class="message-text">{message.text}</pre>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.websocket-test {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
|
||||
Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
|
||||
}
|
||||
|
||||
.connection-status {
|
||||
margin: 20px 0;
|
||||
padding: 10px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.connected {
|
||||
color: green;
|
||||
}
|
||||
|
||||
.disconnected {
|
||||
color: gray;
|
||||
}
|
||||
|
||||
.connecting\.\.\. {
|
||||
color: blue;
|
||||
}
|
||||
|
||||
.error {
|
||||
color: red;
|
||||
}
|
||||
|
||||
.controls {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
button {
|
||||
padding: 8px 16px;
|
||||
background-color: #4caf50;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button:disabled {
|
||||
background-color: #cccccc;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.message-log {
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
padding: 10px;
|
||||
max-height: 400px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.empty-log {
|
||||
color: #888;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.messages {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.message {
|
||||
border-bottom: 1px solid #eee;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
.message:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.message-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 0.9em;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.source {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.timestamp {
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.message-text {
|
||||
margin: 0;
|
||||
padding: 10px;
|
||||
background-color: #f8f8f8;
|
||||
border-radius: 4px;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-word;
|
||||
font-family: monospace;
|
||||
}
|
||||
</style>
|
||||
212
src/websocket-server.js
Normal file
212
src/websocket-server.js
Normal file
@@ -0,0 +1,212 @@
|
||||
import { WebSocketServer } from 'ws';
|
||||
import * as net from 'net';
|
||||
import * as tls from 'tls';
|
||||
import http from 'http';
|
||||
import { parse } from 'url';
|
||||
|
||||
// Create HTTP server
|
||||
const server = http.createServer();
|
||||
|
||||
// Create WebSocket server
|
||||
const wss = new WebSocketServer({ noServer: true });
|
||||
|
||||
// Active connections and their proxies
|
||||
const connections = new Map();
|
||||
|
||||
// Handle WebSocket connections
|
||||
wss.on('connection', (ws, req, mudHost, mudPort, useSSL) => {
|
||||
console.log(`WebSocket connection established for ${mudHost}:${mudPort} (SSL: ${useSSL})`);
|
||||
|
||||
// Create a unique ID for this connection
|
||||
const connectionId = `${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
|
||||
|
||||
// Special handling for test connections
|
||||
if (mudHost === 'example.com' && mudPort === '23') {
|
||||
console.log('Test connection detected - using echo server mode');
|
||||
|
||||
// Send welcome message
|
||||
ws.send('Hello from WebSocket test server! This is an echo server.');
|
||||
|
||||
// Echo back messages
|
||||
ws.on('message', (message) => {
|
||||
console.log('Test server received:', message.toString());
|
||||
ws.send(`Echo: ${message.toString()}`);
|
||||
});
|
||||
|
||||
// Handle close
|
||||
ws.on('close', () => {
|
||||
console.log('Test connection closed');
|
||||
connections.delete(connectionId);
|
||||
});
|
||||
|
||||
// Store the connection (without a socket)
|
||||
connections.set(connectionId, { ws, testMode: true });
|
||||
return;
|
||||
}
|
||||
|
||||
let socket;
|
||||
try {
|
||||
// Create a TCP socket connection to the MUD server
|
||||
// Use tls for SSL connections, net for regular connections
|
||||
socket = useSSL
|
||||
? tls.connect({ host: mudHost, port: parseInt(mudPort), rejectUnauthorized: false })
|
||||
: net.createConnection({ host: mudHost, port: parseInt(mudPort) });
|
||||
|
||||
// Add error handler
|
||||
socket.on('error', (error) => {
|
||||
console.error(`Socket error for ${mudHost}:${mudPort}:`, error.message);
|
||||
// Send error to client
|
||||
if (ws.readyState === 1) {
|
||||
ws.send(Buffer.from(`ERROR: Connection to MUD server failed: ${error.message}\r\n`));
|
||||
setTimeout(() => {
|
||||
if (ws.readyState === 1) ws.close();
|
||||
}, 1000);
|
||||
}
|
||||
// Remove from connections map
|
||||
connections.delete(connectionId);
|
||||
});
|
||||
|
||||
// Store the connection
|
||||
connections.set(connectionId, { ws, socket });
|
||||
} catch (error) {
|
||||
console.error(`Error creating socket connection: ${error.message}`);
|
||||
if (ws.readyState === 1) {
|
||||
ws.send(Buffer.from(`ERROR: Failed to connect to MUD server: ${error.message}\r\n`));
|
||||
ws.close();
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
// Handle data from the MUD server - only in regular mode, not test mode
|
||||
if (socket) {
|
||||
socket.on('data', (data) => {
|
||||
// Check for GMCP data (IAC SB GMCP) - very basic check for debugging
|
||||
// IAC = 255, SB = 250, GMCP = 201
|
||||
let isGmcp = false;
|
||||
for (let i = 0; i < data.length - 2; i++) {
|
||||
if (data[i] === 255 && data[i+1] === 250 && data[i+2] === 201) {
|
||||
isGmcp = true;
|
||||
console.log('WebSocket server: Detected GMCP data in server response');
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
// Forward data to the WebSocket client if it's still open
|
||||
if (ws.readyState === 1) { // WebSocket.OPEN
|
||||
ws.send(data);
|
||||
console.log(`WebSocket server: Sent ${data.length} bytes to client${isGmcp ? ' (contains GMCP data)' : ''}`);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Socket error handler already defined above
|
||||
|
||||
// Handle socket close
|
||||
if (socket) {
|
||||
socket.on('close', () => {
|
||||
console.log(`MUD connection closed for ${mudHost}:${mudPort}`);
|
||||
// Close WebSocket if it's still open
|
||||
if (ws.readyState === 1) {
|
||||
ws.close();
|
||||
}
|
||||
// Remove from connections map
|
||||
connections.delete(connectionId);
|
||||
});
|
||||
}
|
||||
|
||||
// Handle WebSocket messages (data from client to server)
|
||||
ws.on('message', (message) => {
|
||||
try {
|
||||
// Skip if this is a test connection (already handled in the test mode section)
|
||||
const conn = connections.get(connectionId);
|
||||
if (conn.testMode) return;
|
||||
|
||||
// Check for GMCP data (IAC SB GMCP) in client messages
|
||||
let isGmcp = false;
|
||||
if (message instanceof Buffer || message instanceof Uint8Array) {
|
||||
for (let i = 0; i < message.length - 2; i++) {
|
||||
if (message[i] === 255 && message[i+1] === 250 && message[i+2] === 201) {
|
||||
isGmcp = true;
|
||||
console.log('WebSocket server: Detected GMCP data in client message');
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Forward data to the MUD server
|
||||
// The message might be Buffer, ArrayBuffer, or string
|
||||
if (conn.socket && conn.socket.writable) {
|
||||
conn.socket.write(message);
|
||||
console.log(`WebSocket server: Sent ${message.length} bytes to MUD server${isGmcp ? ' (contains GMCP data)' : ''}`);
|
||||
} else {
|
||||
console.error('Socket not writable, cannot send data to MUD server');
|
||||
if (ws.readyState === 1) { // WebSocket.OPEN
|
||||
ws.send(Buffer.from(`ERROR: Cannot send data to MUD server: Socket not connected\r\n`));
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error forwarding message to MUD server:', error);
|
||||
if (ws.readyState === 1) { // WebSocket.OPEN
|
||||
ws.send(Buffer.from(`ERROR: Failed to send data to MUD server: ${error.message}\r\n`));
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Handle WebSocket close
|
||||
ws.on('close', () => {
|
||||
console.log(`WebSocket closed for ${mudHost}:${mudPort}`);
|
||||
// Close socket if it's still open
|
||||
const conn = connections.get(connectionId);
|
||||
if (conn && conn.socket) {
|
||||
conn.socket.end();
|
||||
}
|
||||
// Remove from connections map
|
||||
connections.delete(connectionId);
|
||||
});
|
||||
|
||||
// Handle WebSocket errors
|
||||
ws.on('error', (error) => {
|
||||
console.error(`WebSocket error for ${mudHost}:${mudPort}:`, error.message);
|
||||
// Close socket on error
|
||||
const conn = connections.get(connectionId);
|
||||
if (conn && conn.socket) {
|
||||
conn.socket.end();
|
||||
}
|
||||
// Remove from connections map
|
||||
connections.delete(connectionId);
|
||||
});
|
||||
});
|
||||
|
||||
// Handle HTTP server upgrade (WebSocket handshake)
|
||||
server.on('upgrade', (request, socket, head) => {
|
||||
// Parse URL to get query parameters
|
||||
const { pathname, query } = parse(request.url, true);
|
||||
|
||||
// Only handle WebSocket connections to /mud-ws
|
||||
if (pathname === '/mud-ws') {
|
||||
// Extract MUD server details from query parameters
|
||||
const { host, port, useSSL } = query;
|
||||
|
||||
if (!host || !port) {
|
||||
socket.write('HTTP/1.1 400 Bad Request\r\n\r\n');
|
||||
socket.destroy();
|
||||
return;
|
||||
}
|
||||
|
||||
// Handle WebSocket upgrade
|
||||
wss.handleUpgrade(request, socket, head, (ws) => {
|
||||
wss.emit('connection', ws, request, host, port, useSSL === 'true');
|
||||
});
|
||||
} else {
|
||||
// For other upgrades (not to /mud-ws), close the connection
|
||||
socket.destroy();
|
||||
}
|
||||
});
|
||||
|
||||
// Start the WebSocket server
|
||||
const PORT = process.env.WS_PORT || 3001;
|
||||
server.listen(PORT, () => {
|
||||
console.log(`WebSocket server is running on port ${PORT}`);
|
||||
});
|
||||
|
||||
export default server;
|
||||
44
start-server.js
Normal file
44
start-server.js
Normal file
@@ -0,0 +1,44 @@
|
||||
import { spawn } from 'child_process';
|
||||
import { dirname } from 'path';
|
||||
import { fileURLToPath } from 'url';
|
||||
|
||||
const __dirname = dirname(fileURLToPath(import.meta.url));
|
||||
|
||||
// Start the WebSocket server
|
||||
console.log('Starting WebSocket server');
|
||||
const wsServer = spawn('node', ['src/websocket-server.js'], {
|
||||
stdio: 'inherit',
|
||||
shell: true,
|
||||
cwd: __dirname
|
||||
});
|
||||
|
||||
// Start the SvelteKit dev server
|
||||
console.log('Starting SvelteKit dev server');
|
||||
const sveltekit = spawn('npm', ['run', 'dev'], {
|
||||
stdio: 'inherit',
|
||||
shell: true,
|
||||
cwd: __dirname
|
||||
});
|
||||
|
||||
// Handle process exit
|
||||
process.on('exit', () => {
|
||||
console.log('Shutting down servers...');
|
||||
wsServer.kill();
|
||||
sveltekit.kill();
|
||||
});
|
||||
|
||||
// Handle ctrl+c
|
||||
process.on('SIGINT', () => {
|
||||
console.log('Received SIGINT, shutting down servers...');
|
||||
wsServer.kill('SIGINT');
|
||||
sveltekit.kill('SIGINT');
|
||||
process.exit(0);
|
||||
});
|
||||
|
||||
// Handle termination
|
||||
process.on('SIGTERM', () => {
|
||||
console.log('Received SIGTERM, shutting down servers...');
|
||||
wsServer.kill('SIGTERM');
|
||||
sveltekit.kill('SIGTERM');
|
||||
process.exit(0);
|
||||
});
|
||||
1
static/favicon.png
Normal file
1
static/favicon.png
Normal file
@@ -0,0 +1 @@
|
||||
iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAFt0lEQVRYR8WXe2xTVRzHP+fe29u1a7t2L8YGY2MvGGMTJgPGYPgCISoKaqIkJIZoUIkk/qHRqEGNJlGJiSb+IRoRDCoGlYmaIKgzKBBwjrGNsY5t7Nmu7V7t+rj3Hk/vbde1a0sZ0JM06f313t/3+/3O9/c7R+J/HtL/6V9oaS542xgdyNKlsKmEyvpOWuqSXcSzwMtAkRxnpgHYD2wE9gAaeQKZ0AJvG80DWbIk4a6vQw5kgpyD7KgAqQ7YAqxKdj0hAW8b9wI7GH6kHmlWKZKU3NW4aXTwpfEZbgW0VYNVgB8IBPwMDw3R5+r5BniipwUt2W1SFvC28RYwp2zObOY8vQizxZS0+ESGvr4B9r+2h+unuwDeABoHBgbw+/x4PB58Ph+SJFFdXU1ZWRl5eXnvAVtTE5wQGMefB86WlpQwc9H9VFTPSe12wux87Cgnjp4ACIwFSJIkCgsLsdvt2Gw2DAZDsrM3gdWpJMYJ+Nr4GNhQs6iaiiW1o4vP9qXTycflX9Df70m+mGazGafTSXl5OYpyS/4E8CTQnM5XRgK+Nj4Ani+vKMdZX0dOTo6+qQYDtLZCczMMDEBtLVRURCPwYMslDr7+FTAEbAeagNDo4uLmer2ejBZIS8Dr5u1M56XHl7FwdrG+4cmT0NwcjUDT4PJlcLth+XIwm/EHA3y37xTff/YzcANYe2A/n3s8Hk6dOsXAwABLly6loKBAJPkZ4N10BDIS8AfcVNfNZGN9DYrJBGfORIOPjqtXYcYMqKoCWWbI5+fg/pOcPnpW53hgPx95vV6OHTuGz+fTvxcUFLBixQpMJhPAx8Da1DgkJSDw7wJ2FB6tZE55oT54/DisXQsWC1y7BkNDUFgIc+dCQQGSHVweD4c/bObMb3/p8fs/Yufw8DB+vx+fz0dOTg4mkwmTyaRbQUQEONETUCrQvwNeqph3F+WLavQJTU1w7Bi88grs3Kl/v3ED3nwTnn0WqqsBmTOtHXz83TlaLlyPEtjPewKwICAijnbnypUrOhGLxZLp4N9MIiDwfwpsnuaMRXdXTtcHWlpAKL6pCe67L0pg3z549FF9Tl3dDB5/kG9O/8n+o3/Q3tUb9bF/H58GAgH9XETCbreTl5envz9+/LjoF52ZQN8SgRH8R5w52dzlEGq/fVRXw/nzsGQJfPEFiJDX1UFfH8ydRygUotfj4/CZK+w7donff++KHvzAB3v1cwvQbrcLFYwJvfj+Pc1+rBnWtAgI/O8DT5aVwjSniFfMCpLok1pbYd48sFohGIRwWP9ss6GFQwRDYQKBIP5AiF5PgO7eIdq7Bjh/uYs/2m9G8D+4/6PdIgLi/CISOTk5WK1WPRoiiQcPHhT4DwDPpJ5fEhbYNqV0Ck/M1PTeNycnjyWVczCIVcfCIfALAKlkXAMEbgG8q7uP3r4heoZCXLzaxe9tN6MH37/7VYE/ODg4cmbRMcUZxTmF55SUlLB69eqI0l5IJhARgQ2AuzBf5hGnxJ34Jy1Dp8WN18BfcPPNz3wBvJmIP5H+hwDnzQH3HbWwnMVb32bqnElOL5FrwSCXWy9w5I2t+HpdCMXvnCz+0QSWCfzHj7DtyaNUOuyTuz0EvXRc/5sdyx8m6OsTFtg2ma7HisBm4Fnuq8JZv0QvuTuHhnG3uelocyFJ0NHuoq3NRaXDPl7nEQ0o8DfQdgKO/nzzVvl39uf3IitXO5HVG8iSAb+Pnu4evUPebXdSXt7/1Zi9YKLSuyVOG0/bA66YXaZXrQGfF5G2qY5yrFbRqafehnECYiKsUwQfizqCruQdWw5jCfjaeBE4YrPbWLBoIc7KSmw2G6qq8teFC5w9cwaPxwPQKFrxZFlIJDBbqCBHkZkty9QaDNSKdhwK646ut12l5WIrXZ2doj+8DfSOVwpTC32S9TnAY0ANUA2IdzVAPn2unh5gP/BVuovkX9mFoLBrYV8CAAAAAElFTkSuQmCC
|
||||
1
static/icons/icon-128x128.png
Normal file
1
static/icons/icon-128x128.png
Normal file
File diff suppressed because one or more lines are too long
1
static/icons/icon-192x192.png
Normal file
1
static/icons/icon-192x192.png
Normal file
File diff suppressed because one or more lines are too long
5
static/icons/icon-512x512.svg
Normal file
5
static/icons/icon-512x512.svg
Normal file
@@ -0,0 +1,5 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512">
|
||||
<rect width="512" height="512" fill="#282a36" rx="64" ry="64" />
|
||||
<text x="256" y="300" font-family="Arial, sans-serif" font-size="240" text-anchor="middle" fill="#6272a4">MUD</text>
|
||||
<path d="M128 96 L384 96 L256 224 Z" fill="#ff79c6" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 337 B |
59
static/manifest.json
Normal file
59
static/manifest.json
Normal file
@@ -0,0 +1,59 @@
|
||||
{
|
||||
"name": "SvelteMUD Client",
|
||||
"short_name": "SvelteMUD",
|
||||
"description": "A modern MUD client built with Svelte",
|
||||
"start_url": "/",
|
||||
"display": "standalone",
|
||||
"background_color": "#282a36",
|
||||
"theme_color": "#6272a4",
|
||||
"icons": [
|
||||
{
|
||||
"src": "icons/icon-72x72.png",
|
||||
"sizes": "72x72",
|
||||
"type": "image/png",
|
||||
"purpose": "any maskable"
|
||||
},
|
||||
{
|
||||
"src": "icons/icon-96x96.png",
|
||||
"sizes": "96x96",
|
||||
"type": "image/png",
|
||||
"purpose": "any maskable"
|
||||
},
|
||||
{
|
||||
"src": "icons/icon-128x128.png",
|
||||
"sizes": "128x128",
|
||||
"type": "image/png",
|
||||
"purpose": "any maskable"
|
||||
},
|
||||
{
|
||||
"src": "icons/icon-144x144.png",
|
||||
"sizes": "144x144",
|
||||
"type": "image/png",
|
||||
"purpose": "any maskable"
|
||||
},
|
||||
{
|
||||
"src": "icons/icon-152x152.png",
|
||||
"sizes": "152x152",
|
||||
"type": "image/png",
|
||||
"purpose": "any maskable"
|
||||
},
|
||||
{
|
||||
"src": "icons/icon-192x192.png",
|
||||
"sizes": "192x192",
|
||||
"type": "image/png",
|
||||
"purpose": "any maskable"
|
||||
},
|
||||
{
|
||||
"src": "icons/icon-384x384.png",
|
||||
"sizes": "384x384",
|
||||
"type": "image/png",
|
||||
"purpose": "any maskable"
|
||||
},
|
||||
{
|
||||
"src": "icons/icon-512x512.png",
|
||||
"sizes": "512x512",
|
||||
"type": "image/png",
|
||||
"purpose": "any maskable"
|
||||
}
|
||||
]
|
||||
}
|
||||
95
static/pwa-loading.html
Normal file
95
static/pwa-loading.html
Normal file
@@ -0,0 +1,95 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>SvelteMUD - Loading</title>
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
|
||||
background-color: #282a36;
|
||||
color: #f8f8f2;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.logo {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
background-color: #282a36;
|
||||
border-radius: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 20px;
|
||||
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
|
||||
animation: pulse 2s infinite;
|
||||
}
|
||||
|
||||
.logo-text {
|
||||
font-size: 36px;
|
||||
font-weight: bold;
|
||||
color: #ff79c6;
|
||||
text-shadow: 0 0 10px rgba(255, 121, 198, 0.5);
|
||||
}
|
||||
|
||||
.loading-text {
|
||||
font-size: 18px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.loading-spinner {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
border: 3px solid #50fa7b;
|
||||
border-top-color: transparent;
|
||||
animation: spin 1s linear infinite;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0% {
|
||||
transform: scale(1);
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
100% {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="logo">
|
||||
<div class="logo-text">MUD</div>
|
||||
</div>
|
||||
<h1>SvelteMUD Client</h1>
|
||||
<div class="loading-text">Loading your MUD client...</div>
|
||||
<div class="loading-spinner"></div>
|
||||
|
||||
<script>
|
||||
// Redirect to the main app after loading
|
||||
window.addEventListener('load', () => {
|
||||
setTimeout(() => {
|
||||
window.location.href = '/';
|
||||
}, 2000); // Redirect after 2 seconds
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
35
static/register-sw.js
Normal file
35
static/register-sw.js
Normal file
@@ -0,0 +1,35 @@
|
||||
// Check if service workers are supported
|
||||
if ('serviceWorker' in navigator) {
|
||||
window.addEventListener('load', () => {
|
||||
navigator.serviceWorker.register('/service-worker.js')
|
||||
.then(registration => {
|
||||
console.log('Service Worker registered with scope:', registration.scope);
|
||||
|
||||
// Check for updates to the Service Worker
|
||||
registration.addEventListener('updatefound', () => {
|
||||
const newWorker = registration.installing;
|
||||
console.log('Service Worker update found!');
|
||||
|
||||
newWorker.addEventListener('statechange', () => {
|
||||
if (newWorker.state === 'installed') {
|
||||
if (navigator.serviceWorker.controller) {
|
||||
// New content is available, notify user
|
||||
console.log('New version available! Reload to update.');
|
||||
|
||||
// Optionally, display a notification to the user
|
||||
if (window.confirm('A new version of this app is available. Reload to update?')) {
|
||||
window.location.reload();
|
||||
}
|
||||
} else {
|
||||
// First time install
|
||||
console.log('App is now available offline!');
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Service Worker registration failed:', error);
|
||||
});
|
||||
});
|
||||
}
|
||||
98
static/service-worker.js
Normal file
98
static/service-worker.js
Normal file
@@ -0,0 +1,98 @@
|
||||
// Service worker for SvelteMUD Client PWA
|
||||
const CACHE_NAME = 'svelte-mud-v1';
|
||||
const ASSETS_TO_CACHE = [
|
||||
'/',
|
||||
'/index.html',
|
||||
'/manifest.json',
|
||||
'/favicon.ico',
|
||||
'/global.css',
|
||||
'/build/bundle.css',
|
||||
'/build/bundle.js'
|
||||
];
|
||||
|
||||
// Install event - cache critical assets
|
||||
self.addEventListener('install', (event) => {
|
||||
event.waitUntil(
|
||||
caches.open(CACHE_NAME)
|
||||
.then((cache) => {
|
||||
return cache.addAll(ASSETS_TO_CACHE);
|
||||
})
|
||||
.then(() => {
|
||||
return self.skipWaiting();
|
||||
})
|
||||
);
|
||||
});
|
||||
|
||||
// Activate event - clean up old caches
|
||||
self.addEventListener('activate', (event) => {
|
||||
event.waitUntil(
|
||||
caches.keys().then((cacheNames) => {
|
||||
return Promise.all(
|
||||
cacheNames.map((cacheName) => {
|
||||
if (cacheName !== CACHE_NAME) {
|
||||
return caches.delete(cacheName);
|
||||
}
|
||||
})
|
||||
);
|
||||
}).then(() => {
|
||||
return self.clients.claim();
|
||||
})
|
||||
);
|
||||
});
|
||||
|
||||
// Fetch event - serve from cache if available, otherwise fetch from network
|
||||
self.addEventListener('fetch', (event) => {
|
||||
// Skip cross-origin requests
|
||||
if (!event.request.url.startsWith(self.location.origin) ||
|
||||
event.request.method !== 'GET') {
|
||||
return;
|
||||
}
|
||||
|
||||
// For navigation requests (HTML pages), use a network-first strategy
|
||||
if (event.request.mode === 'navigate') {
|
||||
event.respondWith(
|
||||
fetch(event.request)
|
||||
.catch(() => {
|
||||
return caches.match(event.request);
|
||||
})
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
// For all other requests, use a cache-first strategy
|
||||
event.respondWith(
|
||||
caches.match(event.request)
|
||||
.then((response) => {
|
||||
if (response) {
|
||||
return response;
|
||||
}
|
||||
|
||||
// Clone the request because it's a one-time use stream
|
||||
const fetchRequest = event.request.clone();
|
||||
|
||||
return fetch(fetchRequest).then((response) => {
|
||||
// Check if valid response
|
||||
if (!response || response.status !== 200 || response.type !== 'basic') {
|
||||
return response;
|
||||
}
|
||||
|
||||
// Clone the response because it's a one-time use stream
|
||||
const responseToCache = response.clone();
|
||||
|
||||
caches.open(CACHE_NAME)
|
||||
.then((cache) => {
|
||||
cache.put(event.request, responseToCache);
|
||||
});
|
||||
|
||||
return response;
|
||||
});
|
||||
})
|
||||
);
|
||||
});
|
||||
|
||||
// Listen for messages from clients
|
||||
self.addEventListener('message', (event) => {
|
||||
if (event.data && event.data.type === 'SKIP_WAITING') {
|
||||
self.skipWaiting();
|
||||
}
|
||||
});
|
||||
19
static/sounds/README.md
Normal file
19
static/sounds/README.md
Normal file
@@ -0,0 +1,19 @@
|
||||
# Sound Files for SvelteMUD
|
||||
|
||||
This directory contains sound files that can be used for trigger sounds in the MUD client.
|
||||
|
||||
## Available Sounds
|
||||
|
||||
For production use, place sound files in this directory with the following recommended names:
|
||||
|
||||
- `alert.mp3` - General alert sound
|
||||
- `beep.mp3` - Short beep for notifications
|
||||
- `chime.mp3` - Chime sound for positive notifications
|
||||
- `ding.mp3` - Ding sound for attention
|
||||
- `notify.mp3` - General notification sound
|
||||
|
||||
You can add more sound files as needed, and they will be available for selection in the trigger editor.
|
||||
|
||||
## File Format
|
||||
|
||||
For best compatibility, use MP3 format with reasonable file sizes (under 100KB recommended).
|
||||
21
svelte.config.js
Normal file
21
svelte.config.js
Normal file
@@ -0,0 +1,21 @@
|
||||
import nodeAdapter from '@sveltejs/adapter-node';
|
||||
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
|
||||
|
||||
/** @type {import('@sveltejs/kit').Config} */
|
||||
const config = {
|
||||
preprocess: vitePreprocess(),
|
||||
|
||||
kit: {
|
||||
adapter: nodeAdapter({
|
||||
// You can customize the Node.js adapter options here:
|
||||
// out: 'build', // Output directory for the build
|
||||
// precompress: false, // Whether to precompress assets
|
||||
// envPrefix: '', // Environment variable prefix
|
||||
}),
|
||||
alias: {
|
||||
$lib: 'src/lib'
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
export default config;
|
||||
17
tsconfig.json
Normal file
17
tsconfig.json
Normal file
@@ -0,0 +1,17 @@
|
||||
{
|
||||
"extends": "./.svelte-kit/tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"target": "ESNext",
|
||||
"module": "ESNext",
|
||||
"moduleResolution": "bundler",
|
||||
"allowJs": true,
|
||||
"checkJs": true,
|
||||
"esModuleInterop": true,
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"resolveJsonModule": true,
|
||||
"skipLibCheck": true,
|
||||
"sourceMap": true,
|
||||
"strict": true,
|
||||
"types": ["vite/client"]
|
||||
}
|
||||
}
|
||||
100
vite.config.ts
Normal file
100
vite.config.ts
Normal file
@@ -0,0 +1,100 @@
|
||||
import { sveltekit } from '@sveltejs/kit/vite';
|
||||
import { defineConfig } from 'vite';
|
||||
import { VitePWA } from 'vite-plugin-pwa';
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [
|
||||
sveltekit(),
|
||||
VitePWA({
|
||||
registerType: 'autoUpdate',
|
||||
includeAssets: ['favicon.png', 'icons/*.png'],
|
||||
manifest: {
|
||||
name: 'SvelteMUD Client',
|
||||
short_name: 'SvelteMUD',
|
||||
description: 'A modern MUD client built with Svelte',
|
||||
theme_color: '#6272a4',
|
||||
background_color: '#282a36',
|
||||
display: 'standalone',
|
||||
icons: [
|
||||
{
|
||||
src: 'icons/icon-72x72.png',
|
||||
sizes: '72x72',
|
||||
type: 'image/png',
|
||||
purpose: 'any maskable'
|
||||
},
|
||||
{
|
||||
src: 'icons/icon-96x96.png',
|
||||
sizes: '96x96',
|
||||
type: 'image/png',
|
||||
purpose: 'any maskable'
|
||||
},
|
||||
{
|
||||
src: 'icons/icon-128x128.png',
|
||||
sizes: '128x128',
|
||||
type: 'image/png',
|
||||
purpose: 'any maskable'
|
||||
},
|
||||
{
|
||||
src: 'icons/icon-144x144.png',
|
||||
sizes: '144x144',
|
||||
type: 'image/png',
|
||||
purpose: 'any maskable'
|
||||
},
|
||||
{
|
||||
src: 'icons/icon-152x152.png',
|
||||
sizes: '152x152',
|
||||
type: 'image/png',
|
||||
purpose: 'any maskable'
|
||||
},
|
||||
{
|
||||
src: 'icons/icon-192x192.png',
|
||||
sizes: '192x192',
|
||||
type: 'image/png',
|
||||
purpose: 'any maskable'
|
||||
},
|
||||
{
|
||||
src: 'icons/icon-384x384.png',
|
||||
sizes: '384x384',
|
||||
type: 'image/png',
|
||||
purpose: 'any maskable'
|
||||
},
|
||||
{
|
||||
src: 'icons/icon-512x512.png',
|
||||
sizes: '512x512',
|
||||
type: 'image/png',
|
||||
purpose: 'any maskable'
|
||||
}
|
||||
]
|
||||
},
|
||||
workbox: {
|
||||
globPatterns: ['**/*.{js,css,html,png,svg,ico}'],
|
||||
navigateFallback: null
|
||||
},
|
||||
strategies: 'generateSW',
|
||||
devOptions: {
|
||||
enabled: true,
|
||||
type: 'module'
|
||||
}
|
||||
})
|
||||
],
|
||||
server: {
|
||||
// No proxy - we're using a standalone WebSocket server on port 3001
|
||||
},
|
||||
resolve: {
|
||||
alias: {
|
||||
events: 'events' // This helps with browser compatibility
|
||||
}
|
||||
},
|
||||
optimizeDeps: {
|
||||
esbuildOptions: {
|
||||
define: {
|
||||
global: 'globalThis'
|
||||
}
|
||||
}
|
||||
},
|
||||
build: {
|
||||
rollupOptions: {
|
||||
external: ['net'] // Exclude Node-specific modules
|
||||
}
|
||||
}
|
||||
});
|
||||
Reference in New Issue
Block a user