Migration of registerCustomMenu for Menu in Svelte
Refactor subMenuStore Suppression of old MenuScene and ReportMenu
This commit is contained in:
GRL
parent
9c1926f636
commit
8105e966ff
18 changed files with 137 additions and 617 deletions
|
|
@ -52,7 +52,7 @@
|
|||
<button type="button" class="nes-btn is-primary" on:click={copyLink}>Copy</button>
|
||||
</section>
|
||||
<section class="presentation-map">
|
||||
<p>This room use this map : </p>
|
||||
<p>This room use the following map : </p>
|
||||
<h3>{mapName}</h3>
|
||||
<p class="string-HTML">{mapDescription}</p>
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -22,37 +22,37 @@
|
|||
The WorkAdventure team has its own offices in ... WorkAdventure!
|
||||
Do not hesitate to come see and talk to us.
|
||||
</p>
|
||||
<a href="https://play.staging.workadventu.re/@tcm/workadventure/wa-village" target="_blank">Visit us</a>
|
||||
<a class="nes-pointer" href="https://play.staging.workadventu.re/@tcm/workadventure/wa-village" target="_blank">Visit us</a>
|
||||
</section>
|
||||
<section>
|
||||
<h3>Our Mail</h3>
|
||||
<p>Although we offer a solution to reduce their use, we have an email address that allows us to receive all your requests.</p>
|
||||
<a href="mailto:hello@workadventu.re" target="_blank">hello@workadventu.re</a>
|
||||
<a class="nes-pointer" href="mailto:hello@workadventu.re" target="_blank">hello@workadventu.re</a>
|
||||
</section>
|
||||
<section>
|
||||
<h3>Our web site</h3>
|
||||
<p>If you want to know more about us, follow the link to our web site.</p>
|
||||
<a href="https://workadventu.re/about-us" target="_blank">About us</a>
|
||||
<a class="nes-pointer" href="https://workadventu.re/about-us" target="_blank">About us</a>
|
||||
</section>
|
||||
<section>
|
||||
<h3>Our social media</h3>
|
||||
<a href="https://discord.gg/YGtngdh9gt" target="_blank">
|
||||
<img src="{discordImg}" alt="{'Discord'}">
|
||||
<img class="nes-pointer" src="{discordImg}" alt="{'Discord'}">
|
||||
</a>
|
||||
<a href="https://www.facebook.com/workadventure.WA" target="_blank">
|
||||
<img src="{facebookImg}" alt="{'Facebook'}">
|
||||
<img class="nes-pointer" src="{facebookImg}" alt="{'Facebook'}">
|
||||
</a>
|
||||
<a href="https://www.instagram.com/workadventure_/" target="_blank">
|
||||
<img src="{instagramImg}" alt="{'Instagram'}">
|
||||
<img class="nes-pointer" src="{instagramImg}" alt="{'Instagram'}">
|
||||
</a>
|
||||
<a href="https://www.linkedin.com/company/workadventure-by-tcm/" target="_blank">
|
||||
<img src="{linkedinImg}" alt="{'LinkedIn'}">
|
||||
<img class="nes-pointer" src="{linkedinImg}" alt="{'LinkedIn'}">
|
||||
</a>
|
||||
<a href="https://twitter.com/Workadventure_" target="_blank">
|
||||
<img src="{twitterImg}" alt="{'Twitter'}">
|
||||
<img class="nes-pointer" src="{twitterImg}" alt="{'Twitter'}">
|
||||
</a>
|
||||
<a href="https://www.youtube.com/channel/UCXJ9igV-kb9gw1ftR33y5tA" target="_blank">
|
||||
<img src="{youtubeImg}" alt="{'Youtube'}">
|
||||
<img class="nes-pointer" src="{youtubeImg}" alt="{'Youtube'}">
|
||||
</a>
|
||||
</section>
|
||||
</div>
|
||||
|
|
|
|||
13
front/src/Components/Menu/CustomSubMenu.svelte
Normal file
13
front/src/Components/Menu/CustomSubMenu.svelte
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
<script lang="ts">
|
||||
import {sendMenuClickedEvent} from "../../Api/iframe/Ui/MenuItem";
|
||||
|
||||
export let menuCommand: string;
|
||||
|
||||
function menuItemClicked() {
|
||||
sendMenuClickedEvent(menuCommand);
|
||||
}
|
||||
</script>
|
||||
|
||||
<div>
|
||||
<button type="button" class="nes-btn is-primary" on:click|preventDefault={menuItemClicked}>{menuCommand}</button>
|
||||
</div>
|
||||
|
|
@ -1,32 +1,57 @@
|
|||
<script lang="typescript">
|
||||
import {fly} from "svelte/transition";
|
||||
import type { SvelteComponent } from "svelte";
|
||||
import SettingsSubMenu from "./SettingsSubMenu.svelte";
|
||||
import CreateMapSubMenu from "./CreateMapSubMenu.svelte";
|
||||
import ProfileSubMenu from "./ProfileSubMenu.svelte";
|
||||
import ContactSubMenu from "./ContactSubMenu.svelte";
|
||||
import CreateMapSubMenu from "./CreateMapSubMenu.svelte";
|
||||
import AboutRoomSubMenu from "./AboutRoomSubMenu.svelte";
|
||||
import GlobalMessagesSubMenu from "./GlobalMessagesSubMenu.svelte";
|
||||
import {menuVisiblilityStore} from "../../Stores/MenuStore";
|
||||
import GlobalMessageSubMenu from "./GlobalMessagesSubMenu.svelte";
|
||||
import ContactSubMenu from "./ContactSubMenu.svelte";
|
||||
import CustomSubMenu from "./CustomSubMenu.svelte";
|
||||
import {menuVisiblilityStore, SubMenusInterface, subMenusStore} from "../../Stores/MenuStore";
|
||||
import {userIsAdminStore} from "../../Stores/GameStore";
|
||||
import {onMount} from "svelte";
|
||||
import {get} from "svelte/store";
|
||||
|
||||
//TODO: When we register a new custom menu we need to add it here
|
||||
const SubMenus = new Map<string, typeof SvelteComponent>([
|
||||
['Settings', SettingsSubMenu],
|
||||
['Profile', ProfileSubMenu],
|
||||
['Create a Map', CreateMapSubMenu],
|
||||
['About the room', AboutRoomSubMenu],
|
||||
['Global Messages', GlobalMessagesSubMenu], //Remove if player has not the admin tag
|
||||
['Contact', ContactSubMenu] //Always last (except custom)
|
||||
]);
|
||||
let activeSubMenu: string = SubMenusInterface.settings;
|
||||
let props: { menuCommand: string } = { menuCommand: SubMenusInterface.settings};
|
||||
let activeComponent: typeof SettingsSubMenu | typeof CustomSubMenu = SettingsSubMenu;
|
||||
|
||||
let activeSubMenu = 'Settings';
|
||||
let activeComponent = SubMenus.get(activeSubMenu);
|
||||
onMount(() => {
|
||||
if(!get(userIsAdminStore)) {
|
||||
subMenusStore.removeMenu(SubMenusInterface.globalMessages);
|
||||
}
|
||||
|
||||
switchMenu(SubMenusInterface.settings);
|
||||
})
|
||||
|
||||
function switchMenu(menu: string) {
|
||||
if (SubMenus.has(menu)) {
|
||||
activeSubMenu = menu
|
||||
activeComponent = SubMenus.get(activeSubMenu);
|
||||
}
|
||||
if (get(subMenusStore).find((subMenu) => subMenu === menu)) {
|
||||
activeSubMenu = menu;
|
||||
props = {menuCommand: 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:
|
||||
activeComponent = CustomSubMenu;
|
||||
break;
|
||||
}
|
||||
} else throw ("There is no menu called " + menu);
|
||||
}
|
||||
|
||||
function closeMenu() {
|
||||
|
|
@ -46,16 +71,16 @@
|
|||
<div class="menu-nav-sidebar nes-container is-rounded" transition:fly="{{ x: -1000, duration: 500 }}">
|
||||
<h2>Menu</h2>
|
||||
<nav>
|
||||
{#each [...SubMenus] as [submenuKey, submenuComponent]}
|
||||
<button type="button" class="nes-btn {activeComponent === submenuComponent ? 'is-disabled' : ''}" on:click|preventDefault={() => switchMenu(submenuKey)}>{submenuKey}</button>
|
||||
{#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>
|
||||
{#if activeComponent}
|
||||
<svelte:component this="{activeComponent}"/>
|
||||
{/if}
|
||||
<svelte:component this={activeComponent} {...props}/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -65,7 +90,7 @@
|
|||
}
|
||||
|
||||
div.menu-container-main {
|
||||
--size-first-columns-grid: 15%; //TODO: clamp value
|
||||
--size-first-columns-grid: 15%;
|
||||
|
||||
font-family: "Press Start 2P";
|
||||
pointer-events: auto;
|
||||
|
|
|
|||
|
|
@ -2,13 +2,21 @@
|
|||
import {menuVisiblilityStore} from "../../Stores/MenuStore";
|
||||
import {get} from "svelte/store";
|
||||
|
||||
function openMenu(){
|
||||
function showMenu(){
|
||||
menuVisiblilityStore.set(!get(menuVisiblilityStore))
|
||||
}
|
||||
|
||||
function onKeyDown(e: KeyboardEvent) {
|
||||
if (e.key === "Tab") {
|
||||
showMenu();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<svelte:window on:keydown={onKeyDown}/>
|
||||
|
||||
<main class="menuIcon">
|
||||
<img src="/static/images/logo-WA-min.png" alt="open menu" on:click|preventDefault={openMenu}>
|
||||
<img src="/static/images/logo-WA-min.png" alt="open menu" class="nes-pointer" on:click|preventDefault={showMenu}>
|
||||
</main>
|
||||
|
||||
<style lang="scss">
|
||||
|
|
@ -18,7 +26,6 @@
|
|||
img {
|
||||
width: 60px;
|
||||
padding-top: 0;
|
||||
//cursor: url('/resources/logos/cursor_pointer.png'), pointer;
|
||||
}
|
||||
}
|
||||
@media only screen and (max-height: 700px) {
|
||||
|
|
|
|||
|
|
@ -54,7 +54,7 @@ function changeNotification() {
|
|||
<div class="settings-main" on:submit|preventDefault={saveSetting}>
|
||||
<section>
|
||||
<h3>Game quality</h3>
|
||||
<select bind:value={valueGame}>
|
||||
<select class="nes-pointer" bind:value={valueGame}>
|
||||
<option value="{120}">High video quality (120 fps)</option>
|
||||
<option value="{60}">Medium video quality (60 fps, recommended)</option>
|
||||
<option value="{40}">Minimum video quality (40 fps)</option>
|
||||
|
|
@ -63,7 +63,7 @@ function changeNotification() {
|
|||
</section>
|
||||
<section>
|
||||
<h3>Video quality</h3>
|
||||
<select bind:value={valueVideo}>
|
||||
<select class="nes-pointer" bind:value={valueVideo}>
|
||||
<option value="{30}">High video quality (30 fps)</option>
|
||||
<option value="{20}">Medium video quality (20 fps, recommended)</option>
|
||||
<option value="{10}">Minimum video quality (10 fps)</option>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue