novafarma/src/ui/QuestTrackerUI.js

/**
 * QuestTrackerUI.js
 * =================
 * KRVAVA ŽETEV - Quest Tracker UI Component
 * 
 * Shows current quest objectives on screen
 * Displays in top-right corner
 * Can be toggled with J key
 * 
 * @author NovaFarma Team
 * @date 2025-12-23
 */

class QuestTrackerUI {
    constructor(scene) {
        this.scene = scene;
        this.container = null;
        this.visible = true;

        // UI elements
        this.background = null;
        this.titleText = null;
        this.descriptionText = null;
        this.objectiveTexts = [];

        this.createUI();

        // Toggle with J key
        if (this.scene.input && this.scene.input.keyboard) {
            this.scene.input.keyboard.on('keydown-J', () => {
                this.toggle();
            });
        }

        console.log('📋 QuestTrackerUI initialized');
    }

    createUI() {
        const width = this.scene.cameras.main.width;
        const height = this.scene.cameras.main.height;

        // Container (top-right)
        this.container = this.scene.add.container(width - 320, 20);
        this.container.setDepth(100);
        this.container.setScrollFactor(0);

        // Background
        this.background = this.scene.add.rectangle(0, 0, 300, 200, 0x2d1b00, 0.9);
        this.background.setOrigin(0, 0);
        this.background.setStrokeStyle(3, 0xd4a574);
        this.container.add(this.background);

        // Header
        const header = this.scene.add.text(10, 10, '📖 CURRENT QUEST', {
            fontSize: '16px',
            fontFamily: 'Georgia, serif',
            color: '#FFD700',
            fontStyle: 'bold'
        });
        this.container.add(header);

        // Quest title
        this.titleText = this.scene.add.text(10, 35, '', {
            fontSize: '14px',
            fontFamily: 'Georgia, serif',
            color: '#f4e4c1',
            fontStyle: 'bold',
            wordWrap: { width: 280 }
        });
        this.container.add(this.titleText);

        // Quest description
        this.descriptionText = this.scene.add.text(10, 60, '', {
            fontSize: '12px',
            fontFamily: 'Georgia, serif',
            color: '#d4a574',
            fontStyle: 'italic',
            wordWrap: { width: 280 }
        });
        this.container.add(this.descriptionText);

        // Divider
        const divider = this.scene.add.rectangle(10, 95, 280, 1, 0xd4a574, 0.5);
        divider.setOrigin(0, 0);
        this.container.add(divider);

        // Objectives (will be added dynamically)
        // Reserve space for up to 5 objectives

        // Hide initially (no quest)
        this.hide();
    }

    /**
     * Update with new quest data
     */
    update(quest) {
        if (!quest) {
            this.hide();
            return;
        }

        // Show container
        if (!this.visible) {
            this.show();
        }

        // Update title
        this.titleText.setText(quest.title);

        // Update description
        this.descriptionText.setText(quest.description);

        // Clear old objectives
        this.objectiveTexts.forEach(text => text.destroy());
        this.objectiveTexts = [];

        // Calculate height based on description
        const descHeight = this.descriptionText.height;
        let yOffset = 100 + Math.max(0, descHeight - 20);

        // Add objectives
        quest.objectives.forEach((objective, index) => {
            const completed = objective.completed || false;
            const color = completed ? '#00FF00' : '#f4e4c1';
            const icon = completed ? '✓' : '○';

            let text = `${icon} ${objective.description}`;

            // Add progress if applicable
            if (objective.current !== undefined && objective.required !== undefined) {
                text += ` (${objective.current}/${objective.required})`;
            }

            const objectiveText = this.scene.add.text(20, yOffset, text, {
                fontSize: '12px',
                fontFamily: 'Georgia, serif',
                color: color,
                wordWrap: { width: 260 }
            });

            this.container.add(objectiveText);
            this.objectiveTexts.push(objectiveText);

            yOffset += objectiveText.height + 5;
        });

        // Adjust background height
        const totalHeight = yOffset + 10;
        this.background.height = Math.max(200, totalHeight);

        // Add toggle hint at bottom
        const hintY = this.background.height - 20;
        const hint = this.scene.add.text(10, hintY, 'Press J to toggle', {
            fontSize: '10px',
            fontFamily: 'Georgia, serif',
            color: '#888888'
        });
        this.container.add(hint);
    }

    /**
     * Show tracker
     */
    show() {
        if (this.container) {
            this.container.setVisible(true);
            this.visible = true;
        }
    }

    /**
     * Hide tracker
     */
    hide() {
        if (this.container) {
            this.container.setVisible(false);
            this.visible = false;
        }
    }

    /**
     * Toggle visibility
     */
    toggle() {
        if (this.visible) {
            this.hide();
        } else {
            this.show();
        }
    }

    /**
     * Cleanup
     */
    destroy() {
        if (this.container) {
            this.container.destroy();
        }
    }
}