yay emoji!!!

client/src/store/emoji.ts

@@ -0,0 +1,74 @@
+import { getterTree, mutationTree, actionTree } from 'typed-vuex'
+import { get, set } from '~/utils/localstorage'
+import { accessor } from '~/store'
+
+export const namespaced = true
+
+interface Group {
+  name: string
+  id: string
+  list: string[]
+}
+
+interface Keywords {
+  [name: string]: string[]
+}
+
+interface Emojis {
+  groups: Group[]
+  keywords: Keywords
+  list: string[]
+}
+
+export const state = () => ({
+  groups: [
+    {
+      id: 'recent',
+      name: 'Recent',
+      list: JSON.parse(get('emoji_recent', '[]')) as string[],
+    },
+  ] as Group[],
+  keywords: {} as Keywords,
+  list: [] as string[],
+})
+
+export const getters = getterTree(state, {})
+
+export const mutations = mutationTree(state, {
+  setRecent(state, emoji: string) {
+    if (!state.groups[0].list.includes(emoji)) {
+      if (state.groups[0].list.length > 30) {
+        state.groups[0].list.shift()
+      }
+      state.groups[0].list.push(emoji)
+      set('emoji_recent', JSON.stringify(state.groups[0].list))
+    }
+  },
+  addGroup(state, group: Group) {
+    state.groups.push(group)
+  },
+  setKeywords(state, keywords: Keywords) {
+    state.keywords = keywords
+  },
+  setList(state, list: string[]) {
+    state.list = list
+  },
+})
+
+export const actions = actionTree(
+  { state, getters, mutations },
+  {
+    initialise() {
+      $http
+        .get<Emojis>('/emoji.json')
+        .then(req => {
+          for (const group of req.data.groups) {
+            accessor.emoji.addGroup(group)
+          }
+          accessor.emoji.setList(req.data.list)
+          accessor.emoji.setKeywords(req.data.keywords)
+        })
+        .catch(console.error)
+    },
+  },
+)

client/src/store/index.ts

@@ -8,6 +8,7 @@ import * as remote from './remote'
 import * as user from './user'
 import * as settings from './settings'
 import * as client from './client'
+import * as emoji from './emoji'
 
 export const state = () => ({
   connecting: false,
@@ -34,6 +35,11 @@ export const mutations = mutationTree(state, {
 export const actions = actionTree(
   { state, mutations },
   {
+    //
+    initialise(store) {
+      accessor.emoji.initialise()
+    },
+
     //
     connect(store, { username, password }: { username: string; password: string }) {
       $client.connect(password, username)
@@ -45,7 +51,7 @@ export const storePattern = {
   state,
   mutations,
   actions,
-  modules: { video, chat, user, remote, settings, client },
+  modules: { video, chat, user, remote, settings, client, emoji },
 }
 
 Vue.use(Vuex)

client/src/store/remote.ts

@@ -44,10 +44,6 @@ export const mutations = mutationTree(state, {
 export const actions = actionTree(
   { state, getters, mutations },
   {
-    initialise({ commit }) {
-      //
-    },
-
     sendClipboard({ getters }, clipboard: string) {
       if (!accessor.connected || !getters.hosting) {
         return