mirror of
https://github.com/liyunze-coding/rython-task-bot-v2.git
synced 2026-09-22 07:24:27 +00:00
added widget files
This commit is contained in:
parent
b8aef79f4b
commit
223938b528
15 changed files with 1784 additions and 2 deletions
|
|
@ -21,11 +21,11 @@ Task Bot for Co-working streamers on Twitch & YouTube.
|
||||||
- etc.
|
- etc.
|
||||||
- Easy customizable with other Streamer.Bot actions
|
- Easy customizable with other Streamer.Bot actions
|
||||||
|
|
||||||
## Widget (Optional)
|
## Widget
|
||||||
|
|
||||||
<img src="./images/widget.png" alt="Widget" width="300"/>
|
<img src="./images/widget.png" alt="Widget" width="300"/>
|
||||||
|
|
||||||
- [Task Widget Repository](https://github.com/liyunze-coding/task-bot-v2-widget)
|
Widget can be found in the [widget folder](/widget).
|
||||||
|
|
||||||
## Setup Instructions
|
## Setup Instructions
|
||||||
|
|
||||||
|
|
|
||||||
4
widget/.prettierrc
Normal file
4
widget/.prettierrc
Normal file
|
|
@ -0,0 +1,4 @@
|
||||||
|
{
|
||||||
|
"tabWidth": 4,
|
||||||
|
"useTabs": true
|
||||||
|
}
|
||||||
636
widget/LICENSE.md
Normal file
636
widget/LICENSE.md
Normal file
|
|
@ -0,0 +1,636 @@
|
||||||
|
# GNU GENERAL PUBLIC LICENSE
|
||||||
|
Version 3, 29 June 2007
|
||||||
|
|
||||||
|
Copyright (C) 2007 [Free Software Foundation, Inc.](http://fsf.org/)
|
||||||
|
|
||||||
|
Everyone is permitted to copy and distribute verbatim copies of this license
|
||||||
|
document, but changing it is not allowed.
|
||||||
|
|
||||||
|
## Preamble
|
||||||
|
|
||||||
|
The GNU General Public License is a free, copyleft license for software and
|
||||||
|
other kinds of works.
|
||||||
|
|
||||||
|
The licenses for most software and other practical works are designed to take
|
||||||
|
away your freedom to share and change the works. By contrast, the GNU General
|
||||||
|
Public License is intended to guarantee your freedom to share and change all
|
||||||
|
versions of a program--to make sure it remains free software for all its users.
|
||||||
|
We, the Free Software Foundation, use the GNU General Public License for most
|
||||||
|
of our software; it applies also to any other work released this way by its
|
||||||
|
authors. You can apply it to your programs, too.
|
||||||
|
|
||||||
|
When we speak of free software, we are referring to freedom, not price. Our
|
||||||
|
General Public Licenses are designed to make sure that you have the freedom to
|
||||||
|
distribute copies of free software (and charge for them if you wish), that you
|
||||||
|
receive source code or can get it if you want it, that you can change the
|
||||||
|
software or use pieces of it in new free programs, and that you know you can do
|
||||||
|
these things.
|
||||||
|
|
||||||
|
To protect your rights, we need to prevent others from denying you these rights
|
||||||
|
or asking you to surrender the rights. Therefore, you have certain
|
||||||
|
responsibilities if you distribute copies of the software, or if you modify it:
|
||||||
|
responsibilities to respect the freedom of others.
|
||||||
|
|
||||||
|
For example, if you distribute copies of such a program, whether gratis or for
|
||||||
|
a fee, you must pass on to the recipients the same freedoms that you received.
|
||||||
|
You must make sure that they, too, receive or can get the source code. And you
|
||||||
|
must show them these terms so they know their rights.
|
||||||
|
|
||||||
|
Developers that use the GNU GPL protect your rights with two steps:
|
||||||
|
|
||||||
|
1. assert copyright on the software, and
|
||||||
|
2. offer you this License giving you legal permission to copy, distribute
|
||||||
|
and/or modify it.
|
||||||
|
|
||||||
|
For the developers' and authors' protection, the GPL clearly explains that
|
||||||
|
there is no warranty for this free software. For both users' and authors' sake,
|
||||||
|
the GPL requires that modified versions be marked as changed, so that their
|
||||||
|
problems will not be attributed erroneously to authors of previous versions.
|
||||||
|
|
||||||
|
Some devices are designed to deny users access to install or run modified
|
||||||
|
versions of the software inside them, although the manufacturer can do so. This
|
||||||
|
is fundamentally incompatible with the aim of protecting users' freedom to
|
||||||
|
change the software. The systematic pattern of such abuse occurs in the area of
|
||||||
|
products for individuals to use, which is precisely where it is most
|
||||||
|
unacceptable. Therefore, we have designed this version of the GPL to prohibit
|
||||||
|
the practice for those products. If such problems arise substantially in other
|
||||||
|
domains, we stand ready to extend this provision to those domains in future
|
||||||
|
versions of the GPL, as needed to protect the freedom of users.
|
||||||
|
|
||||||
|
Finally, every program is threatened constantly by software patents. States
|
||||||
|
should not allow patents to restrict development and use of software on
|
||||||
|
general-purpose computers, but in those that do, we wish to avoid the special
|
||||||
|
danger that patents applied to a free program could make it effectively
|
||||||
|
proprietary. To prevent this, the GPL assures that patents cannot be used to
|
||||||
|
render the program non-free.
|
||||||
|
|
||||||
|
The precise terms and conditions for copying, distribution and modification
|
||||||
|
follow.
|
||||||
|
|
||||||
|
## TERMS AND CONDITIONS
|
||||||
|
|
||||||
|
### 0. Definitions.
|
||||||
|
|
||||||
|
*This License* refers to version 3 of the GNU General Public License.
|
||||||
|
|
||||||
|
*Copyright* also means copyright-like laws that apply to other kinds of works,
|
||||||
|
such as semiconductor masks.
|
||||||
|
|
||||||
|
*The Program* refers to any copyrightable work licensed under this License.
|
||||||
|
Each licensee is addressed as *you*. *Licensees* and *recipients* may be
|
||||||
|
individuals or organizations.
|
||||||
|
|
||||||
|
To *modify* a work means to copy from or adapt all or part of the work in a
|
||||||
|
fashion requiring copyright permission, other than the making of an exact copy.
|
||||||
|
The resulting work is called a *modified version* of the earlier work or a work
|
||||||
|
*based on* the earlier work.
|
||||||
|
|
||||||
|
A *covered work* means either the unmodified Program or a work based on the
|
||||||
|
Program.
|
||||||
|
|
||||||
|
To *propagate* a work means to do anything with it that, without permission,
|
||||||
|
would make you directly or secondarily liable for infringement under applicable
|
||||||
|
copyright law, except executing it on a computer or modifying a private copy.
|
||||||
|
Propagation includes copying, distribution (with or without modification),
|
||||||
|
making available to the public, and in some countries other activities as well.
|
||||||
|
|
||||||
|
To *convey* a work means any kind of propagation that enables other parties to
|
||||||
|
make or receive copies. Mere interaction with a user through a computer
|
||||||
|
network, with no transfer of a copy, is not conveying.
|
||||||
|
|
||||||
|
An interactive user interface displays *Appropriate Legal Notices* to the
|
||||||
|
extent that it includes a convenient and prominently visible feature that
|
||||||
|
|
||||||
|
1. displays an appropriate copyright notice, and
|
||||||
|
2. tells the user that there is no warranty for the work (except to the
|
||||||
|
extent that warranties are provided), that licensees may convey the work
|
||||||
|
under this License, and how to view a copy of this License.
|
||||||
|
|
||||||
|
If the interface presents a list of user commands or options, such as a menu, a
|
||||||
|
prominent item in the list meets this criterion.
|
||||||
|
|
||||||
|
### 1. Source Code.
|
||||||
|
|
||||||
|
The *source code* for a work means the preferred form of the work for making
|
||||||
|
modifications to it. *Object code* means any non-source form of a work.
|
||||||
|
|
||||||
|
A *Standard Interface* means an interface that either is an official standard
|
||||||
|
defined by a recognized standards body, or, in the case of interfaces specified
|
||||||
|
for a particular programming language, one that is widely used among developers
|
||||||
|
working in that language.
|
||||||
|
|
||||||
|
The *System Libraries* of an executable work include anything, other than the
|
||||||
|
work as a whole, that (a) is included in the normal form of packaging a Major
|
||||||
|
Component, but which is not part of that Major Component, and (b) serves only
|
||||||
|
to enable use of the work with that Major Component, or to implement a Standard
|
||||||
|
Interface for which an implementation is available to the public in source code
|
||||||
|
form. A *Major Component*, in this context, means a major essential component
|
||||||
|
(kernel, window system, and so on) of the specific operating system (if any) on
|
||||||
|
which the executable work runs, or a compiler used to produce the work, or an
|
||||||
|
object code interpreter used to run it.
|
||||||
|
|
||||||
|
The *Corresponding Source* for a work in object code form means all the source
|
||||||
|
code needed to generate, install, and (for an executable work) run the object
|
||||||
|
code and to modify the work, including scripts to control those activities.
|
||||||
|
However, it does not include the work's System Libraries, or general-purpose
|
||||||
|
tools or generally available free programs which are used unmodified in
|
||||||
|
performing those activities but which are not part of the work. For example,
|
||||||
|
Corresponding Source includes interface definition files associated with source
|
||||||
|
files for the work, and the source code for shared libraries and dynamically
|
||||||
|
linked subprograms that the work is specifically designed to require, such as
|
||||||
|
by intimate data communication or control flow between those subprograms and
|
||||||
|
other parts of the work.
|
||||||
|
|
||||||
|
The Corresponding Source need not include anything that users can regenerate
|
||||||
|
automatically from other parts of the Corresponding Source.
|
||||||
|
|
||||||
|
The Corresponding Source for a work in source code form is that same work.
|
||||||
|
|
||||||
|
### 2. Basic Permissions.
|
||||||
|
|
||||||
|
All rights granted under this License are granted for the term of copyright on
|
||||||
|
the Program, and are irrevocable provided the stated conditions are met. This
|
||||||
|
License explicitly affirms your unlimited permission to run the unmodified
|
||||||
|
Program. The output from running a covered work is covered by this License only
|
||||||
|
if the output, given its content, constitutes a covered work. This License
|
||||||
|
acknowledges your rights of fair use or other equivalent, as provided by
|
||||||
|
copyright law.
|
||||||
|
|
||||||
|
You may make, run and propagate covered works that you do not convey, without
|
||||||
|
conditions so long as your license otherwise remains in force. You may convey
|
||||||
|
covered works to others for the sole purpose of having them make modifications
|
||||||
|
exclusively for you, or provide you with facilities for running those works,
|
||||||
|
provided that you comply with the terms of this License in conveying all
|
||||||
|
material for which you do not control copyright. Those thus making or running
|
||||||
|
the covered works for you must do so exclusively on your behalf, under your
|
||||||
|
direction and control, on terms that prohibit them from making any copies of
|
||||||
|
your copyrighted material outside their relationship with you.
|
||||||
|
|
||||||
|
Conveying under any other circumstances is permitted solely under the
|
||||||
|
conditions stated below. Sublicensing is not allowed; section 10 makes it
|
||||||
|
unnecessary.
|
||||||
|
|
||||||
|
### 3. Protecting Users' Legal Rights From Anti-Circumvention Law.
|
||||||
|
|
||||||
|
No covered work shall be deemed part of an effective technological measure
|
||||||
|
under any applicable law fulfilling obligations under article 11 of the WIPO
|
||||||
|
copyright treaty adopted on 20 December 1996, or similar laws prohibiting or
|
||||||
|
restricting circumvention of such measures.
|
||||||
|
|
||||||
|
When you convey a covered work, you waive any legal power to forbid
|
||||||
|
circumvention of technological measures to the extent such circumvention is
|
||||||
|
effected by exercising rights under this License with respect to the covered
|
||||||
|
work, and you disclaim any intention to limit operation or modification of the
|
||||||
|
work as a means of enforcing, against the work's users, your or third parties'
|
||||||
|
legal rights to forbid circumvention of technological measures.
|
||||||
|
|
||||||
|
### 4. Conveying Verbatim Copies.
|
||||||
|
|
||||||
|
You may convey verbatim copies of the Program's source code as you receive it,
|
||||||
|
in any medium, provided that you conspicuously and appropriately publish on
|
||||||
|
each copy an appropriate copyright notice; keep intact all notices stating that
|
||||||
|
this License and any non-permissive terms added in accord with section 7 apply
|
||||||
|
to the code; keep intact all notices of the absence of any warranty; and give
|
||||||
|
all recipients a copy of this License along with the Program.
|
||||||
|
|
||||||
|
You may charge any price or no price for each copy that you convey, and you may
|
||||||
|
offer support or warranty protection for a fee.
|
||||||
|
|
||||||
|
### 5. Conveying Modified Source Versions.
|
||||||
|
|
||||||
|
You may convey a work based on the Program, or the modifications to produce it
|
||||||
|
from the Program, in the form of source code under the terms of section 4,
|
||||||
|
provided that you also meet all of these conditions:
|
||||||
|
|
||||||
|
- a) The work must carry prominent notices stating that you modified it, and
|
||||||
|
giving a relevant date.
|
||||||
|
- b) The work must carry prominent notices stating that it is released under
|
||||||
|
this License and any conditions added under section 7. This requirement
|
||||||
|
modifies the requirement in section 4 to *keep intact all notices*.
|
||||||
|
- c) You must license the entire work, as a whole, under this License to
|
||||||
|
anyone who comes into possession of a copy. This License will therefore
|
||||||
|
apply, along with any applicable section 7 additional terms, to the whole
|
||||||
|
of the work, and all its parts, regardless of how they are packaged. This
|
||||||
|
License gives no permission to license the work in any other way, but it
|
||||||
|
does not invalidate such permission if you have separately received it.
|
||||||
|
- d) If the work has interactive user interfaces, each must display
|
||||||
|
Appropriate Legal Notices; however, if the Program has interactive
|
||||||
|
interfaces that do not display Appropriate Legal Notices, your work need
|
||||||
|
not make them do so.
|
||||||
|
|
||||||
|
A compilation of a covered work with other separate and independent works,
|
||||||
|
which are not by their nature extensions of the covered work, and which are not
|
||||||
|
combined with it such as to form a larger program, in or on a volume of a
|
||||||
|
storage or distribution medium, is called an *aggregate* if the compilation and
|
||||||
|
its resulting copyright are not used to limit the access or legal rights of the
|
||||||
|
compilation's users beyond what the individual works permit. Inclusion of a
|
||||||
|
covered work in an aggregate does not cause this License to apply to the other
|
||||||
|
parts of the aggregate.
|
||||||
|
|
||||||
|
### 6. Conveying Non-Source Forms.
|
||||||
|
|
||||||
|
You may convey a covered work in object code form under the terms of sections 4
|
||||||
|
and 5, provided that you also convey the machine-readable Corresponding Source
|
||||||
|
under the terms of this License, in one of these ways:
|
||||||
|
|
||||||
|
- a) Convey the object code in, or embodied in, a physical product (including
|
||||||
|
a physical distribution medium), accompanied by the Corresponding Source
|
||||||
|
fixed on a durable physical medium customarily used for software
|
||||||
|
interchange.
|
||||||
|
- b) Convey the object code in, or embodied in, a physical product (including
|
||||||
|
a physical distribution medium), accompanied by a written offer, valid for
|
||||||
|
at least three years and valid for as long as you offer spare parts or
|
||||||
|
customer support for that product model, to give anyone who possesses the
|
||||||
|
object code either
|
||||||
|
1. a copy of the Corresponding Source for all the software in the product
|
||||||
|
that is covered by this License, on a durable physical medium
|
||||||
|
customarily used for software interchange, for a price no more than your
|
||||||
|
reasonable cost of physically performing this conveying of source, or
|
||||||
|
2. access to copy the Corresponding Source from a network server at no
|
||||||
|
charge.
|
||||||
|
- c) Convey individual copies of the object code with a copy of the written
|
||||||
|
offer to provide the Corresponding Source. This alternative is allowed only
|
||||||
|
occasionally and noncommercially, and only if you received the object code
|
||||||
|
with such an offer, in accord with subsection 6b.
|
||||||
|
- d) Convey the object code by offering access from a designated place
|
||||||
|
(gratis or for a charge), and offer equivalent access to the Corresponding
|
||||||
|
Source in the same way through the same place at no further charge. You
|
||||||
|
need not require recipients to copy the Corresponding Source along with the
|
||||||
|
object code. If the place to copy the object code is a network server, the
|
||||||
|
Corresponding Source may be on a different server operated by you or a
|
||||||
|
third party) that supports equivalent copying facilities, provided you
|
||||||
|
maintain clear directions next to the object code saying where to find the
|
||||||
|
Corresponding Source. Regardless of what server hosts the Corresponding
|
||||||
|
Source, you remain obligated to ensure that it is available for as long as
|
||||||
|
needed to satisfy these requirements.
|
||||||
|
- e) Convey the object code using peer-to-peer transmission, provided you
|
||||||
|
inform other peers where the object code and Corresponding Source of the
|
||||||
|
work are being offered to the general public at no charge under subsection
|
||||||
|
6d.
|
||||||
|
|
||||||
|
A separable portion of the object code, whose source code is excluded from the
|
||||||
|
Corresponding Source as a System Library, need not be included in conveying the
|
||||||
|
object code work.
|
||||||
|
|
||||||
|
A *User Product* is either
|
||||||
|
|
||||||
|
1. a *consumer product*, which means any tangible personal property which is
|
||||||
|
normally used for personal, family, or household purposes, or
|
||||||
|
2. anything designed or sold for incorporation into a dwelling.
|
||||||
|
|
||||||
|
In determining whether a product is a consumer product, doubtful cases shall be
|
||||||
|
resolved in favor of coverage. For a particular product received by a
|
||||||
|
particular user, *normally used* refers to a typical or common use of that
|
||||||
|
class of product, regardless of the status of the particular user or of the way
|
||||||
|
in which the particular user actually uses, or expects or is expected to use,
|
||||||
|
the product. A product is a consumer product regardless of whether the product
|
||||||
|
has substantial commercial, industrial or non-consumer uses, unless such uses
|
||||||
|
represent the only significant mode of use of the product.
|
||||||
|
|
||||||
|
*Installation Information* for a User Product means any methods, procedures,
|
||||||
|
authorization keys, or other information required to install and execute
|
||||||
|
modified versions of a covered work in that User Product from a modified
|
||||||
|
version of its Corresponding Source. The information must suffice to ensure
|
||||||
|
that the continued functioning of the modified object code is in no case
|
||||||
|
prevented or interfered with solely because modification has been made.
|
||||||
|
|
||||||
|
If you convey an object code work under this section in, or with, or
|
||||||
|
specifically for use in, a User Product, and the conveying occurs as part of a
|
||||||
|
transaction in which the right of possession and use of the User Product is
|
||||||
|
transferred to the recipient in perpetuity or for a fixed term (regardless of
|
||||||
|
how the transaction is characterized), the Corresponding Source conveyed under
|
||||||
|
this section must be accompanied by the Installation Information. But this
|
||||||
|
requirement does not apply if neither you nor any third party retains the
|
||||||
|
ability to install modified object code on the User Product (for example, the
|
||||||
|
work has been installed in ROM).
|
||||||
|
|
||||||
|
The requirement to provide Installation Information does not include a
|
||||||
|
requirement to continue to provide support service, warranty, or updates for a
|
||||||
|
work that has been modified or installed by the recipient, or for the User
|
||||||
|
Product in which it has been modified or installed. Access to a network may be
|
||||||
|
denied when the modification itself materially and adversely affects the
|
||||||
|
operation of the network or violates the rules and protocols for communication
|
||||||
|
across the network.
|
||||||
|
|
||||||
|
Corresponding Source conveyed, and Installation Information provided, in accord
|
||||||
|
with this section must be in a format that is publicly documented (and with an
|
||||||
|
implementation available to the public in source code form), and must require
|
||||||
|
no special password or key for unpacking, reading or copying.
|
||||||
|
|
||||||
|
### 7. Additional Terms.
|
||||||
|
|
||||||
|
*Additional permissions* are terms that supplement the terms of this License by
|
||||||
|
making exceptions from one or more of its conditions. Additional permissions
|
||||||
|
that are applicable to the entire Program shall be treated as though they were
|
||||||
|
included in this License, to the extent that they are valid under applicable
|
||||||
|
law. If additional permissions apply only to part of the Program, that part may
|
||||||
|
be used separately under those permissions, but the entire Program remains
|
||||||
|
governed by this License without regard to the additional permissions.
|
||||||
|
|
||||||
|
When you convey a copy of a covered work, you may at your option remove any
|
||||||
|
additional permissions from that copy, or from any part of it. (Additional
|
||||||
|
permissions may be written to require their own removal in certain cases when
|
||||||
|
you modify the work.) You may place additional permissions on material, added
|
||||||
|
by you to a covered work, for which you have or can give appropriate copyright
|
||||||
|
permission.
|
||||||
|
|
||||||
|
Notwithstanding any other provision of this License, for material you add to a
|
||||||
|
covered work, you may (if authorized by the copyright holders of that material)
|
||||||
|
supplement the terms of this License with terms:
|
||||||
|
|
||||||
|
- a) Disclaiming warranty or limiting liability differently from the terms of
|
||||||
|
sections 15 and 16 of this License; or
|
||||||
|
- b) Requiring preservation of specified reasonable legal notices or author
|
||||||
|
attributions in that material or in the Appropriate Legal Notices displayed
|
||||||
|
by works containing it; or
|
||||||
|
- c) Prohibiting misrepresentation of the origin of that material, or
|
||||||
|
requiring that modified versions of such material be marked in reasonable
|
||||||
|
ways as different from the original version; or
|
||||||
|
- d) Limiting the use for publicity purposes of names of licensors or authors
|
||||||
|
of the material; or
|
||||||
|
- e) Declining to grant rights under trademark law for use of some trade
|
||||||
|
names, trademarks, or service marks; or
|
||||||
|
- f) Requiring indemnification of licensors and authors of that material by
|
||||||
|
anyone who conveys the material (or modified versions of it) with
|
||||||
|
contractual assumptions of liability to the recipient, for any liability
|
||||||
|
that these contractual assumptions directly impose on those licensors and
|
||||||
|
authors.
|
||||||
|
|
||||||
|
All other non-permissive additional terms are considered *further restrictions*
|
||||||
|
within the meaning of section 10. If the Program as you received it, or any
|
||||||
|
part of it, contains a notice stating that it is governed by this License along
|
||||||
|
with a term that is a further restriction, you may remove that term. If a
|
||||||
|
license document contains a further restriction but permits relicensing or
|
||||||
|
conveying under this License, you may add to a covered work material governed
|
||||||
|
by the terms of that license document, provided that the further restriction
|
||||||
|
does not survive such relicensing or conveying.
|
||||||
|
|
||||||
|
If you add terms to a covered work in accord with this section, you must place,
|
||||||
|
in the relevant source files, a statement of the additional terms that apply to
|
||||||
|
those files, or a notice indicating where to find the applicable terms.
|
||||||
|
|
||||||
|
Additional terms, permissive or non-permissive, may be stated in the form of a
|
||||||
|
separately written license, or stated as exceptions; the above requirements
|
||||||
|
apply either way.
|
||||||
|
|
||||||
|
### 8. Termination.
|
||||||
|
|
||||||
|
You may not propagate or modify a covered work except as expressly provided
|
||||||
|
under this License. Any attempt otherwise to propagate or modify it is void,
|
||||||
|
and will automatically terminate your rights under this License (including any
|
||||||
|
patent licenses granted under the third paragraph of section 11).
|
||||||
|
|
||||||
|
However, if you cease all violation of this License, then your license from a
|
||||||
|
particular copyright holder is reinstated
|
||||||
|
|
||||||
|
- a) provisionally, unless and until the copyright holder explicitly and
|
||||||
|
finally terminates your license, and
|
||||||
|
- b) permanently, if the copyright holder fails to notify you of the
|
||||||
|
violation by some reasonable means prior to 60 days after the cessation.
|
||||||
|
|
||||||
|
Moreover, your license from a particular copyright holder is reinstated
|
||||||
|
permanently if the copyright holder notifies you of the violation by some
|
||||||
|
reasonable means, this is the first time you have received notice of violation
|
||||||
|
of this License (for any work) from that copyright holder, and you cure the
|
||||||
|
violation prior to 30 days after your receipt of the notice.
|
||||||
|
|
||||||
|
Termination of your rights under this section does not terminate the licenses
|
||||||
|
of parties who have received copies or rights from you under this License. If
|
||||||
|
your rights have been terminated and not permanently reinstated, you do not
|
||||||
|
qualify to receive new licenses for the same material under section 10.
|
||||||
|
|
||||||
|
### 9. Acceptance Not Required for Having Copies.
|
||||||
|
|
||||||
|
You are not required to accept this License in order to receive or run a copy
|
||||||
|
of the Program. Ancillary propagation of a covered work occurring solely as a
|
||||||
|
consequence of using peer-to-peer transmission to receive a copy likewise does
|
||||||
|
not require acceptance. However, nothing other than this License grants you
|
||||||
|
permission to propagate or modify any covered work. These actions infringe
|
||||||
|
copyright if you do not accept this License. Therefore, by modifying or
|
||||||
|
propagating a covered work, you indicate your acceptance of this License to do
|
||||||
|
so.
|
||||||
|
|
||||||
|
### 10. Automatic Licensing of Downstream Recipients.
|
||||||
|
|
||||||
|
Each time you convey a covered work, the recipient automatically receives a
|
||||||
|
license from the original licensors, to run, modify and propagate that work,
|
||||||
|
subject to this License. You are not responsible for enforcing compliance by
|
||||||
|
third parties with this License.
|
||||||
|
|
||||||
|
An *entity transaction* is a transaction transferring control of an
|
||||||
|
organization, or substantially all assets of one, or subdividing an
|
||||||
|
organization, or merging organizations. If propagation of a covered work
|
||||||
|
results from an entity transaction, each party to that transaction who receives
|
||||||
|
a copy of the work also receives whatever licenses to the work the party's
|
||||||
|
predecessor in interest had or could give under the previous paragraph, plus a
|
||||||
|
right to possession of the Corresponding Source of the work from the
|
||||||
|
predecessor in interest, if the predecessor has it or can get it with
|
||||||
|
reasonable efforts.
|
||||||
|
|
||||||
|
You may not impose any further restrictions on the exercise of the rights
|
||||||
|
granted or affirmed under this License. For example, you may not impose a
|
||||||
|
license fee, royalty, or other charge for exercise of rights granted under this
|
||||||
|
License, and you may not initiate litigation (including a cross-claim or
|
||||||
|
counterclaim in a lawsuit) alleging that any patent claim is infringed by
|
||||||
|
making, using, selling, offering for sale, or importing the Program or any
|
||||||
|
portion of it.
|
||||||
|
|
||||||
|
### 11. Patents.
|
||||||
|
|
||||||
|
A *contributor* is a copyright holder who authorizes use under this License of
|
||||||
|
the Program or a work on which the Program is based. The work thus licensed is
|
||||||
|
called the contributor's *contributor version*.
|
||||||
|
|
||||||
|
A contributor's *essential patent claims* are all patent claims owned or
|
||||||
|
controlled by the contributor, whether already acquired or hereafter acquired,
|
||||||
|
that would be infringed by some manner, permitted by this License, of making,
|
||||||
|
using, or selling its contributor version, but do not include claims that would
|
||||||
|
be infringed only as a consequence of further modification of the contributor
|
||||||
|
version. For purposes of this definition, *control* includes the right to grant
|
||||||
|
patent sublicenses in a manner consistent with the requirements of this
|
||||||
|
License.
|
||||||
|
|
||||||
|
Each contributor grants you a non-exclusive, worldwide, royalty-free patent
|
||||||
|
license under the contributor's essential patent claims, to make, use, sell,
|
||||||
|
offer for sale, import and otherwise run, modify and propagate the contents of
|
||||||
|
its contributor version.
|
||||||
|
|
||||||
|
In the following three paragraphs, a *patent license* is any express agreement
|
||||||
|
or commitment, however denominated, not to enforce a patent (such as an express
|
||||||
|
permission to practice a patent or covenant not to sue for patent
|
||||||
|
infringement). To *grant* such a patent license to a party means to make such
|
||||||
|
an agreement or commitment not to enforce a patent against the party.
|
||||||
|
|
||||||
|
If you convey a covered work, knowingly relying on a patent license, and the
|
||||||
|
Corresponding Source of the work is not available for anyone to copy, free of
|
||||||
|
charge and under the terms of this License, through a publicly available
|
||||||
|
network server or other readily accessible means, then you must either
|
||||||
|
|
||||||
|
1. cause the Corresponding Source to be so available, or
|
||||||
|
2. arrange to deprive yourself of the benefit of the patent license for this
|
||||||
|
particular work, or
|
||||||
|
3. arrange, in a manner consistent with the requirements of this License, to
|
||||||
|
extend the patent license to downstream recipients.
|
||||||
|
|
||||||
|
*Knowingly relying* means you have actual knowledge that, but for the patent
|
||||||
|
license, your conveying the covered work in a country, or your recipient's use
|
||||||
|
of the covered work in a country, would infringe one or more identifiable
|
||||||
|
patents in that country that you have reason to believe are valid.
|
||||||
|
|
||||||
|
If, pursuant to or in connection with a single transaction or arrangement, you
|
||||||
|
convey, or propagate by procuring conveyance of, a covered work, and grant a
|
||||||
|
patent license to some of the parties receiving the covered work authorizing
|
||||||
|
them to use, propagate, modify or convey a specific copy of the covered work,
|
||||||
|
then the patent license you grant is automatically extended to all recipients
|
||||||
|
of the covered work and works based on it.
|
||||||
|
|
||||||
|
A patent license is *discriminatory* if it does not include within the scope of
|
||||||
|
its coverage, prohibits the exercise of, or is conditioned on the non-exercise
|
||||||
|
of one or more of the rights that are specifically granted under this License.
|
||||||
|
You may not convey a covered work if you are a party to an arrangement with a
|
||||||
|
third party that is in the business of distributing software, under which you
|
||||||
|
make payment to the third party based on the extent of your activity of
|
||||||
|
conveying the work, and under which the third party grants, to any of the
|
||||||
|
parties who would receive the covered work from you, a discriminatory patent
|
||||||
|
license
|
||||||
|
|
||||||
|
- a) in connection with copies of the covered work conveyed by you (or copies
|
||||||
|
made from those copies), or
|
||||||
|
- b) primarily for and in connection with specific products or compilations
|
||||||
|
that contain the covered work, unless you entered into that arrangement, or
|
||||||
|
that patent license was granted, prior to 28 March 2007.
|
||||||
|
|
||||||
|
Nothing in this License shall be construed as excluding or limiting any implied
|
||||||
|
license or other defenses to infringement that may otherwise be available to
|
||||||
|
you under applicable patent law.
|
||||||
|
|
||||||
|
### 12. No Surrender of Others' Freedom.
|
||||||
|
|
||||||
|
If conditions are imposed on you (whether by court order, agreement or
|
||||||
|
otherwise) that contradict the conditions of this License, they do not excuse
|
||||||
|
you from the conditions of this License. If you cannot convey a covered work so
|
||||||
|
as to satisfy simultaneously your obligations under this License and any other
|
||||||
|
pertinent obligations, then as a consequence you may not convey it at all. For
|
||||||
|
example, if you agree to terms that obligate you to collect a royalty for
|
||||||
|
further conveying from those to whom you convey the Program, the only way you
|
||||||
|
could satisfy both those terms and this License would be to refrain entirely
|
||||||
|
from conveying the Program.
|
||||||
|
|
||||||
|
### 13. Use with the GNU Affero General Public License.
|
||||||
|
|
||||||
|
Notwithstanding any other provision of this License, you have permission to
|
||||||
|
link or combine any covered work with a work licensed under version 3 of the
|
||||||
|
GNU Affero General Public License into a single combined work, and to convey
|
||||||
|
the resulting work. The terms of this License will continue to apply to the
|
||||||
|
part which is the covered work, but the special requirements of the GNU Affero
|
||||||
|
General Public License, section 13, concerning interaction through a network
|
||||||
|
will apply to the combination as such.
|
||||||
|
|
||||||
|
### 14. Revised Versions of this License.
|
||||||
|
|
||||||
|
The Free Software Foundation may publish revised and/or new versions of the GNU
|
||||||
|
General Public License from time to time. Such new versions will be similar in
|
||||||
|
spirit to the present version, but may differ in detail to address new problems
|
||||||
|
or concerns.
|
||||||
|
|
||||||
|
Each version is given a distinguishing version number. If the Program specifies
|
||||||
|
that a certain numbered version of the GNU General Public License *or any later
|
||||||
|
version* applies to it, you have the option of following the terms and
|
||||||
|
conditions either of that numbered version or of any later version published by
|
||||||
|
the Free Software Foundation. If the Program does not specify a version number
|
||||||
|
of the GNU General Public License, you may choose any version ever published by
|
||||||
|
the Free Software Foundation.
|
||||||
|
|
||||||
|
If the Program specifies that a proxy can decide which future versions of the
|
||||||
|
GNU General Public License can be used, that proxy's public statement of
|
||||||
|
acceptance of a version permanently authorizes you to choose that version for
|
||||||
|
the Program.
|
||||||
|
|
||||||
|
Later license versions may give you additional or different permissions.
|
||||||
|
However, no additional obligations are imposed on any author or copyright
|
||||||
|
holder as a result of your choosing to follow a later version.
|
||||||
|
|
||||||
|
### 15. Disclaimer of Warranty.
|
||||||
|
|
||||||
|
THERE IS NO WARRANTY FOR THE PROGRAM, TO THE EXTENT PERMITTED BY APPLICABLE
|
||||||
|
LAW. EXCEPT WHEN OTHERWISE STATED IN WRITING THE COPYRIGHT HOLDERS AND/OR OTHER
|
||||||
|
PARTIES PROVIDE THE PROGRAM *AS IS* WITHOUT WARRANTY OF ANY KIND, EITHER
|
||||||
|
EXPRESSED OR IMPLIED, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
|
||||||
|
MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE. THE ENTIRE RISK AS TO THE
|
||||||
|
QUALITY AND PERFORMANCE OF THE PROGRAM IS WITH YOU. SHOULD THE PROGRAM PROVE
|
||||||
|
DEFECTIVE, YOU ASSUME THE COST OF ALL NECESSARY SERVICING, REPAIR OR
|
||||||
|
CORRECTION.
|
||||||
|
|
||||||
|
### 16. Limitation of Liability.
|
||||||
|
|
||||||
|
IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING WILL ANY
|
||||||
|
COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MODIFIES AND/OR CONVEYS THE PROGRAM AS
|
||||||
|
PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES, INCLUDING ANY GENERAL, SPECIAL,
|
||||||
|
INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING OUT OF THE USE OR INABILITY TO USE
|
||||||
|
THE PROGRAM (INCLUDING BUT NOT LIMITED TO LOSS OF DATA OR DATA BEING RENDERED
|
||||||
|
INACCURATE OR LOSSES SUSTAINED BY YOU OR THIRD PARTIES OR A FAILURE OF THE
|
||||||
|
PROGRAM TO OPERATE WITH ANY OTHER PROGRAMS), EVEN IF SUCH HOLDER OR OTHER PARTY
|
||||||
|
HAS BEEN ADVISED OF THE POSSIBILITY OF SUCH DAMAGES.
|
||||||
|
|
||||||
|
### 17. Interpretation of Sections 15 and 16.
|
||||||
|
|
||||||
|
If the disclaimer of warranty and limitation of liability provided above cannot
|
||||||
|
be given local legal effect according to their terms, reviewing courts shall
|
||||||
|
apply local law that most closely approximates an absolute waiver of all civil
|
||||||
|
liability in connection with the Program, unless a warranty or assumption of
|
||||||
|
liability accompanies a copy of the Program in return for a fee.
|
||||||
|
|
||||||
|
## END OF TERMS AND CONDITIONS ###
|
||||||
|
|
||||||
|
### How to Apply These Terms to Your New Programs
|
||||||
|
|
||||||
|
If you develop a new program, and you want it to be of the greatest possible
|
||||||
|
use to the public, the best way to achieve this is to make it free software
|
||||||
|
which everyone can redistribute and change under these terms.
|
||||||
|
|
||||||
|
To do so, attach the following notices to the program. It is safest to attach
|
||||||
|
them to the start of each source file to most effectively state the exclusion
|
||||||
|
of warranty; and each file should have at least the *copyright* line and a
|
||||||
|
pointer to where the full notice is found.
|
||||||
|
|
||||||
|
<one line to give the program's name and a brief idea of what it does.>
|
||||||
|
Copyright (C) <year> <name of author>
|
||||||
|
|
||||||
|
This program is free software: you can redistribute it and/or modify
|
||||||
|
it under the terms of the GNU General Public License as published by
|
||||||
|
the Free Software Foundation, either version 3 of the License, or
|
||||||
|
(at your option) any later version.
|
||||||
|
|
||||||
|
This program is distributed in the hope that it will be useful,
|
||||||
|
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||||
|
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||||
|
GNU General Public License for more details.
|
||||||
|
|
||||||
|
You should have received a copy of the GNU General Public License
|
||||||
|
along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||||
|
|
||||||
|
Also add information on how to contact you by electronic and paper mail.
|
||||||
|
|
||||||
|
If the program does terminal interaction, make it output a short notice like
|
||||||
|
this when it starts in an interactive mode:
|
||||||
|
|
||||||
|
<program> Copyright (C) <year> <name of author>
|
||||||
|
This program comes with ABSOLUTELY NO WARRANTY; for details type `show w'.
|
||||||
|
This is free software, and you are welcome to redistribute it
|
||||||
|
under certain conditions; type `show c' for details.
|
||||||
|
|
||||||
|
The hypothetical commands `show w` and `show c` should show the appropriate
|
||||||
|
parts of the General Public License. Of course, your program's commands might
|
||||||
|
be different; for a GUI interface, you would use an *about box*.
|
||||||
|
|
||||||
|
You should also get your employer (if you work as a programmer) or school, if
|
||||||
|
any, to sign a *copyright disclaimer* for the program, if necessary. For more
|
||||||
|
information on this, and how to apply and follow the GNU GPL, see
|
||||||
|
[http://www.gnu.org/licenses/](http://www.gnu.org/licenses/).
|
||||||
|
|
||||||
|
The GNU General Public License does not permit incorporating your program into
|
||||||
|
proprietary programs. If your program is a subroutine library, you may consider
|
||||||
|
it more useful to permit linking proprietary applications with the library. If
|
||||||
|
this is what you want to do, use the GNU Lesser General Public License instead
|
||||||
|
of this License. But first, please read
|
||||||
|
[http://www.gnu.org/philosophy/why-not-lgpl.html](http://www.gnu.org/philosophy/why-not-lgpl.html).
|
||||||
49
widget/README.md
Normal file
49
widget/README.md
Normal file
|
|
@ -0,0 +1,49 @@
|
||||||
|
# Widget - Rython Task Bot v2
|
||||||
|
|
||||||
|
## Instructions
|
||||||
|
|
||||||
|
### Websocket Server
|
||||||
|
|
||||||
|
Websocket server running is required for browser source to work.
|
||||||
|
|
||||||
|
> 
|
||||||
|
|
||||||
|
1. Streamer.Bot -> Servers/Clients -> Websocket Server
|
||||||
|
2. Auto Start: `ON`; Click on `Start Server`
|
||||||
|
3. If port number already taken, change port number
|
||||||
|
4. Ensure that [config.js](./config.js)'s websocket settings are in-sync with Streamer.Bot's
|
||||||
|
|
||||||
|
### OBS
|
||||||
|
|
||||||
|
1. Add a new browser source in your scene
|
||||||
|
2. Tick on "Local"
|
||||||
|
3. Navigate to the index.html file
|
||||||
|
4. Optionally customise the width and height
|
||||||
|
5. Click on "Ok"
|
||||||
|
|
||||||
|
## Style Customisation
|
||||||
|
|
||||||
|
Note: `styles/structure.css` is meant to be the bare structure to allow the task widget to be functional.
|
||||||
|
|
||||||
|
Customise the styles in `styles/style.css`, whether it's through the CSS variables (in `:root`), or the CSS below it.
|
||||||
|
|
||||||
|
### Fonts
|
||||||
|
|
||||||
|
You can import Google fonts into your style.css:
|
||||||
|
|
||||||
|
1. Open [Google Fonts](https://fonts.google.com/)
|
||||||
|
2. Select your desired fonts
|
||||||
|
3. Click on `View selected families`
|
||||||
|
4. Click on `Get Embed Code`
|
||||||
|
5. Select `@import` under Web
|
||||||
|
6. Copy the import `@import url('...');`
|
||||||
|
7. You can use it in your CSS already!
|
||||||
|
|
||||||
|
```css
|
||||||
|
... {
|
||||||
|
font-family: "Fredoka";
|
||||||
|
/* ... */
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
34
widget/config.js
Normal file
34
widget/config.js
Normal file
|
|
@ -0,0 +1,34 @@
|
||||||
|
"use strict";
|
||||||
|
|
||||||
|
const configs = (function () {
|
||||||
|
const streamerBotSettings = {
|
||||||
|
host: "127.0.0.1",
|
||||||
|
port: 6968,
|
||||||
|
endpoint: "/",
|
||||||
|
};
|
||||||
|
|
||||||
|
const commands = [
|
||||||
|
"!taskhelp",
|
||||||
|
"!add",
|
||||||
|
"!edit",
|
||||||
|
"!done",
|
||||||
|
"!remove",
|
||||||
|
"!focus",
|
||||||
|
"!clearmydone",
|
||||||
|
];
|
||||||
|
|
||||||
|
const twitchSettings = {
|
||||||
|
autoUserColor: true
|
||||||
|
}
|
||||||
|
|
||||||
|
const kickSettings = {
|
||||||
|
autouserColor: true
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
streamerBotSettings,
|
||||||
|
commands,
|
||||||
|
twitchSettings,
|
||||||
|
kickSettings
|
||||||
|
};
|
||||||
|
})();
|
||||||
BIN
widget/images/websocket.png
Normal file
BIN
widget/images/websocket.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 81 KiB |
29
widget/index.html
Normal file
29
widget/index.html
Normal file
|
|
@ -0,0 +1,29 @@
|
||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<script src="./lib/streamerbot-client.js"></script>
|
||||||
|
<script defer src="./config.js"></script>
|
||||||
|
<script defer src="./scripts/tasklist-view.js"></script>
|
||||||
|
<script defer src="./scripts/streamerbot.js"></script>
|
||||||
|
<script defer src="./scripts/header-animation.js"></script>
|
||||||
|
<link rel="stylesheet" href="./styles/style.css" />
|
||||||
|
<link rel="stylesheet" href="./styles/structure.css" />
|
||||||
|
<title>Task List</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="task-panel">
|
||||||
|
<div class="panel-header">
|
||||||
|
<span id="title">!taskhelp</span>
|
||||||
|
</div>
|
||||||
|
<div class="scroll-viewport">
|
||||||
|
<div class="scroll-track" id="scrollTrack">
|
||||||
|
<div class="scroll-content" id="scrollContent">
|
||||||
|
<!-- Sections injected by JS -->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
1
widget/lib/streamerbot-client.js
Normal file
1
widget/lib/streamerbot-client.js
Normal file
File diff suppressed because one or more lines are too long
42
widget/scripts/header-animation.js
Normal file
42
widget/scripts/header-animation.js
Normal file
|
|
@ -0,0 +1,42 @@
|
||||||
|
(function () {
|
||||||
|
const commands = configs.commands;
|
||||||
|
|
||||||
|
const titleEl = document.getElementById("title");
|
||||||
|
let currentIndex = 0;
|
||||||
|
|
||||||
|
const DISPLAY_DURATION = 3000; // how long each command stays visible
|
||||||
|
const FADE_DURATION = 400; // fade in/out duration in ms
|
||||||
|
|
||||||
|
function applyTransition() {
|
||||||
|
titleEl.style.transition = `opacity ${FADE_DURATION}ms ease-in-out`;
|
||||||
|
}
|
||||||
|
|
||||||
|
function fadeOut() {
|
||||||
|
return new Promise((resolve) => {
|
||||||
|
titleEl.style.opacity = "0";
|
||||||
|
setTimeout(resolve, FADE_DURATION);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function fadeIn() {
|
||||||
|
return new Promise((resolve) => {
|
||||||
|
titleEl.style.opacity = "1";
|
||||||
|
setTimeout(resolve, FADE_DURATION);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
async function cycle() {
|
||||||
|
await fadeOut();
|
||||||
|
|
||||||
|
currentIndex = (currentIndex + 1) % commands.length;
|
||||||
|
titleEl.textContent = commands[currentIndex];
|
||||||
|
|
||||||
|
await fadeIn();
|
||||||
|
|
||||||
|
setTimeout(cycle, DISPLAY_DURATION);
|
||||||
|
}
|
||||||
|
|
||||||
|
applyTransition();
|
||||||
|
titleEl.textContent = commands[0];
|
||||||
|
setTimeout(cycle, DISPLAY_DURATION);
|
||||||
|
})();
|
||||||
221
widget/scripts/streamerbot.js
Normal file
221
widget/scripts/streamerbot.js
Normal file
|
|
@ -0,0 +1,221 @@
|
||||||
|
// STREAMER.BOT SETTINGS
|
||||||
|
|
||||||
|
const client = new StreamerbotClient({
|
||||||
|
host: configs.streamerBotSettings.host,
|
||||||
|
port: configs.streamerBotSettings.port,
|
||||||
|
endpoint: configs.streamerBotSettings.endpoint,
|
||||||
|
onConnect: onConnect,
|
||||||
|
onDisconnect: onDisconnect,
|
||||||
|
onError: onError,
|
||||||
|
});
|
||||||
|
|
||||||
|
function getAllLocalstorage() {
|
||||||
|
const allLocalStorage = {};
|
||||||
|
|
||||||
|
for (let i = 0; i < localStorage.length; i++) {
|
||||||
|
const key = localStorage.key(i);
|
||||||
|
allLocalStorage[key] = localStorage.getItem(key);
|
||||||
|
}
|
||||||
|
|
||||||
|
return JSON.stringify(allLocalStorage);
|
||||||
|
}
|
||||||
|
|
||||||
|
client.on("General.Custom", (data) => onCustom(data));
|
||||||
|
if (configs.twitchSettings.autoUserColor) {
|
||||||
|
client.on("Twitch.ChatMessage", (data) => onTwitchFirstWord(data));
|
||||||
|
}
|
||||||
|
|
||||||
|
let taskList;
|
||||||
|
let userColors = {};
|
||||||
|
|
||||||
|
function parseHexColor(hex) {
|
||||||
|
if (typeof hex !== "string") return null;
|
||||||
|
const s = hex.trim();
|
||||||
|
const m = /^#?([0-9a-f]{3}|[0-9a-f]{6})$/i.exec(s);
|
||||||
|
if (!m) return null;
|
||||||
|
let h = m[1].toLowerCase();
|
||||||
|
if (h.length === 3) {
|
||||||
|
h = h
|
||||||
|
.split("")
|
||||||
|
.map((c) => c + c)
|
||||||
|
.join("");
|
||||||
|
}
|
||||||
|
const r = parseInt(h.slice(0, 2), 16);
|
||||||
|
const g = parseInt(h.slice(2, 4), 16);
|
||||||
|
const b = parseInt(h.slice(4, 6), 16);
|
||||||
|
return { r, g, b };
|
||||||
|
}
|
||||||
|
|
||||||
|
function relativeLuminance({ r, g, b }) {
|
||||||
|
const toLinear = (v) => {
|
||||||
|
const s = v / 255;
|
||||||
|
return s <= 0.04045 ? s / 12.92 : Math.pow((s + 0.055) / 1.055, 2.4);
|
||||||
|
};
|
||||||
|
const R = toLinear(r);
|
||||||
|
const G = toLinear(g);
|
||||||
|
const B = toLinear(b);
|
||||||
|
return 0.2126 * R + 0.7152 * G + 0.0722 * B;
|
||||||
|
}
|
||||||
|
|
||||||
|
async function onTwitchFirstWord(data) {
|
||||||
|
let userColor = data.data.user.color; // hex colour #FF69B4
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
if (userColor != undefined || userColor != 'undefined') {
|
||||||
|
// update localstorage
|
||||||
|
// get id: platform-userID
|
||||||
|
let userId = data.data.user.id;
|
||||||
|
let key = `twitch-${userId}`;
|
||||||
|
|
||||||
|
localStorage.setItem(`${key}-color`, userColor);
|
||||||
|
userColors[`${key}-color`] = userColor;
|
||||||
|
}
|
||||||
|
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
function onDisconnect() {
|
||||||
|
showConnectionError("Connection Failed: Unable to connect to Streamer.bot");
|
||||||
|
}
|
||||||
|
|
||||||
|
function onError(err) {
|
||||||
|
showConnectionError(
|
||||||
|
"Connection Failed: " + (err?.message || "Unknown error"),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function showConnectionError(message) {
|
||||||
|
// Remove existing popup if any
|
||||||
|
const existing = document.getElementById("connection-error");
|
||||||
|
if (existing) existing.remove();
|
||||||
|
|
||||||
|
const popup = document.createElement("div");
|
||||||
|
popup.id = "connection-error";
|
||||||
|
popup.textContent = message;
|
||||||
|
Object.assign(popup.style, {
|
||||||
|
position: "fixed",
|
||||||
|
top: "20px",
|
||||||
|
left: "50%",
|
||||||
|
transform: "translateX(-50%)",
|
||||||
|
background: "#e53935",
|
||||||
|
color: "#fff",
|
||||||
|
padding: "12px 24px",
|
||||||
|
borderRadius: "8px",
|
||||||
|
fontFamily: "'Fredoka', sans-serif",
|
||||||
|
fontSize: "1.1rem",
|
||||||
|
fontWeight: "700",
|
||||||
|
zIndex: "9999",
|
||||||
|
boxShadow: "0 4px 12px rgba(0,0,0,0.4)",
|
||||||
|
textAlign: "center",
|
||||||
|
});
|
||||||
|
document.body.appendChild(popup);
|
||||||
|
|
||||||
|
// Auto-dismiss after 5 seconds
|
||||||
|
setTimeout(() => {
|
||||||
|
popup.animate([{ opacity: 1 }, { opacity: 0 }], {
|
||||||
|
duration: 300,
|
||||||
|
fill: "forwards",
|
||||||
|
}).onfinish = () => popup.remove();
|
||||||
|
}, 5000);
|
||||||
|
}
|
||||||
|
|
||||||
|
async function refresh() {
|
||||||
|
const response = await client.getGlobal("rython-task-bot", true);
|
||||||
|
console.log(response);
|
||||||
|
|
||||||
|
if (response.status !== "ok" || !response.variable?.value) return;
|
||||||
|
|
||||||
|
const users = JSON.parse(response.variable.value);
|
||||||
|
const sections = transformToSections(users);
|
||||||
|
|
||||||
|
taskList.load(sections);
|
||||||
|
}
|
||||||
|
|
||||||
|
// LOAD TASK LIST
|
||||||
|
async function onConnect() {
|
||||||
|
taskList = new TaskList(".task-panel");
|
||||||
|
refresh();
|
||||||
|
}
|
||||||
|
|
||||||
|
function transformToSections(users) {
|
||||||
|
return Object.entries(users).map(([userId, userData]) => ({
|
||||||
|
id: userId,
|
||||||
|
title: userData.Username,
|
||||||
|
tasks: userData.Tasks.map((task) => ({
|
||||||
|
text: task.Name,
|
||||||
|
done: task.Completed,
|
||||||
|
focused: task.Focused,
|
||||||
|
})),
|
||||||
|
}));
|
||||||
|
}
|
||||||
|
|
||||||
|
// Update task list action by action
|
||||||
|
function onCustom(payload) {
|
||||||
|
const data = payload.data;
|
||||||
|
if (!data.source && data.source != "rython-task-bot") {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (!taskList) return;
|
||||||
|
const body = data.body;
|
||||||
|
const id = data.id;
|
||||||
|
const username = data.username;
|
||||||
|
|
||||||
|
switch (body.mode) {
|
||||||
|
case "add":
|
||||||
|
// body.task;
|
||||||
|
let taskPayload = {
|
||||||
|
text: body.task,
|
||||||
|
done: body.completed,
|
||||||
|
focused: body.focused,
|
||||||
|
};
|
||||||
|
|
||||||
|
let usernameColor =
|
||||||
|
userColors[id] ?? localStorage.getItem(`${id}-color`);
|
||||||
|
|
||||||
|
if (configs.twitchSettings.autoUserColor && usernameColor != undefined && usernameColor != null) {
|
||||||
|
taskPayload["color"] = usernameColor;
|
||||||
|
}
|
||||||
|
|
||||||
|
taskList.addTask(id, taskPayload, username);
|
||||||
|
break;
|
||||||
|
case "focus":
|
||||||
|
taskList.focusTask(id, body.index, usernameColor);
|
||||||
|
break;
|
||||||
|
case "edit":
|
||||||
|
taskList.editTask(id, body.index, body.task, usernameColor);
|
||||||
|
break;
|
||||||
|
case "remove":
|
||||||
|
taskList.removeTask(id, body.index, usernameColor);
|
||||||
|
break;
|
||||||
|
case "done":
|
||||||
|
taskList.doneTask(id, body.index, usernameColor);
|
||||||
|
break;
|
||||||
|
case "admindelete":
|
||||||
|
taskList.removeSection(body.id);
|
||||||
|
break;
|
||||||
|
case "clearns":
|
||||||
|
refresh();
|
||||||
|
break;
|
||||||
|
case "cleardone":
|
||||||
|
taskList.cleardone();
|
||||||
|
break;
|
||||||
|
case "clearmydone":
|
||||||
|
taskList.clearmydone(id);
|
||||||
|
break;
|
||||||
|
case "clearall":
|
||||||
|
refresh();
|
||||||
|
break;
|
||||||
|
case "undone":
|
||||||
|
taskList.undoneTask(id, body.index);
|
||||||
|
break;
|
||||||
|
case "unfocus":
|
||||||
|
taskList.unfocusTask(id);
|
||||||
|
break;
|
||||||
|
case "admindelete":
|
||||||
|
taskList.removeSection(body.id);
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
580
widget/scripts/tasklist-view.js
Normal file
580
widget/scripts/tasklist-view.js
Normal file
|
|
@ -0,0 +1,580 @@
|
||||||
|
// Task list view
|
||||||
|
|
||||||
|
class TaskList {
|
||||||
|
#data = [];
|
||||||
|
#firstRender = true;
|
||||||
|
#pendingRemovals = 0;
|
||||||
|
|
||||||
|
#scroll = {
|
||||||
|
offset: 0,
|
||||||
|
contentH: 0,
|
||||||
|
viewportH: 0,
|
||||||
|
speed: 50,
|
||||||
|
raf: null,
|
||||||
|
lastT: 0,
|
||||||
|
active: false,
|
||||||
|
wantStop: false,
|
||||||
|
};
|
||||||
|
|
||||||
|
#els = {};
|
||||||
|
|
||||||
|
#ANIM_DURATION = 400;
|
||||||
|
#ANIM_EASING = "cubic-bezier(0.22, 1, 0.36, 1)";
|
||||||
|
|
||||||
|
#parseHexColor(hex) {
|
||||||
|
if (typeof hex !== "string") return null;
|
||||||
|
const s = hex.trim();
|
||||||
|
const m = /^#?([0-9a-f]{3}|[0-9a-f]{6})$/i.exec(s);
|
||||||
|
if (!m) return null;
|
||||||
|
let h = m[1].toLowerCase();
|
||||||
|
if (h.length === 3) {
|
||||||
|
h = h
|
||||||
|
.split("")
|
||||||
|
.map((c) => c + c)
|
||||||
|
.join("");
|
||||||
|
}
|
||||||
|
const r = parseInt(h.slice(0, 2), 16);
|
||||||
|
const g = parseInt(h.slice(2, 4), 16);
|
||||||
|
const b = parseInt(h.slice(4, 6), 16);
|
||||||
|
return { r, g, b };
|
||||||
|
}
|
||||||
|
|
||||||
|
#relativeLuminance({ r, g, b }) {
|
||||||
|
const toLinear = (v) => {
|
||||||
|
const s = v / 255;
|
||||||
|
return s <= 0.04045
|
||||||
|
? s / 12.92
|
||||||
|
: Math.pow((s + 0.055) / 1.055, 2.4);
|
||||||
|
};
|
||||||
|
const R = toLinear(r);
|
||||||
|
const G = toLinear(g);
|
||||||
|
const B = toLinear(b);
|
||||||
|
return 0.2126 * R + 0.7152 * G + 0.0722 * B;
|
||||||
|
}
|
||||||
|
|
||||||
|
constructor(container) {
|
||||||
|
const el =
|
||||||
|
typeof container === "string"
|
||||||
|
? document.querySelector(container)
|
||||||
|
: container;
|
||||||
|
|
||||||
|
this.#els = {
|
||||||
|
track: el.querySelector(".scroll-track"),
|
||||||
|
content: el.querySelector(".scroll-content"),
|
||||||
|
viewport: el.querySelector(".scroll-viewport"),
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── public API ─────────────────────────────────────
|
||||||
|
|
||||||
|
load(sections) {
|
||||||
|
this.#data = structuredClone(sections);
|
||||||
|
this.#render();
|
||||||
|
return this;
|
||||||
|
}
|
||||||
|
|
||||||
|
addSection(section) {
|
||||||
|
this.#data.push(structuredClone(section));
|
||||||
|
this.#render();
|
||||||
|
return this;
|
||||||
|
}
|
||||||
|
|
||||||
|
removeSection(id) {
|
||||||
|
const i = this.#data.findIndex((s) => s.id === id);
|
||||||
|
if (i === -1) return this;
|
||||||
|
this.#data.splice(i, 1);
|
||||||
|
this.#render();
|
||||||
|
return this;
|
||||||
|
}
|
||||||
|
|
||||||
|
updateSection(id, updater) {
|
||||||
|
const section = this.#data.find((s) => s.id === id);
|
||||||
|
if (!section) return this;
|
||||||
|
updater(section);
|
||||||
|
this.#render();
|
||||||
|
return this;
|
||||||
|
}
|
||||||
|
|
||||||
|
addTask(sectionId, task, sectionTitle) {
|
||||||
|
if (!this.#data.find((s) => s.id === sectionId)) {
|
||||||
|
this.addSection({
|
||||||
|
id: sectionId,
|
||||||
|
title: sectionTitle || sectionId,
|
||||||
|
tasks: [],
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
return this.updateSection(sectionId, (s) => {
|
||||||
|
s.tasks.push(structuredClone(task));
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
removeTask(sectionId, taskIndex) {
|
||||||
|
this.updateSection(sectionId, (s) => {
|
||||||
|
s.tasks.splice(taskIndex, 1);
|
||||||
|
});
|
||||||
|
this.#data = this.#data.filter((s) => s.tasks.length > 0);
|
||||||
|
this.#render();
|
||||||
|
return this;
|
||||||
|
}
|
||||||
|
|
||||||
|
editTask(sectionId, taskIndex, newText, userColor) {
|
||||||
|
return this.updateSection(sectionId, (s) => {
|
||||||
|
if (s.tasks[taskIndex]) {
|
||||||
|
s.tasks[taskIndex].text = newText;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
doneTask(sectionId, taskIndex) {
|
||||||
|
return this.updateSection(sectionId, (s) => {
|
||||||
|
if (s.tasks[taskIndex]) {
|
||||||
|
s.tasks[taskIndex].done = true;
|
||||||
|
s.tasks[taskIndex].focused = false;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
undoneTask(sectionId, taskIndex) {
|
||||||
|
return this.updateSection(sectionId, (s) => {
|
||||||
|
if (s.tasks[taskIndex]) {
|
||||||
|
s.tasks[taskIndex].done = false;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
focusTask(sectionId, taskIndex) {
|
||||||
|
// unfocus any previously focused task
|
||||||
|
this.unfocusTask(sectionId);
|
||||||
|
|
||||||
|
return this.updateSection(sectionId, (s) => {
|
||||||
|
if (s.tasks[taskIndex]) {
|
||||||
|
s.tasks[taskIndex].focused = true;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
unfocusTask(sectionId) {
|
||||||
|
return this.updateSection(sectionId, (s) => {
|
||||||
|
for (let i = 0; i < s.tasks.length; i++) {
|
||||||
|
s.tasks[i].focused = false;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
clearmydone(sectionId) {
|
||||||
|
this.updateSection(sectionId, (s) => {
|
||||||
|
s.tasks = s.tasks.filter((t) => !t.done);
|
||||||
|
});
|
||||||
|
this.#data = this.#data.filter((s) => s.tasks.length > 0);
|
||||||
|
this.#render();
|
||||||
|
return this;
|
||||||
|
}
|
||||||
|
|
||||||
|
cleardone() {
|
||||||
|
this.#data.forEach((s) => {
|
||||||
|
s.tasks = s.tasks.filter((t) => !t.done);
|
||||||
|
});
|
||||||
|
this.#data = this.#data.filter((s) => s.tasks.length > 0);
|
||||||
|
this.#render();
|
||||||
|
return this;
|
||||||
|
}
|
||||||
|
|
||||||
|
getData() {
|
||||||
|
return structuredClone(this.#data);
|
||||||
|
}
|
||||||
|
|
||||||
|
get sectionCount() {
|
||||||
|
return this.#data.length;
|
||||||
|
}
|
||||||
|
|
||||||
|
get taskCount() {
|
||||||
|
return this.#data.reduce((sum, s) => sum + s.tasks.length, 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
get doneCount() {
|
||||||
|
return this.#data.reduce(
|
||||||
|
(sum, s) => sum + s.tasks.filter((t) => t.done).length,
|
||||||
|
0,
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
destroy() {
|
||||||
|
this.#forceStop();
|
||||||
|
this.#els.content.innerHTML = "";
|
||||||
|
this.#data = [];
|
||||||
|
this.#firstRender = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── render ─────────────────────────────────────────
|
||||||
|
|
||||||
|
#render() {
|
||||||
|
if (this.#firstRender) {
|
||||||
|
this.#data.forEach((s) =>
|
||||||
|
this.#els.content.appendChild(this.#createSectionEl(s)),
|
||||||
|
);
|
||||||
|
this.#firstRender = false;
|
||||||
|
} else {
|
||||||
|
this.#patchContainer(this.#els.content, this.#data, true);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.#pendingRemovals === 0) {
|
||||||
|
this.#syncScroll();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── animations ─────────────────────────────────────
|
||||||
|
|
||||||
|
#animateIn(el) {
|
||||||
|
el.style.overflow = "hidden";
|
||||||
|
|
||||||
|
const h = el.scrollHeight;
|
||||||
|
el.style.height = "0px";
|
||||||
|
el.style.opacity = "0";
|
||||||
|
|
||||||
|
requestAnimationFrame(() => {
|
||||||
|
const anim = el.animate(
|
||||||
|
[
|
||||||
|
{
|
||||||
|
height: "0px",
|
||||||
|
opacity: 0,
|
||||||
|
transform: "translateX(-8px)",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
height: h + "px",
|
||||||
|
opacity: 1,
|
||||||
|
transform: "translateX(0)",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
{
|
||||||
|
duration: this.#ANIM_DURATION,
|
||||||
|
easing: this.#ANIM_EASING,
|
||||||
|
fill: "forwards",
|
||||||
|
},
|
||||||
|
);
|
||||||
|
|
||||||
|
anim.onfinish = () => {
|
||||||
|
el.style.height = "";
|
||||||
|
el.style.opacity = "";
|
||||||
|
el.style.overflow = "";
|
||||||
|
el.style.transform = "";
|
||||||
|
anim.cancel();
|
||||||
|
this.#syncScroll();
|
||||||
|
};
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
#animateRemove(el) {
|
||||||
|
this.#pendingRemovals++;
|
||||||
|
const h = el.scrollHeight;
|
||||||
|
|
||||||
|
const anim = el.animate(
|
||||||
|
[
|
||||||
|
{ height: h + "px", opacity: 1, transform: "translateX(0)" },
|
||||||
|
{ height: "0px", opacity: 0, transform: "translateX(-8px)" },
|
||||||
|
],
|
||||||
|
{
|
||||||
|
duration: this.#ANIM_DURATION,
|
||||||
|
easing: this.#ANIM_EASING,
|
||||||
|
fill: "forwards",
|
||||||
|
},
|
||||||
|
);
|
||||||
|
|
||||||
|
anim.onfinish = () => {
|
||||||
|
el.remove();
|
||||||
|
this.#pendingRemovals--;
|
||||||
|
|
||||||
|
if (this.#pendingRemovals === 0) {
|
||||||
|
this.#syncScroll();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
#animateStrikethrough(el) {
|
||||||
|
el.animate(
|
||||||
|
[
|
||||||
|
{ opacity: 0.5, transform: "scale(0.98)" },
|
||||||
|
{ opacity: 1, transform: "scale(1)" },
|
||||||
|
],
|
||||||
|
{ duration: 250, easing: "ease-out" },
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── dom helpers ────────────────────────────────────
|
||||||
|
|
||||||
|
#createTaskEl(task, index) {
|
||||||
|
const div = document.createElement("div");
|
||||||
|
div.className =
|
||||||
|
"task" +
|
||||||
|
(task.done ? " done" : "") +
|
||||||
|
(task.focused ? " focused" : "");
|
||||||
|
div.dataset.text = task.text;
|
||||||
|
const numberSpan = document.createElement("span");
|
||||||
|
numberSpan.className = "task-number";
|
||||||
|
numberSpan.textContent = `${index + 1}.`;
|
||||||
|
|
||||||
|
const textSpan = document.createElement("span");
|
||||||
|
textSpan.textContent = task.text;
|
||||||
|
|
||||||
|
div.replaceChildren(numberSpan, textSpan);
|
||||||
|
return div;
|
||||||
|
}
|
||||||
|
|
||||||
|
#createSectionEl(section) {
|
||||||
|
const div = document.createElement("div");
|
||||||
|
div.className = "section";
|
||||||
|
div.dataset.key = section.id;
|
||||||
|
if (section.title) {
|
||||||
|
const t = document.createElement("div");
|
||||||
|
t.className = "section-title";
|
||||||
|
t.textContent = section.title;
|
||||||
|
let color =
|
||||||
|
section.color ?? localStorage.getItem(`${section.id}-color`);
|
||||||
|
if (
|
||||||
|
configs.twitchSettings.autoUserColor &&
|
||||||
|
color != undefined &&
|
||||||
|
color != "undefined" &&
|
||||||
|
color != null
|
||||||
|
) {
|
||||||
|
t.style.setProperty("--user-color", color);
|
||||||
|
t.classList.add("has-user-color");
|
||||||
|
}
|
||||||
|
|
||||||
|
div.appendChild(t);
|
||||||
|
}
|
||||||
|
section.tasks.forEach((task, i) =>
|
||||||
|
div.appendChild(this.#createTaskEl(task, i)),
|
||||||
|
);
|
||||||
|
return div;
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── patching ───────────────────────────────────────
|
||||||
|
|
||||||
|
#patchTasks(sectionEl, tasks, animate) {
|
||||||
|
const existing = [...sectionEl.querySelectorAll(":scope > .task")];
|
||||||
|
|
||||||
|
tasks.forEach((task, i) => {
|
||||||
|
if (i < existing.length) {
|
||||||
|
const el = existing[i];
|
||||||
|
const wantClass =
|
||||||
|
"task" +
|
||||||
|
(task.done ? " done" : "") +
|
||||||
|
(task.focused ? " focused" : "");
|
||||||
|
if (el.className !== wantClass) {
|
||||||
|
el.className = wantClass;
|
||||||
|
if (animate) this.#animateStrikethrough(el);
|
||||||
|
}
|
||||||
|
if (el.dataset.text !== task.text) {
|
||||||
|
el.dataset.text = task.text;
|
||||||
|
el.querySelector("span:last-child").textContent = task.text;
|
||||||
|
}
|
||||||
|
el.querySelector(".task-number").textContent = `${i + 1}.`;
|
||||||
|
|
||||||
|
// Update color if changed
|
||||||
|
if (task.color != undefined && task.color != "undefined") {
|
||||||
|
el.style.setProperty("--user-color", task.color);
|
||||||
|
el.classList.add("has-user-color");
|
||||||
|
} else {
|
||||||
|
el.style.removeProperty("--user-color");
|
||||||
|
el.classList.remove("has-user-color");
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
const newEl = this.#createTaskEl(task, i);
|
||||||
|
sectionEl.appendChild(newEl);
|
||||||
|
if (animate) this.#animateIn(newEl);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
for (let i = existing.length - 1; i >= tasks.length; i--) {
|
||||||
|
if (animate) {
|
||||||
|
this.#animateRemove(existing[i]);
|
||||||
|
} else {
|
||||||
|
existing[i].remove();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#patchContainer(container, sections, animate) {
|
||||||
|
const oldMap = new Map();
|
||||||
|
container.querySelectorAll(":scope > .section").forEach((el) => {
|
||||||
|
oldMap.set(el.dataset.key, el);
|
||||||
|
});
|
||||||
|
|
||||||
|
let cursor = container.firstElementChild;
|
||||||
|
|
||||||
|
sections.forEach((section) => {
|
||||||
|
const key = section.id;
|
||||||
|
const existing = oldMap.get(key);
|
||||||
|
|
||||||
|
if (existing) {
|
||||||
|
this.#patchTasks(existing, section.tasks, animate);
|
||||||
|
if (existing !== cursor) {
|
||||||
|
container.insertBefore(existing, cursor);
|
||||||
|
} else {
|
||||||
|
cursor = cursor.nextElementSibling;
|
||||||
|
}
|
||||||
|
oldMap.delete(key);
|
||||||
|
} else {
|
||||||
|
const newEl = this.#createSectionEl(section);
|
||||||
|
container.insertBefore(newEl, cursor);
|
||||||
|
if (animate) this.#animateIn(newEl);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
oldMap.forEach((el) => {
|
||||||
|
if (animate) {
|
||||||
|
this.#animateRemove(el);
|
||||||
|
} else {
|
||||||
|
el.remove();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── scroll ─────────────────────────────────────────
|
||||||
|
|
||||||
|
#tick = (now) => {
|
||||||
|
const s = this.#scroll;
|
||||||
|
const dt = (now - s.lastT) / 1000;
|
||||||
|
s.lastT = now;
|
||||||
|
|
||||||
|
if (dt < 0.2) {
|
||||||
|
s.contentH = this.#els.content.scrollHeight;
|
||||||
|
s.offset += s.speed * dt;
|
||||||
|
|
||||||
|
if (s.contentH > 0 && s.offset >= s.contentH) {
|
||||||
|
s.offset -= s.contentH;
|
||||||
|
|
||||||
|
if (s.wantStop) {
|
||||||
|
s.wantStop = false;
|
||||||
|
this.#forceStop();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
this.#els.track.style.transform = `translateY(${-s.offset}px)`;
|
||||||
|
}
|
||||||
|
|
||||||
|
s.raf = requestAnimationFrame(this.#tick);
|
||||||
|
};
|
||||||
|
|
||||||
|
#startScroll() {
|
||||||
|
const s = this.#scroll;
|
||||||
|
s.wantStop = false;
|
||||||
|
if (s.active) return;
|
||||||
|
s.active = true;
|
||||||
|
s.lastT = performance.now();
|
||||||
|
s.raf = requestAnimationFrame(this.#tick);
|
||||||
|
}
|
||||||
|
|
||||||
|
#requestStop() {
|
||||||
|
if (!this.#scroll.active) return;
|
||||||
|
this.#scroll.wantStop = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
#forceStop() {
|
||||||
|
const s = this.#scroll;
|
||||||
|
s.active = false;
|
||||||
|
s.wantStop = false;
|
||||||
|
cancelAnimationFrame(s.raf);
|
||||||
|
s.raf = null;
|
||||||
|
s.offset = 0;
|
||||||
|
this.#els.track.style.transform = "";
|
||||||
|
|
||||||
|
const clone = this.#els.track.querySelector(".scroll-clone");
|
||||||
|
if (clone) clone.remove();
|
||||||
|
}
|
||||||
|
|
||||||
|
#syncScroll() {
|
||||||
|
const s = this.#scroll;
|
||||||
|
s.contentH = this.#els.content.scrollHeight;
|
||||||
|
s.viewportH = this.#els.viewport.clientHeight;
|
||||||
|
const needs = s.contentH > s.viewportH;
|
||||||
|
|
||||||
|
let clone = this.#els.track.querySelector(".scroll-clone");
|
||||||
|
|
||||||
|
if (needs) {
|
||||||
|
if (!clone) {
|
||||||
|
clone = this.#els.content.cloneNode(true);
|
||||||
|
clone.id = "";
|
||||||
|
clone.classList.add("scroll-clone");
|
||||||
|
this.#els.track.appendChild(clone);
|
||||||
|
} else {
|
||||||
|
this.#patchContainer(clone, this.#data, false);
|
||||||
|
}
|
||||||
|
if (s.offset >= s.contentH) {
|
||||||
|
s.offset %= s.contentH;
|
||||||
|
}
|
||||||
|
this.#startScroll();
|
||||||
|
} else {
|
||||||
|
if (s.active) {
|
||||||
|
if (clone) this.#patchContainer(clone, this.#data, false);
|
||||||
|
this.#requestStop();
|
||||||
|
} else {
|
||||||
|
if (clone) clone.remove();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── usage ──────────────────────────────────────────────
|
||||||
|
|
||||||
|
// const list2 = new TaskList(".task-panel");
|
||||||
|
|
||||||
|
// list2.load([
|
||||||
|
// {
|
||||||
|
// title: "someone",
|
||||||
|
// tasks: [
|
||||||
|
// { text: "dinner" },
|
||||||
|
// { text: "watch bad bunny halftime show" },
|
||||||
|
// { text: "tie tf down", done: true },
|
||||||
|
// { text: "boy dinner", done: true },
|
||||||
|
// { text: "3 hour SOOP" },
|
||||||
|
// ],
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// title: "Cape_Codder",
|
||||||
|
// tasks: [
|
||||||
|
// { text: "Part 2", done: true },
|
||||||
|
// { text: "Ch 1-2", done: true },
|
||||||
|
// ],
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// title: "sunflawer",
|
||||||
|
// tasks: [
|
||||||
|
// { text: "fix walls from home office" },
|
||||||
|
// { text: "sand walls zzzsdkjhfsk", done: true },
|
||||||
|
// { text: "meal prep" },
|
||||||
|
// { text: "buy wrist brace maybe" },
|
||||||
|
// ],
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// title: "extra_user1",
|
||||||
|
// tasks: [
|
||||||
|
// { text: "go grocery shopping" },
|
||||||
|
// { text: "clean the kitchen", done: true },
|
||||||
|
// { text: "respond to emails" },
|
||||||
|
// ],
|
||||||
|
// },
|
||||||
|
// ]);
|
||||||
|
|
||||||
|
// demo
|
||||||
|
|
||||||
|
// setTimeout(() => {
|
||||||
|
// list2.addTask("someone2", { text: "new task just dropped" });
|
||||||
|
// }, 1000);
|
||||||
|
|
||||||
|
// setTimeout(() => {
|
||||||
|
// list2.;
|
||||||
|
// }, 3000);
|
||||||
|
|
||||||
|
// setTimeout(() => {
|
||||||
|
// list.toggleTask("sunflawer", 0);
|
||||||
|
// }, 10000);
|
||||||
|
|
||||||
|
// setTimeout(() => {
|
||||||
|
// list.removeSection("Cape_Codder");
|
||||||
|
// }, 12000);
|
||||||
|
|
||||||
|
// setTimeout(() => {
|
||||||
|
// list.removeTask("extra_user1", 1);
|
||||||
|
// }, 14000);
|
||||||
BIN
widget/styles/fonts/Fredoka-Bold.ttf
Normal file
BIN
widget/styles/fonts/Fredoka-Bold.ttf
Normal file
Binary file not shown.
BIN
widget/styles/fonts/Fredoka-Regular.ttf
Normal file
BIN
widget/styles/fonts/Fredoka-Regular.ttf
Normal file
Binary file not shown.
55
widget/styles/structure.css
Normal file
55
widget/styles/structure.css
Normal file
|
|
@ -0,0 +1,55 @@
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
min-height: 100vh;
|
||||||
|
background: rgba(0, 0, 0, 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
.task-panel {
|
||||||
|
overflow: hidden;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel-header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.scroll-viewport {
|
||||||
|
flex: 1;
|
||||||
|
overflow: hidden;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.scroll-track {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes infiniteScroll {
|
||||||
|
0% {
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: translateY(-50%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.scroll-track.animating {
|
||||||
|
animation: infiniteScroll linear infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.task {
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
}
|
||||||
131
widget/styles/style.css
Normal file
131
widget/styles/style.css
Normal file
|
|
@ -0,0 +1,131 @@
|
||||||
|
/* ========================================
|
||||||
|
🎨 CUSTOMIZATION VARIABLES
|
||||||
|
Change the values below to customize!
|
||||||
|
======================================== */
|
||||||
|
:root {
|
||||||
|
/* -- Background & Panel -- */
|
||||||
|
--panel-header-background: #141414; /* Header background color */
|
||||||
|
--panel-background: #141414c0; /* Body background color */
|
||||||
|
--panel-border-radius: 12px; /* Roundness of panel corners */
|
||||||
|
|
||||||
|
/* -- Text Colors -- */
|
||||||
|
--text-color: #fafafa; /* Main text color */
|
||||||
|
--done-task-color: #aaa; /* Color of completed tasks */
|
||||||
|
--focused-text-color: #141414; /* Text color when a task is focused */
|
||||||
|
|
||||||
|
/* -- Focused Task Highlight -- */
|
||||||
|
--focused-background: #ffffff; /* Background color of the focused task */
|
||||||
|
--focused-border-radius: 4px; /* Roundness of focused task corners */
|
||||||
|
--focused-padding: 2px 4px; /* Spacing inside focused task highlight */
|
||||||
|
|
||||||
|
/* -- Font Sizes -- */
|
||||||
|
--title-font-size: 1.5rem; /* Size of the panel title */
|
||||||
|
--section-title-font-size: 1.25rem; /* Size of section headings */
|
||||||
|
--header-font-size: 14px; /* Size of the header text */
|
||||||
|
--header-subtitle-font-size: 13px; /* Size of the header subtitle */
|
||||||
|
--task-font-size: 1.2rem; /* Size of task text */
|
||||||
|
|
||||||
|
/* -- Borders & Dividers -- */
|
||||||
|
--header-border-color: #e0dbd5; /* Line below the header */
|
||||||
|
--section-border-color: white; /* Line between sections */
|
||||||
|
|
||||||
|
/* -- Spacing -- */
|
||||||
|
--header-padding: 16px 16px 12px; /* Spacing inside the header */
|
||||||
|
--section-padding: 10px 16px 6px; /* Spacing inside each section */
|
||||||
|
--task-gap: 6px; /* Gap between task items */
|
||||||
|
--task-padding: 3px 0; /* Spacing around each task */
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: "Fredoka";
|
||||||
|
src: url("./fonts/Fredoka-Regular.ttf") format("truetype");
|
||||||
|
font-weight: 400;
|
||||||
|
font-style: normal;
|
||||||
|
font-display: swap;
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: "Fredoka";
|
||||||
|
src: url("./fonts/Fredoka-Bold.ttf") format("truetype");
|
||||||
|
font-weight: 700;
|
||||||
|
font-style: normal;
|
||||||
|
font-display: swap;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: "Fredoka", Roboto, sans-serif;
|
||||||
|
background: rgba(0, 0, 0, 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
.task-panel {
|
||||||
|
width: 100%;
|
||||||
|
height: 100vh;
|
||||||
|
background: var(--panel-background);
|
||||||
|
border-radius: var(--panel-border-radius);
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel-header {
|
||||||
|
padding: var(--header-padding);
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: var(--header-font-size);
|
||||||
|
color: var(--text-color);
|
||||||
|
background: var(--panel-header-background);
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel-header span:last-child {
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--text-color);
|
||||||
|
font-size: var(--header-subtitle-font-size);
|
||||||
|
}
|
||||||
|
|
||||||
|
.section {
|
||||||
|
padding: var(--section-padding);
|
||||||
|
border-top: 2px solid var(--section-border-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.section:last-child {
|
||||||
|
padding-bottom: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-title {
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: var(--section-title-font-size);
|
||||||
|
color: var(--text-color);
|
||||||
|
margin-bottom: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.task {
|
||||||
|
gap: var(--task-gap);
|
||||||
|
padding: var(--task-padding);
|
||||||
|
font-size: var(--task-font-size);
|
||||||
|
color: var(--text-color);
|
||||||
|
line-height: 1.4;
|
||||||
|
width: fit-content;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-title.has-user-color {
|
||||||
|
color: var(--user-color); /*auto user color*/
|
||||||
|
}
|
||||||
|
|
||||||
|
.task.done,
|
||||||
|
.task.focused.done {
|
||||||
|
text-decoration: line-through;
|
||||||
|
color: var(--done-task-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.task.focused:not(.done) {
|
||||||
|
background: var(--focused-background);
|
||||||
|
color: var(--focused-text-color);
|
||||||
|
padding: var(--focused-padding);
|
||||||
|
border-radius: var(--focused-border-radius);
|
||||||
|
}
|
||||||
|
|
||||||
|
#title {
|
||||||
|
font-size: var(--title-font-size);
|
||||||
|
}
|
||||||
|
|
||||||
|
.task-number {
|
||||||
|
flex-shrink: 0;
|
||||||
|
min-width: 16px;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
Loading…
Reference in a new issue