A!leys Galerie

// Quest Journal Planner with Dark Mode - RPG Maker MZ Plugin

function QuestJournal() {
    this.parse = function(text) {
        const lines = text.split('\n');
        return lines.map(line => {
            const match = line.match(/\[([A-Z]+)\] (.+)/);
            if (match) return { category: match[1], content: match[2] };
            return { category: 'DEFAULT', content: line };
        });
    };

    this.render = function(data, darkMode = false) {
        let html = `<div class="quest-journal" style="background: ${darkMode ? '#1e1e1e' : '#f5f5f5'}; color: ${darkMode ? '#e0e0e0' : '#333'}; padding: 20px; border-radius: 8px;">`;
        html += `<h2 style="color: ${darkMode ? '#4dabf7' : '#2c3e50'};">Quest Journal</h2>`;

        const categories = {};
        data.forEach(quest => {
            if (!categories[quest.category]) {
                categories[quest.category] = [];
            }
            categories[quest.category].push(quest.content);
        });

        for (const [category, contents] of Object.entries(categories)) {
            html += `<div style="margin-bottom: 20px;">`;
            html += `<h3 style="color: ${darkMode ? '#4dabf7' : '#3498db'};">${category}</h3>`;
            html += `<div style="display: flex; gap: 10px; flex-wrap: wrap;">`;

            contents.forEach((content, index) => {
                const length = content.length;
                const barColor = darkMode ? '#4dabf7' : '#3498db';
                html += `<div style="display: flex; flex-direction: column; flex: 1; min-width: 200px; background: ${darkMode ? '#2d2d2d' : '#ecf0f1'}; padding: 10px; border-radius: 4px;">`;
                html += `<div style="height: 8px; background: ${barColor}; border-radius: 4px; margin-bottom: 5px;" class="quest-length-bar" data-length="${length}"></div>`;
                html += `<div style="font-size: 0.9em;">${content}</div>`;
                html += `</div>`;
            });

            html += `</div>`;
            html += `</div>`;
        }

        html += `<div style="margin-top: 20px; display: flex; gap: 10px;">`;
        html += `<button onclick="document.querySelector('.quest-journal').style.background = '#1e1e1e'; document.querySelector('.quest-journal').style.color = '#e0e0e0';" style="padding: 5px 10px; background: ${darkMode ? '#333' : '#f5f5f5'}; color: ${darkMode ? '#e0e0e0' : '#333'}; border: none; border-radius: 4px;">Light Mode</button>`;
        html += `<button onclick="document.querySelector('.quest-journal').style.background = '#f5f5f5'; document.querySelector('.quest-journal').style.color = '#333';" style="padding: 5px 10px; background: ${darkMode ? '#1e1e1e' : '#f5f5f5'}; color: ${darkMode ? '#e0e0e0' : '#333'}; border: none; border-radius: 4px;">Dark Mode</button>`;
        html += `</div>`;
        html += `</div>`;
        return html;
    };

    this.updateLengthBars = function() {
        const bars = document.querySelectorAll('.quest-length-bar');
        bars.forEach(bar => {
            const length = parseInt(bar.getAttribute('data-length'));
            const width = Math.min(length * 5, 200);
            bar.style.width = `${width}px`;
        });
    };
}

// Example usage with sample data
const sampleData = `
[MAIN] Defeat the Black Knight in the dungeon
[SIDE] Find the hidden treasure in the forest
[MAIN] Solve the ancient riddle to unlock the temple
[SIDE] Collect 5 rare herbs from the mountains
[MAIN] Recover the lost royal artifact
[SIDE] Help the village elder with her garden
[MAIN] Defeat the dragon guarding the treasure
[SIDE] Explore the abandoned castle at night
[MAIN] Complete the quest to become a hero
[SIDE] Find the secret ingredient for the healing potion
`;

const journal = new QuestJournal();
document.body.innerHTML = journal.render(journal.parse(sampleData), true);
journal.updateLengthBars();