Graphic upgrade 2
This commit is contained in:
parent
e2e94c11ff
commit
f7127bfb5a
front/src
Components/Chat
Phaser/Game
Stores
@ -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}>×</span></h3>
|
<h1>Your chat history <span class="float-right" on:click={closeChat}>×</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 {
|
||||||
|
@ -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}
|
||||||
>> {#each targets as target}<ChatPlayerName player={target}></ChatPlayerName>{/each} enter ({renderDate(message.date)})
|
>> {#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}
|
||||||
<< {#each targets as target}<ChatPlayerName player={target}></ChatPlayerName>{/each} left ({renderDate(message.date)})
|
<< {#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;
|
||||||
|
@ -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>
|
||||||
|
@ -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>
|
33
front/src/Components/Chat/ChatSubMenu.svelte
Normal file
33
front/src/Components/Chat/ChatSubMenu.svelte
Normal 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>
|
@ -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");
|
||||||
|
|
||||||
|
@ -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();
|
||||||
|
Loading…
Reference in New Issue
Block a user