updated with focus task

configs.js

@@ -15,7 +15,7 @@ const configs = (function () {
 	// STYLES
 	// task list
 	const taskListBackgroundColor = "#000000"; // hex only
-	const taskListBackgroundOpacity = 1; // 0.0 - 1.0
+	const taskListBackgroundOpacity = 0; // 0.0 - 1.0
 
 	const taskListBorderWidth = "0px"; // px
 	const taskListBorderColor = "#ffffff"; // hex or name
@@ -28,10 +28,10 @@ const configs = (function () {
 	const headerHorizontalPadding = "10px"; // px
 	const headerVerticalPadding = "10px"; // px
 
-	const headerBackgroundColor = "#000"; // hex only
+	const headerBackgroundColor = "#fff"; // hex only
 	const headerBackgroundOpacity = 1; // 0.0 - 1.0
 
-	const headerBorderWidth = "2px"; // px
+	const headerBorderWidth = "0px"; // px
 	const headerBorderColor = "#ffffff"; // hex or name
 	const headerBorderRadius = "3px"; // px
 
@@ -41,7 +41,7 @@ const configs = (function () {
 	const headerFontSize = "25px"; // px
 	const headerFontWeight = "bold"; // normal or bold or number
 
-	const headerFontColor = "#fff"; // hex or name
+	const headerFontColor = "#000"; // hex or name
 
 	// body
 	const bodyBackgroundColor = "#fff"; // hex only
@@ -75,6 +75,16 @@ const configs = (function () {
 	const taskHorizontalPadding = "20px"; // px
 	const taskVerticalPadding = "10px"; // px
 
+	// focus task
+	const focusTaskBackgroundColor = "#fff"; // hex only
+	const focusTaskBackgroundOpacity = 1; // 0.0 - 1.0
+	const focusTaskBorderRadius = "5px"; // px
+
+	const focusTaskFontColor = "#000"; // hex or name
+
+	const focusTaskHorizontalPadding = "7px"; // px
+	const focusTaskVerticalPadding = "0px"; // px
+
 	const titles = [
 		"!taskhelp",
 		"!task",
@@ -133,6 +143,12 @@ const configs = (function () {
 		taskMarginBottom,
 		taskHorizontalPadding,
 		taskVerticalPadding,
+		focusTaskBackgroundColor,
+		focusTaskBackgroundOpacity,
+		focusTaskBorderRadius,
+		focusTaskFontColor,
+		focusTaskHorizontalPadding,
+		focusTaskVerticalPadding,
 	};
 
 	const animation = {

scripts/index.js

@@ -7,6 +7,10 @@ function isMod(flags) {
 	return flags.broadcaster || flags.mod;
 }
 
+function isStreamer(flags) {
+	return flags.broadcaster;
+}
+
 ComfyJS.onCommand = (user, command, message, flags, extra) => {
 	command = `!${command.toLowerCase()}`;
 
@@ -35,14 +39,40 @@ ComfyJS.onCommand = (user, command, message, flags, extra) => {
 		}
 
 		clearUserTasks(mentioned);
+	} else if (commands.focusTaskCommands.includes(command)) {
+		let focusRequest = focusTask(user, message);
+
+		if (focusRequest.status !== 200) {
+			respond(focusRequest.body.error, params);
+			return;
+		}
+
+		// task focused
+		let focusedResponse = responses.taskFocused;
+
+		params.task = focusRequest.body.focusedTask;
+
+		respond(focusedResponse, params);
+	} else if (commands.unfocusTaskCommands.includes(command)) {
+		let unfocusRequest = unfocusTask(user);
+
+		if (unfocusRequest.status !== 200) {
+			respond(unfocusRequest.body.error, params);
+			return;
+		}
+
+		// task unfocused
+		let unfocusedResponse = responses.taskUnfocused;
+
+		respond(unfocusedResponse, params);
 	} else if (commands.adminClearDoneCommands.includes(command)) {
-		if (!isMod(flags)) {
+		if (!isStreamer(flags)) {
 			return;
 		} else {
 			clearAllDoneTasks();
 		}
 	} else if (commands.adminClearAllCommands.includes(command)) {
-		if (!isMod(flags)) {
+		if (!isStreamer(flags)) {
 			return;
 		} else {
 			clearAllTasks();
@@ -50,7 +80,7 @@ ComfyJS.onCommand = (user, command, message, flags, extra) => {
 	} else if (commands.clearMyDoneCommands.includes(command)) {
 		clearOwnDoneTasks(user);
 	} else if (commands.adminClearNotStreamerCommands.includes(command)) {
-		if (!isMod(flags)) {
+		if (!isStreamer(flags)) {
 			return;
 		} else {
 			clearAllExceptStreamer(auth.channel);

scripts/taskList.js

@@ -228,6 +228,99 @@ function addTask(username, userColor, task) {
 	};
 }
 
+// 0: user has no tasks
+// 1: invalid input
+// 200: success
+function focusTask(username, task) {
+	const tasks = JSON.parse(localStorage.tasks);
+
+	if (!tasks[username] || tasks[username].todos.length === 0) {
+		return;
+	}
+
+	const incompleteTasks = tasks[username].todos.filter((t) => !t.done);
+	if (incompleteTasks.length === 0) {
+		return;
+	}
+
+	if (task.includes(",")) {
+		return;
+	}
+
+	let index = tasks[username].todos.findIndex(
+		(t) => t.text.toLowerCase() === task.toLowerCase()
+	);
+
+	if (index === -1) {
+		if (isInt(task)) {
+			index = parseInt(task) - 1; // ACTUAL INDEX
+		} else if (incompleteTasks.length === 1) {
+			index = tasks[username].todos.findIndex((t) => !t.done);
+		} else {
+			return;
+		}
+
+		if (index < 0 || index > tasks[username].todos.length - 1) {
+			return;
+		}
+	} else {
+		if (tasks[username].todos[index].done) {
+			return;
+		}
+	}
+
+	let focusedTask = tasks[username].todos[index].text;
+
+	// if task is already focused, return 1
+	if (tasks[username].todos[index].focus) {
+		return;
+	}
+
+	// set all tasks to unfocused
+	for (const task of tasks[username].todos) {
+		task.focus = false;
+	}
+
+	// set task to focused
+	tasks[username].todos[index].focus = true;
+
+	localStorage.setItem(`tasks`, JSON.stringify(tasks));
+
+	if (!scrolling) {
+		renderTaskListToDOM();
+	}
+
+	return {
+		status: 200,
+		body: {
+			focusedTask: focusedTask,
+		},
+	};
+}
+
+// 0: user has no tasks
+// 1: invalid input
+// 200: success
+function unfocusTask(username) {
+	const tasks = JSON.parse(localStorage.tasks);
+
+	if (!tasks[username] || tasks[username].todos.length === 0) {
+		return;
+	}
+
+	// if no tasks are focused, return 1
+	if (!tasks[username].todos.find((t) => t.focus)) {
+		return;
+	}
+
+	// set all tasks to unfocused
+	for (const task of tasks[username].todos) {
+		task.focus = false;
+	}
+
+	localStorage.setItem(`tasks`, JSON.stringify(tasks));
+}
+
 // 0: user has no tasks
 // 1: invalid input
 // removed task: success
@@ -841,6 +934,8 @@ function renderTaskListToDOM() {
 				if (task.done) {
 					taskElement.classList.add("done");
 					completedTasksCount++;
+				} else if (task.focus) {
+					taskElement.classList.add("focus");
 				}
 
 				taskElement.innerText = task.text;

styles/taskList.css

@@ -116,4 +116,12 @@
 }
 #main-container .task-wrapper .task-container .task .user-tasks .done {
   text-decoration: line-through;
+}
+#main-container .task-wrapper .task-container .task .user-tasks .focus {
+  background: var(--focus-task-background-color);
+  color: var(--focus-task-font-color);
+  padding: var(--focus-task-vertical-padding) var(--focus-task-horizontal-padding);
+  border-radius: var(--focus-task-border-radius);
+  width: -moz-fit-content;
+  width: fit-content;
 }/*# sourceMappingURL=taskList.css.map */