lbehm/workadventure
1
0
Fork 0
Code Issues Pull requests Releases 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
Show stats Download patch file Download diff file Expand all files Collapse all files

45
front/src/Components/App.svelte
View file

@ -39,48 +39,47 @@
import { layoutManagerVisibilityStore } from "../Stores/LayoutManagerStore";
import LayoutManager from "./LayoutManager/LayoutManager.svelte";
import { audioManagerVisibilityStore } from "../Stores/AudioManagerStore";
import AudioManager from "./AudioManager/AudioManager.svelte"
import AudioManager from "./AudioManager/AudioManager.svelte";
import { showReportScreenStore, userReportEmpty } from "../Stores/ShowReportScreenStore";
import ReportMenu from "./ReportMenu/ReportMenu.svelte";
export let game: Game;
</script>
<div>
{#if $loginSceneVisibleStore}
<div class="scrollable">
<LoginScene game={game}></LoginScene>
<LoginScene {game} />
</div>
{/if}
{#if $selectCharacterSceneVisibleStore}
<div>
<SelectCharacterScene game={ game }></SelectCharacterScene>
<SelectCharacterScene {game} />
</div>
{/if}
{#if $customCharacterSceneVisibleStore}
<div>
<CustomCharacterScene game={ game }></CustomCharacterScene>
<CustomCharacterScene {game} />
</div>
{/if}
{#if $selectCompanionSceneVisibleStore}
<div>
<SelectCompanionScene game={ game }></SelectCompanionScene>
<SelectCompanionScene {game} />
</div>
{/if}
{#if $enableCameraSceneVisibilityStore}
<div class="scrollable">
<EnableCameraScene game={game}></EnableCameraScene>
<EnableCameraScene {game} />
</div>
{/if}
{#if $banMessageVisibleStore}
<div>
<AdminMessage></AdminMessage>
<AdminMessage />
</div>
{/if}
{#if $textMessageVisibleStore}
<div>
<TextMessage></TextMessage>
<TextMessage />
</div>
{/if}
{#if $soundPlayingStore}
@ -90,58 +89,58 @@
{/if}
{#if $audioManagerVisibilityStore}
<div>
<AudioManager></AudioManager>
<AudioManager />
</div>
{/if}
{#if $layoutManagerVisibilityStore}
<div>
<LayoutManager></LayoutManager>
<LayoutManager />
</div>
{/if}
{#if $showReportScreenStore !== userReportEmpty}
<div>
<ReportMenu></ReportMenu>
<ReportMenu />
</div>
{/if}
{#if $menuIconVisiblilityStore}
<div>
<MenuIcon></MenuIcon>
<MenuIcon />
</div>
{/if}
{#if $menuVisiblilityStore}
<div>
<Menu></Menu>
<Menu />
</div>
{/if}
{#if $emoteMenuStore}
<div>
<EmoteMenu></EmoteMenu>
<EmoteMenu />
</div>
{/if}
{#if $gameOverlayVisibilityStore}
<div>
<VideoOverlay></VideoOverlay>
<MyCamera></MyCamera>
<CameraControls></CameraControls>
<VideoOverlay />
<MyCamera />
<CameraControls />
</div>
{/if}
{#if $helpCameraSettingsVisibleStore}
<div>
<HelpCameraSettingsPopup></HelpCameraSettingsPopup>
<HelpCameraSettingsPopup />
</div>
{/if}
{#if $requestVisitCardsStore}
<VisitCard visitCardUrl={$requestVisitCardsStore}></VisitCard>
<VisitCard visitCardUrl={$requestVisitCardsStore} />
{/if}
{#if $errorStore.length > 0}
<div>
<ErrorDialog></ErrorDialog>
<ErrorDialog />
</div>
{/if}
{#if $chatVisibilityStore}
<Chat></Chat>
<Chat />
{/if}
{#if $warningContainerStore}
<WarningContainer></WarningContainer>
<WarningContainer />
{/if}
</div>

75
front/src/Components/AudioManager/AudioManager.svelte
View file

@ -1,10 +1,7 @@
<script lang="ts">
import { localUserStore } from "../../Connexion/LocalUserStore";
import type { audioManagerVolume } from "../../Stores/AudioManagerStore";
import {
audioManagerFileStore,
audioManagerVolumeStore,
} from "../../Stores/AudioManagerStore";
import { audioManagerFileStore, audioManagerVolumeStore } from "../../Stores/AudioManagerStore";
import { get } from "svelte/store";
import type { Unsubscriber } from "svelte/store";
import { onDestroy, onMount } from "svelte";
@ -43,8 +40,8 @@
HTMLAudioPlayer.volume = audioManager.volume;
HTMLAudioPlayer.muted = audioManager.muted;
HTMLAudioPlayer.loop = audioManager.loop;
})
})
});
});
onDestroy(() => {
if (unsubscriberFileStore) {
@ -53,23 +50,23 @@
if (unsubscriberVolumeStore) {
unsubscriberVolumeStore();
}
})
});
function changeVolume() {
if (get(audioManagerVolumeStore).muted) {
audioPlayerVolumeIcon.classList.add('muted');
audioPlayerVolumeIcon.classList.add("muted");
audioPlayerVol.value = "0";
} else {
audioPlayerVol.value = "" + volume;
audioPlayerVolumeIcon.classList.remove('muted');
audioPlayerVolumeIcon.classList.remove("muted");
if (volume < 0.3) {
audioPlayerVolumeIcon.classList.add('low');
audioPlayerVolumeIcon.classList.add("low");
} else if (volume < 0.7) {
audioPlayerVolumeIcon.classList.remove('low');
audioPlayerVolumeIcon.classList.add('mid');
audioPlayerVolumeIcon.classList.remove("low");
audioPlayerVolumeIcon.classList.add("mid");
} else {
audioPlayerVolumeIcon.classList.remove('low');
audioPlayerVolumeIcon.classList.remove('mid');
audioPlayerVolumeIcon.classList.remove("low");
audioPlayerVolumeIcon.classList.remove("mid");
}
}
}
@ -105,45 +102,67 @@
}
</script>
<div class="main-audio-manager nes-container is-rounded">
<div class="audio-manager-player-volume">
<span id="audioplayer_volume_icon_playing" alt="player volume" bind:this={audioPlayerVolumeIcon}
on:click={onMute}>
<svg width="2em" height="2em" viewBox="0 0 16 16" class="bi bi-volume-up" fill="white"
xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd"
d="M6.717 3.55A.5.5 0 0 1 7 4v8a.5.5 0 0 1-.812.39L3.825 10.5H1.5A.5.5 0 0 1 1 10V6a.5.5 0 0 1 .5-.5h2.325l2.363-1.89a.5.5 0 0 1 .529-.06zM6 5.04L4.312 6.39A.5.5 0 0 1 4 6.5H2v3h2a.5.5 0 0 1 .312.11L6 10.96V5.04z" />
<span
id="audioplayer_volume_icon_playing"
alt="player volume"
bind:this={audioPlayerVolumeIcon}
on:click={onMute}
>
<svg
width="2em"
height="2em"
viewBox="0 0 16 16"
class="bi bi-volume-up"
fill="white"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M6.717 3.55A.5.5 0 0 1 7 4v8a.5.5 0 0 1-.812.39L3.825 10.5H1.5A.5.5 0 0 1 1 10V6a.5.5 0 0 1 .5-.5h2.325l2.363-1.89a.5.5 0 0 1 .529-.06zM6 5.04L4.312 6.39A.5.5 0 0 1 4 6.5H2v3h2a.5.5 0 0 1 .312.11L6 10.96V5.04z"
/>
<g id="audioplayer_volume_icon_playing_high">
<path
d="M11.536 14.01A8.473 8.473 0 0 0 14.026 8a8.473 8.473 0 0 0-2.49-6.01l-.708.707A7.476 7.476 0 0 1 13.025 8c0 2.071-.84 3.946-2.197 5.303l.708.707z" />
d="M11.536 14.01A8.473 8.473 0 0 0 14.026 8a8.473 8.473 0 0 0-2.49-6.01l-.708.707A7.476 7.476 0 0 1 13.025 8c0 2.071-.84 3.946-2.197 5.303l.708.707z"
/>
</g>
<g id="audioplayer_volume_icon_playing_mid">
<path
d="M10.121 12.596A6.48 6.48 0 0 0 12.025 8a6.48 6.48 0 0 0-1.904-4.596l-.707.707A5.483 5.483 0 0 1 11.025 8a5.483 5.483 0 0 1-1.61 3.89l.706.706z" />
d="M10.121 12.596A6.48 6.48 0 0 0 12.025 8a6.48 6.48 0 0 0-1.904-4.596l-.707.707A5.483 5.483 0 0 1 11.025 8a5.483 5.483 0 0 1-1.61 3.89l.706.706z"
/>
</g>
<g id="audioplayer_volume_icon_playing_low">
<path
d="M8.707 11.182A4.486 4.486 0 0 0 10.025 8a4.486 4.486 0 0 0-1.318-3.182L8 5.525A3.489 3.489 0 0 1 9.025 8 3.49 3.49 0 0 1 8 10.475l.707.707z" />
d="M8.707 11.182A4.486 4.486 0 0 0 10.025 8a4.486 4.486 0 0 0-1.318-3.182L8 5.525A3.489 3.489 0 0 1 9.025 8 3.49 3.49 0 0 1 8 10.475l.707.707z"
/>
</g>
</svg>
</span>
<input type="range" min="0" max="1" step="0.025" bind:this={audioPlayerVol} on:change={setVolume} on:keydown={disallowKeys}>
<input
type="range"
min="0"
max="1"
step="0.025"
bind:this={audioPlayerVol}
on:change={setVolume}
on:keydown={disallowKeys}
/>
</div>
<div class="audio-manager-reduce-conversation">
<label>
reduce in conversations
<input type="checkbox" bind:checked={decreaseWhileTalking} on:change={setDecrease}>
<input type="checkbox" bind:checked={decreaseWhileTalking} on:change={setDecrease} />
</label>
<section class="audio-manager-file">
<!-- svelte-ignore a11y-media-has-caption -->
<audio class="audio-manager-audioplayer" bind:this={HTMLAudioPlayer}>
<source src={$audioManagerFileStore}>
<source src={$audioManagerFileStore} />
</audio>
</section>
</div>
</div>
<style lang="scss">
div.main-audio-manager.nes-container.is-rounded {
position: relative;

25
front/src/Components/CameraControls.svelte
View file

@ -50,7 +50,7 @@
}
let isSilent: boolean;
const unsubscribeIsSilent = isSilentStore.subscribe(value => {
const unsubscribeIsSilent = isSilentStore.subscribe((value) => {
isSilent = value;
});
onDestroy(unsubscribeIsSilent);
@ -60,30 +60,35 @@
<div class="btn-cam-action">
<div class="btn-layout" on:click={switchLayoutMode} class:hide={$peerStore.size === 0}>
{#if $layoutModeStore === LayoutMode.Presentation}
<img src={layoutPresentationImg} style="padding: 2px" alt="Switch to mosaic mode">
<img src={layoutPresentationImg} style="padding: 2px" alt="Switch to mosaic mode" />
{:else}
<img src={layoutChatImg} style="padding: 2px" alt="Switch to presentation mode">
<img src={layoutChatImg} style="padding: 2px" alt="Switch to presentation mode" />
{/if}
</div>
<div class="btn-monitor" on:click={screenSharingClick} class:hide={!$screenSharingAvailableStore || isSilent} class:enabled={$requestedScreenSharingState}>
<div
class="btn-monitor"
on:click={screenSharingClick}
class:hide={!$screenSharingAvailableStore || isSilent}
class:enabled={$requestedScreenSharingState}
>
{#if $requestedScreenSharingState && !isSilent}
<img src={monitorImg} alt="Start screen sharing">
<img src={monitorImg} alt="Start screen sharing" />
{:else}
<img src={monitorCloseImg} alt="Stop screen sharing">
<img src={monitorCloseImg} alt="Stop screen sharing" />
{/if}
</div>
<div class="btn-video" on:click={cameraClick} class:disabled={!$requestedCameraState || isSilent}>
{#if $requestedCameraState && !isSilent}
<img src={cinemaImg} alt="Turn on webcam">
<img src={cinemaImg} alt="Turn on webcam" />
{:else}
<img src={cinemaCloseImg} alt="Turn off webcam">
<img src={cinemaCloseImg} alt="Turn off webcam" />
{/if}
</div>
<div class="btn-micro" on:click={microphoneClick} class:disabled={!$requestedMicrophoneState || isSilent}>
{#if $requestedMicrophoneState && !isSilent}
<img src={microphoneImg} alt="Turn on microphone">
<img src={microphoneImg} alt="Turn on microphone" />
{:else}
<img src={microphoneCloseImg} alt="Turn off microphone">
<img src={microphoneCloseImg} alt="Turn off microphone" />
{/if}
</div>
</div>

19
front/src/Components/Chat/Chat.svelte
View file

@ -1,8 +1,8 @@
<script lang="ts">
import { fly } from 'svelte/transition';
import { fly } from "svelte/transition";
import { chatMessagesStore, chatVisibilityStore } from "../../Stores/ChatStore";
import ChatMessageForm from './ChatMessageForm.svelte';
import ChatElement from './ChatElement.svelte';
import ChatMessageForm from "./ChatMessageForm.svelte";
import ChatElement from "./ChatElement.svelte";
import { afterUpdate, beforeUpdate, onMount } from "svelte";
import { HtmlUtils } from "../../WebRtc/HtmlUtils";
@ -12,12 +12,12 @@
let autoscroll: boolean;
beforeUpdate(() => {
autoscroll = listDom && (listDom.offsetHeight + listDom.scrollTop) > (listDom.scrollHeight - 20);
autoscroll = listDom && listDom.offsetHeight + listDom.scrollTop > listDom.scrollHeight - 20;
});
onMount(() => {
listDom.scrollTo(0, listDom.scrollHeight);
})
});
afterUpdate(() => {
if (autoscroll) listDom.scrollTo(0, listDom.scrollHeight);
@ -33,7 +33,7 @@
chatVisibilityStore.set(false);
}
function onKeyDown(e: KeyboardEvent) {
if (e.key === 'Escape') {
if (e.key === "Escape") {
closeChat();
}
}
@ -41,19 +41,18 @@
<svelte:window on:keydown={onKeyDown} on:click={onClick} />
<aside class="chatWindow" transition:fly="{{ x: -1000, duration: 500 }}" bind:this={chatWindowElement}>
<aside class="chatWindow" transition:fly={{ x: -1000, duration: 500 }} bind:this={chatWindowElement}>
<p class="close-icon" on:click={closeChat}>&times</p>
<section class="messagesList" bind:this={listDom}>
<ul>
<li><p class="system-text">Here is your chat history:</p></li>
{#each $chatMessagesStore as message, i}
<li><ChatElement message={message} line={i}></ChatElement></li>
<li><ChatElement {message} line={i} /></li>
{/each}
</ul>
</section>
<section class="messageForm">
<ChatMessageForm bind:handleForm={handleFormBlur}></ChatMessageForm>
<ChatMessageForm bind:handleForm={handleFormBlur} />
</section>
</aside>

23
front/src/Components/Chat/ChatElement.svelte
View file

@ -2,7 +2,7 @@
import { ChatMessageTypes } from "../../Stores/ChatStore";
import type { ChatMessage } from "../../Stores/ChatStore";
import { HtmlUtils } from "../../WebRtc/HtmlUtils";
import ChatPlayerName from './ChatPlayerName.svelte';
import ChatPlayerName from "./ChatPlayerName.svelte";
import type { PlayerInterface } from "../../Phaser/Game/PlayerInterface";
export let message: ChatMessage;
@ -18,8 +18,8 @@
}
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) {
@ -30,16 +30,24 @@
<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,7 +56,8 @@
</div>
<style lang="scss">
h4, p {
h4,
p {
font-family: Lato;
}
div.chatElement {

19
front/src/Components/Chat/ChatMessageForm.svelte
View file

@ -4,10 +4,10 @@
export const handleForm = {
blur() {
inputElement.blur();
}
}
},
};
let inputElement: HTMLElement;
let newMessageText = '';
let newMessageText = "";
function onFocus() {
chatInputFocusStore.set(true);
@ -19,14 +19,21 @@
function saveMessage() {
if (!newMessageText) return;
chatMessagesStore.addPersonnalMessage(newMessageText);
newMessageText = '';
newMessageText = "";
}
</script>
<form on:submit|preventDefault={saveMessage}>
<input type="text" bind:value={newMessageText} placeholder="Enter your message..." on:focus={onFocus} on:blur={onBlur} bind:this={inputElement}>
<input
type="text"
bind:value={newMessageText}
placeholder="Enter your message..."
on:focus={onFocus}
on:blur={onBlur}
bind:this={inputElement}
/>
<button type="submit">
<img src="/static/images/send.png" alt="Send" width="20">
<img src="/static/images/send.png" alt="Send" width="20" />
</button>
</form>

12
front/src/Components/Chat/ChatPlayerName.svelte
View file

@ -17,14 +17,13 @@
onMount(() => {
chatSubMenuVisivilytUnsubcribe = chatSubMenuVisibilityStore.subscribe((newValue) => {
isSubMenuOpen = (newValue === player.name + line);
})
})
isSubMenuOpen = newValue === player.name + line;
});
});
onDestroy(() => {
chatSubMenuVisivilytUnsubcribe();
})
});
</script>
<span class="subMenu">
@ -32,11 +31,10 @@
{player.name}
</span>
{#if isSubMenuOpen}
<ChatSubMenu player={player}/>
<ChatSubMenu {player} />
{/if}
</span>
<style lang="scss">
span.subMenu {
display: inline-block;

2
front/src/Components/Chat/ChatSubMenu.svelte
View file

@ -4,7 +4,6 @@
export let player: PlayerInterface;
function openVisitCard() {
if (player.visitCardUrl) {
requestVisitCardsStore.set(player.visitCardUrl);
@ -17,7 +16,6 @@
<li><button class="text-btn" disabled>Add friend</button></li>
</ul>
<style lang="scss">
ul.selectMenu {
background-color: whitesmoke;

37
front/src/Components/CustomCharacterScene/CustomCharacterScene.svelte
View file

@ -30,7 +30,6 @@
function finish() {
customCharacterScene.nextSceneToCamera();
}
</script>
<form class="customCharacterScene">
@ -38,21 +37,43 @@
<h2>Customize your WOKA</h2>
</section>
<section class="action action-move">
<button class="customCharacterSceneButton customCharacterSceneButtonLeft nes-btn" on:click|preventDefault={ selectLeft }> &lt; </button>
<button class="customCharacterSceneButton customCharacterSceneButtonRight nes-btn" on:click|preventDefault={ selectRight }> &gt; </button>
<button
class="customCharacterSceneButton customCharacterSceneButtonLeft nes-btn"
on:click|preventDefault={selectLeft}
>
&lt;
</button>
<button
class="customCharacterSceneButton customCharacterSceneButtonRight nes-btn"
on:click|preventDefault={selectRight}
>
&gt;
</button>
</section>
<section class="action">
{#if $activeRowStore === 0}
<button type="submit" class="customCharacterSceneFormBack nes-btn" on:click|preventDefault={ previousScene }>Return</button>
<button type="submit" class="customCharacterSceneFormBack nes-btn" on:click|preventDefault={previousScene}
>Return</button
>
{/if}
{#if $activeRowStore !== 0}
<button type="submit" class="customCharacterSceneFormBack nes-btn" on:click|preventDefault={ selectUp }>Back <img src="resources/objects/arrow_up_black.png" alt=""/></button>
<button type="submit" class="customCharacterSceneFormBack nes-btn" on:click|preventDefault={selectUp}
>Back <img src="resources/objects/arrow_up_black.png" alt="" /></button
>
{/if}
{#if $activeRowStore === 5}
<button type="submit" class="customCharacterSceneFormSubmit nes-btn is-primary" on:click|preventDefault={ finish }>Finish</button>
<button
type="submit"
class="customCharacterSceneFormSubmit nes-btn is-primary"
on:click|preventDefault={finish}>Finish</button
>
{/if}
{#if $activeRowStore !== 5}
<button type="submit" class="customCharacterSceneFormSubmit nes-btn is-primary" on:click|preventDefault={ selectDown }>Next <img src="resources/objects/arrow_down.png" alt=""/></button>
<button
type="submit"
class="customCharacterSceneFormSubmit nes-btn is-primary"
on:click|preventDefault={selectDown}>Next <img src="resources/objects/arrow_down.png" alt="" /></button
>
{/if}
</section>
</form>
@ -112,6 +133,4 @@
right: 5vw;
}
}
</style>

19
front/src/Components/EmoteMenu/EmoteMenu.svelte
View file

@ -1,9 +1,8 @@
<script lang="typescript">
import type { Unsubscriber } from "svelte/store";
import { emoteStore, emoteMenuStore } from "../../Stores/EmoteStore";
import { onDestroy, onMount } from "svelte";
import { EmojiButton } from '@joeattardi/emoji-button';
import { EmojiButton } from "@joeattardi/emoji-button";
import { isMobile } from "../../Enum/EnvironmentVariable";
let emojiContainer: HTMLElement;
@ -15,11 +14,11 @@
picker = new EmojiButton({
rootElement: emojiContainer,
styleProperties: {
'--font': 'Press Start 2P'
"--font": "Press Start 2P",
},
emojisPerRow: isMobile() ? 6 : 8,
autoFocusSearch: false,
style: 'twemoji',
style: "twemoji",
});
//the timeout is here to prevent the menu from flashing
setTimeout(() => picker.showPicker(emojiContainer), 100);
@ -28,18 +27,17 @@
emoteStore.set({
unicode: selection.emoji,
url: selection.url,
name: selection.name
name: selection.name,
});
});
picker.on("hidden", () => {
emoteMenuStore.closeEmoteMenu();
});
})
});
function onKeyDown(e: KeyboardEvent) {
if (e.key === 'Escape') {
if (e.key === "Escape") {
emoteMenuStore.closeEmoteMenu();
}
}
@ -50,14 +48,13 @@
}
picker.destroyPicker();
})
});
</script>
<svelte:window on:keydown={onKeyDown} />
<div class="emote-menu-container">
<div class="emote-menu" bind:this={emojiContainer}></div>
<div class="emote-menu" bind:this={emojiContainer} />
</div>
<style lang="scss">

28
front/src/Components/EnableCamera/EnableCameraScene.svelte
View file

@ -6,7 +6,7 @@
cameraListStore,
localStreamStore,
microphoneListStore,
videoConstraintStore
videoConstraintStore,
} from "../../Stores/MediaStore";
import { onDestroy } from "svelte";
import HorizontalSoundMeterWidget from "./HorizontalSoundMeterWidget.svelte";
@ -29,16 +29,16 @@
return {
update(newStream: MediaStream) {
if (node.srcObject != newStream) {
node.srcObject = newStream
}
}
node.srcObject = newStream;
}
},
};
}
let stream: MediaStream | null;
const unsubscribe = localStreamStore.subscribe(value => {
if (value.type === 'success') {
const unsubscribe = localStreamStore.subscribe((value) => {
if (value.type === "success") {
stream = value.stream;
if (stream !== null) {
@ -62,7 +62,7 @@
function normalizeDeviceName(label: string): string {
// remove IDs (that can appear in Chrome, like: "HD Pro Webcam (4df7:4eda)"
return label.replace(/(\([[0-9a-f]{4}:[0-9a-f]{4}\))/g, '').trim();
return label.replace(/(\([[0-9a-f]{4}:[0-9a-f]{4}\))/g, "").trim();
}
function selectCamera() {
@ -72,28 +72,27 @@
function selectMicrophone() {
audioConstraintStore.setDeviceId(selectedMicrophone);
}
</script>
<form class="enableCameraScene" on:submit|preventDefault={submit}>
<section class="text-center">
<h2>Turn on your camera and microphone</h2>
</section>
{#if $localStreamStore.type === 'success' && $localStreamStore.stream}
<video class="myCamVideoSetup" use:srcObject={$localStreamStore.stream} autoplay muted playsinline></video>
{#if $localStreamStore.type === "success" && $localStreamStore.stream}
<video class="myCamVideoSetup" use:srcObject={$localStreamStore.stream} autoplay muted playsinline />
{:else}
<div class="webrtcsetup">
<img class="background-img" src={cinemaCloseImg} alt="">
<img class="background-img" src={cinemaCloseImg} alt="" />
</div>
{/if}
<HorizontalSoundMeterWidget stream={stream}></HorizontalSoundMeterWidget>
<HorizontalSoundMeterWidget {stream} />
<section class="selectWebcamForm">
{#if $cameraListStore.length > 1}
<div class="control-group">
<img src={cinemaImg} alt="Camera" />
<div class="nes-select is-dark">
<!-- svelte-ignore a11y-no-onchange -->
<select bind:value={selectedCamera} on:change={selectCamera}>
{#each $cameraListStore as camera}
<option value={camera.deviceId}>
@ -109,6 +108,7 @@
<div class="control-group">
<img src={microphoneImg} alt="Microphone" />
<div class="nes-select is-dark">
<!-- svelte-ignore a11y-no-onchange -->
<select bind:value={selectedMicrophone} on:change={selectMicrophone}>
{#each $microphoneListStore as microphone}
<option value={microphone.deviceId}>
@ -119,7 +119,6 @@
</div>
</div>
{/if}
</section>
<section class="action">
<button type="submit" class="nes-btn is-primary letsgo">Let's go!</button>
@ -226,4 +225,3 @@
}
}
</style>

24
front/src/Components/EnableCamera/HorizontalSoundMeterWidget.svelte
View file

@ -1,5 +1,5 @@
<script lang="typescript">
import { AudioContext } from 'standardized-audio-context';
import { AudioContext } from "standardized-audio-context";
import { SoundMeter } from "../../Phaser/Components/SoundMeter";
import { onDestroy } from "svelte";
@ -11,6 +11,7 @@
let timeout: ReturnType<typeof setTimeout>;
const soundMeter = new SoundMeter();
let display = false;
let error = false;
$: {
if (stream && stream.getAudioTracks().length > 0) {
@ -19,17 +20,19 @@
if (timeout) {
clearInterval(timeout);
error = false;
}
timeout = setInterval(() => {
try {
volume = parseInt((soundMeter.getVolume() / 100 * NB_BARS).toFixed(0));
//console.log(volume);
volume = parseInt(((soundMeter.getVolume() / 100) * NB_BARS).toFixed(0));
} catch (err) {
if (!error) {
console.error(err);
error = true;
}
}
}, 100);
} else {
display = false;
}
@ -40,11 +43,10 @@
if (timeout) {
clearInterval(timeout);
}
})
});
function color(i: number, volume: number) {
const red = 255 * i / NB_BARS;
const red = (255 * i) / NB_BARS;
const green = 255 * (1 - i / NB_BARS);
let alpha = 1;
@ -52,14 +54,13 @@
alpha = 0.5;
}
return 'background-color:rgba('+red+', '+green+', 0, '+alpha+')';
return "background-color:rgba(" + red + ", " + green + ", 0, " + alpha + ")";
}
</script>
<div class="horizontal-sound-meter" class:active={display}>
{#each [...Array(NB_BARS).keys()] as i (i)}
<div style={color(i, volume)}></div>
<div style={color(i, volume)} />
{/each}
</div>
@ -78,5 +79,4 @@
margin-left: 5px;
flex-grow: 1;
}
</style>

23
front/src/Components/HelpCameraSettings/HelpCameraSettingsPopup.svelte
View file

@ -1,5 +1,5 @@
<script lang="typescript">
import { fly } from 'svelte/transition';
import { fly } from "svelte/transition";
import { helpCameraSettingsVisibleStore } from "../../Stores/HelpCameraSettingsStore";
import firefoxImg from "./images/help-setting-camera-permission-firefox.png";
import chromeImg from "./images/help-setting-camera-permission-chrome.png";
@ -16,17 +16,23 @@
function close() {
helpCameraSettingsVisibleStore.set(false);
}
</script>
<form class="helpCameraSettings nes-container" on:submit|preventDefault={close} transition:fly="{{ y: -900, duration: 500 }}">
<form
class="helpCameraSettings nes-container"
on:submit|preventDefault={close}
transition:fly={{ y: -900, duration: 500 }}
>
<section>
<h2>Camera / Microphone access needed</h2>
<p class="err">Permission denied</p>
<p>You must allow camera and microphone access in your browser.</p>
<p>
{#if isFirefox}
<p class="err">Please click the "Remember this decision" checkbox, if you don't want Firefox to keep asking you the authorization.</p>
<p class="err">
Please click the "Remember this decision" checkbox, if you don't want Firefox to keep asking you the
authorization.
</p>
<img src={firefoxImg} alt="" />
{:else if isChrome && !isAndroid}
<img src={chromeImg} alt="" />
@ -35,11 +41,12 @@
</section>
<section>
<button class="helpCameraSettingsFormRefresh nes-btn" on:click|preventDefault={refresh}>Refresh</button>
<button type="submit" class="helpCameraSettingsFormContinue nes-btn is-primary" on:click|preventDefault={close}>Continue without webcam</button>
<button type="submit" class="helpCameraSettingsFormContinue nes-btn is-primary" on:click|preventDefault={close}
>Continue without webcam</button
>
</section>
</form>
<style lang="scss">
.helpCameraSettings {
pointer-events: auto;
@ -53,13 +60,13 @@
text-align: center;
h2 {
font-family: 'Press Start 2P';
font-family: "Press Start 2P";
}
section {
p {
margin: 15px;
font-family: 'Press Start 2P';
font-family: "Press Start 2P";
& .err {
color: #ff0000;

16
front/src/Components/LayoutManager/LayoutManager.svelte
View file

@ -6,7 +6,6 @@
}
</script>
<div class="layout-manager-list">
{#each $layoutManagerActionStore as action}
<div class="nes-container is-rounded {action.type}" on:click={() => onClick(action.callback)}>
@ -15,7 +14,6 @@
{/each}
</div>
<style lang="scss">
div.layout-manager-list {
pointer-events: auto;
@ -30,7 +28,7 @@
display: flex;
flex-direction: column;
animation: moveMessage .5s;
animation: moveMessage 0.5s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
@ -50,8 +48,14 @@
}
@keyframes moveMessage {
0% {bottom: 40px;}
50% {bottom: 30px;}
100% {bottom: 40px;}
0% {
bottom: 40px;
}
50% {
bottom: 30px;
}
100% {
bottom: 40px;
}
}
</style>

28
front/src/Components/Login/LoginScene.svelte
View file

@ -9,14 +9,14 @@
const loginScene = game.scene.getScene(LoginSceneName) as LoginScene;
let name = gameManager.getPlayerName() || '';
let name = gameManager.getPlayerName() || "";
let startValidating = false;
function submit() {
startValidating = true;
let finalName = name.trim();
if (finalName !== '') {
if (finalName !== "") {
loginScene.login(finalName);
}
}
@ -29,16 +29,33 @@
<section class="text-center">
<h2>Enter your name</h2>
</section>
<input type="text" name="loginSceneName" class="nes-input is-dark" autofocus maxlength={MAX_USERNAME_LENGTH} bind:value={name} on:keypress={() => {startValidating = true}} class:is-error={name.trim() === '' && startValidating} />
<!-- svelte-ignore a11y-autofocus -->
<input
type="text"
name="loginSceneName"
class="nes-input is-dark"
autofocus
maxlength={MAX_USERNAME_LENGTH}
bind:value={name}
on:keypress={() => {
startValidating = true;
}}
class:is-error={name.trim() === "" && startValidating}
/>
<section class="error-section">
{#if name.trim() === '' && startValidating }
{#if name.trim() === "" && startValidating}
<p class="err">The name is empty</p>
{/if}
</section>
{#if DISPLAY_TERMS_OF_USE}
<section class="terms-and-conditions">
<p>By continuing, you are agreeing our <a href="https://workadventu.re/terms-of-use" target="_blank">terms of use</a>, <a href="https://workadventu.re/privacy-policy" target="_blank">privacy policy</a> and <a href="https://workadventu.re/cookie-policy" target="_blank">cookie policy</a>.</p>
<p>
By continuing, you are agreeing our <a href="https://workadventu.re/terms-of-use" target="_blank"
>terms of use</a
>, <a href="https://workadventu.re/privacy-policy" target="_blank">privacy policy</a> and
<a href="https://workadventu.re/cookie-policy" target="_blank">cookie policy</a>.
</p>
</section>
{/if}
<section class="action">
@ -118,5 +135,4 @@
}
}
}
</style>

43
front/src/Components/Menu/AboutRoomSubMenu.svelte
View file

@ -14,29 +14,33 @@
onMount(() => {
if (gameScene.mapFile.properties !== undefined) {
const propertyName = gameScene.mapFile.properties.find((property) => property.name === 'mapName')
if ( propertyName !== undefined && typeof propertyName.value === 'string') {
const propertyName = gameScene.mapFile.properties.find((property) => property.name === "mapName");
if (propertyName !== undefined && typeof propertyName.value === "string") {
mapName = propertyName.value;
}
const propertyDescription = gameScene.mapFile.properties.find((property) => property.name === 'mapDescription')
if (propertyDescription !== undefined && typeof propertyDescription.value === 'string') {
const propertyDescription = gameScene.mapFile.properties.find(
(property) => property.name === "mapDescription"
);
if (propertyDescription !== undefined && typeof propertyDescription.value === "string") {
mapDescription = propertyDescription.value;
}
const propertyCopyright = gameScene.mapFile.properties.find((property) => property.name === 'mapCopyright')
if (propertyCopyright !== undefined && typeof propertyCopyright.value === 'string') {
const propertyCopyright = gameScene.mapFile.properties.find((property) => property.name === "mapCopyright");
if (propertyCopyright !== undefined && typeof propertyCopyright.value === "string") {
mapCopyright = propertyCopyright.value;
}
}
for (const tileset of gameScene.mapFile.tilesets) {
if (tileset.properties !== undefined) {
const propertyTilesetCopyright = tileset.properties.find((property) => property.name === 'tilesetCopyright')
if (propertyTilesetCopyright !== undefined && typeof propertyTilesetCopyright.value === 'string') {
const propertyTilesetCopyright = tileset.properties.find(
(property) => property.name === "tilesetCopyright"
);
if (propertyTilesetCopyright !== undefined && typeof propertyTilesetCopyright.value === "string") {
tilesetCopyright = [...tilesetCopyright, propertyTilesetCopyright.value]; //Assignment needed to trigger Svelte's reactivity
}
}
}
})
});
</script>
<div class="about-room-main">
@ -44,20 +48,26 @@
<section class="container-overflow">
<h3>{mapName}</h3>
<p class="string-HTML">{mapDescription}</p>
<h3 class="nes-pointer hoverable" on:click={() => expandedMapCopyright = !expandedMapCopyright}>Copyrights of the map</h3>
<p class="string-HTML" hidden="{!expandedMapCopyright}">{mapCopyright}</p>
<h3 class="nes-pointer hoverable" on:click={() => expandedTilesetCopyright = !expandedTilesetCopyright}>Copyrights of the tilesets</h3>
<section hidden="{!expandedTilesetCopyright}">
<h3 class="nes-pointer hoverable" on:click={() => (expandedMapCopyright = !expandedMapCopyright)}>
Copyrights of the map
</h3>
<p class="string-HTML" hidden={!expandedMapCopyright}>{mapCopyright}</p>
<h3 class="nes-pointer hoverable" on:click={() => (expandedTilesetCopyright = !expandedTilesetCopyright)}>
Copyrights of the tilesets
</h3>
<section hidden={!expandedTilesetCopyright}>
{#each tilesetCopyright as copyright}
<p class="string-HTML">{copyright}</p>
{:else}
<p>The map creator did not declare a copyright for the tilesets. Warning, This doesn't mean that those tilesets have no license.</p>
<p>
The map creator did not declare a copyright for the tilesets. Warning, This doesn't mean that those
tilesets have no license.
</p>
{/each}
</section>
</section>
</div>
<style lang="scss">
.string-HTML {
white-space: pre-line;
@ -66,7 +76,8 @@
div.about-room-main {
height: calc(100% - 56px);
h2, h3 {
h2,
h3 {
width: 100%;
text-align: center;
}

43
front/src/Components/Menu/AudioGlobalMessage.svelte
View file

@ -26,25 +26,25 @@
const selectedFile = inputAudio.files ? inputAudio.files[0] : null;
if (!selectedFile) {
errorFile = true;
throw 'no file selected';
throw "no file selected";
}
const fd = new FormData();
fd.append('file', selectedFile);
fd.append("file", selectedFile);
const res = await gameScene.connection?.uploadAudio(fd);
const audioGlobalMessage: PlayGlobalMessageInterface = {
content: (res as { path: string }).path,
type: AUDIO_TYPE,
broadcastToWorld: broadcast
}
inputAudio.value = '';
broadcastToWorld: broadcast,
};
inputAudio.value = "";
gameScene.connection?.emitGlobalMessage(audioGlobalMessage);
}
}
},
};
function inputAudioFile(event: Event) {
const eventTarget : EventTargetFiles = (event.target as EventTargetFiles);
const eventTarget: EventTargetFiles = event.target as EventTargetFiles;
if (!eventTarget || !eventTarget.files || eventTarget.files.length === 0) {
return;
}
@ -61,27 +61,40 @@
function getFileSize(number: number) {
if (number < 1024) {
return number + 'bytes';
return number + "bytes";
} else if (number >= 1024 && number < 1048576) {
return (number / 1024).toFixed(1) + 'KB';
return (number / 1024).toFixed(1) + "KB";
} else if (number >= 1048576) {
return (number / 1048576).toFixed(1) + 'MB';
return (number / 1048576).toFixed(1) + "MB";
} else {
return '';
return "";
}
}
</script>
<section class="section-input-send-audio">
<img class="nes-pointer" src="{uploadFile}" alt="Upload a file" on:click|preventDefault={ () => {fileInput.click();}}>
<img
class="nes-pointer"
src={uploadFile}
alt="Upload a file"
on:click|preventDefault={() => {
fileInput.click();
}}
/>
{#if fileName !== undefined}
<p>{fileName} : {fileSize}</p>
{/if}
{#if errorFile}
<p class="err">No file selected. You need to upload a file before sending it.</p>
{/if}
<input type="file" id="input-send-audio" bind:this={fileInput} on:change={(e) => {inputAudioFile(e)}}>
<input
type="file"
id="input-send-audio"
bind:this={fileInput}
on:change={(e) => {
inputAudioFile(e);
}}
/>
</section>
<style lang="scss">

13
front/src/Components/Menu/ContactSubMenu.svelte
View file

@ -1,5 +1,4 @@
<script lang="ts">
function goToGettingStarted() {
const sparkHost = "https://workadventu.re/getting-started";
window.open(sparkHost, "_blank");
@ -18,8 +17,8 @@
<section>
<h3>Getting started</h3>
<p>
WorkAdventure allows you to create an online space to communicate spontaneously with others.
And it all starts with creating your own space. Choose from a large selection of prefabricated maps by our team.
WorkAdventure allows you to create an online space to communicate spontaneously with others. And it all
starts with creating your own space. Choose from a large selection of prefabricated maps by our team.
</p>
<button type="button" class="nes-btn is-primary" on:click={goToGettingStarted}>Getting started</button>
</section>
@ -30,10 +29,12 @@
<button type="button" class="nes-btn" on:click={goToBuildingMap}>Create your map</button>
</section>
<iframe title="contact"
src="{$contactPageStore}"
<iframe
title="contact"
src={$contactPageStore}
allow="clipboard-read; clipboard-write self {$contactPageStore}"
allowfullscreen></iframe>
allowfullscreen
/>
</section>
</div>

7
front/src/Components/Menu/CustomSubMenu.svelte
View file

@ -11,17 +11,16 @@
if (allowApi) {
iframeListener.registerIframe(HTMLIframe);
}
})
});
onDestroy(() => {
if (allowApi) {
iframeListener.unregisterIframe(HTMLIframe);
}
})
});
</script>
<iframe title="customSubMenu" src="{url}" bind:this={HTMLIframe}></iframe>
<iframe title="customSubMenu" src={url} bind:this={HTMLIframe} />
<style lang="scss">
iframe {

21
front/src/Components/Menu/GlobalMessagesSubMenu.svelte
View file

@ -1,6 +1,6 @@
<script lang="ts">
import TextGlobalMessage from './TextGlobalMessage.svelte';
import AudioGlobalMessage from './AudioGlobalMessage.svelte';
import TextGlobalMessage from "./TextGlobalMessage.svelte";
import AudioGlobalMessage from "./AudioGlobalMessage.svelte";
let handleSendText: { sendTextMessage(broadcast: boolean): void };
let handleSendAudio: { sendAudioMessage(broadcast: boolean): Promise<void> };
@ -32,10 +32,18 @@
<div class="global-message-main">
<div class="global-message-subOptions">
<section>
<button type="button" class="nes-btn {inputSendTextActive ? 'is-disabled' : ''}" on:click|preventDefault={activateInputText}>Text</button>
<button
type="button"
class="nes-btn {inputSendTextActive ? 'is-disabled' : ''}"
on:click|preventDefault={activateInputText}>Text</button
>
</section>
<section>
<button type="button" class="nes-btn {uploadAudioActive ? 'is-disabled' : ''}" on:click|preventDefault={activateUploadAudio}>Audio</button>
<button
type="button"
class="nes-btn {uploadAudioActive ? 'is-disabled' : ''}"
on:click|preventDefault={activateUploadAudio}>Audio</button
>
</section>
</div>
<div class="global-message-content">
@ -48,7 +56,7 @@
</div>
<div class="global-message-footer">
<label>
<input type="checkbox" class="nes-checkbox is-dark nes-pointer" bind:checked={broadcastToWorld}>
<input type="checkbox" class="nes-checkbox is-dark nes-pointer" bind:checked={broadcastToWorld} />
<span>Broadcast to all rooms of the world</span>
</label>
<section>
@ -57,9 +65,6 @@
</div>
</div>
<style lang="scss">
div.global-message-main {
height: calc(100% - 50px);

10
front/src/Components/Menu/GuestSubMenu.svelte
View file

@ -1,9 +1,9 @@
<script lang="ts">
function copyLink() {
const input: HTMLInputElement = document.getElementById('input-share-link') as HTMLInputElement;
const input: HTMLInputElement = document.getElementById("input-share-link") as HTMLInputElement;
input.focus();
input.select();
document.execCommand('copy');
document.execCommand("copy");
}
async function shareLink() {
@ -12,7 +12,7 @@
try {
await navigator.share(shareData);
} catch (err) {
console.error('Error: ' + err);
console.error("Error: " + err);
copyLink();
}
}
@ -22,12 +22,12 @@
<section class="container-overflow">
<section class="share-url not-mobile">
<h3>Share the link of the room !</h3>
<input type="text" readonly id="input-share-link" value={location.toString()}>
<input type="text" readonly id="input-share-link" value={location.toString()} />
<button type="button" class="nes-btn is-primary" on:click={copyLink}>Copy</button>
</section>
<section class="is-mobile">
<h3>Share the link of the room !</h3>
<input type="hidden" readonly id="input-share-link" value={location.toString()}>
<input type="hidden" readonly id="input-share-link" value={location.toString()} />
<button type="button" class="nes-btn is-primary" on:click={shareLink}>Share</button>
</section>
</section>

30
front/src/Components/Menu/Menu.svelte
View file

@ -5,14 +5,14 @@
import AboutRoomSubMenu from "./AboutRoomSubMenu.svelte";
import GlobalMessageSubMenu from "./GlobalMessagesSubMenu.svelte";
import ContactSubMenu from "./ContactSubMenu.svelte";
import CustomSubMenu from "./CustomSubMenu.svelte"
import CustomSubMenu from "./CustomSubMenu.svelte";
import GuestSubMenu from "./GuestSubMenu.svelte";
import {
checkSubMenuToShow,
customMenuIframe,
menuVisiblilityStore,
SubMenusInterface,
subMenusStore
subMenusStore,
} from "../../Stores/MenuStore";
import { onDestroy, onMount } from "svelte";
import { get } from "svelte/store";
@ -21,7 +21,7 @@
let activeSubMenu: string = SubMenusInterface.profile;
let activeComponent: typeof ProfileSubMenu | typeof CustomSubMenu = ProfileSubMenu;
let props: { url: string, allowApi: boolean };
let props: { url: string; allowApi: boolean };
let unsubscriberSubMenuStore: Unsubscriber;
onMount(() => {
@ -29,18 +29,18 @@
if (!get(subMenusStore).includes(activeSubMenu)) {
switchMenu(SubMenusInterface.profile);
}
})
});
checkSubMenuToShow();
switchMenu(SubMenusInterface.profile);
})
});
onDestroy(() => {
if (unsubscriberSubMenuStore) {
unsubscriberSubMenuStore();
}
})
});
function switchMenu(menu: string) {
if (get(subMenusStore).find((subMenu) => subMenu === menu)) {
@ -64,7 +64,7 @@
case SubMenusInterface.contact:
activeComponent = ContactSubMenu;
break;
default:
default: {
const customMenu = customMenuIframe.get(menu);
if (customMenu !== undefined) {
props = { url: customMenu.url, allowApi: customMenu.allowApi };
@ -75,14 +75,15 @@
}
break;
}
} else throw ("There is no menu called " + menu);
}
} else throw "There is no menu called " + menu;
}
function closeMenu() {
menuVisiblilityStore.set(false);
}
function onKeyDown(e: KeyboardEvent) {
if (e.key === 'Escape') {
if (e.key === "Escape") {
closeMenu();
}
}
@ -90,19 +91,22 @@
<svelte:window on:keydown={onKeyDown} />
<div class="menu-container-main">
<div class="menu-nav-sidebar nes-container is-rounded" transition:fly="{{ x: -1000, duration: 500 }}">
<div class="menu-nav-sidebar nes-container is-rounded" transition:fly={{ x: -1000, duration: 500 }}>
<h2>Menu</h2>
<nav>
{#each $subMenusStore as submenu}
<button type="button" class="nes-btn {activeSubMenu === submenu ? 'is-disabled' : ''}" on:click|preventDefault={() => switchMenu(submenu)}>
<button
type="button"
class="nes-btn {activeSubMenu === submenu ? 'is-disabled' : ''}"
on:click|preventDefault={() => switchMenu(submenu)}
>
{submenu}
</button>
{/each}
</nav>
</div>
<div class="menu-submenu-container nes-container is-rounded" transition:fly="{{ y: -1000, duration: 500 }}">
<div class="menu-submenu-container nes-container is-rounded" transition:fly={{ y: -1000, duration: 500 }}>
<button type="button" class="nes-btn is-error close" on:click={closeMenu}>&times</button>
<h2>{activeSubMenu}</h2>
<svelte:component this={activeComponent} {...props} />

12
front/src/Components/Menu/MenuIcon.svelte
View file

@ -1,12 +1,12 @@
<script lang="typescript">
import logoWA from "../images/logo-WA-pixel.png"
import logoTalk from "../images/logo-message-pixel.png"
import logoWA from "../images/logo-WA-pixel.png";
import logoTalk from "../images/logo-message-pixel.png";
import { menuVisiblilityStore } from "../../Stores/MenuStore";
import { chatVisibilityStore } from "../../Stores/ChatStore";
import { get } from "svelte/store";
function showMenu() {
menuVisiblilityStore.set(!get(menuVisiblilityStore))
menuVisiblilityStore.set(!get(menuVisiblilityStore));
}
function showChat() {
chatVisibilityStore.set(true);
@ -16,8 +16,8 @@
<svelte:window />
<main class="menuIcon">
<img src={logoWA} alt="open menu" class="nes-pointer" on:click|preventDefault={showMenu}>
<img src={logoTalk} alt="open menu" class="nes-pointer" on:click|preventDefault={showChat}>
<img src={logoWA} alt="open menu" class="nes-pointer" on:click|preventDefault={showMenu} />
<img src={logoTalk} alt="open menu" class="nes-pointer" on:click|preventDefault={showChat} />
</main>
<style lang="scss">
@ -30,7 +30,7 @@
pointer-events: auto;
width: 60px;
padding-top: 0;
margin: 3px
margin: 3px;
}
}
.menuIcon img:hover {

13
front/src/Components/Menu/ProfileSubMenu.svelte
View file

@ -17,7 +17,6 @@
import btnProfileSubMenuCompanion from "../images/btn-menu-profile-companion.svg";
import btnProfileSubMenuWoka from "../images/btn-menu-profile-woka.svg";
function disableMenuStores() {
menuVisiblilityStore.set(false);
menuIconVisiblilityStore.set(false);
@ -62,19 +61,19 @@
<div class="submenu">
<section>
<button type="button" class="nes-btn" on:click|preventDefault={openEditNameScene}>
<img src={btnProfileSubMenuIdentity} alt="Edit your name">
<img src={btnProfileSubMenuIdentity} alt="Edit your name" />
<span class="btn-hover">Edit your name</span>
</button>
<button type="button" class="nes-btn" on:click|preventDefault={openEditSkinScene}>
<img src={btnProfileSubMenuWoka} alt="Edit your WOKA">
<img src={btnProfileSubMenuWoka} alt="Edit your WOKA" />
<span class="btn-hover">Edit your WOKA</span>
</button>
<button type="button" class="nes-btn" on:click|preventDefault={openEditCompanionScene}>
<img src={btnProfileSubMenuCompanion} alt="Edit your companion">
<img src={btnProfileSubMenuCompanion} alt="Edit your companion" />
<span class="btn-hover">Edit your companion</span>
</button>
<button type="button" class="nes-btn" on:click|preventDefault={openEnableCameraScene}>
<img src={btnProfileSubMenuCamera} alt="Edit your camera">
<img src={btnProfileSubMenuCamera} alt="Edit your camera" />
<span class="btn-hover">Edit your camera</span>
</button>
</section>
@ -84,7 +83,7 @@
{#if $userIsConnected}
<section>
{#if PROFILE_URL != undefined}
<iframe title="profile" src="{getProfileUrl()}"></iframe>
<iframe title="profile" src={getProfileUrl()} />
{/if}
</section>
<section>
@ -108,7 +107,7 @@
width: 50px;
button {
transition: all .5s ease;
transition: all 0.5s ease;
text-align: left;
white-space: nowrap;
margin-bottom: 10px;

52
front/src/Components/Menu/SettingsSubMenu.svelte
View file

@ -6,7 +6,7 @@ import {isMobile} from "../../Enum/EnvironmentVariable";
import { menuVisiblilityStore } from "../../Stores/MenuStore";
let fullscreen: boolean = localUserStore.getFullscreen();
let notification : boolean = localUserStore.getNotification() === 'granted';
let notification: boolean = localUserStore.getNotification() === "granted";
let valueGame: number = localUserStore.getGameQualityValue();
let valueVideo: number = localUserStore.getVideoQualityValue();
let previewValueGame = valueGame;
@ -28,10 +28,10 @@ function saveSetting(){
}
function changeFullscreen() {
const body = HtmlUtils.querySelectorOrFail('body');
const body = HtmlUtils.querySelectorOrFail("body");
if (body) {
if (document.fullscreenElement !== null && !fullscreen) {
document.exitFullscreen()
document.exitFullscreen();
} else {
body.requestFullscreen();
}
@ -40,17 +40,17 @@ function changeFullscreen() {
}
function changeNotification() {
if (Notification.permission === 'granted') {
localUserStore.setNotification(notification ? 'granted' : 'denied');
if (Notification.permission === "granted") {
localUserStore.setNotification(notification ? "granted" : "denied");
} else {
Notification.requestPermission().then((response) => {
if (response === 'granted') {
localUserStore.setNotification(notification ? 'granted' : 'denied');
if (response === "granted") {
localUserStore.setNotification(notification ? "granted" : "denied");
} else {
localUserStore.setNotification('denied');
localUserStore.setNotification("denied");
notification = false;
}
})
});
}
}
@ -64,10 +64,12 @@ function closeMenu() {
<h3>Game quality</h3>
<div class="nes-select is-dark">
<select bind:value={valueGame}>
<option value="{120}">{isMobile() ? 'High (120 fps)' : 'High video quality (120 fps)'}</option>
<option value="{60}">{isMobile() ? 'Medium (60 fps)' : 'Medium video quality (60 fps, recommended)'}</option>
<option value="{40}">{isMobile() ? 'Minimum (40 fps)' : 'Minimum video quality (40 fps)'}</option>
<option value="{20}">{isMobile() ? 'Small (20 fps)' : 'Small video quality (20 fps)'}</option>
<option value={120}>{isMobile() ? "High (120 fps)" : "High video quality (120 fps)"}</option>
<option value={60}
>{isMobile() ? "Medium (60 fps)" : "Medium video quality (60 fps, recommended)"}</option
>
<option value={40}>{isMobile() ? "Minimum (40 fps)" : "Minimum video quality (40 fps)"}</option>
<option value={20}>{isMobile() ? "Small (20 fps)" : "Small video quality (20 fps)"}</option>
</select>
</div>
</section>
@ -75,10 +77,12 @@ function closeMenu() {
<h3>Video quality</h3>
<div class="nes-select is-dark">
<select bind:value={valueVideo}>
<option value="{30}">{isMobile() ? 'High (30 fps)' : 'High video quality (30 fps)'}</option>
<option value="{20}">{isMobile() ? 'Medium (20 fps)' : 'Medium video quality (20 fps, recommended)'}</option>
<option value="{10}">{isMobile() ? 'Minimum (10 fps)' : 'Minimum video quality (10 fps)'}</option>
<option value="{5}">{isMobile() ? 'Small (5 fps)' : 'Small video quality (5 fps)'}</option>
<option value={30}>{isMobile() ? "High (30 fps)" : "High video quality (30 fps)"}</option>
<option value={20}
>{isMobile() ? "Medium (20 fps)" : "Medium video quality (20 fps, recommended)"}</option
>
<option value={10}>{isMobile() ? "Minimum (10 fps)" : "Minimum video quality (10 fps)"}</option>
<option value={5}>{isMobile() ? "Small (5 fps)" : "Small video quality (5 fps)"}</option>
</select>
</div>
</section>
@ -88,11 +92,21 @@ function closeMenu() {
</section>
<section class="settings-section-noSaveOption">
<label>
<input type="checkbox" class="nes-checkbox is-dark" bind:checked={fullscreen} on:change={changeFullscreen}/>
<input
type="checkbox"
class="nes-checkbox is-dark"
bind:checked={fullscreen}
on:change={changeFullscreen}
/>
<span>Fullscreen</span>
</label>
<label>
<input type="checkbox" class="nes-checkbox is-dark" bind:checked={notification} on:change={changeNotification}>
<input
type="checkbox"
class="nes-checkbox is-dark"
bind:checked={notification}
on:change={changeNotification}
/>
<span>Notifications</span>
</label>
</section>

47
front/src/Components/Menu/TextGlobalMessage.svelte
View file

@ -8,25 +8,25 @@
//toolbar
const toolbarOptions = [
['bold', 'italic', 'underline', 'strike'], // toggled buttons
['blockquote', 'code-block'],
["bold", "italic", "underline", "strike"], // toggled buttons
["blockquote", "code-block"],
[{'header': 1}, {'header': 2}], // custom button values
[{'list': 'ordered'}, {'list': 'bullet'}],
[{'script': 'sub'}, {'script': 'super'}], // superscript/subscript
[{'indent': '-1'}, {'indent': '+1'}], // outdent/indent
[{'direction': 'rtl'}], // text direction
[{ header: 1 }, { header: 2 }], // custom button values
[{ list: "ordered" }, { list: "bullet" }],
[{ script: "sub" }, { script: "super" }], // superscript/subscript
[{ indent: "-1" }, { indent: "+1" }], // outdent/indent
[{ direction: "rtl" }], // text direction
[{'size': ['small', false, 'large', 'huge']}], // custom dropdown
[{'header': [1, 2, 3, 4, 5, 6, false]}],
[{ size: ["small", false, "large", "huge"] }], // custom dropdown
[{ header: [1, 2, 3, 4, 5, 6, false] }],
[{'color': []}, {'background': []}], // dropdown with defaults from theme
[{'font': []}],
[{'align': []}],
[{ color: [] }, { background: [] }], // dropdown with defaults from theme
[{ font: [] }],
[{ align: [] }],
['clean'], // remove formatting button
["clean"], // remove formatting button
['link', 'image', 'video']
["link", "image", "video"],
];
const gameScene = gameManager.getCurrentGameScene();
@ -44,13 +44,13 @@
const textGlobalMessage: PlayGlobalMessageInterface = {
type: MESSAGE_TYPE,
content: text,
broadcastToWorld: broadcastToWorld
broadcastToWorld: broadcastToWorld,
};
quill.deleteText(0, quill.getLength());
gameScene.connection?.emitGlobalMessage(textGlobalMessage);
}
}
},
};
//Quill
onMount(async () => {
@ -58,10 +58,10 @@
const { default: Quill } = await import("quill"); // eslint-disable-line @typescript-eslint/no-explicit-any
quill = new Quill(QUILL_EDITOR, {
placeholder: 'Enter your message here...',
theme: 'snow',
placeholder: "Enter your message here...",
theme: "snow",
modules: {
toolbar: toolbarOptions
toolbar: toolbarOptions,
},
});
menuInputFocusStore.set(true);
@ -69,14 +69,13 @@
onDestroy(() => {
menuInputFocusStore.set(false);
})
});
</script>
<section class="section-input-send-text">
<div class="input-send-text" bind:this={QUILL_EDITOR}></div>
<div class="input-send-text" bind:this={QUILL_EDITOR} />
</section>
<style lang="scss">
@import 'https://cdn.quilljs.com/1.3.7/quill.snow.css';
@import "https://cdn.quilljs.com/1.3.7/quill.snow.css";
</style>

17
front/src/Components/MyCamera.svelte
View file

@ -7,8 +7,8 @@
let stream: MediaStream | null;
const unsubscribe = localStreamStore.subscribe(value => {
if (value.type === 'success') {
const unsubscribe = localStreamStore.subscribe((value) => {
if (value.type === "success") {
stream = value.stream;
} else {
stream = null;
@ -17,25 +17,20 @@
onDestroy(unsubscribe);
let isSilent: boolean;
const unsubscribeIsSilent = isSilentStore.subscribe(value => {
const unsubscribeIsSilent = isSilentStore.subscribe((value) => {
isSilent = value;
});
onDestroy(unsubscribeIsSilent);
</script>
<div>
<div class="video-container div-myCamVideo" class:hide={!$obtainedMediaConstraintStore.video || isSilent}>
{#if $localStreamStore.type === "success" && $localStreamStore.stream}
<video class="myCamVideo" use:srcObject={stream} autoplay muted playsinline></video>
<SoundMeterWidget stream={stream}></SoundMeterWidget>
<video class="myCamVideo" use:srcObject={stream} autoplay muted playsinline />
<SoundMeterWidget {stream} />
{/if}
</div>
<div class="is-silent" class:hide={isSilent}>
Silent zone
</div>
<div class="is-silent" class:hide={isSilent}>Silent zone</div>
</div>

5
front/src/Components/ReportMenu/BlockSubMenu.svelte
View file

@ -14,7 +14,7 @@
} else {
userIsBlocked = blackListManager.isBlackListed(userUUID);
}
})
});
function blockUser(): void {
if (userUUID === undefined) {
@ -32,11 +32,10 @@
<h3>Block</h3>
<p>Block any communication from and to {userName}. This can be reverted.</p>
<button type="button" class="nes-btn is-error" on:click|preventDefault={blockUser}>
{userIsBlocked ? 'Unblock this user' : 'Block this user'}
{userIsBlocked ? "Unblock this user" : "Block this user"}
</button>
</div>
<style lang="scss">
div.block-container {
text-align: center;

26
front/src/Components/ReportMenu/ReportMenu.svelte
View file

@ -14,7 +14,7 @@
let anonymous: boolean = false;
let userUUID: string | undefined = playersStore.getPlayerById(get(showReportScreenStore).userId)?.userUuid;
let userName = "No name";
let unsubscriber: Unsubscriber
let unsubscriber: Unsubscriber;
onMount(() => {
unsubscriber = showReportScreenStore.subscribe((reportScreenStore) => {
@ -25,15 +25,15 @@
console.error("Could not find UUID for user with ID " + reportScreenStore.userId);
}
}
})
});
anonymous = connectionManager.getConnexionType === GameConnexionTypes.anonymous;
})
});
onDestroy(() => {
if (unsubscriber) {
unsubscriber();
}
})
});
function close() {
showReportScreenStore.set(userReportEmpty);
@ -50,7 +50,7 @@
}
function onKeyDown(e: KeyboardEvent) {
if (e.key === 'Escape') {
if (e.key === "Escape") {
close();
}
}
@ -67,17 +67,25 @@
</section>
<section class="report-menu-action {anonymous ? 'hidden' : ''}">
<section class="justify-center">
<button type="button" class="nes-btn {blockActive ? 'is-disabled' : ''}" on:click|preventDefault={activateBlock}>Block</button>
<button
type="button"
class="nes-btn {blockActive ? 'is-disabled' : ''}"
on:click|preventDefault={activateBlock}>Block</button
>
</section>
<section class="justify-center">
<button type="button" class="nes-btn {reportActive ? 'is-disabled' : ''}" on:click|preventDefault={activateReport}>Report</button>
<button
type="button"
class="nes-btn {reportActive ? 'is-disabled' : ''}"
on:click|preventDefault={activateReport}>Report</button
>
</section>
</section>
<section class="report-menu-content">
{#if blockActive}
<BlockSubMenu userUUID="{userUUID}" userName="{userName}"/>
<BlockSubMenu {userUUID} {userName} />
{:else if reportActive}
<ReportSubMenu userUUID="{userUUID}"/>
<ReportSubMenu {userUUID} />
{:else}
<p>ERROR : There is no action selected.</p>
{/if}

10
front/src/Components/ReportMenu/ReportSubMenu.svelte
View file

@ -7,16 +7,16 @@
let hiddenError = true;
function submitReport() {
if (reportMessage === '') {
if (reportMessage === "") {
hiddenError = true;
} else {
hiddenError = false;
if (userUUID === undefined) {
console.error('User UUID is not valid.');
console.error("User UUID is not valid.");
return;
}
gameManager.getCurrentGameScene().connection?.emitReportPlayerMessage(userUUID, reportMessage);
showReportScreenStore.set(userReportEmpty)
showReportScreenStore.set(userReportEmpty);
}
}
</script>
@ -28,9 +28,9 @@
<section>
<label>
<span>Your message: </span>
<textarea type="text" class="nes-textarea" bind:value={reportMessage}></textarea>
<textarea type="text" class="nes-textarea" bind:value={reportMessage} />
</label>
<p hidden="{hiddenError}">Report message cannot to be empty.</p>
<p hidden={hiddenError}>Report message cannot to be empty.</p>
</section>
<section>
<button type="submit" class="nes-btn is-error" on:click={submitReport}>Report this user</button>

20
front/src/Components/SelectCompanion/SelectCompanionScene.svelte
View file

@ -26,12 +26,22 @@
<form class="selectCompanionScene">
<section class="text-center">
<h2>Select your companion</h2>
<button class="selectCharacterButton selectCharacterButtonLeft nes-btn" on:click|preventDefault={selectLeft}> &lt; </button>
<button class="selectCharacterButton selectCharacterButtonRight nes-btn" on:click|preventDefault={selectRight}> &gt; </button>
<button class="selectCharacterButton selectCharacterButtonLeft nes-btn" on:click|preventDefault={selectLeft}>
&lt;
</button>
<button class="selectCharacterButton selectCharacterButtonRight nes-btn" on:click|preventDefault={selectRight}>
&gt;
</button>
</section>
<section class="action">
<button href="/" class="selectCompanionSceneFormBack nes-btn" on:click|preventDefault={noCompanion}>No companion</button>
<button type="submit" class="selectCompanionSceneFormSubmit nes-btn is-primary" on:click|preventDefault={selectCompanion}>Continue</button>
<button href="/" class="selectCompanionSceneFormBack nes-btn" on:click|preventDefault={noCompanion}
>No companion</button
>
<button
type="submit"
class="selectCompanionSceneFormSubmit nes-btn is-primary"
on:click|preventDefault={selectCompanion}>Continue</button
>
</section>
</form>
@ -82,6 +92,4 @@
right: 5vw;
}
}
</style>

24
front/src/Components/SoundMeterWidget.svelte
View file

@ -1,5 +1,5 @@
<script lang="typescript">
import { AudioContext } from 'standardized-audio-context';
import { AudioContext } from "standardized-audio-context";
import { SoundMeter } from "../Phaser/Components/SoundMeter";
import { onDestroy } from "svelte";
@ -9,6 +9,7 @@
let timeout: ReturnType<typeof setTimeout>;
const soundMeter = new SoundMeter();
let display = false;
let error = false;
$: {
if (stream && stream.getAudioTracks().length > 0) {
@ -17,17 +18,19 @@
if (timeout) {
clearInterval(timeout);
error = false;
}
timeout = setInterval(() => {
try {
volume = soundMeter.getVolume();
//console.log(volume);
} catch (err) {
if (!error) {
console.error(err);
error = true;
}
}
}, 100);
} else {
display = false;
}
@ -38,14 +41,13 @@
if (timeout) {
clearInterval(timeout);
}
})
});
</script>
<div class="sound-progress" class:active={display}>
<span class:active={volume > 5}></span>
<span class:active={volume > 10}></span>
<span class:active={volume > 15}></span>
<span class:active={volume > 40}></span>
<span class:active={volume > 70}></span>
<span class:active={volume > 5} />
<span class:active={volume > 10} />
<span class:active={volume > 15} />
<span class:active={volume > 40} />
<span class:active={volume > 70} />
</div>

26
front/src/Components/TypeMessage/BanMessage.svelte
View file

@ -4,13 +4,13 @@
import { onMount } from "svelte";
const text = $banMessageContentStore;
const NAME_BUTTON = 'Ok';
const NAME_BUTTON = "Ok";
let nbSeconds = 10;
let nameButton = '';
let nameButton = "";
onMount(() => {
timeToRead()
})
timeToRead();
});
function timeToRead() {
nbSeconds -= 1;
@ -29,20 +29,28 @@
}
</script>
<div class="main-ban-message nes-container is-rounded" transition:fly="{{ y: -1000, duration: 500 }}">
<h2 class="title-ban-message"><img src="resources/logos/report.svg" alt="***"/> Important message <img src="resources/logos/report.svg" alt="***"/></h2>
<div class="main-ban-message nes-container is-rounded" transition:fly={{ y: -1000, duration: 500 }}>
<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>
</div>
<div class="footer-ban-message">
<button type="button" class="nes-btn {nameButton === NAME_BUTTON ? 'is-primary' : 'is-error'}" disabled="{!(nameButton === NAME_BUTTON)}" on:click|preventDefault={closeBanMessage}>{nameButton}</button>
<button
type="button"
class="nes-btn {nameButton === NAME_BUTTON ? 'is-primary' : 'is-error'}"
disabled={!(nameButton === NAME_BUTTON)}
on:click|preventDefault={closeBanMessage}>{nameButton}</button
>
</div>
<!-- svelte-ignore a11y-media-has-caption -->
<audio id="report-message" autoplay>
<source src="/resources/objects/report-message.mp3" type="audio/mp3">
<source src="/resources/objects/report-message.mp3" type="audio/mp3" />
</audio>
</div>
<style lang="scss">
div.main-ban-message {
display: flex;

10
front/src/Components/TypeMessage/TextMessage.svelte
View file

@ -5,14 +5,14 @@
const content = JSON.parse($textMessageContentStore);
const converter = new QuillDeltaToHtmlConverter(content.ops, { inlineStyles: true });
const NAME_BUTTON = 'Ok';
const NAME_BUTTON = "Ok";
function closeTextMessage() {
textMessageVisibleStore.set(false);
}
function onKeyDown(e: KeyboardEvent) {
if (e.key === 'Escape') {
if (e.key === "Escape") {
closeTextMessage();
}
}
@ -20,12 +20,14 @@
<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" transition:fly={{ x: -1000, duration: 500 }}>
<div class="content-text-message">
{@html converter.convert()}
</div>
<div class="footer-text-message">
<button type="button" class="nes-btn is-primary" on:click|preventDefault={closeTextMessage}>{NAME_BUTTON}</button>
<button type="button" class="nes-btn is-primary" on:click|preventDefault={closeTextMessage}
>{NAME_BUTTON}</button
>
</div>
</div>

6
front/src/Components/UI/AudioPlaying.svelte
View file

@ -1,5 +1,5 @@
<script lang="ts">
import { fly } from 'svelte/transition';
import { fly } from "svelte/transition";
import megaphoneImg from "./images/megaphone.svg";
import { soundPlayingStore } from "../../Stores/SoundPlayingStore";
import { afterUpdate } from "svelte";
@ -16,11 +16,11 @@
});
</script>
<div class="audio-playing" transition:fly="{{ x: 210, duration: 500 }}">
<div class="audio-playing" transition:fly={{ x: 210, duration: 500 }}>
<img src={megaphoneImg} alt="Audio playing" />
<p>Audio message</p>
<audio bind:this={audio} src={url} on:ended={soundEnded}>
<track kind="captions">
<track kind="captions" />
</audio>
</div>

1
front/src/Components/UI/ErrorDialog.svelte
View file

@ -5,7 +5,6 @@ function close(): boolean {
errorStore.clearMessages();
return false;
}
</script>
<div class="error-div nes-container is-dark is-rounded" open>

14
front/src/Components/Video/ChatLayout.svelte
View file

@ -4,18 +4,18 @@
import { biggestAvailableAreaStore } from "../../Stores/BiggestAvailableAreaStore";
import MediaBox from "./MediaBox.svelte";
let cssClass = 'one-col';
let cssClass = "one-col";
const unsubscribe = streamableCollectionStore.subscribe((displayableMedias) => {
const nbUsers = displayableMedias.size;
if (nbUsers <= 1) {
cssClass = 'one-col';
cssClass = "one-col";
} else if (nbUsers <= 4) {
cssClass = 'two-col';
cssClass = "two-col";
} else if (nbUsers <= 9) {
cssClass = 'three-col';
cssClass = "three-col";
} else {
cssClass = 'four-col';
cssClass = "four-col";
}
});
@ -25,11 +25,11 @@
afterUpdate(() => {
biggestAvailableAreaStore.recompute();
})
});
</script>
<div class="chat-mode {cssClass}">
{#each [...$streamableCollectionStore.values()] as peer (peer.uniqueId)}
<MediaBox streamable={peer}></MediaBox>
<MediaBox streamable={peer} />
{/each}
</div>

3
front/src/Components/Video/LocalStreamMediaBox.svelte
View file

@ -8,9 +8,8 @@
export let cssClass: string | undefined;
</script>
<div class="video-container {cssClass ? cssClass : ''}" class:hide={!stream}>
{#if stream}
<video use:srcObject={stream} autoplay muted playsinline on:click={() => videoFocusStore.toggleFocus(peer)}></video>
<video use:srcObject={stream} autoplay muted playsinline on:click={() => videoFocusStore.toggleFocus(peer)} />
{/if}
</div>

6
front/src/Components/Video/PresentationLayout.svelte
View file

@ -7,20 +7,20 @@
afterUpdate(() => {
biggestAvailableAreaStore.recompute();
})
});
</script>
<div class="main-section">
{#if $videoFocusStore}
{#key $videoFocusStore.uniqueId}
<MediaBox streamable={$videoFocusStore}></MediaBox>
<MediaBox streamable={$videoFocusStore} />
{/key}
{/if}
</div>
<aside class="sidebar">
{#each [...$streamableCollectionStore.values()] as peer (peer.uniqueId)}
{#if peer !== $videoFocusStore}
<MediaBox streamable={peer}></MediaBox>
<MediaBox streamable={peer} />
{/if}
{/each}
</aside>

12
front/src/Components/Video/ScreenSharingMediaBox.svelte
View file

@ -7,20 +7,20 @@
let streamStore = peer.streamStore;
let name = peer.userName;
let statusStore = peer.statusStore;
</script>
<div class="video-container">
{#if $statusStore === 'connecting'}
<div class="connecting-spinner"></div>
{#if $statusStore === "connecting"}
<div class="connecting-spinner" />
{/if}
{#if $statusStore === 'error'}
<div class="rtc-error"></div>
{#if $statusStore === "error"}
<div class="rtc-error" />
{/if}
{#if $streamStore === null}
<i style="background-color: {getColorByString(name)};">{name}</i>
{:else}
<video use:srcObject={$streamStore} autoplay playsinline on:click={() => videoFocusStore.toggleFocus(peer)}></video>
<!-- svelte-ignore a11y-media-has-caption -->
<video use:srcObject={$streamStore} autoplay playsinline on:click={() => videoFocusStore.toggleFocus(peer)} />
{/if}
</div>

19
front/src/Components/Video/VideoMediaBox.svelte
View file

@ -17,30 +17,29 @@
function openReport(peer: VideoPeer): void {
showReportScreenStore.set({ userId: peer.userId, userName: peer.userName });
}
</script>
<div class="video-container">
{#if $statusStore === 'connecting'}
<div class="connecting-spinner"></div>
{#if $statusStore === "connecting"}
<div class="connecting-spinner" />
{/if}
{#if $statusStore === 'error'}
<div class="rtc-error"></div>
{#if $statusStore === "error"}
<div class="rtc-error" />
{/if}
{#if !$constraintStore || $constraintStore.video === false}
<i style="background-color: {getColorByString(name)};">{name}</i>
{/if}
{#if $constraintStore && $constraintStore.audio === false}
<img src={microphoneCloseImg} class="active" alt="Muted">
<img src={microphoneCloseImg} class="active" alt="Muted" />
{/if}
<button class="report" on:click={() => openReport(peer)}>
<img alt="Report this user" src={reportImg}>
<img alt="Report this user" src={reportImg} />
<span>Report/Block</span>
</button>
<video use:srcObject={$streamStore} autoplay playsinline on:click={() => videoFocusStore.toggleFocus(peer)}></video>
<!-- svelte-ignore a11y-media-has-caption -->
<video use:srcObject={$streamStore} autoplay playsinline on:click={() => videoFocusStore.toggleFocus(peer)} />
<img src={blockSignImg} class="block-logo" alt="Block" />
{#if $constraintStore && $constraintStore.audio !== false}
<SoundMeterWidget stream={$streamStore}></SoundMeterWidget>
<SoundMeterWidget stream={$streamStore} />
{/if}
</div>

1
front/src/Components/Video/VideoOverlay.svelte
View file

@ -3,7 +3,6 @@
import { layoutModeStore } from "../../Stores/StreamableCollectionStore";
import PresentationLayout from "./PresentationLayout.svelte";
import ChatLayout from "./ChatLayout.svelte";
</script>
<div class="video-overlay">

66
front/src/Components/VisitCard/VisitCard.svelte
View file

@ -1,11 +1,11 @@
<script lang="typescript">
import { fly } from 'svelte/transition';
import { fly } from "svelte/transition";
import { requestVisitCardsStore } from "../../Stores/GameStore";
import { onMount } from "svelte";
export let visitCardUrl: string;
let w = '500px';
let h = '250px';
let w = "500px";
let h = "250px";
let hidden = true;
let cvIframe: HTMLIFrameElement;
@ -13,21 +13,41 @@
requestVisitCardsStore.set(null);
}
function handleIframeMessage(message:any) {
if (message.data.type === 'cvIframeSize') {
w = (message.data.data.w) + 'px';
h = (message.data.data.h) + 'px';
function handleIframeMessage(message: MessageEvent) {
if (message.data.type === "cvIframeSize") {
w = message.data.data.w + "px";
h = message.data.data.h + "px";
}
}
onMount(() => {
cvIframe.onload = () => hidden = false
cvIframe.onerror = () => hidden = false
})
cvIframe.onload = () => (hidden = false);
cvIframe.onerror = () => (hidden = false);
});
</script>
<style lang="scss">
<section class="visitCard" transition:fly={{ y: -200, duration: 1000 }} style="width: {w}">
{#if hidden}
<div class="loader" />
{/if}
<iframe
title="visitCard"
src={visitCardUrl}
allow="clipboard-read; clipboard-write self {visitCardUrl}"
style="width: {w}; height: {h}"
class:hidden
bind:this={cvIframe}
/>
{#if !hidden}
<div class="buttonContainer">
<button class="nes-btn is-popUpElement" on:click={closeCard}>Close</button>
</div>
{/if}
</section>
<svelte:window on:message={handleIframeMessage} />
<style lang="scss">
.loader {
border: 16px solid #f3f3f3; /* Light grey */
border-top: 16px solid #3498db; /* Blue */
@ -39,8 +59,12 @@
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.visitCard {
@ -67,19 +91,3 @@
}
}
</style>
<section class="visitCard" transition:fly="{{ y: -200, duration: 1000 }}" style="width: {w}">
{#if hidden}
<div class="loader"></div>
{/if}
<iframe title="visitCard" src={visitCardUrl} allow="clipboard-read; clipboard-write self {visitCardUrl}" style="width: {w}; height: {h}" class:hidden={hidden} bind:this={cvIframe}></iframe>
{#if !hidden}
<div class="buttonContainer">
<button class="nes-btn is-popUpElement" on:click={closeCard}>Close</button>
</div>
{/if}
</section>
<svelte:window on:message={handleIframeMessage}/>

14
front/src/Components/WarningContainer/WarningContainer.svelte
View file

@ -1,20 +1,22 @@
<script lang="typescript">
import { fly } from 'svelte/transition';
import { fly } from "svelte/transition";
import { userIsAdminStore } from "../../Stores/GameStore";
import { ADMIN_URL } from "../../Enum/EnvironmentVariable";
const upgradeLink = ADMIN_URL+'/pricing';
const upgradeLink = ADMIN_URL + "/pricing";
</script>
<main class="warningMain" transition:fly="{{ y: -200, duration: 500 }}">
<main class="warningMain" transition:fly={{ y: -200, duration: 500 }}>
<h2>Warning!</h2>
{#if $userIsAdminStore}
<p>This world is close to its limit!. You can upgrade its capacity <a href="{upgradeLink}" target="_blank">here</a></p>
<p>
This world is close to its limit!. You can upgrade its capacity <a href={upgradeLink} target="_blank"
>here</a
>
</p>
{:else}
<p>This world is close to its limit!</p>
{/if}
</main>
<style lang="scss">

23
front/src/Components/selectCharacter/SelectCharacterScene.svelte
View file

@ -21,18 +21,29 @@
function customizeScene() {
selectCharacterScene.nextSceneToCustomizeScene();
}
</script>
<form class="selectCharacterScene">
<section class="text-center">
<h2>Select your WOKA</h2>
<button class="selectCharacterButton selectCharacterButtonLeft nes-btn" on:click|preventDefault={ selectLeft }> &lt; </button>
<button class="selectCharacterButton selectCharacterButtonRight nes-btn" on:click|preventDefault={ selectRight }> &gt; </button>
<button class="selectCharacterButton selectCharacterButtonLeft nes-btn" on:click|preventDefault={selectLeft}>
&lt;
</button>
<button class="selectCharacterButton selectCharacterButtonRight nes-btn" on:click|preventDefault={selectRight}>
&gt;
</button>
</section>
<section class="action">
<button type="submit" class="selectCharacterSceneFormSubmit nes-btn is-primary" on:click|preventDefault={ cameraScene }>Continue</button>
<button type="submit" class="selectCharacterSceneFormCustomYourOwnSubmit nes-btn" on:click|preventDefault={ customizeScene }>Customize your WOKA</button>
<button
type="submit"
class="selectCharacterSceneFormSubmit nes-btn is-primary"
on:click|preventDefault={cameraScene}>Continue</button
>
<button
type="submit"
class="selectCharacterSceneFormCustomYourOwnSubmit nes-btn"
on:click|preventDefault={customizeScene}>Customize your WOKA</button
>
</section>
</form>
@ -87,6 +98,4 @@
right: 5vw;
}
}
</style>