diff --git a/public/app.js b/public/app.js index b8e16e7..7299aef 100644 --- a/public/app.js +++ b/public/app.js @@ -9,6 +9,8 @@ class Task { this.reward = reward; this.completed = false; this.expandDescription = false; + this.dueDate = null; + this.color = '#6366f1'; this.subtasks = []; } @@ -18,15 +20,9 @@ class Task { } calculateProgress() { - if (this.subtasks.length === 0) { - return this.completed ? 100 : 0; - } - + if (this.subtasks.length === 0) return this.completed ? 100 : 0; const totalWeight = this.subtasks.reduce((sum, st) => sum + st.getProgressWeight(), 0); - const completedWeight = this.subtasks.reduce((sum, st) => { - return sum + (st.completed ? st.getProgressWeight() : 0); - }, 0); - + const completedWeight = this.subtasks.reduce((sum, st) => sum + (st.completed ? st.getProgressWeight() : 0), 0); return totalWeight > 0 ? Math.round((completedWeight / totalWeight) * 100) : 0; } } @@ -35,7 +31,7 @@ class App { constructor() { this.tasks = []; this.archivedTasks = []; - this.viewMode = 'active'; // 'active' or 'archive' + this.viewMode = 'active'; this.draggedTask = null; this.draggedSubtask = null; this.draggedParent = null; @@ -44,15 +40,50 @@ class App { this.contextMenuTarget = null; this.contextMenuType = null; this.contextMenuParent = null; + this._previousOverallProgress = 0; + this._celebrateTaskId = null; + this._initialized = false; + this._collapsedTasks = new Set(JSON.parse(localStorage.getItem('collapsedTasks') || '[]')); this.init(); } async init() { + this.setupGreeting(); this.setupEventListeners(); await this.loadTasks(); await this.loadArchivedCount(); } + // ─── Greeting ─── + + setupGreeting() { + const hour = new Date().getHours(); + let emoji, greeting, sub; + + if (hour >= 5 && hour < 12) { + emoji = '☀️'; + greeting = 'Good morning, Marc'; + sub = 'Ready to learn something new today?'; + } else if (hour >= 12 && hour < 17) { + emoji = '🌞'; + greeting = 'Good afternoon, Marc'; + sub = 'Keep up the momentum!'; + } else if (hour >= 17 && hour < 21) { + emoji = '🌇'; + greeting = 'Good evening, Marc'; + sub = 'Great time to wrap up some goals.'; + } else { + emoji = '🌙'; + greeting = 'Hey there, Marc'; + sub = 'Burning the midnight oil?'; + } + + document.getElementById('greeting-banner').innerHTML = ` +
${emoji} ${greeting}
+
${sub}
+ `; + } + setupEventListeners() { const form = document.getElementById('task-form'); const openModal = document.getElementById('open-modal'); @@ -63,12 +94,8 @@ class App { form.addEventListener('submit', (e) => this.handleSubmit(e)); openModal.addEventListener('click', () => this.openCreateModal()); closeModal.addEventListener('click', () => this.toggleModal(false)); + modal.addEventListener('click', (e) => { if (e.target === modal) this.toggleModal(false); }); - modal.addEventListener('click', (e) => { - if (e.target === modal) this.toggleModal(false); - }); - - // Context menu actions document.getElementById('context-edit').addEventListener('click', () => this.handleContextEdit()); document.getElementById('context-delete').addEventListener('click', () => this.handleContextDelete()); document.getElementById('context-promote').addEventListener('click', () => this.handleContextPromote()); @@ -78,9 +105,74 @@ class App { document.addEventListener('click', () => this.hideContextMenu()); contextMenu.addEventListener('click', (e) => e.stopPropagation()); - // View toggle document.getElementById('view-active').addEventListener('click', () => this.switchView('active')); document.getElementById('view-archive').addEventListener('click', () => this.switchView('archive')); + + // Color preset dots + document.getElementById('color-presets').addEventListener('click', (e) => { + const dot = e.target.closest('.color-dot'); + if (!dot) return; + const color = dot.dataset.color; + document.getElementById('task-color').value = color; + this._updateColorDotActive(color); + }); + + document.getElementById('task-color').addEventListener('input', (e) => { + this._updateColorDotActive(e.target.value); + }); + } + + _updateColorDotActive(color) { + document.querySelectorAll('#color-presets .color-dot').forEach(d => { + d.classList.toggle('active', d.dataset.color === color); + }); + } + + // ─── Due Date Helpers ─── + + getDueDateInfo(dueDate) { + if (!dueDate) return null; + const now = new Date(); + now.setHours(0, 0, 0, 0); + const due = new Date(dueDate + 'T00:00:00'); + const diffMs = due - now; + const diffDays = Math.ceil(diffMs / (1000 * 60 * 60 * 24)); + + const opts = { month: 'short', day: 'numeric' }; + if (due.getFullYear() !== now.getFullYear()) opts.year = 'numeric'; + const label = due.toLocaleDateString(undefined, opts); + + if (diffDays < 0) return { label, className: 'due-overdue', text: `${label} (overdue)` }; + if (diffDays === 0) return { label, className: 'due-overdue', text: `${label} (today)` }; + if (diffDays <= 7) return { label, className: 'due-soon', text: `${label} (${diffDays}d)` }; + return { label, className: 'due-ok', text: `${label} (${diffDays}d)` }; + } + + renderDueBadge(dueDate, isCompleted) { + if (!dueDate) return ''; + if (isCompleted) { + const info = this.getDueDateInfo(dueDate); + return `${info.label}`; + } + const info = this.getDueDateInfo(dueDate); + return `${info.text}`; + } + + // ─── Animated Counter ─── + + animateCounter(element, from, to, suffix = '%', duration = 400) { + if (from === to) { element.textContent = to + suffix; return; } + const start = performance.now(); + const step = (now) => { + const elapsed = now - start; + const progress = Math.min(elapsed / duration, 1); + // ease out quad + const eased = 1 - (1 - progress) * (1 - progress); + const current = Math.round(from + (to - from) * eased); + element.textContent = current + suffix; + if (progress < 1) requestAnimationFrame(step); + }; + requestAnimationFrame(step); } // ─── View Switching ─── @@ -88,19 +180,12 @@ class App { async switchView(mode) { if (this.viewMode === mode) return; this.viewMode = mode; - document.getElementById('view-active').classList.toggle('active', mode === 'active'); document.getElementById('view-archive').classList.toggle('active', mode === 'archive'); - - // Show/hide elements based on view document.getElementById('overall-progress').classList.toggle('hidden', mode === 'archive'); document.getElementById('open-modal').style.display = mode === 'archive' ? 'none' : ''; - - if (mode === 'archive') { - await this.loadArchivedTasks(); - } else { - await this.loadTasks(); - } + if (mode === 'archive') await this.loadArchivedTasks(); + else await this.loadTasks(); } // ─── Modal ─── @@ -112,6 +197,9 @@ class App { document.getElementById('edit-task-id').value = ''; document.getElementById('edit-parent-id').value = ''; document.getElementById('task-expand-desc').checked = false; + document.getElementById('task-due-date').value = ''; + document.getElementById('task-color').value = '#6366f1'; + this._updateColorDotActive('#6366f1'); this.toggleModal(true); } @@ -125,6 +213,9 @@ class App { document.getElementById('task-size').value = task.size; document.getElementById('task-reward').value = task.reward || ''; document.getElementById('task-expand-desc').checked = !!task.expandDescription; + document.getElementById('task-due-date').value = task.dueDate || ''; + document.getElementById('task-color').value = task.color || '#6366f1'; + this._updateColorDotActive(task.color || '#6366f1'); this.toggleModal(true); } @@ -141,34 +232,22 @@ class App { e.stopPropagation(); const contextMenu = document.getElementById('context-menu'); - const promoteOption = document.getElementById('context-promote'); - const archiveOption = document.getElementById('context-archive'); - const restoreOption = document.getElementById('context-restore'); - this.contextMenuTarget = target; this.contextMenuType = type; this.contextMenuParent = parentTask; - // Show/hide context-specific options - promoteOption.style.display = (type === 'subtask' && this.viewMode === 'active') ? 'flex' : 'none'; - + document.getElementById('context-promote').style.display = (type === 'subtask' && this.viewMode === 'active') ? 'flex' : 'none'; const isCompleted = target.completed || target.calculateProgress() === 100; - archiveOption.style.display = (type === 'task' && this.viewMode === 'active' && isCompleted) ? 'flex' : 'none'; - restoreOption.style.display = (type === 'task' && this.viewMode === 'archive') ? 'flex' : 'none'; - - // Position using clientX/clientY for fixed menu, with viewport clamping - let x = e.clientX; - let y = e.clientY; + document.getElementById('context-archive').style.display = (type === 'task' && this.viewMode === 'active' && isCompleted) ? 'flex' : 'none'; + document.getElementById('context-restore').style.display = (type === 'task' && this.viewMode === 'archive') ? 'flex' : 'none'; + let x = e.clientX, y = e.clientY; contextMenu.style.left = '-9999px'; contextMenu.style.top = '-9999px'; contextMenu.classList.add('show'); - const menuWidth = contextMenu.offsetWidth; - const menuHeight = contextMenu.offsetHeight; - - if (x + menuWidth > window.innerWidth) x = window.innerWidth - menuWidth - 5; - if (y + menuHeight > window.innerHeight) y = window.innerHeight - menuHeight - 5; + if (x + contextMenu.offsetWidth > window.innerWidth) x = window.innerWidth - contextMenu.offsetWidth - 5; + if (y + contextMenu.offsetHeight > window.innerHeight) y = window.innerHeight - contextMenu.offsetHeight - 5; if (x < 0) x = 5; if (y < 0) y = 5; @@ -176,107 +255,60 @@ class App { contextMenu.style.top = y + 'px'; } - hideContextMenu() { - document.getElementById('context-menu').classList.remove('show'); - } + hideContextMenu() { document.getElementById('context-menu').classList.remove('show'); } handleContextEdit() { - if (this.contextMenuTarget) { - this.openEditModal(this.contextMenuTarget, this.contextMenuParent); - } + if (this.contextMenuTarget) this.openEditModal(this.contextMenuTarget, this.contextMenuParent); this.hideContextMenu(); } async handleContextDelete() { if (!this.contextMenuTarget) return; - - const label = this.contextMenuType === 'task' ? 'task' : 'subtask'; - if (!confirm(`Delete this ${label}?`)) { - this.hideContextMenu(); - return; - } - - if (this.contextMenuType === 'task') { - await this.deleteTask(this.contextMenuTarget.id); - } else if (this.contextMenuType === 'subtask' && this.contextMenuParent) { - await this.deleteSubtask(this.contextMenuParent.id, this.contextMenuTarget.id); - } - + if (!confirm(`Delete this ${this.contextMenuType}?`)) { this.hideContextMenu(); return; } + if (this.contextMenuType === 'task') await this.deleteTask(this.contextMenuTarget.id); + else if (this.contextMenuType === 'subtask' && this.contextMenuParent) await this.deleteSubtask(this.contextMenuParent.id, this.contextMenuTarget.id); this.hideContextMenu(); } async handleContextPromote() { - if (!this.contextMenuTarget || this.contextMenuType !== 'subtask' || !this.contextMenuParent) { - this.hideContextMenu(); - return; - } - + if (!this.contextMenuTarget || this.contextMenuType !== 'subtask' || !this.contextMenuParent) { this.hideContextMenu(); return; } const parentTask = this.getCurrentTasks().find(t => t.id === this.contextMenuParent.id); - if (!parentTask) { - this.hideContextMenu(); - return; - } - + if (!parentTask) { this.hideContextMenu(); return; } const subtask = this.contextMenuTarget; parentTask.subtasks = parentTask.subtasks.filter(st => st.id !== subtask.id); - try { - await fetch(`${API_URL}/tasks/${parentTask.id}`, { - method: 'PUT', - headers: { 'Content-Type': 'application/json' }, - body: JSON.stringify(parentTask) - }); - - await fetch(`${API_URL}/tasks`, { - method: 'POST', - headers: { 'Content-Type': 'application/json' }, - body: JSON.stringify({ - title: subtask.title, - description: subtask.description, - size: subtask.size, - reward: subtask.reward - }) - }); - + await fetch(`${API_URL}/tasks/${parentTask.id}`, { method: 'PUT', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(parentTask) }); + await fetch(`${API_URL}/tasks`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ title: subtask.title, description: subtask.description, size: subtask.size, reward: subtask.reward, dueDate: subtask.dueDate, color: subtask.color }) }); await this.loadTasks(); - } catch (error) { - console.error('Error promoting subtask:', error); - } - + } catch (error) { console.error('Error promoting subtask:', error); } this.hideContextMenu(); } async handleContextArchive() { - if (!this.contextMenuTarget || this.contextMenuType !== 'task') { - this.hideContextMenu(); - return; - } + if (!this.contextMenuTarget || this.contextMenuType !== 'task') { this.hideContextMenu(); return; } await this.archiveTask(this.contextMenuTarget.id); this.hideContextMenu(); } async handleContextRestore() { - if (!this.contextMenuTarget || this.contextMenuType !== 'task') { - this.hideContextMenu(); - return; - } + if (!this.contextMenuTarget || this.contextMenuType !== 'task') { this.hideContextMenu(); return; } await this.unarchiveTask(this.contextMenuTarget.id); this.hideContextMenu(); } - // ─── Form Submit ─── + // ─── Form ─── async handleSubmit(e) { e.preventDefault(); - const title = document.getElementById('task-title').value.trim(); const description = document.getElementById('task-description').value.trim(); const size = document.getElementById('task-size').value; const reward = document.getElementById('task-reward').value.trim(); const expandDescription = document.getElementById('task-expand-desc').checked; + const dueDate = document.getElementById('task-due-date').value || null; + const color = document.getElementById('task-color').value || '#6366f1'; const editId = document.getElementById('edit-task-id').value; const parentId = document.getElementById('edit-parent-id').value; - const taskList = this.getCurrentTasks(); if (editId) { @@ -285,71 +317,67 @@ class App { if (parentTask) { const subtask = parentTask.subtasks.find(st => st.id === editId); if (subtask) { - subtask.title = title; - subtask.description = description; - subtask.size = size; - subtask.reward = reward; - subtask.expandDescription = expandDescription; + Object.assign(subtask, { title, description, size, reward, expandDescription, dueDate, color }); await this.updateTask(parentTask); } } } else { const task = taskList.find(t => t.id === editId); if (task) { - task.title = title; - task.description = description; - task.size = size; - task.reward = reward; - task.expandDescription = expandDescription; + Object.assign(task, { title, description, size, reward, expandDescription, dueDate, color }); await this.updateTask(task); } } } else { try { const response = await fetch(`${API_URL}/tasks`, { - method: 'POST', - headers: { 'Content-Type': 'application/json' }, - body: JSON.stringify({ title, description, size, reward, expandDescription }) + method: 'POST', headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({ title, description, size, reward, expandDescription, dueDate, color }) }); if (response.ok) await this.loadTasks(); - } catch (error) { - console.error('Error creating task:', error); - } + } catch (error) { console.error('Error creating task:', error); } } e.target.reset(); + document.getElementById('task-color').value = '#6366f1'; + this._updateColorDotActive('#6366f1'); this.toggleModal(false); } - // ─── Data Loading ─── + // ─── Data ─── - getCurrentTasks() { - return this.viewMode === 'archive' ? this.archivedTasks : this.tasks; + getCurrentTasks() { return this.viewMode === 'archive' ? this.archivedTasks : this.tasks; } + + _mapTaskData(taskData) { + const task = new Task(taskData.id, taskData.title, taskData.description, taskData.size, taskData.reward); + task.completed = taskData.completed; + task.expandDescription = !!taskData.expandDescription; + task.dueDate = taskData.dueDate || null; + task.color = taskData.color || '#6366f1'; + if (taskData.subtasks && Array.isArray(taskData.subtasks)) { + task.subtasks = taskData.subtasks.map(stData => { + const st = new Task(stData.id, stData.title, stData.description, stData.size, stData.reward); + st.completed = stData.completed; + st.expandDescription = !!stData.expandDescription; + st.dueDate = stData.dueDate || null; + st.color = stData.color || '#6366f1'; + return st; + }); + } + return task; } async loadTasks() { try { + const prevProgress = this._previousOverallProgress; const response = await fetch(`${API_URL}/tasks`); const data = await response.json(); - - this.tasks = data.map(taskData => { - const task = new Task(taskData.id, taskData.title, taskData.description, taskData.size, taskData.reward); - task.completed = taskData.completed; - task.expandDescription = !!taskData.expandDescription; - if (taskData.subtasks && Array.isArray(taskData.subtasks)) { - task.subtasks = taskData.subtasks.map(stData => { - const subtask = new Task(stData.id, stData.title, stData.description, stData.size, stData.reward); - subtask.completed = stData.completed; - subtask.expandDescription = !!stData.expandDescription; - return subtask; - }); - } - return task; - }); - + this.tasks = data.map(d => this._mapTaskData(d)); this.updateOverallProgress(); if (this.viewMode === 'active') this.render(); this.loadArchivedCount(); + if (this._initialized) this._checkCelebrations(prevProgress); + this._initialized = true; } catch (error) { console.error('Error loading tasks:', error); this.showError(); @@ -360,73 +388,56 @@ class App { try { const response = await fetch(`${API_URL}/tasks?archived=1`); const data = await response.json(); - - this.archivedTasks = data.map(taskData => { - const task = new Task(taskData.id, taskData.title, taskData.description, taskData.size, taskData.reward); - task.completed = taskData.completed; - task.expandDescription = !!taskData.expandDescription; - if (taskData.subtasks && Array.isArray(taskData.subtasks)) { - task.subtasks = taskData.subtasks.map(stData => { - const subtask = new Task(stData.id, stData.title, stData.description, stData.size, stData.reward); - subtask.completed = stData.completed; - subtask.expandDescription = !!stData.expandDescription; - return subtask; - }); - } - return task; - }); - + this.archivedTasks = data.map(d => this._mapTaskData(d)); if (this.viewMode === 'archive') this.renderArchive(); this.updateArchiveCount(); - } catch (error) { - console.error('Error loading archived tasks:', error); - this.showError(); - } + } catch (error) { console.error('Error loading archived tasks:', error); this.showError(); } } async loadArchivedCount() { try { const response = await fetch(`${API_URL}/tasks?archived=1`); const data = await response.json(); - this.archivedTasks = data.map(taskData => { - const task = new Task(taskData.id, taskData.title, taskData.description, taskData.size, taskData.reward); - task.completed = taskData.completed; - return task; - }); + this.archivedTasks = data.map(d => this._mapTaskData(d)); this.updateArchiveCount(); - } catch (error) { - // Silently fail — count is non-critical - } + } catch (error) { /* non-critical */ } } updateArchiveCount() { const badge = document.getElementById('archive-count'); - const count = this.archivedTasks.length; - badge.textContent = count; - badge.style.display = count > 0 ? 'inline-block' : 'none'; + badge.textContent = this.archivedTasks.length; + badge.style.display = this.archivedTasks.length > 0 ? 'inline-block' : 'none'; } updateOverallProgress() { const totalTasks = this.tasks.length; const completedTasks = this.tasks.filter(t => t.calculateProgress() === 100).length; - document.getElementById('completed-count').textContent = completedTasks; + // Animate completed count + const completedEl = document.getElementById('completed-count'); + const prevCompleted = parseInt(completedEl.textContent) || 0; + if (prevCompleted !== completedTasks) this.animateCounter(completedEl, prevCompleted, completedTasks, ''); + else completedEl.textContent = completedTasks; document.getElementById('total-count').textContent = totalTasks; if (totalTasks === 0) { - document.getElementById('overall-percentage').textContent = '0%'; + const pctEl = document.getElementById('overall-percentage'); + pctEl.textContent = '0%'; document.getElementById('overall-progress-fill').style.width = '0%'; + this._previousOverallProgress = 0; return; } const totalWeight = this.tasks.reduce((sum, t) => sum + t.getProgressWeight(), 0); - const completedWeight = this.tasks.reduce((sum, t) => { - const progress = t.calculateProgress(); - return sum + (t.getProgressWeight() * progress / 100); - }, 0); - + const completedWeight = this.tasks.reduce((sum, t) => sum + (t.getProgressWeight() * t.calculateProgress() / 100), 0); const overallProgress = totalWeight > 0 ? Math.round((completedWeight / totalWeight) * 100) : 0; - document.getElementById('overall-percentage').textContent = overallProgress + '%'; + + // Animate percentage + const pctEl = document.getElementById('overall-percentage'); + const prevPct = this._previousOverallProgress; + this.animateCounter(pctEl, prevPct, overallProgress, '%'); + + this._previousOverallProgress = overallProgress; document.getElementById('overall-progress-fill').style.width = overallProgress + '%'; } @@ -439,37 +450,36 @@ class App { if (this.viewMode === 'archive') await this.loadArchivedTasks(); else await this.loadTasks(); } - } catch (error) { - console.error('Error deleting task:', error); - } + } catch (error) { console.error('Error deleting task:', error); } } async toggleTaskComplete(taskId) { const task = this.getCurrentTasks().find(t => t.id === taskId); if (!task) return; - + const wasCompleted = task.completed || task.calculateProgress() === 100; task.completed = !task.completed; - if (task.subtasks.length > 0) { - task.subtasks.forEach(st => st.completed = task.completed); - } + if (task.subtasks.length > 0) task.subtasks.forEach(st => st.completed = task.completed); + const isNowCompleted = task.completed || task.calculateProgress() === 100; + if (!wasCompleted && isNowCompleted && task.reward) this._celebrateTaskId = taskId; await this.updateTask(task); } async toggleSubtaskComplete(taskId, subtaskId) { const task = this.getCurrentTasks().find(t => t.id === taskId); if (!task) return; - const subtask = task.subtasks.find(st => st.id === subtaskId); if (!subtask) return; - + const wasSubCompleted = subtask.completed; subtask.completed = !subtask.completed; + if (!wasSubCompleted && subtask.completed && subtask.reward) this._celebrateTaskId = taskId; + const parentWillComplete = task.calculateProgress() === 100; + if (parentWillComplete && task.reward && !task.completed) this._celebrateTaskId = taskId; await this.updateTask(task); } async deleteSubtask(taskId, subtaskId) { const task = this.getCurrentTasks().find(t => t.id === taskId); if (!task) return; - task.subtasks = task.subtasks.filter(st => st.id !== subtaskId); await this.updateTask(task); } @@ -477,57 +487,54 @@ class App { async updateTask(task) { try { const response = await fetch(`${API_URL}/tasks/${task.id}`, { - method: 'PUT', - headers: { 'Content-Type': 'application/json' }, - body: JSON.stringify(task) + method: 'PUT', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(task) }); if (response.ok) { if (this.viewMode === 'archive') await this.loadArchivedTasks(); else await this.loadTasks(); } - } catch (error) { - console.error('Error updating task:', error); - } + } catch (error) { console.error('Error updating task:', error); } } async archiveTask(taskId) { try { const response = await fetch(`${API_URL}/tasks/${taskId}/archive`, { method: 'PUT' }); - if (response.ok) { - await this.loadTasks(); - await this.loadArchivedCount(); - } - } catch (error) { - console.error('Error archiving task:', error); - } + if (response.ok) { await this.loadTasks(); await this.loadArchivedCount(); } + } catch (error) { console.error('Error archiving task:', error); } } async unarchiveTask(taskId) { try { const response = await fetch(`${API_URL}/tasks/${taskId}/unarchive`, { method: 'PUT' }); - if (response.ok) { - await this.loadArchivedTasks(); - await this.loadTasks(); - } - } catch (error) { - console.error('Error restoring task:', error); + if (response.ok) { await this.loadArchivedTasks(); await this.loadTasks(); } + } catch (error) { console.error('Error restoring task:', error); } + } + + // ─── Collapse / Expand ─── + + toggleCollapse(taskId) { + if (this._collapsedTasks.has(taskId)) this._collapsedTasks.delete(taskId); + else this._collapsedTasks.add(taskId); + localStorage.setItem('collapsedTasks', JSON.stringify([...this._collapsedTasks])); + // Toggle inline without full re-render + const card = document.querySelector(`[data-task-id="${taskId}"]`); + if (!card) return; + const container = card.querySelector('.subtasks-container'); + const toggle = card.querySelector('.subtask-toggle'); + if (container) container.classList.toggle('collapsed'); + if (toggle) { + toggle.classList.toggle('collapsed'); + const count = toggle.dataset.count; + const isCollapsed = toggle.classList.contains('collapsed'); + toggle.querySelector('.toggle-label').textContent = isCollapsed ? `Show ${count} subtask${count > 1 ? 's' : ''}` : 'Hide subtasks'; } } // ─── Drag & Drop ─── handleDragStart(e, item, isSubtask = false, parentTask = null, index = null) { - if (isSubtask) { - this.draggedSubtask = item; - this.draggedParent = parentTask; - this.draggedSubtaskIndex = index; - this.draggedTask = null; - } else { - this.draggedTask = item; - this.draggedSubtask = null; - this.draggedParent = null; - this.draggedSubtaskIndex = null; - } + if (isSubtask) { this.draggedSubtask = item; this.draggedParent = parentTask; this.draggedSubtaskIndex = index; this.draggedTask = null; } + else { this.draggedTask = item; this.draggedSubtask = null; this.draggedParent = null; this.draggedSubtaskIndex = null; } e.currentTarget.classList.add('dragging'); } @@ -535,144 +542,82 @@ class App { e.currentTarget.classList.remove('dragging'); document.querySelectorAll('.drag-over').forEach(el => el.classList.remove('drag-over')); document.querySelectorAll('.drop-zone').forEach(el => el.classList.remove('visible')); - - if (this.dropZoneTimer) { - clearTimeout(this.dropZoneTimer); - this.dropZoneTimer = null; - } - - this.draggedTask = null; - this.draggedSubtask = null; - this.draggedParent = null; - this.draggedSubtaskIndex = null; + if (this.dropZoneTimer) { clearTimeout(this.dropZoneTimer); this.dropZoneTimer = null; } + this.draggedTask = null; this.draggedSubtask = null; this.draggedParent = null; this.draggedSubtaskIndex = null; } - handleCardDragOver(e) { - e.preventDefault(); - e.stopPropagation(); - e.currentTarget.classList.add('drag-over'); - } - - handleDragLeave(e) { - e.currentTarget.classList.remove('drag-over'); - } + handleCardDragOver(e) { e.preventDefault(); e.stopPropagation(); e.currentTarget.classList.add('drag-over'); } + handleDragLeave(e) { e.currentTarget.classList.remove('drag-over'); } handleDragEnter(e, taskId) { e.preventDefault(); if (!this.draggedTask && !this.draggedSubtask) return; if (this.dropZoneTimer) clearTimeout(this.dropZoneTimer); - this.dropZoneTimer = setTimeout(() => { const dropZone = document.querySelector(`[data-task-id="${taskId}"] .drop-zone`); - if (dropZone && (this.draggedTask || this.draggedSubtask)) { - dropZone.classList.add('visible'); - } + if (dropZone && (this.draggedTask || this.draggedSubtask)) dropZone.classList.add('visible'); }, 1000); } async handleDrop(e, targetTask) { - e.preventDefault(); - e.stopPropagation(); - e.currentTarget.classList.remove('drag-over'); - + e.preventDefault(); e.stopPropagation(); e.currentTarget.classList.remove('drag-over'); if (this.draggedTask && this.draggedTask.id !== targetTask.id) { targetTask.subtasks.push(this.draggedTask); - try { - await fetch(`${API_URL}/tasks/${this.draggedTask.id}`, { method: 'DELETE' }); - await this.updateTask(targetTask); - } catch (error) { - console.error('Error moving task:', error); - } + try { await fetch(`${API_URL}/tasks/${this.draggedTask.id}`, { method: 'DELETE' }); await this.updateTask(targetTask); } + catch (error) { console.error('Error moving task:', error); } } else if (this.draggedSubtask && this.draggedParent && targetTask.id !== this.draggedParent.id) { this.draggedParent.subtasks = this.draggedParent.subtasks.filter(st => st.id !== this.draggedSubtask.id); targetTask.subtasks.push(this.draggedSubtask); - try { - await this.updateTask(this.draggedParent); - await this.updateTask(targetTask); - } catch (error) { - console.error('Error moving subtask:', error); - } + try { await this.updateTask(this.draggedParent); await this.updateTask(targetTask); } + catch (error) { console.error('Error moving subtask:', error); } } } async handleTaskReorder(e, targetIndex) { - e.preventDefault(); - e.stopPropagation(); - e.currentTarget.classList.remove('drag-over'); - + e.preventDefault(); e.stopPropagation(); e.currentTarget.classList.remove('drag-over'); if (!this.draggedTask) return; - const currentIndex = this.tasks.findIndex(t => t.id === this.draggedTask.id); if (currentIndex === -1 || currentIndex === targetIndex) return; - this.tasks.splice(currentIndex, 1); this.tasks.splice(targetIndex, 0, this.draggedTask); - try { - await fetch(`${API_URL}/tasks/reorder`, { - method: 'POST', - headers: { 'Content-Type': 'application/json' }, - body: JSON.stringify(this.tasks.map(t => t.id)) - }); + await fetch(`${API_URL}/tasks/reorder`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(this.tasks.map(t => t.id)) }); this.render(); - } catch (error) { - console.error('Error reordering:', error); - await this.loadTasks(); - } + } catch (error) { console.error('Error reordering:', error); await this.loadTasks(); } } async handleSubtaskReorder(e, parentTask, targetIndex) { - e.preventDefault(); - e.stopPropagation(); - e.currentTarget.classList.remove('drag-over'); - - if (!this.draggedSubtask || !this.draggedParent) return; - if (this.draggedParent.id !== parentTask.id) return; + e.preventDefault(); e.stopPropagation(); e.currentTarget.classList.remove('drag-over'); + if (!this.draggedSubtask || !this.draggedParent || this.draggedParent.id !== parentTask.id) return; if (this.draggedSubtaskIndex === targetIndex) return; - - const currentIndex = this.draggedSubtaskIndex; - const subtask = parentTask.subtasks[currentIndex]; - - parentTask.subtasks.splice(currentIndex, 1); + const subtask = parentTask.subtasks[this.draggedSubtaskIndex]; + parentTask.subtasks.splice(this.draggedSubtaskIndex, 1); parentTask.subtasks.splice(targetIndex, 0, subtask); - await this.updateTask(parentTask); } - // ─── Render: Active Tasks ─── + // ─── Render: Active ─── renderTask(task, index) { const progress = task.calculateProgress(); const isCompleted = progress === 100 || task.completed; - const card = document.createElement('div'); card.className = `task-card ${isCompleted ? 'completed' : ''}`; card.draggable = true; card.setAttribute('data-task-id', task.id); + card.style.borderLeftColor = task.color || '#6366f1'; - // Drag events card.addEventListener('dragstart', (e) => this.handleDragStart(e, task, false)); card.addEventListener('dragend', (e) => this.handleDragEnd(e)); card.addEventListener('dragover', (e) => this.handleCardDragOver(e)); card.addEventListener('dragleave', (e) => this.handleDragLeave(e)); card.addEventListener('dragenter', (e) => this.handleDragEnter(e, task.id)); card.addEventListener('drop', (e) => { - if (e.target.closest('.drop-zone')) { - this.handleDrop(e, task); - } else if (this.draggedTask && this.draggedTask.id !== task.id) { - this.handleTaskReorder(e, index); - } - }); - card.addEventListener('contextmenu', (e) => { - if (!e.target.closest('.subtask')) { - this.showContextMenu(e, task, 'task'); - } - }); - card.addEventListener('dblclick', (e) => { - if (!e.target.closest('.subtask') && !e.target.closest('button')) { - this.openEditModal(task); - } + if (e.target.closest('.drop-zone')) this.handleDrop(e, task); + else if (this.draggedTask && this.draggedTask.id !== task.id) this.handleTaskReorder(e, index); }); + card.addEventListener('contextmenu', (e) => { if (!e.target.closest('.subtask')) this.showContextMenu(e, task, 'task'); }); + card.addEventListener('dblclick', (e) => { if (!e.target.closest('.subtask') && !e.target.closest('button')) this.openEditModal(task); }); const descClass = task.expandDescription ? 'task-description expanded' : 'task-description'; @@ -680,14 +625,13 @@ class App {
${this.escapeHtml(task.title)}
+ ${this.renderDueBadge(task.dueDate, isCompleted)}
${task.size}
${task.description ? `
${this.escapeHtml(task.description)}
` : ''}
-
-
-
+
${progress}%
${task.reward ? ` @@ -707,12 +651,23 @@ class App { `; - // Append subtasks as DOM nodes to preserve event listeners + // Subtasks with collapse toggle if (task.subtasks.length > 0) { - card.appendChild(this.renderSubtasks(task)); + const isCollapsed = this._collapsedTasks.has(task.id); + const count = task.subtasks.length; + + const toggleBtn = document.createElement('button'); + toggleBtn.className = `subtask-toggle ${isCollapsed ? 'collapsed' : ''}`; + toggleBtn.dataset.count = count; + toggleBtn.innerHTML = `▼ ${isCollapsed ? `Show ${count} subtask${count > 1 ? 's' : ''}` : 'Hide subtasks'}`; + toggleBtn.addEventListener('click', (e) => { e.stopPropagation(); this.toggleCollapse(task.id); }); + card.appendChild(toggleBtn); + + const subtasksEl = this.renderSubtasks(task); + if (isCollapsed) subtasksEl.classList.add('collapsed'); + card.appendChild(subtasksEl); } - // Drop zone const dropZone = document.createElement('div'); dropZone.className = 'drop-zone'; dropZone.textContent = 'Drop tasks here to add as subtasks'; @@ -731,59 +686,36 @@ class App { div.draggable = true; div.setAttribute('data-subtask-id', subtask.id); - div.addEventListener('dragstart', (e) => { - e.stopPropagation(); - this.handleDragStart(e, subtask, true, task, index); - }); - div.addEventListener('dragend', (e) => { - e.stopPropagation(); - this.handleDragEnd(e); - }); + div.addEventListener('dragstart', (e) => { e.stopPropagation(); this.handleDragStart(e, subtask, true, task, index); }); + div.addEventListener('dragend', (e) => { e.stopPropagation(); this.handleDragEnd(e); }); div.addEventListener('dragover', (e) => { - e.preventDefault(); - e.stopPropagation(); - if (this.draggedSubtask && this.draggedParent && this.draggedParent.id === task.id) { - e.currentTarget.classList.add('drag-over'); - } - }); - div.addEventListener('dragleave', (e) => { - e.stopPropagation(); - e.currentTarget.classList.remove('drag-over'); - }); - div.addEventListener('drop', (e) => { - e.stopPropagation(); - this.handleSubtaskReorder(e, task, index); - }); - div.addEventListener('contextmenu', (e) => { - e.stopPropagation(); - this.showContextMenu(e, subtask, 'subtask', task); - }); - div.addEventListener('dblclick', (e) => { - e.stopPropagation(); - if (!e.target.closest('button')) { - this.openEditModal(subtask, task); - } + e.preventDefault(); e.stopPropagation(); + if (this.draggedSubtask && this.draggedParent && this.draggedParent.id === task.id) e.currentTarget.classList.add('drag-over'); }); + div.addEventListener('dragleave', (e) => { e.stopPropagation(); e.currentTarget.classList.remove('drag-over'); }); + div.addEventListener('drop', (e) => { e.stopPropagation(); this.handleSubtaskReorder(e, task, index); }); + div.addEventListener('contextmenu', (e) => { e.stopPropagation(); this.showContextMenu(e, subtask, 'subtask', task); }); + div.addEventListener('dblclick', (e) => { e.stopPropagation(); if (!e.target.closest('button')) this.openEditModal(subtask, task); }); const progress = subtask.calculateProgress(); + const stIsCompleted = subtask.completed || progress === 100; const stDescClass = subtask.expandDescription ? 'task-description expanded' : 'task-description'; div.innerHTML = `
${this.escapeHtml(subtask.title)}
+ ${this.renderDueBadge(subtask.dueDate, stIsCompleted)}
${subtask.size}
${subtask.description ? `
${this.escapeHtml(subtask.description)}
` : ''}
-
-
-
+
${progress}%
${subtask.reward ? `
🎁 - ${subtask.completed + ${stIsCompleted ? `${this.escapeHtml(subtask.reward)}` : `Complete to reveal` } @@ -795,7 +727,6 @@ class App {
`; - container.appendChild(div); }); @@ -805,42 +736,25 @@ class App { render() { const container = document.getElementById('tasks-container'); container.innerHTML = ''; - if (this.tasks.length === 0) { - container.innerHTML = ` -
-

No goals yet

-

Click "+ New Goal" to get started

-
- `; + container.innerHTML = `

No goals yet

Click "+ New Goal" to get started

`; return; } - - this.tasks.forEach((task, index) => { - container.appendChild(this.renderTask(task, index)); - }); + this.tasks.forEach((task, index) => container.appendChild(this.renderTask(task, index))); } - // ─── Render: Archive View ─── + // ─── Render: Archive ─── renderArchivedTask(task) { const progress = task.calculateProgress(); const isCompleted = progress === 100 || task.completed; - const card = document.createElement('div'); card.className = `task-card archived-card ${isCompleted ? 'completed' : ''}`; card.setAttribute('data-task-id', task.id); + card.style.borderLeftColor = task.color || '#6366f1'; - card.addEventListener('contextmenu', (e) => { - if (!e.target.closest('.subtask')) { - this.showContextMenu(e, task, 'task'); - } - }); - card.addEventListener('dblclick', (e) => { - if (!e.target.closest('.subtask') && !e.target.closest('button')) { - this.openEditModal(task); - } - }); + card.addEventListener('contextmenu', (e) => { if (!e.target.closest('.subtask')) this.showContextMenu(e, task, 'task'); }); + card.addEventListener('dblclick', (e) => { if (!e.target.closest('.subtask') && !e.target.closest('button')) this.openEditModal(task); }); const descClass = task.expandDescription ? 'task-description expanded' : 'task-description'; @@ -848,14 +762,13 @@ class App {
${this.escapeHtml(task.title)}
+ ${this.renderDueBadge(task.dueDate, isCompleted)}
${task.size}
${task.description ? `
${this.escapeHtml(task.description)}
` : ''}
-
-
-
+
${progress}%
${task.reward ? ` @@ -873,95 +786,138 @@ class App { `; - // Subtasks (read-only, no drag) - if (task.subtasks.length > 0) { - card.appendChild(this.renderArchivedSubtasks(task)); - } - + if (task.subtasks.length > 0) card.appendChild(this.renderArchivedSubtasks(task)); return card; } renderArchivedSubtasks(task) { const container = document.createElement('div'); container.className = 'subtasks-container'; - task.subtasks.forEach((subtask) => { const div = document.createElement('div'); div.className = 'subtask'; div.style.cursor = 'default'; - - div.addEventListener('contextmenu', (e) => { - e.stopPropagation(); - this.showContextMenu(e, subtask, 'subtask', task); - }); - div.addEventListener('dblclick', (e) => { - e.stopPropagation(); - if (!e.target.closest('button')) { - this.openEditModal(subtask, task); - } - }); - + div.addEventListener('contextmenu', (e) => { e.stopPropagation(); this.showContextMenu(e, subtask, 'subtask', task); }); + div.addEventListener('dblclick', (e) => { e.stopPropagation(); if (!e.target.closest('button')) this.openEditModal(subtask, task); }); const progress = subtask.calculateProgress(); + const stIsCompleted = subtask.completed || progress === 100; const stDescClass = subtask.expandDescription ? 'task-description expanded' : 'task-description'; - div.innerHTML = `
${this.escapeHtml(subtask.title)}
+ ${this.renderDueBadge(subtask.dueDate, stIsCompleted)}
${subtask.size}
${subtask.description ? `
${this.escapeHtml(subtask.description)}
` : ''}
-
-
-
+
${progress}%
${subtask.reward ? `
🎁 - ${subtask.completed + ${stIsCompleted ? `${this.escapeHtml(subtask.reward)}` : `Complete to reveal` }
` : ''} `; - container.appendChild(div); }); - return container; } renderArchive() { const container = document.getElementById('tasks-container'); container.innerHTML = ''; - if (this.archivedTasks.length === 0) { - container.innerHTML = ` -
-

Archive is empty

-

Completed tasks you archive will appear here

-
- `; + container.innerHTML = `

Archive is empty

Completed tasks you archive will appear here

`; return; } + this.archivedTasks.forEach(task => container.appendChild(this.renderArchivedTask(task))); + } - this.archivedTasks.forEach(task => { - container.appendChild(this.renderArchivedTask(task)); - }); + // ─── Celebrations ─── + + _checkCelebrations(prevProgress) { + if (this._celebrateTaskId) { + const card = document.querySelector(`[data-task-id="${this._celebrateTaskId}"]`); + if (card) { + card.classList.add('just-completed'); + const rect = card.getBoundingClientRect(); + this.fireConfetti((rect.left + rect.width / 2) / window.innerWidth, (rect.top + rect.height / 2) / window.innerHeight, 35); + setTimeout(() => card.classList.remove('just-completed'), 700); + } + this._celebrateTaskId = null; + } + if (this.tasks.length > 0 && this._previousOverallProgress === 100 && prevProgress < 100) { + this.fireBigCelebration(); + } + } + + fireBigCelebration() { + this.fireConfetti(0.5, 0.4, 80); + setTimeout(() => this.fireConfetti(0.25, 0.5, 50), 300); + setTimeout(() => this.fireConfetti(0.75, 0.5, 50), 600); + const overlay = document.createElement('div'); + overlay.className = 'celebration-overlay'; + overlay.innerHTML = '
All Goals Complete!
'; + document.body.appendChild(overlay); + setTimeout(() => overlay.remove(), 3200); + } + + fireConfetti(originX = 0.5, originY = 0.5, count = 50) { + const canvas = document.createElement('canvas'); + canvas.className = 'confetti-canvas'; + canvas.width = window.innerWidth; + canvas.height = window.innerHeight; + document.body.appendChild(canvas); + const ctx = canvas.getContext('2d'); + const colors = ['#6366f1', '#a78bfa', '#f59e0b', '#10b981', '#f43f5e', '#0ea5e9', '#ec4899', '#8b5cf6']; + const particles = []; + for (let i = 0; i < count; i++) { + const angle = Math.random() * Math.PI * 2; + const speed = 4 + Math.random() * 8; + particles.push({ + x: originX * canvas.width, y: originY * canvas.height, + vx: Math.cos(angle) * speed * (0.6 + Math.random() * 0.8), + vy: Math.sin(angle) * speed * (0.6 + Math.random() * 0.8) - 3, + color: colors[Math.floor(Math.random() * colors.length)], + size: 3 + Math.random() * 5, rotation: Math.random() * 360, + rotationSpeed: (Math.random() - 0.5) * 12, life: 1, + decay: 0.008 + Math.random() * 0.012, + shape: Math.random() > 0.5 ? 'rect' : 'circle' + }); + } + let frame; + const animate = () => { + ctx.clearRect(0, 0, canvas.width, canvas.height); + let alive = false; + for (const p of particles) { + if (p.life <= 0) continue; + alive = true; + p.x += p.vx; p.y += p.vy; p.vy += 0.18; p.vx *= 0.99; + p.rotation += p.rotationSpeed; p.life -= p.decay; + ctx.save(); + ctx.translate(p.x, p.y); + ctx.rotate(p.rotation * Math.PI / 180); + ctx.globalAlpha = Math.max(0, p.life); + ctx.fillStyle = p.color; + if (p.shape === 'rect') ctx.fillRect(-p.size / 2, -p.size / 2, p.size, p.size * 0.6); + else { ctx.beginPath(); ctx.arc(0, 0, p.size / 2, 0, Math.PI * 2); ctx.fill(); } + ctx.restore(); + } + if (alive) frame = requestAnimationFrame(animate); + else { cancelAnimationFrame(frame); canvas.remove(); } + }; + animate(); } // ─── Utility ─── showError() { - const container = document.getElementById('tasks-container'); - container.innerHTML = ` -
-

Connection Error

-

Cannot connect to server

-
- `; + document.getElementById('tasks-container').innerHTML = `

Connection Error

Cannot connect to server

`; } escapeHtml(text) { diff --git a/public/img/background.jpg b/public/img/background.jpg new file mode 100644 index 0000000..f5f6f72 Binary files /dev/null and b/public/img/background.jpg differ diff --git a/public/index.html b/public/index.html index faea51f..a816fac 100644 --- a/public/index.html +++ b/public/index.html @@ -16,7 +16,7 @@
🗑 Delete
- +