Merge branch 'develop' of github.com:thecodingmachine/workadventure into 2daysLimit
This commit is contained in:
David Négrier
commit
c85679b42c
117 changed files with 3650 additions and 3102 deletions
|
|
@ -33,10 +33,10 @@
|
|||
import EmoteMenu from "./EmoteMenu/EmoteMenu.svelte";
|
||||
import VideoOverlay from "./Video/VideoOverlay.svelte";
|
||||
import { gameOverlayVisibilityStore } from "../Stores/GameOverlayStoreVisibility";
|
||||
import AdminMessage from "./TypeMessage/BanMessage.svelte";
|
||||
import TextMessage from "./TypeMessage/TextMessage.svelte";
|
||||
import { banMessageVisibleStore } from "../Stores/TypeMessageStore/BanMessageStore";
|
||||
import { textMessageVisibleStore } from "../Stores/TypeMessageStore/TextMessageStore";
|
||||
import BanMessageContainer from "./TypeMessage/BanMessageContainer.svelte";
|
||||
import TextMessageContainer from "./TypeMessage/TextMessageContainer.svelte";
|
||||
import { banMessageStore } from "../Stores/TypeMessageStore/BanMessageStore";
|
||||
import { textMessageStore } from "../Stores/TypeMessageStore/TextMessageStore";
|
||||
import { warningContainerStore } from "../Stores/MenuStore";
|
||||
import WarningContainer from "./WarningContainer/WarningContainer.svelte";
|
||||
import { layoutManagerVisibilityStore } from "../Stores/LayoutManagerStore";
|
||||
|
|
@ -45,6 +45,9 @@
|
|||
import AudioManager from "./AudioManager/AudioManager.svelte";
|
||||
import { showReportScreenStore, userReportEmpty } from "../Stores/ShowReportScreenStore";
|
||||
import ReportMenu from "./ReportMenu/ReportMenu.svelte";
|
||||
import { followStateStore } from "../Stores/FollowStore";
|
||||
import { peerStore } from "../Stores/PeerStore";
|
||||
import FollowMenu from "./FollowMenu/FollowMenu.svelte";
|
||||
|
||||
export let game: Game;
|
||||
</script>
|
||||
|
|
@ -75,14 +78,13 @@
|
|||
<EnableCameraScene {game} />
|
||||
</div>
|
||||
{/if}
|
||||
{#if $banMessageVisibleStore}
|
||||
{#if $banMessageStore.length > 0}
|
||||
<div>
|
||||
<AdminMessage />
|
||||
<BanMessageContainer />
|
||||
</div>
|
||||
{/if}
|
||||
{#if $textMessageVisibleStore}
|
||||
{:else if $textMessageStore.length > 0}
|
||||
<div>
|
||||
<TextMessage />
|
||||
<TextMessageContainer />
|
||||
</div>
|
||||
{/if}
|
||||
{#if $soundPlayingStore}
|
||||
|
|
@ -105,6 +107,11 @@
|
|||
<ReportMenu />
|
||||
</div>
|
||||
{/if}
|
||||
{#if $followStateStore !== "off" || $peerStore.size > 0}
|
||||
<div>
|
||||
<FollowMenu />
|
||||
</div>
|
||||
{/if}
|
||||
{#if $menuIconVisiblilityStore}
|
||||
<div>
|
||||
<MenuIcon />
|
||||
|
|
|
|||
|
|
@ -19,12 +19,13 @@
|
|||
audioManagerVolumeStore.setVolume(volume);
|
||||
audioManagerVolumeStore.setMuted(localUserStore.getAudioPlayerMuted());
|
||||
|
||||
unsubscriberFileStore = audioManagerFileStore.subscribe(() => {
|
||||
unsubscriberFileStore = audioManagerFileStore.subscribe((src) => {
|
||||
HTMLAudioPlayer.pause();
|
||||
HTMLAudioPlayer.src = src;
|
||||
HTMLAudioPlayer.loop = get(audioManagerVolumeStore).loop;
|
||||
HTMLAudioPlayer.volume = get(audioManagerVolumeStore).volume;
|
||||
HTMLAudioPlayer.muted = get(audioManagerVolumeStore).muted;
|
||||
HTMLAudioPlayer.play();
|
||||
void HTMLAudioPlayer.play();
|
||||
});
|
||||
unsubscriberVolumeStore = audioManagerVolumeStore.subscribe((audioManager: audioManagerVolume) => {
|
||||
const reduceVolume = audioManager.talking && audioManager.decreaseWhileTalking;
|
||||
|
|
@ -148,9 +149,7 @@
|
|||
</label>
|
||||
<section class="audio-manager-file">
|
||||
<!-- svelte-ignore a11y-media-has-caption -->
|
||||
<audio class="audio-manager-audioplayer" bind:this={HTMLAudioPlayer}>
|
||||
<source src={$audioManagerFileStore} />
|
||||
</audio>
|
||||
<audio class="audio-manager-audioplayer" bind:this={HTMLAudioPlayer} />
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -67,6 +67,7 @@
|
|||
.messagePart {
|
||||
flex-grow: 1;
|
||||
max-width: 100%;
|
||||
user-select: text;
|
||||
|
||||
span.date {
|
||||
font-size: 80%;
|
||||
|
|
|
|||
197
front/src/Components/FollowMenu/FollowMenu.svelte
Normal file
197
front/src/Components/FollowMenu/FollowMenu.svelte
Normal file
|
|
@ -0,0 +1,197 @@
|
|||
<!--
|
||||
vim: ft=typescript
|
||||
-->
|
||||
<script lang="ts">
|
||||
import { gameManager } from "../../Phaser/Game/GameManager";
|
||||
import followImg from "../images/follow.svg";
|
||||
|
||||
import { followStateStore, followRoleStore, followUsersStore } from "../../Stores/FollowStore";
|
||||
|
||||
const gameScene = gameManager.getCurrentGameScene();
|
||||
|
||||
function name(userId: number): string | undefined {
|
||||
return gameScene.MapPlayersByKey.get(userId)?.PlayerValue;
|
||||
}
|
||||
|
||||
function sendFollowRequest() {
|
||||
gameScene.CurrentPlayer.sendFollowRequest();
|
||||
}
|
||||
|
||||
function acceptFollowRequest() {
|
||||
gameScene.CurrentPlayer.startFollowing();
|
||||
}
|
||||
|
||||
function abortEnding() {
|
||||
followStateStore.set("active");
|
||||
}
|
||||
|
||||
function reset() {
|
||||
gameScene.connection?.emitFollowAbort();
|
||||
followUsersStore.stopFollowing();
|
||||
}
|
||||
|
||||
function onKeyDown(e: KeyboardEvent) {
|
||||
if (e.key === "Escape") {
|
||||
reset();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<svelte:window on:keydown={onKeyDown} />
|
||||
|
||||
{#if $followStateStore === "requesting" && $followRoleStore === "follower"}
|
||||
<div class="interact-menu nes-container is-rounded">
|
||||
<section class="interact-menu-title">
|
||||
<h2>Do you want to follow {name($followUsersStore[0])}?</h2>
|
||||
</section>
|
||||
<section class="interact-menu-action">
|
||||
<button type="button" class="nes-btn is-success" on:click|preventDefault={acceptFollowRequest}>Yes</button>
|
||||
<button type="button" class="nes-btn is-error" on:click|preventDefault={reset}>No</button>
|
||||
</section>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if $followStateStore === "ending"}
|
||||
<div class="interact-menu nes-container is-rounded">
|
||||
<section class="interact-menu-title">
|
||||
<h2>Interaction</h2>
|
||||
</section>
|
||||
{#if $followRoleStore === "follower"}
|
||||
<section class="interact-menu-question">
|
||||
<p>Do you want to stop following {name($followUsersStore[0])}?</p>
|
||||
</section>
|
||||
{:else if $followRoleStore === "leader"}
|
||||
<section class="interact-menu-question">
|
||||
<p>Do you want to stop leading the way?</p>
|
||||
</section>
|
||||
{/if}
|
||||
<section class="interact-menu-action">
|
||||
<button type="button" class="nes-btn is-success" on:click|preventDefault={reset}>Yes</button>
|
||||
<button type="button" class="nes-btn is-error" on:click|preventDefault={abortEnding}>No</button>
|
||||
</section>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if $followStateStore === "active" || $followStateStore === "ending"}
|
||||
<div class="interact-status nes-container is-rounded">
|
||||
<section class="interact-status">
|
||||
{#if $followRoleStore === "follower"}
|
||||
<p>Following {name($followUsersStore[0])}</p>
|
||||
{:else if $followUsersStore.length === 0}
|
||||
<p>Waiting for followers' confirmation</p>
|
||||
{:else if $followUsersStore.length === 1}
|
||||
<p>{name($followUsersStore[0])} is following you</p>
|
||||
{:else if $followUsersStore.length === 2}
|
||||
<p>{name($followUsersStore[0])} and {name($followUsersStore[1])} are following you</p>
|
||||
{:else}
|
||||
<p>
|
||||
{$followUsersStore.slice(0, -1).map(name).join(", ")} and {name(
|
||||
$followUsersStore[$followUsersStore.length - 1]
|
||||
)} are following you
|
||||
</p>
|
||||
{/if}
|
||||
</section>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if $followStateStore === "off"}
|
||||
<button
|
||||
type="button"
|
||||
class="nes-btn is-primary follow-menu-button"
|
||||
on:click|preventDefault={sendFollowRequest}
|
||||
title="Ask others to follow"><img class="background-img" src={followImg} alt="" /></button
|
||||
>
|
||||
{/if}
|
||||
|
||||
{#if $followStateStore === "active" || $followStateStore === "ending"}
|
||||
{#if $followRoleStore === "follower"}
|
||||
<button
|
||||
type="button"
|
||||
class="nes-btn is-error follow-menu-button"
|
||||
on:click|preventDefault={reset}
|
||||
title="Stop following"><img class="background-img" src={followImg} alt="" /></button
|
||||
>
|
||||
{:else}
|
||||
<button
|
||||
type="button"
|
||||
class="nes-btn is-error follow-menu-button"
|
||||
on:click|preventDefault={reset}
|
||||
title="Stop leading the way"><img class="background-img" src={followImg} alt="" /></button
|
||||
>
|
||||
{/if}
|
||||
{/if}
|
||||
|
||||
<style lang="scss">
|
||||
.nes-container {
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
div.interact-status {
|
||||
background-color: #333333;
|
||||
color: whitesmoke;
|
||||
|
||||
position: relative;
|
||||
height: 2.7em;
|
||||
width: 40vw;
|
||||
top: 87vh;
|
||||
margin: auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
div.interact-menu {
|
||||
pointer-events: auto;
|
||||
background-color: #333333;
|
||||
color: whitesmoke;
|
||||
|
||||
position: relative;
|
||||
width: 60vw;
|
||||
top: 60vh;
|
||||
margin: auto;
|
||||
|
||||
section.interact-menu-title {
|
||||
margin-bottom: 20px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
section.interact-menu-question {
|
||||
margin: 4px;
|
||||
margin-bottom: 20px;
|
||||
|
||||
p {
|
||||
font-size: 1.05em;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
section.interact-menu-action {
|
||||
display: grid;
|
||||
grid-gap: 10%;
|
||||
grid-template-columns: 45% 45%;
|
||||
margin-bottom: 20px;
|
||||
margin-left: 5%;
|
||||
margin-right: 5%;
|
||||
}
|
||||
}
|
||||
|
||||
.follow-menu-button {
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
left: 10px;
|
||||
pointer-events: all;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 800px) {
|
||||
div.interact-status {
|
||||
width: 100vw;
|
||||
top: 78vh;
|
||||
font-size: 0.75em;
|
||||
}
|
||||
|
||||
div.interact-menu {
|
||||
height: 21vh;
|
||||
width: 100vw;
|
||||
font-size: 0.75em;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -19,12 +19,12 @@
|
|||
uploadAudioActive = true;
|
||||
}
|
||||
|
||||
function send() {
|
||||
async function send(): Promise<void> {
|
||||
if (inputSendTextActive) {
|
||||
handleSendText.sendTextMessage(broadcastToWorld);
|
||||
return handleSendText.sendTextMessage(broadcastToWorld);
|
||||
}
|
||||
if (uploadAudioActive) {
|
||||
handleSendAudio.sendAudioMessage(broadcastToWorld);
|
||||
return handleSendAudio.sendAudioMessage(broadcastToWorld);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -41,10 +41,10 @@
|
|||
gameManager.leaveGame(SelectCharacterSceneName, new SelectCharacterScene());
|
||||
}
|
||||
|
||||
function logOut() {
|
||||
async function logOut() {
|
||||
disableMenuStores();
|
||||
loginSceneVisibleStore.set(true);
|
||||
connectionManager.logout();
|
||||
return connectionManager.logout();
|
||||
}
|
||||
|
||||
function getProfileUrl() {
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@
|
|||
let fullscreen: boolean = localUserStore.getFullscreen();
|
||||
let notification: boolean = localUserStore.getNotification() === "granted";
|
||||
let forceCowebsiteTrigger: boolean = localUserStore.getForceCowebsiteTrigger();
|
||||
let ignoreFollowRequests: boolean = localUserStore.getIgnoreFollowRequests();
|
||||
let valueGame: number = localUserStore.getGameQualityValue();
|
||||
let valueVideo: number = localUserStore.getVideoQualityValue();
|
||||
let previewValueGame = valueGame;
|
||||
|
|
@ -32,9 +33,9 @@
|
|||
const body = HtmlUtils.querySelectorOrFail("body");
|
||||
if (body) {
|
||||
if (document.fullscreenElement !== null && !fullscreen) {
|
||||
document.exitFullscreen();
|
||||
document.exitFullscreen().catch((e) => console.error(e));
|
||||
} else {
|
||||
body.requestFullscreen();
|
||||
body.requestFullscreen().catch((e) => console.error(e));
|
||||
}
|
||||
localUserStore.setFullscreen(fullscreen);
|
||||
}
|
||||
|
|
@ -44,14 +45,16 @@
|
|||
if (Notification.permission === "granted") {
|
||||
localUserStore.setNotification(notification ? "granted" : "denied");
|
||||
} else {
|
||||
Notification.requestPermission().then((response) => {
|
||||
if (response === "granted") {
|
||||
localUserStore.setNotification(notification ? "granted" : "denied");
|
||||
} else {
|
||||
localUserStore.setNotification("denied");
|
||||
notification = false;
|
||||
}
|
||||
});
|
||||
Notification.requestPermission()
|
||||
.then((response) => {
|
||||
if (response === "granted") {
|
||||
localUserStore.setNotification(notification ? "granted" : "denied");
|
||||
} else {
|
||||
localUserStore.setNotification("denied");
|
||||
notification = false;
|
||||
}
|
||||
})
|
||||
.catch((e) => console.error(e));
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -59,6 +62,10 @@
|
|||
localUserStore.setForceCowebsiteTrigger(forceCowebsiteTrigger);
|
||||
}
|
||||
|
||||
function changeIgnoreFollowRequests() {
|
||||
localUserStore.setIgnoreFollowRequests(ignoreFollowRequests);
|
||||
}
|
||||
|
||||
function closeMenu() {
|
||||
menuVisiblilityStore.set(false);
|
||||
}
|
||||
|
|
@ -123,6 +130,15 @@
|
|||
/>
|
||||
<span>Always ask before opening websites and Jitsi Meet rooms</span>
|
||||
</label>
|
||||
<label>
|
||||
<input
|
||||
type="checkbox"
|
||||
class="nes-checkbox is-dark"
|
||||
bind:checked={ignoreFollowRequests}
|
||||
on:change={changeIgnoreFollowRequests}
|
||||
/>
|
||||
<span>Ignore requests to follow other users</span>
|
||||
</label>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,12 +1,11 @@
|
|||
<script lang="ts">
|
||||
import { fly } from "svelte/transition";
|
||||
import { banMessageVisibleStore, banMessageContentStore } from "../../Stores/TypeMessageStore/BanMessageStore";
|
||||
import { fly, fade } from "svelte/transition";
|
||||
import { onMount } from "svelte";
|
||||
import type { Message } from "../../Stores/TypeMessageStore/MessageStore";
|
||||
import { banMessageStore } from "../../Stores/TypeMessageStore/BanMessageStore";
|
||||
|
||||
export let message: Message;
|
||||
|
||||
let text: string;
|
||||
$: {
|
||||
text = $banMessageContentStore;
|
||||
}
|
||||
const NAME_BUTTON = "Ok";
|
||||
let nbSeconds = 10;
|
||||
let nameButton = "";
|
||||
|
|
@ -28,17 +27,21 @@
|
|||
}
|
||||
|
||||
function closeBanMessage() {
|
||||
banMessageVisibleStore.set(false);
|
||||
banMessageStore.clearMessageById(message.id);
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="main-ban-message nes-container is-rounded" transition:fly={{ y: -1000, duration: 500 }}>
|
||||
<div
|
||||
class="main-ban-message nes-container is-rounded"
|
||||
in:fly={{ y: -1000, duration: 500, delay: 250 }}
|
||||
out:fade={{ duration: 200 }}
|
||||
>
|
||||
<h2 class="title-ban-message">
|
||||
<img src="resources/logos/report.svg" alt="***" /> Important message
|
||||
<img src="resources/logos/report.svg" alt="***" />
|
||||
</h2>
|
||||
<div class="content-ban-message">
|
||||
<p>{text}</p>
|
||||
<p>{message.text}</p>
|
||||
</div>
|
||||
<div class="footer-ban-message">
|
||||
<button
|
||||
|
|
|
|||
13
front/src/Components/TypeMessage/BanMessageContainer.svelte
Normal file
13
front/src/Components/TypeMessage/BanMessageContainer.svelte
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
<script lang="ts">
|
||||
import { flip } from "svelte/animate";
|
||||
import { banMessageStore } from "../../Stores/TypeMessageStore/BanMessageStore";
|
||||
import BanMessage from "./BanMessage.svelte";
|
||||
</script>
|
||||
|
||||
<div class="main-ban-message-container">
|
||||
{#each $banMessageStore.slice(0, 1) as message (message.id)}
|
||||
<div animate:flip={{ duration: 250 }}>
|
||||
<BanMessage {message} />
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
|
|
@ -1,17 +1,17 @@
|
|||
<script lang="ts">
|
||||
import { fly } from "svelte/transition";
|
||||
import { textMessageContentStore, textMessageVisibleStore } from "../../Stores/TypeMessageStore/TextMessageStore";
|
||||
import { fly, fade } from "svelte/transition";
|
||||
import { QuillDeltaToHtmlConverter } from "quill-delta-to-html";
|
||||
import type { Message } from "../../Stores/TypeMessageStore/MessageStore";
|
||||
import { textMessageStore } from "../../Stores/TypeMessageStore/TextMessageStore";
|
||||
|
||||
let converter: QuillDeltaToHtmlConverter;
|
||||
$: {
|
||||
const content = JSON.parse($textMessageContentStore);
|
||||
converter = new QuillDeltaToHtmlConverter(content.ops, { inlineStyles: true });
|
||||
}
|
||||
export let message: Message;
|
||||
|
||||
const content = JSON.parse(message.text);
|
||||
const converter = new QuillDeltaToHtmlConverter(content.ops, { inlineStyles: true });
|
||||
const NAME_BUTTON = "Ok";
|
||||
|
||||
function closeTextMessage() {
|
||||
textMessageVisibleStore.set(false);
|
||||
textMessageStore.clearMessageById(message.id);
|
||||
}
|
||||
|
||||
function onKeyDown(e: KeyboardEvent) {
|
||||
|
|
@ -23,7 +23,11 @@
|
|||
|
||||
<svelte:window on:keydown={onKeyDown} />
|
||||
|
||||
<div class="main-text-message nes-container is-rounded" transition:fly={{ x: -1000, duration: 500 }}>
|
||||
<div
|
||||
class="main-text-message nes-container is-rounded"
|
||||
in:fly={{ x: -1000, duration: 500, delay: 250 }}
|
||||
out:fade={{ duration: 250 }}
|
||||
>
|
||||
<div class="content-text-message">
|
||||
{@html converter.convert()}
|
||||
</div>
|
||||
|
|
@ -43,6 +47,8 @@
|
|||
width: 80vw;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
margin-bottom: 16px;
|
||||
margin-top: 0;
|
||||
padding-bottom: 0;
|
||||
|
||||
pointer-events: auto;
|
||||
|
|
|
|||
21
front/src/Components/TypeMessage/TextMessageContainer.svelte
Normal file
21
front/src/Components/TypeMessage/TextMessageContainer.svelte
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
<script lang="ts">
|
||||
import { flip } from "svelte/animate";
|
||||
import TextMessage from "./TextMessage.svelte";
|
||||
import { textMessageStore } from "../../Stores/TypeMessageStore/TextMessageStore";
|
||||
|
||||
const MAX_MESSAGES = 3;
|
||||
</script>
|
||||
|
||||
<div class="main-text-message-container">
|
||||
{#each $textMessageStore.slice(0, MAX_MESSAGES) as message (message.id)}
|
||||
<div animate:flip={{ duration: 250 }}>
|
||||
<TextMessage {message} />
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
div.main-text-message-container {
|
||||
padding-top: 16px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -12,7 +12,7 @@
|
|||
}
|
||||
|
||||
afterUpdate(() => {
|
||||
audio.play();
|
||||
audio.play().catch((e) => console.error(e));
|
||||
});
|
||||
</script>
|
||||
|
||||
|
|
|
|||
1
front/src/Components/images/follow.svg
Normal file
1
front/src/Components/images/follow.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24" viewBox="0 0 24 24" width="24"><rect fill="none" height="24" width="24"/><path d="M9.5,5.5c1.1,0,2-0.9,2-2s-0.9-2-2-2s-2,0.9-2,2S8.4,5.5,9.5,5.5z M5.75,8.9L3,23h2.1l1.75-8L9,17v6h2v-7.55L8.95,13.4 l0.6-3C10.85,12,12.8,13,15,13v-2c-1.85,0-3.45-1-4.35-2.45L9.7,6.95C9.35,6.35,8.7,6,8,6C7.75,6,7.5,6.05,7.25,6.15L2,8.3V13h2 V9.65L5.75,8.9 M13,2v7h3.75v14h1.5V9H22V2H13z M18.01,8V6.25H14.5v-1.5h3.51V3l2.49,2.5L18.01,8z"/></svg>
|
||||
|
After Width: | Height: | Size: 510 B |
Loading…
Add table
Add a link
Reference in a new issue