notes panel from catliife
// ==UserScript==
// @name notes panel
// @namespace http://tampermonkey.net/
// @version 2025-01-19
// @description notes panel from catliife
// @author https://m.vk.com/modsforcatlife?from=groups
// @match https://worldcats.ru/play/
// @match https://worldcats.ru/play/?v=b
// @match https://catlifeonline.com/play/
// @match https://catlifeonline.com/play/?v=b
// @icon https://www.google.com/s2/favicons?sz=64&domain=catlifeonline.com
// @grant none
// ==/UserScript==
(function() {
'use strict';
if (window.gameNotesModAdded) return;
window.gameNotesModAdded = true;
// Стили для всех элементов (остаются без изменений)
var style = document.createElement('style');
style.textContent = `
#notes-mod-container {
position: fixed;
top: 10px;
right: 150px;
z-index: 9999;
font-family: 'Roboto', sans-serif;
}
#notes-toggle-btn {
background: rgba(34, 34, 34, 0.8);
color: #FF9500;
border: none;
padding: 8px 16px;
border-radius: 18px;
cursor: pointer;
font-weight: 500;
box-shadow: 0 2px 10px rgba(0,0,0,0.3);
display: flex;
align-items: center;
gap: 8px;
backdrop-filter: blur(5px);
}
#notes-toggle-btn:hover {
background: rgba(42, 42, 42, 0.8);
}
#notes-toggle-btn::before {
content: "✏️";
}
#notes-panel {
display: none;
background: rgba(30, 30, 30, 0.9);
border-radius: 12px;
width: 350px;
height: 500px;
overflow: hidden;
box-shadow: 0 4px 20px rgba(0,0,0,0.5);
flex-direction: column;
backdrop-filter: blur(5px);
}
.notes-header {
background: rgba(37, 37, 37, 0.9);
color: #FF9500;
padding: 16px;
font-weight: 500;
border-bottom: 1px solid #333;
flex-shrink: 0;
}
.notes-tabs {
display: flex;
background: rgba(37, 37, 37, 0.9);
padding: 8px;
overflow-x: auto;
border-bottom: 1px solid #333;
flex-shrink: 0;
scrollbar-width: none;
}
.notes-tabs::-webkit-scrollbar {
display: none;
}
.notes-tab {
padding: 8px 16px;
cursor: pointer;
white-space: nowrap;
border-radius: 8px;
color: #AAA;
font-size: 14px;
margin-right: 4px;
transition: all 0.2s;
flex-shrink: 0;
}
.notes-tab.active {
background: rgba(51, 51, 51, 0.9);
color: #FF9500;
font-weight: 500;
}
.notes-content-wrapper {
flex-grow: 1;
overflow: hidden;
display: flex;
flex-direction: column;
}
.notes-content {
padding: 16px;
overflow-y: auto;
line-height: 1.5;
border: 1px solid rgba(51, 51, 51, 0.5);
margin: 16px;
border-radius: 8px;
background: rgba(37, 37, 37, 0.7);
flex-grow: 1;
white-space: pre-wrap;
}
.note-editor {
display: none;
padding: 0 16px;
flex-grow: 1;
overflow: hidden;
flex-direction: column;
}
.note-editor.active {
display: flex;
}
.note-title-input {
width: calc(100% - 24px);
padding: 8px 12px;
margin: 16px 12px 12px;
background: rgba(51, 51, 51, 0.7);
color: #FFF;
border: 1px solid rgba(68, 68, 68, 0.5);
border-radius: 8px;
font-size: 16px;
}
.note-content-textarea {
width: calc(100% - 24px);
padding: 12px;
margin: 0 12px;
background: rgba(51, 51, 51, 0.7);
color: #FFF;
border: 1px solid rgba(68, 68, 68, 0.5);
border-radius: 8px;
resize: none;
flex-grow: 1;
min-height: 100px;
font-family: 'Roboto', monospace;
white-space: pre-wrap;
}
.notes-controls {
display: flex;
padding: 8px 12px;
background: rgba(37, 37, 37, 0.9);
border-top: 1px solid #333;
gap: 6px;
flex-shrink: 0;
}
.notes-btn {
padding: 6px 10px;
border-radius: 6px;
cursor: pointer;
font-weight: 500;
border: none;
transition: background 0.2s;
font-size: 13px;
}
.add-btn {
background: #FF9500;
color: #222;
margin-right: auto;
padding: 6px 12px;
}
.add-btn:hover {
background: #ffaa33;
}
.delete-btn {
background: rgba(51, 51, 51, 0.7);
color: #FF3B30;
}
.delete-btn:hover {
background: rgba(68, 68, 68, 0.7);
}
.save-btn {
background: rgba(51, 51, 51, 0.7);
color: #34C759;
}
.save-btn:hover {
background: rgba(68, 68, 68, 0.7);
}
.edit-btn {
background: rgba(51, 51, 51, 0.7);
color: #4DABFF;
display: none;
}
.edit-btn:hover {
background: rgba(68, 68, 68, 0.7);
}
.notes-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.no-notes {
padding: 20px;
text-align: center;
color: #666;
}
.note-date {
font-size: 12px;
color: #666;
margin-top: 8px;
}
/* Стили для HTML-элементов */
.notes-content h1, .notes-content h2, .notes-content h3,
.notes-content h4, .notes-content h5, .notes-content h6 {
color: #FF9500;
margin: 0.8em 0 0.4em;
line-height: 1.2;
}
.notes-content h1 { font-size: 2em; font-weight: 500; }
.notes-content h2 { font-size: 1.7em; font-weight: 500; }
.notes-content h3 { font-size: 1.4em; }
.notes-content h4 { font-size: 1.2em; }
.notes-content h5 { font-size: 1em; }
.notes-content h6 { font-size: 0.9em; color: #AAA; }
.notes-content p {
margin: 0.7em 0;
line-height: 1.5;
}
.notes-content a {
color: #4DABFF;
text-decoration: none;
}
.notes-content a:hover {
text-decoration: underline;
}
.notes-content strong, .notes-content b {
font-weight: bold;
color: #FFAA33;
}
.notes-content em, .notes-content i {
font-style: italic;
}
.notes-content u {
text-decoration: underline;
}
.notes-content del {
text-decoration: line-through;
color: #888;
}
.notes-content blockquote {
border-left: 3px solid #FF9500;
padding-left: 12px;
margin: 12px 0;
color: #CCC;
}
.notes-content pre {
background: rgba(37, 37, 37, 0.7);
padding: 12px;
border-radius: 6px;
overflow-x: auto;
font-family: 'JetBrains Mono', monospace;
margin: 12px 0;
white-space: pre-wrap;
}
.notes-content code {
font-family: 'JetBrains Mono', monospace;
background: rgba(37, 37, 37, 0.7);
padding: 2px 4px;
border-radius: 3px;
font-size: 0.9em;
}
.notes-content ul, .notes-content ol {
padding-left: 24px;
margin: 12px 0;
}
.notes-content li {
margin: 6px 0;
}
.notes-content hr {
border: none;
height: 1px;
background: #333;
margin: 16px 0;
}
.notes-content table {
border-collapse: collapse;
width: 100%;
margin: 12px 0;
}
.notes-content th, .notes-content td {
border: 1px solid #333;
padding: 8px 12px;
text-align: left;
}
.notes-content th {
background: rgba(37, 37, 37, 0.7);
color: #FF9500;
}
.notes-content img {
max-width: 100%;
border-radius: 4px;
margin: 8px 0;
}
/* Цвета через style */
.notes-content span[style*="color"] {
padding: 0 2px;
}
/* Прокрутка */
#notes-panel {
scroll-behavior: smooth;
}
.notes-content::-webkit-scrollbar,
.note-content-textarea::-webkit-scrollbar {
width: 8px;
}
.notes-content::-webkit-scrollbar-track,
.note-content-textarea::-webkit-scrollbar-track {
background: rgba(37, 37, 37, 0.5);
}
.notes-content::-webkit-scrollbar-thumb,
.note-content-textarea::-webkit-scrollbar-thumb {
background: #FF9500;
border-radius: 4px;
}
`;
document.head.appendChild(style);
// Добавляем шрифты
var fontLink = document.createElement('link');
fontLink.href = 'https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&family=JetBrains+Mono&display=swap';
fontLink.rel = 'stylesheet';
document.head.appendChild(fontLink);
// Создаем структуру интерфейса
var container = document.createElement('div');
container.id = 'notes-mod-container';
var toggleBtn = document.createElement('button');
toggleBtn.id = 'notes-toggle-btn';
toggleBtn.textContent = 'Заметки';
var notesPanel = document.createElement('div');
notesPanel.id = 'notes-panel';
var header = document.createElement('div');
header.className = 'notes-header';
header.textContent = 'Мои заметки';
var tabsContainer = document.createElement('div');
tabsContainer.className = 'notes-tabs';
var contentWrapper = document.createElement('div');
contentWrapper.className = 'notes-content-wrapper';
var contentContainer = document.createElement('div');
contentContainer.className = 'notes-content';
var editorContainer = document.createElement('div');
editorContainer.className = 'note-editor';
var titleInput = document.createElement('input');
titleInput.className = 'note-title-input';
titleInput.placeholder = 'Название заметки';
var contentTextarea = document.createElement('textarea');
contentTextarea.className = 'note-content-textarea';
contentTextarea.placeholder = 'Введите текст с HTML-тегами (<h1>, <b>, <color="red"> и др.)';
editorContainer.appendChild(titleInput);
editorContainer.appendChild(contentTextarea);
var controlsContainer = document.createElement('div');
controlsContainer.className = 'notes-controls';
var addBtn = document.createElement('button');
addBtn.className = 'notes-btn add-btn';
addBtn.textContent = 'Новая';
var deleteBtn = document.createElement('button');
deleteBtn.className = 'notes-btn delete-btn';
deleteBtn.textContent = 'Удалить';
deleteBtn.disabled = true;
var saveBtn = document.createElement('button');
saveBtn.className = 'notes-btn save-btn';
saveBtn.textContent = 'Сохранить';
var editBtn = document.createElement('button');
editBtn.className = 'notes-btn edit-btn';
editBtn.textContent = 'Ред.';
controlsContainer.appendChild(addBtn);
controlsContainer.appendChild(deleteBtn);
controlsContainer.appendChild(saveBtn);
controlsContainer.appendChild(editBtn);
contentWrapper.appendChild(contentContainer);
notesPanel.appendChild(header);
notesPanel.appendChild(tabsContainer);
notesPanel.appendChild(contentWrapper);
notesPanel.appendChild(editorContainer);
notesPanel.appendChild(controlsContainer);
container.appendChild(toggleBtn);
container.appendChild(notesPanel);
document.body.appendChild(container);
// Логика работы
var notes = JSON.parse(localStorage.getItem('game-notes') || '[]');
var currentNoteIndex = notes.length > 0 ? notes.length - 1 : -1;
var isScrolling = false;
function saveNotes() {
localStorage.setItem('game-notes', JSON.stringify(notes));
}
function formatDate(date) {
return new Date(date).toLocaleString('ru-RU', {
day: 'numeric',
month: 'short',
hour: '2-digit',
minute: '2-digit'
});
}
function renderNotes() {
tabsContainer.innerHTML = '';
if (notes.length === 0) {
contentContainer.innerHTML = '<div class="no-notes">Нет заметок</div>';
editorContainer.classList.remove('active');
contentWrapper.style.display = 'block';
deleteBtn.disabled = true;
saveBtn.disabled = true;
editBtn.style.display = 'none';
return;
}
notes.forEach(function(note, index) {
var tab = document.createElement('div');
tab.className = 'notes-tab ' + (index === currentNoteIndex ? 'active' : '');
tab.textContent = note.title || 'Без названия';
tab.onclick = function() {
currentNoteIndex = index;
showNoteView(); // Добавлено: переключаем в режим просмотра при выборе заметки
renderNotes();
};
tabsContainer.appendChild(tab);
});
var note = notes[currentNoteIndex];
if (editorContainer.classList.contains('active')) {
titleInput.value = note.title || '';
contentTextarea.value = note.content || '';
} else {
// Безопасный рендеринг HTML
var content = note.content || '';
// Исправляем тег color
content = content.replace(/<color=(['"])(.*?)\1>/gi, '<span style="color: $2">');
content = content.replace(/<\/color>/gi, '</span>');
contentContainer.innerHTML = content;
if (note.updatedAt) {
var dateElement = document.createElement('div');
dateElement.className = 'note-date';
dateElement.textContent = formatDate(note.updatedAt);
contentContainer.appendChild(dateElement);
}
}
deleteBtn.disabled = false;
saveBtn.disabled = false;
// Прокручиваем к активной вкладке
if (tabsContainer.scrollWidth > tabsContainer.clientWidth) {
var activeTab = tabsContainer.querySelector('.notes-tab.active');
if (activeTab) {
activeTab.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'center' });
}
}
}
function showNoteView() {
editorContainer.classList.remove('active');
contentWrapper.style.display = 'block';
saveBtn.style.display = 'inline-block';
editBtn.style.display = 'inline-block';
deleteBtn.style.display = 'inline-block';
// Обновляем содержимое заметки при переключении в режим просмотра
if (currentNoteIndex >= 0) {
var note = notes[currentNoteIndex];
var content = note.content || '';
content = content.replace(/<color=(['"])(.*?)\1>/gi, '<span style="color: $2">');
content = content.replace(/<\/color>/gi, '</span>');
contentContainer.innerHTML = content;
if (note.updatedAt) {
var dateElement = document.createElement('div');
dateElement.className = 'note-date';
dateElement.textContent = formatDate(note.updatedAt);
contentContainer.appendChild(dateElement);
}
}
}
function showEditorView() {
editorContainer.classList.add('active');
contentWrapper.style.display = 'none';
saveBtn.style.display = 'inline-block';
editBtn.style.display = 'none';
deleteBtn.style.display = 'inline-block';
contentTextarea.focus();
// Обновляем содержимое редактора при переключении в режим редактирования
if (currentNoteIndex >= 0) {
var note = notes[currentNoteIndex];
titleInput.value = note.title || '';
contentTextarea.value = note.content || '';
}
}
// Обработчики событий
toggleBtn.addEventListener('click', function() {
notesPanel.style.display = notesPanel.style.display === 'none' ? 'flex' : 'none';
if (notesPanel.style.display === 'flex') {
renderNotes();
}
});
addBtn.addEventListener('click', function() {
var newNote = {
title: 'Новая заметка',
content: '',
createdAt: new Date().toISOString(),
updatedAt: new Date().toISOString()
};
notes.push(newNote);
currentNoteIndex = notes.length - 1;
saveNotes();
renderNotes();
showEditorView();
titleInput.focus();
});
deleteBtn.addEventListener('click', function() {
if (currentNoteIndex >= 0 && confirm('Удалить эту заметку?')) {
notes.splice(currentNoteIndex, 1);
currentNoteIndex = notes.length > 0 ? Math.min(currentNoteIndex, notes.length - 1) : -1;
saveNotes();
renderNotes();
}
});
titleInput.addEventListener('input', function() {
if (currentNoteIndex >= 0) {
notes[currentNoteIndex].title = titleInput.value;
notes[currentNoteIndex].updatedAt = new Date().toISOString();
saveNotes();
renderNotes();
}
});
contentTextarea.addEventListener('input', function() {
if (currentNoteIndex >= 0) {
notes[currentNoteIndex].content = contentTextarea.value;
notes[currentNoteIndex].updatedAt = new Date().toISOString();
saveNotes();
}
});
saveBtn.addEventListener('click', function() {
if (currentNoteIndex >= 0) {
saveNotes();
showNoteView();
}
});
editBtn.addEventListener('click', function() {
if (currentNoteIndex >= 0) {
showEditorView();
}
});
contentContainer.addEventListener('dblclick', function() {
if (currentNoteIndex >= 0) {
showEditorView();
}
});
// Прокрутка между заметками колесиком
tabsContainer.addEventListener('wheel', function(e) {
if (isScrolling) return;
isScrolling = true;
e.preventDefault();
if (notes.length > 1) {
currentNoteIndex = (currentNoteIndex + (e.deltaY > 0 ? 1 : -1) + notes.length) % notes.length;
showNoteView(); // Добавлено: переключаем в режим просмотра при прокрутке
renderNotes();
}
setTimeout(() => { isScrolling = false; }, 100);
});
// Прокрутка содержимого заметки колесиком
contentContainer.addEventListener('wheel', function(e) {
this.scrollTop += e.deltaY;
e.preventDefault();
});
// Прокрутка всей панели
notesPanel.addEventListener('wheel', function(e) {
if (e.target === notesPanel) {
this.scrollTop += e.deltaY;
e.preventDefault();
}
});
// Инициализация
notesPanel.style.display = 'none'
editBtn.style.display = 'none';
if (notes.length > 0) {
renderNotes();
}
console.log('Мод "Заметки" с полной HTML-поддержкой успешно загружен!');
})();