slight tweaks

client/src/components/chat.vue

@@ -325,7 +325,7 @@
     @Ref('history') readonly _history!: HTMLElement
     @Ref('context') readonly _context!: any
 
-    _content = ''
+    content = ''
 
     get id() {
       return this.$accessor.user.id
@@ -339,18 +339,6 @@
       return this.$accessor.chat.history
     }
 
-    get content() {
-      return this._content
-    }
-
-    set content(text: string) {
-      if (text.length > length) {
-        this._content = text.substring(0, length)
-        return
-      }
-      this._content = text
-    }
-
     @Watch('history')
     onHistroyChange() {
       this.$nextTick(() => {
@@ -361,7 +349,7 @@
     @Watch('muted')
     onMutedChange(muted: boolean) {
       if (muted) {
-        this._content = ''
+        this.content = ''
       }
     }
 
@@ -405,11 +393,15 @@
     }
 
     onKeyDown(event: KeyboardEvent) {
-      if (typeof this._content === 'undefined' || this.muted) {
+      if (this.muted) {
         return
       }
 
-      if (this._content.length == length) {
+      if (this.content.length > length) {
+        this.content = this.content.substring(0, length)
+      }
+
+      if (this.content.length == length) {
         if (
           [8, 16, 17, 18, 20, 33, 34, 35, 36, 37, 38, 39, 40, 45, 46, 91, 93, 144].includes(event.keyCode) ||
           (event.ctrlKey && [67, 65, 88].includes(event.keyCode))
@@ -425,14 +417,14 @@
         return
       }
 
-      if (this._content === '') {
+      if (this.content === '') {
         event.preventDefault()
         return
       }
 
-      this.$accessor.chat.sendMessage(this._content)
+      this.$accessor.chat.sendMessage(this.content)
 
-      this._content = ''
+      this.content = ''
       event.preventDefault()
     }
   }

client/src/components/emote.vue

@@ -1,12 +1,12 @@
 <template>
   <div ref="emote" @click.stop.prevent="run" class="emote">
-    <i :class="classes"></i>
-    <i :class="classes"></i>
-    <i :class="classes"></i>
-    <i :class="classes"></i>
-    <i :class="classes"></i>
-    <i :class="classes"></i>
-    <i :class="classes"></i>
+    <div :class="classes" />
+    <div :class="classes" />
+    <div :class="classes" />
+    <div :class="classes" />
+    <div :class="classes" />
+    <div :class="classes" />
+    <div :class="classes" />
   </div>
 </template>
 
@@ -18,7 +18,7 @@
     bottom: 0;
     right: 0;
 
-    i {
+    div {
       position: absolute;
       width: 30px;
       height: 30px;
@@ -26,18 +26,30 @@
       font-size: 30px;
       line-height: 30px;
       text-align: center;
+      background-size: contain;
+
+      &.celebrate {
+        background-image: url('../assets/celebrate.png');
+      }
+
+      &.clap {
+        background-image: url('../assets/clap.png');
+      }
+
+      &.exclam {
+        background-image: url('../assets/exclam.png');
+      }
 
       &.heart {
-        color: rgb(204, 72, 72);
+        background-image: url('../assets/heart.png');
       }
-      &.poo {
-        color: rgb(112, 89, 58);
+
+      &.laughing {
+        background-image: url('../assets/laughing.png');
       }
-      &.grin {
-        color: rgb(228, 194, 84);
-      }
-      &.dizzy {
-        color: rgb(199, 199, 199);
+
+      &.sleep {
+        background-image: url('../assets/sleep.png');
       }
     }
   }
@@ -66,14 +78,7 @@
       let count = 0
       let finish: Array<Promise<any>> = []
 
-      const emotes: any = {
-        heart: 'fa-heart',
-        poo: 'fa-poo',
-        grin: 'fa-grin-tears',
-        ghost: 'fa-ghost',
-      }
-
-      this.classes = ['fas', emotes[this.emote.type] || 'fa-heart', this.emote.type]
+      this.classes = [this.emote.type]
 
       for (let child of this.container.children) {
         const ele = child as HTMLElement

client/src/components/emotes.vue

@@ -1,10 +1,12 @@
 <template>
   <div class="emotes">
     <ul v-if="!muted">
-      <li><i @click.stop.prevent="click('heart')" class="fas fa-heart"></i></li>
-      <li><i @click.stop.prevent="click('poo')" class="fas fa-poo"></i></li>
-      <li><i @click.stop.prevent="click('grin')" class="fas fa-grin-tears"></i></li>
-      <li><i @click.stop.prevent="click('ghost')" class="fas fa-ghost"></i></li>
+      <li><div @click.stop.prevent="click('heart')" class="heart" /></li>
+      <li><div @click.stop.prevent="click('sleep')" class="sleep" /></li>
+      <li><div @click.stop.prevent="click('laughing')" class="laughing" /></li>
+      <li><div @click.stop.prevent="click('celebrate')" class="celebrate" /></li>
+      <li><div @click.stop.prevent="click('exclam')" class="exclam" /></li>
+      <li><div @click.stop.prevent="click('clap')" class="clap" /></li>
     </ul>
   </div>
 </template>
@@ -21,8 +23,35 @@
         font-size: 24px;
         margin: 0 5px;
 
-        i {
+        div {
+          width: 24px;
+          height: 24px;
           cursor: pointer;
+          background-size: contain;
+
+          &.celebrate {
+            background-image: url('../assets/celebrate.png');
+          }
+
+          &.clap {
+            background-image: url('../assets/clap.png');
+          }
+
+          &.exclam {
+            background-image: url('../assets/exclam.png');
+          }
+
+          &.heart {
+            background-image: url('../assets/heart.png');
+          }
+
+          &.laughing {
+            background-image: url('../assets/laughing.png');
+          }
+
+          &.sleep {
+            background-image: url('../assets/sleep.png');
+          }
         }
       }
     }

client/src/neko/index.ts

@@ -33,7 +33,7 @@ export class NekoClient extends BaseClient implements EventEmitter<NekoEvents> {
   connect(password: string, username: string) {
     const url =
       process.env.NODE_ENV === 'development'
-        ? `ws://${process.env.VUE_APP_SERVER}/`
+        ? `ws://${location.host.split(':')[0]}:${process.env.VUE_APP_SERVER_PORT}/`
         : `${/https/gi.test(location.protocol) ? 'wss' : 'ws'}://${location.host}/`
 
     super.connect(url, password, username)
@@ -61,13 +61,6 @@ export class NekoClient extends BaseClient implements EventEmitter<NekoEvents> {
       duration: 5000,
       speed: 1000,
     })
-
-    this.$accessor.chat.newMessage({
-      id: this.id,
-      content: 'connected',
-      type: 'event',
-      created: new Date(),
-    })
   }
 
   protected [EVENT.DISCONNECTED](reason?: Error) {
@@ -125,6 +118,12 @@ export class NekoClient extends BaseClient implements EventEmitter<NekoEvents> {
   /////////////////////////////
   protected [EVENT.MEMBER.LIST]({ members }: MemberListPayload) {
     this.$accessor.user.setMembers(members)
+    this.$accessor.chat.newMessage({
+      id: this.id,
+      content: 'connected',
+      type: 'event',
+      created: new Date(),
+    })
   }
 
   protected [EVENT.MEMBER.CONNECTED](member: MemberPayload) {