`;
-
- if (["location", "npc", "terminal", "prereq", "info"].some((prop) => task[prop])) {
- if (task.npc && task.terminal) {console.warn(`Tasks should specify only one of [npc, terminal]. (${task.id})`);}
- const infoLine = document.createElement('div');
- infoLine.classList.add('info-line');
- let infoLineHTML = "";
- infoLineHTML += makeInfoLineItem(task, "location", "Location", svgIcons.locationIcon);
- infoLineHTML = infoLineHTML.replace('Base of Operations', '$&');
- infoLineHTML += makeInfoLineItem(task, "npc", "NPC", svgIcons.npcIcon);
- infoLineHTML += makeInfoLineItem(task, "terminal", "Terminal", svgIcons.terminalIcon);
- infoLineHTML += makeInfoLineItem(task, "prereq", "Requirements", svgIcons.prereqIcon);
- infoLineHTML += makeInfoLineItem(task, "info", "Info", svgIcons.infoIcon);
- infoLine.innerHTML = infoLineHTML;
-
- const infoLineExpander = document.createElement("div");
- infoLineExpander.classList.add("info-line-expander");
- infoLineExpander.appendChild(infoLine);
- label.appendChild(infoLineExpander);
+ label.classList.add("task-description");
+ if (isChecked) { label.classList.add("checked"); }
+ if (!isAvailable) { label.classList.add("unavailable"); }
+
+ // Task Text
+ label.innerHTML = `${task.text}`;
+
+ // Reset Timer
+ if (task.period) {
+ const resetTimer = document.createElement("span");
+ resetTimer.classList.add("other-countdown");
+ resetTimer.textContent = "(Loading...)";
+ label.appendChild(resetTimer);
}
- label.classList.add('ml-2', 'flex-1', 'cursor-pointer');
- if (isChecked) { label.classList.add('checked'); }
+ // Info Line & Cycle Schedule
+ makeInfoLine(task, label);
listItem.appendChild(checkbox);
if (task.icon) { listItem.appendChild(icon); }
listItem.appendChild(label);
listItem.appendChild(controlsContainer);
- checkbox.addEventListener('change', (event) => {
- const currentlyChecked = event.target.checked;
+ // Checkbox Changed
+ checkbox.addEventListener("change", (event) => {
+ let currentlyChecked;
+ if ("detail" in event) {
+ currentlyChecked = event.detail;
+ } else {
+ currentlyChecked = event.target.checked;
+ }
+
+ event.target.checked = currentlyChecked;
checklistData.progress[task.id] = currentlyChecked;
- label.classList.toggle('checked', currentlyChecked);
+ label.classList.toggle("checked", currentlyChecked);
- if (isSubtask && task.parentId) {
- let parentTaskDefinition = tasks.daily.find(t => t.id === task.parentId) ||
- tasks.weekly.find(t => t.id === task.parentId) ||
- tasks.other.find(t => t.id === task.parentId);
+ // Update parent task checkboxes
+ let t = task;
+ while (t.parentId) { // walk up the task tree
+ let parentTaskDefinition = getTaskById(t.parentId)
if (parentTaskDefinition && parentTaskDefinition.subtasks) {
- const allSubtasksChecked = parentTaskDefinition.subtasks.every(st => checklistData.progress[st.id]);
+ const allSubtasksChecked = parentTaskDefinition.subtasks.every((st) => checklistData.progress[st.id]);
checklistData.progress[parentTaskDefinition.id] = allSubtasksChecked;
const parentCheckbox = document.getElementById(parentTaskDefinition.id);
- const parentContainer = parentCheckbox ? parentCheckbox.closest('.parent-task-container') : null;
- const parentTextSpan = parentContainer ? parentContainer.querySelector('.parent-task-header .task-text') : null;
+ const parentContainer = parentCheckbox ? parentCheckbox.closest(".parent-task-container") : null;
+ const parentTextSpan = parentContainer ? parentContainer.querySelector(".parent-task-header .task-description") : null;
- if (parentCheckbox) parentCheckbox.checked = allSubtasksChecked;
- if (parentTextSpan) parentTextSpan.classList.toggle('checked', allSubtasksChecked);
+ if (parentCheckbox) {parentCheckbox.checked = allSubtasksChecked;}
+ if (parentTextSpan) {parentTextSpan.classList.toggle("checked", allSubtasksChecked);}
}
+
+ t = parentTaskDefinition; // move up a level
}
saveData();
});
@@ -735,22 +656,215 @@ function createChecklistItem(task, isChecked, isSubtask = false) {
return listItem;
}
-function makeInfoLineItem(task, prop, iconToolTip, icon) {
- if (task[prop]) {
- return `${icon}${task[prop]}`;
- } else {
- return "";
+function taskDialogHeaderSetup(task, dialog) {
+ dialog.querySelector(":scope header .title").innerText = task.text.split(":")[0]; // take the task text up to the first ":" as the dialog title
+
+ let taskIcon = dialog.querySelector(":scope .menu-title img.task-icon");
+ taskIcon.className = "task-icon"; // remove possible `icon-filter` from previous opening
+ taskIcon.src = "";
+ if (task.icon) {
+ taskIcon.src = iconURL(`tasks/${task.icon}`);
+ if (!task.noIconFilter) {
+ taskIcon.classList.add("icon-filter");
+ }
+ }
+}
+
+function showScheduleAction(task, period, cycleIndex, isAvailable) {
+ const cycleCount = cycles[task.id].columns[0].order.length;
+
+ return () => {
+ taskDialogHeaderSetup(task, scheduleDialog);
+
+ const thead = scheduleDialog.querySelector(":scope thead");
+ const tbody = scheduleDialog.querySelector(":scope tbody");
+ thead.innerHTML = "";
+ tbody.innerHTML = "";
+
+ let header = `
Date
`;
+ for (const column of cycles[task.id].columns) {
+ header += `
${column.name}
`;
+ }
+ header += "
";
+ thead.innerHTML += header;
+
+ const now = new Date();
+ const ref = new Date(cycles[task.id].ref);
+ const cyclesSinceRef = Math.floor((now.getTime() - ref.getTime()) / period) + (isAvailable ? 0 : 1); // add 1 if unavailable to skip the current cycle for unavailable intermittent tasks
+ const currentCycleStartTime = ref.getTime() + (period * cyclesSinceRef);
+
+ for (let i = 0; i <= cycleCount; i++) {
+ let date = "Now";
+ if (i !== 0 || !isAvailable) {
+ const rowCycleStartDate = new Date(currentCycleStartTime + (period * i));
+ date = rowCycleStartDate.toISOString().split("T")[0]; // toISOString is always in UTC, which is what we want. The part before "T" is the date
+ }
+
+ let repeat = "";
+ if (i === cycleCount) {
+ repeat = `
(Cycle Repeats)
`;
+ }
+
+ let row = `${repeat}
${date}
`; // intermediate `row` variable is needed because manipulating `tbody.innerHTML` automatically adds `
` tag
+
+ for (const column of cycles[task.id].columns) {
+ const cellData = column.order[modulo(cycleIndex + i, cycleCount)];
+ const align = column.align ? ` style="text-align: ${column.align}"` : "";
+ row += `${makeCycleIcon(cellData)}${cellData.text}`;
+ }
+
+ row += "";
+ tbody.innerHTML += row;
+ }
+ scheduleDialog.showModal();
+ }
+}
+
+function showMoreInfoAction(task) {
+ return () => {
+ taskDialogHeaderSetup(task, moreInfoDialog);
+ document.getElementById("more-info-content").innerHTML = task.moreInfo;
+ moreInfoDialog.showModal();
+ }
+}
+
+function makeInfoLine(task, appendTo) {
+ const hasCycle = Object.hasOwn(cycles, task.id);
+ const hasInfoLine = ["location", "npc", "terminal", "prereq", "info", "moreInfo"].some((prop) => task[prop]);
+
+ if (hasCycle || hasInfoLine) {
+ const taskInfoExpander = document.createElement("div");
+ taskInfoExpander.classList.add("task-info-expander");
+ const taskInfoExpanderContent = document.createElement("div");
+
+ // Cycle
+ if (hasCycle) {
+ const currentCycle = document.createElement("div");
+ currentCycle.classList.add("current-cycle");
+
+ currentCycle.innerHTML += svgIcons.cycleIcon;
+
+ const now = new Date();
+ const ref = new Date(cycles[task.id].ref);
+ const cycleCount = cycles[task.id].columns[0].order.length;
+
+ let prefix, period, cycleIndex;
+ const isAvailable = calcTaskTimes(task, now).isAvailable;
+ if (task.id.startsWith("weekly_")) {
+ prefix = "This Week";
+ period = 7 * C.MILLISECONDS_PER_DAY;
+ if (ref.getUTCDay() !== 1) {
+ console.warn(`${task.id} cycle ref ${cycles[task.id].ref} is not a Monday`);
+ }
+ }
+ else if (task.id.startsWith("daily_")) {
+ prefix = "Today";
+ period = C.MILLISECONDS_PER_DAY;
+ }
+ else {
+ prefix = "Current Cycle";
+ if (!isAvailable) {prefix = "Next Cycle";}
+ period = parseDuration(task.period);
+ }
+
+ cycleIndex = modulo(Math.floor((now.getTime() - ref.getTime()) / period), cycleCount);
+ if (!isAvailable) {cycleIndex++;}
+ console.log(`${task.id} cycleIndex ${cycleIndex}`);
+ const cycleData = cycles[task.id].columns[0].order[cycleIndex];
+
+ const cyclePrefix = document.createElement("span");
+ cyclePrefix.innerHTML = `${prefix}: `;
+ currentCycle.appendChild(cyclePrefix);
+
+ currentCycle.innerHTML += makeCycleIcon(cycleData);
+
+ const cycleText = document.createElement("span");
+ cycleText.textContent = cycleData.text;
+ currentCycle.appendChild(cycleText);
+
+ const showSchedule = document.createElement("button");
+ showSchedule.type = "button";
+ showSchedule.classList.add("more-info-btn");
+ showSchedule.innerHTML = "Show Schedule";
+ showSchedule.addEventListener("click", showScheduleAction(task, period, cycleIndex, isAvailable));
+ currentCycle.appendChild(showSchedule);
+
+ taskInfoExpanderContent.appendChild(currentCycle);
+ }
+
+ // Info Line
+ if (hasInfoLine) {
+ if (task.npc && task.terminal) {console.warn(`[${task.id}] Tasks should specify only one of [npc, terminal].`);}
+ const infoLine = document.createElement('div');
+ infoLine.classList.add('info-line');
+ let infoLineHTML = "";
+ infoLineHTML += makeInfoLineItem(task, "location", "Location", svgIcons.locationIcon);
+ infoLineHTML = infoLineHTML.replace('Base of Operations', C.BASE_OF_OPERATIONS_TOOLTIP);
+ infoLineHTML += makeInfoLineItem(task, "npc", "NPC", svgIcons.npcIcon);
+ infoLineHTML += makeInfoLineItem(task, "terminal", "Terminal", svgIcons.terminalIcon);
+ infoLineHTML += makeInfoLineItem(task, "prereq", "Requirements", svgIcons.prereqIcon);
+ infoLineHTML += makeInfoLineItem(task, "info", "Info", svgIcons.infoIcon);
+ infoLine.innerHTML = infoLineHTML;
+
+ if (task.moreInfo) {
+ const showMoreInfo = document.createElement("button");
+ showMoreInfo.type = "button";
+ showMoreInfo.classList.add("more-info-btn");
+ showMoreInfo.innerHTML = "More Info";
+ showMoreInfo.addEventListener("click", showMoreInfoAction(task));
+ const span = document.createElement("span");
+ span.appendChild(showMoreInfo);
+ infoLine.appendChild(span);
+ }
+
+ taskInfoExpanderContent.appendChild(infoLine);
+ }
+
+ taskInfoExpander.appendChild(taskInfoExpanderContent);
+ appendTo.appendChild(taskInfoExpander);
+ }
+}
+
+function getTaskById(id) {
+ for (const group in tasks) {
+ for (const task of tasks[group]) {
+ if (task.id === id) {
+ return task;
+ }
+ const subtaskFound = _getSubtaskById(task, id);
+ if (subtaskFound) {
+ return subtaskFound;
+ }
+ }
+ }
+}
+
+function _getSubtaskById(task, id) {
+ if ("subtasks" in task) {
+ for (const subtask of task.subtasks) {
+ if (subtask.id === id) {
+ return subtask;
+ }
+ const subtaskFound = _getSubtaskById(subtask, id);
+ if (subtaskFound) {
+ return subtaskFound;
+ }
+ }
}
+ return undefined;
}
-function populateSection(sectionElement, taskList, progress) {
+function populateSection(section) {
+ const sectionElement = document.querySelector(`#${section}-tasks-content ul`);
+ const taskList = tasks[section];
+
if (!sectionElement) {
console.error("Section element not found for population:", sectionElement);
return;
}
sectionElement.innerHTML = '';
- taskList.forEach(task => {
- const isChecked = progress[task.id] || false;
+ taskList.forEach((task) => {
+ const isChecked = checklistData.progress[task.id] || false;
const listItem = createChecklistItem(task, isChecked);
sectionElement.appendChild(listItem);
});
@@ -760,7 +874,7 @@ function populateSection(sectionElement, taskList, progress) {
}
function resetSpecificButtonState(buttonElement, defaultText, stateKey) {
- if (!buttonElement || !confirmState[stateKey]) return;
+ if (!buttonElement || !confirmState[stateKey]) { return };
clearTimeout(confirmState[stateKey].timeout);
confirmState[stateKey].timeout = null;
confirmState[stateKey].isConfirming = false;
@@ -776,14 +890,14 @@ function handleResetConfirmation(buttonElement, confirmKey, defaultText, resetAc
}
if (!confirmState[confirmKey].isConfirming) {
- Object.keys(confirmState).forEach(key => {
+ Object.keys(confirmState).forEach((key) => {
if (key !== confirmKey && confirmState[key].isConfirming) {
let btnElement, btnText;
if (key === 'all') { btnElement = resetButton; btnText = 'Reset All Checks'; }
else if (key === 'daily') { btnElement = resetDailyButton; btnText = 'Reset Daily Checks'; }
else if (key === 'weekly') { btnElement = resetWeeklyButton; btnText = 'Reset Weekly Checks'; }
else if (key === 'unhide') { btnElement = unhideTasksButton; btnText = 'Unhide All Tasks'; }
- if(btnElement) {
+ if (btnElement) {
resetSpecificButtonState(btnElement, btnText, key);
}
}
@@ -816,72 +930,58 @@ function resetAllAction() {
allCheckboxes.forEach((checkbox) => {
checkbox.checked = false;
const listItem = checkbox.closest('li');
- const label = listItem.querySelector('label');
- const parentTextSpan = listItem.querySelector('.parent-task-header .task-text');
- if (label) label.classList.remove('checked');
- if (parentTextSpan) parentTextSpan.classList.remove('checked');
+ const taskDescription = listItem.querySelector(".task-description");
+ if (taskDescription) {taskDescription.classList.remove("checked")};
});
updateLastSavedDisplay(checklistData.lastSaved);
console.log("Checklist reset complete.");
}
-function resetSection(section) {
+function resetSection(section, resetAltRefTasks=false) {
const validSections = ["daily", "weekly"];
if (!validSections.includes(section)) {
console.error("Section '%s' is not a valid section name: %s", section, validSections);
return;
}
- let taskList, sectionElement, sectionElementId;
- if (section === "daily") {
- taskList = tasks.daily;
- sectionElement = dailyList;
- sectionElementId = 'daily-tasks-section';
- } else if (section === "weekly") {
- taskList = tasks.weekly;
- sectionElement = weeklyList;
- sectionElementId = 'weekly-tasks-section';
- }
- let didReset = false;
- taskList.forEach(task => {
- if (checklistData.progress[task.id] && !checklistData.hiddenTasks[task.id]) {
+
+ let didReset = 0;
+
+ function resetTask(task) {
+ if (task.ref && !resetAltRefTasks) {
+ didReset += otherTaskReset(task);
+ } else if (checklistData.progress[task.id] && !checklistData.hiddenTasks[task.id]) {
checklistData.progress[task.id] = false;
- didReset = true;
+ didReset++;
}
- if (task.isParent && task.subtasks) {
- task.subtasks.forEach(subtask => {
- if (checklistData.progress[subtask.id] && !checklistData.hiddenTasks[subtask.id]) {
- checklistData.progress[subtask.id] = false;
- didReset = true;
- }
- });
- }
- });
+ if (task.subtasks) {task.subtasks.forEach(resetTask);}
+ }
+ tasks[section].forEach(resetTask);
+
const now = new Date().toISOString();
if (section === "daily") {checklistData.lastDailyReset = now;}
else if (section === "weekly") {checklistData.lastWeeklyReset = now;}
saveData();
if (didReset) {
- populateSection(sectionElement, taskList, checklistData.progress);
- updateSectionControls(sectionElementId);
+ populateSection(section);
}
- console.log("%s checks reset.", section);
+ console.log(`${section} checks reset.`);
}
function resetDailyAction() {
- resetSection("daily");
+ resetSection("daily", true);
}
function resetWeeklyAction() {
- resetSection("weekly");
+ resetSection("weekly", true);
}
function handleSectionToggle(event) {
const header = event.target.closest('.section-toggle');
- if (!header) return;
+ if (!header) { return; }
const contentId = header.getAttribute('aria-controls');
const contentDiv = document.getElementById(contentId);
- if (!contentDiv) return;
+ if (!contentDiv) { return; }
const isExpanded = header.getAttribute('aria-expanded') === 'true';
header.setAttribute('aria-expanded', !isExpanded);
@@ -889,34 +989,25 @@ function handleSectionToggle(event) {
console.log(`Toggled section ${contentId} to ${!isExpanded ? 'expanded' : 'collapsed'}`);
}
-function toggleMenu() {
- if (slideoutMenuOverlay) {
- slideoutMenuOverlay.classList.toggle('open');
- }
-}
-
function unhideAllAction() {
checklistData.hiddenTasks = {};
checklistData.manuallyHiddenSections = {};
saveData(false);
- document.querySelectorAll('.task-item.hidden-task').forEach(item => item.classList.remove('hidden-task'));
- document.querySelectorAll('section.section-is-hidden-by-user').forEach(section => section.classList.remove('section-is-hidden-by-user'));
+ document.querySelectorAll(".task-item.hidden-task").forEach((item) => item.classList.remove("hidden-task"));
+ document.querySelectorAll("section.section-is-hidden-by-user").forEach((section) => section.classList.remove("section-is-hidden-by-user"));
- populateSection(dailyList, tasks.daily, checklistData.progress);
- populateSection(weeklyList, tasks.weekly, checklistData.progress);
- populateSection(otherList, tasks.other, checklistData.progress);
- ['daily-tasks-section', 'weekly-tasks-section', 'other-tasks-section'].forEach(updateSectionControls);
+ ["daily", "weekly", "other"].forEach(populateSection);
console.log("All tasks and sections unhidden.");
- toggleMenu();
+ optionsMenu.close();
}
function updateSectionControls(sectionElementId) {
const sectionElement = document.getElementById(sectionElementId);
- if (!sectionElement) return;
+ if (!sectionElement) { return; }
const hideSectionButton = sectionElement.querySelector('.hide-section-button');
- if (!hideSectionButton) return;
+ if (!hideSectionButton) { return; }
if (checklistData.manuallyHiddenSections[sectionElementId]) {
sectionElement.classList.add('section-is-hidden-by-user');
@@ -938,7 +1029,7 @@ function updateSectionControls(sectionElementId) {
return;
}
- const allTasksIndividuallyHidden = allTaskItems.every(item => item.classList.contains('hidden-task'));
+ const allTasksIndividuallyHidden = allTaskItems.every((item) => item.classList.contains("hidden-task"));
if (allTasksIndividuallyHidden) {
hideSectionButton.classList.add('visible');
@@ -947,11 +1038,33 @@ function updateSectionControls(sectionElementId) {
}
}
-function loadAndInitializeApp() {
- initializeDOMElements();
+export function stopCountdown() {
+ if (countdownInterval) { clearInterval(countdownInterval); }
+}
+
+export function startCountdown() {
+ stopCountdown();
+ countdownInterval = setInterval(handleResets, 1000);
+}
+
+function saveData(showStatus = true) {
hideError();
- loadThemePreference();
+ checklistData.lastSaved = new Date().toISOString();
+ try {
+ localStorage.setItem(DATA_STORAGE_KEY, JSON.stringify(checklistData));
+ updateLastSavedDisplay(checklistData.lastSaved);
+ if (showStatus) { showSaveStatus(); }
+ } catch (e) {
+ console.error("Error saving data to localStorage:", e);
+ let userMessage = "Could not save progress.";
+ if (e.name === 'QuotaExceededError' || (e.code && (e.code === 22 || e.code === 1014))) {
+ userMessage = "Could not save progress. Browser storage might be full.";
+ }
+ displayError(userMessage);
+ }
+}
+function loadData() {
const savedData = localStorage.getItem(DATA_STORAGE_KEY);
if (savedData) {
try {
@@ -963,41 +1076,41 @@ function loadAndInitializeApp() {
checklistData.lastWeeklyReset = parsedData.lastWeeklyReset || null;
checklistData.hiddenTasks = parsedData.hiddenTasks || {};
checklistData.manuallyHiddenSections = parsedData.manuallyHiddenSections || {};
- checklistData.lastEightHourResets = parsedData.lastEightHourResets || {};
+ checklistData.lastTaskResetTimes = parsedData.lastTaskResetTimes || {};
checklistData.notificationPreferences = parsedData.notificationPreferences || {};
checklistData.notificationsSent = parsedData.notificationsSent || {};
} else { console.warn("Invalid data format found in localStorage. Starting fresh."); }
} catch (e) {
console.error("Error parsing saved data:", e);
displayError("Failed to load saved progress. Data might be corrupted.");
- checklistData = { progress: {}, lastSaved: null, lastDailyReset: null, lastWeeklyReset: null, hiddenTasks: {}, manuallyHiddenSections: {}, lastEightHourResets: {}, notificationPreferences: {}, notificationsSent: {} };
+ checklistData = { progress: {}, lastSaved: null, lastDailyReset: null, lastWeeklyReset: null, hiddenTasks: {}, manuallyHiddenSections: {}, lastTaskResetTimes: {}, notificationPreferences: {}, notificationsSent: {} };
}
}
+}
+export function loadAndInitializeApp() {
+ initializeDOMElements();
+ hideError();
+ loadThemePreference();
+ loadData();
setDailyBackground();
- displayLocalResetTimes();
- if (countdownInterval) clearInterval(countdownInterval);
- countdownInterval = setInterval(displayLocalResetTimes, 1000);
-
- populateSection(dailyList, tasks.daily, checklistData.progress);
- populateSection(weeklyList, tasks.weekly, checklistData.progress);
- populateSection(otherList, tasks.other, checklistData.progress);
- updateLastSavedDisplay(checklistData.lastSaved);
- ['daily-tasks-section', 'weekly-tasks-section', 'other-tasks-section'].forEach(updateSectionControls);
+ handleResets();
+ ["daily", "weekly", "other"].forEach(populateSection);
+ updateLastSavedDisplay(checklistData.lastSaved);
// Setup event listeners
- if (appVersionElement) appVersionElement.textContent = APP_VERSION;
- else console.error("App version element not found!");
+ if (appVersionElement) { appVersionElement.textContent = APP_VERSION; }
+ else { console.error("App version element not found!"); }
if (gitHashElement) {
gitHashElement.textContent = GIT_COMMIT_HASH;
gitHashElement.href = `https://github.com/warframe-tools/Task-Checklist/tree/${GIT_COMMIT_HASH_LONG}`;
- } else console.error("git hash element not found!");
+ } else { console.error("git hash element not found!"); }
- if (wfVersionElement) wfVersionElement.textContent = `Warframe Version ${WARFRAME_VERSION}`;
- else console.error("Warframe version element not found!");
+ if (wfVersionElement) { wfVersionElement.textContent = `Warframe Version ${WARFRAME_VERSION}`; }
+ else { console.error("Warframe version element not found!"); }
if (resetDailyButton) { resetDailyButton.addEventListener('click', () => handleResetConfirmation(resetDailyButton, 'daily', 'Reset Daily Checks', resetDailyAction)); }
else { console.error("Reset Daily button element not found!"); }
@@ -1015,41 +1128,32 @@ function loadAndInitializeApp() {
if (themeToggleButton) { themeToggleButton.addEventListener('click', handleThemeToggle); }
else { console.error("Theme toggle button not found!"); }
- if (hamburgerButton) { hamburgerButton.addEventListener('click', toggleMenu); }
+ if (hamburgerButton) { hamburgerButton.addEventListener('click', () => {optionsMenu.showModal();}); }
else { console.error("Hamburger button not found!"); }
- if (slideoutMenuOverlay) {
- slideoutMenuOverlay.addEventListener('click', function(event) {
- if (event.target === slideoutMenuOverlay) {
- toggleMenu();
- }
- });
- } else { console.error("Slideout menu overlay not found!"); }
-
- if (menuCloseButton) {
- menuCloseButton.addEventListener('click', toggleMenu);
- } else { console.error("Menu close button not found!"); }
-
-
- sectionToggles.forEach(toggle => {
- toggle.addEventListener('click', handleSectionToggle);
+ sectionToggles.forEach((toggle) => {
+ toggle.addEventListener("click", handleSectionToggle);
});
- document.getElementById('checklist-container').addEventListener('click', function(event) {
- if (event.target.classList.contains('hide-section-button')) {
- const sectionId = event.target.dataset.sectionId;
- if (sectionId) {
- const sectionElement = document.getElementById(sectionId);
- if (sectionElement) {
- checklistData.manuallyHiddenSections[sectionId] = true;
- sectionElement.classList.add('section-is-hidden-by-user');
- event.target.classList.remove('visible');
- saveData(false);
- console.log(`Section ${sectionId} manually hidden.`);
+ try {
+ document.getElementById('checklist-container').addEventListener('click', function(event) {
+ if (event.target.classList.contains('hide-section-button')) {
+ const sectionId = event.target.dataset.sectionId;
+ if (sectionId) {
+ const sectionElement = document.getElementById(sectionId);
+ if (sectionElement) {
+ checklistData.manuallyHiddenSections[sectionId] = true;
+ sectionElement.classList.add('section-is-hidden-by-user');
+ event.target.classList.remove('visible');
+ saveData(false);
+ console.log(`Section ${sectionId} manually hidden.`);
+ }
}
}
- }
- });
+ });
+ } catch (e) {
+ console.error("Checklist container not found!");
+ }
if (errorCloseButton) {
@@ -1060,20 +1164,38 @@ function loadAndInitializeApp() {
errorCopyButton.addEventListener('click', copyErrorToClipboard);
} else { console.error("Error copy button not found!"); }
+ for (const dialog of document.getElementsByTagName("dialog")) {
+ // clicking inside the dialog's top-level div does nothing
+ dialog.querySelector(":scope > div").addEventListener("click", (e) => {
+ e.stopPropagation();
+ });
+
+ // clicking the close button...
+ dialog.querySelector(":scope .menu-close-button").addEventListener("click", () => {
+ dialog.close();
+ });
+
+ // clicking anywhere else on the dialog (i.e., the anywhere else the page (the ::backdrop)) will close it
+ dialog.addEventListener("click", () => {
+ dialog.close();
+ });
+ }
+
console.log(`Warframe Checklist App Initialized (v${APP_VERSION} (${GIT_COMMIT_HASH})) from app.js.`);
}
// --- Initialization ---
-document.addEventListener('DOMContentLoaded', () => {
+document.addEventListener("DOMContentLoaded", () => {
try {
loadAndInitializeApp();
+ startCountdown();
} catch(error) {
console.error("Critical Error during app.js initialization:", error);
- const errDisp = document.getElementById('error-display');
- const errMsg = document.getElementById('error-message');
- if(errDisp && errMsg) {
+ const errDisp = document.getElementById("error-display");
+ const errMsg = document.getElementById("error-message");
+ if (errDisp && errMsg) {
errMsg.textContent = "A critical error occurred during application startup. Please check the console.";
- errDisp.classList.add('visible');
+ errDisp.classList.add("visible");
} else {
alert("A critical error occurred during application startup. Please check the console.");
}
diff --git a/sources/js/constants.js b/sources/js/constants.js
new file mode 100644
index 0000000..c1ca53f
--- /dev/null
+++ b/sources/js/constants.js
@@ -0,0 +1,9 @@
+// --- sources/js/constants.js ---
+export const MILLISECONDS_PER_SECOND = 1000;
+export const MILLISECONDS_PER_MINUTE = 60 * MILLISECONDS_PER_SECOND;
+export const MILLISECONDS_PER_HOUR = 60 * MILLISECONDS_PER_MINUTE;
+export const MILLISECONDS_PER_DAY = 24 * MILLISECONDS_PER_HOUR;
+
+export const SERVER_TIMEZONE = "America/Toronto"; // used for determining Daylight Saving Time
+
+export const BASE_OF_OPERATIONS_TOOLTIP = 'Base of Operations';
diff --git a/sources/js/cycles.json b/sources/js/cycles.json
new file mode 100644
index 0000000..98d9aa8
--- /dev/null
+++ b/sources/js/cycles.json
@@ -0,0 +1,214 @@
+{
+ "weekly_ayatan": {
+ "ref": "2026-01-26",
+ "columns": [
+ {
+ "name": "Item",
+ "order": [
+ { "text": "Ayatan Sah Sculpture", "icon": "OroFusexA.png" },
+ { "text": "Ayatan Ayr Sculpture", "icon": "OroFusexB.png" },
+ { "text": "Ayatan Orta Sculpture", "icon": "OroFusexC.png" },
+ { "text": "Ayatan Vaya Sculpture", "icon": "OroFusexD.png" },
+ { "text": "Ayatan Piv Sculpture", "icon": "OroFusexE.png" },
+ { "text": "Ayatan Valana Sculpture", "icon": "OroFusexG.png" }
+ ]
+ },
+ {
+ "name": "Tileset",
+ "order": [
+ { "text": "Orokin Derelict (Deimos)", "icon": "FactionInfested.png" },
+ { "text": "Orokin Tower (Void)", "icon": "FactionOrokin.png" },
+ { "text": "Orokin Derelict (Deimos)", "icon": "FactionInfested.png" },
+ { "text": "Orokin Tower (Void)", "icon": "FactionOrokin.png" },
+ { "text": "Orokin Derelict (Deimos)", "icon": "FactionInfested.png" },
+ { "text": "Orokin Tower (Void)", "icon": "FactionOrokin.png" }
+ ]
+ }
+ ]
+ },
+ "weekly_kahl_garrison": {
+ "ref": "2026-01-12",
+ "columns": [
+ {
+ "name": "Mission",
+ "order": [
+ { "text": "Sneaky Sabotage", "icon": "FactionCorpus.png" },
+ { "text": "Junk Run", "icon": "FactionGrineer.png" },
+ { "text": "Prison Break", "icon": "SentientSymbol.png" }
+ ]
+ },
+ {
+ "name": "Tileset",
+ "order": [
+ { "text": "Spaceport (Orb Vallis, Venus)" },
+ { "text": "Grineer Forest (Earth)" },
+ { "text": "Murex" }
+ ]
+ }
+ ]
+ },
+ "weekly_archon_hunt": {
+ "ref": "2026-01-12",
+ "columns": [
+ {
+ "name": "Item",
+ "order": [
+ { "text": "Azure Archon Shard", "icon": "ArchonShardBoreal.png" },
+ { "text": "Crimson Archon Shard", "icon": "ArchonShardAmar.png" },
+ { "text": "Amber Archon Shard", "icon": "ArchonShardNira.png" }
+ ]
+ },
+ {
+ "name": "Boss",
+ "align": "left",
+ "order": [
+ { "text": "🦉 Archon Boreal" },
+ { "text": "🐺 Archon Amar" },
+ { "text": "🐍 Archon Nira" }
+ ]
+ },
+ {
+ "name": "Tileset",
+ "order": [
+ { "text": "Grineer Forest (Earth)", "icon": "FactionGrineer.png" },
+ { "text": "Grineer Settlement (Mars)", "icon": "FactionGrineer.png" },
+ { "text": "Corpus Gas City (Jupiter)", "icon": "FactionAmalgam.png" }
+ ]
+ }
+ ]
+ },
+ "weekly_duviri_circuit": {
+ "ref": "2026-01-26",
+ "columns": [
+ {
+ "name": "Items",
+ "order": [
+ { "text": "Blueprints for Excalibur, Trinity, or Ember", "icon": "IconWarframe_256.png", "iconFilter": true },
+ { "text": "Blueprints for Loki, Mag, or Rhino", "icon": "IconWarframe_256.png", "iconFilter": true },
+ { "text": "Blueprints for Ash, Frost, or Nyx", "icon": "IconWarframe_256.png", "iconFilter": true },
+ { "text": "Blueprints for Saryn, Vauban, or Nova", "icon": "IconWarframe_256.png", "iconFilter": true },
+ { "text": "Blueprints for Nekros, Valkyr, or Oberon", "icon": "IconWarframe_256.png", "iconFilter": true },
+ { "text": "Blueprints for Hydroid, Mirage, or Limbo", "icon": "IconWarframe_256.png", "iconFilter": true },
+ { "text": "Blueprints for Mesa, Chroma, or Atlas", "icon": "IconWarframe_256.png", "iconFilter": true },
+ { "text": "Blueprints for Ivara, Inaros, or Titania", "icon": "IconWarframe_256.png", "iconFilter": true },
+ { "text": "Blueprints for Nidus, Octavia, or Harrow", "icon": "IconWarframe_256.png", "iconFilter": true },
+ { "text": "Blueprints for Gara, Khora, or Revenant", "icon": "IconWarframe_256.png", "iconFilter": true },
+ { "text": "Blueprints for Garuda, Baruuk, or Hildryn", "icon": "IconWarframe_256.png", "iconFilter": true }
+ ]
+ }
+ ]
+ },
+ "weekly_duviri_circuit_sp": {
+ "ref": "2026-01-05",
+ "columns": [
+ {
+ "name": "Items",
+ "order": [
+ { "text": "Incarnon Adapters for Braton, Kunai, Lato, Paris, and Skana", "icon": "IncarnonEvolveIconSmall.png", "iconFilter": true },
+ { "text": "Incarnon Adapters for Angstrum, Anku, Boar, Gammacor, and Gorgon", "icon": "IncarnonEvolveIconSmall.png", "iconFilter": true },
+ { "text": "Incarnon Adapters for Bo, Furax, Furis, Latron, and Strun", "icon": "IncarnonEvolveIconSmall.png", "iconFilter": true },
+ { "text": "Incarnon Adapters for Boltor, Bronco, Ceramic Dagger, Lex, and Magistar", "icon": "IncarnonEvolveIconSmall.png", "iconFilter": true },
+ { "text": "Incarnon Adapters for Atomos, Dual Ichor, Dual Toxocyst, Miter, and Torid", "icon": "IncarnonEvolveIconSmall.png", "iconFilter": true },
+ { "text": "Incarnon Adapters for Ack & Brunt, Burston, Nami Solo, Soma, and Vasto", "icon": "IncarnonEvolveIconSmall.png", "iconFilter": true },
+ { "text": "Incarnon Adapters for Despair, Dread, Hate, Sibear, and Zylok", "icon": "IncarnonEvolveIconSmall.png", "iconFilter": true },
+ { "text": "Incarnon Adapters for Cestra, Dera, Okina, Sicarus, and Sybaris", "icon": "IncarnonEvolveIconSmall.png", "iconFilter": true }
+ ]
+ }
+ ]
+ },
+ "weekly_calendar" : {
+ "ref": "2024-12-16",
+ "columns": [
+ {
+ "name": "Season",
+ "order": [
+ { "text": "Winter", "icon": "RetroSeasonalWinterIcon_.png" },
+ { "text": "Spring", "icon": "RetroSeasonalSpringIcon_.png" },
+ { "text": "Summer", "icon": "RetroSeasonalSummerIcon_.png" },
+ { "text": "Autumn", "icon": "RetroSeasonalAutumnIcon_.png" }
+ ]
+ },
+ {
+ "name": "Increased Spawns",
+ "align": "left",
+ "order": [
+ { "text": "❄️ Arctic Eximus" },
+ { "text": "🟢 Jade Light Eximus" },
+ { "text": "🔥 Arson Eximus" },
+ { "text": "🧲 Energy Leech Eximus" }
+ ]
+ }
+ ]
+ },
+ "weekly_teshin": {
+ "ref": "2026-02-02",
+ "columns": [
+ {
+ "name": "Item",
+ "order": [
+ { "text": "Umbra Forma Blueprint", "icon": "FormaUmbra.png" },
+ { "text": "50,000 Kuva", "icon": "Kuva.png" },
+ { "text": "Kitgun Riven Mod", "icon": "OmegaModIconRendered256.png" },
+ { "text": "3x Built Forma", "icon": "FormaPack.png" },
+ { "text": "Zaw Riven Mod", "icon": "OmegaModIconRendered256.png" },
+ { "text": "30,000 Endo", "icon": "EndoIconRenderLarge.png" },
+ { "text": "Rifle Riven Mod", "icon": "OmegaModIconRendered256.png" },
+ { "text": "Shotgun Riven Mod", "icon": "OmegaModIconRendered256.png" }
+ ]
+ },
+ {
+ "name": "Price",
+ "order": [
+ { "text": "150", "icon": "SteelEssence.png" },
+ { "text": "55", "icon": "SteelEssence.png" },
+ { "text": "75", "icon": "SteelEssence.png" },
+ { "text": "75", "icon": "SteelEssence.png" },
+ { "text": "75", "icon": "SteelEssence.png" },
+ { "text": "150", "icon": "SteelEssence.png" },
+ { "text": "75", "icon": "SteelEssence.png" },
+ { "text": "75", "icon": "SteelEssence.png" }
+ ]
+ }
+ ]
+ },
+ "weekly_bird3": {
+ "ref": "2026-01-12",
+ "columns": [
+ {
+ "name": "Item",
+ "order": [
+ { "text": "Azure Archon Shard", "icon": "ArchonShardBoreal.png" },
+ { "text": "Amber Archon Shard", "icon": "ArchonShardNira.png" },
+ { "text": "Crimson Archon Shard", "icon": "ArchonShardAmar.png" }
+ ]
+ }
+ ]
+ },
+ "other_baro": {
+ "ref": "2022-12-30T09:00:00-05:00",
+ "columns": [
+ {
+ "name": "Location",
+ "align": "left",
+ "order": [
+ { "text": "Strata Relay, Earth" },
+ { "text": "Larunda Relay, Mercury" },
+ { "text": "Kronia Relay, Saturn" },
+ { "text": "Orcus Relay, Pluto (MR 8+)" }
+ ]
+ }
+ ]
+ },
+ "other_eleanor": {
+ "ref": "2025-03-18",
+ "columns": [
+ {
+ "name": "Coda Weapons",
+ "order": [
+ { "text": "Hema, Sporothrix, Catabolyst, Pox, Dual Torxica, Mire, and Motovore" },
+ { "text": "Bassocyst, Bubonico, Synapse, Tysis, Caustacyst, Hirudo, and Pathocyst" }
+ ]
+ }
+ ]
+ }
+}
diff --git a/sources/js/functions.js b/sources/js/functions.js
new file mode 100644
index 0000000..a5476b6
--- /dev/null
+++ b/sources/js/functions.js
@@ -0,0 +1,180 @@
+// --- sources/js/functions.js ---
+/** Functions that don't manipulate or depend on the DOM or global variables,
+ * and have no side effects (apart from console messages).
+ * Functions that generate HTML or DOM elements are allowed here,
+ * as long as they don't actually insert them into the document
+ */
+
+import * as C from "./constants.js";
+
+export function modulo(n, d) {
+ return ((n % d) + d) % d;
+}
+
+const taskIcons = import.meta.glob("../img/icons/**/*.png", {eager: true, query: '?url', import: 'default'});
+export function iconURL(iconName) {
+ return taskIcons["../img/icons/" + iconName];
+}
+
+export function makeCycleIcon(cycleData) {
+ if (cycleData.icon) {
+ const src = iconURL(`cycles/${cycleData.icon}`)
+ let classList = "cycle-icon";
+ if (cycleData.iconFilter) {
+ classList += " icon-filter";
+ }
+ return ``;
+ } else {
+ return "";
+ }
+}
+
+export function formatTimestamp(timestamp) {
+ if (!timestamp) return 'Never';
+ try {
+ const date = new Date(timestamp);
+ if (isNaN(date.getTime())) return 'Invalid Date';
+ return date.toLocaleString(undefined, { dateStyle: 'medium', timeStyle: 'short' });
+ } catch (e) { console.error("Error formatting timestamp:", e); return 'Error'; }
+}
+
+export function getMostRecentMondayMidnightUTC() {
+ const now = new Date();
+ const currentUTCDay = now.getUTCDay();
+ const daysSinceMondayUTC = (currentUTCDay === 0) ? 6 : currentUTCDay - 1;
+
+ const mondayUTC = new Date(Date.UTC(now.getUTCFullYear(), now.getUTCMonth(), now.getUTCDate()));
+ mondayUTC.setUTCDate(mondayUTC.getUTCDate() - daysSinceMondayUTC);
+ mondayUTC.setUTCHours(0, 0, 0, 0);
+ return mondayUTC.getTime();
+}
+
+export function getNextDailyMidnightUTC() {
+ const now = new Date();
+ const tomorrowUTC = new Date(Date.UTC(now.getUTCFullYear(), now.getUTCMonth(), now.getUTCDate() + 1));
+ tomorrowUTC.setUTCHours(0, 0, 0, 0);
+ return tomorrowUTC.getTime();
+}
+
+export function getUTCDateString(dateObj) {
+ const year = dateObj.getUTCFullYear();
+ const month = (dateObj.getUTCMonth() + 1).toString().padStart(2, '0');
+ const day = dateObj.getUTCDate().toString().padStart(2, '0');
+ return `${year}-${month}-${day}`;
+}
+
+export function getUTCDayOfYear(date) {
+ const startOfYear = Date.UTC(date.getUTCFullYear(), 0, 0);
+ const diff = date.getTime() - startOfYear;
+ return Math.floor(diff / C.MILLISECONDS_PER_DAY);
+}
+
+export function formatCountdown(ms) {
+ if (ms <= 0) { return "00:00:00"; }
+
+ const days = Math.floor(ms / C.MILLISECONDS_PER_DAY);
+ ms %= C.MILLISECONDS_PER_DAY;
+ const hours = Math.floor(ms / C.MILLISECONDS_PER_HOUR);
+ ms %= C.MILLISECONDS_PER_HOUR;
+ const minutes = Math.floor(ms / C.MILLISECONDS_PER_MINUTE);
+ ms %= C.MILLISECONDS_PER_MINUTE;
+ const seconds = Math.floor(ms / C.MILLISECONDS_PER_SECOND);
+
+ const pad = (num) => String(num).padStart(2, '0');
+
+ if (days > 0) {
+ return `${days}d ${pad(hours)}:${pad(minutes)}:${pad(seconds)}`;
+ }
+ return `${pad(hours)}:${pad(minutes)}:${pad(seconds)}`;
+}
+
+/** Returns the duration in milliseconds of the given "duration string".
+ * Duration strings look like "14d 5h 20m 15s", for number of days, hours
+ * minutes, and seconds. All parts are optional. Spaces are optional.
+ * Case insensitive. Integers only.
+ */
+export function parseDuration(str) {
+ if (!str || typeof str !== "string") {return undefined;}
+
+ const map = {
+ "d": C.MILLISECONDS_PER_DAY,
+ "h": C.MILLISECONDS_PER_HOUR,
+ "m": C.MILLISECONDS_PER_MINUTE,
+ "s": C.MILLISECONDS_PER_SECOND
+ };
+ return str.toLowerCase().matchAll(/((\d+)([a-z]))/g).toArray().reduce((acc, curr) => {
+ const n = parseInt(curr[2]);
+ let mult;
+ if (Object.hasOwn(map, curr[3])) {
+ mult = map[curr[3]];
+ } else {
+ console.warn(`unknown time multiplier '${curr[3]}'. Skipping "${curr[1]}" in "${str}"`);
+ mult = 0;
+ }
+ return acc + (n * mult);
+ }, 0);
+}
+
+/** returns whether the given date is in Daylight Saving Time in the named timezone */
+export function isDst(date, timezone) {
+ if (typeof date === "undefined" || Number.isNaN(date)) {return undefined;}
+ if (typeof date === "number" || typeof date === "string") {date = new Date(date);}
+
+ const dateFormat = Intl.DateTimeFormat("en-CA", {timeZone: timezone, timeZoneName: "shortOffset"});
+
+ function wholeHourOffset(d) {
+ // returns the whole hour part of the UTC offset as an integer.
+ // note the existence of fractional timezones (India, Central Australia, Newfoundland, etc.)
+ const timeZoneName = dateFormat.formatToParts(d).find((p) => p.type === "timeZoneName").value;
+ return parseInt(timeZoneName.replace("GMT", "").split(":")[0], 10);
+ }
+
+ const year = date.getUTCFullYear();
+ const janOffset = wholeHourOffset(new Date(Date.UTC(year, 0, 1)));
+ const julOffset = wholeHourOffset(new Date(Date.UTC(year, 6, 1)));
+ if (janOffset === julOffset) {return false;}
+ const currentOffset = wholeHourOffset(date);
+ const dstOffset = Math.max(janOffset, julOffset);
+ return currentOffset === dstOffset;
+}
+
+/** calculates the cycleNumber (number of resets since the reference time) of the given task at the given time (a Date object or timestamp) */
+export function calcCycleNumber(task, time) {
+ time = new Date(time);
+ const ref = new Date(task.ref || 0);
+ const period = parseDuration(task.period);
+ let diff = time.getTime() - ref.getTime();
+ if (task.observesDst && isDst(time, C.SERVER_TIMEZONE)) {
+ diff += C.MILLISECONDS_PER_HOUR;
+ }
+ return Math.floor(diff / period);
+}
+
+export function makeInfoLineItem(task, prop, iconToolTip, icon) {
+ if (task[prop]) {
+ return `${icon}${task[prop]}`;
+ } else {
+ return "";
+ }
+}
+
+/** Calculate the next task time(s) from the given task at the given date */
+export function calcTaskTimes(task, date) {
+ date = new Date(date);
+ const ref = new Date(task.ref || 0);
+ const period = parseDuration(task.period);
+ const cycleNumber = calcCycleNumber(task, date);
+ const prevResetTimestamp = ref.getTime() + (cycleNumber * period);
+ let nextResetTimestamp = prevResetTimestamp + period;
+ let thisCycleLeaveTimestamp = prevResetTimestamp + parseDuration(task.duration);
+
+ if (task.observesDst) {
+ if (isDst(nextResetTimestamp, C.SERVER_TIMEZONE)) {nextResetTimestamp -= C.MILLISECONDS_PER_HOUR;}
+ if (isDst(thisCycleLeaveTimestamp, C.SERVER_TIMEZONE)) {thisCycleLeaveTimestamp -= C.MILLISECONDS_PER_HOUR;}
+ }
+
+ let isAvailable = true;
+ if (task.duration) {isAvailable = (date.getTime() < thisCycleLeaveTimestamp);}
+
+ return {nextResetTimestamp, thisCycleLeaveTimestamp, isAvailable};
+}
diff --git a/sources/js/icons.js b/sources/js/icons.js
index 29392e3..deb7ba7 100644
--- a/sources/js/icons.js
+++ b/sources/js/icons.js
@@ -1,12 +1,12 @@
// Icons from https://heroicons.com/
-const chevronDownOutline = `
-