_Bastler/partey_workadventure
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Lint & Prettier fixes on Svelte files

Browse Source
This commit is contained in:
Alexis Faizeau
2021-12-06 16:12:37 +01:00
parent 6cd76b9c1b
commit c95e20c677
46 changed files with 1852 additions and 1695 deletions
Download Patch File Download Diff File Expand all files Collapse all files
front/src/Components/Chat/ChatElement.svelte
+49 -40
View File
@@ -1,45 +1,53 @@
<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";
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;
export let line: number;
const chatStyleLink = "color: white; text-decoration: underline;";
$: author = message.author as PlayerInterface;
$: targets = message.targets || [];
$: texts = message.text || [];
function urlifyText(text: string): string {
return HtmlUtils.urlify(text, chatStyleLink);
}
function renderDate(date: Date) {
return date.toLocaleTimeString(navigator.language, {
hour: '2-digit',
minute:'2-digit'
hour: "2-digit",
minute: "2-digit",
});
}
function isLastIteration(index: number) {
return targets.length -1 === index;
return targets.length - 1 === index;
}
</script>
<div class="chatElement">
<div class="messagePart">
{#if message.type === ChatMessageTypes.userIncoming}
&gt;&gt; {#each targets as target, index}<ChatPlayerName player={target} line={line}></ChatPlayerName>{#if !isLastIteration(index)}, {/if}{/each} entered <span class="date">({renderDate(message.date)})</span>
&gt;&gt; {#each targets as target, index}<ChatPlayerName
player={target}
{line}
/>{#if !isLastIteration(index)}, {/if}{/each} entered
<span class="date">({renderDate(message.date)})</span>
{:else if message.type === ChatMessageTypes.userOutcoming}
&lt;&lt; {#each targets as target, index}<ChatPlayerName player={target} line={line}></ChatPlayerName>{#if !isLastIteration(index)}, {/if}{/each} left <span class="date">({renderDate(message.date)})</span>
&lt;&lt; {#each targets as target, index}<ChatPlayerName
player={target}
{line}
/>{#if !isLastIteration(index)}, {/if}{/each} left
<span class="date">({renderDate(message.date)})</span>
{:else if message.type === ChatMessageTypes.me}
<h4>Me: <span class="date">({renderDate(message.date)})</span></h4>
{#each texts as text}
<div><p class="my-text">{@html urlifyText(text)}</p></div>
{/each}
{:else}
<h4><ChatPlayerName player={author} line={line}></ChatPlayerName>: <span class="date">({renderDate(message.date)})</span></h4>
<h4><ChatPlayerName player={author} {line} />: <span class="date">({renderDate(message.date)})</span></h4>
{#each texts as text}
<div><p class="other-text">{@html urlifyText(text)}</p></div>
{/each}
@@ -48,37 +56,38 @@
</div>
<style lang="scss">
h4, p {
h4,
p {
font-family: Lato;
}
div.chatElement {
display: flex;
margin-bottom: 20px;
.messagePart {
flex-grow:1;
max-width: 100%;
display: flex;
margin-bottom: 20px;
span.date {
font-size: 80%;
color: gray;
}
.messagePart {
flex-grow: 1;
max-width: 100%;
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;
}
span.date {
font-size: 80%;
color: gray;
}
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>
</style>