added crown to owner

package-lock.json

@@ -1138,6 +1138,7 @@
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/@vue/eslint-plugin/-/eslint-plugin-4.2.0.tgz",
       "integrity": "sha512-XVSLEVoNnrjaxvsun5kqZyeuWyUkp97gSnLkLOvkPkoAnLwIfjG3TuZQNm7yTEukZWmaa+7FpgMdSFqL8Z0XkA==",
+      "dev": true,
       "requires": {
         "vue-eslint-parser": "^2.0.1"
       }
@@ -1350,7 +1351,8 @@
     "acorn": {
       "version": "5.7.3",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-5.7.3.tgz",
-      "integrity": "sha512-T/zvzYRfbVojPWahDsE5evJdHb3oJoQfFbsrKM7w5Zcs++Tr257tia3BmMP8XYVjp1S9RZXQMh7gao96BlqZOw=="
+      "integrity": "sha512-T/zvzYRfbVojPWahDsE5evJdHb3oJoQfFbsrKM7w5Zcs++Tr257tia3BmMP8XYVjp1S9RZXQMh7gao96BlqZOw==",
+      "dev": true
     },
     "acorn-dynamic-import": {
       "version": "3.0.0",
@@ -1365,6 +1367,7 @@
       "version": "3.0.1",
       "resolved": "http://registry.npmjs.org/acorn-jsx/-/acorn-jsx-3.0.1.tgz",
       "integrity": "sha1-r9+UiPsezvyDSPb7IvRk4ypYs2s=",
+      "dev": true,
       "requires": {
         "acorn": "^3.0.4"
       },
@@ -1372,7 +1375,8 @@
         "acorn": {
           "version": "3.3.0",
           "resolved": "http://registry.npmjs.org/acorn/-/acorn-3.3.0.tgz",
-          "integrity": "sha1-ReN/s56No/JbruP/U2niu18iAXo="
+          "integrity": "sha1-ReN/s56No/JbruP/U2niu18iAXo=",
+          "dev": true
         }
       }
     },
@@ -4017,6 +4021,7 @@
       "version": "3.7.1",
       "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-3.7.1.tgz",
       "integrity": "sha1-PWPD7f2gLgbgGkUq2IyqzHzctug=",
+      "dev": true,
       "requires": {
         "esrecurse": "^4.1.0",
         "estraverse": "^4.1.1"
@@ -4031,12 +4036,14 @@
     "eslint-visitor-keys": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-1.0.0.tgz",
-      "integrity": "sha512-qzm/XxIbxm/FHyH341ZrbnMUpe+5Bocte9xkmFMzPMjRaZMcXww+MpBptFvtU+79L362nqiLhekCxCxDPaUMBQ=="
+      "integrity": "sha512-qzm/XxIbxm/FHyH341ZrbnMUpe+5Bocte9xkmFMzPMjRaZMcXww+MpBptFvtU+79L362nqiLhekCxCxDPaUMBQ==",
+      "dev": true
     },
     "espree": {
       "version": "3.5.4",
       "resolved": "http://registry.npmjs.org/espree/-/espree-3.5.4.tgz",
       "integrity": "sha512-yAcIQxtmMiB/jL32dzEp2enBeidsB7xWPLNiw3IIkpVds1P+h7qF9YwJq1yUNzp2OKXgAprs4F61ih66UsoD1A==",
+      "dev": true,
       "requires": {
         "acorn": "^5.5.0",
         "acorn-jsx": "^3.0.0"
@@ -4052,6 +4059,7 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/esquery/-/esquery-1.0.1.tgz",
       "integrity": "sha512-SmiyZ5zIWH9VM+SRUReLS5Q8a7GxtRdxEBVZpm98rJM7Sb+A9DVCndXfkeFUd3byderg+EbDkfnevfCwynWaNA==",
+      "dev": true,
       "requires": {
         "estraverse": "^4.0.0"
       }
@@ -4060,6 +4068,7 @@
       "version": "4.2.1",
       "resolved": "https://registry.npmjs.org/esrecurse/-/esrecurse-4.2.1.tgz",
       "integrity": "sha512-64RBB++fIOAXPw3P9cy89qfMlvZEXZkqqJkjqqXIvzP5ezRZjW+lPWjw35UX/3EhUPFYbg5ER4JYgDw4007/DQ==",
+      "dev": true,
       "requires": {
         "estraverse": "^4.1.0"
       }
@@ -4067,7 +4076,8 @@
     "estraverse": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-4.2.0.tgz",
-      "integrity": "sha1-De4/7TH81GlhjOc0IJn8GvoL2xM="
+      "integrity": "sha1-De4/7TH81GlhjOc0IJn8GvoL2xM=",
+      "dev": true
     },
     "esutils": {
       "version": "2.0.2",
@@ -6627,7 +6637,8 @@
     "lodash": {
       "version": "4.17.11",
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.11.tgz",
-      "integrity": "sha512-cQKh8igo5QUhZ7lg38DYWAxMvjSAKG0A8wGSVimP07SIUEK2UO+arSRKbRZWtelMtN5V0Hkwh5ryOto/SshYIg=="
+      "integrity": "sha512-cQKh8igo5QUhZ7lg38DYWAxMvjSAKG0A8wGSVimP07SIUEK2UO+arSRKbRZWtelMtN5V0Hkwh5ryOto/SshYIg==",
+      "dev": true
     },
     "lodash.debounce": {
       "version": "4.0.8",
@@ -10194,6 +10205,11 @@
       "integrity": "sha1-WuaBd/GS1EViadEIr6k/+HQ/T2Q=",
       "dev": true
     },
+    "twemoji": {
+      "version": "11.3.0",
+      "resolved": "https://registry.npmjs.org/twemoji/-/twemoji-11.3.0.tgz",
+      "integrity": "sha512-xN/vlR6+gDmfjt6LInAqwGAv3Agwrmzx5TD1jEFwKS19IOGDrX0/3OB8GP1wUYPVIdkaer5hw6qd+52jzvz0Lg=="
+    },
     "type-check": {
       "version": "0.3.2",
       "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.3.2.tgz",
@@ -10618,6 +10634,7 @@
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-2.0.3.tgz",
       "integrity": "sha512-ZezcU71Owm84xVF6gfurBQUGg8WQ+WZGxgDEQu1IHFBZNx7BFZg3L1yHxrCBNNwbwFtE1GuvfJKMtb6Xuwc/Bw==",
+      "dev": true,
       "requires": {
         "debug": "^3.1.0",
         "eslint-scope": "^3.7.1",
@@ -10631,6 +10648,7 @@
           "version": "3.2.6",
           "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.6.tgz",
           "integrity": "sha512-mel+jf7nrtEl5Pn1Qx46zARXKDpBbvzezse7p7LqINmdoIk8PYP5SySaxEmYv6TZ0JyEKA1hsCId6DIhgITtWQ==",
+          "dev": true,
           "requires": {
             "ms": "^2.1.1"
           }
@@ -10732,6 +10750,11 @@
       "integrity": "sha512-x3LV3wdmmERhVCYy3quqA57NJW7F3i6faas++pJQWtknWT+n7k30F4TVdHvCLn48peTJFRvCpxs3UuFPqgeELg==",
       "dev": true
     },
+    "vue-twemoji": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/vue-twemoji/-/vue-twemoji-1.0.1.tgz",
+      "integrity": "sha512-vKdA9vZuV0ADB8O2qCah//nGv9seb+S1hMTwU6IhPmmOsax4EHqwzyXSTf7kr3jCobsQIBBtNg2bpuRYoxalAA=="
+    },
     "vuex": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/vuex/-/vuex-3.0.1.tgz",

package.json

@@ -14,6 +14,7 @@
     "jquery": "^3.3.1",
     "socket.io": "^2.2.0",
     "socket.io-client": "^2.2.0",
+    "twemoji": "^11.3.0",
     "uws": "^10.148.1",
     "vue": "^2.5.17",
     "vue-headful": "^2.0.1",
@@ -22,6 +23,7 @@
     "vue-router": "^3.0.2",
     "vue-socket.io": "^3.0.4",
     "vue-socket.io-extended": "^3.2.0",
+    "vue-twemoji": "^1.0.1",
     "vuex": "^3.0.1"
   },
   "devDependencies": {

src/components/ProfilePictureTemplate.vue

@@ -1,27 +1,111 @@
 <template>
-  <div
+  <div :class="`profile-picture ${adminType ? adminType.name : ''}`">
-    class="profile-picture"
+    <img v-if="adminType" class="emote" :src="adminType.emotePath">
-    :style="`height: ${$props.height}; width: ${$props.width}; background-image: url(${$props.url})`"
+    <div
-  ></div>
+      class="inner-profile-picture"
+      :style="`height: ${$props.height}; width: ${$props.width}; background-image: url(${$props.url})`"
+    ></div>
+  </div>
 </template>
 
 <script>
 export default {
-    props: ['url', 'height', 'width']
+  props: ["url", "height", "width", "admin"],
-}
+  data() {
+    return {
+      crown: require("twemoji/2/svg/1f451.svg"),
+      flower: require("twemoji/2/svg/1f33a.svg"),
+    };
+  },
+  computed: {
+    adminType() {
+      if (this.$props.admin == 3)
+        return {
+          name: "creator",
+          emotePath: this.crown
+        };
+      if (this.$props.admin == 4)
+        return {
+          name: "cute",
+          emotePath: this.flower
+        };
+    }
+  }
+};
 </script>
 
 
 <style scoped>
 .profile-picture {
-  background-color: rgba(0, 0, 0, 0.281);
+  position: relative;
-  margin: auto;
+  padding: 3px;
+  border-radius: 50%;
+}
+.inner-profile-picture {
+  background-color: rgba(0, 0, 0, 0.315);
   border-radius: 50%;
-  margin-right: 5px;
-  margin-left: 0;
-  flex-shrink: 0;
   background-position: center;
   background-size: cover;
   background-repeat: no-repeat;
+  display: flex;
+}
+.creator {
+  margin-right: 5px;
+  margin-left: 0;
+  flex-shrink: 0;
+  margin: auto;
+  background: linear-gradient(
+    45deg,
+    #288cff 1%,
+    #288cff 40%,
+    #63acff 50%,
+    #288cff 60%,
+    #288cff 99%,
+    #288cff 100%,
+    #288cff 100%
+  );
+  background-size: 400% 400%;
+
+  animation: Anime 4s ease infinite;
+}
+.cute {
+  margin-right: 5px;
+  margin-left: 0;
+  flex-shrink: 0;
+  margin: auto;
+  background: linear-gradient(
+    45deg,
+    #ffb7ed 1%,
+    #ffb7ed 40%,
+    #ffb7ed 50%,
+    #ffe2f8 60%,
+    #ffb7ed 99%,
+    #ffb7ed 100%,
+    #ffb7ed 100%
+  );
+  background-size: 400% 400%;
+
+  animation: Anime 4s ease infinite;
+}
+
+@keyframes Anime {
+  0% {
+    background-position: 0% 50%;
+  }
+  50% {
+    background-position: 100% 50%;
+  }
+  100% {
+    background-position: 0% 50%;
+  }
+}
+.emote {
+  position: absolute;
+  height: 20px;
+  width: 20px;
+  transform: rotate(-40deg);
+  top: -6px;
+  left: -6px;
+  z-index: -1;
 }
 </style>

src/components/app/MessageTemplate.vue

@@ -1,6 +1,6 @@
 <template>
   <div :class="{message: true, ownMessage: user.uniqueID === $props.uniqueID}">
-    <profile-picture :url="userAvatar" height="50px" width="50px"/>
+    <profile-picture :admin="$props.admin" :url="userAvatar" height="50px" width="50px"/>
     <div class="triangle">
       <div class="triangle-inner"></div>
     </div>
@@ -39,6 +39,7 @@ import config from "@/config.js";
 import friendlyDate from "@/date";
 import path from "path";
 
+
 export default {
   components: {
     ProfilePicture
@@ -50,7 +51,8 @@ export default {
     "avatar",
     "date",
     "uniqueID",
-    "files"
+    "files",
+    "admin"
   ],
   methods: {
     imageClicked(event) {
@@ -174,6 +176,9 @@ export default {
 }
 
 .profile-picture {
+  margin: auto;
+  margin-left: 0;
+  margin-right: 5px;
   margin-bottom: 0;
 }
 
@@ -275,3 +280,11 @@ export default {
   border-radius: 5px;
 }
 </style>
+<style>
+img.emoji {
+   height: 1.5em;
+   width: 1.5em;
+   margin: 0 .05em 0 .1em;
+   vertical-align: -0.1em;
+}
+</style>

src/components/app/MyMiniInformation.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="my-mini-information">
-    <profile-picture :url="avatar" height="50px" width="50px"/>
+    <profile-picture :url="avatar" :admin="user.admin" height="50px" width="50px"/>
     <div class="information">
       <div class="name">{{user.username}}</div>
       <div class="tag">@{{user.tag}}</div>

src/components/app/RightPanel.vue

@@ -18,6 +18,7 @@
           v-for="(msg, index) in messages[selectedChannelID]"
           :key="index"
           :date="msg.created"
+          :admin="msg.creator.admin"
           :username="msg.creator.username"
           :uniqueID="msg.creator.uniqueID"
           :avatar="msg.creator.avatar"

src/components/app/SettingsPanels/MyProfile.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="my-profile-panel">
-    <profile-picture :url="avatar" height="100px" width="100px" />
+    <profile-picture :url="avatar" :admin="user.admin" height="100px" width="100px" />
     <div class="information">
       <div class="username">
         <strong>Username:</strong>

src/components/homePage/LoggedIn.vue

@@ -2,7 +2,7 @@
   <div class="logged-in">
     <div class="card">
       <div class="avatar-outer">
-        <profile-picture :url="avatar" height="90px" width="90px" />
+        <profile-picture :url="avatar" :admin="user.admin" height="90px" width="90px" />
       </div>
       <div class="info">
           <div class="username">{{user.username}}<span class="tag">@{{user.tag}}</span></div>

src/messageFormatter.js

@@ -1,83 +1,89 @@
 import futoji from 'futoji'
+import twemoji from 'twemoji'
 
-export default  (message) => {
-    message = escapeHtml(message)
 
-    futoji.addTransformer({
+export default (message) => {
-        name: 'bold-and-italic', 
+	message = twemoji.parse(escapeHtml(message),
-        symbol: '***',
+		function (icon, options, variant) {
-        transformer: text => `<strong><em>${text}</em></strong>`
+			console.log(icon)
-    })
+			return require("twemoji/2/svg/" + icon + ".svg")
+		})
 
-    futoji.addTransformer({
+	futoji.addTransformer({
-        name: 'bold', 
+		name: 'bold-and-italic',
-        symbol: '**',
+		symbol: '***',
-        transformer: text => `<strong>${text}</strong>`
+		transformer: text => `<strong><em>${text}</em></strong>`
-    })
+	})
-    
-    futoji.addTransformer({
-        name: 'italic', 
-        symbol: '*',
-        transformer: text => `<em>${text}</em>`
-    })
 
-    futoji.addTransformer({
+	futoji.addTransformer({
-        name: 'underline', 
+		name: 'bold',
-        symbol: '__',
+		symbol: '**',
-        transformer: text => `<u>${text}</u>`
+		transformer: text => `<strong>${text}</strong>`
-    })
+	})
-    futoji.addTransformer({
-        name: 'italic', 
-        symbol: '_',
-        transformer: text => `<em>${text}</em>`
-    })
-    futoji.addTransformer({
-        name: 'srike', 
-        symbol: '~~',
-        transformer: text => `<s>${text.trim()}</s>`
-    })
 
-    futoji.addTransformer({
+	futoji.addTransformer({
-        name: 'code-block', 
+		name: 'italic',
-        symbol: '```',
+		symbol: '*',
-        recursive: false,
+		transformer: text => `<em>${text}</em>`
-        transformer: text => `<div class="codeblock"><code>${formatCode(text.trim())}</code></div>`,
+	})
-    })
+
-    
+	futoji.addTransformer({
-    futoji.addTransformer({
+		name: 'underline',
-        name: 'code', 
+		symbol: '__',
-        symbol: '`',
+		transformer: text => `<u>${text}</u>`
-        recursive: false,
+	})
-        transformer: text => `<code>${text}</code>`,
+	futoji.addTransformer({
-    })
+		name: 'italic',
-    return futoji.format(message);
+		symbol: '_',
+		transformer: text => `<em>${text}</em>`
+	})
+	futoji.addTransformer({
+		name: 'srike',
+		symbol: '~~',
+		transformer: text => `<s>${text.trim()}</s>`
+	})
+
+	futoji.addTransformer({
+		name: 'code-block',
+		symbol: '```',
+		recursive: false,
+		transformer: text => `<div class="codeblock"><code>${formatCode(text.trim())}</code></div>`,
+	})
+
+	futoji.addTransformer({
+		name: 'code',
+		symbol: '`',
+		recursive: false,
+		transformer: text => `<code>${text}</code>`,
+	})
+	return futoji.format(message);
 }
 
 /**
  * format code to add syntax highlighting
  */
 function formatCode(text) {
-    // matches if word until newline
+	// matches if word until newline
-    // if spaces then it won't match
+	// if spaces then it won't match
-    let nameRegex = new RegExp('^(\\w+)\\n')
+	let nameRegex = new RegExp('^(\\w+)\\n')
 
-    if(nameRegex.test(text)) {
+	if (nameRegex.test(text)) {
-        let language = nameRegex.exec(text)[1]
+		let language = nameRegex.exec(text)[1]
-        let newText = text.replace(nameRegex, '')
+		let newText = text.replace(nameRegex, '')
 
-        // TODO: format newText with language
+		// TODO: format newText with language
 
-        return newText
+		return newText
-    }
+	}
 
-    return text
+	return text
 }
 
 function escapeHtml(unsafe) {
-    return unsafe
+	return unsafe
-         .replace(/&/g, "&amp;")
+		.replace(/&/g, "&amp;")
-         .replace(/</g, "&lt;")
+		.replace(/</g, "&lt;")
-         .replace(/>/g, "&gt;")
+		.replace(/>/g, "&gt;")
-         .replace(/"/g, "&quot;")
+		.replace(/"/g, "&quot;")
-         .replace(/'/g, "&#039;");
+		.replace(/'/g, "&#039;");
- }
+}