Talon/svelte-mud
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
Talon
2025-04-21 14:12:36 +02:00
commit 3fe2969b39
57 changed files with 17976 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

284
src/lib/components/KeyboardShortcutsHelp.svelte Normal file
View 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
View 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">
&times;
</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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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>