REVIEW : Migration Menu and Report Menu in Svelte (#1363)
* WIP: svelte menu * temp * temp * New menu svelte * Migration of report menu in svelte * Migration of registerCustomMenu for Menu in Svelte Refactor subMenuStore Suppression of old MenuScene and ReportMenu * Suppression of HTML files that aren't use anymore * fix deeployer * First pass on css * First pass on css * Second pass on css and reportMenu * Second pass on css and reportMenu * Second pass on css and reportMenu * Third pass on css and reportMenu * Correction following test * Contact page only if environment variable exist * Update service worker Signed-off-by: Gregoire Parant <g.parant@thecodingmachine.com> * Change requested * Change requested Co-authored-by: kharhamel <oognic@gmail.com> Co-authored-by: Gregoire Parant <g.parant@thecodingmachine.com>
This commit is contained in:
GRL78
GitHub
parent
29c1ea25c7
commit
7c956d1481
45 changed files with 1131 additions and 1257 deletions
|
|
@ -1,4 +1,6 @@
|
|||
<script lang="typescript">
|
||||
import MenuIcon from "./Menu/MenuIcon.svelte";
|
||||
import {menuIconVisiblilityStore, menuVisiblilityStore} from "../Stores/MenuStore";
|
||||
import {enableCameraSceneVisibilityStore} from "../Stores/MediaStore";
|
||||
import CameraControls from "./CameraControls.svelte";
|
||||
import MyCamera from "./MyCamera.svelte";
|
||||
|
|
@ -23,10 +25,9 @@
|
|||
import AudioPlaying from "./UI/AudioPlaying.svelte";
|
||||
import {soundPlayingStore} from "../Stores/SoundPlayingStore";
|
||||
import ErrorDialog from "./UI/ErrorDialog.svelte";
|
||||
import Menu from "./Menu/Menu.svelte";
|
||||
import VideoOverlay from "./Video/VideoOverlay.svelte";
|
||||
import {gameOverlayVisibilityStore} from "../Stores/GameOverlayStoreVisibility";
|
||||
import {consoleGlobalMessageManagerVisibleStore} from "../Stores/ConsoleGlobalMessageManagerStore";
|
||||
import ConsoleGlobalMessageManager from "./ConsoleGlobalMessageManager/ConsoleGlobalMessageManager.svelte";
|
||||
import AdminMessage from "./TypeMessage/BanMessage.svelte";
|
||||
import TextMessage from "./TypeMessage/TextMessage.svelte";
|
||||
import {banMessageVisibleStore} from "../Stores/TypeMessageStore/BanMessageStore";
|
||||
|
|
@ -37,6 +38,8 @@
|
|||
import LayoutManager from "./LayoutManager/LayoutManager.svelte";
|
||||
import {audioManagerVisibilityStore} from "../Stores/AudioManagerStore";
|
||||
import AudioManager from "./AudioManager/AudioManager.svelte"
|
||||
import { showReportScreenStore, userReportEmpty } from "../Stores/ShowReportScreenStore";
|
||||
import ReportMenu from "./ReportMenu/ReportMenu.svelte";
|
||||
|
||||
export let game: Game;
|
||||
|
||||
|
|
@ -93,6 +96,21 @@
|
|||
<LayoutManager></LayoutManager>
|
||||
</div>
|
||||
{/if}
|
||||
{#if $showReportScreenStore !== userReportEmpty}
|
||||
<div>
|
||||
<ReportMenu></ReportMenu>
|
||||
</div>
|
||||
{/if}
|
||||
{#if $menuIconVisiblilityStore}
|
||||
<div>
|
||||
<MenuIcon></MenuIcon>
|
||||
</div>
|
||||
{/if}
|
||||
{#if $menuVisiblilityStore}
|
||||
<div>
|
||||
<Menu></Menu>
|
||||
</div>
|
||||
{/if}
|
||||
{#if $gameOverlayVisibilityStore}
|
||||
<div>
|
||||
<VideoOverlay></VideoOverlay>
|
||||
|
|
@ -100,11 +118,6 @@
|
|||
<CameraControls></CameraControls>
|
||||
</div>
|
||||
{/if}
|
||||
{#if $consoleGlobalMessageManagerVisibleStore}
|
||||
<div>
|
||||
<ConsoleGlobalMessageManager></ConsoleGlobalMessageManager>
|
||||
</div>
|
||||
{/if}
|
||||
{#if $helpCameraSettingsVisibleStore}
|
||||
<div>
|
||||
<HelpCameraSettingsPopup></HelpCameraSettingsPopup>
|
||||
|
|
|
|||
|
|
@ -1,150 +0,0 @@
|
|||
<script lang="typescript">
|
||||
import { fly } from 'svelte/transition';
|
||||
import InputTextGlobalMessage from "./InputTextGlobalMessage.svelte";
|
||||
import UploadAudioGlobalMessage from "./UploadAudioGlobalMessage.svelte";
|
||||
import { gameManager } from "../../Phaser/Game/GameManager";
|
||||
import { consoleGlobalMessageManagerVisibleStore } from "../../Stores/ConsoleGlobalMessageManagerStore";
|
||||
|
||||
let inputSendTextActive = true;
|
||||
let uploadMusicActive = false;
|
||||
let handleSendText: { sendTextMessage(broadcast: boolean): void };
|
||||
let handleSendAudio: { sendAudioMessage(broadcast: boolean): Promise<void> };
|
||||
let broadcastToWorld = false;
|
||||
|
||||
function closeConsoleGlobalMessage() {
|
||||
consoleGlobalMessageManagerVisibleStore.set(false)
|
||||
}
|
||||
|
||||
function onKeyDown(e:KeyboardEvent) {
|
||||
if (e.key === 'Escape') {
|
||||
closeConsoleGlobalMessage();
|
||||
}
|
||||
}
|
||||
|
||||
function inputSendTextActivate() {
|
||||
inputSendTextActive = true;
|
||||
uploadMusicActive = false;
|
||||
}
|
||||
|
||||
function inputUploadMusicActivate() {
|
||||
uploadMusicActive = true;
|
||||
inputSendTextActive = false;
|
||||
}
|
||||
|
||||
function send() {
|
||||
if (inputSendTextActive) {
|
||||
handleSendText.sendTextMessage(broadcastToWorld);
|
||||
}
|
||||
if (uploadMusicActive) {
|
||||
handleSendAudio.sendAudioMessage(broadcastToWorld);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<svelte:window on:keydown={onKeyDown}/>
|
||||
|
||||
<div class="console-global-message">
|
||||
<div class="menu-console-global-message nes-container is-rounded" transition:fly="{{ x: -1000, duration: 500 }}">
|
||||
<button type="button" class="nes-btn {inputSendTextActive ? 'is-disabled' : ''}" on:click|preventDefault={inputSendTextActivate}>Message</button>
|
||||
<button type="button" class="nes-btn {uploadMusicActive ? 'is-disabled' : ''}" on:click|preventDefault={inputUploadMusicActivate}>Audio</button>
|
||||
</div>
|
||||
<div class="main-console-global-message nes-container is-rounded" transition:fly="{{ y: -1000, duration: 500 }}">
|
||||
<div class="title-console-global-message">
|
||||
<h2>Global Message</h2>
|
||||
<button type="button" class="nes-btn is-error" on:click|preventDefault={closeConsoleGlobalMessage}><i class="nes-icon close is-small"></i></button>
|
||||
</div>
|
||||
<div class="content-console-global-message">
|
||||
{#if inputSendTextActive}
|
||||
<InputTextGlobalMessage gameManager={gameManager} bind:handleSending={handleSendText}/>
|
||||
{/if}
|
||||
{#if uploadMusicActive}
|
||||
<UploadAudioGlobalMessage gameManager={gameManager} bind:handleSending={handleSendAudio}/>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="footer-console-global-message">
|
||||
<label>
|
||||
<input type="checkbox" class="nes-checkbox is-dark nes-pointer" bind:checked={broadcastToWorld}>
|
||||
<span>Broadcast to all rooms of the world</span>
|
||||
</label>
|
||||
<button class="nes-btn is-primary" on:click|preventDefault={send}>Send</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
.nes-container {
|
||||
padding: 0 5px;
|
||||
}
|
||||
|
||||
div.console-global-message {
|
||||
top: 20vh;
|
||||
width: 50vw;
|
||||
height: 50vh;
|
||||
position: relative;
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding: 0;
|
||||
|
||||
pointer-events: auto;
|
||||
|
||||
div.menu-console-global-message {
|
||||
flex: 1 1 auto;
|
||||
max-width: 180px;
|
||||
|
||||
text-align: center;
|
||||
background-color: #333333;
|
||||
|
||||
button {
|
||||
width: 136px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
div.main-console-global-message {
|
||||
flex: 1 1 auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
background-color: #333333;
|
||||
|
||||
div.title-console-global-message {
|
||||
flex: 0 0 auto;
|
||||
height: 50px;
|
||||
margin-bottom: 10px;
|
||||
|
||||
text-align: center;
|
||||
color: whitesmoke;
|
||||
|
||||
.nes-btn {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
div.content-console-global-message {
|
||||
flex: 1 1 auto;
|
||||
max-height: calc(100% - 120px);
|
||||
}
|
||||
|
||||
div.footer-console-global-message {
|
||||
height: 50px;
|
||||
margin-top: 10px;
|
||||
text-align: center;
|
||||
|
||||
label {
|
||||
margin: 0;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
max-width: 30%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
147
front/src/Components/Menu/AboutRoomSubMenu.svelte
Normal file
147
front/src/Components/Menu/AboutRoomSubMenu.svelte
Normal file
|
|
@ -0,0 +1,147 @@
|
|||
<script lang="ts">
|
||||
import { gameManager } from "../../Phaser/Game/GameManager";
|
||||
import {onMount} from "svelte";
|
||||
|
||||
let gameScene = gameManager.getCurrentGameScene();
|
||||
|
||||
let HTMLShareLink: HTMLInputElement;
|
||||
let expandedMapCopyright = false;
|
||||
let expandedTilesetCopyright = false;
|
||||
|
||||
let mapName: string = "";
|
||||
let mapDescription: string = "";
|
||||
let mapCopyright: string = "The map creator did not declare a copyright for the map.";
|
||||
let tilesetCopyright: string[] = [];
|
||||
|
||||
onMount(() => {
|
||||
if (gameScene.mapFile.properties !== undefined) {
|
||||
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') {
|
||||
mapDescription = propertyDescription.value;
|
||||
}
|
||||
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') {
|
||||
tilesetCopyright = [...tilesetCopyright, propertyTilesetCopyright.value]; //Assignment needed to trigger Svelte's reactivity
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
function copyLink() {
|
||||
HTMLShareLink.select();
|
||||
document.execCommand('copy');
|
||||
}
|
||||
|
||||
async function shareLink() {
|
||||
const shareData = {url: location.toString()};
|
||||
|
||||
try {
|
||||
await navigator.share(shareData);
|
||||
} catch (err) {
|
||||
console.error('Error: ' + err);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="about-room-main">
|
||||
<section class="share-url not-mobile">
|
||||
<h3>Share the link of the room !</h3>
|
||||
<input type="text" readonly bind:this={HTMLShareLink} 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>
|
||||
<button type="button" class="nes-btn is-primary" on:click={shareLink}>Share</button>
|
||||
</section>
|
||||
<h2>Information on the map</h2>
|
||||
<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}">
|
||||
{#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>
|
||||
{/each}
|
||||
</section>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
|
||||
<style lang="scss">
|
||||
.string-HTML{
|
||||
white-space: pre-line;
|
||||
}
|
||||
|
||||
div.about-room-main {
|
||||
height: calc(100% - 56px);
|
||||
|
||||
section.share-url {
|
||||
text-align: center;
|
||||
margin-bottom: 20px;
|
||||
|
||||
input {
|
||||
width: 85%;
|
||||
border-radius: 32px;
|
||||
padding: 3px;
|
||||
}
|
||||
input::selection {
|
||||
background-color: #209cee;
|
||||
}
|
||||
}
|
||||
|
||||
section.is-mobile {
|
||||
display: none;
|
||||
}
|
||||
|
||||
h2, h3 {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h3.hoverable:hover {
|
||||
background-color: #3c3e40;
|
||||
border-radius: 32px;
|
||||
}
|
||||
|
||||
section.container-overflow {
|
||||
height: calc(100% - 220px);
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 800px), only screen and (max-height: 800px) {
|
||||
div.about-room-main {
|
||||
section.share-url.not-mobile {
|
||||
display: none;
|
||||
}
|
||||
|
||||
section.is-mobile {
|
||||
display: block;
|
||||
text-align: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
section.container-overflow {
|
||||
height: calc(100% - 120px);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,17 +1,14 @@
|
|||
<script lang="ts">
|
||||
import { HtmlUtils } from "../../WebRtc/HtmlUtils";
|
||||
import type { GameManager } from "../../Phaser/Game/GameManager";
|
||||
import { consoleGlobalMessageManagerFocusStore, consoleGlobalMessageManagerVisibleStore } from "../../Stores/ConsoleGlobalMessageManagerStore";
|
||||
import { gameManager } from "../../Phaser/Game/GameManager";
|
||||
import { AdminMessageEventTypes } from "../../Connexion/AdminMessagesService";
|
||||
import uploadFile from "../images/music-file.svg";
|
||||
import type {PlayGlobalMessageInterface} from "../../Connexion/ConnexionModels";
|
||||
import type { PlayGlobalMessageInterface } from "../../Connexion/ConnexionModels";
|
||||
|
||||
interface EventTargetFiles extends EventTarget {
|
||||
files: Array<File>;
|
||||
}
|
||||
|
||||
export let gameManager: GameManager;
|
||||
|
||||
let gameScene = gameManager.getCurrentGameScene();
|
||||
let fileInput: HTMLInputElement;
|
||||
let fileName: string;
|
||||
|
|
@ -43,7 +40,6 @@
|
|||
}
|
||||
inputAudio.value = '';
|
||||
gameScene.connection?.emitGlobalMessage(audioGlobalMessage);
|
||||
disableConsole();
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -74,11 +70,6 @@
|
|||
return '';
|
||||
}
|
||||
}
|
||||
|
||||
function disableConsole() {
|
||||
consoleGlobalMessageManagerVisibleStore.set(false);
|
||||
consoleGlobalMessageManagerFocusStore.set(false);
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
|
|
@ -103,24 +94,17 @@
|
|||
|
||||
img {
|
||||
flex: 1 1 auto;
|
||||
|
||||
max-height: 80%;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
p {
|
||||
flex: 1 1 auto;
|
||||
|
||||
margin-bottom: 5px;
|
||||
|
||||
color: whitesmoke;
|
||||
font-size: 1rem;
|
||||
|
||||
&.err {
|
||||
color: #ce372b;
|
||||
}
|
||||
}
|
||||
|
||||
input {
|
||||
display: none;
|
||||
}
|
||||
15
front/src/Components/Menu/ContactSubMenu.svelte
Normal file
15
front/src/Components/Menu/ContactSubMenu.svelte
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
<script lang="ts">
|
||||
import {CONTACT_URL} from "../../Enum/EnvironmentVariable";
|
||||
|
||||
</script>
|
||||
|
||||
<iframe title="contact" src="{CONTACT_URL}"></iframe>
|
||||
|
||||
<style lang="scss">
|
||||
iframe {
|
||||
border: none;
|
||||
height: calc(100% - 56px);
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
51
front/src/Components/Menu/CreateMapSubMenu.svelte
Normal file
51
front/src/Components/Menu/CreateMapSubMenu.svelte
Normal file
|
|
@ -0,0 +1,51 @@
|
|||
<script lang="ts">
|
||||
|
||||
function goToGettingStarted() {
|
||||
const sparkHost = "https://workadventu.re/getting-started";
|
||||
window.open(sparkHost, "_blank");
|
||||
}
|
||||
|
||||
function goToBuildingMap() {
|
||||
const sparkHost = "https://workadventu.re/map-building";
|
||||
window.open(sparkHost, "_blank");
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<div class="create-map-main">
|
||||
<section class="container-overflow">
|
||||
<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.
|
||||
</p>
|
||||
<button type="button" class="nes-btn is-primary" on:click={goToGettingStarted}>Getting started</button>
|
||||
</section>
|
||||
<section>
|
||||
<h3>Create your map</h3>
|
||||
<p>You can also create your own custom map by following the step of the documentation.</p>
|
||||
<button type="button" class="nes-btn" on:click={goToBuildingMap}>Create your map</button>
|
||||
</section>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
div.create-map-main {
|
||||
height: calc(100% - 56px);
|
||||
|
||||
text-align: center;
|
||||
|
||||
section {
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
|
||||
section.container-overflow {
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
118
front/src/Components/Menu/GlobalMessagesSubMenu.svelte
Normal file
118
front/src/Components/Menu/GlobalMessagesSubMenu.svelte
Normal file
|
|
@ -0,0 +1,118 @@
|
|||
<script lang="ts">
|
||||
import TextGlobalMessage from './TextGlobalMessage.svelte';
|
||||
import AudioGlobalMessage from './AudioGlobalMessage.svelte';
|
||||
|
||||
let handleSendText: { sendTextMessage(broadcast: boolean): void };
|
||||
let handleSendAudio: { sendAudioMessage(broadcast: boolean): Promise<void> };
|
||||
|
||||
let inputSendTextActive = true;
|
||||
let uploadAudioActive = !inputSendTextActive;
|
||||
let broadcastToWorld = false;
|
||||
|
||||
function activateInputText() {
|
||||
inputSendTextActive = true;
|
||||
uploadAudioActive = false;
|
||||
}
|
||||
|
||||
function activateUploadAudio() {
|
||||
inputSendTextActive = false;
|
||||
uploadAudioActive = true;
|
||||
}
|
||||
|
||||
function send() {
|
||||
if (inputSendTextActive) {
|
||||
handleSendText.sendTextMessage(broadcastToWorld);
|
||||
}
|
||||
if (uploadAudioActive) {
|
||||
handleSendAudio.sendAudioMessage(broadcastToWorld);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<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>
|
||||
</section>
|
||||
<section>
|
||||
<button type="button" class="nes-btn {uploadAudioActive ? 'is-disabled' : ''}" on:click|preventDefault={activateUploadAudio}>Audio</button>
|
||||
</section>
|
||||
</div>
|
||||
<div class="global-message-content">
|
||||
{#if inputSendTextActive}
|
||||
<TextGlobalMessage bind:handleSending={handleSendText}/>
|
||||
{/if}
|
||||
{#if uploadAudioActive}
|
||||
<AudioGlobalMessage bind:handleSending={handleSendAudio}/>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="global-message-footer">
|
||||
<label>
|
||||
<input type="checkbox" class="nes-checkbox is-dark nes-pointer" bind:checked={broadcastToWorld}>
|
||||
<span>Broadcast to all rooms of the world</span>
|
||||
</label>
|
||||
<section>
|
||||
<button class="nes-btn is-primary" on:click|preventDefault={send}>Send</button>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<style lang="scss">
|
||||
div.global-message-main {
|
||||
height: calc(100% - 50px);
|
||||
display: grid;
|
||||
grid-template-rows: 15% 65% 20%;
|
||||
|
||||
div.global-message-subOptions {
|
||||
display: grid;
|
||||
grid-template-columns: 50% 50%;
|
||||
margin-bottom: 20px;
|
||||
|
||||
section {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
div.global-message-footer {
|
||||
margin-bottom: 10px;
|
||||
|
||||
display: grid;
|
||||
grid-template-rows: 50% 50%;
|
||||
|
||||
section {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
label {
|
||||
margin: 10px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
span {
|
||||
font-family: "Press Start 2P";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 800px), only screen and (max-height: 800px) {
|
||||
.global-message-content {
|
||||
height: calc(100% - 5px);
|
||||
}
|
||||
.global-message-footer {
|
||||
margin-bottom: 0;
|
||||
|
||||
label {
|
||||
width: calc(100% - 10px);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
132
front/src/Components/Menu/Menu.svelte
Normal file
132
front/src/Components/Menu/Menu.svelte
Normal file
|
|
@ -0,0 +1,132 @@
|
|||
<script lang="typescript">
|
||||
import {fly} from "svelte/transition";
|
||||
import SettingsSubMenu from "./SettingsSubMenu.svelte";
|
||||
import ProfileSubMenu from "./ProfileSubMenu.svelte";
|
||||
import CreateMapSubMenu from "./CreateMapSubMenu.svelte";
|
||||
import AboutRoomSubMenu from "./AboutRoomSubMenu.svelte";
|
||||
import GlobalMessageSubMenu from "./GlobalMessagesSubMenu.svelte";
|
||||
import ContactSubMenu from "./ContactSubMenu.svelte";
|
||||
import {menuVisiblilityStore, SubMenusInterface, subMenusStore} from "../../Stores/MenuStore";
|
||||
import {onMount} from "svelte";
|
||||
import {get} from "svelte/store";
|
||||
import {sendMenuClickedEvent} from "../../Api/iframe/Ui/MenuItem";
|
||||
|
||||
let activeSubMenu: string = SubMenusInterface.settings;
|
||||
let activeComponent: typeof SettingsSubMenu = SettingsSubMenu;
|
||||
|
||||
onMount(() => {
|
||||
switchMenu(SubMenusInterface.settings);
|
||||
})
|
||||
|
||||
function switchMenu(menu: string) {
|
||||
if (get(subMenusStore).find((subMenu) => subMenu === menu)) {
|
||||
activeSubMenu = menu;
|
||||
switch (menu) {
|
||||
case SubMenusInterface.settings:
|
||||
activeComponent = SettingsSubMenu;
|
||||
break;
|
||||
case SubMenusInterface.profile:
|
||||
activeComponent = ProfileSubMenu;
|
||||
break;
|
||||
case SubMenusInterface.createMap:
|
||||
activeComponent = CreateMapSubMenu;
|
||||
break;
|
||||
case SubMenusInterface.aboutRoom:
|
||||
activeComponent = AboutRoomSubMenu;
|
||||
break;
|
||||
case SubMenusInterface.globalMessages:
|
||||
activeComponent = GlobalMessageSubMenu;
|
||||
break;
|
||||
case SubMenusInterface.contact:
|
||||
activeComponent = ContactSubMenu;
|
||||
break;
|
||||
default:
|
||||
sendMenuClickedEvent(menu);
|
||||
menuVisiblilityStore.set(false);
|
||||
break;
|
||||
}
|
||||
} else throw ("There is no menu called " + menu);
|
||||
}
|
||||
|
||||
function closeMenu() {
|
||||
menuVisiblilityStore.set(false);
|
||||
}
|
||||
function onKeyDown(e:KeyboardEvent) {
|
||||
if (e.key === 'Escape') {
|
||||
closeMenu();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<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 }}">
|
||||
<h2>Menu</h2>
|
||||
<nav>
|
||||
{#each $subMenusStore as 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 }}">
|
||||
<h2>{activeSubMenu}</h2>
|
||||
<svelte:component this={activeComponent}/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
.nes-container {
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
div.menu-container-main {
|
||||
--size-first-columns-grid: 200px;
|
||||
|
||||
font-family: "Press Start 2P";
|
||||
pointer-events: auto;
|
||||
height: 80vh;
|
||||
width: 75vw;
|
||||
top: 10vh;
|
||||
|
||||
position: relative;
|
||||
margin: auto;
|
||||
|
||||
display: grid;
|
||||
grid-template-columns: var(--size-first-columns-grid) calc(100% - var(--size-first-columns-grid));
|
||||
grid-template-rows: 100%;
|
||||
|
||||
h2 {
|
||||
text-align: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
div.menu-nav-sidebar {
|
||||
background-color: #333333;
|
||||
color: whitesmoke;
|
||||
|
||||
nav button {
|
||||
width: calc(100% - 10px);
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
div.menu-submenu-container {
|
||||
background-color: #333333;
|
||||
color: whitesmoke;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 800px) {
|
||||
div.menu-container-main {
|
||||
--size-first-columns-grid: 120px;
|
||||
height: 70vh;
|
||||
top: 55px;
|
||||
width: 100vw;
|
||||
font-size: 0.5em;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,33 +1,40 @@
|
|||
<script lang="typescript">
|
||||
import logoWA from "../images/logo-WA-min.png"
|
||||
import {menuVisiblilityStore} from "../../Stores/MenuStore";
|
||||
import {get} from "svelte/store";
|
||||
|
||||
function showMenu(){
|
||||
menuVisiblilityStore.set(!get(menuVisiblilityStore))
|
||||
}
|
||||
|
||||
function onKeyDown(e: KeyboardEvent) {
|
||||
if (e.key === "Tab") {
|
||||
showMenu();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<svelte:window on:keydown={onKeyDown}/>
|
||||
|
||||
<main class="menuIcon">
|
||||
<section>
|
||||
<button>
|
||||
<img src="/static/images/menu.svg" alt="Open menu">
|
||||
</button>
|
||||
</section>
|
||||
<img src={logoWA} alt="open menu" class="nes-pointer" on:click|preventDefault={showMenu}>
|
||||
</main>
|
||||
|
||||
<style lang="scss">
|
||||
.menuIcon button {
|
||||
background-color: black;
|
||||
color: white;
|
||||
border-radius: 7px;
|
||||
padding: 2px 8px;
|
||||
img {
|
||||
width: 14px;
|
||||
padding-top: 0;
|
||||
/*cursor: url('/resources/logos/cursor_pointer.png'), pointer;*/
|
||||
}
|
||||
.menuIcon {
|
||||
pointer-events: auto;
|
||||
margin: 25px;
|
||||
img {
|
||||
width: 60px;
|
||||
padding-top: 0;
|
||||
}
|
||||
.menuIcon section {
|
||||
margin: 10px;
|
||||
}
|
||||
@media only screen and (max-height: 700px) {
|
||||
.menuIcon section {
|
||||
margin: 2px;
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 800px), only screen and (max-height: 800px) {
|
||||
.menuIcon {
|
||||
margin: 3px;
|
||||
img {
|
||||
width: 50px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
78
front/src/Components/Menu/ProfileSubMenu.svelte
Normal file
78
front/src/Components/Menu/ProfileSubMenu.svelte
Normal file
|
|
@ -0,0 +1,78 @@
|
|||
<script lang="typescript">
|
||||
import {gameManager} from "../../Phaser/Game/GameManager";
|
||||
import {SelectCompanionScene, SelectCompanionSceneName} from "../../Phaser/Login/SelectCompanionScene";
|
||||
import {menuIconVisiblilityStore, menuVisiblilityStore} from "../../Stores/MenuStore";
|
||||
import {selectCompanionSceneVisibleStore} from "../../Stores/SelectCompanionStore";
|
||||
import {LoginScene, LoginSceneName} from "../../Phaser/Login/LoginScene";
|
||||
import {loginSceneVisibleStore} from "../../Stores/LoginSceneStore";
|
||||
import {selectCharacterSceneVisibleStore} from "../../Stores/SelectCharacterStore";
|
||||
import {SelectCharacterScene, SelectCharacterSceneName} from "../../Phaser/Login/SelectCharacterScene";
|
||||
//import {connectionManager} from "../../Connexion/ConnectionManager";
|
||||
|
||||
|
||||
function disableMenuStores(){
|
||||
menuVisiblilityStore.set(false);
|
||||
menuIconVisiblilityStore.set(false);
|
||||
}
|
||||
|
||||
function openEditCompanionScene(){
|
||||
disableMenuStores();
|
||||
selectCompanionSceneVisibleStore.set(true);
|
||||
gameManager.leaveGame(SelectCompanionSceneName,new SelectCompanionScene());
|
||||
}
|
||||
|
||||
function openEditNameScene(){
|
||||
disableMenuStores();
|
||||
loginSceneVisibleStore.set(true);
|
||||
gameManager.leaveGame(LoginSceneName,new LoginScene());
|
||||
}
|
||||
|
||||
function openEditSkinScene(){
|
||||
disableMenuStores();
|
||||
selectCharacterSceneVisibleStore.set(true);
|
||||
gameManager.leaveGame(SelectCharacterSceneName,new SelectCharacterScene());
|
||||
}
|
||||
|
||||
//TODO: Uncomment when login will be completely developed
|
||||
/*function clickLogin() {
|
||||
connectionManager.loadOpenIDScreen();
|
||||
}*/
|
||||
|
||||
</script>
|
||||
|
||||
<div class="customize-main">
|
||||
<section>
|
||||
<button type="button" class="nes-btn" on:click|preventDefault={openEditNameScene}>Edit Name</button>
|
||||
</section>
|
||||
<section>
|
||||
<button type="button" class="nes-btn is-rounded" on:click|preventDefault={openEditSkinScene}>Edit Skin</button>
|
||||
</section>
|
||||
<section>
|
||||
<button type="button" class="nes-btn" on:click|preventDefault={openEditCompanionScene}>Edit Companion</button>
|
||||
</section>
|
||||
<!-- <section>
|
||||
<button type="button" class="nes-btn is-primary" on:click|preventDefault={clickLogin}>Login</button>
|
||||
</section>-->
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
div.customize-main{
|
||||
section {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
|
||||
button {
|
||||
height: 50px;
|
||||
width: 250px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 800px) {
|
||||
div.customize-main section button {
|
||||
width: 130px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
140
front/src/Components/Menu/SettingsSubMenu.svelte
Normal file
140
front/src/Components/Menu/SettingsSubMenu.svelte
Normal file
|
|
@ -0,0 +1,140 @@
|
|||
<script lang="typescript">
|
||||
import {localUserStore} from "../../Connexion/LocalUserStore";
|
||||
import {videoConstraintStore} from "../../Stores/MediaStore";
|
||||
import {HtmlUtils} from "../../WebRtc/HtmlUtils";
|
||||
import {isMobile} from "../../Enum/EnvironmentVariable";
|
||||
|
||||
let fullscreen : boolean = localUserStore.getFullscreen();
|
||||
let notification : boolean = localUserStore.getNotification() === 'granted';
|
||||
let valueGame : number = localUserStore.getGameQualityValue();
|
||||
let valueVideo : number = localUserStore.getVideoQualityValue();
|
||||
let previewValueGame = valueGame;
|
||||
let previewValueVideo = valueVideo;
|
||||
|
||||
function saveSetting(){
|
||||
if (valueGame !== previewValueGame) {
|
||||
previewValueGame = valueGame;
|
||||
localUserStore.setGameQualityValue(valueGame);
|
||||
window.location.reload();
|
||||
}
|
||||
|
||||
if (valueVideo !== previewValueVideo) {
|
||||
previewValueVideo = valueVideo;
|
||||
videoConstraintStore.setFrameRate(valueVideo);
|
||||
}
|
||||
}
|
||||
|
||||
function changeFullscreen() {
|
||||
const body = HtmlUtils.querySelectorOrFail('body');
|
||||
if (body) {
|
||||
if (document.fullscreenElement !== null && !fullscreen) {
|
||||
document.exitFullscreen()
|
||||
} else {
|
||||
body.requestFullscreen();
|
||||
}
|
||||
localUserStore.setFullscreen(fullscreen);
|
||||
}
|
||||
}
|
||||
|
||||
function changeNotification() {
|
||||
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;
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="settings-main" on:submit|preventDefault={saveSetting}>
|
||||
<section>
|
||||
<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>
|
||||
</select>
|
||||
</div>
|
||||
</section>
|
||||
<section>
|
||||
<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>
|
||||
</select>
|
||||
</div>
|
||||
</section>
|
||||
<section class="settings-section-save">
|
||||
<p>(Saving these settings will restart the game)</p>
|
||||
<button type="button" class="nes-btn is-primary" on:click|preventDefault={saveSetting}>Save</button>
|
||||
</section>
|
||||
<section class="settings-section-noSaveOption">
|
||||
<label>
|
||||
<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}>
|
||||
<span>Notifications</span>
|
||||
</label>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
div.settings-main {
|
||||
height: calc(100% - 40px);
|
||||
|
||||
section {
|
||||
width: 100%;
|
||||
padding: 20px 20px 0;
|
||||
margin-bottom: 20px;
|
||||
text-align: center;
|
||||
|
||||
div.nes-select select:focus {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
section.settings-section-save {
|
||||
text-align: center;
|
||||
p {
|
||||
margin: 16px 0;
|
||||
}
|
||||
}
|
||||
section.settings-section-noSaveOption {
|
||||
--nb-noSaveOptions: 2; //number of sub-element in the section
|
||||
display: grid;
|
||||
grid-template-columns: calc(100% / var(--nb-noSaveOptions)) calc(100% / var(--nb-noSaveOptions)); //Same size for every sub-element
|
||||
|
||||
label {
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 800px), only screen and (max-height: 800px) {
|
||||
div.settings-main {
|
||||
section {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
section.settings-section-noSaveOption {
|
||||
height: 80px;
|
||||
grid-template-columns: none;
|
||||
grid-template-rows: calc(100% / var(--nb-noSaveOptions)) calc(100% / var(--nb-noSaveOptions)); //Same size for every sub-element;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
<script lang="ts">
|
||||
import { consoleGlobalMessageManagerFocusStore, consoleGlobalMessageManagerVisibleStore } from "../../Stores/ConsoleGlobalMessageManagerStore";
|
||||
import {onDestroy, onMount} from "svelte";
|
||||
import type { GameManager } from "../../Phaser/Game/GameManager";
|
||||
import { menuInputFocusStore } from "../../Stores/MenuStore";
|
||||
import { onDestroy, onMount } from "svelte";
|
||||
import { gameManager } from "../../Phaser/Game/GameManager";
|
||||
import { AdminMessageEventTypes } from "../../Connexion/AdminMessagesService";
|
||||
import type { Quill } from "quill";
|
||||
import type { PlayGlobalMessageInterface } from "../../Connexion/ConnexionModels";
|
||||
|
|
@ -24,19 +24,15 @@
|
|||
[{'font': []}],
|
||||
[{'align': []}],
|
||||
|
||||
['clean'],
|
||||
['clean'], // remove formatting button
|
||||
|
||||
['link', 'image', 'video']
|
||||
// remove formatting button
|
||||
];
|
||||
|
||||
export let gameManager: GameManager;
|
||||
|
||||
const gameScene = gameManager.getCurrentGameScene();
|
||||
let quill: Quill;
|
||||
let INPUT_CONSOLE_MESSAGE: HTMLDivElement;
|
||||
|
||||
const MESSAGE_TYPE = AdminMessageEventTypes.admin;
|
||||
let quill: Quill;
|
||||
let QUILL_EDITOR: HTMLDivElement;
|
||||
|
||||
export const handleSending = {
|
||||
sendTextMessage(broadcastToWorld: boolean) {
|
||||
|
|
@ -53,39 +49,31 @@
|
|||
|
||||
quill.deleteText(0, quill.getLength());
|
||||
gameScene.connection?.emitGlobalMessage(textGlobalMessage);
|
||||
disableConsole();
|
||||
}
|
||||
}
|
||||
|
||||
//Quill
|
||||
onMount(async () => {
|
||||
|
||||
// Import quill
|
||||
const {default: Quill} = await import("quill"); // eslint-disable-line @typescript-eslint/no-explicit-any
|
||||
|
||||
quill = new Quill(INPUT_CONSOLE_MESSAGE, {
|
||||
quill = new Quill(QUILL_EDITOR, {
|
||||
placeholder: 'Enter your message here...',
|
||||
theme: 'snow',
|
||||
modules: {
|
||||
toolbar: toolbarOptions
|
||||
},
|
||||
});
|
||||
|
||||
consoleGlobalMessageManagerFocusStore.set(true);
|
||||
menuInputFocusStore.set(true);
|
||||
});
|
||||
|
||||
onDestroy(() => {
|
||||
consoleGlobalMessageManagerFocusStore.set(false);
|
||||
menuInputFocusStore.set(false);
|
||||
})
|
||||
|
||||
function disableConsole() {
|
||||
consoleGlobalMessageManagerVisibleStore.set(false);
|
||||
consoleGlobalMessageManagerFocusStore.set(false);
|
||||
}
|
||||
</script>
|
||||
|
||||
<section class="section-input-send-text">
|
||||
<div class="input-send-text" bind:this={INPUT_CONSOLE_MESSAGE}></div>
|
||||
<div class="input-send-text" bind:this={QUILL_EDITOR}></div>
|
||||
</section>
|
||||
|
||||
|
||||
44
front/src/Components/ReportMenu/BlockSubMenu.svelte
Normal file
44
front/src/Components/ReportMenu/BlockSubMenu.svelte
Normal file
|
|
@ -0,0 +1,44 @@
|
|||
<script lang="ts">
|
||||
import {blackListManager} from "../../WebRtc/BlackListManager";
|
||||
import {showReportScreenStore, userReportEmpty} from "../../Stores/ShowReportScreenStore";
|
||||
import {onMount} from "svelte";
|
||||
|
||||
export let userUUID: string | undefined;
|
||||
export let userName: string;
|
||||
let userIsBlocked = false;
|
||||
|
||||
onMount(() => {
|
||||
if (userUUID === undefined) {
|
||||
userIsBlocked = false;
|
||||
console.error("There is no user to block");
|
||||
} else {
|
||||
userIsBlocked = blackListManager.isBlackListed(userUUID);
|
||||
}
|
||||
})
|
||||
|
||||
function blockUser(): void {
|
||||
if (userUUID === undefined) {
|
||||
console.error("There is no user to block");
|
||||
return;
|
||||
}
|
||||
blackListManager.isBlackListed(userUUID)
|
||||
? blackListManager.cancelBlackList(userUUID)
|
||||
: blackListManager.blackList(userUUID);
|
||||
showReportScreenStore.set(userReportEmpty); //close the report menu
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="block-container">
|
||||
<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'}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
|
||||
<style lang="scss">
|
||||
div.block-container {
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
141
front/src/Components/ReportMenu/ReportMenu.svelte
Normal file
141
front/src/Components/ReportMenu/ReportMenu.svelte
Normal file
|
|
@ -0,0 +1,141 @@
|
|||
<script lang="ts">
|
||||
import {showReportScreenStore, userReportEmpty} from "../../Stores/ShowReportScreenStore";
|
||||
import BlockSubMenu from "./BlockSubMenu.svelte";
|
||||
import ReportSubMenu from "./ReportSubMenu.svelte";
|
||||
import {onDestroy, onMount} from "svelte";
|
||||
import type {Unsubscriber} from "svelte/store";
|
||||
import {playersStore} from "../../Stores/PlayersStore";
|
||||
import {connectionManager} from "../../Connexion/ConnectionManager";
|
||||
import {GameConnexionTypes} from "../../Url/UrlManager";
|
||||
import {get} from "svelte/store";
|
||||
|
||||
let blockActive = true;
|
||||
let reportActive = !blockActive;
|
||||
let anonymous: boolean = false;
|
||||
let userUUID: string | undefined = playersStore.getPlayerById(get(showReportScreenStore).userId)?.userUuid;
|
||||
let userName = "No name";
|
||||
let unsubscriber: Unsubscriber
|
||||
|
||||
onMount(() => {
|
||||
unsubscriber = showReportScreenStore.subscribe((reportScreenStore) => {
|
||||
if (reportScreenStore != null) {
|
||||
userName = reportScreenStore.userName;
|
||||
userUUID = playersStore.getPlayerById(reportScreenStore.userId)?.userUuid;
|
||||
if (userUUID === undefined) {
|
||||
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);
|
||||
}
|
||||
|
||||
function activateBlock() {
|
||||
blockActive = true;
|
||||
reportActive = false;
|
||||
}
|
||||
|
||||
function activateReport() {
|
||||
blockActive = false;
|
||||
reportActive = true;
|
||||
}
|
||||
|
||||
function onKeyDown(e:KeyboardEvent) {
|
||||
if (e.key === 'Escape') {
|
||||
close();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<svelte:window on:keydown={onKeyDown}/>
|
||||
|
||||
<div class="report-menu-main nes-container is-rounded">
|
||||
<section class="report-menu-title">
|
||||
<h2>Moderate {userName}</h2>
|
||||
<section class="justify-center">
|
||||
<button type="button" class="nes-btn" on:click|preventDefault={close}>X</button>
|
||||
</section>
|
||||
</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>
|
||||
</section>
|
||||
<section class="justify-center">
|
||||
<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}"/>
|
||||
{:else if reportActive}
|
||||
<ReportSubMenu userUUID="{userUUID}"/>
|
||||
{:else }
|
||||
<p>ERROR : There is no action selected.</p>
|
||||
{/if}
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
.nes-container {
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
section.justify-center {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
div.report-menu-main {
|
||||
font-family: "Press Start 2P";
|
||||
pointer-events: auto;
|
||||
background-color: #333333;
|
||||
color: whitesmoke;
|
||||
|
||||
position: relative;
|
||||
height: 70vh;
|
||||
width: 50vw;
|
||||
top: 10vh;
|
||||
margin: auto;
|
||||
|
||||
section.report-menu-title {
|
||||
display: grid;
|
||||
grid-template-columns: calc(100% - 45px) 40px;
|
||||
margin-bottom: 20px;
|
||||
|
||||
h2 {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
section.report-menu-action {
|
||||
display: grid;
|
||||
grid-template-columns: 50% 50%;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
section.report-menu-action.hidden {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 800px) {
|
||||
div.report-menu-main {
|
||||
top: 21vh;
|
||||
height: 60vh;
|
||||
width: 100vw;
|
||||
font-size: 0.5em;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
55
front/src/Components/ReportMenu/ReportSubMenu.svelte
Normal file
55
front/src/Components/ReportMenu/ReportSubMenu.svelte
Normal file
|
|
@ -0,0 +1,55 @@
|
|||
<script lang="ts">
|
||||
import {showReportScreenStore, userReportEmpty} from "../../Stores/ShowReportScreenStore";
|
||||
import {gameManager} from "../../Phaser/Game/GameManager";
|
||||
|
||||
export let userUUID: string | undefined;
|
||||
let reportMessage: string;
|
||||
let hiddenError = true;
|
||||
|
||||
function submitReport() {
|
||||
if (reportMessage === '') {
|
||||
hiddenError = true;
|
||||
} else {
|
||||
hiddenError = false;
|
||||
if( userUUID === undefined) {
|
||||
console.error('User UUID is not valid.');
|
||||
return;
|
||||
}
|
||||
gameManager.getCurrentGameScene().connection?.emitReportPlayerMessage(userUUID, reportMessage);
|
||||
showReportScreenStore.set(userReportEmpty)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="report-container-main">
|
||||
<h3>Report</h3>
|
||||
<p>Send a report message to the administrators of this room. They may later ban this user.</p>
|
||||
<form>
|
||||
<section>
|
||||
<label>
|
||||
<span>Your message: </span>
|
||||
<textarea type="text" class="nes-textarea" bind:value={reportMessage}></textarea>
|
||||
</label>
|
||||
<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>
|
||||
</section>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
div.report-container-main {
|
||||
text-align: center;
|
||||
|
||||
textarea {
|
||||
height: clamp(100px, 15vh, 300px);
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-height: 630px) {
|
||||
div.report-container-main textarea {
|
||||
height: 50px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
BIN
front/src/Components/images/logo-WA-min.png
Normal file
BIN
front/src/Components/images/logo-WA-min.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.1 KiB |
Loading…
Add table
Add a link
Reference in a new issue