A chat-controlled to do list overlay for Twitch.
Created by DamienPup for LadyWynter FantasyWriter. Inspired by liyunze-coding/Chat-Task-Tic-Overlay.
The latest changes since last time I pushed something to this repo:
- Finally improved the scrolling animation to fix some long standing issues, see Known Issues for what's left.
- The
credits
command now shows the bots github url. - New
github
command to display only the bots github url, and not the entire credits. - Bug fix: The background for the whole overlay no longer overlaps the task item text.
!task help (command)
: List commands. Optionally, get help on a command.!task credits
: List bot credits.!task show <number>
: Shows a task and it's status in chat.!task add <task>
: Add a task to the list. Task can contain spaces.!task done <number>
: Finish a task.!task remove <number>
: Delete a task!task edit <number> <new-content>
: Edit a task to contain different text.!task clear all
: Clear all tasks!task clear done
: Clear only fishised tasks.!task reload
: Reload bot and overlay.!task reassign <number> (user)
: Reassign a task to a new user. If the user is not given, reassign to yourself.!task github
: Display the bots github url.
By default everyone can use help
, credits
and github
, add
tasks, as well as finish (done
), remove
, and edit
tasks they started. Mods can use clear
, reassign
, as well as finish (done
), remove
, and edit
all tasks. Only the broadcaster can reload
the bot. All of these permissions can be changed in settings.js
.
CLIENT_ID.txt
:- Used by
generate_token.py
to generate an oauth token, and pretty much nothing else. - If you generate your token manually, this can still be a nice place to store a copy of your client id, so you don't need to login to the twitch dev console to get it.
- Used by
auth.js
:- Holds login settings, including your oauth token, bot username, and channel name
settings.js
:- Holds the main settings for the overlay and bot
- Includes the active task limit, scrolling settings, auto-delete settings, command names and alisies, command help messages, and command permissions.
style_settings.css
:- Holds the visual settings for the overlay.
- Includes fonts, font sizes, and various color options.
Warning
Do not edit any other files. Editing other files may break the bot and cause it to stop working. Editing other files is an action taken at your own risk and is not officially supported.
Important
The following files contain your settings. If updating from a previous version, do not replace these files unless they have been updated. If they have been updated, migrate your settings to the new versions. You will have issues if you do not keep these updated.
Last update to settings.js
: Commit d40c5347872239badb0e8a11d4af2db7f8116547 on Mar 19th, 2024.
Last update to style_settings.css
: Commit fcf92313124f95b5665c72a2b04e0d55c1b5225f on Mar 16th, 2024.
Last update to auth.js
: Commit b807cf384b231e0700130d6f0da875f5604d956b on Oct 18, 2023.
CLIENT_ID.txt
does not need updates.
(note: the dates above do not count updates that don't affect functionality)
- Login to the Twitch Developer Console with your main or dedicated bot account.
- Create an app.
- Set the redirect URL to
http://localhost:5000/auth
- Set the type to
Chat Bot
- Set the redirect URL to
- Paste the app's Client ID into
CLIENT_ID.txt
. - Run
generate_token.py
to generate an oauth token. (See below for manual token generation instuctions)- You will need Python install for this step. 3.6 or later is required, however 3.12 is recommended.
- Open
auth.js
. Fill out the target channel and bot username. Don't touch theOAUTH_TOKEN
. - Add a
Browser Source
to OBS or Streamlabs (or whatever your using), checkLocal File
and selectindex.html
.
- Copy this URL:
https://id.twitch.tv/oauth2/authorize
?client_id=CLIENT_ID_HERE
&redirect_uri=http://localhost:5000/auth
&response_type=token
&scope=channel:moderate+chat:edit+chat:read+channel:manage:broadcast+user:edit:broadcast+channel:read:redemptions+user:read:email
- Replace
CLIENT_ID_HERE
with your apps Client ID. - Paste this url into a brower, authorize the app, and wait for the browser to time out.
- Copy the
access_token
from the URL bar. - Open
auth.js
, and paste your token into the quotes on the first line, afterOAUTH_TOKEN
. It should look like this:
const OAUTH_TOKEN = "YOUR_TOKEN_HERE";