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

Cleanup file changes

Browse Source
This commit is contained in:
Stubenhocker1399
2019-09-07 14:40:56 +02:00
parent 6d47b155ff
commit edfbe9c7de
4 changed files with 225 additions and 241 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/ts/components/shared/chat-box/chat-box.scss
+107 -107
View File
@@ -1,155 +1,155 @@
@import '../../../../styles/partials/variables'; @import '../../../../styles/partials/variables';
.chat-box { .chat-box {
max-width: 500px; max-width: 500px;
height: 37px; height: 37px;
position: absolute; position: absolute;
bottom: 0; bottom: 0;
left: 0; left: 0;
right: 0; right: 0;
} }
.chat-open-button { .chat-open-button {
display: block; display: block;
position: absolute; position: absolute;
left: 0; left: 0;
bottom: 0; bottom: 0;
z-index: 2; z-index: 2;
width: 42px; width: 42px;
height: 40px; height: 40px;
} }
.chat-send-button { .chat-send-button {
position: absolute; position: absolute;
right: 0; right: 0;
top: 0; top: 0;
padding: 0 8px; padding: 0 8px;
} }
.chat-input { .chat-input {
opacity: 0.6; opacity: 0.6;
background: black; background: black;
color: white; color: white;
border: none; border: none;
z-index: 1; z-index: 1;
padding: 8px; padding: 8px;
font-size: 14px; font-size: 14px;
padding-right: 35px; padding-right: 35px;
padding-left: 90px; padding-left: 90px;
border-radius: $border-radius-base; border-radius: $border-radius-base;
outline: none; outline: none;
width: 100%; width: 100%;
} }
.chat-box-type { .chat-box-type {
position: absolute; position: absolute;
left: 42px; left: 42px;
top: 8px; top: 8px;
font-size: 14px; font-size: 14px;
user-select: none; user-select: none;
cursor: pointer; cursor: pointer;
.chat-party > &, .chat-party-think > & { .chat-party > &, .chat-party-think > & {
color: $chat-party; color: $chat-party;
} }
.chat-say > &, .chat-think > & { .chat-say > &, .chat-think > & {
color: $chat-color; color: $chat-color;
} }
.chat-sup > & { .chat-sup > & {
color: $supporter-1; color: $supporter-1;
} }
.chat-sup1 > & { .chat-sup1 > & {
color: $supporter-1; color: $supporter-1;
} }
.chat-sup2 > & { .chat-sup2 > & {
color: $supporter-2; color: $supporter-2;
} }
.chat-sup3 > & { .chat-sup3 > & {
color: $supporter-3; color: $supporter-3;
}
.chat-whisper > & {
color: $chat-whisper;
} }
.chat-whisper > & {
color: $chat-whisper;
}
} }
.chat-box-type-name { .chat-box-type-name {
display: inline-block; display: inline-block;
max-width: 120px; max-width: 120px;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
vertical-align: bottom; vertical-align: bottom;
} }
.chat-emoji-button { .chat-emoji-button {
position: absolute; position: absolute;
right: 30px; right: 30px;
bottom: 3px; bottom: 3px;
padding: 0; padding: 0;
margin: 0; margin: 0;
-webkit-filter: grayscale(100%); -webkit-filter: grayscale(100%);
filter: grayscale(100%); filter: grayscale(100%);
&:hover { &:hover {
bottom: 4px; bottom: 4px;
-webkit-filter: grayscale(0); -webkit-filter: grayscale(0);
filter: grayscale(0%); filter: grayscale(0%);
} }
} }
.emoji-box { .emoji-box {
display: flex; display: flex;
padding: 10px; padding: 10px;
position: absolute; position: absolute;
background-color: #000000; background-color: #000000;
opacity: 0.95; opacity: 0.95;
bottom: 40px; bottom: 40px;
left: 0; left: 0;
right: 0; right: 0;
width: 100%; width: 100%;
height: 190px; height: 190px;
overflow-y: auto; overflow-y: auto;
&::-webkit-scrollbar { &::-webkit-scrollbar {
width: 7px; width: 7px;
} }
&::-webkit-scrollbar-thumb { &::-webkit-scrollbar-thumb {
background: rgb(77, 77, 77); background: rgb(77, 77, 77);
border-radius: 14px; border-radius: 14px;
} }
} }
.emoji-box ul { .emoji-box ul {
margin-bottom: 0; margin-bottom: 0;
} }
.emoji-box li { .emoji-box li {
display: inline; display: inline;
list-style: none; list-style: none;
column-width: 180px; column-width: 180px;
} }
.emote-sample { .emote-sample {
user-select: none; user-select: none;
display: inline-block; display: inline-block;
width: 29px; width: 29px;
height: 29px; height: 29px;
text-align: center; text-align: center;
margin-bottom: 3px; margin-bottom: 3px;
cursor: pointer; cursor: pointer;
&:hover { &:hover {
background: rgba(0, 255, 255, 0.2); background: rgba(0, 255, 255, 0.2);
border-radius: 2px; border-radius: 2px;
} }
} }
.emote-sample emote-box { .emote-sample emote-box {
line-height: 2; line-height: 2;
} }
src/ts/components/shared/chat-box/chat-box.ts
+1
View File
@@ -151,6 +151,7 @@ export class ChatBox implements AfterViewInit, OnDestroy {
this.lastMessages.shift(); this.lastMessages.shift();
} }
} }
this.close(); this.close();
} }
} }
src/ts/components/shared/chat-log/chat-log.scss
+113 -113
View File
@@ -10,169 +10,169 @@ $resizer-size: 12px;
$resizer-offset: $resizer-size / 2; $resizer-offset: $resizer-size / 2;
.chat-log { .chat-log {
display: flex; display: flex;
position: absolute; position: absolute;
bottom: 0; bottom: 0;
left: 0; left: 0;
right: 0; right: 0;
min-width: 200px; min-width: 200px;
max-width: 100%; max-width: 100%;
max-height: calc(100vh - 220px); max-height: calc(100vh - 220px);
min-height: 120px; min-height: 120px;
} }
.chat-log-buttons { .chat-log-buttons {
flex-direction: column-reverse; flex-direction: column-reverse;
width: $chat-log-buttons-width; width: $chat-log-buttons-width;
padding: 5px 3px; padding: 5px 3px;
padding-bottom: 30px; padding-bottom: 30px;
z-index: 2; z-index: 2;
} }
.chat-log-toggle { .chat-log-toggle {
position: absolute; position: absolute;
bottom: 5px; bottom: 5px;
left: 4px; left: 4px;
z-index: 3; z-index: 3;
} }
.has-unread .main-bubble { .has-unread .main-bubble {
color: $chat-whisper; color: $chat-whisper;
} }
.whispers-count { .whispers-count {
color: white; color: white;
font-weight: bold; font-weight: bold;
text-align: center; text-align: center;
position: absolute; position: absolute;
left: 6px; left: 6px;
top: 9px; top: 9px;
width: 16px; width: 16px;
font-size: 10px; font-size: 10px;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
line-height: 1rem; line-height: 1rem;
} }
.whisper-icon { .whisper-icon {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
font-size: 14px; font-size: 14px;
color: $chat-whisper !important; color: $chat-whisper !important;
} }
.chat-log-content { .chat-log-content {
position: relative; position: relative;
display: flex; display: flex;
background: $chat-log-bg; background: $chat-log-bg;
padding: 5px 0; padding: 5px 0;
padding-left: 40px; padding-left: 40px;
margin-left: -$chat-log-buttons-width; margin-left: -$chat-log-buttons-width;
border-radius: $border-radius-base; border-radius: $border-radius-base;
word-break: break-word; word-break: break-word;
white-space: pre-line; white-space: pre-line;
line-height: 20px; line-height: 20px;
height: 100%; height: 100%;
width: 100%; width: 100%;
} }
.chat-log-tabs { .chat-log-tabs {
position: absolute; position: absolute;
top: -$chat-log-tabs-height; top: -$chat-log-tabs-height;
left: 30px; left: 30px;
display: flex; display: flex;
user-select: none; user-select: none;
text-shadow: 0px 0px 4px #000000; text-shadow: 0px 0px 4px #000000;
} }
.chat-log-tab { .chat-log-tab {
background: $chat-log-bg-faded; background: $chat-log-bg-faded;
padding: 5px 10px 0; padding: 5px 10px 0;
margin-left: 10px; margin-left: 10px;
height: $chat-log-tabs-height; height: $chat-log-tabs-height;
border-top-left-radius: $border-radius-base; border-top-left-radius: $border-radius-base;
border-top-right-radius: $border-radius-base; border-top-right-radius: $border-radius-base;
color: white; color: white;
overflow: hidden; overflow: hidden;
&.active { &.active {
background: $chat-log-bg; background: $chat-log-bg;
} }
} }
.chat-log-scroll-outer { .chat-log-scroll-outer {
overflow: hidden; overflow: hidden;
width: 100%; width: 100%;
} }
.chat-log-scroll-inner { .chat-log-scroll-inner {
width: calc(100% + 50px); width: calc(100% + 50px);
height: 100%; height: 100%;
overflow-x: hidden; overflow-x: hidden;
overflow-y: scroll; overflow-y: scroll;
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
} }
.chat-log-scroll-inner-inner { .chat-log-scroll-inner-inner {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: flex-end; justify-content: flex-end;
min-height: 100%; min-height: 100%;
padding: 0 5px; padding: 0 5px;
} }
.chat-log-resize-top { .chat-log-resize-top {
position: absolute; position: absolute;
top: -$resizer-offset; top: -$resizer-offset;
right: $resizer-offset; right: $resizer-offset;
height: $resizer-size; height: $resizer-size;
left: 250px; left: 250px;
cursor: ns-resize; cursor: ns-resize;
} }
.chat-log-resize-top-right { .chat-log-resize-top-right {
position: absolute; position: absolute;
top: -($resizer-offset + 1); top: -($resizer-offset + 1);
right: -($resizer-offset + 1); right: -($resizer-offset + 1);
width: $resizer-size + 4; width: $resizer-size + 4;
height: $resizer-size + 4; height: $resizer-size + 4;
cursor: nesw-resize; cursor: nesw-resize;
} }
.chat-log-resize-right { .chat-log-resize-right {
position: absolute; position: absolute;
top: $resizer-offset; top: $resizer-offset;
right: -$resizer-offset; right: -$resizer-offset;
width: $resizer-size; width: $resizer-size;
bottom: $resizer-offset; bottom: $resizer-offset;
cursor: ew-resize; cursor: ew-resize;
} }
.resize-icon { .resize-icon {
font-size: 18px; font-size: 18px;
position: absolute; position: absolute;
top: -3px; top: -3px;
right: 1px; right: 1px;
transform: rotate(45deg); transform: rotate(45deg);
color: rgba(255, 255, 255, 0.2); color: rgba(255, 255, 255, 0.2);
} }
.chat-log-filter { .chat-log-filter {
border: none; border: none;
width: 100px; width: 100px;
&::placeholder { &::placeholder {
color: #ccc; color: #ccc;
} }
} }
@media only screen and (max-width: 360px) { @media only screen and (max-width: 360px) {
.chat-log-filter { .chat-log-filter {
position: absolute; position: absolute;
left: 0; left: 0;
bottom: 35px; bottom: 35px;
width: 100%; width: 100%;
border-radius: 2px; border-radius: 2px;
} }
} }
src/ts/components/shared/chat-log/chat-log.ts
+4 -21
View File
@@ -96,14 +96,13 @@ CLASSES[MessageType.WhisperTo] = 'chat-line-whisper';
CLASSES[MessageType.WhisperAnnouncement] = 'chat-line-whisper-announcement'; CLASSES[MessageType.WhisperAnnouncement] = 'chat-line-whisper-announcement';
CLASSES[MessageType.WhisperToAnnouncement] = 'chat-line-whisper-announcement'; CLASSES[MessageType.WhisperToAnnouncement] = 'chat-line-whisper-announcement';
export function createChatLogLineDOM(clickLabel: ClickHandler, clickName: ClickHandler): ChatLogLineDOM { export function createChatLogLineDOM(clickLabel: ClickHandler, clickName: ClickHandler): ChatLogLineDOM {
const line: ChatLogLineDOM = {} as any; const line: ChatLogLineDOM = {} as any;
line.root = element('div', 'chat-line', [ line.root = element('div', 'chat-line', [
element('span', 'chat-line-lead'), element('span', 'chat-line-lead'),
line.time = element('span', 'chat-line-name', [ line.time = element('span', 'chat-line-name', [
textNode(`[`), textNode('['),
line.timeContent = element( line.timeContent = element(
'span', 'chat-line-time-content', [textNode('')], undefined), 'span', 'chat-line-time-content', [textNode('')], undefined),
line.index = element('span', 'chat-line-time-index', [line.indexText = textNode('')]), line.index = element('span', 'chat-line-time-index', [line.indexText = textNode('')]),
@@ -111,7 +110,6 @@ export function createChatLogLineDOM(clickLabel: ClickHandler, clickName: ClickH
]), ]),
line.label = element( line.label = element(
'span', 'chat-line-label mr-1', [line.labelText = textNode('')], undefined, { click: () => clickLabel(line.entry) }), 'span', 'chat-line-label mr-1', [line.labelText = textNode('')], undefined, { click: () => clickLabel(line.entry) }),
line.prefixText = textNode(''), line.prefixText = textNode(''),
line.name = element('span', 'chat-line-name', [ line.name = element('span', 'chat-line-name', [
textNode(`[`), textNode(`[`),
@@ -164,7 +162,6 @@ function setNameColors(line: ChatLogLineDOM | undefined, colors?: string[] | nul
} }
function updateChatLogName(line: ChatLogLineDOM, { name, index }: ChatLogMessage) { function updateChatLogName(line: ChatLogLineDOM, { name, index }: ChatLogMessage) {
if (name) { if (name) {
line.name.style.display = 'inline'; line.name.style.display = 'inline';
replaceNodes(line.nameContent, name); replaceNodes(line.nameContent, name);
@@ -204,6 +201,7 @@ function findUserIndex(users: IndexEntryUser[], id: number, crc: number | undefi
return i; return i;
} }
} }
return -1; return -1;
} }
@@ -596,7 +594,6 @@ export class ChatLog implements AfterViewInit, OnDestroy, DoCheck {
} }
return colors; return colors;
} }
clearTimeOutAutoClear() { clearTimeOutAutoClear() {
if (this.autoClear) clearTimeout(this.autoClear); if (this.autoClear) clearTimeout(this.autoClear);
this.autoClear = null; this.autoClear = null;
@@ -622,7 +619,6 @@ export class ChatLog implements AfterViewInit, OnDestroy, DoCheck {
let colors: string[] | null = null; let colors: string[] | null = null;
colors = this.getCharaterColors(message.id); colors = this.getCharaterColors(message.id);
this.addEntryToList(this.local, GENERAL_CHAT_LIMIT, open && tab === 'local', entry); this.addEntryToList(this.local, GENERAL_CHAT_LIMIT, open && tab === 'local', entry);
setNameColors(entry.dom, colors); setNameColors(entry.dom, colors);
@@ -662,9 +658,9 @@ export class ChatLog implements AfterViewInit, OnDestroy, DoCheck {
this.messageCounter++; this.messageCounter++;
} }
} }
private addEntryToList(list: ChatLogMessage[], limit: number, isOpen: boolean, entry: ChatLogMessage) { private addEntryToList(list: ChatLogMessage[], limit: number, isOpen: boolean, entry: ChatLogMessage) {
let removedDom: ChatLogLineDOM | undefined; let removedDom: ChatLogLineDOM | undefined;
while (list.length >= limit) { while (list.length >= limit) {
const removed = list.shift(); const removed = list.shift();
@@ -677,6 +673,7 @@ export class ChatLog implements AfterViewInit, OnDestroy, DoCheck {
removed.dom = undefined; removed.dom = undefined;
} }
} }
list.push(entry); list.push(entry);
if (isOpen) { if (isOpen) {
@@ -685,13 +682,11 @@ export class ChatLog implements AfterViewInit, OnDestroy, DoCheck {
this.linesElement.appendChild(entry.dom.root); this.linesElement.appendChild(entry.dom.root);
} }
} }
toggle() { toggle() {
this.settings.chatlogClosed = !this.settings.chatlogClosed; this.settings.chatlogClosed = !this.settings.chatlogClosed;
this.settingsService.saveBrowserSettings(); this.settingsService.saveBrowserSettings();
this.updateOpen(); this.updateOpen();
} }
switchTab(tab: Tab) { switchTab(tab: Tab) {
if (this.activeTab !== tab) { if (this.activeTab !== tab) {
this.settings.chatlogTab = tab; this.settings.chatlogTab = tab;
@@ -701,13 +696,11 @@ export class ChatLog implements AfterViewInit, OnDestroy, DoCheck {
this.updateTabs(); this.updateTabs();
} }
} }
private updateTabs() { private updateTabs() {
this.setActiveTab(this.localTab.nativeElement, this.activeTab === 'local'); this.setActiveTab(this.localTab.nativeElement, this.activeTab === 'local');
this.setActiveTab(this.partyTab.nativeElement, this.activeTab === 'party'); this.setActiveTab(this.partyTab.nativeElement, this.activeTab === 'party');
this.setActiveTab(this.whisperTab.nativeElement, this.activeTab === 'whisper'); this.setActiveTab(this.whisperTab.nativeElement, this.activeTab === 'whisper');
} }
private setActiveTab(tab: HTMLElement, active: boolean) { private setActiveTab(tab: HTMLElement, active: boolean) {
if (active) { if (active) {
tab.classList.add('active'); tab.classList.add('active');
@@ -719,21 +712,17 @@ export class ChatLog implements AfterViewInit, OnDestroy, DoCheck {
tab.style.backgroundColor = this.inactiveBg; tab.style.backgroundColor = this.inactiveBg;
} }
} }
scrollToEnd() { scrollToEnd() {
// requestAnimationFrame(this.scrollHandler); // requestAnimationFrame(this.scrollHandler);
this.scrollToEndAtFrame = true; this.scrollToEndAtFrame = true;
} }
scrollHandler = () => { scrollHandler = () => {
this.scrollingToEnd = true; this.scrollingToEnd = true;
this.scroll.nativeElement.scrollTop = 99999; this.scroll.nativeElement.scrollTop = 99999;
} }
clickNameHandler = (message: ChatLogMessage) => { clickNameHandler = (message: ChatLogMessage) => {
this.zone.run(() => this.nameClick.emit(message)); this.zone.run(() => this.nameClick.emit(message));
} }
clickLabel = (message: ChatLogMessage) => { clickLabel = (message: ChatLogMessage) => {
this.zone.run(() => { this.zone.run(() => {
if (message.label) { if (message.label) {
@@ -741,11 +730,9 @@ export class ChatLog implements AfterViewInit, OnDestroy, DoCheck {
} }
}); });
} }
private clearList() { private clearList() {
removeAllNodes(this.linesElement); removeAllNodes(this.linesElement);
} }
private regenerateList() { private regenerateList() {
this.clearList(); this.clearList();
@@ -761,7 +748,6 @@ export class ChatLog implements AfterViewInit, OnDestroy, DoCheck {
lines.appendChild(entry.dom.root); lines.appendChild(entry.dom.root);
}); });
} }
drag({ x, y, type, event }: AgDragEvent, resizeY: boolean, resizeX: boolean) { drag({ x, y, type, event }: AgDragEvent, resizeY: boolean, resizeX: boolean) {
event.preventDefault(); event.preventDefault();
@@ -791,7 +777,6 @@ export class ChatLog implements AfterViewInit, OnDestroy, DoCheck {
this.scrollToEnd(); this.scrollToEnd();
} }
} }
private setUnread(value: number) { private setUnread(value: number) {
if (this.unread !== value) { if (this.unread !== value) {
this.unread = value; this.unread = value;
@@ -807,13 +792,11 @@ export class ChatLog implements AfterViewInit, OnDestroy, DoCheck {
} }
} }
} }
private findEntityFromMessages = (id: number): FakeEntity | undefined => { private findEntityFromMessages = (id: number): FakeEntity | undefined => {
return findEntityFromMessages(id, this.whisper) || return findEntityFromMessages(id, this.whisper) ||
findEntityFromMessages(id, this.party) || findEntityFromMessages(id, this.party) ||
findEntityFromMessages(id, this.local); findEntityFromMessages(id, this.local);
} }
private findEntityFromMessagesByName = (name: string): FakeEntity | undefined => { private findEntityFromMessagesByName = (name: string): FakeEntity | undefined => {
return findEntityFromMessagesByName(name, this.game.playerId, this.whisper) || return findEntityFromMessagesByName(name, this.game.playerId, this.whisper) ||
findEntityFromMessagesByName(name, this.game.playerId, this.party) || findEntityFromMessagesByName(name, this.game.playerId, this.party) ||