WIP: svelte menu
This commit is contained in:
kharhamel
parent
41a1f56bd5
commit
fecbc8a018
18 changed files with 623 additions and 198 deletions
73
front/src/Components/Menu/EditProfileMenu.svelte
Normal file
73
front/src/Components/Menu/EditProfileMenu.svelte
Normal file
|
|
@ -0,0 +1,73 @@
|
|||
<script lang="typescript">
|
||||
|
||||
import {gameManager} from "../../Phaser/Game/GameManager";
|
||||
import {SelectCompanionScene, SelectCompanionSceneName} from "../../Phaser/Login/SelectCompanionScene";
|
||||
import {menuIconVisible, menuVisible} 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";
|
||||
|
||||
enum EditState {
|
||||
name = 1,
|
||||
skin,
|
||||
companion,
|
||||
}
|
||||
|
||||
let currentEditState: EditState = 2;
|
||||
|
||||
|
||||
function disableMenuStores(){
|
||||
menuVisible.set(false);
|
||||
menuIconVisible.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());
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<form class="EditProfile">
|
||||
<section>
|
||||
<h5>Edit your profile</h5>
|
||||
</section>
|
||||
<section>
|
||||
<button type="submit" class="EditName" on:click|preventDefault={openEditNameScene}>Edit Name</button>
|
||||
</section>
|
||||
<section class="action">
|
||||
<button type="submit" class="EditSkin" on:click|preventDefault={openEditSkinScene}>Edit Skin</button>
|
||||
</section>
|
||||
<section>
|
||||
<button class="EditCompanion" on:click|preventDefault={openEditCompanionScene} >Edit Companion</button>
|
||||
</section>
|
||||
</form>
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
.EditProfile {
|
||||
color: black;
|
||||
background: #eceeee;
|
||||
border: 1px solid #42464b;
|
||||
border-radius: 6px;
|
||||
margin: 20px auto 0;
|
||||
width: 50vw;
|
||||
max-width: 300px;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
121
front/src/Components/Menu/GameQualityMenu.svelte
Normal file
121
front/src/Components/Menu/GameQualityMenu.svelte
Normal file
|
|
@ -0,0 +1,121 @@
|
|||
<script lang="typescript">
|
||||
|
||||
import {localUserStore} from "../../Connexion/LocalUserStore";
|
||||
import {videoConstraintStore} from "../../Stores/MediaStore";
|
||||
|
||||
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();// TODO edit that
|
||||
}
|
||||
|
||||
if (valueVideo !== previewValueVideo) {
|
||||
previewValueVideo = valueVideo;
|
||||
videoConstraintStore.setFrameRate(valueVideo);
|
||||
}
|
||||
}
|
||||
|
||||
function toggleFullscreen() {
|
||||
const body = document.querySelector('body')
|
||||
if (body) {
|
||||
if (document.fullscreenElement ?? document.fullscreen) {
|
||||
document.exitFullscreen()
|
||||
} else {
|
||||
body.requestFullscreen();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<form class="gameQuality" on:submit|preventDefault={saveSetting}>
|
||||
<section>
|
||||
<h5>Game quality</h5>
|
||||
<p class="cautiousText">(Editing these settings will restart the game)</p>
|
||||
<select bind:value={valueGame} class="select-game-quality">
|
||||
<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>
|
||||
<option value="20">Small video quality (20 fps)</option>
|
||||
</select>
|
||||
</section>
|
||||
<section>
|
||||
<h5>Video quality</h5>
|
||||
<select bind:value={valueVideo} class="select-video-quality">
|
||||
<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>
|
||||
<option value="5">Small video quality (5 fps)</option>
|
||||
</select>
|
||||
</section>
|
||||
<section class="action">
|
||||
<button type="submit" class="gameQualityFormSubmit">Save</button>
|
||||
</section>
|
||||
<section>
|
||||
<button class="toggleFullscreen" on:click|preventDefault={toggleFullscreen}>Toggle fullscreen</button>
|
||||
</section>
|
||||
</form>
|
||||
|
||||
<style lang="scss">
|
||||
.gameQuality {
|
||||
color: black;
|
||||
background: #eceeee;
|
||||
border: 1px solid #42464b;
|
||||
border-radius: 6px;
|
||||
margin: 20px auto 0;
|
||||
width: 50vw;
|
||||
max-width: 300px;
|
||||
}
|
||||
.gameQuality .cautiousText {
|
||||
font-size: 50%;
|
||||
}
|
||||
.gameQuality h1 {
|
||||
background-image: linear-gradient(top, #f1f3f3, #d4dae0);
|
||||
border-bottom: 1px solid #a6abaf;
|
||||
border-radius: 6px 6px 0 0;
|
||||
box-sizing: border-box;
|
||||
color: #727678;
|
||||
display: block;
|
||||
height: 43px;
|
||||
padding-top: 10px;
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
text-shadow: 0 -1px 0 rgba(0,0,0,0.2), 0 1px 0 #fff;
|
||||
}
|
||||
.gameQuality select {
|
||||
font-size: 70%;
|
||||
background: linear-gradient(top, #d6d7d7, #dee0e0);
|
||||
border: 1px solid #a1a3a3;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 1px #fff;
|
||||
box-sizing: border-box;
|
||||
color: #696969;
|
||||
height: 30px;
|
||||
transition: box-shadow 0.3s;
|
||||
width: 100%;
|
||||
}
|
||||
.gameQuality section {
|
||||
margin: 10px;
|
||||
}
|
||||
.gameQuality section.action{
|
||||
text-align: center;
|
||||
}
|
||||
.gameQuality button {
|
||||
margin: 10px;
|
||||
background-color: black;
|
||||
color: white;
|
||||
border-radius: 7px;
|
||||
padding-bottom: 4px;
|
||||
}
|
||||
.gameQuality button.gameQualityFormCancel {
|
||||
background-color: #c7c7c700;
|
||||
color: #292929;
|
||||
}
|
||||
</style>
|
||||
73
front/src/Components/Menu/Menu.svelte
Normal file
73
front/src/Components/Menu/Menu.svelte
Normal file
|
|
@ -0,0 +1,73 @@
|
|||
<script lang="typescript">
|
||||
import GameQualityMenu from "./GameQualityMenu.svelte";
|
||||
import EditProfileMenu from "./EditProfileMenu.svelte";
|
||||
|
||||
enum SubMenus {
|
||||
gameQuality = 1,
|
||||
editProfile,
|
||||
shareUrl,
|
||||
}
|
||||
|
||||
let activeSubMenu: SubMenus = 2;
|
||||
|
||||
function switchMenu(menu: SubMenus) {
|
||||
activeSubMenu = menu;
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<aside class="menuContainer">
|
||||
<section class="menuNav">
|
||||
<nav>
|
||||
<ul>
|
||||
<li class:active={activeSubMenu === SubMenus.gameQuality } on:click={switchMenu(SubMenus.gameQuality)}>GameQuality</li>
|
||||
<li class:active={activeSubMenu === SubMenus.editProfile } on:click={switchMenu(SubMenus.editProfile)}>Edit Profile</li>
|
||||
<li class:active={activeSubMenu === 3 } on:click={switchMenu(3)}>Share Url </li>
|
||||
<li class:active={activeSubMenu === 3 } on:click={switchMenu(3)}>Create Map</li>
|
||||
<li class:active={activeSubMenu === 3 } on:click={switchMenu(3)}>Go to Menu</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</section>
|
||||
|
||||
<section class="subMenuContainer">
|
||||
{#if activeSubMenu === SubMenus.gameQuality}
|
||||
<GameQualityMenu></GameQualityMenu>
|
||||
{:else if activeSubMenu === SubMenus.editProfile}
|
||||
<EditProfileMenu></EditProfileMenu>
|
||||
{/if}
|
||||
</section>
|
||||
|
||||
</aside>
|
||||
|
||||
<style lang="scss">
|
||||
aside.menuContainer{
|
||||
pointer-events: auto;
|
||||
background: #7a7a7a;
|
||||
position: absolute;
|
||||
width: 30vw;
|
||||
height: 70vh;
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
padding:5px;
|
||||
color: white;
|
||||
|
||||
}
|
||||
|
||||
section.menuNav{
|
||||
width:30%;
|
||||
border-right:white solid 4px;
|
||||
nav{
|
||||
ul{
|
||||
padding: 10px;
|
||||
list-style: none;
|
||||
li{
|
||||
cursor: pointer;
|
||||
}
|
||||
li.active{
|
||||
background: #6f6f6f ;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -1,33 +1,41 @@
|
|||
<script lang="typescript">
|
||||
import { Game } from "../../Phaser/Game/Game";
|
||||
import {menuVisible} from "../../Stores/MenuStore";
|
||||
|
||||
export let game: Game;
|
||||
let isOpen : Boolean = false;
|
||||
|
||||
function openMenu(){
|
||||
isOpen = !isOpen; //Devrait être dans le store/menuVisible.set(isOPen);/
|
||||
if(isOpen) menuVisible.set(true);
|
||||
else menuVisible.set(false);
|
||||
}
|
||||
</script>
|
||||
|
||||
<main class="menuIcon">
|
||||
<section>
|
||||
<button>
|
||||
<img src="/static/images/menu.svg" alt="Open menu">
|
||||
<button on:click|preventDefault={openMenu}>
|
||||
<img src="/static/images/logo-WA-min.png">
|
||||
</button>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<style lang="scss">
|
||||
.menuIcon button {
|
||||
background-color: black;
|
||||
color: white;
|
||||
border-radius: 7px;
|
||||
padding: 2px 8px;
|
||||
pointer-events: auto;
|
||||
border-radius: 200px;
|
||||
img {
|
||||
width: 14px;
|
||||
width: 60px;
|
||||
padding-top: 0;
|
||||
/*cursor: url('/resources/logos/cursor_pointer.png'), pointer;*/
|
||||
cursor: url('/resources/logos/cursor_pointer.png'), pointer;
|
||||
}
|
||||
}
|
||||
.menuIcon section {
|
||||
margin: 10px;
|
||||
margin: 25px;
|
||||
}
|
||||
@media only screen and (max-height: 700px) {
|
||||
.menuIcon section {
|
||||
margin: 2px;
|
||||
margin: 100px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue