Fix emoji upvotes and add interactjs

package-lock.json

@@ -8,6 +8,7 @@
       "name": "barertc",
       "version": "0.0.0",
       "dependencies": {
+        "interactjs": "^1.10.18",
         "vue": "^3.3.4"
       },
       "devDependencies": {
@@ -478,6 +479,11 @@
       "integrity": "sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==",
       "dev": true
     },
+    "node_modules/@interactjs/types": {
+      "version": "1.10.18",
+      "resolved": "https://registry.npmjs.org/@interactjs/types/-/types-1.10.18.tgz",
+      "integrity": "sha512-3a+2Kx6PhA60ekxImRQJl+EyT4lD0/kd3/PveyaLtgfNxkxnSWdUq7Ixo3Y/t1lon4EqVGZQgp+qj/QNaEs6qA=="
+    },
     "node_modules/@jridgewell/sourcemap-codec": {
       "version": "1.4.15",
       "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz",
@@ -1260,6 +1266,14 @@
       "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
       "dev": true
     },
+    "node_modules/interactjs": {
+      "version": "1.10.18",
+      "resolved": "https://registry.npmjs.org/interactjs/-/interactjs-1.10.18.tgz",
+      "integrity": "sha512-ho+Qgr5U3b3oz23Iv7MkIZGoWaTsSCRnrCL34Dtjzs5eFghwpESJeiPj9RhYKc/SgRJL9anR+2OQxFsCg4PmLA==",
+      "dependencies": {
+        "@interactjs/types": "1.10.18"
+      }
+    },
     "node_modules/is-extglob": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",

package.json

@@ -10,6 +10,7 @@
     "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore"
   },
   "dependencies": {
+    "interactjs": "^1.10.18",
     "vue": "^3.3.4"
   },
   "devDependencies": {

src/App.vue

@@ -1,6 +1,5 @@
 <script>
-import HelloWorld from './components/HelloWorld.vue'
+import interact from 'interactjs';
-import TheWelcome from './components/TheWelcome.vue'
 import LoginModal from './components/LoginModal.vue';
 import ExplicitOpenModal from './components/ExplicitOpenModal.vue';
 import ReportModal from './components/ReportModal.vue';

src/components/MessageBox.vue

@@ -281,7 +281,7 @@ export default {
                 <span v-for="(users, emoji) in reactions"
                     class="tag is-secondary mr-1 cursor-pointer"
                     :class="{ 'is-success is-light': iReacted(msg, emoji), 'is-secondary': !iReacted(msg, emoji) }"
-                    :title="emoji + ' by: ' + users.join(', ')" @click="sendReact(msg, emoji)">
+                    :title="emoji + ' by: ' + users.join(', ')" @click="sendReact(emoji)">
                     {{ emoji }} <small class="ml-1">{{ users.length }}</small>
                 </span>
             </div>