lbehm/workadventure
1
0
Fork 0
Code Issues Pull requests Releases Activity

Second pass on css and reportMenu

Browse source
This commit is contained in:
GRL 2021-08-18 11:15:46 +02:00
parent 9e5cc3b9a7
commit 4c3097155b
11 changed files with 116 additions and 73 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -43,15 +43,29 @@
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">
<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>
<h2>Informations on the map</h2>
<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>
@ -91,6 +105,10 @@
}
}
section.is-mobile {
display: none;
}
h2, h3 {
width: 100%;
text-align: center;
@ -111,10 +129,16 @@
@media only screen and (max-height: 900px) {
div.about-room-main {
section.share-url input {
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);
}

23
front/src/Components/Menu/CreateMapSubMenu.svelte
View file

@ -1,21 +1,16 @@
<script lang="ts">
function goToCreateMapPage() {
//const sparkHost = 'https://'+window.location.host.replace('play.', '')+'/choose-map.html';
//TODO fix me: this button can to send us on WorkAdventure BO.
//const sparkHost = ADMIN_URL + "/getting-started";
function goToGettingStarted() {
//The redirection must be only on workadventu.re domain
//To day the domain staging cannot be use by customer
//TODO: go to getting started ? or map-building ? or two different buttons ?
const sparkHost = "https://workadventu.re/getting-started";
window.open(sparkHost, "_blank");
}
function goToScriptingApiPage() {
function goToBuildingMap() {
//The redirection must be only on workadventu.re domain
//The scripting API function could change on other domain and that could break map created with the old function
const sparkHost = "https://workadventu.re/map-building/scripting";
const sparkHost = "https://workadventu.re/map-building";
window.open(sparkHost, "_blank");
}
@ -24,19 +19,17 @@
<div class="create-map-main">
<section class="container-overflow">
<section>
<h3>Create your map</h3>
<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.
Or create your own map from scratch.
</p>
<button type="button" class="nes-btn is-primary" on:click={goToCreateMapPage}>Create a map</button>
<button type="button" class="nes-btn is-primary" on:click={goToGettingStarted}>Getting started</button>
</section>
<section>
<h3>Use the scripting API</h3>
<p>Make your map more interactive, more alive and totally unique with the scripting API.</p>
<p>(Programming skills are required to use the scripting API).</p>
<button type="button" class="nes-btn" on:click={goToScriptingApiPage}>Use a script</button>
<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>

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

@ -1,13 +0,0 @@
<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>

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

@ -62,7 +62,7 @@
<style lang="scss">
div.global-message-main {
height: calc(100% - 56px);
height: calc(100% - 50px);
display: grid;
grid-template-rows: 15% 65% 20%;
@ -102,4 +102,17 @@
}
}
}
@media only screen and (max-height: 900px) {
.global-message-content {
height: calc(100% - 5px);
}
.global-message-footer {
margin-bottom: 0;
label {
width: calc(100% - 10px);
}
}
}
</style>

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

@ -6,15 +6,14 @@
import AboutRoomSubMenu from "./AboutRoomSubMenu.svelte";
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";
import {sendMenuClickedEvent} from "../../Api/iframe/Ui/MenuItem";
let activeSubMenu: string = SubMenusInterface.settings;
let props: { menuCommand: string } = { menuCommand: SubMenusInterface.settings};
let activeComponent: typeof SettingsSubMenu | typeof CustomSubMenu = SettingsSubMenu;
let activeComponent: typeof SettingsSubMenu = SettingsSubMenu;
onMount(() => {
//TODO: Uncomment before final push to merge
@ -28,7 +27,6 @@
function switchMenu(menu: string) {
if (get(subMenusStore).find((subMenu) => subMenu === menu)) {
activeSubMenu = menu;
props = {menuCommand: menu};
switch (menu) {
case SubMenusInterface.settings:
activeComponent = SettingsSubMenu;
@ -49,7 +47,8 @@
activeComponent = ContactSubMenu;
break;
default:
activeComponent = CustomSubMenu;
sendMenuClickedEvent(menu);
menuVisiblilityStore.set(false);
break;
}
} else throw ("There is no menu called " + menu);
@ -81,7 +80,7 @@
</div>
<div class="menu-submenu-container nes-container is-rounded" transition:fly="{{ y: -1000, duration: 500 }}">
<h2>{activeSubMenu}</h2>
<svelte:component this={activeComponent} {...props}/>
<svelte:component this={activeComponent}/>
</div>
</div>
@ -97,7 +96,7 @@
pointer-events: auto;
height: 80vh;
width: 75vw;
top: 10vh;
top: clamp(55px, 10vh, 10vh);
position: relative;
margin: auto;
@ -129,8 +128,7 @@
@media only screen and (max-height: 900px) {
div.menu-container-main {
top: 5vh;
height: 85vh;
bottom: 55px;
width: 100vw;
font-size: 0.5em;
}

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

@ -33,9 +33,10 @@
gameManager.leaveGame(SelectCharacterSceneName,new SelectCharacterScene());
}
function clickLogin() {
//TODO: Uncomment when login will be completely developed
/*function clickLogin() {
connectionManager.loadOpenIDScreen();
}
}*/
</script>
@ -49,20 +50,18 @@
<section>
<button type="button" class="nes-btn" on:click|preventDefault={openEditCompanionScene}>Edit Companion</button>
</section>
<section>
<!-- <section>
<button type="button" class="nes-btn is-primary" on:click|preventDefault={clickLogin}>Login</button>
</section>
</section>-->
</div>
<style lang="scss">
div.customize-main{
display: grid;
grid-template-rows: 33% 33% 33%;
section {
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 20px;
button {
height: 50px;

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

@ -15,7 +15,7 @@ function saveSetting(){
if (valueGame !== previewValueGame) {
previewValueGame = valueGame;
localUserStore.setGameQualityValue(valueGame);
window.location.reload();// TODO edit that
window.location.reload();
}
if (valueVideo !== previewValueVideo) {
@ -55,21 +55,25 @@ function changeNotification() {
<div class="settings-main" on:submit|preventDefault={saveSetting}>
<section>
<h3>Game quality</h3>
<select class="nes-pointer" bind:value={valueGame}>
<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>
<select class="nes-pointer" bind:value={valueVideo}>
<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>
@ -98,12 +102,7 @@ function changeNotification() {
padding: 20px 20px 0;
text-align: center;
select {
border-radius: 16px;
padding: 10px;
margin: 5px;
}
select:focus {
div.nes-select select:focus {
outline: none;
}
}

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

@ -24,10 +24,9 @@
[{'font': []}],
[{'align': []}],
['clean'],
['clean'], // remove formatting button
['link', 'image', 'video']
// remove formatting button
];
const gameScene = gameManager.getCurrentGameScene();

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

@ -1,14 +1,17 @@
<script lang="ts">
import { showReportScreenStore } from "../../Stores/ShowReportScreenStore";
import {showReportScreenStore} 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";
let blockActive = true;
let reportActive = !blockActive;
let userUUID: string | undefined;
let anonymous: boolean;
let userUUID: string | undefined = '';
let userName = "No name";
let unsubscriber: Unsubscriber
@ -22,6 +25,7 @@
}
}
})
anonymous = connectionManager.getConnexionType === GameConnexionTypes.anonymous;
})
onDestroy(() => {
@ -53,7 +57,7 @@
<button type="button" class="nes-btn" on:click|preventDefault={close}>X</button>
</section>
</section>
<section class="report-menu-action">
<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>
@ -65,7 +69,7 @@
{#if blockActive}
<BlockSubMenu userUUID="{userUUID}"/>
{:else if reportActive}
<ReportSubMenu/>
<ReportSubMenu userUUID="{userUUID}"/>
{:else }
<p>ERROR : There is no action selected.</p>
{/if}
@ -92,21 +96,37 @@
position: relative;
height: 70vh;
width: 50vw;
top: 10vh;
top: clamp(55px, 10vh, 10vh);
margin: auto;
display: grid;
grid-template-rows: 10% 15% 75%;
section.report-menu-title {
display: grid;
grid-template-columns: 90% 10%;
text-align: center;
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-height: 900px) {
div.report-menu-main {
bottom: 55px;
width: 100vw;
font-size: 0.5em;
}
}
</style>

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

@ -1,7 +1,8 @@
<script lang="ts">
import {showReportScreenStore} from "../../Stores/ShowReportScreenStore";
import {gameManager} from "../../Phaser/Game/GameManager";
//export let userUUID: string;
export let userUUID: string;
let reportMessage: string;
let hiddenError = true;
@ -10,8 +11,8 @@
hiddenError = true;
} else {
hiddenError = false;
//gameManager.getCurrentGameScene().connection?.emitReportPlayerMessage(userUUID, reportMessage); //TODO: Use when merge with MenuSvelte
showReportScreenStore.set(null) //close the report menu
gameManager.getCurrentGameScene().connection?.emitReportPlayerMessage(userUUID, reportMessage);
showReportScreenStore.set(null)
}
}
</script>
@ -38,7 +39,7 @@
text-align: center;
textarea {
height: 200px;
height: clamp(100px, 20vh, 20vh);
}
}
</style>

10
front/style/TextGlobalMessageSvelte-Style.scss
View file

@ -29,3 +29,13 @@ section.section-input-send-text {
}
}
}
@media only screen and (max-height: 900px) {
section.section-input-send-text {
--height-toolbar: 30%;
.ql-toolbar {
overflow: auto;
}
}
}