init

odmeran · Apr 26, 2024 · 436ebda · 436ebda
commit 436ebda
Show file tree

Hide file tree

Showing 10 changed files with 2,976 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,130 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+.pnpm-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Snowpack dependency directory (https://snowpack.dev/)
+web_modules/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional stylelint cache
+.stylelintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variable files
+.env
+.env.development.local
+.env.test.local
+.env.production.local
+.env.local
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+.parcel-cache
+
+# Next.js build output
+.next
+out
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and not Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# vuepress v2.x temp and cache directory
+.temp
+.cache
+
+# Docusaurus cache and generated files
+.docusaurus
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port
+
+# Stores VSCode versions used for testing VSCode extensions
+.vscode-test
+
+# yarn v2
+.yarn/cache
+.yarn/unplugged
+.yarn/build-state.yml
+.yarn/install-state.gz
+.pnp.*
diff --git a/README.md b/README.md
@@ -0,0 +1,40 @@
+It does not support Twitch emotes or badges or anything besides text, really. A very simple thing.
+
+### How to
+
+To add this thing to your OBS:
+
+1. In your OBS Sources (next to the Scenes by default) click the '+' button
+2. Click Browser
+3. Click Ok on the new window
+4. Check the Local file checkbox and below it you'll see the Local file line with a button 'Browse', click the button
+5. Select the index.html file (in the docs directory)
+6. You should see something like in the example below
+
+To make it connect to your channel, replace YOUR_CHANNEL_NAME in the index.html
+
+```html
+<meta name="channel_name" content="YOUR_CHANNEL_NAME" />
+```
+
+with your channel name. For example, `content="mimeyu"`.
+
+### Example
+
+![example](./assets/example.gif)
+
+### To edit the script
+
+To edit something in the script, you'll need [NPM](https://nodejs.org/en/download) and to install the packages with it being in the repo directory.
+
+```
+npm i
+```
+
+Then run
+
+```
+npm run build
+```
+
+to watch for changes in the code. Open the index.html file in your browser to debug.
diff --git a/assets/example.gif b/assets/example.gif
diff --git a/docs/index.html b/docs/index.html
@@ -0,0 +1,97 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta name="channel_name" content="YOUR_CHANNEL_NAME" />
+
+    <title>Twitch IRC reader</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap"
+      rel="stylesheet"
+    />
+    <style>
+      :root {
+        box-sizing: border-box;
+
+        --text-color: #f9eaf8;
+        --chat-bg: #62626240;
+        --chat-border: #ccc4;
+        --message-bg: #33233ae8;
+        --message-border: #814871;
+
+        --sys-message-bg: #46413be8;
+        --sys-message-border: #9c7c38;
+
+        --message-border-rad: 0.9rem;
+      }
+      *,
+      *:before,
+      *:after {
+        box-sizing: inherit;
+      }
+      body {
+        margin: 0;
+
+        background: black;
+      }
+      main,
+      chat-window {
+        -webkit-mask-image: linear-gradient(
+          to bottom,
+          rgba(0, 0, 0, 0),
+          rgba(0, 0, 0, 0.8),
+          rgba(0, 0, 0, 0.95),
+          rgba(0, 0, 0, 1),
+          rgba(0, 0, 0, 1),
+          rgba(0, 0, 0, 1)
+        );
+        mask-image: linear-gradient(
+          to bottom,
+          rgba(0, 0, 0, 0),
+          rgba(0, 0, 0, 0.8),
+          rgba(0, 0, 0, 0.95),
+          rgba(0, 0, 0, 1),
+          rgba(0, 0, 0, 1),
+          rgba(0, 0, 0, 1)
+        );
+
+        display: flex;
+        flex-direction: column-reverse;
+        overflow: hidden;
+
+        height: 400px;
+        max-width: 260px;
+
+        padding: 0.05rem;
+
+        /* background: var(--chat-bg); */
+        /* border: 1px solid var(--chat-border); */
+        border-radius: 0.3rem;
+      }
+      .chat-message {
+        transition: 92ms;
+        opacity: 0;
+
+        margin: 0.45rem 0 0.05rem;
+        padding: 0.4rem 0.65rem;
+
+        font-family: "Noto Sans", sans-serif;
+        font-size: 14px;
+        overflow-wrap: break-word;
+
+        color: var(--text-color);
+        background: var(--message-bg);
+        border: 2px outset var(--message-border);
+        border-radius: var(--message-border-rad);
+      }
+      .sys-message {
+        background: var(--sys-message-bg);
+        border: 2px outset var(--sys-message-border);
+        font-weight: 600;
+      }
+    </style>
+    <script defer src="js/main.js" type="text/javascript"></script>
+  </head>
+  <body></body>
+</html>
diff --git a/docs/js/main.js b/docs/js/main.js
diff --git a/eslint.config.js b/eslint.config.js
@@ -0,0 +1,12 @@
+import js from "@eslint/js";
+
+export default [
+  js.configs.recommended,
+
+  {
+    rules: {
+      "no-unused-vars": "warn",
+      "no-undef": "warn",
+    },
+  },
+];