feat(command): add !focus command

Author: jujoco

README.md

@@ -189,7 +189,7 @@ Open the `_styles.js` file and modify the following settings to customized the T
 - headerDisplay: Default = **"flex"**
 - headerBorderRadius: Default = **"6px"**
 - headerMarginBottom: Default = **"6px"**
-- headerBackgroundColor: Default = **"rgba(45, 45, 45, 0.7)"**
+- headerBackgroundColor: Default = **"rgba(0, 0, 0, 0.7)"**
 - headerFontSize: Default = **"20px"**
 - headerFontColor: Default = **"#FFFFFF"**
 - headerFontWeight: Default = **"normal"**
@@ -198,7 +198,7 @@ Open the `_styles.js` file and modify the following settings to customized the T
 
 - cardGapBetween: Default = **"6px"**
 - cardBorderRadius: Default = **"6px"**
-- cardBackgroundColor: Default = **"rgba(45, 45, 45, 0.7)"**
+- cardBackgroundColor: Default = **"rgba(0, 0, 0, 0.7)"**
 
 #### Username Styles
 
@@ -214,6 +214,9 @@ Open the `_styles.js` file and modify the following settings to customized the T
 - taskDoneFontColor: Default = **"#aaaaaa"**
 - taskDoneFontStyle: Default = **"#italic"**
 - taskDoneTextDecoration: Default = **"line-through"**
+- taskFocusFontColor: Default = **"#111111"**
+- taskFocusBackgroundColor: Default = **"rgba(255, 255, 255, 0.7)"**
+- taskFocusBorderRadius: Default = **"8px"**
 
 ## Commands
 

_configUser.js

@@ -8,6 +8,7 @@ const _userConfig = {
     editTask: ["!edit", "!editar", "!modifier", "!編集", "!редагувати"],
     finishTask: ["!done", "!hecho", "!terminé", "!完了", "!готово"],
     deleteTask: ["!delete", "!eliminar", "!supprimer", "!削除", "!видалити"],
+    focusTask: ["!focus", "!focalizar", "!concentrer", "!集中", "!зосередитись"],
     check: ["!check", "!comprobar", "!vérifier", "!チェック", "!перевірити"],
     help: ["!help", "!ayuda", "!aide", "!ヘルプ", "!допомога"],
     additional: ["!credit", "!crédito", "!crédit", "!クレジット", "!кредит"],
@@ -19,6 +20,7 @@ const _userConfig = {
       finishTask: 'Good job on completing task(s) {message}!',
       deleteTask: 'Task(s) {message} has been deleted!',
       deleteAll: "All of your tasks have been deleted!",
+      focusTask: 'Prioritizing your focus on task {message}!',
       check: 'Your current task(s) are: {message}',
       help: "Try these commands - !task !edit !done !delete !check",
       additional:
@@ -34,6 +36,7 @@ const _userConfig = {
       finishTask: '¡Buen trabajo completando la(s) tarea(s) {message}!',
       deleteTask: 'La(s) tarea(s) {message} ha sido eliminada(s)!',
       deleteAll: "Todas tus tareas han sido eliminadas!",
+      focusTask: 'Priorizando tu enfoque en la tarea {message}!',
       check: 'Tus tareas actuales son: {message}',
       help: "Prueba a usar estos comandos - !añadir !editar !hecho !eliminar !comprobar",
       additional:
@@ -49,6 +52,7 @@ const _userConfig = {
       finishTask: 'Bon travail pour avoir terminé la tâche {message}!',
       deleteTask: 'La tâche {message} a été supprimée!',
       deleteAll: "Toutes vos tâches ont été supprimées!",
+      focusTask: 'Priorisation de votre focus sur la tâche {message}!',
       check: 'Vos tâches actuelles sont: {message}',
       help: "Essayez d'utiliser ces commandes - !ajouter !modifier !terminé !supprimer !vérifier",
       additional:
@@ -65,6 +69,7 @@ const _userConfig = {
       finishTask: 'タスク {message} を完了しました!',
       deleteTask: 'タスク {message} が削除されました!',
       deleteAll: "すべてのタスクが削除されました!",
+      focusTask: 'タスク {message} にフォーカスを当てています!',
       check: '現在のタスクは {message} です',
       help: "これらのコマンドを試してみてください - !追加 !編集 !完了 !削除 !チェック",
       additional:
@@ -80,6 +85,7 @@ const _userConfig = {
       finishTask: 'Вітаю з виконанням завдання {message}!',
       deleteTask: 'Завдання {message} видалено!',
       deleteAll: "Всі твої завдання видалено!",
+      focusTask: 'Сфокусовано на завданні {message}!',
       check: 'Твої завдання наразі : {message}',
       help: "Спробуй такі команди -!додати !редагувати !готово !видалити !перевірити",
       additional:

_styles.js

@@ -42,4 +42,8 @@ const _styles = {
   taskDoneFontColor: "#b0b0b0", // hex value
   taskDoneFontStyle: "italic", // "italic" or "normal"
   taskDoneTextDecoration: "line-through", // "line-through" or "none"
+
+  taskFocusFontColor: "#111111", // hex value
+  taskFocusBackgroundColor: "rgba(255, 255, 255, 0.7)", // rgba value https://rgbcolorpicker.com/
+  taskFocusBorderRadius: "8px", // hex value
 };

dist/taskBot.iife.js

@@ -61,6 +61,9 @@ export default class App {
 				if (task.isComplete()) {
 					listItem.classList.add("done");
 				}
+				if (task.isFocused()) {
+					listItem.classList.add("focus");
+				}
 				list.appendChild(listItem);
 			});
 			fragment.appendChild(cardEl);
@@ -301,6 +304,14 @@ export default class App {
 				responseDetail = taskNumber;
 				template = _userConfig.responseTo[this.#languageCode].editTask;
 			}
+			else if (_userConfig.commands.focusTask.includes(command)) {
+				// FOCUS TASK
+				const taskIndex = parseTaskIndex(message);
+				const task = this.userList.focusUserTask(username, taskIndex);
+				this.focusTaskFromDOM(username, task.id);
+				responseDetail = (taskIndex + 1).toString();
+				template = _userConfig.responseTo[this.#languageCode].focusTask;
+			}
 			else if (_userConfig.commands.finishTask.includes(command)) {
 				// COMPLETE/DONE TASK
 				const indices = message.split(",").reduce((acc, i) => {
@@ -476,6 +487,22 @@ export default class App {
 		this.renderTaskCount();
 	}
 
+	/**
+	 * Mark task as focused in the DOM. 
+	 * @param {string} username
+	 * @param {string} taskId
+	 * @returns {void}
+	 */
+	focusTaskFromDOM(username, taskId) {
+		document.querySelectorAll(`[data-user="${username}"] .task`).forEach(task => {
+			task.classList.remove("focus");
+		});
+
+		document.querySelectorAll(`[data-task-id="${taskId}"]`).forEach(task => {
+			task.classList.add("focus");
+		});
+	}
+
 	/**
 	 * Delete the task in the DOM
 	 * @param {string} taskId

src/app.js

@@ -3,10 +3,13 @@
  * @property {string} description - The description of the task.
  * @property {number} id - The id of the task.
  * @property {boolean} completionStatus - Indicates whether the task is complete or not.
+ * @property {boolean} focusStatus - Indicates whether the task is focused or not.
  * @method validateDescription - Validate the description of the task.
  * @method setDescription - Set the description of the task.
  * @method isComplete - Get the completion status of the task.
  * @method setCompletionStatus - Set the status of the task.
+ * @method isFocused - Get the focus status of the task.
+ * @method setFocusStatus - Set the focus status of the task.
  * @returns {Task}
  */
 export default class Task {
@@ -18,6 +21,7 @@ export default class Task {
 		this.description = this.validateDescription(description);
 		this.id = this.#assignId();
 		this.completionStatus = false;
+		this.focusStatus = false;
 	}
 
 	/**
@@ -80,4 +84,23 @@ export default class Task {
 		}
 		this.completionStatus = status;
 	}
+
+	/**
+	 * Get the focus status of the task.
+	 * @returns {boolean} The focus status of the task.
+	 */
+	isFocused() {
+		return this.focusStatus;
+	}
+
+	/**
+	 * Set the focus status of the task.
+	 * @param {boolean} status - The new focus status of the task.
+	 */
+	setFocusStatus(status) {
+		if (typeof status !== "boolean") {
+			throw new Error("Focus status must be of type boolean");
+		}
+		this.focusStatus = status;
+	}
 }

src/classes/Task.js

@@ -8,6 +8,7 @@
  * @method addTask - Add tasks to the user
  * @method editTask - Edit the task at the specified index
  * @method completeTask - Mark the task at index as complete
+ * @method setFocusedTask - Mark the task at index as focused
  * @method deleteTask - Delete the task at the specified index
  * @method removeCompletedTasks - Remove all completed tasks
  * @method getTask - Get the task at the specified index
@@ -82,6 +83,23 @@ export default class User {
 		return null;
 	}
 
+	/**
+	 * Mark the task at the specified index as focused
+	 * @param {number} index - The index of the task to focus
+	 * @returns {Task | null} The task that was focused
+	 */
+	setFocusedTask(index) {
+		let task = this.getTask(index);
+		if (task) {
+			this.tasks.forEach((t) => {
+				t.setFocusStatus(false);
+			});
+			task.setFocusStatus(true);
+			return task;
+		}
+		return null;
+	}
+
 	/**
 	 * Delete the task at the specified index
 	 * @param {number | number[]} indices - The indices of the tasks to delete

src/classes/User.js

@@ -12,6 +12,7 @@ import Task from "./Task.js";
  * @method addUserTasks - Add a tasks to the specified user
  * @method editUserTask - Edit the task at the specified index
  * @method completeUserTasks - Mark specified tasks as complete
+ * @method focusUserTasks - Mark specified tasks as focused
  * @method deleteUserTasks - Delete tasks at specified indices
  * @method checkUserTasks - Get remaining tasks
  * @method clearUserList - Clear user list
@@ -52,6 +53,9 @@ export default class UserList {
 						newTask.setCompletionStatus(task.completionStatus);
 						this.tasksCompleted++;
 					}
+					if (task.focusStatus) {
+						newTask.setFocusStatus(task.focusStatus);
+					}
 				});
 				userList.push(user);
 			});
@@ -148,6 +152,26 @@ export default class UserList {
 		return task;
 	}
 
+	/**
+	 * Mark user task as focused
+	 * @param {string} username - The username of the user
+	 * @param {number} taskIndex - The index of the task to focus
+	 * @throws {Error} User not found
+	 * @returns {Task} The focused task
+	 */
+	focusUserTask(username, taskIndex) {
+		const user = this.getUser(username);
+		if (!user) {
+			throw new Error(`User ${username} not found`);
+		}
+		const task = user.setFocusedTask(taskIndex);
+		if (!task) {
+			throw new Error(`Task ${taskIndex} not found`);
+		}
+		this.#commitToLocalStorage();
+		return task;
+	}
+
 	/**
 	 * Mark the user tasks as complete
 	 * @param {string} username - The username of the user

src/classes/UserList.js

@@ -86,6 +86,11 @@
 	font-weight: var(--task-font-weight, normal);
 }
 
+.task.focus {
+	background-color: var(--task-focus-background-color, #aaaaaa);
+	color: var(--task-focus-font-color, #111111);
+	border-radius: var(--task-focus-boarder-radius, 8px);
+}
 .done {
 	color: var(--task-done-font-color, #aaaaaa);
 	text-decoration-line: var(--task-done-text-decoration, none);

styles/app.css

@@ -38,4 +38,7 @@
 	--task-done-font-color: #aaaaaa;
 	--task-done-font-style: italic;
 	--task-done-text-decoration: line-through;
-}
+	--task-focus-font-color: #111111;
+	--task-focus-background-color: rgba(255, 255, 255, 0.7);
+	--task-focus-border-radius: 8px;
+}

styles/variables.css

@@ -79,4 +79,25 @@ describe("Task", () => {
 			);
 		});
 	});
+
+	describe("isFocused", () => {
+		it("should return the focus status of the task", () => {
+			expect(task.isFocused()).toBe(false);
+		});
+	});
+
+	describe("setFocusStatus", () => {
+		it("should set the focus status of the task", () => {
+			task.setFocusStatus(true);
+			expect(task.isFocused()).toBe(true);
+			task.setFocusStatus(false);
+			expect(task.isFocused()).toBe(false);
+		});
+
+		it("should return Error if status is not a boolean", () => {
+			expect(() => task.setFocusStatus("true")).toThrow(
+				"Focus status must be of type boolean"
+			);
+		});
+	});
 });

tests/Task.test.js

@@ -72,6 +72,20 @@ describe("User", () => {
 		});
 	});
 
+	describe("setFocusedTask", () => {
+		test("should mark the task at the specified index as focused", () => {
+			user.addTask(new Task("test task 1"));
+			user.setFocusedTask(0);
+			expect(user.getTasks()[0].isFocused()).toBe(true);
+		});
+
+		test("should return null if the task index is out of bounds", () => {
+			user.addTask(new Task("test task 1"));
+			const task = user.setFocusedTask(3);
+			expect(task).toBeNull();
+		});
+	});
+
 	describe("deleteTask", () => {
 		test("should be able to delete a single task given a single index number", () => {
 			user.addTask(new Task("test task 0"));

tests/User.test.js

@@ -25,6 +25,7 @@ const _userConfig = {
 		editTask: ["!edit", "!editar", "!modifier", "!編集", "!редагувати"],
 		finishTask: ["!done", "!hecho", "!terminé", "!完了", "!готово"],
 		deleteTask: ["!delete", "!eliminar", "!supprimer", "!削除", "!видалити"],
+		focusTask: ["!focus", "!focalizar", "!concentrer", "!集中", "!зосередитись"],
 		check: ["!check", "!comprobar", "!vérifier", "!チェック", "!перевірити"],
 		help: ["!help", "!ayuda", "!aide", "!ヘルプ", "!допомога"],
 		additional: ["!credit", "!crédito", "!crédit", "!クレジット", "!кредит"],
@@ -36,6 +37,7 @@ const _userConfig = {
 			finishTask: 'Good job on completing task(s) {message}!',
 			deleteTask: 'Task(s) {message} has been deleted!',
 			deleteAll: "All of your tasks have been deleted!",
+			focusTask: 'Prioritizing your focus on task {message}!',
 			check: 'Your current task(s) are: {message}',
 			help: "Try using these commands - !task !edit !done !delete, !check",
 			additional:

tests/globalSetup.js

@@ -46,6 +46,9 @@
  * @property {string} taskDoneFontColor - The task done font color
  * @property {string} taskDoneFontStyle - The task done font style
  * @property {string} taskDoneTextDecoration - The task done text decoration
+ * @property {string} taskFocusFontColor - The focus task font color
+ * @property {string} taskFocusBackgroundColor - The focus task background color
+ * @property {string} taskFocusBorderRadius - The focus task border radius
  */
 
 /**