fixed bugs and added new features

- updated README
- fixed username color bug
- added checkbox margin right

README.md

@@ -1,5 +1,9 @@
 # Chat-Task-Tic Overlay (Beta)
 
+<img src="./images/chat-task-tic-thumbnail_1.1.1.jpg" height="200" alt="Chat-Task-Tic Overlay Preview"/>
+
+---
+
 ## Commands
 
 -    !task \<task\> - Add a task
@@ -14,19 +18,10 @@
 -    !cleardone - Clear all done tasks
 -    !adel @user - Remove all tasks from a user
 
+For aliases, see [here](https://github.com/liyunze-coding/Chat-Task-Tic-Overlay#aliases)
+
 ---
 
-## Features
-
--    Add tasks
--    Remove tasks
--    Edit tasks
--    Mark tasks as done
--    Check your last task
--    Clear all tasks (mod only)
--    Clear all done tasks (mod only)
--    Remove all tasks from a user (mod only)
-
 ## Why you should use this
 
 -    Free
@@ -39,16 +34,54 @@ Note: It's only available on Twitch for now
 
 ---
 
+## For Twitch Task Overlay users (my old task list)
+
+If you are using my old task list, follow the steps below to migrate to this new version:
+
+Before:
+
+`scripts/index.js`:
+
+```javascript
+ComfyJS.Init("YOUR_CHANNEL_HERE", "oauth:OAUTH_TOKEN_HERE");
+
+// or
+
+ComfyJS.Init(
+	"YOUR_BOT_ACCOUNT_HERE",
+	"oauth:OAUTH_TOKEN_HERE",
+	"YOUR_CHANNEL_HERE"
+);
+```
+
+After:
+
+`auth.js`:
+
+```javascript
+const channel = "YOUR_TWITCH_CHANNEL";
+const username = "YOUR_BOT_ACCOUNT_HERE";
+const oauth = "OAUTH_TOKEN_HERE"; // do NOT include the 'oauth:' part
+```
+
+---
+
 ## Installation
 
 1. Install the zip or clone the repository
+
 2. Create a Twitch application [here](https://dev.twitch.tv/console/apps) \(Log in with your alternate Twitch account if you wish to use a different account as a bot account\)
+
 3. Copy the `Client ID` from the application
+
 4. Create token using `get_token.txt`. Replace `CLIENT_ID` with the `Client ID` from the application
+
 5. Setup authentication in `auth.js`
-6. Setup `Browser Source` in OBS with the following settings:
-     - Local file: `index.html`
-     - Refresh browser when scene becomes active: `checked`
+
+6. Setup `Browser Source` in OBS studio or other streaming software with the following settings:
+
+-    Local File: `checked`
+-    Local File: `index.html`
 
 ---
 
@@ -56,13 +89,15 @@ Note: It's only available on Twitch for now
 
 Edit `configs.js` to edit the style of the task list
 
+<img src="./images/labels.jpg" height="200" alt="Chat-Task-Tic Overlay Preview"/>
+
 ### Settings
 
 `showDoneTasks`:
 
 **true**: show the done tasks
 
-**false**: hide the done tasks
+**false**: hide (and remove) the done tasks
 
 `showTaskNumber`:
 
@@ -132,6 +167,211 @@ Edit `configs.js` to edit the style of the task list
 
 `tasksNumberFontSize` - font size of the tasks number (px)
 
-( under construction )
+### body
+
+`bodyBackgroundColor` - background color of the body (hex only)
+
+`bodyBackgroundOpacity` - background opacity of the body (0: transparent, 1: opaque, 0.5: half transparent)
+
+`bodyFontColor` - font color of the body (hex, name)
+
+`bodyBorderColor` - border color of the body (hex, name)
+
+`bodyBorderWidth` - border width of the body (px)
+
+`bodyBorderRadius` - border radius of the body (px)
+
+`bodyVerticalPadding` - vertical padding of the body (px)
+
+`bodyHorizontalPadding` - horizontal padding of the body (px)
+
+### task (individual tasks)
+
+`numberOfLines` - number of lines for the task (number)
+
+`usernameColor` - color of the username (hex, name) \(\"\" for twitch username color\)
+
+`taskBackgroundColor` - background color of the task (hex only)
+
+`taskBackgroundOpacity` - background opacity of the task (0: transparent, 1: opaque, 0.5: half transparent)
+
+`taskFontSize` - font size of the task (px)
+
+`taskFontColor` - font color of the task (hex, name)
+
+`taskBorderColor` - border color of the task (hex, name)
+
+`taskBorderWidth` - border width of the task (px)
+
+`taskBorderRadius` - border radius of the task (px)
+
+`taskMarginBottom` - margin bottom of the task (px)
+
+`taskPadding` - padding of the task (px)
+
+### checkbox
+
+`checkboxSize` - size of the checkbox (px)
+
+`checkBoxBackgroundColor` - background color of the checkbox (hex only)
+
+`checkBoxBackgroundOpacity` - background opacity of the checkbox (0: transparent, 1: opaque, 0.5: half transparent)
+
+`checkBoxBorderColor` - border color of the checkbox (hex, name)
+
+`checkBoxBorderWidth` - border width of the checkbox (px)
+
+`checkBoxBorderRadius` - border radius of the checkbox (px)
+
+`checkBoxMarginTop` - margin top of the checkbox (px)
+
+`checkBoxMarginLeft` - margin left of the checkbox (px)
+
+`checkBoxMarginRight` - margin right of the checkbox (px)
+
+`tickCharacter` - character for the tick (string)
+
+`tickSize` - font size of the tick (px)
+
+`tickColor` - color of the tick (hex, name)
+
+`tickTranslateY` - translate y of the tick (px) (going upwards)
+
+### bullet point
+
+`bulletPointCharacter` - character for the bullet point (string)
+
+`bulletPointSize` - font size of the bullet point (px)
+
+`bulletPointColor` - color of the bullet point (hex, name)
+
+`bulletPointMarginTop` - margin top of the bullet point (px)
+
+`bulletPointMarginLeft` - margin left of the bullet point (px)
+
+`bulletPointMarginRight` - margin right of the bullet point (px)
+
+### colon
+
+`colonMarginLeft` - margin left of the colon (px)
+
+`colonMarginRight` - margin right of the colon (px)
 
 ---
+
+## Aliases
+
+**add task commands:**
+
+-    `!addtask`
+-    `!add`
+-    `!task`
+-    `!taska`
+-    `!taskadd`
+-    `!atask`
+-    `!todo`
+
+**delete task commands:**
+
+-    `!taskd`
+-    `!taskdel`
+-    `!taskdelete`
+-    `!deltask`
+-    `!deletetask`
+-    `!taskr`
+-    `!taskremove`
+-    `!rtask`
+-    `!removetask`
+-    `!remove`
+-    `!delete`
+
+**edit task commands:**
+
+-    `taske`
+-    `taskedit`
+-    `etask`
+-    `edittask`
+-    `edit`
+
+**finish task commands:**
+
+-    `!taskf`
+-    `!taskfinish`
+-    `!ftask`
+-    `!finishtask`
+-    `!taskdone`
+-    `!donetask`
+-    `!finish`
+-    `!done`
+-    `!finished`
+
+**check commands:** \(check last task of yourself or user\)
+
+-    `!taskc`
+-    `!taskcheck`
+-    `!ctask`
+-    `!checktask`
+-    `!mytask`
+-    `!check`
+
+Note: You can also use it like this: `!check @user` or `!check user`
+
+**help commands:**
+
+-    `!taskh`
+-    `!taskhelp`
+-    `!htask`
+-    `!helptask`
+-    `!tasks`
+
+**admin delete commands:** \(delete a task from a user\) \(mods only\)
+
+-    `!taskadel`
+-    `!adel`
+-    `!adelete`
+-    `!admindelete`
+
+**admin clear done commands:** \(clear all done tasks from list\) \(mods only\)
+
+-    `!acleardone`
+-    `!admincleardone`
+-    `!cleardone`
+
+**admin clear all commands:** \(clear all tasks from list\) \(mods only\)
+
+-    `!clearall`
+-    `!allclear`
+-    `!adminclearall`
+-    `!adminallclear`
+-    `!aclearall`
+-    `!aclear`
+-    `!clear`
+
+---
+
+## Credits
+
+**Author:** [**@RyanPython**](https://twitch.tv/RyanPython)
+
+<!-- contributed -->
+
+**Contributors:**
+
+-    [**@MohFocus**](https://twitch.tv/MohFocus) \(helped with the code\)
+
+**Special thanks to:**
+
+-    [**@Instafluff**](https://twitch.tv/Instafluff) \(for the Comfy JS library\)
+
+**Shoutout to the following streamers for using my task list:** \(if you use my task list, please let me know and I'll add you to this list\)
+
+-    [**@CloudyDayzzz**](https://twitch.tv/CloudyDayzzz)
+-    [**@berryspace**](https://twitch.tv/berryspace)
+-    [**@xeno_hiraeth**](https://twitch.tv/xeno_hiraeth)
+-    [**@euphie\_\_\_**](https://twitch.tv/euphie___)
+-    [**@jutstreams**](https://twitch.tv/jutstreams)
+-    [**@mikewhatwhere**](https://twitch.tv/mikewhatwhere)
+-    [**@StudyPaws**](https://twitch.tv/StudyPaws)
+-    [**@pcc_lanezzz**](https://twitch.tv/pcc_lanezzz)
+-    [**@workwithjandj**](https://www.twitch.tv/workwithjandj)
+-    [**@studylena**](https://www.twitch.tv/studylena)

auth.js

@@ -2,7 +2,7 @@ const auth = (function () {
 	// Authentication and channels - required
 	const channel = "YOUR_CHANNEL_HERE"; // your channel
 	const username = "YOUR_BOT_ACCOUNT_HERE"; // bot account
-	const oauth = "OAUTH HERE"; // should be xxxxxxxxxxxx from the bot account, don't include 'oauth:' in the string
+	const oauth = "OAUTH HERE"; // should be xxxxxxxxxxxx from the bot account, do NOT include the 'oauth:' part
 
 	return {
 		channel,

configs.js

@@ -26,7 +26,7 @@ const configs = (function () {
 	const taskListBorderWidth = "0px"; // must have px at the end
 	const taskListBorderRadius = "10px"; // must have px at the end
 
-	const taskListPadding = "10px"; // must have px at the end
+	const taskListPadding = "0px"; // must have px at the end
 
 	// header
 	const headerHeight = "30px"; // must have px at the end
@@ -34,7 +34,7 @@ const configs = (function () {
 	const headerBackgroundOpacity = 0.9; // must be between 0 and 1
 
 	const headerBorderColor = "black"; // hex or name
-	const headerBorderWidth = "px"; // must have px at the end
+	const headerBorderWidth = "0px"; // must have px at the end
 	const headerBorderRadius = "5px"; // must have px at the end
 
 	const headerFontSize = "20px"; // must have px at the end
@@ -44,27 +44,31 @@ const configs = (function () {
 	const tasksNumberFontSize = "20px"; // must have px at the end
 
 	// body
-	const bodyBorderColor = "white"; // hex or name
-	const bodyBorderWidth = "0px"; // must have px at the end
-	const bodyBorderRadius = "0px"; // must have px at the end
 	const bodyBackgroundColor = "#ffffff"; // hex only
 	const bodyBackgroundOpacity = 0; // must be between 0 and 1
 	const bodyFontColor = "white"; // hex or name
 
+	const bodyBorderColor = "white"; // hex or name
+	const bodyBorderWidth = "0px"; // must have px at the end
+	const bodyBorderRadius = "0px"; // must have px at the end
+
 	const bodyVerticalPadding = "5px"; // must have px at the end
 	const bodyHorizontalPadding = "3px"; // must have px at the end
 
 	// task (individual tasks)
 	const numberOfLines = 1; // number of lines for the task
-	const usernameColor = "white"; // hex or name, "" for twitch username color
+	const usernameColor = ""; // hex or name, "" for twitch username color
+
+	const taskBackgroundColor = "#000"; // hex only
+	const taskBackgroundOpacity = 0.5; // must be between 0 and 1
 
 	const taskFontSize = "16px"; // must have px at the end
 	const taskFontColor = "white"; // hex or name
-	const taskBackgroundColor = "#000"; // hex only
-	const taskBackgroundOpacity = 0.5; // must be between 0 and 1
-	const taskBorderRadius = "5px"; // must have px at the end
+
 	const taskBorderColor = "black"; // hex or name
 	const taskBorderWidth = "0px"; // must have px at the end
+	const taskBorderRadius = "5px"; // must have px at the end
+
 	const taskMarginBottom = "5px"; // must have px at the end
 	const taskPadding = "5px"; // must have px at the end
 
@@ -72,30 +76,32 @@ const configs = (function () {
 	const checkBoxSize = "15px"; // must have px at the end
 	const checkBoxBackgroundColor = "#000"; // hex only
 	const checkBoxBackgroundOpacity = 0; // must be between 0 and 1
-	const checkBoxBorderRadius = "3px"; // must have px at the end
+
 	const checkBoxBorderColor = "white"; // hex or name
 	const checkBoxBorderWidth = "1px"; // must have px at the end
+	const checkBoxBorderRadius = "3px"; // must have px at the end
 
 	const checkBoxMarginTop = "3px"; // must have px at the end
 	const checkBoxMarginLeft = "2px"; // must have px at the end
+	const checkBoxMarginRight = "2px"; // must have px at the end
 
 	const tickCharacter = "'✔'"; // any character, must be in single quotes
-	const tickColor = "white"; // hex or name
 	const tickSize = "10px"; // must have px at the end
+	const tickColor = "white"; // hex or name
 	const tickTranslateY = "0px"; // must have px at the end
 
 	// bullet point - if enabled
-	const bulletPointCharacter = "🌻"; // any character
-	const bulletPointColor = "white"; // hex or name
+	const bulletPointCharacter = "•"; // any character
 	const bulletPointSize = "15px"; // must have px at the end
+	const bulletPointColor = "white"; // hex or name
 
-	const bulletPointMarginRight = "5px"; // must have px at the end
+	const bulletPointMarginTop = "0px"; // must have px at the end
 	const bulletPointMarginLeft = "5px"; // must have px at the end
-	const bulletPointMarginTop = "-1px"; // must have px at the end
+	const bulletPointMarginRight = "5px"; // must have px at the end
 
 	// colon
-	const colonMarginRight = "2px"; // must have px at the end
 	const colonMarginLeft = "2px"; // must have px at the end
+	const colonMarginRight = "2px"; // must have px at the end
 
 	// Add task commands - please add commands in the exact format
 	const addTaskCommands = [
@@ -110,6 +116,7 @@ const configs = (function () {
 
 	// Delete task commands - please add commands in the exact format
 	const deleteTaskCommands = [
+		"!taskd",
 		"!taskdel",
 		"!taskdelete",
 		"!deltask",
@@ -201,6 +208,7 @@ const configs = (function () {
 	const adminDeleteTasks = "All of the user's tasks have been deleted";
 	const taskFinished = 'Good job on finishing "{task}" {user}!';
 	const taskCheck = '{user} your current task is: "{task}"';
+	const taskCheckUser = `{user} {user2}'s current task is: "{task}"`;
 	const noTask = "Looks like you don't have a task up there {user}";
 	const noTaskA = "Looks like there is no task from that user there {user}";
 	const notMod = "Permission denied, {user}; Mods only";
@@ -208,9 +216,7 @@ const configs = (function () {
 	const clearedDone = "All finished tasks have been cleared";
 	const ryanpython =
 		"{user} RyanPython is the creator of this bot, check out his Twitch at https://www.twitch.tv/ryanpython";
-	const help = `{user} Use the following commands to help you out - !task !remove !edit !done. For mods !adel @user
-		or !adel user. There are additional aliases as well. If you need any more help, feel free to ping 
-		an available mod to assist you!`;
+	const help = `{user} Use the following commands to help you out - !task !remove !edit !done. For more commands, click here: https://github.com/liyunze-coding/Chat-Task-Tic-Overlay#commands`;
 
 	// Other
 	const styles = {
@@ -261,6 +267,7 @@ const configs = (function () {
 		checkBoxBorderWidth,
 		checkBoxMarginTop,
 		checkBoxMarginLeft,
+		checkBoxMarginRight,
 		checkBoxBackgroundColor,
 		checkBoxBackgroundOpacity,
 		tickCharacter,
@@ -298,6 +305,7 @@ const configs = (function () {
 		noTaskToEdit,
 		taskFinished,
 		taskCheck,
+		taskCheckUser,
 		noTask,
 		noTaskA,
 		notMod,

scripts/index.js

@@ -3,29 +3,35 @@ const responseTemplates = configs.responses;
 const settings = configs.settings;
 
 function respond(template, user = "", message = "") {
-	console.log(template);
 	ComfyJS.Say(template.replace("{user}", user).replace("{task}", message));
 }
 
 function isMod(flags) {
-	if (flags.broadcaster || flags.mod) {
-		return true;
-	} else {
-		return false;
-	}
+	return flags.broadcaster || flags.mod;
 }
 
 ComfyJS.onCommand = (user, command, message, flags, extra) => {
 	// check if command is in the list of commands
 	command = `!${command.toLowerCase()}`;
 
-	if (commands.addTaskCommands.includes(command)) {
+	if (
+		(command === "clear" && message === "done") ||
+		commands.adminClearDoneCommands.includes(command)
+	) {
+		if (!isMod(flags)) {
+			// user is not a mod or broadcaster
+			return respond(responseTemplates.notMod, user);
+		}
+		cleardone();
+		respond(responseTemplates.clearedDone, user);
+	} else if (commands.addTaskCommands.includes(command)) {
 		// ADD TASK
 
 		if (checkUserTask(user)) {
 			// check if user has a task pending
-			return respond(responseTemplates.userHasTask, user);
+			return respond(responseTemplates.noTaskAdded, user);
 		}
+
 		addTask(user, extra.userColor, message);
 
 		respond(responseTemplates.taskAdded, user, message);
@@ -63,15 +69,38 @@ ComfyJS.onCommand = (user, command, message, flags, extra) => {
 
 		respond(responseTemplates.taskEdited, user, message);
 	} else if (commands.checkCommands.includes(command)) {
-		// CHECK YOUR OWN TASK
+		// CHECK YOUR OWN TASK OR OTHER PEOPLE'S TASK
 
-		if (!checkUserTask(user)) {
-			// check if user has a task pending
-			return respond(responseTemplates.noTask, user);
+		if (message === "") {
+			if (!checkTask(user)) {
+				// check if user has a task pending
+				return respond(responseTemplates.noTask, user);
+			}
+
+			let currentTask = checkTask(user);
+			respond(responseTemplates.taskCheck, user, currentTask);
+		} else {
+			let mentioned = message.split(" ")[0];
+
+			// remove @ if there is
+			if (mentioned[0] === "@") {
+				mentioned = mentioned.slice(1);
+			}
+
+			if (!checkTask(user)) {
+				// check if user has a task pending
+				return respond(responseTemplates.noTaskA, user);
+			}
+
+			let currentTask = checkTask(mentioned);
+
+			let response = responseTemplates.taskCheckUser;
+
+			// replace {user2} with mentioned user
+			response = response.replace("{user2}", `@${mentioned}`);
+
+			respond(response, user, currentTask);
 		}
-		let currentTask = checkTask(user);
-
-		respond(responseTemplates.taskCheck, user, currentTask);
 	} else if (commands.adminClearAllCommands.includes(command)) {
 		if (!isMod(flags)) {
 			// user is not a mod or broadcaster
@@ -88,13 +117,6 @@ ComfyJS.onCommand = (user, command, message, flags, extra) => {
 		}
 		adminDeleteTask(message);
 		respond(responseTemplates.adminDeleteTasks, user, message);
-	} else if (commands.adminClearDoneCommands.includes(command)) {
-		if (!isMod(flags)) {
-			// user is not a mod or broadcaster
-			return respond(responseTemplates.notMod, user);
-		}
-		cleardone();
-		respond(responseTemplates.clearedDone, user);
 	} else if (command === "!ryanpython") {
 		respond(responseTemplates.ryanpython, user);
 	} else if (commands.helpCommands.includes(command)) {

scripts/taskList.js

@@ -9,7 +9,7 @@ DB structure:
     - username-[id]:
 		- task
 		- done
-		- user-color
+		- userColor
 */
 
 const responses = configs.responses;
@@ -73,6 +73,7 @@ function importStyles() {
 		"checkBoxBorderWidth",
 		"checkBoxMarginTop",
 		"checkBoxMarginLeft",
+		"checkBoxMarginRight",
 		"checkBoxBackgroundColor",
 		"checkBoxBackgroundOpacity",
 		"tickCharacter",
@@ -206,11 +207,15 @@ function renderTaskList() {
 
 	for (let task in tasks) {
 		let taskData = tasks[task];
-		let userColor = tasks["user-color"];
 		let username = task.split("-")[0];
 		let id = task.split("-")[1];
 
-		addTasksToDom(username, userColor, taskData.task, taskData.done);
+		addTasksToDom(
+			username,
+			taskData.userColor,
+			taskData.task,
+			taskData.done
+		);
 	}
 
 	renderTaskCount();
@@ -256,8 +261,9 @@ function addTasksToDom(username, userColor, task, completed) {
 	usernameDiv.className = "username";
 	usernameDiv.innerText = username;
 
-	if (configs.styles.usernameColor == null) {
+	if (configs.styles.usernameColor == "") {
 		usernameDiv.style.color = userColor;
+		console.log(userColor);
 	}
 
 	newTask.appendChild(usernameDiv);
@@ -307,8 +313,10 @@ function addTask(username, userColor, task) {
 	let tasks = getTasks();
 	let id = getID(username);
 
+	console.log(userColor);
+
 	tasks[`${username}-${id}`] = {
-		"user-color": userColor,
+		userColor: userColor,
 		task: task,
 		done: false,
 	};
@@ -383,7 +391,13 @@ function checkTask(username) {
 	let id = getID(username);
 	let tasks = getTasks();
 
-	return tasks[`${username}-${id}`].task;
+	if (tasks[`${username}-${id}`]) {
+		return tasks[`${username}-${id}`].task;
+	} else if (tasks[`${username}-${id - 1}`]) {
+		return tasks[`${username}-${id - 1}`].task;
+	} else {
+		return false;
+	}
 }
 
 // admin delete all tasks of user

styles/taskList.css

@@ -62,6 +62,7 @@ CUSTOMIZATIONS TO ADD:
 	--check-box-color: white;
 	--check-box-margin-top: 3px;
 	--check-box-margin-left: 2px;
+	--check-box-margin-right: 2px;
 	--check-box-border-width: 1px;
 	--check-box-border-radius: 0px;
 	--check-box-border-color: white;
@@ -224,6 +225,7 @@ body {
 	align-items: start;
 	margin-top: var(--check-box-margin-top);
 	margin-left: var(--check-box-margin-left);
+	margin-right: var(--check-box-margin-right);
 }
 
 input[type="checkbox"] {