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

Fix MDI

Browse Source
This commit is contained in:
Talon
2025-04-22 17:21:44 +02:00
parent f3b508c9f7
commit 9309509858
7 changed files with 814 additions and 198 deletions
Download Patch File Download Diff File Expand all files Collapse all files

408
src/lib/components/MudConnection.svelte
View File

@@ -1,6 +1,7 @@
<script lang="ts">
import { onMount, onDestroy, createEventDispatcher } from 'svelte';
import { MudConnection } from '$lib/connection/MudConnection';
import { ConnectionManager, activeConnections } from '$lib/connection/ConnectionManager';
import { GmcpHandler } from '$lib/gmcp/GmcpHandler';
import { TriggerSystem } from '$lib/triggers/TriggerSystem';
import { AccessibilityManager } from '$lib/accessibility/AccessibilityManager';
@@ -8,11 +9,13 @@
connections,
connectionStatus,
activeProfileId,
activeProfile,
activeProfile,
profiles,
addToOutputHistory,
updateGmcpData,
accessibilitySettings,
uiSettings
uiSettings,
outputHistory
} from '$lib/stores/mudStore';
import { get } from 'svelte/store';
@@ -24,6 +27,7 @@
// Local state
let connection: MudConnection | null = null;
let connectionManager: ConnectionManager | null = null;
let gmcpHandler: GmcpHandler | null = null;
let triggerSystem: TriggerSystem | null = null;
let accessibilityManager: AccessibilityManager | null = null;
@@ -52,47 +56,95 @@
}
}
let unsubscribeFunctions = [];
onMount(() => {
console.log(`MudConnection component mounted for profile: ${profileId}`);
// 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();
// Get the connection status from the store
const currentStatus = get(connectionStatus)[profileId];
// Check if we already have a connection in the ConnectionManager
if (currentStatus === 'connected' || currentStatus === 'connecting') {
console.log(`Connection exists for ${profileId}, getting from manager`);
const connectionManager = ConnectionManager.getInstance();
const existingConnection = connectionManager.getExistingConnection(profileId);
if (existingConnection) {
console.log(`Found existing connection for ${profileId}, updating local ref`);
// Update the connections store
connections.update(conns => ({
...conns,
[profileId]: existingConnection
}));
// Update local reference
connection = existingConnection;
// Re-attach listeners
setupConnectionListeners(existingConnection);
}
} else {
// Register this connection in the connections store with component instance
connections.update(conns => {
console.log(`Registering connection component for profile: ${profileId}`);
return {
...conns,
[profileId]: this
};
});
// Update connection status - ensure UI shows status as 'disconnected' at start
if (!currentStatus) {
connectionStatus.update(statuses => {
console.log(`Setting connection status for ${profileId} to 'disconnected'`);
return {
...statuses,
[profileId]: 'disconnected'
};
});
}
}
// Update connection status - ensure UI shows status as 'disconnected' at start
connectionStatus.update(statuses => ({
...statuses,
[profileId]: 'disconnected'
}));
// Dump the current connection status for debugging
setTimeout(() => {
console.log('Current connection status at initialization:', get(connectionStatus));
}, 100);
// Auto-connect if enabled and not already connected - with a slight delay
if (autoConnect && currentStatus !== 'connected') {
console.log('Auto-connecting profile:', profileId);
setTimeout(() => connect(), 100);
}
});
onDestroy(() => {
console.log(`MudConnection component being destroyed for profile: ${profileId}`);
// Remove keyboard listener
document.removeEventListener('keydown', handleKeyDown, true); // Match document and capture phase
// Clean up connection
if (connection) {
connection.disconnect();
}
// Remove from connections store
// Don't disconnect the connection - it should persist even when the component is unmounted
// Only remove this component instance from the local connections store (not the ConnectionManager)
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;
// Clean up subscriptions
unsubscribeFunctions.forEach(unsubFn => {
if (typeof unsubFn === 'function') {
try {
unsubFn();
} catch (error) {
console.error('Error during unsubscribe:', error);
}
}
});
});
@@ -100,6 +152,9 @@
* Initialize connection components
*/
function initializeComponents() {
// Get singleton instance of ConnectionManager
connectionManager = ConnectionManager.getInstance();
// Create GMCP handler
gmcpHandler = new GmcpHandler();
@@ -111,6 +166,47 @@
// Set up event listeners
setupEventListeners();
// Get or create connection from ConnectionManager
updateConnectionFromStore();
}
/**
* Update local connection reference from store
*/
function updateConnectionFromStore() {
// Subscribe to activeConnections to get updates
const unsubscribe = activeConnections.subscribe(connections => {
connection = connections[profileId] || null;
if (connection) {
// Re-attach event listeners when connection changes
setupConnectionListeners(connection);
}
});
// Add to unsubscribe functions
unsubscribeFunctions.push(unsubscribe);
}
/**
* Set up listeners for a specific connection
*/
function setupConnectionListeners(conn: MudConnection) {
// First remove ALL event listeners to prevent duplicates
console.log('Setting up connection listeners and removing old ones');
conn.off('received');
conn.off('sent');
conn.off('connected');
conn.off('disconnected');
conn.off('error');
// Add new listeners
conn.on('received', handleReceived);
conn.on('sent', handleSent);
conn.on('connected', handleConnected);
conn.on('disconnected', handleDisconnected);
conn.on('error', handleError);
}
/**
@@ -164,6 +260,7 @@
console.error('Error updating TTS setting:', error);
}
});
unsubscribeFunctions.push(unsubscribeTts);
// Set up only GMCP debugging subscription
let previousGmcpDebug = $uiSettings.debugGmcp;
@@ -172,70 +269,82 @@
previousGmcpDebug = settings.debugGmcp;
}
});
// Clean up subscriptions on component destruction
onDestroy(() => {
unsubscribeUiSettings();
unsubscribeTts();
});
unsubscribeFunctions.push(unsubscribeUiSettings);
}
/**
* 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}...`);
// First check if we are already connected
const currentStatus = get(connectionStatus)[profileId];
if (currentStatus === 'connected' || currentStatus === 'connecting') {
console.log(`Already ${currentStatus} for profile ${profileId}, not connecting again`);
return;
}
// Create connection
connection = new MudConnection({
// Find the profile by ID - don't rely on activeProfile
const allProfiles = get(profiles);
const profile = allProfiles.find(p => p.id === profileId);
console.log(`Connecting to profile ${profileId}:`, profile);
if (!profile) {
addToOutputHistory(`Error: Profile ${profileId} not found.`);
console.error(`Profile ${profileId} not found`);
return;
}
// Update connection status
connectionStatus.update(statuses => {
console.log(`Setting connection status for ${profileId} to 'connecting'`);
return {
...statuses,
[profileId]: 'connecting'
};
});
// Only add to output history if this is the active profile
if (get(activeProfileId) === profileId) {
addToOutputHistory(`Connecting to ${profile.host}:${profile.port}...`);
}
// Use the connection manager to get or create a connection
if (!connectionManager) {
connectionManager = ConnectionManager.getInstance();
}
// Connect using the connection manager
connectionManager.connect(profileId, {
host: profile.host,
port: profile.port,
useSSL: profile.useSSL,
gmcpHandler: gmcpHandler || undefined
});
console.log('Connection object created:', connection);
// Update local connection reference
setTimeout(() => {
updateConnectionFromStore();
}, 100);
// 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);
console.error(`Failed to connect to ${profileId}:`, error);
connectionStatus.update(statuses => ({
...statuses,
[profileId]: 'error'
}));
connectionStatus.update(statuses => {
return {
...statuses,
[profileId]: 'error'
};
});
addToOutputHistory(`Error connecting to ${profile.host}:${profile.port} - ${error}`);
const errorMsg = `Error connecting to profile ${profileId}: ${error}`;
console.error(errorMsg);
// Only add to output history if this is the active profile
if (get(activeProfileId) === profileId) {
addToOutputHistory(errorMsg);
}
}
}
@@ -243,23 +352,46 @@
* Disconnect from the MUD server
*/
export function disconnect() {
if (connection) {
connection.disconnect();
if (!connectionManager) {
connectionManager = ConnectionManager.getInstance();
}
connectionManager.disconnect(profileId);
console.log(`Disconnected profile ${profileId}`);
}
/**
* Handle connection established
*/
function handleConnected() {
const profile = get(activeProfile);
connectionStatus.update(statuses => ({
...statuses,
[profileId]: 'connected'
}));
addToOutputHistory(`Connected to ${profile?.host}:${profile?.port}`);
try {
// Find the profile by ID
const allProfiles = get(profiles);
const profile = allProfiles.find(p => p.id === profileId);
console.log(`Profile ${profileId} connected:`, profile);
// Update connection status GLOBALLY, not just for this profile
connectionStatus.update(statuses => {
console.log(`Setting connection status for ${profileId} to 'connected'`);
console.log('Previous connection statuses:', statuses);
const newStatuses = {
...statuses,
[profileId]: 'connected'
};
console.log('New connection statuses:', newStatuses);
return newStatuses;
});
// Dump the current connection status for debugging
setTimeout(() => {
console.log('Current connection status after connect:', get(connectionStatus));
}, 100);
// Only add to output history if this is the active profile
if (get(activeProfileId) === profileId) {
addToOutputHistory(`Connected to ${profile?.host}:${profile?.port}`);
}
// Handle auto-login if enabled
if (profile?.autoLogin?.enabled) {
@@ -290,18 +422,30 @@
}
dispatch('connected');
} catch (error) {
console.error(`Error handling connection for profile ${profileId}:`, error);
}
}
/**
* Handle connection closed
*/
function handleDisconnected() {
connectionStatus.update(statuses => ({
...statuses,
[profileId]: 'disconnected'
}));
console.log(`Profile ${profileId} disconnected`);
connectionStatus.update(statuses => {
console.log(`Setting connection status for ${profileId} to 'disconnected'`);
return {
...statuses,
[profileId]: 'disconnected'
};
});
// Only add to output history if this is the active profile
if (get(activeProfileId) === profileId) {
addToOutputHistory('Disconnected from server.');
}
addToOutputHistory('Disconnected from server.');
dispatch('disconnected');
}
@@ -309,19 +453,27 @@
* Handle connection error
*/
function handleError(error: any) {
connectionStatus.update(statuses => ({
...statuses,
[profileId]: 'error'
}));
console.log(`Profile ${profileId} connection error:`, error);
connectionStatus.update(statuses => {
console.log(`Setting connection status for ${profileId} to 'error'`);
return {
...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 }
]);
// Only add to output history if this is the active profile
if (get(activeProfileId) === profileId) {
addToOutputHistory(`Connection error: ${errorMessage}`, false, [
{ pattern: 'Connection error', color: '#ff5555', isRegex: false }
]);
}
dispatch('error', { error });
}
@@ -330,31 +482,69 @@
* Handle received data
*/
function handleReceived(text: string) {
// Add to output history first
addToOutputHistory(text);
console.log(`Profile ${profileId} received data, active profile: ${get(activeProfileId)}`);
// Process triggers with safe error handling
if (triggerSystem) {
try {
triggerSystem.processTriggers(text);
} catch (error) {
console.error('Error processing triggers:', error);
try {
// First check if this is the active profile - only handle messages for the active profile
if (get(activeProfileId) !== profileId) {
console.log(`Ignoring received data for inactive profile ${profileId}`);
return;
}
}
// Try to use text-to-speech if enabled
if (accessibilityManager && $accessibilitySettings.textToSpeech) {
// Use a small timeout to avoid UI blocking
setTimeout(() => {
// First, ensure this profile has an output history entry
const history = get(outputHistory);
if (!history[profileId] || !Array.isArray(history[profileId])) {
console.log(`Creating fresh output history for profile ${profileId}`);
outputHistory.update(h => ({
...h,
[profileId]: []
}));
}
// Create the output item
const outputItem = {
id: `output-${Date.now()}-${Math.random().toString(36).substring(2, 9)}`,
text,
timestamp: Date.now(),
isInput: false,
highlights: []
};
// Add directly to this profile's history
outputHistory.update(history => {
console.log(`Adding text to history for profile ${profileId}`);
const profileHistory = history[profileId] || [];
return {
...history,
[profileId]: [...profileHistory, outputItem]
};
});
// Process triggers with safe error handling
if (triggerSystem) {
try {
accessibilityManager.speak(text);
triggerSystem.processTriggers(text);
} catch (error) {
console.error('Error using text-to-speech:', error);
console.error(`Error processing triggers for ${profileId}:`, error);
}
}, 10);
}
}
dispatch('received', { text });
// Try to use text-to-speech if enabled
if (accessibilityManager && $accessibilitySettings.textToSpeech && get(activeProfileId) === profileId) {
// 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 });
} catch (error) {
console.error(`Error handling received data for profile ${profileId}:`, error);
}
}
/**

291
src/lib/components/MudMdi.svelte
View File

@@ -2,96 +2,232 @@
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 { ConnectionManager } from '$lib/connection/ConnectionManager';
import { activeProfileId, profiles, connectionStatus, addToOutputHistory, outputHistory, connections } from '$lib/stores/mudStore';
import { get } from 'svelte/store';
import type { MudProfile } from '$lib/profiles/ProfileManager';
// Make sure tabs are defined to prevent errors
$: safeTabs = tabs || [];
$: safeConnectionStatus = $connectionStatus || {};
// 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 } = {};
// Handle keyboard navigation in the tab bar
function handleTabsKeydown(event: KeyboardEvent) {
if (!safeTabs || safeTabs.length === 0) return;
// Get current tab index
const currentIndex = safeTabs.findIndex(tab => tab.id === activeTab);
switch (event.key) {
case 'ArrowRight':
case 'ArrowDown':
// Move to next tab
event.preventDefault();
const nextIndex = (currentIndex + 1) % safeTabs.length;
changeTab(safeTabs[nextIndex].id);
document.getElementById(`tab-${safeTabs[nextIndex].id}`)?.focus();
break;
case 'ArrowLeft':
case 'ArrowUp':
// Move to previous tab
event.preventDefault();
const prevIndex = (currentIndex - 1 + safeTabs.length) % safeTabs.length;
changeTab(safeTabs[prevIndex].id);
document.getElementById(`tab-${safeTabs[prevIndex].id}`)?.focus();
break;
case 'Home':
// Move to first tab
event.preventDefault();
changeTab(safeTabs[0].id);
document.getElementById(`tab-${safeTabs[0].id}`)?.focus();
break;
case 'End':
// Move to last tab
event.preventDefault();
const lastIndex = safeTabs.length - 1;
changeTab(safeTabs[lastIndex].id);
document.getElementById(`tab-${safeTabs[lastIndex].id}`)?.focus();
break;
default:
// Let other keys function normally
break;
}
}
// 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);
try {
// Get the profiles from the store
const allProfiles = $profiles || [];
console.log('Initializing tabs with profiles:', allProfiles);
// Auto-connect if enabled
if (autoConnectOnStart && tabs.length > 0 && !$connectionStatus[activeTab]) {
console.log(`Auto-connecting to tab: ${activeTab}`);
setTimeout(() => connectToMud(activeTab), 500);
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;
}
// Create new tabs array with all profile information
const newTabs = allProfiles.map(profile => ({
id: profile.id,
profile
}));
// Update tabs array
tabs = newTabs;
console.log('Created tabs:', tabs);
// Set the active tab from the store or default to the first tab
const newActiveTab = $activeProfileId || (tabs.length > 0 ? tabs[0].id : null);
if (newActiveTab !== activeTab) {
console.log(`Changing active tab from ${activeTab} to ${newActiveTab}`);
activeTab = newActiveTab;
}
console.log('Active tab set to:', activeTab);
// Update the active profile ID in the store
if (activeTab) {
console.log(`Setting active profile ID to ${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), 1000);
}
}
// Force a rerender of the tabs
setTimeout(() => {
console.log('Forcing tab rerender');
tabs = [...tabs];
}, 0);
} catch (error) {
console.error('Error initializing tabs:', error);
}
// 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);
try {
console.log(`Changing tab to: ${tabId}`);
// First, update activeProfileId in the store to trigger reactive updates
activeProfileId.set(tabId);
// Then update the local state
activeTab = tabId;
// Log the connections state for debugging
console.log('Current connection status:', $connectionStatus);
// Make sure the connection store is updated with the active profile
const connectionManager = ConnectionManager.getInstance();
const existingConnection = connectionManager.getExistingConnection(tabId);
// Update the connections store - this ensures the connection is associated with the profile ID
if (existingConnection) {
// Check if we need to ensure event listeners are properly set up
const isReused = get(connections)[tabId] === existingConnection;
console.log(`Connection is ${isReused ? 'being reused' : 'new'} for tab ${tabId}`);
connections.update(conns => ({
...conns,
[tabId]: existingConnection
}));
}
// Since we're only rendering the active tab now, we don't need to force updates
// to other components, the component itself will be created/destroyed
console.log(`Tab change complete - active tab is now: ${activeTab}`);
} catch (error) {
console.error(`Error changing tab to ${tabId}:`, error);
}
}
// Connect to a MUD server
function connectToMud(profileId: string) {
const connectionComponent = connections[profileId];
if (connectionComponent) {
connectionComponent.connect();
try {
console.log(`Attempting to connect to MUD for profile: ${profileId}`);
// Use the ConnectionManager instead of the local connections object
const connectionManager = ConnectionManager.getInstance();
// Find the profile
const profile = $profiles.find(p => p.id === profileId);
if (!profile) {
console.error(`No profile found for ID: ${profileId}`);
return;
}
// Connect using the connection manager
connectionManager.connect(profileId, {
host: profile.host,
port: profile.port,
useSSL: profile.useSSL
});
} catch (error) {
console.error(`Error connecting to MUD for profile ${profileId}:`, error);
}
}
// Disconnect from a MUD server
function disconnectFromMud(profileId: string) {
const connectionComponent = connections[profileId];
if (connectionComponent) {
connectionComponent.disconnect();
try {
console.log(`Attempting to disconnect from MUD for profile: ${profileId}`);
// Use the ConnectionManager
const connectionManager = ConnectionManager.getInstance();
connectionManager.disconnect(profileId);
} catch (error) {
console.error(`Error disconnecting from MUD for profile ${profileId}:`, error);
}
}
// 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);
try {
console.log(`Attempting to close tab for profile: ${profileId}`);
// Safely check the connection status
const status = $connectionStatus[profileId];
console.log(`Current connection status for ${profileId}: ${status}`);
// Disconnect if connected
if (status === 'connected') {
console.log(`Disconnecting ${profileId} before closing tab`);
disconnectFromMud(profileId);
}
// Remove the tab
console.log(`Removing tab for profile ${profileId}`);
tabs = tabs.filter(tab => tab.id !== profileId);
// If the closed tab was active, activate another tab
if (activeTab === profileId) {
console.log(`Closed tab was active, finding new active tab`);
const newActiveTab = tabs.length > 0 ? tabs[0].id : null;
console.log(`Setting new active tab to: ${newActiveTab}`);
activeTab = newActiveTab;
activeProfileId.set(newActiveTab);
}
} catch (error) {
console.error(`Error closing tab for profile ${profileId}:`, error);
}
}
@@ -119,13 +255,30 @@
}
}
// Update when profiles change
// Update when profiles change or active profile changes
$: if ($profiles) {
console.log('Profiles updated in store, reinitializing tabs:', $profiles);
initializeTabs();
}
// When activeProfileId changes externally, ensure activeTab is in sync
$: if ($activeProfileId && $activeProfileId !== activeTab) {
console.log(`activeProfileId changed to ${$activeProfileId}, updating activeTab to match`);
activeTab = $activeProfileId;
// Force a UI update
setTimeout(() => {
tabs = [...tabs];
}, 0);
}
onMount(() => {
console.log('MudMdi component mounted');
// Make sure connectionStatus store is initialized
if (!$connectionStatus) {
connectionStatus.set({});
}
// Initial setup of tabs
initializeTabs();
@@ -138,8 +291,8 @@
</script>
<div class="mud-mdi">
<div class="mud-mdi-tabs" role="tablist">
{#each tabs as tab}
<div class="mud-mdi-tabs" role="tablist" aria-label="MUD connections" tabindex="0" on:keydown={handleTabsKeydown}>
{#each safeTabs as tab}
<button
class="mud-mdi-tab"
class:active={activeTab === tab.id}
@@ -179,13 +332,15 @@
</div>
</div>
{:else}
{#each tabs as tab (tab.id)}
<!-- Only render the active tab -->
{#each safeTabs.filter(tab => tab.id === activeTab) 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}`}
data-tab-id={tab.id}
data-active-tab={activeTab}
>
<div class="mud-mdi-pane-header">
<div class="mud-mdi-pane-title">
@@ -226,7 +381,6 @@
<MudConnection
profileId={tab.id}
bind:this={connections[tab.id]}
/>
<MudTerminal
autofocus={activeTab === tab.id}
@@ -391,12 +545,7 @@
}
.mud-mdi-pane {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex !important; /* Force display flex */
display: flex;
flex-direction: column;
height: 100%;
width: 100%;

65
src/lib/components/MudTerminal.svelte
View File

@@ -1,10 +1,14 @@
<script lang="ts">
import { onMount, onDestroy, createEventDispatcher } from 'svelte';
import { activeOutputHistory, addToOutputHistory, addToInputHistory, navigateInputHistory, activeInputHistoryIndex, activeConnection, uiSettings, accessibilitySettings, activeInputHistory } from '$lib/stores/mudStore';
import { activeOutputHistory, addToOutputHistory, addToInputHistory, navigateInputHistory, activeInputHistoryIndex, activeConnection, uiSettings, accessibilitySettings, activeInputHistory, activeProfileId, connectionStatus } from '$lib/stores/mudStore';
import { tick } from 'svelte';
import AnsiToHtml from 'ansi-to-html';
import { AccessibilityManager } from '$lib/accessibility/AccessibilityManager';
// Create safe defaults for reactivity
$: safeOutputHistory = $activeOutputHistory || [];
$: safeActiveProfileId = $activeProfileId || null;
// Create event dispatcher
const dispatch = createEventDispatcher();
@@ -92,7 +96,7 @@
}
// Handle input submission
function handleSubmit(event: Event) {
async function handleSubmit(event: Event) {
event.preventDefault();
if (!currentInput.trim()) return;
@@ -112,17 +116,35 @@
} else {
addToOutputHistory(`> ********`, true);
}
// Get the currently active profile id
const profileId = $activeProfileId;
// 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 }]);
if (profileId) {
// Get connection status for this profile
const status = $connectionStatus[profileId];
if (status === 'connected') {
try {
// Try using the activeConnection first
if ($activeConnection) {
$activeConnection.send(currentInput);
} else {
// If not available, use the ConnectionManager directly
const { ConnectionManager } = await import('$lib/connection/ConnectionManager');
const connectionManager = ConnectionManager.getInstance();
connectionManager.send(profileId, 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. Status: ${status || 'disconnected'}`, false, [{ pattern: 'Not connected', color: '#ff5555', isRegex: false }]);
}
} else {
addToOutputHistory('Not connected to any MUD server.', false, [{ pattern: 'Not connected', color: '#ff5555', isRegex: false }]);
addToOutputHistory('No profile selected.', false, [{ pattern: 'No profile', color: '#ff5555', isRegex: false }]);
}
// Clear the input
@@ -266,16 +288,35 @@
}
}
// Watch output history changes to scroll to bottom
// Watch output history and profile changes to update display
$: {
if ($activeOutputHistory) {
if (safeOutputHistory.length > 0) {
console.log('Active output history changed, updating terminal display');
scrollToBottom();
// Update message elements when output history changes
setTimeout(updateMessageElements, 0);
}
}
$: {
// Every time the active profile changes, update the terminal content
if ($activeProfileId) {
console.log(`Active profile is now: ${$activeProfileId}, updating output display`);
updateOutputDisplay();
}
}
// Function to update the displayed output based on the active profile
async function updateOutputDisplay() {
console.log('Updating output display...');
await tick(); // Wait for Svelte to update
scrollToBottom();
updateMessageElements();
}
onMount(() => {
console.log('MudTerminal component mounted for profile:', $activeProfileId);
// Initialize accessibility manager
accessibilityManager = new AccessibilityManager();
@@ -318,7 +359,7 @@
tabindex="0"
on:keydown={handleOutputKeyDown}
style="font-family: {$uiSettings.font}; font-size: {$accessibilitySettings.fontSize}px; line-height: {$accessibilitySettings.lineSpacing};">
{#each $activeOutputHistory as item (item.id)}
{#each safeOutputHistory 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">