package-lock.json

@@ -10735,6 +10735,14 @@
                 "tough-cookie": "~2.5.0",
                 "tunnel-agent": "^0.6.0",
                 "uuid": "^3.3.2"
+            },
+            "dependencies": {
+                "uuid": {
+                    "version": "3.4.0",
+                    "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz",
+                    "integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==",
+                    "dev": true
+                }
             }
         },
         "require-directory": {
@@ -11873,6 +11881,15 @@
             "requires": {
                 "temp-dir": "^1.0.0",
                 "uuid": "^3.0.1"
+            },
+            "dependencies": {
+                "uuid": {
+                    "version": "3.4.0",
+                    "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz",
+                    "integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==",
+                    "dev": true,
+                    "optional": true
+                }
             }
         },
         "ternary-stream": {
@@ -12439,10 +12456,9 @@
             }
         },
         "uuid": {
-            "version": "3.4.0",
-            "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz",
-            "integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==",
-            "dev": true
+            "version": "8.3.1",
+            "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.1.tgz",
+            "integrity": "sha512-FOmRr+FmWEIG8uhZv6C2bTgEVXsHk08kE7mPlrBbEe+c3r9pjceVPgupIfNIhc4yx55H69OXANrUaSuu9eInKg=="
         },
         "v8flags": {
             "version": "3.2.0",

package.json

@@ -32,7 +32,9 @@
         "email": "mail@serraniel.dev"
     },
     "homepage": "https://github.com/Serraniel/AniwatchPlus#readme",
-    "dependencies": {},
+    "dependencies": {
+        "uuid": "^8.3.1"
+    },
     "devDependencies": {
         "@babel/compat-data": "^7.12.1",
         "@babel/core": "^7.12.3",

src/javascript/enhancements/watch2getherChat.js

@@ -1,5 +1,6 @@
 import * as core from '../utils/aniwatchCore';
 import * as helper from '../utils/helpers';
+import { v4 as uuidv4 } from 'uuid';
 
 export function init() {
     core.runAfterLoad(() => {
@@ -7,6 +8,37 @@ export function init() {
     }, "^/watch2gether/.*$");
 }
 
-function manipulateChatInput(){
+function manipulateChatInput() {    
+    let textarea = document.querySelector('.chat-input textarea');
 
+    // avoid duplicate registration
+    if (typeof textarea.dataset.charCounterId !== 'undefined') {
+        return;
+    }
+}
+
+function addCharCounter(textarea) {
+    let chatDiv = textarea.parentElement.parentElement; // div with chat input and controls
+    let controlRow = chatDiv.children[1]; // row with controls
+    let btn = controlRow.querySelector('button'); // find send button
+
+    let counterSpan = document.createElement('span'); // create span for counter
+    counterSpan.classList.add('awp-w2g-chatCounter');
+
+    // id and "connection"
+    let counterId = `awp-${v4()}`
+    counterSpan.id = counterId;
+    textarea.dataset.charCounterId = counterId;
+
+    btn.parentElement.inserBefore(counterSpan, btn); // and insert in front of the button
+
+    textarea.addEventListener('keypress keyup', () => {        
+        let current = textarea.value.length;
+        let max = textarea.maxLength;
+
+        counterSpan.innerText = `${current} / ${max}`;
+
+        // animation if at max
+        counterSpan.classList.toggle('awp-w2g-chatCounter-max', current >= max);
+    });
 }

src/stylesheets/aniwatchplus.scss

@@ -2,4 +2,5 @@
 @import './vars/colors';
 
 // enhancements
-@import './enhancements/lists.scss';
+@import './enhancements/lists';
+@import './enhancements/watch2gether'

src/stylesheets/enhancements/_watch2gether.scss

@@ -0,0 +1,21 @@
+.awp {
+    &-w2g {
+        &-chatCounter {
+            white-space: nowrap;
+
+            &-max {
+                animation: shake 0.1s ease-in-out 0.1s 3 alternate;
+
+                @keyframes shake {
+                    from {
+                        transform: rotate(3deg);
+                    }
+                    to {
+                        transform-origin: center center;
+                        transform: rotate(-3deg);
+                    }
+                }
+            }
+        }
+    }
+}