From bcf133882513eb814120cb2ca2caf91c49cb40d9 Mon Sep 17 00:00:00 2001
From: Tobi406 <tobim406@gmail.com>
Date: Thu, 2 Jul 2020 11:09:09 +0200
Subject: [PATCH 1/3] Add ColorParser component

---
 src/components/Editor/Modals/CreateGroup.vue  |   7 +
 .../Editor/Utilities/ColorParser.vue          | 172 ++++++++++++++++++
 2 files changed, 179 insertions(+)
 create mode 100644 src/components/Editor/Utilities/ColorParser.vue

diff --git a/src/components/Editor/Modals/CreateGroup.vue b/src/components/Editor/Modals/CreateGroup.vue
index ce9859ab..4455bc0a 100644
--- a/src/components/Editor/Modals/CreateGroup.vue
+++ b/src/components/Editor/Modals/CreateGroup.vue
@@ -10,6 +10,7 @@
       <div class="form-group">
         <label for="displayName">Display name</label>
         <input type="text" id="displayName" v-model="group.displayName">
+        <ColorParser v-if="group.displayName" :text="group.displayName" :showRaw="false" />
       </div>
       <div class="form-group">
         <label for="parent">Parent</label>
@@ -29,10 +30,12 @@
       <div class="form-group">
         <label for="prefix">Prefix</label>
         <input type="text" id="prefix" v-model="group.prefix">
+        <ColorParser v-if="group.prefix" :text="group.prefix" :showRaw="false" />
       </div>
       <div class="form-group">
         <label for="suffix">Suffix</label>
         <input type="text" id="suffix" v-model="group.suffix">
+        <ColorParser v-if="group.suffix" :text="group.suffix" :showRaw="false" />
       </div>
     </div>
   </div>
@@ -44,9 +47,13 @@
 </template>
 
 <script>
+import ColorParser from './../Utilities/ColorParser';
 
 export default {
   name: 'CreateGroup',
+  components: {
+    ColorParser,
+  },
   data() {
     return {
       group: {
diff --git a/src/components/Editor/Utilities/ColorParser.vue b/src/components/Editor/Utilities/ColorParser.vue
new file mode 100644
index 00000000..eb0e5fd8
--- /dev/null
+++ b/src/components/Editor/Utilities/ColorParser.vue
@@ -0,0 +1,172 @@
+<template>
+  <div><span v-html="parsedText" /> <code v-if="showRaw">({{ text }})</code></div>
+</template>
+
+<script>
+export default {
+  props: ['text', 'showRaw'],
+  created() {
+    const randomize = this.randomize;
+    setInterval(() => {
+      Array.from(document.getElementsByClassName('mc-obfuscated')).forEach((element) => {
+        element.textContent = randomize(element.textContent);
+      });
+    }, 100);
+  },
+  methods: {
+    randomize(text) {
+      var length = text.length;
+      var text = '';
+      var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
+
+      for (var i=0; i < length; i++) {
+        text += possible.charAt(Math.floor(Math.random() * possible.length));
+      }
+
+      return text;
+    },
+  },
+  computed: {
+    parsedText() {
+      const parts = this.text.split('&r');
+      for (var partIt = 0; partIt < parts.length; partIt++) {
+        var part = parts[partIt];
+
+        var hexBungeeMatches = part.match(/(&x&([a-zA-Z0-9])&([a-zA-Z0-9])&([a-zA-Z0-9])&([a-zA-Z0-9])&([a-zA-Z0-9])&([a-zA-Z0-9]))/gi);
+        if (hexBungeeMatches !== null) {
+          if (hexBungeeMatches.length > 0) part = part.replace(/(&x&([a-zA-Z0-9])&([a-zA-Z0-9])&([a-zA-Z0-9])&([a-zA-Z0-9])&([a-zA-Z0-9])&([a-zA-Z0-9]))/gi, '<span style="color: #$2$3$4$5$6$7;">');
+          for (var i = 0; i < hexBungeeMatches.length; i++) part = part + '</span>';
+        }
+
+        var hexMatches = part.match(/(&#(([a-zA-Z0-9]){6}))/gi);
+        if (hexMatches !== null) {
+          if (hexMatches.length > 0) part = part.replace(/(&#(([a-zA-Z0-9]){6}))/gi, '<span style="color: #$2;">');
+          for (var i = 0; i < hexMatches.length; i++) part = part + '</span>';
+        }
+
+        var colorMatches = part.match(/(&([a-f0-9]))/gi);
+        if (colorMatches !== null) {
+          if (colorMatches.length > 0) part = part.replace(/(&([a-f0-9]))/gi, '<span class="mc-color-$2">');
+          for (var i = 0; i < colorMatches.length; i++) part = part + '</span>';
+        }
+
+        var boldMatches = part.match(/(&l)/gi);
+        if (boldMatches !== null) {
+          if (boldMatches.length > 0) part = part.replace(/(&l)/gi, '<span class="mc-bold">');
+          for (var i = 0; i < boldMatches.length; i++) part = part + '</span>';
+        }
+
+        var italicMatches = part.match(/(&o)/gi);
+        if (italicMatches !== null) {
+          if (italicMatches.length > 0) part = part.replace(/(&o)/gi, '<span class="mc-italic">');
+          for (var i = 0; i < italicMatches.length; i++) part = part + '</span>';
+        }
+
+        var underlineMatches = part.match(/(&n)/gi);
+        if (underlineMatches !== null) {
+          if (underlineMatches.length > 0) part = part.replace(/(&n)/gi, '<span class="mc-underline">');
+          for (var i = 0; i < underlineMatches.length; i++) part = part + '</span>';
+        }
+
+        var strikethroughMatches = part.match(/(&m)/gi);
+        if (strikethroughMatches !== null) {
+          if (strikethroughMatches.length > 0) part = part.replace(/(&m)/gi, '<span class="mc-strikethrough">');
+          for (var i = 0; i < strikethroughMatches.length; i++) part = part + '</span>';
+        }
+
+        var obfuscatedMatches = part.match(/(&k)/gi);
+        if (obfuscatedMatches !== null) {
+          if (obfuscatedMatches.length > 0) part = part.replace(/(&k)/gi, '<span class="mc-obfuscated">');
+          for (var i = 0; i < obfuscatedMatches.length; i++) part = part + '</span>';
+        }
+
+        parts[partIt] = part;
+      }
+      return parts.join('');
+    },
+  },
+}
+</script>
+
+<style lang="scss">
+.mc-bold {
+  font-weight: bold;
+}
+
+.mc-italic {
+  font-style: italic;
+}
+
+.mc-underline {
+  text-decoration: underline;
+}
+
+.mc-strikethrough {
+  text-decoration: line-through;
+  text-decoration-color: currentColor;
+}
+
+.mc-color-0 {
+  color: #000000;
+}
+
+.mc-color-1 {
+  color: #0000AA;
+}
+
+.mc-color-2 {
+  color: #00AA00;
+}
+
+.mc-color-3 {
+  color: #00AAAA;
+}
+
+.mc-color-4 {
+  color: #AA0000;
+}
+
+.mc-color-5 {
+  color: #AA00AA;
+}
+
+.mc-color-6 {
+  color: #FFAA00;
+}
+
+.mc-color-7 {
+  color: #AAAAAA;
+}
+
+.mc-color-8 {
+  color: #555555;
+}
+
+.mc-color-9 {
+  color: #5555FF;
+}
+
+.mc-color-a {
+  color: #55FF55;
+}
+
+.mc-color-b {
+  color: #55FFFF;
+}
+
+.mc-color-c {
+  color: #FF5555;
+}
+
+.mc-color-d {
+  color: #FF55FF;
+}
+
+.mc-color-e {
+  color: #FFFF55;
+}
+
+.mc-color-f {
+  color: #FFFFFF;
+}
+</style>

From 7fbb7ac1b6464c0a352c769192aeb66683f01b17 Mon Sep 17 00:00:00 2001
From: Tobi <43016900+Tobi406@users.noreply.github.com>
Date: Fri, 3 Jul 2020 16:46:37 +0200
Subject: [PATCH 2/3] Update src/components/Editor/Utilities/ColorParser.vue

Co-authored-by: Sam Goodger <sam@goodger.nz>
---
 src/components/Editor/Utilities/ColorParser.vue | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/src/components/Editor/Utilities/ColorParser.vue b/src/components/Editor/Utilities/ColorParser.vue
index eb0e5fd8..2424ea4e 100644
--- a/src/components/Editor/Utilities/ColorParser.vue
+++ b/src/components/Editor/Utilities/ColorParser.vue
@@ -15,15 +15,14 @@ export default {
   },
   methods: {
     randomize(text) {
-      var length = text.length;
-      var text = '';
-      var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
+      let randomisedText = '';
+      const possible = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
 
-      for (var i=0; i < length; i++) {
+      [...text].forEach(() => {
         text += possible.charAt(Math.floor(Math.random() * possible.length));
-      }
+      });
 
-      return text;
+      return randomisedText;
     },
   },
   computed: {

From 19118baf7a851b2752b602bf075acff650289a57 Mon Sep 17 00:00:00 2001
From: Tobi <43016900+Tobi406@users.noreply.github.com>
Date: Fri, 17 Jul 2020 10:45:10 +0200
Subject: [PATCH 3/3] Update src/components/Editor/Utilities/ColorParser.vue

Co-authored-by: Sam Goodger <sam@goodger.nz>
---
 src/components/Editor/Utilities/ColorParser.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Editor/Utilities/ColorParser.vue b/src/components/Editor/Utilities/ColorParser.vue
index 2424ea4e..afbbba8b 100644
--- a/src/components/Editor/Utilities/ColorParser.vue
+++ b/src/components/Editor/Utilities/ColorParser.vue
@@ -5,7 +5,7 @@
 <script>
 export default {
   props: ['text', 'showRaw'],
-  created() {
+  mounted() {
     const randomize = this.randomize;
     setInterval(() => {
       Array.from(document.getElementsByClassName('mc-obfuscated')).forEach((element) => {