diff --git a/README.md b/README.md index 954738e..c4fedfd 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,9 @@ # Chat-Task-Tic Overlay (Beta) +Chat-Task-Tic Overlay Preview + +--- + ## Commands - !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 +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) + + + +**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) diff --git a/auth.js b/auth.js index fcfe70d..8f8c26b 100644 --- a/auth.js +++ b/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, diff --git a/configs.js b/configs.js index 33c38e1..721e3d5 100644 --- a/configs.js +++ b/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, diff --git a/images/chat-task-tic-thumbnail_1.1.1.jpg b/images/chat-task-tic-thumbnail_1.1.1.jpg new file mode 100644 index 0000000..4e7c31b Binary files /dev/null and b/images/chat-task-tic-thumbnail_1.1.1.jpg differ diff --git a/images/labels.jpg b/images/labels.jpg new file mode 100644 index 0000000..7cca2dc Binary files /dev/null and b/images/labels.jpg differ diff --git a/scripts/index.js b/scripts/index.js index b5e420b..96f88fd 100644 --- a/scripts/index.js +++ b/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)) { diff --git a/scripts/taskList.js b/scripts/taskList.js index f3ab491..593f18f 100644 --- a/scripts/taskList.js +++ b/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 diff --git a/styles/taskList.css b/styles/taskList.css index 86a4188..0fd9710 100644 --- a/styles/taskList.css +++ b/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"] {