Graphic upgrade 2

This commit is contained in:
GRL 2021-07-13 11:00:32 +02:00
parent e2e94c11ff
commit f7127bfb5a
7 changed files with 112 additions and 34 deletions

View File

@ -31,13 +31,13 @@
<aside class="chatWindow" transition:fly="{{ x: -1000, duration: 500 }}"> <aside class="chatWindow" transition:fly="{{ x: -1000, duration: 500 }}">
<section class="chatWindowTitle"> <section class="chatWindowTitle">
<h3>Here is your chat history <span class="float-right" on:click={closeChat}>&times</span></h3> <h1>Your chat history <span class="float-right" on:click={closeChat}>&times</span></h1>
</section> </section>
<section class="messagesList" bind:this={listDom}> <section class="messagesList" bind:this={listDom}>
<ul> <ul>
{#each $chatMessagesStore as message} {#each $chatMessagesStore as message, i}
<li><ChatElement message={message}></ChatElement></li> <li><ChatElement message={message} line={i}></ChatElement></li>
{/each} {/each}
</ul> </ul>
</section> </section>
@ -47,7 +47,7 @@
</aside> </aside>
<style lang="scss"> <style lang="scss">
h3 { h1 {
font-family: 'Whiteney'; font-family: 'Whiteney';
span.float-right { span.float-right {
@ -55,6 +55,7 @@
line-height: 25px; line-height: 25px;
font-weight: bold; font-weight: bold;
float: right; float: right;
cursor: pointer;
} }
} }
@ -77,11 +78,10 @@
border-bottom-right-radius: 16px; border-bottom-right-radius: 16px;
border-top-right-radius: 16px; border-top-right-radius: 16px;
h3 { h1 {
background-color: #5f5f5f; background-color: #5f5f5f;
border-radius: 8px; border-radius: 8px;
padding: 2px; padding: 2px;
font-size: 100%;
} }
.chatWindowTitle { .chatWindowTitle {

View File

@ -6,6 +6,7 @@
import type {PlayerInterface} from "../../Phaser/Game/PlayerInterface"; import type {PlayerInterface} from "../../Phaser/Game/PlayerInterface";
export let message: ChatMessage; export let message: ChatMessage;
export let line: number;
$: author = message.author as PlayerInterface; $: author = message.author as PlayerInterface;
$: targets = message.targets || []; $: targets = message.targets || [];
@ -20,21 +21,24 @@
minute:'2-digit' minute:'2-digit'
}); });
} }
function isLastIteration(index: number) {
return targets.length -1 === index;
}
</script> </script>
<div class="chatElement"> <div class="chatElement">
<div class="messagePart"> <div class="messagePart">
{#if message.type === ChatMessageTypes.userIncoming} {#if message.type === ChatMessageTypes.userIncoming}
&gt;&gt; {#each targets as target}<ChatPlayerName player={target}></ChatPlayerName>{/each} enter ({renderDate(message.date)}) &gt;&gt; {#each targets as target, index}<ChatPlayerName player={target} line={line}></ChatPlayerName>{#if !isLastIteration(index)}, {/if}{/each} enter <span class="date">({renderDate(message.date)})</span>
{:else if message.type === ChatMessageTypes.userOutcoming} {:else if message.type === ChatMessageTypes.userOutcoming}
&lt;&lt; {#each targets as target}<ChatPlayerName player={target}></ChatPlayerName>{/each} left ({renderDate(message.date)}) &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>
{:else if message.type === ChatMessageTypes.me} {:else if message.type === ChatMessageTypes.me}
<h4>Me: ({renderDate(message.date)})</h4> <h4>Me: <span class="date">({renderDate(message.date)})</span></h4>
{#each texts as text} {#each texts as text}
<div><p class="my-text">{@html urlifyText(text)}</p></div> <div><p class="my-text">{@html urlifyText(text)}</p></div>
{/each} {/each}
{:else} {:else}
<h4><ChatPlayerName player={author}></ChatPlayerName>: ({renderDate(message.date)})</h4> <h4><ChatPlayerName player={author} line={line}></ChatPlayerName>: <span class="date">({renderDate(message.date)})</span></h4>
{#each texts as text} {#each texts as text}
<div><p class="other-text">{@html urlifyText(text)}</p></div> <div><p class="other-text">{@html urlifyText(text)}</p></div>
{/each} {/each}
@ -54,6 +58,11 @@
flex-grow:1; flex-grow:1;
max-width: 100%; max-width: 100%;
span.date {
font-size: 80%;
color: gray;
}
div > p { div > p {
border-radius: 8px; border-radius: 8px;
margin-bottom: 10px; margin-bottom: 10px;

View File

@ -18,7 +18,7 @@
</script> </script>
<form on:submit|preventDefault={saveMessage}> <form on:submit|preventDefault={saveMessage}>
<input type="text" bind:value={newMessageText} placeholder="Type here" on:focus={onFocus} on:blur={onBlur} > <input type="text" bind:value={newMessageText} placeholder="Enter your message..." on:focus={onFocus} on:blur={onBlur} >
<button type="submit"> <button type="submit">
<img src="/static/images/send.png" alt="Send" width="20"> <img src="/static/images/send.png" alt="Send" width="20">
</button> </button>

View File

@ -1,37 +1,50 @@
<script lang="ts"> <script lang="ts">
import type {PlayerInterface} from "../../Phaser/Game/PlayerInterface"; import type {PlayerInterface} from "../../Phaser/Game/PlayerInterface";
import {requestVisitCardsStore} from "../../Stores/GameStore"; import {chatSubMenuVisbilityStore} from "../../Stores/ChatStore";
import {onDestroy, onMount} from "svelte";
import type {Unsubscriber} from "svelte/store";
import ChatSubMenu from "./ChatSubMenu.svelte";
export let player:PlayerInterface; export let player: PlayerInterface;
let showMenu: boolean = false; export let line: number;
let isSubMenuOpen: boolean;
let chatSubMenuVisivilytUnsubcribe: Unsubscriber;
function openVisitCard() { function openSubMenu() {
if (player.visitCardUrl) { chatSubMenuVisbilityStore.openSubMenu(player.name, line);
requestVisitCardsStore.set(player.visitCardUrl);
}
} }
onMount(() => {
chatSubMenuVisivilytUnsubcribe = chatSubMenuVisbilityStore.subscribe((newValue) => {
isSubMenuOpen = (newValue === player.name + line);
})
})
onDestroy(() => {
chatSubMenuVisivilytUnsubcribe();
})
</script> </script>
<span class="chatPlayerName" style="color: {player.color || 'white'}" on:click={() => showMenu = !showMenu}> <span class="subMenu">
<span class="chatPlayerName" style="color: {player.color || 'white'}" on:click={openSubMenu}>
{player.name} {player.name}
</span>
{#if isSubMenuOpen}
<ChatSubMenu player={player}/>
{/if}
</span> </span>
{#if showMenu}
<ul class="selectMenu">
<li><button class="text-btn" disabled={!player.visitCardUrl} on:click={openVisitCard}>Visit card</button></li>
</ul>
{/if}
<style lang="scss"> <style lang="scss">
span.subMenu {
display: inline-block;
}
span.chatPlayerName {
margin-left: 3px;
}
.chatPlayerName:hover { .chatPlayerName:hover {
text-decoration: underline; text-decoration: underline;
cursor: pointer; cursor: pointer;
} }
ul.selectMenu {
background-color: whitesmoke;
position: absolute;
right: 0;
border-radius: 4px;
}
</style> </style>

View File

@ -0,0 +1,33 @@
<script lang="ts">
import type {PlayerInterface} from "../../Phaser/Game/PlayerInterface";
import {requestVisitCardsStore} from "../../Stores/GameStore";
export let player: PlayerInterface;
function openVisitCard() {
if (player.visitCardUrl) {
requestVisitCardsStore.set(player.visitCardUrl);
}
}
</script>
<ul class="selectMenu" style="border-top: {player.color || 'whitesmoke'} 5px solid">
<li><button class="text-btn" disabled={!player.visitCardUrl} on:click={openVisitCard}>Visit card</button></li>
<li><button class="text-btn" disabled>Add friend</button></li>
</ul>
<style lang="scss">
ul.selectMenu {
background-color: whitesmoke;
position: absolute;
padding: 5px;
border-radius: 4px;
list-style-type: none;
li {
text-align: center;
}
}
</style>

View File

@ -92,6 +92,7 @@ import { peerStore, screenSharingPeerStore } from "../../Stores/PeerStore";
import { videoFocusStore } from "../../Stores/VideoFocusStore"; import { videoFocusStore } from "../../Stores/VideoFocusStore";
import { biggestAvailableAreaStore } from "../../Stores/BiggestAvailableAreaStore"; import { biggestAvailableAreaStore } from "../../Stores/BiggestAvailableAreaStore";
import { playersStore } from "../../Stores/PlayersStore"; import { playersStore } from "../../Stores/PlayersStore";
import { chatVisibilityStore } from "../../Stores/ChatStore";
export interface GameSceneInitInterface { export interface GameSceneInitInterface {
initPosition: PointInterface | null; initPosition: PointInterface | null;
@ -169,6 +170,7 @@ export class GameScene extends DirtyScene {
private createPromiseResolve!: (value?: void | PromiseLike<void>) => void; private createPromiseResolve!: (value?: void | PromiseLike<void>) => void;
private iframeSubscriptionList!: Array<Subscription>; private iframeSubscriptionList!: Array<Subscription>;
private peerStoreUnsubscribe!: () => void; private peerStoreUnsubscribe!: () => void;
private chatVisibilityUnsubscribe!: () => void;
private biggestAvailableAreaStoreUnsubscribe!: () => void; private biggestAvailableAreaStoreUnsubscribe!: () => void;
MapUrlFile: string; MapUrlFile: string;
RoomId: string; RoomId: string;
@ -571,6 +573,10 @@ export class GameScene extends DirtyScene {
} }
oldPeerNumber = newPeerNumber; oldPeerNumber = newPeerNumber;
}); });
this.chatVisibilityUnsubscribe = chatVisibilityStore.subscribe((v) => {
this.openChatIcon.setVisible(!v);
});
} }
/** /**
@ -1150,6 +1156,7 @@ ${escapedMessage}
this.pinchManager?.destroy(); this.pinchManager?.destroy();
this.emoteManager.destroy(); this.emoteManager.destroy();
this.peerStoreUnsubscribe(); this.peerStoreUnsubscribe();
this.chatVisibilityUnsubscribe();
this.biggestAvailableAreaStoreUnsubscribe(); this.biggestAvailableAreaStoreUnsubscribe();
iframeListener.unregisterAnswerer("getState"); iframeListener.unregisterAnswerer("getState");

View File

@ -100,3 +100,19 @@ function createChatMessagesStore() {
}; };
} }
export const chatMessagesStore = createChatMessagesStore(); export const chatMessagesStore = createChatMessagesStore();
function createChatSubMenuVisibilityStore() {
const { subscribe, update } = writable<string>("");
return {
subscribe,
openSubMenu(playerName: string, index: number) {
const id = playerName + index;
update((oldValue) => {
return oldValue === id ? "" : id;
});
},
};
}
export const chatSubMenuVisbilityStore = createChatSubMenuVisibilityStore();