diff --git a/client/.env.development b/client/.env.development index 3022d8be..b0dc45cf 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 e69de29b..f0063b66 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 00000000..2faa8bc1 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 00000000..b3dcee76 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 00000000..b2c3ef1c 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 00000000..03e2af64 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 00000000..20651e19 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 00000000..3e89ed7c 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 89ba6c94..b59a9923 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 ca09fd1a..3c1f93b6 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 1609c472..fd0a36f3 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 e7aa8890..0eb05b88 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) {