diff options
| author | ilotterytea <iltsu@alright.party> | 2025-10-27 00:06:35 +0500 |
|---|---|---|
| committer | ilotterytea <iltsu@alright.party> | 2025-10-27 00:06:35 +0500 |
| commit | afd99384d0ca224907901a92a87963663559589d (patch) | |
| tree | 98577634eecc10994820fd54e82640e0f5892ec9 | |
| parent | 94e74ac79e775253b56384748c619a764d31e091 (diff) | |
feat: generate twitch chat via form
| -rw-r--r-- | index.html | 67 | ||||
| -rw-r--r-- | style.css | 18 | ||||
| -rw-r--r-- | twitch.html | 20 |
3 files changed, 99 insertions, 6 deletions
@@ -0,0 +1,67 @@ +<!DOCTYPE html> +<html> + <head> + <title>ilotterytea's chat widget</title> + <link rel="stylesheet" href="/style.css"> + </head> + <body class="center"> + <h1><img src="/logo.png" alt> ilotterytea's chat widget</h1> + <p>a simple, client-side, lightweight Twitch chat for your streams.</p> + <form action="/twitch.html" method="get"> + <div> + <label for="channel">Channel name:</label> + <input type="text" name="channel" id="channel" + placeholder="forsen"> + </div> + <div> + <label for="fetchrecentmessages">Fetch recent messages:</label> + <input type="checkbox" name="fetchrecentmessages" + id="fetchrecentmessages" + value="1"> + </div> + <div> + <label for="thirdpartyemotes">Enable Third-party emotes + <i>(FFZ, BTTV, 7TV, TinyEmotes)</i>:</label> + <input type="checkbox" name="thirdpartyemotes" + id="thirdpartyemotes" + value="1" checked> + </div> + <div> + <label for="membership">Show joined/parted chatters:</label> + <input type="checkbox" name="membership" id="membership" + value="1"> + </div> + <details> + <summary>More...</summary> + + <div> + <label for="ircserver">IRC server:</label> + <input type="url" name="ircserver" id="ircserver" + placeholder="wss://irc-ws.chat.twitch.tv"> + </div> + + <div> + <label for="ircuser">IRC username:</label> + <input type="name" name="ircuser" id="ircuser" + placeholder="justinfan12345"> + </div> + + <div> + <label for="ircpass">IRC password:</label> + <input type="password" name="ircpass" id="ircpass" + placeholder="65432"> + </div> + + <div> + <label for="tinyemotesinstances">TinyEmotes + instances:</label> + <textarea name="tinyemotesinstances" + id="tinyemotesinstances" + placeholder="1 URL per line"></textarea> + </div> + + </details> + <button type="submit">Generate</button> + </form> + </body> +</html>
\ No newline at end of file @@ -10,6 +10,23 @@ margin: 0; } +body { + font-family: Arial, Helvetica, sans-serif; +} + +form div { + display: block; +} + +.center { + width: 35em; + margin: 0 auto; +} + +.center>* { + margin-bottom: 16px; +} + .messages { display: flex; flex-direction: column; @@ -20,7 +37,6 @@ text-shadow: 1px 1px 2px var(--message-shadow-color); padding: 4px; border-bottom: 1px solid var(--message-shadow-color); - font-family: Arial, Helvetica, sans-serif; font-size: 16px; color: gray; } diff --git a/twitch.html b/twitch.html index 504c752..109c676 100644 --- a/twitch.html +++ b/twitch.html @@ -16,15 +16,23 @@ <script> let user = null; const params = { + "ircserver": "wss://irc-ws.chat.twitch.tv", + "ircuser": "justinfan12345", + "ircpass": "65432", "channel": null, "tinyemotesinstances": null, - "fetchrecentmessages": null + "fetchrecentmessages": null, + "membership": null, + "thirdpartyemotes": null }; const badges = {}; const emotes = {}; window.addEventListener("load", () => { for (const [k, v] of new URLSearchParams(window.location.search)) { + if (v.trim().length == 0) { + continue; + } params[k] = v; } @@ -47,7 +55,7 @@ getRecentMessages(user["login"]); } - connectToChat("wss://irc-ws.chat.twitch.tv", "justinfan12345", "65432", user["login"]); + connectToChat(params.ircserver, params.ircuser, params.ircpass, user["login"]); getTwitchBadges(user["login"], badges); // adding emotes @@ -67,9 +75,11 @@ } } - emotePromises - .reduce((p, fn) => p.then(fn), Promise.resolve()) - .then(() => addSystemMessage("All emotes loaded")); + if (params.thirdpartyemotes) { + emotePromises + .reduce((p, fn) => p.then(fn), Promise.resolve()) + .then(() => addSystemMessage("All emotes loaded")); + } }); }); </script> |