// ==UserScript==
// @name JanitorAI Context Maker with Groups
// @namespace http://tampermonkey.net/
// @version 2.1
// @license MIT
// @description Adds a Location and Character System to JanitorAI with grouping functionality, enhancing organization and management.
// @match https://janitorai.com/chats/*
// @icon https://www.google.com/s2/favicons?sz=64&domain=https://janitorai.com/
// @grant GM.setValue
// @grant GM.getValue
// ==/UserScript==
(async function() {
'use strict';
// Define Themes
const themes = {
dark: {
'--bg-color': 'rgba(34, 34, 34, var(--ui-transparency))',
'--text-color': '#ffffff',
'--border-color': 'rgba(68, 68, 68, var(--ui-transparency))',
'--button-bg-color': 'rgba(0, 123, 255, var(--ui-transparency))',
'--active-char-color': 'rgba(173, 216, 230, var(--ui-transparency))',
'--success-bg-color': 'rgba(40, 167, 69, var(--ui-transparency))',
'--info-bg-color': 'rgba(23, 162, 184, var(--ui-transparency))',
'--warning-bg-color': 'rgba(255, 193, 7, var(--ui-transparency))',
'--muted-bg-color': 'rgba(108, 117, 125, var(--ui-transparency))',
'--danger-bg-color': 'rgba(220, 53, 69, var(--ui-transparency))',
'--shadow-color': 'rgba(0,0,0,0.5)'
},
light: {
'--bg-color': 'rgba(255, 255, 255, var(--ui-transparency))',
'--text-color': '#000000',
'--border-color': 'rgba(204, 204, 204, var(--ui-transparency))',
'--button-bg-color': 'rgba(0, 123, 255, var(--ui-transparency))',
'--active-char-color': 'rgba(173, 216, 230, var(--ui-transparency))',
'--success-bg-color': 'rgba(40, 167, 69, var(--ui-transparency))',
'--info-bg-color': 'rgba(23, 162, 184, var(--ui-transparency))',
'--warning-bg-color': 'rgba(255, 193, 7, var(--ui-transparency))',
'--muted-bg-color': 'rgba(108, 117, 125, var(--ui-transparency))',
'--danger-bg-color': 'rgba(220, 53, 69, var(--ui-transparency))',
'--shadow-color': 'rgba(0,0,0,0.1)'
},
sepia: {
'--bg-color': 'rgba(244, 232, 208, var(--ui-transparency))',
'--text-color': '#5b4636',
'--border-color': 'rgba(193, 154, 107, var(--ui-transparency))',
'--button-bg-color': 'rgba(160, 82, 45, var(--ui-transparency))',
'--active-char-color': 'rgba(210, 180, 140, var(--ui-transparency))',
'--success-bg-color': 'rgba(107, 68, 35, var(--ui-transparency))',
'--info-bg-color': 'rgba(194, 148, 110, var(--ui-transparency))',
'--warning-bg-color': 'rgba(215, 172, 116, var(--ui-transparency))',
'--muted-bg-color': 'rgba(160, 130, 94, var(--ui-transparency))',
'--danger-bg-color': 'rgba(168, 96, 50, var(--ui-transparency))',
'--shadow-color': 'rgba(0,0,0,0.3)'
},
solarized: {
'--bg-color': 'rgba(253, 246, 227, var(--ui-transparency))',
'--text-color': '#657b83',
'--border-color': 'rgba(238, 232, 213, var(--ui-transparency))',
'--button-bg-color': 'rgba(38, 139, 210, var(--ui-transparency))',
'--active-char-color': 'rgba(133, 153, 0, var(--ui-transparency))',
'--success-bg-color': 'rgba(133, 153, 0, var(--ui-transparency))',
'--info-bg-color': 'rgba(38, 139, 210, var(--ui-transparency))',
'--warning-bg-color': 'rgba(181, 137, 0, var(--ui-transparency))',
'--muted-bg-color': 'rgba(147, 161, 161, var(--ui-transparency))',
'--danger-bg-color': 'rgba(220, 50, 47, var(--ui-transparency))',
'--shadow-color': 'rgba(0,0,0,0.2)'
},
forest: {
'--bg-color': 'rgba(34, 49, 34, var(--ui-transparency))',
'--text-color': '#e0f7e9',
'--border-color': 'rgba(46, 61, 46, var(--ui-transparency))',
'--button-bg-color': 'rgba(60, 179, 113, var(--ui-transparency))',
'--active-char-color': 'rgba(144, 238, 144, var(--ui-transparency))',
'--success-bg-color': 'rgba(34, 139, 34, var(--ui-transparency))',
'--info-bg-color': 'rgba(144, 238, 144, var(--ui-transparency))',
'--warning-bg-color': 'rgba(189, 183, 107, var(--ui-transparency))',
'--muted-bg-color': 'rgba(85, 107, 47, var(--ui-transparency))',
'--danger-bg-color': 'rgba(139, 69, 19, var(--ui-transparency))',
'--shadow-color': 'rgba(0,0,0,0.4)'
},
ocean: {
'--bg-color': 'rgba(28, 107, 160, var(--ui-transparency))',
'--text-color': '#ffffff',
'--border-color': 'rgba(54, 144, 192, var(--ui-transparency))',
'--button-bg-color': 'rgba(0, 123, 255, var(--ui-transparency))',
'--active-char-color': 'rgba(173, 216, 230, var(--ui-transparency))',
'--success-bg-color': 'rgba(60, 179, 113, var(--ui-transparency))',
'--info-bg-color': 'rgba(23, 162, 184, var(--ui-transparency))',
'--warning-bg-color': 'rgba(255, 193, 7, var(--ui-transparency))',
'--muted-bg-color': 'rgba(108, 117, 125, var(--ui-transparency))',
'--danger-bg-color': 'rgba(220, 53, 69, var(--ui-transparency))',
'--shadow-color': 'rgba(0,0,0,0.3)'
}
};
// Initialize CSS variables
function setTheme(themeName) {
const theme = themes[themeName];
Object.keys(theme).forEach(key => {
document.documentElement.style.setProperty(key, theme[key]);
});
}
// Retrieve saved settings or set defaults
const defaultTransparency = await GM.getValue('transparency', '0.9');
const defaultTheme = await GM.getValue('theme', 'dark');
// Initialize transparency and theme
document.documentElement.style.setProperty('--ui-transparency', defaultTransparency);
setTheme(defaultTheme);
// Add placeholder styles
const style = document.createElement('style');
style.innerHTML = `
input::placeholder, textarea::placeholder {
color: var(--text-color);
}
input:-ms-input-placeholder, textarea:-ms-input-placeholder {
color: var(--text-color);
}
input::-ms-input-placeholder, textarea::-ms-input-placeholder {
color: var(--text-color);
}
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
color: var(--text-color);
}
`;
document.head.appendChild(style);
// --- Character Sidebar with Groups ---
const characterSidebar = document.createElement('div');
characterSidebar.id = 'character-sheet-sidebar';
characterSidebar.style.cssText = `
position: fixed;
top: 0;
right: -350px;
width: 350px;
height: 100%;
display: flex;
flex-direction: column;
background-color: var(--bg-color);
border-left: 2px solid var(--border-color);
box-shadow: -2px 0 5px var(--shadow-color);
box-sizing: border-box;
transition: right 0.3s;
z-index: 9999;
`;
document.body.appendChild(characterSidebar);
const characterToggleButton = document.createElement('button');
characterToggleButton.textContent = 'Characters ☰';
characterToggleButton.style.cssText = `
position: fixed;
top: 10px;
right: 10px;
padding: 5px 10px;
border: none;
background-color: var(--button-bg-color);
color: var(--text-color);
border-radius: 5px;
cursor: pointer;
transition: right 0.3s;
z-index: 10000;
`;
characterToggleButton.addEventListener('click', () => {
const isOpen = characterSidebar.style.right === '0px';
characterSidebar.style.right = isOpen ? '-350px' : '0';
characterToggleButton.style.right = isOpen ? '10px' : '360px';
});
document.body.appendChild(characterToggleButton);
const characterHeader = document.createElement('div');
characterHeader.style.cssText = `
padding: 10px;
background-color: var(--border-color);
text-align: center;
font-weight: bold;
color: var(--text-color);
`;
characterHeader.textContent = 'Characters';
characterSidebar.appendChild(characterHeader);
const characterButtonBox = document.createElement('div');
characterButtonBox.style.cssText = `
display: flex;
justify-content: space-between;
padding: 10px;
background-color: var(--bg-color);
flex-shrink: 0;
`;
characterSidebar.appendChild(characterButtonBox);
// New Character Button
const newCharacterButton = document.createElement('button');
newCharacterButton.textContent = 'New';
newCharacterButton.title = 'Create New Character';
newCharacterButton.style.cssText = `
padding: 5px 10px;
border: none;
background-color: var(--success-bg-color);
color: var(--text-color);
border-radius: 5px;
cursor: pointer;
`;
newCharacterButton.addEventListener('click', () => {
createNewCharacter();
});
characterButtonBox.appendChild(newCharacterButton);
// Load Character Button
const loadCharacterButton = document.createElement('button');
loadCharacterButton.textContent = 'Load';
loadCharacterButton.title = 'Load a Character';
loadCharacterButton.style.cssText = `
padding: 5px 10px;
border: none;
background-color: var(--info-bg-color);
color: var(--text-color);
border-radius: 5px;
cursor: pointer;
`;
loadCharacterButton.addEventListener('click', () => {
loadCharacter();
});
characterButtonBox.appendChild(loadCharacterButton);
// Group Character Button
const groupCharacterButton = document.createElement('button');
groupCharacterButton.textContent = 'Group';
groupCharacterButton.title = 'Create New Group';
groupCharacterButton.style.cssText = `
padding: 5px 10px;
border: none;
background-color: var(--info-bg-color);
color: var(--text-color);
border-radius: 5px;
cursor: pointer;
`;
groupCharacterButton.addEventListener('click', () => {
createNewCharacterGroup();
});
characterButtonBox.appendChild(groupCharacterButton);
// Import Character Button
const importCharacterButton = document.createElement('button');
importCharacterButton.textContent = 'Import';
importCharacterButton.title = 'Import Characters';
importCharacterButton.style.cssText = `
padding: 5px 10px;
border: none;
background-color: var(--warning-bg-color);
color: var(--text-color);
border-radius: 5px;
cursor: pointer;
`;
importCharacterButton.addEventListener('click', () => {
importCharacters();
});
characterButtonBox.appendChild(importCharacterButton);
// Export Character Button
const exportCharacterButton = document.createElement('button');
exportCharacterButton.textContent = 'Export';
exportCharacterButton.title = 'Export Characters';
exportCharacterButton.style.cssText = `
padding: 5px 10px;
border: none;
background-color: var(--muted-bg-color);
color: var(--text-color);
border-radius: 5px;
cursor: pointer;
`;
exportCharacterButton.addEventListener('click', () => {
exportCharacters();
});
characterButtonBox.appendChild(exportCharacterButton);
// Add fifth button: "Load" for Character
function loadCharacter() {
const fileInput = document.createElement('input');
fileInput.type = 'file';
fileInput.accept = '.json';
fileInput.addEventListener('change', async (event) => {
const file = event.target.files[0];
const reader = new FileReader();
reader.onload = (e) => {
try {
const character = JSON.parse(e.target.result);
if (character && character.id) {
// Add to Ungrouped
const ungrouped = characterGroups.find(g => g.name === 'Ungrouped');
if (ungrouped) {
ungrouped.items.push(character);
} else {
characterGroups[0].items.push(character);
}
renderCharacterGroups();
// No saveData call needed
} else {
alert('Invalid character format.');
}
} catch (error) {
alert('Failed to load character: ' + error.message);
}
};
reader.readAsText(file);
});
fileInput.click();
}
const characterGroupList = document.createElement('div');
characterGroupList.id = 'character-group-list';
characterGroupList.style.cssText = `
flex-grow: 1;
overflow-y: auto;
padding: 10px;
`;
characterSidebar.appendChild(characterGroupList);
// Initialize Character Groups
let characterGroups = [
{ name: 'Ungrouped', items: [] }
];
// Function to create a new Character
function createNewCharacter() {
const newCharacter = {
id: generateId(),
active: true,
emoji: '😀',
name: 'New Character',
sex: '',
species: '',
age: '',
bodyType: '',
personality: '',
bio: '',
userControlled: false
};
// Add to Ungrouped
const ungrouped = characterGroups.find(g => g.name === 'Ungrouped');
if (ungrouped) {
ungrouped.items.push(newCharacter);
} else {
characterGroups[0].items.push(newCharacter);
}
renderCharacterGroups();
// No saveData call needed
}
// Function to create a new Character Group
function createNewCharacterGroup() {
const groupName = prompt('Enter group name:', `Group ${characterGroups.length}`);
if (groupName && groupName.trim() !== '') {
characterGroups.push({ name: groupName.trim(), items: [] });
renderCharacterGroups();
// No saveData call needed
}
}
// Function to render Character Groups and Items
function renderCharacterGroups() {
characterGroupList.innerHTML = '';
characterGroups.forEach((group, groupIndex) => {
// Sort items alphabetically by name
group.items.sort((a, b) => a.name.localeCompare(b.name));
const groupContainer = document.createElement('div');
groupContainer.className = 'character-group';
groupContainer.style.cssText = `
margin-bottom: 10px;
border: 1px solid var(--border-color);
border-radius: 5px;
background-color: var(--active-char-color);
`;
const groupHeader = document.createElement('div');
groupHeader.style.cssText = `
display: flex;
justify-content: space-between;
align-items: center;
padding: 5px 10px;
background-color: var(--button-bg-color);
color: var(--text-color);
cursor: pointer;
user-select: none;
position: relative;
`;
groupHeader.textContent = group.name;
groupHeader.addEventListener('click', () => {
itemsContainer.style.display = itemsContainer.style.display === 'none' ? 'block' : 'none';
});
const groupActions = document.createElement('div');
groupActions.style.cssText = `
display: flex;
align-items: center;
`;
// Activate/Deactivate All Button
const toggleAllButton = document.createElement('button');
toggleAllButton.title = 'Activate/Deactivate All';
toggleAllButton.style.cssText = `
background: none;
border: none;
color: var(--text-color);
cursor: pointer;
margin-right: 5px;
font-size: 16px;
`;
updateToggleAllButton(toggleAllButton, group);
toggleAllButton.addEventListener('click', (e) => {
e.stopPropagation();
toggleAllGroupCharacters(group);
updateToggleAllButton(toggleAllButton, group);
renderCharacterGroups();
// No saveData call needed
});
groupActions.appendChild(toggleAllButton);
// Rename Group Button
const renameGroupButton = document.createElement('button');
renameGroupButton.textContent = '✏️';
renameGroupButton.title = 'Rename Group';
renameGroupButton.style.cssText = `
background: none;
border: none;
color: var(--text-color);
cursor: pointer;
margin-right: 5px;
`;
renameGroupButton.addEventListener('click', (e) => {
e.stopPropagation();
renameGroup(groupIndex);
});
groupActions.appendChild(renameGroupButton);
// Delete Group Button
const deleteGroupButton = document.createElement('button');
deleteGroupButton.textContent = '🗑️';
deleteGroupButton.title = 'Delete Group';
deleteGroupButton.style.cssText = `
background: none;
border: none;
color: var(--text-color);
cursor: pointer;
`;
deleteGroupButton.addEventListener('click', (e) => {
e.stopPropagation();
deleteGroup(groupIndex);
});
groupActions.appendChild(deleteGroupButton);
groupHeader.appendChild(groupActions);
groupContainer.appendChild(groupHeader);
const itemsContainer = document.createElement('div');
itemsContainer.style.cssText = `
padding: 5px 10px;
display: block;
`;
group.items.forEach((character, charIndex) => {
const characterSlot = createCharacterSlot(character, groupIndex, charIndex);
itemsContainer.appendChild(characterSlot);
});
groupContainer.appendChild(itemsContainer);
// Add dragover and drop events for grouping
groupContainer.addEventListener('dragover', (e) => {
e.preventDefault();
groupContainer.style.border = `2px dashed var(--info-bg-color)`;
});
groupContainer.addEventListener('dragleave', (e) => {
groupContainer.style.border = `1px solid var(--border-color)`;
});
groupContainer.addEventListener('drop', (e) => {
e.preventDefault();
groupContainer.style.border = `1px solid var(--border-color)`;
const data = e.dataTransfer.getData('text/plain');
const { type, id } = JSON.parse(data);
if (type === 'character') {
moveCharacterToGroup(id, groupIndex);
}
});
characterGroupList.appendChild(groupContainer);
});
// Ensure at least one group exists
if (characterGroups.length === 0) {
characterGroups.push({ name: 'Ungrouped', items: [] });
renderCharacterGroups();
}
}
// Function to update the Toggle All Button appearance
function updateToggleAllButton(button, group) {
const activeCount = group.items.filter(char => char.active).length;
if (activeCount === group.items.length && group.items.length > 0) {
// All active
button.textContent = '🟢';
} else if (activeCount === 0) {
// All inactive
button.textContent = '🔴';
} else {
// Mixed
button.textContent = '🟡';
}
}
// Function to toggle all characters in a group
function toggleAllGroupCharacters(group) {
const allActive = group.items.every(char => char.active);
group.items.forEach(char => {
char.active = !allActive;
});
}
// Function to create a Character Slot DOM element
function createCharacterSlot(character, groupIndex, charIndex) {
const characterSlot = document.createElement('div');
characterSlot.className = 'character-slot';
characterSlot.draggable = true;
characterSlot.dataset.id = character.id;
characterSlot.style.cssText = `
display: flex;
align-items: center;
justify-content: space-between;
padding: 5px;
margin-bottom: 5px;
border: 1px solid var(--border-color);
border-radius: 5px;
background-color: ${character.userControlled ? 'var(--active-char-color)' : 'var(--bg-color)'};
cursor: grab;
`;
// Drag events
characterSlot.addEventListener('dragstart', (e) => {
e.dataTransfer.setData('text/plain', JSON.stringify({ type: 'character', id: character.id }));
e.currentTarget.style.opacity = '0.5';
});
characterSlot.addEventListener('dragend', (e) => {
e.currentTarget.style.opacity = '1';
});
// Left Div (Active Toggle, Emoji, Name)
const leftDiv = document.createElement('div');
leftDiv.style.display = 'flex';
leftDiv.style.alignItems = 'center';
leftDiv.style.flexGrow = '1';
const activeButton = document.createElement('button');
activeButton.textContent = character.active ? '🟢' : '🔴';
activeButton.title = 'Toggle Active';
activeButton.style.cssText = `
padding: 3px;
border: none;
background: none;
cursor: pointer;
color: var(--text-color);
margin-right: 5px;
`;
activeButton.addEventListener('click', () => {
character.active = !character.active;
updateToggleAllButton(toggleAllButtonForGroup(groupIndex), characterGroups[groupIndex]);
// Ensure at least one location is active
ensureActiveLocation();
renderCharacterGroups();
// No saveData call needed
});
leftDiv.appendChild(activeButton);
const emojiSpan = document.createElement('span');
emojiSpan.textContent = character.emoji;
emojiSpan.style.marginRight = '5px';
leftDiv.appendChild(emojiSpan);
const nameSpan = document.createElement('span');
nameSpan.textContent = character.name;
nameSpan.style.cssText = `
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
max-width: 120px;
color: var(--text-color);
`;
leftDiv.appendChild(nameSpan);
characterSlot.appendChild(leftDiv);
// Right Div (Edit, Delete, Export)
const rightDiv = document.createElement('div');
rightDiv.style.display = 'flex';
rightDiv.style.alignItems = 'center';
const editButton = document.createElement('button');
editButton.textContent = '✏️';
editButton.title = 'Edit Character';
editButton.style.cssText = `
padding: 3px;
border: none;
background: none;
cursor: pointer;
color: var(--text-color);
margin-right: 5px;
`;
editButton.addEventListener('click', () => {
editCharacter(character);
});
rightDiv.appendChild(editButton);
const deleteButton = document.createElement('button');
deleteButton.textContent = '🗑️';
deleteButton.title = 'Delete Character';
deleteButton.style.cssText = `
padding: 3px;
border: none;
background: none;
cursor: pointer;
color: var(--text-color);
margin-right: 5px;
`;
deleteButton.addEventListener('click', () => {
deleteCharacter(character.id);
});
rightDiv.appendChild(deleteButton);
const exportButton = document.createElement('button');
exportButton.textContent = '⬇️';
exportButton.title = 'Export Character';
exportButton.style.cssText = `
padding: 3px;
border: none;
background: none;
cursor: pointer;
color: var(--text-color);
`;
exportButton.addEventListener('click', () => {
exportCharacter(character);
});
rightDiv.appendChild(exportButton);
characterSlot.appendChild(rightDiv);
return characterSlot;
}
// Function to get the toggle all button for a group
function toggleAllButtonForGroup(groupIndex) {
const groupContainer = characterGroupList.children[groupIndex];
const toggleAllButton = groupContainer.querySelector('button');
return toggleAllButton;
}
// Function to rename a group
function renameGroup(groupIndex) {
const newName = prompt('Enter new group name:', characterGroups[groupIndex].name);
if (newName && newName.trim() !== '') {
characterGroups[groupIndex].name = newName.trim();
renderCharacterGroups();
// No saveData call needed
}
}
// Function to delete a group
function deleteGroup(groupIndex) {
if (characterGroups.length === 1) {
alert('At least one group must exist.');
return;
}
if (confirm(`Are you sure you want to delete the group "${characterGroups[groupIndex].name}"? All characters in this group will be moved to "Ungrouped".`)) {
const group = characterGroups.splice(groupIndex, 1)[0];
const ungrouped = characterGroups.find(g => g.name === 'Ungrouped');
if (ungrouped) {
ungrouped.items = ungrouped.items.concat(group.items);
} else {
characterGroups.unshift({ name: 'Ungrouped', items: group.items });
}
renderCharacterGroups();
// No saveData call needed
}
}
// Function to edit a character
function editCharacter(character) {
const editForm = document.createElement('form');
editForm.innerHTML = `
<label style="color: var(--text-color);">Emoji: <input type="text" name="emoji" value="${character.emoji}" style="background-color: var(--bg-color); color: var(--text-color); border: 1px solid var(--border-color); border-radius: 5px; padding: 5px; width: 100%; box-sizing: border-box;"></label><br>
<label style="color: var(--text-color);">Name: <input type="text" name="name" value="${character.name}" style="background-color: var(--bg-color); color: var(--text-color); border: 1px solid var(--border-color); border-radius: 5px; padding: 5px; width: 100%; box-sizing: border-box;"></label><br>
<label style="color: var(--text-color);">Sex: <input type="text" name="sex" value="${character.sex}" style="background-color: var(--bg-color); color: var(--text-color); border: 1px solid var(--border-color); border-radius: 5px; padding: 5px; width: 100%; box-sizing: border-box;"></label><br>
<label style="color: var(--text-color);">Species: <input type="text" name="species" value="${character.species}" style="background-color: var(--bg-color); color: var(--text-color); border: 1px solid var(--border-color); border-radius: 5px; padding: 5px; width: 100%; box-sizing: border-box;"></label><br>
<label style="color: var(--text-color);">Age: <input type="text" name="age" value="${character.age}" style="background-color: var(--bg-color); color: var(--text-color); border: 1px solid var(--border-color); border-radius: 5px; padding: 5px; width: 100%; box-sizing: border-box;"></label><br>
<label style="color: var(--text-color);">Body Type: <input type="text" name="bodyType" value="${character.bodyType}" style="background-color: var(--bg-color); color: var(--text-color); border: 1px solid var(--border-color); border-radius: 5px; padding: 5px; width: 100%; box-sizing: border-box;"></label><br>
<label style="color: var(--text-color);">Personality: <input type="text" name="personality" value="${character.personality}" style="background-color: var(--bg-color); color: var(--text-color); border: 1px solid var(--border-color); border-radius: 5px; padding: 5px; width: 100%; box-sizing: border-box;"></label><br>
<label style="color: var(--text-color);">Bio: <textarea name="bio" style="background-color: var(--bg-color); color: var(--text-color); border: 1px solid var(--border-color); border-radius: 5px; padding: 5px; width: 100%; box-sizing: border-box;">${character.bio}</textarea></label><br>
<label style="color: var(--text-color);">User Controlled: <input type="checkbox" name="userControlled" ${character.userControlled ? 'checked' : ''}></label><br>
<button type="submit" style="background-color: var(--button-bg-color); color: var(--text-color); border: none; padding: 5px 10px; border-radius: 5px;">Save</button>
`;
const modal = createModal('Edit Character', editForm);
editForm.addEventListener('submit', (e) => {
e.preventDefault();
character.emoji = editForm.emoji.value;
character.name = editForm.name.value;
character.sex = editForm.sex.value;
character.species = editForm.species.value;
character.age = editForm.age.value;
character.bodyType = editForm.bodyType.value;
character.personality = editForm.personality.value;
character.bio = editForm.bio.value;
character.userControlled = editForm.userControlled.checked;
renderCharacterGroups();
// No saveData call needed
closeModal(modal);
});
}
// Function to delete a character
function deleteCharacter(characterId) {
if (confirm('Are you sure you want to delete this character?')) {
characterGroups.forEach(group => {
const index = group.items.findIndex(char => char.id === characterId);
if (index !== -1) {
group.items.splice(index, 1);
}
});
renderCharacterGroups();
// No saveData call needed
}
}
// Function to export all characters with groups
function exportCharacters() {
const data = characterGroups;
const json = JSON.stringify(data, null, 2);
const blob = new Blob([json], { type: 'application/json' });
const url = URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = url;
link.download = `all_characters_with_groups.json`;
link.click();
}
// Function to import characters with groups
function importCharacters() {
const fileInput = document.createElement('input');
fileInput.type = 'file';
fileInput.accept = '.json';
fileInput.addEventListener('change', async (event) => {
const file = event.target.files[0];
const reader = new FileReader();
reader.onload = (e) => {
try {
const importedGroups = JSON.parse(e.target.result);
if (Array.isArray(importedGroups)) {
characterGroups = importedGroups;
renderCharacterGroups();
// No saveData call needed
} else {
alert('Invalid format for characters import.');
}
} catch (error) {
alert('Failed to import characters: ' + error.message);
}
};
reader.readAsText(file);
});
fileInput.click();
}
// Function to export a single character
function exportCharacter(character) {
const json = JSON.stringify(character, null, 2);
const blob = new Blob([json], { type: 'application/json' });
const url = URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = url;
link.download = `${character.name}.json`;
link.click();
}
// Function to move character to a group
function moveCharacterToGroup(characterId, targetGroupIndex) {
let character = null;
// Remove character from current group
characterGroups.forEach(group => {
const index = group.items.findIndex(char => char.id === characterId);
if (index !== -1) {
character = group.items.splice(index, 1)[0];
}
});
// Add to target group
if (character) {
characterGroups[targetGroupIndex].items.push(character);
renderCharacterGroups();
// No saveData call needed
}
}
// Utility function to generate unique IDs
function generateId() {
return '_' + Math.random().toString(36).substr(2, 9);
}
// --- Location Sidebar with Groups ---
const locationSidebar = document.createElement('div');
locationSidebar.id = 'location-sheet-sidebar';
locationSidebar.style.cssText = `
position: fixed;
top: 0;
left: -350px;
width: 350px;
height: 100%;
display: flex;
flex-direction: column;
background-color: var(--bg-color);
border-right: 2px solid var(--border-color);
box-shadow: 2px 0 5px var(--shadow-color);
box-sizing: border-box;
transition: left 0.3s;
z-index: 9999;
`;
document.body.appendChild(locationSidebar);
const locationToggleButton = document.createElement('button');
locationToggleButton.textContent = '☰ Locations';
locationToggleButton.style.cssText = `
position: fixed;
top: 10px;
left: 10px;
padding: 5px 10px;
border: none;
background-color: var(--button-bg-color);
color: var(--text-color);
border-radius: 5px;
cursor: pointer;
transition: left 0.3s;
z-index: 10000;
`;
locationToggleButton.addEventListener('click', () => {
const isOpen = locationSidebar.style.left === '0px';
locationSidebar.style.left = isOpen ? '-350px' : '0';
locationToggleButton.style.left = isOpen ? '10px' : '360px';
});
document.body.appendChild(locationToggleButton);
const locationHeader = document.createElement('div');
locationHeader.style.cssText = `
padding: 10px;
background-color: var(--border-color);
text-align: center;
font-weight: bold;
color: var(--text-color);
`;
locationHeader.textContent = 'Locations';
locationSidebar.appendChild(locationHeader);
const locationButtonBox = document.createElement('div');
locationButtonBox.style.cssText = `
display: flex;
justify-content: space-between;
padding: 10px;
background-color: var(--bg-color);
flex-shrink: 0;
`;
locationSidebar.appendChild(locationButtonBox);
// New Location Button
const newLocationButton = document.createElement('button');
newLocationButton.textContent = 'New';
newLocationButton.title = 'Create New Location';
newLocationButton.style.cssText = `
padding: 5px 10px;
border: none;
background-color: var(--success-bg-color);
color: var(--text-color);
border-radius: 5px;
cursor: pointer;
`;
newLocationButton.addEventListener('click', () => {
createNewLocation();
});
locationButtonBox.appendChild(newLocationButton);
// Load Location Button
const loadLocationButton = document.createElement('button');
loadLocationButton.textContent = 'Load';
loadLocationButton.title = 'Load a Location';
loadLocationButton.style.cssText = `
padding: 5px 10px;
border: none;
background-color: var(--info-bg-color);
color: var(--text-color);
border-radius: 5px;
cursor: pointer;
`;
loadLocationButton.addEventListener('click', () => {
loadLocation();
});
locationButtonBox.appendChild(loadLocationButton);
// Group Location Button
const groupLocationButton = document.createElement('button');
groupLocationButton.textContent = 'Group';
groupLocationButton.title = 'Create New Group';
groupLocationButton.style.cssText = `
padding: 5px 10px;
border: none;
background-color: var(--info-bg-color);
color: var(--text-color);
border-radius: 5px;
cursor: pointer;
`;
groupLocationButton.addEventListener('click', () => {
createNewLocationGroup();
});
locationButtonBox.appendChild(groupLocationButton);
// Import Location Button
const importLocationButton = document.createElement('button');
importLocationButton.textContent = 'Import';
importLocationButton.title = 'Import Locations';
importLocationButton.style.cssText = `
padding: 5px 10px;
border: none;
background-color: var(--warning-bg-color);
color: var(--text-color);
border-radius: 5px;
cursor: pointer;
`;
importLocationButton.addEventListener('click', () => {
importLocations();
});
locationButtonBox.appendChild(importLocationButton);
// Export Location Button
const exportLocationButton = document.createElement('button');
exportLocationButton.textContent = 'Export';
exportLocationButton.title = 'Export Locations';
exportLocationButton.style.cssText = `
padding: 5px 10px;
border: none;
background-color: var(--muted-bg-color);
color: var(--text-color);
border-radius: 5px;
cursor: pointer;
`;
exportLocationButton.addEventListener('click', () => {
exportLocations();
});
locationButtonBox.appendChild(exportLocationButton);
// Add fifth button: "Load" for Location
function loadLocation() {
const fileInput = document.createElement('input');
fileInput.type = 'file';
fileInput.accept = '.json';
fileInput.addEventListener('change', async (event) => {
const file = event.target.files[0];
const reader = new FileReader();
reader.onload = (e) => {
try {
const location = JSON.parse(e.target.result);
if (location && location.id) {
// Add to Ungrouped
const ungrouped = locationGroups.find(g => g.name === 'Ungrouped');
if (ungrouped) {
ungrouped.items.push(location);
} else {
locationGroups[0].items.push(location);
}
renderLocationGroups();
// No saveData call needed
ensureActiveLocation();
} else {
alert('Invalid location format.');
}
} catch (error) {
alert('Failed to load location: ' + error.message);
}
};
reader.readAsText(file);
});
fileInput.click();
}
const locationGroupList = document.createElement('div');
locationGroupList.id = 'location-group-list';
locationGroupList.style.cssText = `
flex-grow: 1;
overflow-y: auto;
padding: 10px;
`;
locationSidebar.appendChild(locationGroupList);
// Initialize Location Groups with a single default location
let locationGroups = [
{
name: 'Ungrouped',
items: [
{
id: generateId(),
active: true,
emoji: '📍',
name: 'Default Location',
description: 'Description of the default location.'
}
]
}
];
// Function to create a new Location
function createNewLocation() {
const newLocation = {
id: generateId(),
active: false,
emoji: '📍',
name: 'New Location',
description: ''
};
// Add to Ungrouped
const ungrouped = locationGroups.find(g => g.name === 'Ungrouped');
if (ungrouped) {
ungrouped.items.push(newLocation);
} else {
locationGroups[0].items.push(newLocation);
}
renderLocationGroups();
ensureActiveLocation();
// No saveData call needed
}
// Function to create a new Location Group
function createNewLocationGroup() {
const groupName = prompt('Enter group name:', `Group ${locationGroups.length}`);
if (groupName && groupName.trim() !== '') {
locationGroups.push({ name: groupName.trim(), items: [] });
renderLocationGroups();
// No saveData call needed
}
}
// Function to render Location Groups and Items
function renderLocationGroups() {
locationGroupList.innerHTML = '';
locationGroups.forEach((group, groupIndex) => {
// Sort items alphabetically by name
group.items.sort((a, b) => a.name.localeCompare(b.name));
const groupContainer = document.createElement('div');
groupContainer.className = 'location-group';
groupContainer.style.cssText = `
margin-bottom: 10px;
border: 1px solid var(--border-color);
border-radius: 5px;
background-color: var(--active-char-color);
`;
const groupHeader = document.createElement('div');
groupHeader.style.cssText = `
display: flex;
justify-content: space-between;
align-items: center;
padding: 5px 10px;
background-color: var(--button-bg-color);
color: var(--text-color);
cursor: pointer;
user-select: none;
position: relative;
`;
groupHeader.textContent = group.name;
groupHeader.addEventListener('click', () => {
itemsContainer.style.display = itemsContainer.style.display === 'none' ? 'block' : 'none';
});
const groupActions = document.createElement('div');
groupActions.style.cssText = `
display: flex;
align-items: center;
`;
// Rename Group Button
const renameGroupButton = document.createElement('button');
renameGroupButton.textContent = '✏️';
renameGroupButton.title = 'Rename Group';
renameGroupButton.style.cssText = `
background: none;
border: none;
color: var(--text-color);
cursor: pointer;
margin-right: 5px;
`;
renameGroupButton.addEventListener('click', (e) => {
e.stopPropagation();
renameLocationGroup(groupIndex);
});
groupActions.appendChild(renameGroupButton);
// Delete Group Button
const deleteGroupButton = document.createElement('button');
deleteGroupButton.textContent = '🗑️';
deleteGroupButton.title = 'Delete Group';
deleteGroupButton.style.cssText = `
background: none;
border: none;
color: var(--text-color);
cursor: pointer;
`;
deleteGroupButton.addEventListener('click', (e) => {
e.stopPropagation();
deleteLocationGroup(groupIndex);
});
groupActions.appendChild(deleteGroupButton);
groupHeader.appendChild(groupActions);
groupContainer.appendChild(groupHeader);
const itemsContainer = document.createElement('div');
itemsContainer.style.cssText = `
padding: 5px 10px;
display: block;
`;
group.items.forEach((location, locIndex) => {
const locationSlot = createLocationSlot(location, groupIndex, locIndex);
itemsContainer.appendChild(locationSlot);
});
groupContainer.appendChild(itemsContainer);
// Add dragover and drop events for grouping
groupContainer.addEventListener('dragover', (e) => {
e.preventDefault();
groupContainer.style.border = `2px dashed var(--info-bg-color)`;
});
groupContainer.addEventListener('dragleave', (e) => {
groupContainer.style.border = `1px solid var(--border-color)`;
});
groupContainer.addEventListener('drop', (e) => {
e.preventDefault();
groupContainer.style.border = `1px solid var(--border-color)`;
const data = e.dataTransfer.getData('text/plain');
const { type, id } = JSON.parse(data);
if (type === 'location') {
moveLocationToGroup(id, groupIndex);
}
});
locationGroupList.appendChild(groupContainer);
});
// Ensure at least one group exists
if (locationGroups.length === 0) {
locationGroups.push({ name: 'Ungrouped', items: [] });
renderLocationGroups();
}
// Ensure at least one location is active
ensureActiveLocation();
}
// Function to create a Location Slot DOM element
function createLocationSlot(location, groupIndex, locIndex) {
const locationSlot = document.createElement('div');
locationSlot.className = 'location-slot';
locationSlot.draggable = true;
locationSlot.dataset.id = location.id;
locationSlot.style.cssText = `
display: flex;
align-items: center;
justify-content: space-between;
padding: 5px;
margin-bottom: 5px;
border: 1px solid var(--border-color);
border-radius: 5px;
background-color: var(--bg-color);
cursor: grab;
`;
// Drag events
locationSlot.addEventListener('dragstart', (e) => {
e.dataTransfer.setData('text/plain', JSON.stringify({ type: 'location', id: location.id }));
e.currentTarget.style.opacity = '0.5';
});
locationSlot.addEventListener('dragend', (e) => {
e.currentTarget.style.opacity = '1';
});
// Left Div (Active Toggle, Emoji, Name)
const leftDiv = document.createElement('div');
leftDiv.style.display = 'flex';
leftDiv.style.alignItems = 'center';
leftDiv.style.flexGrow = '1';
const activeButton = document.createElement('button');
activeButton.textContent = location.active ? '🟢' : '🔴';
activeButton.title = 'Toggle Active';
activeButton.style.cssText = `
padding: 3px;
border: none;
background: none;
cursor: pointer;
color: var(--text-color);
margin-right: 5px;
`;
activeButton.addEventListener('click', () => {
// Since only one active location is allowed, deactivate others
locationGroups.forEach(group => {
group.items.forEach(loc => {
loc.active = false;
});
});
location.active = !location.active;
renderLocationGroups();
// No saveData call needed
});
leftDiv.appendChild(activeButton);
const emojiSpan = document.createElement('span');
emojiSpan.textContent = location.emoji;
emojiSpan.style.marginRight = '5px';
leftDiv.appendChild(emojiSpan);
const nameSpan = document.createElement('span');
nameSpan.textContent = location.name;
nameSpan.style.cssText = `
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
max-width: 120px;
color: var(--text-color);
`;
leftDiv.appendChild(nameSpan);
locationSlot.appendChild(leftDiv);
// Right Div (Edit, Delete, Export)
const rightDiv = document.createElement('div');
rightDiv.style.display = 'flex';
rightDiv.style.alignItems = 'center';
const editButton = document.createElement('button');
editButton.textContent = '✏️';
editButton.title = 'Edit Location';
editButton.style.cssText = `
padding: 3px;
border: none;
background: none;
cursor: pointer;
color: var(--text-color);
margin-right: 5px;
`;
editButton.addEventListener('click', () => {
editLocation(location);
});
rightDiv.appendChild(editButton);
const deleteButton = document.createElement('button');
deleteButton.textContent = '🗑️';
deleteButton.title = 'Delete Location';
deleteButton.style.cssText = `
padding: 3px;
border: none;
background: none;
cursor: pointer;
color: var(--text-color);
margin-right: 5px;
`;
deleteButton.addEventListener('click', () => {
deleteLocation(location.id);
});
rightDiv.appendChild(deleteButton);
const exportButton = document.createElement('button');
exportButton.textContent = '⬇️';
exportButton.title = 'Export Location';
exportButton.style.cssText = `
padding: 3px;
border: none;
background: none;
cursor: pointer;
color: var(--text-color);
`;
exportButton.addEventListener('click', () => {
exportLocation(location);
});
rightDiv.appendChild(exportButton);
locationSlot.appendChild(rightDiv);
return locationSlot;
}
// Function to rename a location group
function renameLocationGroup(groupIndex) {
const newName = prompt('Enter new group name:', locationGroups[groupIndex].name);
if (newName && newName.trim() !== '') {
locationGroups[groupIndex].name = newName.trim();
renderLocationGroups();
// No saveData call needed
}
}
// Function to delete a location group
function deleteLocationGroup(groupIndex) {
if (locationGroups.length === 1) {
alert('At least one group must exist.');
return;
}
if (confirm(`Are you sure you want to delete the group "${locationGroups[groupIndex].name}"? All locations in this group will be moved to "Ungrouped".`)) {
const group = locationGroups.splice(groupIndex, 1)[0];
const ungrouped = locationGroups.find(g => g.name === 'Ungrouped');
if (ungrouped) {
ungrouped.items = ungrouped.items.concat(group.items);
} else {
locationGroups.unshift({ name: 'Ungrouped', items: group.items });
}
renderLocationGroups();
// No saveData call needed
}
}
// Function to edit a location
function editLocation(location) {
const editForm = document.createElement('form');
editForm.innerHTML = `
<label style="color: var(--text-color);">Emoji: <input type="text" name="emoji" value="${location.emoji}" style="background-color: var(--bg-color); color: var(--text-color); border: 1px solid var(--border-color); border-radius: 5px; padding: 5px; width: 100%; box-sizing: border-box;"></label><br>
<label style="color: var(--text-color);">Name: <input type="text" name="name" value="${location.name}" style="background-color: var(--bg-color); color: var(--text-color); border: 1px solid var(--border-color); border-radius: 5px; padding: 5px; width: 100%; box-sizing: border-box;"></label><br>
<label style="color: var(--text-color);">Description: <textarea name="description" style="background-color: var(--bg-color); color: var(--text-color); border: 1px solid var(--border-color); border-radius: 5px; padding: 5px; width: 100%; box-sizing: border-box;">${location.description}</textarea></label><br>
<button type="submit" style="background-color: var(--button-bg-color); color: var(--text-color); border: none; padding: 5px 10px; border-radius: 5px;">Save</button>
`;
const modal = createModal('Edit Location', editForm);
editForm.addEventListener('submit', (e) => {
e.preventDefault();
location.emoji = editForm.emoji.value;
location.name = editForm.name.value;
location.description = editForm.description.value;
renderLocationGroups();
ensureActiveLocation();
// No saveData call needed
closeModal(modal);
});
}
// Function to delete a location
function deleteLocation(locationId) {
if (confirm('Are you sure you want to delete this location?')) {
locationGroups.forEach(group => {
const index = group.items.findIndex(loc => loc.id === locationId);
if (index !== -1) {
group.items.splice(index, 1);
}
});
renderLocationGroups();
ensureActiveLocation();
// No saveData call needed
}
}
// Function to export all locations with groups
function exportLocations() {
const data = locationGroups;
const json = JSON.stringify(data, null, 2);
const blob = new Blob([json], { type: 'application/json' });
const url = URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = url;
link.download = `all_locations_with_groups.json`;
link.click();
}
// Function to import locations with groups
function importLocations() {
const fileInput = document.createElement('input');
fileInput.type = 'file';
fileInput.accept = '.json';
fileInput.addEventListener('change', async (event) => {
const file = event.target.files[0];
const reader = new FileReader();
reader.onload = (e) => {
try {
const importedGroups = JSON.parse(e.target.result);
if (Array.isArray(importedGroups)) {
locationGroups = importedGroups;
renderLocationGroups();
ensureActiveLocation();
// No saveData call needed
} else {
alert('Invalid format for locations import.');
}
} catch (error) {
alert('Failed to import locations: ' + error.message);
}
};
reader.readAsText(file);
});
fileInput.click();
}
// Function to export a single location
function exportLocation(location) {
const json = JSON.stringify(location, null, 2);
const blob = new Blob([json], { type: 'application/json' });
const url = URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = url;
link.download = `${location.name}.json`;
link.click();
}
// Function to move location to a group
function moveLocationToGroup(locationId, targetGroupIndex) {
let location = null;
// Remove location from current group
locationGroups.forEach(group => {
const index = group.items.findIndex(loc => loc.id === locationId);
if (index !== -1) {
location = group.items.splice(index, 1)[0];
}
});
// Add to target group
if (location) {
locationGroups[targetGroupIndex].items.push(location);
renderLocationGroups();
ensureActiveLocation();
// No saveData call needed
}
}
// Function to create a modal
function createModal(title, content) {
const modalOverlay = document.createElement('div');
modalOverlay.style.cssText = `
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: 10002;
`;
const modalBox = document.createElement('div');
modalBox.style.cssText = `
background-color: var(--bg-color);
padding: 20px;
border: 1px solid var(--border-color);
border-radius: 5px;
width: 400px;
max-width: 90%;
box-shadow: 0 0 10px var(--shadow-color);
position: relative;
`;
const modalTitle = document.createElement('h2');
modalTitle.textContent = title;
modalTitle.style.cssText = `
margin-top: 0;
color: var(--text-color);
`;
modalBox.appendChild(modalTitle);
const closeButton = document.createElement('button');
closeButton.textContent = '✖️';
closeButton.style.cssText = `
position: absolute;
top: 15px;
right: 20px;
background: none;
border: none;
font-size: 20px;
cursor: pointer;
color: var(--text-color);
`;
closeButton.addEventListener('click', () => {
closeModal(modalOverlay);
});
modalBox.appendChild(closeButton);
modalBox.appendChild(content);
modalOverlay.appendChild(modalBox);
document.body.appendChild(modalOverlay);
return modalOverlay;
}
// Function to close a modal
function closeModal(modal) {
if (modal && modal.parentNode) {
modal.parentNode.removeChild(modal);
}
}
// Function to ensure at least one location is active
function ensureActiveLocation() {
const activeLocations = locationGroups.flatMap(g => g.items).filter(loc => loc.active);
if (activeLocations.length === 0 && locationGroups.flatMap(g => g.items).length > 0) {
locationGroups[0].items[0].active = true;
}
}
// Initial render of Character and Location Groups
renderCharacterGroups();
renderLocationGroups();
// --- Plot Field ---
const plotDiv = document.createElement('div');
plotDiv.style.cssText = `
display: flex;
justify-content: space-between;
padding: 10px;
background-color: var(--bg-color);
border-top: 1px solid var(--border-color);
flex-shrink: 0;
`;
const plotInput = document.createElement('input');
plotInput.type = 'text';
plotInput.placeholder = 'Plot';
plotInput.style.cssText = `
width: 100%;
padding: 5px;
border: 1px solid var(--border-color);
border-radius: 5px;
background-color: var(--bg-color);
color: var(--text-color);
box-sizing: border-box;
`;
plotDiv.appendChild(plotInput);
characterSidebar.appendChild(plotDiv);
// --- Context Menu ---
const contextMenuButton = document.createElement('button');
contextMenuButton.textContent = 'Context Menu';
contextMenuButton.style.cssText = `
position: fixed;
top: 10px;
left: 50%;
transform: translateX(-50%);
padding: 5px 10px;
border: none;
background-color: var(--button-bg-color);
color: var(--text-color);
border-radius: 5px;
cursor: pointer;
z-index: 10000;
`;
document.body.appendChild(contextMenuButton);
const contextPanel = document.createElement('div');
contextPanel.id = 'context-panel';
contextPanel.style.cssText = `
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 400px;
padding: 20px;
background-color: var(--bg-color);
border: 1px solid var(--border-color);
box-shadow: 0 0 10px var(--shadow-color);
border-radius: 5px;
display: none;
z-index: 10001;
`;
document.body.appendChild(contextPanel);
const transparencyLabel = document.createElement('label');
transparencyLabel.textContent = 'UI Transparency';
transparencyLabel.style.cssText = `
color: var(--text-color);
display: block;
margin-bottom: 5px;
`;
contextPanel.appendChild(transparencyLabel);
const transparencySlider = document.createElement('input');
transparencySlider.type = 'range';
transparencySlider.min = '0.1';
transparencySlider.max = '1';
transparencySlider.step = '0.1';
transparencySlider.value = defaultTransparency;
transparencySlider.style.cssText = `
width: 100%;
margin-bottom: 10px;
`;
transparencySlider.addEventListener('input', () => {
document.documentElement.style.setProperty('--ui-transparency', transparencySlider.value);
// Re-apply current theme to update transparency
setTheme(themeDropdown.value);
GM.setValue('transparency', transparencySlider.value);
});
contextPanel.appendChild(transparencySlider);
const dropperLabel = document.createElement('label');
dropperLabel.textContent = 'UI Theme';
dropperLabel.style.cssText = `
color: var(--text-color);
display: block;
margin-bottom: 5px;
`;
contextPanel.appendChild(dropperLabel);
const themeDropdown = document.createElement('select');
themeDropdown.style.cssText = `
width: 100%;
padding: 5px;
margin-bottom: 10px;
border: 1px solid var(--border-color);
border-radius: 5px;
background-color: var(--bg-color);
color: var(--text-color);
`;
Object.keys(themes).forEach(theme => {
const option = document.createElement('option');
option.value = theme;
option.textContent = theme.charAt(0).toUpperCase() + theme.slice(1);
themeDropdown.appendChild(option);
});
themeDropdown.value = defaultTheme;
themeDropdown.addEventListener('change', () => {
setTheme(themeDropdown.value);
GM.setValue('theme', themeDropdown.value);
});
contextPanel.appendChild(themeDropdown);
// Add divider
const divider = document.createElement('hr');
divider.style.cssText = `
border: none;
border-top: 1px solid var(--border-color);
margin: 10px 0;
`;
contextPanel.appendChild(divider);
const contextLabel = document.createElement('label');
contextLabel.textContent = 'Primary Context';
contextLabel.style.cssText = `
color: var(--text-color);
display: block;
margin-bottom: 5px;
`;
contextPanel.appendChild(contextLabel);
const primaryContextInput = document.createElement('textarea');
primaryContextInput.placeholder = 'Primary context goes here...';
primaryContextInput.style.cssText = `
width: 100%;
height: 100px;
margin-bottom: 10px;
padding: 10px;
border: 1px solid var(--border-color);
border-radius: 5px;
box-sizing: border-box;
background-color: var(--bg-color);
color: var(--text-color);
`;
contextPanel.appendChild(primaryContextInput);
// Define the sleep function
function sleep(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
const updateContextButton = document.createElement('button');
updateContextButton.textContent = 'Update Context';
updateContextButton.style.cssText = `
width: 100%;
padding: 10px;
border: none;
background-color: var(--success-bg-color);
color: var(--text-color);
border-radius: 5px;
cursor: pointer;
`;
updateContextButton.addEventListener('click', async () => {
const primaryContext = primaryContextInput.value;
var fullContext = `Context;\n"` + primaryContext + `"\n`;
fullContext += `\n` + window.getContext();
console.log("setting context; " + fullContext);
window.manuClick('//*[@id="menu-button-:rb:"]');
await sleep(250);
window.manuClick('//*[@id="menu-list-:rb:-menuitem-:ru:"]');
await sleep(250);
window.manuWrite("/html/body/div[8]/div[3]/div/section/div/textarea", fullContext);
await sleep(250);
window.manuClick("/html/body/div[8]/div[3]/div/section/footer/button[2]");
});
window.manuWrite = function(xpath, text) {
var result = document.evaluate(
xpath,
document,
null,
XPathResult.FIRST_ORDERED_NODE_TYPE,
null
);
var node = result.singleNodeValue;
if (node) {
node.focus();
// Since the node is an HTMLTextAreaElement, get the value setter from its prototype
const nativeTextAreaValueSetter = Object.getOwnPropertyDescriptor(
window.HTMLTextAreaElement.prototype,
'value'
).set;
nativeTextAreaValueSetter.call(node, text);
// Dispatch the 'input' event to simulate user input
var event = new Event('input', { bubbles: true });
node.dispatchEvent(event);
} else {
console.error("Node not found for XPath:", xpath);
}
}
window.manuClick = function(xpath) {
var result = document.evaluate(
xpath,
document,
null,
XPathResult.FIRST_ORDERED_NODE_TYPE,
null
);
var node = result.singleNodeValue;
if (node) {
node.click();
}
}
contextPanel.appendChild(updateContextButton);
contextMenuButton.addEventListener('click', () => {
contextPanel.style.display = contextPanel.style.display === 'none' ? 'block' : 'none';
});
// Make getContext accessible from the console
window.getContext = function() {
const activeLocation = locationGroups.flatMap(g => g.items).find(loc => loc.active);
if (!activeLocation) return '';
let context = ``;
if (plotInput && plotInput.value.trim() !== '') {
context += `Plot:\n"${plotInput.value}"\n`;
} else {
context += `Plot:\n"No specific plot."\n`;
}
context += `\nSetting;\n"${activeLocation.name}" (${timeInput.value}, ${weatherInput.value}):\n`
context += `\u0009"${activeLocation.description}"\n`;
context += `\n{{user}}'s characters;\n`;
characterGroups.flatMap(g => g.items)
.filter(char => char.active && char.userControlled)
.forEach(char => {
context += `"${char.name}" (${char.sex}, ${char.species}, ${char.age}, ${char.bodyType}, ${char.personality}):\n`;
context += `\u0009"${char.bio}"\n`;
});
context += `\n{{char}}'s characters;\n`;
characterGroups.flatMap(g => g.items)
.filter(char => char.active && !char.userControlled)
.forEach(char => {
context += `"${char.name}" (${char.sex}, ${char.species}, ${char.age}, ${char.bodyType}, ${char.personality}):\n`;
context += `\u0009"${char.bio}"\n`;
});
return context;
};
// --- Location Context Inputs ---
const globalInputs = document.createElement('div');
globalInputs.style.cssText = `
display: flex;
justify-content: space-between;
padding: 10px;
background-color: var(--bg-color);
border-top: 1px solid var(--border-color);
flex-shrink: 0;
`;
locationSidebar.appendChild(globalInputs);
const timeInput = document.createElement('input');
timeInput.type = 'text';
timeInput.placeholder = 'Time';
timeInput.style.cssText = `
width: calc(50% - 5px);
padding: 5px;
border: 1px solid var(--border-color);
border-radius: 5px;
background-color: var(--bg-color);
color: var(--text-color);
`;
globalInputs.appendChild(timeInput);
const weatherInput = document.createElement('input');
weatherInput.type = 'text';
weatherInput.placeholder = 'Weather';
weatherInput.style.cssText = `
width: calc(50% - 5px);
padding: 5px;
border: 1px solid var(--border-color);
border-radius: 5px;
background-color: var(--bg-color);
color: var(--text-color);
`;
globalInputs.appendChild(weatherInput);
// Initial render of transparency and theme settings
transparencySlider.value = defaultTransparency;
themeDropdown.value = defaultTheme;
// Initial render of groups
renderCharacterGroups();
renderLocationGroups();
// --- Remove Save Groups on Page Unload ---
// Removed because data is not being saved anymore
})();
