diff --git a/client/.env.development b/client/.env.development index 3022d8b..b0dc45c 100644 --- a/client/.env.development +++ b/client/.env.development @@ -1 +1 @@ -VUE_APP_SERVER=localhost:3000 +VUE_APP_SERVER_PORT=3000 diff --git a/client/ABOUT.md b/client/ABOUT.md index e69de29..f0063b6 100644 --- a/client/ABOUT.md +++ b/client/ABOUT.md @@ -0,0 +1,12 @@ +
+ +
+ +# **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 + diff --git a/client/src/assets/celebrate.png b/client/src/assets/celebrate.png new file mode 100644 index 0000000..2faa8bc Binary files /dev/null and b/client/src/assets/celebrate.png differ diff --git a/client/src/assets/clap.png b/client/src/assets/clap.png new file mode 100644 index 0000000..b3dcee7 Binary files /dev/null and b/client/src/assets/clap.png differ diff --git a/client/src/assets/exclam.png b/client/src/assets/exclam.png new file mode 100644 index 0000000..b2c3ef1 Binary files /dev/null and b/client/src/assets/exclam.png differ diff --git a/client/src/assets/heart.png b/client/src/assets/heart.png new file mode 100644 index 0000000..03e2af6 Binary files /dev/null and b/client/src/assets/heart.png differ diff --git a/client/src/assets/laughing.png b/client/src/assets/laughing.png new file mode 100644 index 0000000..20651e1 Binary files /dev/null and b/client/src/assets/laughing.png differ diff --git a/client/src/assets/sleep.png b/client/src/assets/sleep.png new file mode 100644 index 0000000..3e89ed7 Binary files /dev/null and b/client/src/assets/sleep.png differ diff --git a/client/src/components/chat.vue b/client/src/components/chat.vue index 89ba6c9..b59a992 100644 --- a/client/src/components/chat.vue +++ b/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() } } diff --git a/client/src/components/emote.vue b/client/src/components/emote.vue index ca09fd1..3c1f93b 100644 --- a/client/src/components/emote.vue +++ b/client/src/components/emote.vue @@ -1,12 +1,12 @@ @@ -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> = [] - 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 diff --git a/client/src/components/emotes.vue b/client/src/components/emotes.vue index 1609c47..fd0a36f 100644 --- a/client/src/components/emotes.vue +++ b/client/src/components/emotes.vue @@ -1,10 +1,12 @@ @@ -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'); + } } } } diff --git a/client/src/neko/index.ts b/client/src/neko/index.ts index e7aa889..0eb05b8 100644 --- a/client/src/neko/index.ts +++ b/client/src/neko/index.ts @@ -33,7 +33,7 @@ export class NekoClient extends BaseClient implements EventEmitter { 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 { 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 { ///////////////////////////// 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) {