2021-07-07 18:07:58 +02:00
< script lang = "ts" >
import { ChatMessageTypes } from "../../Stores/ChatStore";
import type { ChatMessage } from "../../Stores/ChatStore";
import { HtmlUtils } from "../../WebRtc/HtmlUtils";
import ChatPlayerName from './ChatPlayerName.svelte';
import type { PlayerInterface } from "../../Phaser/Game/PlayerInterface";
export let message: ChatMessage;
2021-07-13 11:00:32 +02:00
export let line: number;
2021-07-07 18:07:58 +02:00
$: author = message.author as PlayerInterface;
$: targets = message.targets || [];
$: texts = message.text || [];
function urlifyText(text: string): string {
return HtmlUtils.urlify(text)
}
function renderDate(date: Date) {
return date.toLocaleTimeString(navigator.language, {
hour: '2-digit',
minute:'2-digit'
});
}
2021-07-13 11:00:32 +02:00
function isLastIteration(index: number) {
return targets.length -1 === index;
}
2021-07-07 18:07:58 +02:00
< / script >
< div class = "chatElement" >
< div class = "messagePart" >
{ #if message . type === ChatMessageTypes . userIncoming }
2021-07-15 11:26:04 +02:00
>> { #each targets as target , index } < ChatPlayerName player = { target } line= { line } ></ ChatPlayerName > { #if ! isLastIteration ( index )} , { /if }{ /each } entered < span class = "date" > ({ renderDate ( message . date )} )</ span >
2021-07-07 18:07:58 +02:00
{ :else if message . type === ChatMessageTypes . userOutcoming }
2021-07-13 11:00:32 +02:00
<< { #each targets as target , index } < ChatPlayerName player = { target } line= { line } ></ ChatPlayerName > { #if ! isLastIteration ( index )} , { /if }{ /each } left < span class = "date" > ({ renderDate ( message . date )} )</ span >
2021-07-07 18:07:58 +02:00
{ :else if message . type === ChatMessageTypes . me }
2021-07-13 11:00:32 +02:00
< h4 > Me: < span class = "date" > ({ renderDate ( message . date )} )</ span ></ h4 >
2021-07-07 18:07:58 +02:00
{ #each texts as text }
< div >< p class = "my-text" > { @html urlifyText ( text )} </ p ></ div >
{ /each }
{ : else }
2021-07-13 11:00:32 +02:00
< h4 >< ChatPlayerName player = { author } line= { line } ></ ChatPlayerName > : < span class = "date" > ({ renderDate ( message . date )} )</ span ></ h4 >
2021-07-07 18:07:58 +02:00
{ #each texts as text }
< div >< p class = "other-text" > { @html urlifyText ( text )} </ p ></ div >
{ /each }
{ /if }
< / div >
< / div >
< style lang = "scss" >
h4, p {
2021-07-15 11:26:04 +02:00
font-family: Lato;
2021-07-07 18:07:58 +02:00
}
div.chatElement {
display: flex;
margin-bottom: 20px;
.messagePart {
flex-grow:1;
max-width: 100%;
2021-07-13 11:00:32 +02:00
span.date {
font-size: 80%;
color: gray;
}
2021-07-07 18:07:58 +02:00
div > p {
border-radius: 8px;
margin-bottom: 10px;
padding:6px;
overflow-wrap: break-word;
max-width: 100%;
display: inline-block;
& .other-text {
background: gray;
}
& .my-text {
background: #6489ff;
}
}
}
}
< / style >