slight tweaks

client/.env.development

@@ -1 +1 @@
-VUE_APP_SERVER=localhost:3000
+VUE_APP_SERVER_PORT=3000

client/ABOUT.md

@@ -0,0 +1,12 @@
+<div align="center">
+<a href="https://github.com/nurdism/neko"><img src="https://github.com/nurdism/neko/raw/master/.github/logo.png" width="650" height="auto"/></a>
+</div>
+
+# **n**.eko
+This is a proof of concept project I threw together over the last few days, it's not perfect, but it looks nice. This uses web rtc to stream a desktop inside of a docker container, I made this because [rabb.it](https://en.wikipedia.org/wiki/Rabb.it) went under and my internet can't handle streaming and discord keeps crashing. I just want to watch anime with my friends ლ(ಠ益ಠლ) so I started digging throughout the net and found a few *kinda* clones, but non of them had the virtual browser, then I found [Turtus](https://github.com/Khauri/Turtus) and I was able to figure out the rest.
+
+This is by no means a fully featured clone of rabbit. The client has no concept of other peers. It has bugs, but for the most part it works. I'm not sure what the future holds for this. If I continue to use it and like it, I'll probably keep pushing updates to it. I'd be happy to accept PRs for any improvements.
+
+### Why n.eko?
+I like cats (Neko is the Japanese word for cat), I'm a weeb/nerd, I own the domain [n.eko.moe](https://n.eko.moe/) and I love the logo /shrug
+

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) {