Create lesson.js

js/ui/lesson.js

@@ -0,0 +1,271 @@
+class LessonUI {
+    constructor() {
+        this.currentLesson = null;
+        this.lessonStartTime = null;
+        this.interactionCount = 0;
+    }
+
+    async render(lessonData) {
+        this.currentLesson = lessonData;
+        this.lessonStartTime = Date.now();
+        this.interactionCount = 0;
+
+        const lessonContent = document.getElementById('lessonContent');
+        if (!lessonContent) return;
+
+        let html = `
+            <div class="lesson-header">
+                <h3>${this.escapeHtml(lessonData.title)}</h3>
+                <div class="lesson-meta">
+                    <span class="lesson-day">روز ${lessonData.day}</span>
+                    <span class="lesson-duration">⏱️ حدود ${lessonData.estimated_duration || '10'} دقیقه</span>
+                </div>
+            </div>
+            <div class="lesson-sections">
+        `;
+
+        lessonData.sections.forEach((section, index) => {
+            html += this.renderSection(section, index);
+        });
+
+        html += `
+            </div>
+            <div class="lesson-actions">
+                <button class="btn btn-primary" onclick="lessonUI.completeLesson()">
+                    ✅ تکمیل درس
+                </button>
+                <button class="btn btn-secondary" onclick="lessonUI.toggleBookmark()">
+                    📌 نشان کردن
+                </button>
+            </div>
+            <div class="lesson-progress">
+                <div class="progress-bar">
+                    <div class="progress-fill" style="width: 0%"></div>
+                </div>
+                <span class="progress-text">0% مطالعه شده</span>
+            </div>
+        `;
+
+        lessonContent.innerHTML = html;
+        this.setupInteractions();
+        this.startProgressTracking();
+    }
+
+    renderSection(section, index) {
+        let sectionHtml = `<div class="lesson-section" data-section="${index}">`;
+
+        switch (section.type) {
+            case 'text':
+                sectionHtml += `
+                    <div class="text-content">
+                        ${this.formatTextContent(section.content)}
+                    </div>
+                `;
+                break;
+
+            case 'image':
+                sectionHtml += `
+                    <div class="image-content">
+                        <img src="${section.url}" alt="${this.escapeHtml(section.alt)}" loading="lazy">
+                        ${section.caption ? `<div class="image-caption">${this.escapeHtml(section.caption)}</div>` : ''}
+                    </div>
+                `;
+                break;
+
+            case 'code':
+                sectionHtml += `
+                    <div class="code-content">
+                        <pre><code class="language-${section.language || 'html'}">${this.escapeHtml(section.code)}</code></pre>
+                        ${section.explanation ? `<div class="code-explanation">${this.formatTextContent(section.explanation)}</div>` : ''}
+                    </div>
+                `;
+                break;
+
+            case 'video':
+                sectionHtml += `
+                    <div class="video-content">
+                        <div class="video-placeholder">
+                            🎥 محتوای ویدئویی: ${this.escapeHtml(section.title)}
+                        </div>
+                        ${section.description ? `<div class="video-description">${this.formatTextContent(section.description)}</div>` : ''}
+                    </div>
+                `;
+                break;
+
+            default:
+                sectionHtml += `<div class="unknown-content">نوع محتوای ناشناخته</div>`;
+        }
+
+        sectionHtml += `</div>`;
+        return sectionHtml;
+    }
+
+    formatTextContent(content) {
+        // تبدیل مارک‌داون ساده به HTML
+        return content
+            .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
+            .replace(/\*(.*?)\*/g, '<em>$1</em>')
+            .replace(/`(.*?)`/g, '<code>$1</code>')
+            .replace(/\n/g, '<br>');
+    }
+
+    escapeHtml(unsafe) {
+        return unsafe
+            .replace(/&/g, "&amp;")
+            .replace(/</g, "&lt;")
+            .replace(/>/g, "&gt;")
+            .replace(/"/g, "&quot;")
+            .replace(/'/g, "&#039;");
+    }
+
+    setupInteractions() {
+        // ردیابی اسکرول برای پیشرفت
+        let scrollTimeout;
+        const lessonSections = document.querySelector('.lesson-sections');
+        
+        if (lessonSections) {
+            lessonSections.addEventListener('scroll', () => {
+                clearTimeout(scrollTimeout);
+                scrollTimeout = setTimeout(() => {
+                    this.trackInteraction('scroll');
+                    this.updateProgress();
+                }, 100);
+            });
+        }
+
+        // ردیابی کلیک
+        document.addEventListener('click', (e) => {
+            if (e.target.closest('.lesson-section')) {
+                this.trackInteraction('click');
+            }
+        });
+    }
+
+    startProgressTracking() {
+        this.progressInterval = setInterval(() => {
+            this.updateProgress();
+        }, 2000);
+    }
+
+    updateProgress() {
+        const sections = document.querySelectorAll('.lesson-section');
+        const lessonSections = document.querySelector('.lesson-sections');
+        
+        if (!sections.length || !lessonSections) return;
+
+        let visibleSections = 0;
+        const containerRect = lessonSections.getBoundingClientRect();
+
+        sections.forEach(section => {
+            const rect = section.getBoundingClientRect();
+            if (rect.top >= containerRect.top && rect.bottom <= containerRect.bottom) {
+                visibleSections++;
+            }
+        });
+
+        const progress = (visibleSections / sections.length) * 100;
+        this.updateProgressBar(progress);
+    }
+
+    updateProgressBar(progress) {
+        const progressFill = document.querySelector('.progress-fill');
+        const progressText = document.querySelector('.progress-text');
+        
+        if (progressFill && progressText) {
+            progressFill.style.width = `${progress}%`;
+            progressText.textContent = `${Math.round(progress)}% مطالعه شده`;
+        }
+    }
+
+    trackInteraction(type) {
+        this.interactionCount++;
+        
+        // ذخیره تعاملات مهم
+        const interactions = Utils.loadFromLocalStorage('lesson_interactions') || {};
+        const lessonId = this.currentLesson?.day;
+        
+        if (lessonId) {
+            if (!interactions[lessonId]) {
+                interactions[lessonId] = [];
+            }
+            interactions[lessonId].push({
+                type: type,
+                timestamp: new Date().toISOString()
+            });
+            
+            Utils.saveToLocalStorage('lesson_interactions', interactions);
+        }
+    }
+
+    async completeLesson() {
+        if (!this.currentLesson) return;
+
+        const duration = Math.round((Date.now() - this.lessonStartTime) / 1000 / 60); // دقیقه
+        const result = learningLogic.completeLesson(
+            this.currentLesson.day,
+            duration,
+            this.interactionCount
+        );
+
+        // نمایش نتیجه
+        Utils.showNotification(
+            `درس تکمیل شد! 🎉 ${result.reward} امتیاز دریافت کردید.`,
+            'success'
+        );
+
+        // به‌روزرسانی UI
+        this.updateProgressBar(100);
+        
+        // غیرفعال کردن دکمه
+        const completeBtn = document.querySelector('.lesson-actions .btn-primary');
+        if (completeBtn) {
+            completeBtn.disabled = true;
+            completeBtn.textContent = '✅ تکمیل شده';
+        }
+
+        // ارسال event برای به‌روزرسانی سایر بخش‌ها
+        document.dispatchEvent(new CustomEvent('lessonCompleted', {
+            detail: {
+                lesson: this.currentLesson,
+                reward: result.reward,
+                duration: duration
+            }
+        }));
+    }
+
+    toggleBookmark() {
+        if (!this.currentLesson) return;
+
+        const bookmarks = Utils.loadFromLocalStorage('bookmarked_lessons') || [];
+        const lessonId = this.currentLesson.day;
+        const index = bookmarks.indexOf(lessonId);
+
+        let isBookmarked;
+        if (index > -1) {
+            bookmarks.splice(index, 1);
+            isBookmarked = false;
+            Utils.showNotification('نشان درس حذف شد', 'info');
+        } else {
+            bookmarks.push(lessonId);
+            isBookmarked = true;
+            Utils.showNotification('درس نشان شده', 'success');
+        }
+
+        Utils.saveToLocalStorage('bookmarked_lessons', bookmarks);
+
+        // به‌روزرسانی دکمه
+        const bookmarkBtn = document.querySelector('.lesson-actions .btn-secondary');
+        if (bookmarkBtn) {
+            bookmarkBtn.innerHTML = isBookmarked ? '📌 نشان شده' : '📌 نشان کردن';
+        }
+    }
+
+    destroy() {
+        if (this.progressInterval) {
+            clearInterval(this.progressInterval);
+        }
+    }
+}
+
+// ایجاد نمونه اصلی
+const lessonUI = new LessonUI();