bugs and features

.eslintignore

@@ -0,0 +1 @@
+src/resources/*.js

.eslintrc.yml

@@ -0,0 +1,14 @@
+env:
+  browser: true
+  es2021: true
+  webextensions: true
+  jquery: true
+extends:
+  - standard
+globals:
+  exports: false
+  module: false
+  require: false
+rules: {
+  no-var: off
+}

.github/workflows/github-actions.yml

@@ -0,0 +1,23 @@
+name: Habitica Chat CI
+on: [push]
+jobs:
+  lint:
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v2
+    - name: Install modules
+      run: npm install eslint eslint-config-standard eslint-plugin-import eslint-plugin-node eslint-plugin-promise
+    - name: Run ESLint
+      run: npx eslint . --ext .js,.jsx,.ts,.tsx
+  build:
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v2
+    - name: Install modules
+      run: npm install web-ext
+    - name: web-ext build
+      run: cd src && npx web-ext build
+    - uses: actions/upload-artifact@v2
+      with:
+        name: habitica_chat_client.zip
+        path: src/web-ext-artifacts/

.gitignore

@@ -41,3 +41,6 @@ $RECYCLE.BIN/
 Network Trash Folder
 Temporary Items
 .apdisk
+
+#webext build files
+web-ext-artifacts/

README.md

@@ -20,6 +20,11 @@ When making changes please keep these things in mind
 + Increased the Refresh Rate as required by staff
 # Version history
 
+### 2.2.10
++ Style fixes on icon layouts
++ Add translate function to other's messages
++ Remove duplication of icon assets
+
 ### 2.2.9
 + Merge the code for Chrome and Firefox
 

src/mainChat/chat.css

@@ -6,7 +6,7 @@
   * Bad: #E60000 (red)
   * Bubble 1: rgba(15, 53, 119,0.1) (alternative pale blue)
   * Bubble 2: #D9EAD3 (pale green)
-  * 
+  *
   **/
 
 /* General Styling */
@@ -50,13 +50,13 @@
 			width: 16px;
 			padding: 0px;
 			line-height: 0px;
-			border-radius: 10px;	
+			border-radius: 10px;
 			padding-bottom: 3px;
 			margin-top: 3px;
       margin-right: 5px;
       cursor: pointer
 		}
-		
+
 			button.chatBox_closer:hover, button.chatBox_minimizer:hover {
 				padding-top: 1px;
 			}
@@ -98,7 +98,7 @@
     font-size: 0.8em
   }
 
-/* ChatBox Shower */ 
+/* ChatBox Shower */
 
 .chatBox_shower, #groupsBox .groupsBox_shower  {
     height: 20px;
@@ -112,7 +112,7 @@
     cursor: pointer;
     text-overflow: ellipsis;
 	white-space: nowrap;
-	overflow: hidden;	
+	overflow: hidden;
 }
 
 /* Groups Box */
@@ -153,7 +153,7 @@
 			border: 1px solid rgba(15, 53, 119,0.1);
 			background-color: rgba(15, 53, 119,0.05);
 		}
-			
+
 		.group-item.openChatBox {
 			border: 1px solid rgba(15, 53, 119,0.3);
 			background-color: rgba(15, 53, 119,0.1);
@@ -211,7 +211,7 @@
 		-moz-border-radius: 5px;
 		border-radius: 5px;
   }
-  
+
   .large_bubble, .large_bubble ~ .msg_user {
     width: 290px!important;
     margin-left: 10px!important
@@ -223,7 +223,7 @@
 	.chatMessage.otherPoster .bubble {
 		margin-left: 65px;
   }
-	
+
 		.chatMessage .bubble p:not(:first-child) {
 			margin-top: 8px;
 		}
@@ -267,11 +267,11 @@
 			z-index: 1;
 			border-width: 9px 0px 9px 12px;
 		}
-		
+
 		.bubble ul,.bubble ol {
 			margin-left: 2em;
 		}
-		
+
 	.chatMessage .msg_footer {
 	font-size: 0.7em;
 	width: 100%;
@@ -281,7 +281,7 @@
 	margin-right: 5px;
 	vertical-align: top;
 	}
-	
+
 		.chatMessage.userPoster .msg_footer {
 			margin-right: 55px;
 		}
@@ -292,7 +292,7 @@
 		vertical-align: top;
 		}
 
-		.msg_footer .flagMessage,.msg_footer .copyMessage,.msg_footer .deleteMessage,.msg_footer .flagMessage,.msg_footer .likeMessage, .msg_footer .showInfo {
+		.msg_footer .flagMessage2,.msg_footer .flagMessage,.msg_footer .copyMessage,.msg_footer .deleteMessage,.msg_footer .flagMessage,.msg_footer .likeMessage,.msg_footer .showInfo,.msg_footer .translateMessage,.msg_footer {
 			margin-right: 5px;
 			cursor: pointer;
 			color: #aaa;
@@ -340,7 +340,7 @@
 /* Large Text */
 
 #chatWrapper_boxes.largeText { font-size: 1.2em; }
-#chatWrapper_boxes.largeText .chatBox_input textarea {	font-size: 0.9em; }	
+#chatWrapper_boxes.largeText .chatBox_input textarea {	font-size: 0.9em; }
 #chatWrapper_boxes.largeText .chatBox_input button { font-size: 0.9em; }
 
 /* Mentions */
@@ -352,7 +352,7 @@
 	.mentionedInChat .bubble {
 		box-shadow: 3px 3px 10px rgba(0,0,0,0.3);
 	}
-	
+
 	.chatMention {
 		font-weight: bold;
 		text-shadow: 1px 1px 1px rgba(0,0,0,0.3);
@@ -501,4 +501,4 @@
 #chatWrapper .bubble ul, #chatWrapper .bubble ol {
   margin-left: 0;
   padding-left: 20px;
-}
+}

src/mainChat/chat.js

@@ -1,16 +1,16 @@
 if (
-  document.URL.indexOf("https://habitica.com/apidoc/") == -1 &&
-  document.URL.indexOf("http://contact.habitica.com/") == -1 &&
-  document.URL.indexOf("http://translate.habitica.com/") == -1
+  document.URL.indexOf('https://habitica.com/apidoc/') === -1 &&
+  document.URL.indexOf('http://contact.habitica.com/') === -1 &&
+  document.URL.indexOf('http://translate.habitica.com/') === -1
 ) {
   // Create "Config" elements to pass down config (until I figure out message passing)
-  var config = document.createElement("config");
-  config.setAttribute("id", "habitRPGChatConfig");
-  config.setAttribute("style", "display: none;");
+  const config = document.createElement('config')
+  config.setAttribute('id', 'habitRPGChatConfig')
+  config.setAttribute('style', 'display: none;')
   chrome.storage.local.get(
     {
-      uuid: "",
-      api: "",
+      uuid: '',
+      api: '',
       enableSound: true,
       largeText: false,
       disableAvatars: false,
@@ -24,103 +24,103 @@ if (
       hideGroups: true,
       hideSystem: false
     },
-    function(items) {
-      config.setAttribute("uuid", items.uuid);
-      config.setAttribute("apiK", items.api);
-      config.setAttribute("sound", items.enableSound);
-      config.setAttribute("largeText", items.largeText);
-      config.setAttribute("disableAvatars", items.disableAvatars);
+    function (items) {
+      config.setAttribute('uuid', items.uuid)
+      config.setAttribute('apiK', items.api)
+      config.setAttribute('sound', items.enableSound)
+      config.setAttribute('largeText', items.largeText)
+      config.setAttribute('disableAvatars', items.disableAvatars)
       config.setAttribute(
-        "disableShowNotifications",
+        'disableShowNotifications',
         items.disableShowNotifications
-      );
+      )
       config.setAttribute(
-        "disableReadNotifications",
+        'disableReadNotifications',
         items.disableReadNotifications
-      );
-      config.setAttribute("messageCount", items.messageCount);
-      config.setAttribute("timeoutAfter", items.timeoutAfter);
-      config.setAttribute("dateFormat", items.dateFormat);
-      config.setAttribute("timeFormat", items.timeFormat);
-      config.setAttribute("confirmDelete", items.confirmDelete);
-      config.setAttribute("hideGroups", items.hideGroups);
-      config.setAttribute("hideSystem", items.hideSystem);
+      )
+      config.setAttribute('messageCount', items.messageCount)
+      config.setAttribute('timeoutAfter', items.timeoutAfter)
+      config.setAttribute('dateFormat', items.dateFormat)
+      config.setAttribute('timeFormat', items.timeFormat)
+      config.setAttribute('confirmDelete', items.confirmDelete)
+      config.setAttribute('hideGroups', items.hideGroups)
+      config.setAttribute('hideSystem', items.hideSystem)
     }
   );
-  (document.head || document.documentElement).appendChild(config);
+  (document.head || document.documentElement).appendChild(config)
 
   // Call markdown to html script
-  var s = document.createElement("script");
-  s.src = chrome.extension.getURL("resources/habitica-markdown.js");
-  s.onload = function() {
-    this.parentNode.removeChild(this);
+  var s1 = document.createElement('script')
+  s1.src = chrome.extension.getURL('resources/habitica-markdown.js')
+  s1.onload = function () {
+    this.parentNode.removeChild(this)
   };
-  (document.head || document.documentElement).appendChild(s);
+  (document.head || document.documentElement).appendChild(s1)
 
   // Call jquery script
-  var s = document.createElement("script");
-  s.src = chrome.extension.getURL("resources/jquery.js");
-  s.onload = function() {
-    this.parentNode.removeChild(this);
+  var s2 = document.createElement('script')
+  s2.src = chrome.extension.getURL('resources/jquery.js')
+  s2.onload = function () {
+    this.parentNode.removeChild(this)
   };
-  (document.head || document.documentElement).appendChild(s);
+  (document.head || document.documentElement).appendChild(s2)
 
   // Call other functions
-  var s = document.createElement("script");
-  s.src = chrome.extension.getURL("resources/miscFunctions.js");
-  s.onload = function() {
-    this.parentNode.removeChild(this);
+  var s3 = document.createElement('script')
+  s3.src = chrome.extension.getURL('resources/miscFunctions.js')
+  s3.onload = function () {
+    this.parentNode.removeChild(this)
   };
-  (document.head || document.documentElement).appendChild(s);
+  (document.head || document.documentElement).appendChild(s3)
 
   // Load Purify.js to sanitize inputs
-  var s = document.createElement("script");
-  s.src = chrome.extension.getURL("resources/purify.js");
-  s.onload = function() {
-    this.parentNode.removeChild(this);
+  var s4 = document.createElement('script')
+  s4.src = chrome.extension.getURL('resources/purify.js')
+  s4.onload = function () {
+    this.parentNode.removeChild(this)
   };
-  (document.head || document.documentElement).appendChild(s);
+  (document.head || document.documentElement).appendChild(s4)
 
   // Call main chat script
-  //pause 2 seconds to allow everything to catch up
-  setTimeout(function() {
-    var s = document.createElement("script");
-    s.src = chrome.extension.getURL("mainChat/chat_inPage.js");
-    s.onload = function() {
-      this.parentNode.removeChild(this);
+  // pause 2 seconds to allow everything to catch up
+  setTimeout(function () {
+    const s5 = document.createElement('script')
+    s5.src = chrome.extension.getURL('mainChat/chat_inPage.js')
+    s5.onload = function () {
+      this.parentNode.removeChild(this)
     };
-    (document.head || document.documentElement).appendChild(s);
-  }, 2000);
+    (document.head || document.documentElement).appendChild(s5)
+  }, 2000)
 
-  window.addEventListener("message", function(event) {
+  window.addEventListener('message', function (event) {
     // Only accept messages from same frame
     if (event.source !== window) {
-      return;
+      return
     }
-    var message = event.data;
+    const message = event.data
     if (
-      typeof message !== "object" ||
+      typeof message !== 'object' ||
       message === null ||
       !message.uuid ||
       !message.apik ||
-      (message.uuid == config.getAttribute("uuid") &&
-        message.apik == config.getAttribute("apik"))
+      (message.uuid === config.getAttribute('uuid') &&
+        message.apik === config.getAttribute('apik'))
     ) {
-      return;
+      return
     }
 
     chrome.storage.local.set(
       {
         uuid: message.uuid,
         api: message.apik
       },
-      function() {
+      function () {
         alert(
-          "The Habitica Chat Client is now linked with user " + message.name
-        );
+          'The Habitica Chat Client is now linked with user ' + message.name
+        )
         // Reload this page
-        window.location.reload();
+        window.location.reload()
       }
-    );
-  });
+    )
+  })
 }