387 lines
9.7 KiB
Svelte
387 lines
9.7 KiB
Svelte
<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;
|
|
|
|
// Initialize with defaults first, then merge with provided profile
|
|
let defaultProfile = {
|
|
id: isNewProfile ? `profile-${Date.now()}-${Math.random().toString(36).substring(2, 9)}` : (profile?.id || ''),
|
|
name: 'New Profile',
|
|
host: 'mud.example.com',
|
|
port: 23,
|
|
useSSL: false,
|
|
ansiColor: true,
|
|
autoLogin: {
|
|
enabled: false,
|
|
username: '',
|
|
commands: []
|
|
},
|
|
accessibilityOptions: {
|
|
textToSpeech: false,
|
|
highContrast: false,
|
|
speechRate: 1,
|
|
speechPitch: 1,
|
|
speechVolume: 1
|
|
},
|
|
font: 'monospace',
|
|
fontSize: 14,
|
|
theme: 'dark'
|
|
};
|
|
|
|
// Local state - merge default with provided profile
|
|
let localProfile = { ...defaultProfile, ...profile };
|
|
// Extract nested objects for easier binding
|
|
let autoLogin = {
|
|
...defaultProfile.autoLogin,
|
|
...(localProfile.autoLogin || {})
|
|
};
|
|
|
|
let newCommand = '';
|
|
|
|
let accessibilityOptions = {
|
|
...defaultProfile.accessibilityOptions,
|
|
...(localProfile.accessibilityOptions || {})
|
|
};
|
|
|
|
// Handle form submission
|
|
function handleSubmit() {
|
|
// 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>
|
|
|
|
<p class="credential-note">For security, the password is requested when connecting and is kept only in memory.</p>
|
|
|
|
<div class="form-group">
|
|
<span class="field-label" id="commands-label">Auto-Login Commands</span>
|
|
<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"],
|
|
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>
|