Terncode/pixel.horse
1
0
Fork 0
mirror of https://github.com/Terncode/pixel.horse.git synced 2026-09-24 21:55:52 +02:00
Code Issues Packages Projects Releases Wiki Activity

Add chat log colors, timestamp, filter & emoji box

Browse Source 
Chat log names are now based off the ponies coat and mane.
Added a timestamp infront of each message.

There now is a filter on the top right of the chat box, with it you
can filter the past log.

Use no prefix for normal non-case sensitive search,
use # for case sensitive search and finally
use / for RegExp search.

When party or whisper messages are received, the respective tab is
highlighted.

Added an emoji picker, it is displayed when the chat bar is activated.

Co-authored-by: Stubenhocker1399 <[email protected]>
This commit is contained in:
terncode
2019-09-07 13:28:24 +02:00
committed by Stubenhocker1399
co-authored by Stubenhocker1399
parent cba4e94da2
commit 596fd33126
6 changed files with 509 additions and 171 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/ts/components/shared/chat-box/chat-box.ts
+22 -2
View File
@@ -9,7 +9,7 @@ import { faComment, faAngleDoubleRight } from '../../../client/icons';
import { isInParty } from '../../../client/partyUtils';
import { handleActionCommand } from '../../../client/playerActions';
import { hasHeadAnimation } from '../../../common/pony';
import { AutocompleteState, autocompleteMesssage, replaceEmojis } from '../../../client/emoji';
import { AutocompleteState, autocompleteMesssage, replaceEmojis, emojis } from '../../../client/emoji';
import { replaceNodes } from '../../../client/htmlUtils';
import { invalidEnumReturn } from '../../../common/utils';
import { findMatchingEntityNames, findEntityOrMockByAnyMeans, findBestEntityByName } from '../../../client/handlers';
@@ -45,6 +45,8 @@ export class ChatBox implements AfterViewInit, OnDestroy {
readonly maxSayLength = SAY_MAX_LENGTH;
readonly commentIcon = faComment;
readonly sendIcon = faAngleDoubleRight;
readonly emotes = emojis.map(e => e);
emojiBoxState = 'none';
@ViewChild('inputElement', { static: true }) inputElement!: ElementRef;
@ViewChild('typeBox', { static: true }) typeBox!: ElementRef;
@ViewChild('typePrefix', { static: true }) typePrefix!: ElementRef;
@@ -54,6 +56,7 @@ export class ChatBox implements AfterViewInit, OnDestroy {
isOpen = false;
message: string | undefined = '';
chatType = ChatType.Say;
btnEmoji = emojis[0].names[0];
private pasted = false;
private lastMessages: string[] = [];
private state: AutocompleteState = {};
@@ -92,6 +95,18 @@ export class ChatBox implements AfterViewInit, OnDestroy {
ngOnDestroy() {
this.subscriptions.forEach(s => s.unsubscribe());
}
addEmoji(emoji: string) {
this.emojiBoxState = 'none';
if (!this.message) this.message = emoji;
else if (this.input.maxLength > this.message.length) {
this.message += emoji;
}
}
openBox() {
if (this.emojiBoxState === 'none')
this.emojiBoxState = 'inline-block';
else this.emojiBoxState = 'none';
}
send(_event: Event | undefined) {
let chatType = this.chatType;
let message = replaceEmojis(cleanMessage(this.message || '')).substr(0, SAY_MAX_LENGTH);
@@ -136,7 +151,6 @@ export class ChatBox implements AfterViewInit, OnDestroy {
this.lastMessages.shift();
}
}
this.close();
}
}
@@ -259,6 +273,7 @@ export class ChatBox implements AfterViewInit, OnDestroy {
}
private close() {
if (this.isOpen) {
this.emojiBoxState = 'none';
this.input.blur();
this.isOpen = false;
this.chatBox.nativeElement.hidden = true;
@@ -273,6 +288,11 @@ export class ChatBox implements AfterViewInit, OnDestroy {
this.open();
}
}
onMouseEnter(event: MouseEvent) {
if (!event.target) return;
const value = emojis[Math.floor(Math.random() * emojis.length)];
this.btnEmoji = value.names[0];
}
toggleChatType() {
const chatTypes = getChatTypes(this.game);
this.chatType = chatTypes[(chatTypes.indexOf(this.chatType) + 1) % chatTypes.length];