mirror of
https://github.com/liyunze-coding/Chat-Task-Tic-Overlay.git
synced 2026-08-24 10:04:00 -05:00
added JSDocs
This commit is contained in:
liyunze
+189
-40
@@ -14,6 +14,10 @@ DB structure:
|
||||
|
||||
const responses = configs.responses;
|
||||
|
||||
/**
|
||||
* Loads a specified Google Font using the WebFont loader.
|
||||
* @param {string} font - The name of the Google Font to load.
|
||||
*/
|
||||
function loadGoogleFont(font) {
|
||||
WebFont.load({
|
||||
google: {
|
||||
@@ -22,13 +26,21 @@ function loadGoogleFont(font) {
|
||||
});
|
||||
}
|
||||
|
||||
// convert taskListBorderColor to task-list-border-color
|
||||
/**
|
||||
* Converts a camelCase name to a CSS variable format.
|
||||
* @param {string} name - The camelCase name to be converted.
|
||||
* @returns {string} The converted name in CSS variable format.
|
||||
*/
|
||||
function convertToCSSVar(name) {
|
||||
let cssVar = name.replace(/([A-Z])/g, "-$1").toLowerCase();
|
||||
return `--${cssVar}`;
|
||||
}
|
||||
|
||||
// import styles from configs
|
||||
/**
|
||||
* Imports styles from the configs object and applies them to the document.
|
||||
* This function also handles the loading of Google Fonts and the display setting of the task count.
|
||||
* @throws {TypeError} If the styles or settings properties are not found in the configs object.
|
||||
*/
|
||||
function importStyles() {
|
||||
const styles = configs.styles;
|
||||
|
||||
@@ -39,7 +51,13 @@ function importStyles() {
|
||||
return !style.includes("Background");
|
||||
});
|
||||
|
||||
const backgroundStyles = ["taskList", "header", "body", "task", "checkBox"];
|
||||
const backgroundStyles = [
|
||||
"taskList",
|
||||
"header",
|
||||
"body",
|
||||
"task",
|
||||
"checkBox",
|
||||
];
|
||||
|
||||
stylesToImport.forEach((style) => {
|
||||
document.documentElement.style.setProperty(
|
||||
@@ -68,6 +86,11 @@ function importStyles() {
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Sets up the local storage for the application.
|
||||
* If the local storage does not already contain the 'usernames_id' and 'tasks' items,
|
||||
* it initializes them with empty JSON objects.
|
||||
*/
|
||||
function setupDB() {
|
||||
if (!localStorage.usernames_id) {
|
||||
localStorage.setItem(`usernames_id`, "{}");
|
||||
@@ -77,24 +100,48 @@ function setupDB() {
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Resets the local storage for the application.
|
||||
* This function clears the local storage and then sets it up again using the setupDB function.
|
||||
*/
|
||||
function resetDB() {
|
||||
localStorage.clear();
|
||||
setupDB();
|
||||
}
|
||||
|
||||
/**
|
||||
* Clears all tasks from the task list.
|
||||
* This function resets the database and then re-renders the task list.
|
||||
*/
|
||||
function clearAllTasks() {
|
||||
resetDB();
|
||||
renderTaskList();
|
||||
}
|
||||
|
||||
/**
|
||||
* Retrieves the list of tasks from local storage.
|
||||
* @returns {Object[]} An array of task objects parsed from JSON stored in local storage.
|
||||
* @throws {SyntaxError} If the stored tasks cannot be parsed into JSON.
|
||||
*/
|
||||
function getTasks() {
|
||||
return JSON.parse(localStorage.tasks);
|
||||
}
|
||||
|
||||
/**
|
||||
* Saves the current state of tasks to local storage.
|
||||
* @param {Object[]} tasks - An array of task objects to be saved.
|
||||
*/
|
||||
function saveTasks(tasks) {
|
||||
localStorage.setItem(`tasks`, JSON.stringify(tasks));
|
||||
}
|
||||
|
||||
/**
|
||||
* Retrieves the ID associated with a given username from local storage.
|
||||
* If the username does not exist in local storage, it is added with an ID of 0.
|
||||
* @param {string} username - The username for which to retrieve the ID.
|
||||
* @returns {number} The ID associated with the given username.
|
||||
* @throws {SyntaxError} If the stored usernames_id cannot be parsed into JSON.
|
||||
*/
|
||||
function getID(username) {
|
||||
let id = 0;
|
||||
let usernames_id = JSON.parse(localStorage.usernames_id);
|
||||
@@ -108,6 +155,12 @@ function getID(username) {
|
||||
return id;
|
||||
}
|
||||
|
||||
/**
|
||||
* Increments the ID associated with a given username in local storage by a specified value.
|
||||
* @param {string} username - The username for which to increment the ID.
|
||||
* @param {number} value - The value by which to increment the ID.
|
||||
* @throws {SyntaxError} If the stored usernames_id cannot be parsed into JSON.
|
||||
*/
|
||||
function incrementID(username, value) {
|
||||
let newID = getID(username) + value;
|
||||
let usernames_id = JSON.parse(localStorage.usernames_id);
|
||||
@@ -115,6 +168,12 @@ function incrementID(username, value) {
|
||||
localStorage.setItem(`usernames_id`, JSON.stringify(usernames_id));
|
||||
}
|
||||
|
||||
/**
|
||||
* Renders the count of total and completed tasks in the task list.
|
||||
* This function retrieves the tasks from local storage, counts the total number of tasks and the number of completed tasks,
|
||||
* and then updates the inner text of the element with the ID 'task-count' to reflect these counts.
|
||||
* @throws {SyntaxError} If the stored tasks cannot be parsed into JSON.
|
||||
*/
|
||||
function renderTaskCount() {
|
||||
let tasks = getTasks();
|
||||
|
||||
@@ -133,6 +192,13 @@ function renderTaskCount() {
|
||||
taskCount.innerText = `${completedTasksCount}/${totalTasksCount}`;
|
||||
}
|
||||
|
||||
/**
|
||||
* Renders the task list in the DOM.
|
||||
* This function retrieves the tasks from local storage, filters them based on the showDoneTasks setting,
|
||||
* reverses their order if the reverseOrder setting is true, and then adds each task to the DOM.
|
||||
* After all tasks have been added, it calls the renderTaskCount function to update the task count.
|
||||
* @throws {SyntaxError} If the stored tasks cannot be parsed into JSON.
|
||||
*/
|
||||
function renderTaskList() {
|
||||
let tasks = getTasks();
|
||||
|
||||
@@ -175,7 +241,17 @@ function renderTaskList() {
|
||||
renderTaskCount();
|
||||
}
|
||||
|
||||
// adding task to DOM
|
||||
/**
|
||||
* Adds a task to the DOM.
|
||||
* This function creates a new task element and appends it to the task list in the DOM.
|
||||
* The task element includes a checkbox or bullet point, the username of the task creator, a colon, and the task text.
|
||||
* The checkbox is checked and the task text is crossed out if the task is completed.
|
||||
* The color of the username is set to the userColor parameter if the usernameColor setting is not set.
|
||||
* @param {string} username - The username of the task creator.
|
||||
* @param {string} userColor - The color to be used for the username text.
|
||||
* @param {string} task - The text of the task.
|
||||
* @param {boolean} completed - Whether the task is completed.
|
||||
*/
|
||||
function addTasksToDom(username, userColor, task, completed) {
|
||||
let taskList = document.getElementsByClassName("task-container")[0];
|
||||
|
||||
@@ -244,7 +320,12 @@ function addTasksToDom(username, userColor, task, completed) {
|
||||
taskList.appendChild(newTask);
|
||||
}
|
||||
|
||||
// return true if pending, else false
|
||||
/**
|
||||
* Checks if a user has a task that is not done.
|
||||
* @param {string} username - The username of the user to check.
|
||||
* @returns {boolean} Returns true if the user has a task that is not done, false otherwise.
|
||||
* @throws {SyntaxError} If the stored tasks cannot be parsed into JSON.
|
||||
*/
|
||||
function userHasTask(username) {
|
||||
let tasks = getTasks();
|
||||
let id = getID(username);
|
||||
@@ -256,7 +337,15 @@ function userHasTask(username) {
|
||||
return !tasks[`${username}-${id}`].done;
|
||||
}
|
||||
|
||||
// user adding task
|
||||
/**
|
||||
* Adds a task to the task list.
|
||||
* This function retrieves the tasks from local storage, adds a new task to the tasks object with a key of the format 'username-id',
|
||||
* saves the tasks back to local storage, and then re-renders the task list.
|
||||
* @param {string} username - The username of the user who is adding the task.
|
||||
* @param {string} userColor - The color to be used for the username text.
|
||||
* @param {string} task - The text of the task.
|
||||
* @throws {SyntaxError} If the stored tasks cannot be parsed into JSON.
|
||||
*/
|
||||
function addTask(username, userColor, task) {
|
||||
let tasks = getTasks();
|
||||
let id = getID(username);
|
||||
@@ -274,7 +363,14 @@ function addTask(username, userColor, task) {
|
||||
console.log(`@${username} Task added! `);
|
||||
}
|
||||
|
||||
// user completing task
|
||||
/**
|
||||
* Marks a task as done.
|
||||
* This function retrieves the tasks from local storage, marks the task associated with the given username and ID as done,
|
||||
* increments the ID associated with the username, saves the tasks back to local storage, and then re-renders the task list.
|
||||
* @param {string} username - The username of the user who completed the task.
|
||||
* @returns {string} The text of the task that was marked as done.
|
||||
* @throws {SyntaxError} If the stored tasks cannot be parsed into JSON.
|
||||
*/
|
||||
function doneTask(username) {
|
||||
let id = getID(username);
|
||||
let tasks = getTasks();
|
||||
@@ -292,7 +388,14 @@ function doneTask(username) {
|
||||
return finishedTask;
|
||||
}
|
||||
|
||||
// user removing task
|
||||
/**
|
||||
* Removes a task from the task list.
|
||||
* This function retrieves the tasks from local storage, removes the task associated with the given username and ID,
|
||||
* decrements the ID associated with the username, saves the tasks back to local storage, and then re-renders the task list.
|
||||
* @param {string} username - The username of the user who removed the task.
|
||||
* @returns {string} The text of the task that was removed.
|
||||
* @throws {SyntaxError} If the stored tasks cannot be parsed into JSON.
|
||||
*/
|
||||
function removeTask(username) {
|
||||
let id = getID(username);
|
||||
let tasks = getTasks();
|
||||
@@ -310,7 +413,14 @@ function removeTask(username) {
|
||||
return removedTask;
|
||||
}
|
||||
|
||||
// user editing task
|
||||
/**
|
||||
* Edits the text of a task.
|
||||
* This function retrieves the tasks from local storage, edits the task associated with the given username and ID,
|
||||
* saves the tasks back to local storage, and then re-renders the task list.
|
||||
* @param {string} username - The username of the user who edited the task.
|
||||
* @param {string} task - The new text of the task.
|
||||
* @throws {SyntaxError} If the stored tasks cannot be parsed into JSON.
|
||||
*/
|
||||
function editTask(username, task) {
|
||||
let tasks = getTasks();
|
||||
let id = getID(username);
|
||||
@@ -324,7 +434,15 @@ function editTask(username, task) {
|
||||
console.log(`@${username} Task edited! `);
|
||||
}
|
||||
|
||||
// user finish task + add task
|
||||
/**
|
||||
* Marks the next task as done and adds a new task to the task list.
|
||||
* This function calls the doneTask function to mark the next task of the given username as done,
|
||||
* then calls the addTask function to add a new task to the task list.
|
||||
* @param {string} username - The username of the user who is performing the actions.
|
||||
* @param {string} userColor - The color to be used for the username text.
|
||||
* @param {string} task - The text of the new task.
|
||||
* @returns {string} The text of the task that was marked as done.
|
||||
*/
|
||||
function nextTask(username, userColor, task) {
|
||||
let finishedTask = doneTask(username);
|
||||
addTask(username, userColor, task);
|
||||
@@ -332,7 +450,14 @@ function nextTask(username, userColor, task) {
|
||||
return finishedTask;
|
||||
}
|
||||
|
||||
// checks user last task
|
||||
/**
|
||||
* Checks if a task exists for a given username and ID.
|
||||
* This function retrieves the ID associated with the given username and the tasks from local storage,
|
||||
* and then checks if a task exists with a key of the format 'username-id'.
|
||||
* @param {string} username - The username of the user to check.
|
||||
* @returns {string} The text of the task if it exists, an empty string otherwise.
|
||||
* @throws {SyntaxError} If the stored tasks or usernames_id cannot be parsed into JSON.
|
||||
*/
|
||||
function checkTask(username) {
|
||||
// remove @ in username if it exists
|
||||
if (username[0] === "@") {
|
||||
@@ -349,7 +474,13 @@ function checkTask(username) {
|
||||
}
|
||||
}
|
||||
|
||||
// admin delete all tasks of user
|
||||
/**
|
||||
* Deletes all tasks associated with a given username.
|
||||
* This function retrieves the tasks from local storage, removes all tasks associated with the given username,
|
||||
* resets the ID associated with the username to 0, saves the tasks back to local storage, and then re-renders the task list.
|
||||
* @param {string} username - The username of the user whose tasks are to be deleted.
|
||||
* @throws {SyntaxError} If the stored tasks or usernames_id cannot be parsed into JSON.
|
||||
*/
|
||||
function adminDeleteTask(username) {
|
||||
// remove @ in username if it exists
|
||||
if (username[0] === "@") {
|
||||
@@ -378,7 +509,12 @@ function adminDeleteTask(username) {
|
||||
console.log(`@${username} Tasks deleted! `);
|
||||
}
|
||||
|
||||
// delete all completed tasks
|
||||
/**
|
||||
* Deletes all completed tasks from the task list.
|
||||
* This function retrieves the tasks from local storage, removes all tasks that are marked as done,
|
||||
* saves the tasks back to local storage, re-renders the task list, and restarts the animation.
|
||||
* @throws {SyntaxError} If the stored tasks cannot be parsed into JSON.
|
||||
*/
|
||||
function cleardone() {
|
||||
let tasks = getTasks();
|
||||
|
||||
@@ -395,12 +531,25 @@ function cleardone() {
|
||||
console.log(`Completed tasks deleted! `);
|
||||
}
|
||||
|
||||
// sleep function
|
||||
/**
|
||||
* Pauses execution for a specified number of milliseconds.
|
||||
* @param {number} ms - The number of milliseconds to pause execution for.
|
||||
* @returns {Promise} A promise that resolves after the specified number of milliseconds.
|
||||
*/
|
||||
function sleep(ms) {
|
||||
return new Promise((resolve) => setTimeout(resolve, ms));
|
||||
}
|
||||
|
||||
// scroll up and down
|
||||
/**
|
||||
* Animates the task list by scrolling it up and down.
|
||||
* This function calculates the height of the task container and the task wrapper,
|
||||
* the vertical padding of the task wrapper, and the final height for the animation.
|
||||
* It then creates a keyframes object for the animation, creates a new animation object, and plays the animation.
|
||||
* After the animation finishes, it calls itself recursively to continue the animation.
|
||||
* If the final height for the animation is less than 15, it waits for a delay before calling itself recursively.
|
||||
* @throws {TypeError} If the task container or task wrapper cannot be found.
|
||||
* @throws {SyntaxError} If the stored configs cannot be parsed into JSON.
|
||||
*/
|
||||
async function animate() {
|
||||
// task container height
|
||||
let taskContainer = document.getElementsByClassName("task-container")[0];
|
||||
@@ -452,7 +601,11 @@ async function animate() {
|
||||
}
|
||||
}
|
||||
|
||||
// cancel animation for restart (when clearing done, many tasks get cleared)
|
||||
/**
|
||||
* Restarts the animation of the task list.
|
||||
* This function retrieves the animation object of the task container, cancels the animation, and then calls the animate function to start a new animation.
|
||||
* @throws {TypeError} If the task container cannot be found or if it does not have an animation.
|
||||
*/
|
||||
function restartAnimation() {
|
||||
// get animation object
|
||||
let animation = document
|
||||
@@ -465,21 +618,12 @@ function restartAnimation() {
|
||||
animate();
|
||||
}
|
||||
|
||||
// tests
|
||||
function oneLineTasks() {
|
||||
for (let i = 1; i <= 10; i++) {
|
||||
addTasksToDom(`RyanPython${i}`, "test task", false);
|
||||
}
|
||||
}
|
||||
|
||||
function oneLineDoneTasks() {
|
||||
for (let i = 1; i <= 10; i++) {
|
||||
addTask(`ryans_impostor`, "#fff", "test task");
|
||||
doneTask(`ryans_impostor`);
|
||||
}
|
||||
}
|
||||
|
||||
function multiUserLineTasks() {
|
||||
/**
|
||||
* Runs a series of tests on the task list.
|
||||
* This function creates a list of streamer usernames, and for each username, it adds a task to the task list and then marks it as done.
|
||||
* The tasks are added with a white color and a text of the format 'test task i', where i is the index of the username in the list.
|
||||
*/
|
||||
function tests() {
|
||||
let listOfStreamers = [
|
||||
`cloudydayzzz`,
|
||||
`berryspace`,
|
||||
@@ -504,13 +648,11 @@ function multiUserLineTasks() {
|
||||
}
|
||||
}
|
||||
|
||||
function tests() {
|
||||
// oneLineTasks();
|
||||
multiUserLineTasks();
|
||||
// oneLineDoneTasks();
|
||||
}
|
||||
|
||||
// hex to rgb that accepts 3 or 6 digits
|
||||
/**
|
||||
* Converts a hex color to an rgb color.
|
||||
* @param {string} hex - The hex color to be converted.
|
||||
* @returns {string} The converted rgb color.
|
||||
*/
|
||||
function hexToRgb(hex) {
|
||||
// remove # if present
|
||||
if (hex[0] === "#") {
|
||||
@@ -542,7 +684,10 @@ function hexToRgb(hex) {
|
||||
}
|
||||
|
||||
let currentTitle = 0;
|
||||
// interval the task title
|
||||
|
||||
/*
|
||||
Title cycle
|
||||
*/
|
||||
setInterval(async () => {
|
||||
let taskTitle = document.getElementById("title");
|
||||
|
||||
@@ -569,7 +714,11 @@ setInterval(async () => {
|
||||
taskTitle.classList.remove("fade");
|
||||
}, 8000);
|
||||
|
||||
// on window load
|
||||
/**
|
||||
* Runs when the window loads.
|
||||
*
|
||||
* This function imports styles, sets up the local storage, renders the task list, and starts the animation.
|
||||
*/
|
||||
window.onload = function () {
|
||||
importStyles();
|
||||
// resetDB();
|
||||
|
||||
Reference in New Issue
Block a user