Initial commit
This commit is contained in:
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
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user