From 3125e6720f77fdcd4934f8359c6f9de731a1d059 Mon Sep 17 00:00:00 2001
From: Serraniel <mail@serraniel.dev>
Date: Sun, 25 Oct 2020 12:47:32 +0100
Subject: [PATCH] #91 Added base implementation for chat counter

Adds uuid dependency to create guids
---
 package-lock.json                             | 24 ++++++++++--
 package.json                                  |  4 +-
 .../enhancements/watch2getherChat.js          | 38 +++++++++++++++++--
 src/stylesheets/aniwatchplus.scss             |  3 +-
 .../enhancements/_watch2gether.scss           | 21 ++++++++++
 5 files changed, 81 insertions(+), 9 deletions(-)
 create mode 100644 src/stylesheets/enhancements/_watch2gether.scss

diff --git a/package-lock.json b/package-lock.json
index d63b08e..ac58357 100644
--- a/package-lock.json
+++ b/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",
diff --git a/package.json b/package.json
index bcbe472..8f7fe19 100644
--- a/package.json
+++ b/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",
diff --git a/src/javascript/enhancements/watch2getherChat.js b/src/javascript/enhancements/watch2getherChat.js
index e611c1f..c8a207e 100644
--- a/src/javascript/enhancements/watch2getherChat.js
+++ b/src/javascript/enhancements/watch2getherChat.js
@@ -1,12 +1,44 @@
 import * as core from '../utils/aniwatchCore';
 import * as helper from '../utils/helpers';
+import { v4 as uuidv4 } from 'uuid';
 
 export function init() {
     core.runAfterLoad(() => {
-        manipulateChatInput();    
+        manipulateChatInput();
     }, "^/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);
+    });
 }
\ No newline at end of file
diff --git a/src/stylesheets/aniwatchplus.scss b/src/stylesheets/aniwatchplus.scss
index cdcb559..0fcd7c1 100644
--- a/src/stylesheets/aniwatchplus.scss
+++ b/src/stylesheets/aniwatchplus.scss
@@ -2,4 +2,5 @@
 @import './vars/colors';
 
 // enhancements
-@import './enhancements/lists.scss';
\ No newline at end of file
+@import './enhancements/lists';
+@import './enhancements/watch2gether'
\ No newline at end of file
diff --git a/src/stylesheets/enhancements/_watch2gether.scss b/src/stylesheets/enhancements/_watch2gether.scss
new file mode 100644
index 0000000..731dc5e
--- /dev/null
+++ b/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);
+                    }
+                }
+            }
+        }
+    }
+}