diff --git a/front/src/App.vue b/front/src/App.vue
index 73490eb..b1e09ff 100644
--- a/front/src/App.vue
+++ b/front/src/App.vue
@@ -77,98 +77,15 @@ export default {
         console.log("messages!",result)
         this.$store.commit(
           "setRules",
-          result.messages
-            .filter((m) => m.content.match(/\/poll/gm))
-            .map((m) => this.toCSS(m))
+          result
+          // result.messages
+          //   .filter((m) => m.content.match(/\/poll/gm))
+          //   .map((m) => this.toCSS(m))
         );
       });
 
       api.zulip.listen(this.zulipClient);
     },
-
-    toCSS(poll) {
-      let className = "",
-        emoji_code = "",
-        options = [],
-        rules = [],
-        subs = poll.submessages.map((s) => JSON.parse(s.content));
-      subs.forEach((sub) => {
-        if (sub.widget_type && sub.widget_type == "poll") {
-          className = sub.extra_data.question;
-          emoji_code = this.toEmojiCode(className);
-          // console.log(emoji_code);
-          options = sub.extra_data.options;
-          if (options) {
-            options.forEach((option) => {
-              let r = this.constructRule(option, options, subs);
-              if (this.validateRule(r)) {
-                rules.push(r);
-              }
-            });
-          }
-        } else if (sub.type && sub.type == "new_option") {
-          let r = this.constructRule(sub.option, options, subs);
-          if (this.validateRule(r)) {
-            rules.push(r);
-          }
-        }
-      });
-      return { className, emoji_code, rules };
-    },
-
-    constructRule(option, options, subs) {
-      const text = option,
-        votes = subs.filter(
-          (s) =>
-            s.type == "vote" &&
-            s.key.replace("canned,", "") == options.indexOf(option)
-        ),
-        weight =
-          votes.length > 0
-            ? votes.map((s) => s.vote).reduce((a, b) => a + b)
-            : 0;
-      return { text, weight };
-    },
-
-    toEmojiCode: (emoji) => {
-      console.log(emoji);
-      emoji.replace(/\p{Emoji}/gu, (m) => m.codePointAt(0).toString(16));
-    },
-
-    // toEmojiCode: (emoji) => {
-    //   var t = this;
-    //   emoji.replace(/\p{Emoji}/gu, function (m) {
-    //     console.log(m, t.toUTF16);
-    //     this.toUTF16(m.codePointAt(0));
-    //   });
-    //   return emoji;
-    // },
-
-    toUTF16: (codePoint) => {
-      var TEN_BITS = parseInt("1111111111", 2);
-
-      if (codePoint <= 0xffff) {
-        return this.u(codePoint);
-      }
-      codePoint -= 0x10000;
-
-      // Shift right to get to most significant 10 bits
-      var leadSurrogate = 0xd800 + (codePoint >> 10);
-
-      // Mask to get least significant 10 bits
-      var tailSurrogate = 0xdc00 + (codePoint & TEN_BITS);
-
-      return this.u(leadSurrogate) + this.u(tailSurrogate);
-    },
-
-    u: (codeUnit) => {
-      return "\\u" + codeUnit.toString(16).toUpperCase();
-    },
-
-    // minimal validation. rules have to contain a colon and semicolon
-    validateRule: (rule) => { 
-      return rule.text.match(/.+:.+;/gm);
-    },
   },
 };
 </script>
diff --git a/front/src/mixins/emoji.js b/front/src/mixins/emoji.js
new file mode 100644
index 0000000..97c2177
--- /dev/null
+++ b/front/src/mixins/emoji.js
@@ -0,0 +1,34 @@
+let toUTF16 = (codePoint) => {
+  var TEN_BITS = parseInt("1111111111", 2);
+  if (codePoint <= 0xffff) {
+    return u(codePoint);
+  }
+  codePoint -= 0x10000;
+  // Shift right to get to most significant 10 bits
+  var leadSurrogate = 0xd800 + (codePoint >> 10);
+  // Mask to get least significant 10 bits
+  var tailSurrogate = 0xdc00 + (codePoint & TEN_BITS);
+  return u(leadSurrogate) + (tailSurrogate);
+}
+
+let u = (codeUnit) => {
+  return "\\u" + codeUnit.toString(16).toUpperCase();
+}
+
+export default {
+  methods: {
+    // toEmojiCode: (emoji) => {
+    //   console.log(emoji);
+    //   emoji.replace(/\p{Emoji}/gu, (m) => m.codePointAt(0).toString(16));
+    // },
+    
+    toEmojiCode: (emoji) => {
+      emoji.replace(/\p{Emoji}/gu, function (m) {
+        toUTF16(m.codePointAt(0));
+      });
+      console.log(emoji)
+      return emoji;
+    },
+    
+  }
+}
\ No newline at end of file
diff --git a/front/src/store/index.js b/front/src/store/index.js
index f545766..d336fcd 100644
--- a/front/src/store/index.js
+++ b/front/src/store/index.js
@@ -1,4 +1,54 @@
 import { createStore } from 'vuex'
+import emoji from "../mixins/emoji";
+
+let toCSS = (poll) => {
+  let className = "",
+    emoji_code = "",
+    options = [],
+    rules = [],
+    subs = poll.submessages.map((s) => JSON.parse(s.content));
+  subs.forEach((sub) => {
+    if (sub.widget_type && sub.widget_type == "poll") {
+      className = sub.extra_data.question;
+      emoji_code = emoji.methods.toEmojiCode(className);
+      // console.log(emoji_code);
+      options = sub.extra_data.options;
+      if (options) {
+        options.forEach((option) => {
+          let r = constructRule(option, options, subs);
+          if (validateRule(r)) {
+            rules.push(r);
+          }
+        });
+      }
+    } else if (sub.type && sub.type == "new_option") {
+      let r = constructRule(sub.option, options, subs);
+      if (validateRule(r)) {
+        rules.push(r);
+      }
+    }
+  });
+  return { className, emoji_code, rules };
+}
+
+let constructRule = (option, options, subs) => {
+  const text = option,
+    votes = subs.filter(
+      (s) =>
+        s.type == "vote" &&
+        s.key.replace("canned,", "") == options.indexOf(option)
+    ),
+    weight =
+      votes.length > 0
+        ? votes.map((s) => s.vote).reduce((a, b) => a + b)
+        : 0;
+  return { text, weight };
+}
+
+// minimal validation. rules have to contain a colon and semicolon
+let validateRule = (rule) => { 
+  return rule.text.match(/.+:.+;/gm);
+}
 
 export default createStore({
 
@@ -16,7 +66,11 @@ export default createStore({
     setMobile    : (state, mobile)    => state.isMobile  = mobile,
     setStreams   : (state, streams)   => state.streams = streams,
     setContents  : (state, messages)  => state.contents = messages,
-    setRules     : (state, messages)  => state.rules  = messages,
+    setRules: (state, messages) => {
+      state.rules = messages.messages
+          .filter((m) => m.content.match(/\/poll/gm))
+          .map((m) => toCSS(m))
+    },
     selectTag    : (state, tag)       => state.selectedTag = tag,
   },