added crown to owner

2026-06-20 14:51:33 +00:00 · 2019-03-10 16:36:50 +00:00 · 2019-03-10 16:36:50 +00:00 · 5ba9750cea
commit 5ba9750cea
parent 16792cbf4b
9 changed files with 214 additions and 85 deletions
--- a/package-lock.json
+++ b/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",
--- a/package.json
+++ b/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": {
--- a/src/components/ProfilePictureTemplate.vue
+++ b/src/components/ProfilePictureTemplate.vue
@ -1,27 +1,111 @@
 <template>
-  <div
-    class="profile-picture"
-    :style="`height: ${$props.height}; width: ${$props.width}; background-image: url(${$props.url})`"
-  ></div>
+  <div :class="`profile-picture ${adminType ? adminType.name : ''}`">
+    <img v-if="adminType" class="emote" :src="adminType.emotePath">
+    <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);
-  margin: auto;
+  position: relative;
+  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>
--- a/src/components/app/MessageTemplate.vue
+++ b/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>
--- a/src/components/app/MyMiniInformation.vue
+++ b/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>
--- a/src/components/app/RightPanel.vue
+++ b/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"
--- a/src/components/app/SettingsPanels/MyProfile.vue
+++ b/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>
--- a/src/components/homePage/LoggedIn.vue
+++ b/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>
--- a/src/messageFormatter.js
+++ b/src/messageFormatter.js
@ -1,83 +1,89 @@
 import futoji from 'futoji'
+import twemoji from 'twemoji'

-export default  (message) => {
-    message = escapeHtml(message)

-    futoji.addTransformer({
-        name: 'bold-and-italic', 
-        symbol: '***',
-        transformer: text => `<strong><em>${text}</em></strong>`
-    })
+export default (message) => {
+	message = twemoji.parse(escapeHtml(message),
+		function (icon, options, variant) {
+			console.log(icon)
+			return require("twemoji/2/svg/" + icon + ".svg")
+		})

-    futoji.addTransformer({
-        name: 'bold', 
-        symbol: '**',
-        transformer: text => `<strong>${text}</strong>`
-    })
-    
-    futoji.addTransformer({
-        name: 'italic', 
-        symbol: '*',
-        transformer: text => `<em>${text}</em>`
-    })
+	futoji.addTransformer({
+		name: 'bold-and-italic',
+		symbol: '***',
+		transformer: text => `<strong><em>${text}</em></strong>`
+	})

-    futoji.addTransformer({
-        name: 'underline', 
-        symbol: '__',
-        transformer: text => `<u>${text}</u>`
-    })
-    futoji.addTransformer({
-        name: 'italic', 
-        symbol: '_',
-        transformer: text => `<em>${text}</em>`
-    })
-    futoji.addTransformer({
-        name: 'srike', 
-        symbol: '~~',
-        transformer: text => `<s>${text.trim()}</s>`
-    })
+	futoji.addTransformer({
+		name: 'bold',
+		symbol: '**',
+		transformer: text => `<strong>${text}</strong>`
+	})

-    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);
+	futoji.addTransformer({
+		name: 'italic',
+		symbol: '*',
+		transformer: text => `<em>${text}</em>`
+	})
+
+	futoji.addTransformer({
+		name: 'underline',
+		symbol: '__',
+		transformer: text => `<u>${text}</u>`
+	})
+	futoji.addTransformer({
+		name: 'italic',
+		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
-    // if spaces then it won't match
-    let nameRegex = new RegExp('^(\\w+)\\n')
+	// matches if word until newline
+	// if spaces then it won't match
+	let nameRegex = new RegExp('^(\\w+)\\n')

-    if(nameRegex.test(text)) {
-        let language = nameRegex.exec(text)[1]
-        let newText = text.replace(nameRegex, '')
+	if (nameRegex.test(text)) {
+		let language = nameRegex.exec(text)[1]
+		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
-         .replace(/&/g, "&amp;")
-         .replace(/</g, "&lt;")
-         .replace(/>/g, "&gt;")
-         .replace(/"/g, "&quot;")
-         .replace(/'/g, "&#039;");
- }
+	return unsafe
+		.replace(/&/g, "&amp;")
+		.replace(/</g, "&lt;")
+		.replace(/>/g, "&gt;")
+		.replace(/"/g, "&quot;")
+		.replace(/'/g, "&#039;");
+}