diff --git a/horizontal_widget/.prettierrc b/widgets/horizontal/.prettierrc similarity index 100% rename from horizontal_widget/.prettierrc rename to widgets/horizontal/.prettierrc diff --git a/horizontal_widget/LICENSE.md b/widgets/horizontal/LICENSE.md similarity index 100% rename from horizontal_widget/LICENSE.md rename to widgets/horizontal/LICENSE.md diff --git a/horizontal_widget/README.md b/widgets/horizontal/README.md similarity index 100% rename from horizontal_widget/README.md rename to widgets/horizontal/README.md diff --git a/horizontal_widget/config.js b/widgets/horizontal/config.js similarity index 100% rename from horizontal_widget/config.js rename to widgets/horizontal/config.js diff --git a/horizontal_widget/images/websocket.png b/widgets/horizontal/images/websocket.png similarity index 100% rename from horizontal_widget/images/websocket.png rename to widgets/horizontal/images/websocket.png diff --git a/horizontal_widget/index.html b/widgets/horizontal/index.html similarity index 100% rename from horizontal_widget/index.html rename to widgets/horizontal/index.html diff --git a/horizontal_widget/lib/streamerbot-client.js b/widgets/horizontal/lib/streamerbot-client.js similarity index 100% rename from horizontal_widget/lib/streamerbot-client.js rename to widgets/horizontal/lib/streamerbot-client.js diff --git a/horizontal_widget/scripts/header-animation.js b/widgets/horizontal/scripts/header-animation.js similarity index 100% rename from horizontal_widget/scripts/header-animation.js rename to widgets/horizontal/scripts/header-animation.js diff --git a/horizontal_widget/scripts/streamerbot.js b/widgets/horizontal/scripts/streamerbot.js similarity index 100% rename from horizontal_widget/scripts/streamerbot.js rename to widgets/horizontal/scripts/streamerbot.js diff --git a/horizontal_widget/scripts/tasklist-view.js b/widgets/horizontal/scripts/tasklist-view.js similarity index 100% rename from horizontal_widget/scripts/tasklist-view.js rename to widgets/horizontal/scripts/tasklist-view.js diff --git a/horizontal_widget/styles/fonts/Fredoka-Bold.ttf b/widgets/horizontal/styles/fonts/Fredoka-Bold.ttf similarity index 100% rename from horizontal_widget/styles/fonts/Fredoka-Bold.ttf rename to widgets/horizontal/styles/fonts/Fredoka-Bold.ttf diff --git a/horizontal_widget/styles/fonts/Fredoka-Regular.ttf b/widgets/horizontal/styles/fonts/Fredoka-Regular.ttf similarity index 100% rename from horizontal_widget/styles/fonts/Fredoka-Regular.ttf rename to widgets/horizontal/styles/fonts/Fredoka-Regular.ttf diff --git a/horizontal_widget/styles/structure.css b/widgets/horizontal/styles/structure.css similarity index 100% rename from horizontal_widget/styles/structure.css rename to widgets/horizontal/styles/structure.css diff --git a/horizontal_widget/styles/style.css b/widgets/horizontal/styles/style.css similarity index 100% rename from horizontal_widget/styles/style.css rename to widgets/horizontal/styles/style.css diff --git a/widget/.prettierrc b/widgets/streamer-only/.prettierrc similarity index 100% rename from widget/.prettierrc rename to widgets/streamer-only/.prettierrc diff --git a/widget/LICENSE.md b/widgets/streamer-only/LICENSE.md similarity index 100% rename from widget/LICENSE.md rename to widgets/streamer-only/LICENSE.md diff --git a/widget/README.md b/widgets/streamer-only/README.md similarity index 100% rename from widget/README.md rename to widgets/streamer-only/README.md diff --git a/widgets/streamer-only/config.js b/widgets/streamer-only/config.js new file mode 100644 index 0000000..8155402 --- /dev/null +++ b/widgets/streamer-only/config.js @@ -0,0 +1,37 @@ +"use strict"; + +const configs = (function () { + const streamerBotSettings = { + host: "127.0.0.1", + port: 6968, + endpoint: "/", + }; + + const username = "RythonDev"; + + const commands = [ + "!taskhelp", + "!add", + "!edit", + "!done", + "!remove", + "!focus", + "!clearmydone", + ]; + + const twitchSettings = { + autoUserColor: true, + }; + + const kickSettings = { + autouserColor: true, + }; + + return { + username, + streamerBotSettings, + commands, + twitchSettings, + kickSettings, + }; +})(); diff --git a/widget/images/websocket.png b/widgets/streamer-only/images/websocket.png similarity index 100% rename from widget/images/websocket.png rename to widgets/streamer-only/images/websocket.png diff --git a/widget/index.html b/widgets/streamer-only/index.html similarity index 100% rename from widget/index.html rename to widgets/streamer-only/index.html diff --git a/widget/lib/streamerbot-client.js b/widgets/streamer-only/lib/streamerbot-client.js similarity index 100% rename from widget/lib/streamerbot-client.js rename to widgets/streamer-only/lib/streamerbot-client.js diff --git a/widget/scripts/header-animation.js b/widgets/streamer-only/scripts/header-animation.js similarity index 100% rename from widget/scripts/header-animation.js rename to widgets/streamer-only/scripts/header-animation.js diff --git a/widgets/streamer-only/scripts/streamerbot.js b/widgets/streamer-only/scripts/streamerbot.js new file mode 100644 index 0000000..36bf696 --- /dev/null +++ b/widgets/streamer-only/scripts/streamerbot.js @@ -0,0 +1,224 @@ +// 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 + + 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); + console.log(users); + 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; + } +} diff --git a/widgets/streamer-only/scripts/tasklist-view.js b/widgets/streamer-only/scripts/tasklist-view.js new file mode 100644 index 0000000..455f49b --- /dev/null +++ b/widgets/streamer-only/scripts/tasklist-view.js @@ -0,0 +1,557 @@ +// 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)"; + + 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"), + }; + } + + filterNonStreamer(sections, username) { + return sections.filter( + (s) => s.title.toLowerCase() == username.toLowerCase(), + ); + } + + // ── public API ───────────────────────────────────── + + load(sections) { + this.#data = structuredClone( + this.filterNonStreamer(sections, configs.username), + ); + 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); diff --git a/widget/styles/fonts/Fredoka-Bold.ttf b/widgets/streamer-only/styles/fonts/Fredoka-Bold.ttf similarity index 100% rename from widget/styles/fonts/Fredoka-Bold.ttf rename to widgets/streamer-only/styles/fonts/Fredoka-Bold.ttf diff --git a/widget/styles/fonts/Fredoka-Regular.ttf b/widgets/streamer-only/styles/fonts/Fredoka-Regular.ttf similarity index 100% rename from widget/styles/fonts/Fredoka-Regular.ttf rename to widgets/streamer-only/styles/fonts/Fredoka-Regular.ttf diff --git a/widget/styles/structure.css b/widgets/streamer-only/styles/structure.css similarity index 100% rename from widget/styles/structure.css rename to widgets/streamer-only/styles/structure.css diff --git a/widget/styles/style.css b/widgets/streamer-only/styles/style.css similarity index 100% rename from widget/styles/style.css rename to widgets/streamer-only/styles/style.css diff --git a/widgets/vertical/.prettierrc b/widgets/vertical/.prettierrc new file mode 100644 index 0000000..5e695cb --- /dev/null +++ b/widgets/vertical/.prettierrc @@ -0,0 +1,4 @@ +{ + "tabWidth": 4, + "useTabs": true +} \ No newline at end of file diff --git a/widgets/vertical/LICENSE.md b/widgets/vertical/LICENSE.md new file mode 100644 index 0000000..ad60cea --- /dev/null +++ b/widgets/vertical/LICENSE.md @@ -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. + + + Copyright (C) + + 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 . + +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: + + Copyright (C) + 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). \ No newline at end of file diff --git a/widgets/vertical/README.md b/widgets/vertical/README.md new file mode 100644 index 0000000..f49b08a --- /dev/null +++ b/widgets/vertical/README.md @@ -0,0 +1,49 @@ +# Widget - Rython Task Bot v2 + +## Instructions + +### Websocket Server + +Websocket server running is required for browser source to work. + +> ![websocket](./images/websocket.png) + +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"; + /* ... */ +} +``` + +--- \ No newline at end of file diff --git a/widget/config.js b/widgets/vertical/config.js similarity index 100% rename from widget/config.js rename to widgets/vertical/config.js diff --git a/widgets/vertical/images/websocket.png b/widgets/vertical/images/websocket.png new file mode 100644 index 0000000..9bfc514 Binary files /dev/null and b/widgets/vertical/images/websocket.png differ diff --git a/widgets/vertical/index.html b/widgets/vertical/index.html new file mode 100644 index 0000000..43b57f5 --- /dev/null +++ b/widgets/vertical/index.html @@ -0,0 +1,29 @@ + + + + + + + + + + + + + Task List + + +
+
+ !taskhelp +
+
+
+
+ +
+
+
+
+ + diff --git a/widgets/vertical/lib/streamerbot-client.js b/widgets/vertical/lib/streamerbot-client.js new file mode 100644 index 0000000..1f1ad44 --- /dev/null +++ b/widgets/vertical/lib/streamerbot-client.js @@ -0,0 +1 @@ +"use strict";var Streamerbot=(()=>{var W=Object.create;var p=Object.defineProperty;var L=Object.getOwnPropertyDescriptor;var U=Object.getOwnPropertyNames;var D=Object.getPrototypeOf,H=Object.prototype.hasOwnProperty;var O=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),q=(n,e)=>{for(var t in e)p(n,t,{get:e[t],enumerable:!0})},E=(n,e,t,r)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of U(e))!H.call(n,o)&&o!==t&&p(n,o,{get:()=>e[o],enumerable:!(r=L(e,o))||r.enumerable});return n};var M=(n,e,t)=>(t=n!=null?W(D(n)):{},E(e||!n||!n.__esModule?p(t,"default",{value:n,enumerable:!0}):t,n)),B=n=>E(p({},"__esModule",{value:!0}),n);var G=O((Q,P)=>{"use strict";P.exports=function(){throw new Error("ws does not work in the browser. Browser clients must use the native WebSocket object")}});var _={};q(_,{Client:()=>l});var m=class{constructor(e={}){this.logLevels={verbose:0,debug:1,info:2,warn:3,error:4,none:5};this.level=e.level||"info",this.customLogger=e.customLogger}setLevel(e){this.level=e}setCustomLogger(e){this.customLogger=e}verbose(...e){this.log("verbose",...e)}debug(...e){this.log("debug",...e)}info(...e){this.log("info",...e)}warn(...e){this.log("warn",...e)}error(...e){this.log("error",...e)}log(e,...t){if(!(this.logLevels[e]y.getRandomValues(n);function C(n="req"){return`sb:client:${n}:${Date.now()}-${R(new Uint32Array(12))[0]}`}function k(n){let e;return n.code==1e3?e="Connection closed.":n.code==1001?e='Endpoint is "going away".':n.code==1002?e="Connection closed due to a protocol error.":n.code==1003||n.code==1007||n.code==1008||n.code==1010?e="Bad request.":n.code==1004?e="Reserved":n.code==1005?e="Missing status code.":n.code==1006?e="The connection was closed abnormally.":n.code==1009?e="Message size limit exceeded.":n.code==1011?e="Server terminated connection because due to unexpected condition.":n.code==1015?e="TLS handshake failure":e="Unknown error",e}async function h(n,e){let{timeout:t,message:r="Operation timed out.",controller:o}=e,s;return await Promise.race([new Promise((i,a)=>{s=setTimeout(()=>(o.abort(),console.debug("[withTimeout] timeout reached",e),a(new Error(r))),t),e.signal?.addEventListener("abort",()=>{clearTimeout(s),o?.abort(),a(new Error("Operation aborted."))},{once:!0})}),n]).finally(()=>{clearTimeout(s),o.abort()})}async function S(n){let e=new TextEncoder().encode(n),t=await T.digest("SHA-256",e),o=Array.from(new Uint8Array(t)).map(s=>s.toString(16).padStart(2,"0")).join("");return I(o)}function I(n){let e=new Uint8Array(n.match(/.{1,2}/g).map(r=>parseInt(r,16)));return btoa(String.fromCharCode.apply(null,Array.from(e)))}function v({timeout:n=1e4,addEventListener:e,removeEventListener:t}){let r=C("res"),o=new AbortController,s=o.signal,i=new Promise((a,c)=>{let d=b=>{let f=b?.data;f?.eventName===r&&(o.abort(),a(f?.args))};e("Custom.Event",d);let u=setTimeout(()=>{o.abort(),c(new Error("Timed out waiting for Custom Event"))},n);s.addEventListener("abort",()=>{clearTimeout(u),t(b=>b.events?.includes("Custom.Event")&&b.callback===d)},{once:!0})});return{responseId:r,promise:i,controller:o}}var A={scheme:"ws",host:"127.0.0.1",port:8080,endpoint:"/",immediate:!0,autoReconnect:!0,retries:-1,subscribe:{},logger:w,logLevel:"info"},l=class{constructor(e=A){this._authEnabled=!1;this._authenticated=!1;this.listeners=[];this.subscriptions={};this._explicitlyClosed=!1;this._retried=0;this._connectController=new AbortController;this._reconnectTimeout=void 0;this.options={...A,...e},this.logger=this.options.logger||null,this.logger&&this.options.logLevel&&this.logger.setLevel(this.options.logLevel),this.options.immediate===!0&&this.connect().catch(t=>this.logger?.warn("Failed to connect:",t))}get authenticated(){return!!this.socket&&this.socket.readyState===this.socket.OPEN&&this._authenticated}get ready(){return!this.socket||this.socket.readyState!==this.socket.OPEN||this._authEnabled&&!this._authenticated?!1:!!this.info&&!!this.version}async connect(e=1e4){if(this.socket?.readyState!==this.socket?.CLOSED)try{await this.disconnect()}catch{}this._explicitlyClosed=!1,this._connectController.abort(),this._connectController=new AbortController;let t=new AbortController;return this._connectController.signal.addEventListener("abort",()=>{t.abort()},{once:!0}),await h(new Promise(async(r,o)=>{try{this.options.password&&(this._authEnabled=!0);let s=`${this.options.scheme}://${this.options.host}:${this.options.port}${this.options.endpoint}`;this.logger?.debug("Connecting to Streamer.bot WebSocket server at",s,this._authEnabled?"with authentication":""),this.socket=globalThis?.process?.versions?.node?new(await Promise.resolve().then(()=>M(G(),1))).WebSocket(s):new WebSocket(s),this.socket.onmessage=this.onMessage.bind(this),this.socket.onopen=this.onOpen.bind(this),this.socket.onclose=this.onClose.bind(this),this.socket.onerror=this.onError.bind(this),this.socket.addEventListener("open",()=>{if(!this.socket)return o(new Error("WebSocket not initialized"));r()},{signal:t.signal}),this.socket.addEventListener("close",()=>o(new Error("WebSocket closed")),{once:!0})}catch(s){try{await this.disconnect(),this?.options?.onError?.(s)}catch(i){this.logger?.warn("Error invoking onError handler",i)}o(s)}}),{timeout:e,message:"WebSocket connection timeout exceeded",controller:t})}async disconnect(e=1e3,t=1e3){if(this._explicitlyClosed=!0,this._connectController.abort(),this._reconnectTimeout&&clearTimeout(this._reconnectTimeout),!this.socket||this.socket.readyState===this.socket.CLOSED)return;let r=new AbortController,o=r.signal;return await h(new Promise((s,i)=>{if(this.socket?.addEventListener("close",()=>{this.logger?.debug("Disconnected from Streamer.bot WebSocket server"),s()},{signal:o}),this.socket?.readyState!==this.socket?.CLOSING)try{this.socket?.close(e)}catch(a){i(a)}}),{timeout:t,message:"Timeout exceeded while closing connection",controller:r})}async handshake(){if(!this.socket)throw new Error("WebSocket not initialized");let e=new AbortController,{signal:t}=e;this._connectController.signal.addEventListener("abort",()=>{e.abort()},{once:!0,signal:t});let r=await h(new Promise((o,s)=>{this.socket?.addEventListener("message",async i=>{if(!("data"in i)||!i.data||typeof i.data!="string"){this.logger?.debug("Unknown message received",i);return}try{let a=JSON.parse(i.data);a&&"info"in a&&o(a)}catch(a){this.logger?.warn("Invalid JSON payload received",i.data),s(a)}},{signal:t})}),{timeout:5e3,message:"Handshake timeout exceeded",controller:e});if(!r||!("info"in r))throw new Error("Handshake failed (invalid payload)");if("request"in r&&r?.request==="Hello"&&r.authentication)return await this.authenticate(r);if(r.info&&!r.authentication){this.logger?.debug("Connected to Streamer.bot WebSocket server",r.info),this.info=r.info,this.version=r.info.version;return}throw new Error("Handshake failed (unknown)")}async authenticate(e){if(!this._authEnabled||!this.options.password){if(this.logger?.debug("No password provided for authentication. Checking if auth is enforced for all requests..."),(await this.getInfo()).status==="ok"){this._authenticated=!1,this.version=e.info.version,this.info=e.info;return}throw await this.disconnect(),new Error("Authentication required")}if(!e.authentication)throw this.logger?.debug("Missing authentication payload"),await this.disconnect(),new Error("Invalid authentication payload");this.logger?.debug("Authenticating with Streamer.bot WebSocket server...");let{salt:t,challenge:r}=e?.authentication,o=await S(`${this.options.password}${t}`),s=await S(`${o}${r}`);if((await this.request({request:"Authenticate",authentication:s})).status==="ok")this._authenticated=!0,this.version=e.info.version,this.info=e.info;else throw await this.disconnect(),new Error("Authentication failed")}async onOpen(){this._retried=0,this._reconnectTimeout&&clearTimeout(this._reconnectTimeout);try{this._authEnabled||this.getInfo().catch(()=>this.logger?.debug("Failed to fetch Streamer.bot instance info")),await this.handshake(),this.version&&this.info&&(this.logger?.debug(`Connected to Streamer.bot: v${this.version} (${this.info.name})`),await this.updateSupportedEvents(),this?.options?.onConnect?.(this.info))}catch(e){return this.logger?.warn("Failed handshake with Streamer.bot",e),this.options?.onError?.(e instanceof Error?e:new Error("Failed handshake with Streamer.bot")),await this.disconnect()}try{if(this.options.subscribe==="*"||typeof this.options.subscribe=="object"&&!Array.isArray(this.options.subscribe)&&Object.keys(this.options.subscribe??{}).length)this.logger?.debug("Subscribing to initial events from options:",this.options.subscribe),await this.subscribe(this.options.subscribe);else if(typeof this.options.subscribe=="string"||Array.isArray(this.options.subscribe)){this.logger?.debug("Subscribing to initial events from options:",this.options.subscribe);let e=await this.getSubscriptionsFromEventStrings(this.options.subscribe);this.logger?.debug("Parsed subscriptions from options:",e),e&&await this.subscribe(e)}if(this.listeners.length){let e=await this.getSubscriptionsFromListeners();await this.subscribe(e)}this.logger?.verbose("Subscribed to requested events",this.subscriptions,this.listeners)}catch(e){this.logger?.warn("Error subscribing to requested events",e)}}onClose(e){this._connectController.abort();try{(e.type==="error"||!e.wasClean)&&this.options.onError&&this?.options?.onError(new Error(k(e))),this?.options?.onDisconnect?.()}catch(t){this.logger?.warn("Error invoking user-provided onDisconnect handler",t)}if(this._explicitlyClosed||!this.options.autoReconnect)return this.logger?.debug("Cleaning up..."),this.cleanup();this._retried+=1,typeof this.options.retries=="number"&&(this.options.retries<0||this._retried{if(!(this.socket&&this.socket.readyState!==this.socket.CLOSED)){this.logger?.debug(`Reconnecting... (attempt ${this._retried})`);try{await this.connect(1e4)}catch(t){this._retried&&this.logger?.warn(`Failed to reconnect (attempt ${this._retried-1})`,t)}}},Math.min(3e4,this._retried*1e3))):(this.logger?.debug("Auto-reconnect limit reached. Cleaning up..."),this.cleanup())}async onMessage(e){if(!e.data||typeof e.data!="string"){this.logger?.debug("Unknown message received",e);return}let t;try{t=JSON.parse(e.data)}catch(r){this.logger?.warn("Invalid JSON payload received",e.data,r);return}this.logger?.verbose("RECV",t);try{this.options.onData&&this?.options?.onData(t)}catch(r){this.logger?.warn("Error occurred within user-provided onData callback",r)}if(t?.event?.source&&t?.event?.type){for(let r of this.listeners)if(r.events?.length&&r.events.find(o=>o==="*"||o===`${t?.event?.source}.${t?.event?.type}`||o.split(".",2)?.[1]==="*"&&o.split(".",2)?.[0]===t?.event?.source))try{r.callback(t)}catch(o){this.logger?.warn(`Error occurred within user-provided event callback (${r.events})`,o)}}}onError(e){this.logger?.debug("WebSocket onError",e),this.socket&&this.socket.readyState!==this.socket.OPEN&&this._connectController.abort();try{this?.options?.onError?.(new Error("WebSocket Error"))}catch(t){this.logger?.warn("Error occurred within user-provided onError callback",t)}}cleanup(){this.socket&&(this.socket.onopen=null,this.socket.onclose=null,this.socket.onerror=null,this.socket.onmessage=null,this.socket=void 0),this.listeners=[],this._retried=0,this._connectController.abort(),this._reconnectTimeout&&clearTimeout(this._reconnectTimeout)}send(e){this.socket?.send(JSON.stringify(e))}async request(e,t="",r=1e4){if(!this.socket||this.socket.readyState!==this.socket.OPEN)throw new Error("WebSocket is not connected");t||(t=C());let o=new AbortController,s=o.signal;this._connectController.signal.addEventListener("abort",()=>{o.abort()},{once:!0,signal:s});let i=await h(new Promise((a,c)=>{this.socket?.addEventListener("message",d=>{if(!("data"in d)||!d.data||typeof d.data!="string"){this.logger?.debug("Unknown message received",d.data);return}try{let u=JSON.parse(d?.data);if(u?.id===t)return this.logger?.verbose(`RECV :: ${e.request}`,u),a(u)}catch(u){this.logger?.warn("Invalid JSON payload received",d.data),c(u)}},{signal:s}),this.logger?.verbose(`SEND :: ${e.request}`,{...e,id:t}),this.send({...e,id:t})}),{timeout:r,message:"Request timed out",controller:o,signal:s});if(i?.status==="ok"){try{this.options.onData&&this?.options?.onData(i)}catch(a){this.logger?.warn("Error invoking onData handler",a)}return{event:{source:"Request",type:e.request??"Unknown"},...i}}throw new Error("Request failed")}async on(e,t){try{if(!e)return;let r={events:[e],callback:t};if(this.listeners.push(r),this.ready){let o=await this.getSubscriptionsFromListeners([r]);await this.subscribe(o)}this.logger?.debug(`Added event listener for "${e}"`)}catch(r){this.logger?.warn(`Failed adding event listener for "${e}"`,r)}}async updateSupportedEvents(){if(this.ready)try{let e=await this.getEvents();if(e.status!=="ok"||!e.events)throw new Error(e.status);this.supportedEvents=e.events,this.logger?.debug(`Successfully fetched supported event types for Streamer.bot v${this.version}`)}catch(e){this.logger?.warn("Failed to fetch supported events from Streamer.bot, falling back to stored events type.",e),this.supportedEvents=g}}async getSupportedEvents(){return this.supportedEvents||(this.logger?.warn("Supported event types not yet initialized, fetching from Streamer.bot instance..."),await this.updateSupportedEvents()),this.supportedEvents??g}getEventsFromListeners(e){return(e??this.listeners).reduce((t,r)=>(r.events.forEach(o=>{t[o]||(t[o]=[]),t[o].push(r.callback)}),t),{})}async getSubscriptionsFromListeners(e){let t=this.getEventsFromListeners(e);return this.getSubscriptionsFromEventStrings(Object.keys(t))}async getSubscriptionsFromEventStrings(e){let t={};typeof e=="string"&&(e=[e]);for(let r of e){let o=await this.parseEventString(r);if(o)for(let s of o){let{source:i,eventTypes:a}=s,c=new Set([...t[i]??[],...a]);t[i]=[...c]}}return t}async parseEventString(e){let t=await this.getSupportedEvents();if(!e||typeof e!="string"){this.logger?.warn(`Invalid event subscription requested "${e}"`);return}if(e==="*")return Object.keys(t).map(r=>{let o=r,s=t[o]??[];return{source:o,eventTypes:s}});{let[r,o]=e.split(".",2);if(!r||!o||!(r in t)){this.logger?.warn(`Invalid event subscription requested "${e}"`);return}let s=r,i=o;if(i)return[{source:s,eventTypes:i==="*"?t[s]:[i]}];this.logger?.warn(`Invalid event type requested "${e}"`);return}}async subscribe(e){let t=await this.getSupportedEvents();e==="*"&&(e=t);for(let r in e){if(!r||r==="err")continue;if(!(r in t)){this.logger?.warn(`Attempted to subscribe to empty or unknown event source: "${r}"`,Object.keys(e));continue}let o=r,s=e[o]??[];if(s&&s.length){let i=new Set([...this.subscriptions[o]??[],...s]);this.subscriptions[o]=[...i]}}return Object.keys(this.subscriptions).length===0?(this.logger?.warn("No valid events to subscribe to. Please provide valid event sources and types."),{id:"invalid",status:"error",error:"No valid events to subscribe to"}):await this.request({request:"Subscribe",events:this.subscriptions})}async unsubscribe(e){let t=await this.getSupportedEvents();e==="*"&&(e=t);for(let r in e){if(r===void 0||!Object.keys(t).includes(r))continue;let o=r,s=e[o];if(s&&s.length)for(let i of s)i&&this.subscriptions[o]?.filter&&(this.subscriptions[o]=this.subscriptions[o])?.filter(a=>i!==a)}return await this.request({request:"UnSubscribe",events:e})}async getEvents(){return await this.request({request:"GetEvents"})}async getActions(){return await this.request({request:"GetActions"})}async doAction(e,t,r){if(r?.customEventResponse)return this.doActionWithCustomEventResponse(e,t);let o,s;return typeof e=="string"?o=e:(o=e.id,s=e.name),await this.request({request:"DoAction",action:{id:o,name:s},args:t})}async doActionWithCustomEventResponse(e,t={},r=1e4){if(!this.socket||this.socket.readyState!==this.socket.OPEN)throw new Error("WebSocket is not connected");let{responseId:o,promise:s,controller:i}=v({timeout:r,addEventListener:(c,d)=>this.on(c,d),removeEventListener:c=>{this.listeners=this.listeners.filter(d=>!c(d))}}),a={...t,sbClientResponse:o};try{let c=await this.doAction(e,a),d=await s;return{...c,customEventResponseArgs:d}}catch(c){throw i.signal.aborted||i.abort(),c}}async getBroadcaster(){return await this.request({request:"GetBroadcaster"})}async getMonitoredYouTubeBroadcasts(){return await this.request({request:"GetMonitoredYouTubeBroadcasts"})}async getCredits(){return await this.request({request:"GetCredits"})}async testCredits(){return await this.request({request:"TestCredits"})}async clearCredits(){return await this.request({request:"ClearCredits"})}async getInfo(){return await this.request({request:"GetInfo"})}async getActiveViewers(){return await this.request({request:"GetActiveViewers"})}async executeCodeTrigger(e,t,r){return r?.customEventResponse?this.executeCodeTriggerWithCustomEventResponse(e,t):await this.request({request:"ExecuteCodeTrigger",triggerName:e,args:t})}async executeCodeTriggerWithCustomEventResponse(e,t={},r=1e4){if(!this.socket||this.socket.readyState!==this.socket.OPEN)throw new Error("WebSocket is not connected");let{responseId:o,promise:s,controller:i}=v({timeout:r,addEventListener:(c,d)=>this.on(c,d),removeEventListener:c=>{this.listeners=this.listeners.filter(d=>!c(d))}}),a={...t,sbClientResponse:o};try{let c=await this.executeCodeTrigger(e,a),d=await s;return{...c,customEventResponseArgs:d}}catch(c){throw i.signal.aborted||i.abort(),c}}async getCodeTriggers(){return await this.request({request:"GetCodeTriggers"})}async getCommands(){return await this.request({request:"GetCommands"})}async getEmotes(e){switch(e){case"twitch":return await this.request({request:"TwitchGetEmotes"});case"youtube":return await this.request({request:"YouTubeGetEmotes"});default:throw new Error("Invalid platform")}}async getGlobals(e=!0){return await this.request({request:"GetGlobals",persisted:e})}async getGlobal(e,t=!0){let r=await this.request({request:"GetGlobal",variable:e,persisted:t});return r.status==="ok"?r.variables[e]?{id:r.id,status:r.status,variable:r.variables[e]}:{status:"error",error:"Variable not found"}:r}async getUserGlobals(e,t=null,r=!0){let s={twitch:"TwitchGetUserGlobals",youtube:"YouTubeGetUserGlobals",trovo:"TrovoGetUserGlobals",kick:"KickGetUserGlobals"}[e];if(!s)throw new Error("Invalid platform");return await this.request({request:s,variable:t,persisted:r})}async getUserGlobal(e,t,r=null,o=!0){let i={twitch:"TwitchGetUserGlobal",youtube:"YouTubeGetUserGlobal",trovo:"TrovoGetUserGlobal",kick:"KickGetUserGlobal"}[e];if(!i)throw new Error("Invalid platform");let a=await this.request({request:i,userId:t,variable:r||null,persisted:o});if(a.status==="ok"&&t&&r){let c=a.variables.find(d=>d.name===r);return c?{id:a.id,status:a.status,variable:c}:{status:"error",error:"Variable not found"}}return a}async sendMessage(e,t,{bot:r=!1,internal:o=!0,...s}={}){if(!this._authenticated)return{status:"error",error:"Authentication required"};let i={platform:e,message:t,bot:r,internal:o};return["twitch","kick"].includes(e)&&s.replyId&&Object.assign(i,{replyId:s.replyId}),["youtube"].includes(e)&&s.broadcastId&&Object.assign(i,{broadcastId:s.broadcastId}),await this.request({...i,request:"SendMessage"})}async getUserPronouns(e,t){return await this.request({request:"GetUserPronouns",platform:e,userLogin:t})}};Object.assign(globalThis,{StreamerbotClient:l});return B(_);})(); diff --git a/widgets/vertical/scripts/header-animation.js b/widgets/vertical/scripts/header-animation.js new file mode 100644 index 0000000..ccf19bd --- /dev/null +++ b/widgets/vertical/scripts/header-animation.js @@ -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); +})(); diff --git a/widget/scripts/streamerbot.js b/widgets/vertical/scripts/streamerbot.js similarity index 100% rename from widget/scripts/streamerbot.js rename to widgets/vertical/scripts/streamerbot.js diff --git a/widget/scripts/tasklist-view.js b/widgets/vertical/scripts/tasklist-view.js similarity index 100% rename from widget/scripts/tasklist-view.js rename to widgets/vertical/scripts/tasklist-view.js diff --git a/widgets/vertical/styles/fonts/Fredoka-Bold.ttf b/widgets/vertical/styles/fonts/Fredoka-Bold.ttf new file mode 100644 index 0000000..47a2c2b Binary files /dev/null and b/widgets/vertical/styles/fonts/Fredoka-Bold.ttf differ diff --git a/widgets/vertical/styles/fonts/Fredoka-Regular.ttf b/widgets/vertical/styles/fonts/Fredoka-Regular.ttf new file mode 100644 index 0000000..cbf2492 Binary files /dev/null and b/widgets/vertical/styles/fonts/Fredoka-Regular.ttf differ diff --git a/widgets/vertical/styles/structure.css b/widgets/vertical/styles/structure.css new file mode 100644 index 0000000..b157dcc --- /dev/null +++ b/widgets/vertical/styles/structure.css @@ -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; +} diff --git a/widgets/vertical/styles/style.css b/widgets/vertical/styles/style.css new file mode 100644 index 0000000..69bfdcf --- /dev/null +++ b/widgets/vertical/styles/style.css @@ -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; +}