Kraut.World/server
3
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

WIP: svelte menu

Browse source
This commit is contained in:
kharhamel 2021-07-12 17:39:16 +02:00
parent 41a1f56bd5
commit fecbc8a018
18 changed files with 623 additions and 198 deletions
Download patch file Download diff file Expand all files Collapse all files

BIN
front/dist/static/images/logo-WA-min.png vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 2.1 KiB

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

@ -1,4 +1,6 @@
<script lang="typescript"> <script lang="typescript">
import MenuIcon from "./Menu/MenuIcon.svelte";
import {menuIconVisible, menuVisible} from "../Stores/MenuStore";
import {enableCameraSceneVisibilityStore} from "../Stores/MediaStore"; import {enableCameraSceneVisibilityStore} from "../Stores/MediaStore";
import CameraControls from "./CameraControls.svelte"; import CameraControls from "./CameraControls.svelte";
import MyCamera from "./MyCamera.svelte"; import MyCamera from "./MyCamera.svelte";
@ -23,6 +25,7 @@
import AudioPlaying from "./UI/AudioPlaying.svelte"; import AudioPlaying from "./UI/AudioPlaying.svelte";
import {soundPlayingStore} from "../Stores/SoundPlayingStore"; import {soundPlayingStore} from "../Stores/SoundPlayingStore";
import ErrorDialog from "./UI/ErrorDialog.svelte"; import ErrorDialog from "./UI/ErrorDialog.svelte";
import Menu from "./Menu/Menu.svelte";
import VideoOverlay from "./Video/VideoOverlay.svelte"; import VideoOverlay from "./Video/VideoOverlay.svelte";
import {gameOverlayVisibilityStore} from "../Stores/GameOverlayStoreVisibility"; import {gameOverlayVisibilityStore} from "../Stores/GameOverlayStoreVisibility";
import {consoleGlobalMessageManagerVisibleStore} from "../Stores/ConsoleGlobalMessageManagerStore"; import {consoleGlobalMessageManagerVisibleStore} from "../Stores/ConsoleGlobalMessageManagerStore";
@ -63,6 +66,19 @@
<AudioPlaying url={$soundPlayingStore} /> <AudioPlaying url={$soundPlayingStore} />
</div> </div>
{/if} {/if}
{#if $menuIconVisible}
<div>
<MenuIcon game ={game}></MenuIcon>
</div>
{/if}
{#if $menuVisible}
<div>
<Menu></Menu>
</div>
{/if}
{#if $gameOverlayVisibilityStore} {#if $gameOverlayVisibilityStore}
<div> <div>
<VideoOverlay></VideoOverlay> <VideoOverlay></VideoOverlay>

73
front/src/Components/Menu/EditProfileMenu.svelte Normal file
View 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
View 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
View 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>

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

@ -1,33 +1,41 @@
<script lang="typescript"> <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> </script>
<main class="menuIcon"> <main class="menuIcon">
<section> <section>
<button> <button on:click|preventDefault={openMenu}>
<img src="/static/images/menu.svg" alt="Open menu"> <img src="/static/images/logo-WA-min.png">
</button> </button>
</section> </section>
</main> </main>
<style lang="scss"> <style lang="scss">
.menuIcon button { .menuIcon button {
background-color: black; pointer-events: auto;
color: white; border-radius: 200px;
border-radius: 7px;
padding: 2px 8px;
img { img {
width: 14px; width: 60px;
padding-top: 0; padding-top: 0;
/*cursor: url('/resources/logos/cursor_pointer.png'), pointer;*/ cursor: url('/resources/logos/cursor_pointer.png'), pointer;
} }
} }
.menuIcon section { .menuIcon section {
margin: 10px; margin: 25px;
} }
@media only screen and (max-height: 700px) { @media only screen and (max-height: 700px) {
.menuIcon section { .menuIcon section {
margin: 2px; margin: 100px;
} }
} }
</style> </style>

52
front/src/Phaser/Components/Loader.ts
View file

@ -1,48 +1,63 @@
import ImageFrameConfig = Phaser.Types.Loader.FileTypes.ImageFrameConfig; import ImageFrameConfig = Phaser.Types.Loader.FileTypes.ImageFrameConfig;
import { DirtyScene } from "../Game/DirtyScene";
const LogoNameIndex: string = 'logoLoading'; const LogoNameIndex: string = "logoLoading";
const TextName: string = 'Loading...'; const TextName: string = "Loading...";
const LogoResource: string = 'resources/logos/logo.png'; const LogoResource: string = "resources/logos/logo.png";
const LogoFrame: ImageFrameConfig = {frameWidth: 307, frameHeight: 59}; const LogoFrame: ImageFrameConfig = { frameWidth: 307, frameHeight: 59 };
export const addLoader = (scene: Phaser.Scene): void => { export const addLoader = (scene: Phaser.Scene): void => {
// If there is nothing to load, do not display the loader. // If there is nothing to load, do not display the loader.
if (scene.load.list.entries.length === 0) { if (scene.load.list.entries.length === 0) {
return; return;
} }
let loadingText: Phaser.GameObjects.Text|null = null; let loadingText: Phaser.GameObjects.Text | null = null;
const loadingBarWidth: number = Math.floor(scene.game.renderer.width / 3); const loadingBarWidth: number = Math.floor(scene.game.renderer.width / 3);
const loadingBarHeight: number = 16; const loadingBarHeight: number = 16;
const padding: number = 5; const padding: number = 5;
const promiseLoadLogoTexture = new Promise<Phaser.GameObjects.Image>((res) => { const promiseLoadLogoTexture = new Promise<Phaser.GameObjects.Image>((res) => {
if(scene.load.textureManager.exists(LogoNameIndex)){ if (scene.load.textureManager.exists(LogoNameIndex)) {
return res(scene.add.image(scene.game.renderer.width / 2, scene.game.renderer.height / 2 - 150, LogoNameIndex)); return res(
}else{ scene.add.image(scene.game.renderer.width / 2, scene.game.renderer.height / 2 - 150, LogoNameIndex)
);
} else {
//add loading if logo image is not ready //add loading if logo image is not ready
loadingText = scene.add.text(scene.game.renderer.width / 2, scene.game.renderer.height / 2 - 50, TextName); loadingText = scene.add.text(scene.game.renderer.width / 2, scene.game.renderer.height / 2 - 50, TextName);
} }
scene.load.spritesheet(LogoNameIndex, LogoResource, LogoFrame); scene.load.spritesheet(LogoNameIndex, LogoResource, LogoFrame);
scene.load.once(`filecomplete-spritesheet-${LogoNameIndex}`, () => { scene.load.once(`filecomplete-spritesheet-${LogoNameIndex}`, () => {
if(loadingText){ if (loadingText) {
loadingText.destroy(); loadingText.destroy();
} }
return res(scene.add.image(scene.game.renderer.width / 2, scene.game.renderer.height / 2 - 150, LogoNameIndex)); return res(
scene.add.image(scene.game.renderer.width / 2, scene.game.renderer.height / 2 - 150, LogoNameIndex)
);
}); });
}); });
const progressContainer = scene.add.graphics(); const progressContainer = scene.add.graphics();
const progress = scene.add.graphics(); const progress = scene.add.graphics();
progressContainer.fillStyle(0x444444, 0.8); progressContainer.fillStyle(0x444444, 0.8);
progressContainer.fillRect((scene.game.renderer.width - loadingBarWidth) / 2 - padding, scene.game.renderer.height / 2 + 50 - padding, loadingBarWidth + padding * 2, loadingBarHeight + padding * 2); progressContainer.fillRect(
(scene.game.renderer.width - loadingBarWidth) / 2 - padding,
scene.game.renderer.height / 2 + 50 - padding,
loadingBarWidth + padding * 2,
loadingBarHeight + padding * 2
);
scene.load.on('progress', (value: number) => { scene.load.on("progress", (value: number) => {
progress.clear(); progress.clear();
progress.fillStyle(0xBBBBBB, 1); progress.fillStyle(0xbbbbbb, 1);
progress.fillRect((scene.game.renderer.width - loadingBarWidth) / 2, scene.game.renderer.height / 2 + 50, loadingBarWidth * value, loadingBarHeight); progress.fillRect(
(scene.game.renderer.width - loadingBarWidth) / 2,
scene.game.renderer.height / 2 + 50,
loadingBarWidth * value,
loadingBarHeight
);
}); });
scene.load.on('complete', () => { scene.load.on("complete", () => {
if(loadingText){ if (loadingText) {
loadingText.destroy(); loadingText.destroy();
} }
promiseLoadLogoTexture.then((resLoadingImage: Phaser.GameObjects.Image) => { promiseLoadLogoTexture.then((resLoadingImage: Phaser.GameObjects.Image) => {
@ -50,5 +65,8 @@ export const addLoader = (scene: Phaser.Scene): void => {
}); });
progress.destroy(); progress.destroy();
progressContainer.destroy(); progressContainer.destroy();
if (scene instanceof DirtyScene) {
scene.markDirty();
}
}); });
} };

2
front/src/Phaser/Game/GameManager.ts
View file

@ -9,6 +9,7 @@ import { localUserStore } from "../../Connexion/LocalUserStore";
import { get } from "svelte/store"; import { get } from "svelte/store";
import { requestedCameraState, requestedMicrophoneState } from "../../Stores/MediaStore"; import { requestedCameraState, requestedMicrophoneState } from "../../Stores/MediaStore";
import { helpCameraSettingsVisibleStore } from "../../Stores/HelpCameraSettingsStore"; import { helpCameraSettingsVisibleStore } from "../../Stores/HelpCameraSettingsStore";
import { menuIconVisible } from "../../Stores/MenuStore";
/** /**
* This class should be responsible for any scene starting/stopping * This class should be responsible for any scene starting/stopping
@ -97,6 +98,7 @@ export class GameManager {
this.currentGameSceneName = scene.scene.key; this.currentGameSceneName = scene.scene.key;
const menuScene: MenuScene = scene.scene.get(MenuSceneName) as MenuScene; const menuScene: MenuScene = scene.scene.get(MenuSceneName) as MenuScene;
menuScene.revealMenuIcon(); menuScene.revealMenuIcon();
menuIconVisible.set(true);
} }
/** /**

2
front/src/Phaser/Login/CustomizeScene.ts
View file

@ -281,7 +281,7 @@ export class CustomizeScene extends AbstractCharacterScene {
this.scene.sleep(CustomizeSceneName); this.scene.sleep(CustomizeSceneName);
waScaleManager.restoreZoom(); waScaleManager.restoreZoom();
this.events.removeListener("wake"); this.events.removeListener("wake");
gameManager.tryResumingGame(this, EnableCameraSceneName); gameManager.tryResumingGame(EnableCameraSceneName);
customCharacterSceneVisibleStore.set(false); customCharacterSceneVisibleStore.set(false);
} }

37
front/src/Phaser/Login/EnableCameraScene.ts
View file

@ -1,50 +1,43 @@
import {gameManager} from "../Game/GameManager"; import { gameManager } from "../Game/GameManager";
import {TextField} from "../Components/TextField"; import { TextField } from "../Components/TextField";
import Image = Phaser.GameObjects.Image; import Image = Phaser.GameObjects.Image;
import {mediaManager} from "../../WebRtc/MediaManager"; import { mediaManager } from "../../WebRtc/MediaManager";
import {SoundMeter} from "../Components/SoundMeter"; import { SoundMeter } from "../Components/SoundMeter";
import {HtmlUtils} from "../../WebRtc/HtmlUtils"; import { HtmlUtils } from "../../WebRtc/HtmlUtils";
import {touchScreenManager} from "../../Touch/TouchScreenManager"; import { touchScreenManager } from "../../Touch/TouchScreenManager";
import {PinchManager} from "../UserInput/PinchManager"; import { PinchManager } from "../UserInput/PinchManager";
import Zone = Phaser.GameObjects.Zone; import Zone = Phaser.GameObjects.Zone;
import { MenuScene } from "../Menu/MenuScene"; import { MenuScene } from "../Menu/MenuScene";
import {ResizableScene} from "./ResizableScene"; import { ResizableScene } from "./ResizableScene";
import { import { enableCameraSceneVisibilityStore } from "../../Stores/MediaStore";
enableCameraSceneVisibilityStore,
} from "../../Stores/MediaStore";
export const EnableCameraSceneName = "EnableCameraScene"; export const EnableCameraSceneName = "EnableCameraScene";
export class EnableCameraScene extends ResizableScene { export class EnableCameraScene extends ResizableScene {
constructor() { constructor() {
super({ super({
key: EnableCameraSceneName key: EnableCameraSceneName,
}); });
} }
preload() { preload() {}
}
create() { create() {
this.input.keyboard.on("keyup-ENTER", () => {
this.input.keyboard.on('keyup-ENTER', () => {
this.login(); this.login();
}); });
enableCameraSceneVisibilityStore.showEnableCameraScene(); enableCameraSceneVisibilityStore.showEnableCameraScene();
} }
public onResize(): void { public onResize(): void {}
}
update(time: number, delta: number): void { update(time: number, delta: number): void {}
}
public login(): void { public login(): void {
enableCameraSceneVisibilityStore.hideEnableCameraScene(); enableCameraSceneVisibilityStore.hideEnableCameraScene();
this.scene.sleep(EnableCameraSceneName); this.scene.sleep(EnableCameraSceneName);
gameManager.goToStartingMap(this.scene); gameManager.goToStartingMap();
} }
} }

28
front/src/Phaser/Login/LoginScene.ts
View file

@ -1,23 +1,21 @@
import {gameManager} from "../Game/GameManager"; import { gameManager } from "../Game/GameManager";
import {SelectCharacterSceneName} from "./SelectCharacterScene"; import { SelectCharacterSceneName } from "./SelectCharacterScene";
import {ResizableScene} from "./ResizableScene"; import { ResizableScene } from "./ResizableScene";
import {loginSceneVisibleStore} from "../../Stores/LoginSceneStore"; import { loginSceneVisibleStore } from "../../Stores/LoginSceneStore";
export const LoginSceneName = "LoginScene"; export const LoginSceneName = "LoginScene";
export class LoginScene extends ResizableScene { export class LoginScene extends ResizableScene {
private name: string = "";
private name: string = '';
constructor() { constructor() {
super({ super({
key: LoginSceneName key: LoginSceneName,
}); });
this.name = gameManager.getPlayerName() || ''; this.name = gameManager.getPlayerName() || "";
} }
preload() { preload() {}
}
create() { create() {
loginSceneVisibleStore.set(true); loginSceneVisibleStore.set(true);
@ -27,15 +25,13 @@ export class LoginScene extends ResizableScene {
name = name.trim(); name = name.trim();
gameManager.setPlayerName(name); gameManager.setPlayerName(name);
this.scene.stop(LoginSceneName) this.scene.stop(LoginSceneName);
gameManager.tryResumingGame(this, SelectCharacterSceneName); gameManager.tryResumingGame(SelectCharacterSceneName);
this.scene.remove(LoginSceneName); this.scene.remove(LoginSceneName);
loginSceneVisibleStore.set(false); loginSceneVisibleStore.set(false);
} }
update(time: number, delta: number): void { update(time: number, delta: number): void {}
}
public onResize(): void { public onResize(): void {}
}
} }

103
front/src/Phaser/Login/SelectCharacterScene.ts
View file

@ -1,25 +1,25 @@
import {gameManager} from "../Game/GameManager"; import { gameManager } from "../Game/GameManager";
import Rectangle = Phaser.GameObjects.Rectangle; import Rectangle = Phaser.GameObjects.Rectangle;
import {EnableCameraSceneName} from "./EnableCameraScene"; import { EnableCameraSceneName } from "./EnableCameraScene";
import {CustomizeSceneName} from "./CustomizeScene"; import { CustomizeSceneName } from "./CustomizeScene";
import {localUserStore} from "../../Connexion/LocalUserStore"; import { localUserStore } from "../../Connexion/LocalUserStore";
import {loadAllDefaultModels} from "../Entity/PlayerTexturesLoadingManager"; import { loadAllDefaultModels } from "../Entity/PlayerTexturesLoadingManager";
import {addLoader} from "../Components/Loader"; import { addLoader } from "../Components/Loader";
import type {BodyResourceDescriptionInterface} from "../Entity/PlayerTextures"; import type { BodyResourceDescriptionInterface } from "../Entity/PlayerTextures";
import {AbstractCharacterScene} from "./AbstractCharacterScene"; import { AbstractCharacterScene } from "./AbstractCharacterScene";
import {areCharacterLayersValid} from "../../Connexion/LocalUser"; import { areCharacterLayersValid } from "../../Connexion/LocalUser";
import {touchScreenManager} from "../../Touch/TouchScreenManager"; import { touchScreenManager } from "../../Touch/TouchScreenManager";
import {PinchManager} from "../UserInput/PinchManager"; import { PinchManager } from "../UserInput/PinchManager";
import {selectCharacterSceneVisibleStore} from "../../Stores/SelectCharacterStore"; import { selectCharacterSceneVisibleStore } from "../../Stores/SelectCharacterStore";
import {waScaleManager} from "../Services/WaScaleManager"; import { waScaleManager } from "../Services/WaScaleManager";
import {isMobile} from "../../Enum/EnvironmentVariable"; import { isMobile } from "../../Enum/EnvironmentVariable";
//todo: put this constants in a dedicated file //todo: put this constants in a dedicated file
export const SelectCharacterSceneName = "SelectCharacterScene"; export const SelectCharacterSceneName = "SelectCharacterScene";
export class SelectCharacterScene extends AbstractCharacterScene { export class SelectCharacterScene extends AbstractCharacterScene {
protected readonly nbCharactersPerRow = 6; protected readonly nbCharactersPerRow = 6;
protected selectedPlayer!: Phaser.Physics.Arcade.Sprite|null; // null if we are selecting the "customize" option protected selectedPlayer!: Phaser.Physics.Arcade.Sprite | null; // null if we are selecting the "customize" option
protected players: Array<Phaser.Physics.Arcade.Sprite> = new Array<Phaser.Physics.Arcade.Sprite>(); protected players: Array<Phaser.Physics.Arcade.Sprite> = new Array<Phaser.Physics.Arcade.Sprite>();
protected playerModels!: BodyResourceDescriptionInterface[]; protected playerModels!: BodyResourceDescriptionInterface[];
@ -38,7 +38,6 @@ export class SelectCharacterScene extends AbstractCharacterScene {
} }
preload() { preload() {
this.loadSelectSceneCharacters().then((bodyResourceDescriptions) => { this.loadSelectSceneCharacters().then((bodyResourceDescriptions) => {
bodyResourceDescriptions.forEach((bodyResourceDescription) => { bodyResourceDescriptions.forEach((bodyResourceDescription) => {
this.playerModels.push(bodyResourceDescription); this.playerModels.push(bodyResourceDescription);
@ -54,7 +53,7 @@ export class SelectCharacterScene extends AbstractCharacterScene {
create() { create() {
selectCharacterSceneVisibleStore.set(true); selectCharacterSceneVisibleStore.set(true);
this.events.addListener('wake', () => { this.events.addListener("wake", () => {
waScaleManager.saveZoom(); waScaleManager.saveZoom();
waScaleManager.zoomModifier = isMobile() ? 2 : 1; waScaleManager.zoomModifier = isMobile() ? 2 : 1;
selectCharacterSceneVisibleStore.set(true); selectCharacterSceneVisibleStore.set(true);
@ -68,26 +67,26 @@ export class SelectCharacterScene extends AbstractCharacterScene {
waScaleManager.zoomModifier = isMobile() ? 2 : 1; waScaleManager.zoomModifier = isMobile() ? 2 : 1;
const rectangleXStart = this.game.renderer.width / 2 - (this.nbCharactersPerRow / 2) * 32 + 16; const rectangleXStart = this.game.renderer.width / 2 - (this.nbCharactersPerRow / 2) * 32 + 16;
this.selectedRectangle = this.add.rectangle(rectangleXStart, 90, 32, 32).setStrokeStyle(2, 0xFFFFFF); this.selectedRectangle = this.add.rectangle(rectangleXStart, 90, 32, 32).setStrokeStyle(2, 0xffffff);
this.selectedRectangle.setDepth(2); this.selectedRectangle.setDepth(2);
/*create user*/ /*create user*/
this.createCurrentPlayer(); this.createCurrentPlayer();
this.input.keyboard.on('keyup-ENTER', () => { this.input.keyboard.on("keyup-ENTER", () => {
return this.nextSceneToCameraScene(); return this.nextSceneToCameraScene();
}); });
this.input.keyboard.on('keydown-RIGHT', () => { this.input.keyboard.on("keydown-RIGHT", () => {
this.moveToRight(); this.moveToRight();
}); });
this.input.keyboard.on('keydown-LEFT', () => { this.input.keyboard.on("keydown-LEFT", () => {
this.moveToLeft(); this.moveToLeft();
}); });
this.input.keyboard.on('keydown-UP', () => { this.input.keyboard.on("keydown-UP", () => {
this.moveToUp(); this.moveToUp();
}); });
this.input.keyboard.on('keydown-DOWN', () => { this.input.keyboard.on("keydown-DOWN", () => {
this.moveToDown(); this.moveToDown();
}); });
} }
@ -96,16 +95,16 @@ export class SelectCharacterScene extends AbstractCharacterScene {
if (this.selectedPlayer !== null && !areCharacterLayersValid([this.selectedPlayer.texture.key])) { if (this.selectedPlayer !== null && !areCharacterLayersValid([this.selectedPlayer.texture.key])) {
return; return;
} }
if(!this.selectedPlayer){ if (!this.selectedPlayer) {
return; return;
} }
this.scene.stop(SelectCharacterSceneName); this.scene.stop(SelectCharacterSceneName);
waScaleManager.restoreZoom(); waScaleManager.restoreZoom();
gameManager.setCharacterLayers([this.selectedPlayer.texture.key]); gameManager.setCharacterLayers([this.selectedPlayer.texture.key]);
gameManager.tryResumingGame(this, EnableCameraSceneName); gameManager.tryResumingGame(EnableCameraSceneName);
this.players = []; this.players = [];
selectCharacterSceneVisibleStore.set(false); selectCharacterSceneVisibleStore.set(false);
this.events.removeListener('wake'); this.events.removeListener("wake");
} }
public nextSceneToCustomizeScene(): void { public nextSceneToCustomizeScene(): void {
@ -119,11 +118,11 @@ export class SelectCharacterScene extends AbstractCharacterScene {
} }
createCurrentPlayer(): void { createCurrentPlayer(): void {
for (let i = 0; i <this.playerModels.length; i++) { for (let i = 0; i < this.playerModels.length; i++) {
const playerResource = this.playerModels[i]; const playerResource = this.playerModels[i];
//check already exist texture //check already exist texture
if(this.players.find((c) => c.texture.key === playerResource.name)){ if (this.players.find((c) => c.texture.key === playerResource.name)) {
continue; continue;
} }
@ -132,9 +131,9 @@ export class SelectCharacterScene extends AbstractCharacterScene {
this.setUpPlayer(player, i); this.setUpPlayer(player, i);
this.anims.create({ this.anims.create({
key: playerResource.name, key: playerResource.name,
frames: this.anims.generateFrameNumbers(playerResource.name, {start: 0, end: 11}), frames: this.anims.generateFrameNumbers(playerResource.name, { start: 0, end: 11 }),
frameRate: 8, frameRate: 8,
repeat: -1 repeat: -1,
}); });
player.setInteractive().on("pointerdown", () => { player.setInteractive().on("pointerdown", () => {
if (this.pointerClicked) { if (this.pointerClicked) {
@ -157,73 +156,72 @@ export class SelectCharacterScene extends AbstractCharacterScene {
this.selectedPlayer.play(this.playerModels[this.currentSelectUser].name); this.selectedPlayer.play(this.playerModels[this.currentSelectUser].name);
} }
protected moveUser(){ protected moveUser() {
for(let i = 0; i < this.players.length; i++){ for (let i = 0; i < this.players.length; i++) {
const player = this.players[i]; const player = this.players[i];
this.setUpPlayer(player, i); this.setUpPlayer(player, i);
} }
this.updateSelectedPlayer(); this.updateSelectedPlayer();
} }
public moveToLeft(){ public moveToLeft() {
if(this.currentSelectUser === 0){ if (this.currentSelectUser === 0) {
return; return;
} }
this.currentSelectUser -= 1; this.currentSelectUser -= 1;
this.moveUser(); this.moveUser();
} }
public moveToRight(){ public moveToRight() {
if(this.currentSelectUser === (this.players.length - 1)){ if (this.currentSelectUser === this.players.length - 1) {
return; return;
} }
this.currentSelectUser += 1; this.currentSelectUser += 1;
this.moveUser(); this.moveUser();
} }
protected moveToUp(){ protected moveToUp() {
if(this.currentSelectUser < this.nbCharactersPerRow){ if (this.currentSelectUser < this.nbCharactersPerRow) {
return; return;
} }
this.currentSelectUser -= this.nbCharactersPerRow; this.currentSelectUser -= this.nbCharactersPerRow;
this.moveUser(); this.moveUser();
} }
protected moveToDown(){ protected moveToDown() {
if((this.currentSelectUser + this.nbCharactersPerRow) > (this.players.length - 1)){ if (this.currentSelectUser + this.nbCharactersPerRow > this.players.length - 1) {
return; return;
} }
this.currentSelectUser += this.nbCharactersPerRow; this.currentSelectUser += this.nbCharactersPerRow;
this.moveUser(); this.moveUser();
} }
protected defineSetupPlayer(num: number){ protected defineSetupPlayer(num: number) {
const deltaX = 32; const deltaX = 32;
const deltaY = 32; const deltaY = 32;
let [playerX, playerY] = this.getCharacterPosition(); // player X and player y are middle of the let [playerX, playerY] = this.getCharacterPosition(); // player X and player y are middle of the
playerX = ( (playerX - (deltaX * 2.5)) + ((deltaX) * (num % this.nbCharactersPerRow)) ); // calcul position on line users playerX = playerX - deltaX * 2.5 + deltaX * (num % this.nbCharactersPerRow); // calcul position on line users
playerY = ( (playerY - (deltaY * 2)) + ((deltaY) * ( Math.floor(num / this.nbCharactersPerRow) )) ); // calcul position on column users playerY = playerY - deltaY * 2 + deltaY * Math.floor(num / this.nbCharactersPerRow); // calcul position on column users
const playerVisible = true; const playerVisible = true;
const playerScale = 1; const playerScale = 1;
const playerOpacity = 1; const playerOpacity = 1;
// if selected // if selected
if( num === this.currentSelectUser ){ if (num === this.currentSelectUser) {
this.selectedRectangle.setX(playerX); this.selectedRectangle.setX(playerX);
this.selectedRectangle.setY(playerY); this.selectedRectangle.setY(playerY);
} }
return {playerX, playerY, playerScale, playerOpacity, playerVisible} return { playerX, playerY, playerScale, playerOpacity, playerVisible };
} }
protected setUpPlayer(player: Phaser.Physics.Arcade.Sprite, num: number){ protected setUpPlayer(player: Phaser.Physics.Arcade.Sprite, num: number) {
const { playerX, playerY, playerScale, playerOpacity, playerVisible } = this.defineSetupPlayer(num);
const {playerX, playerY, playerScale, playerOpacity, playerVisible} = this.defineSetupPlayer(num);
player.setBounce(0.2); player.setBounce(0.2);
player.setCollideWorldBounds(false); player.setCollideWorldBounds(false);
player.setVisible( playerVisible ); player.setVisible(playerVisible);
player.setScale(playerScale, playerScale); player.setScale(playerScale, playerScale);
player.setAlpha(playerOpacity); player.setAlpha(playerOpacity);
player.setX(playerX); player.setX(playerX);
@ -234,10 +232,7 @@ export class SelectCharacterScene extends AbstractCharacterScene {
* Returns pixel position by on column and row number * Returns pixel position by on column and row number
*/ */
protected getCharacterPosition(): [number, number] { protected getCharacterPosition(): [number, number] {
return [ return [this.game.renderer.width / 2, this.game.renderer.height / 2.5];
this.game.renderer.width / 2,
this.game.renderer.height / 2.5
];
} }
protected updateSelectedPlayer(): void { protected updateSelectedPlayer(): void {
@ -256,7 +251,7 @@ export class SelectCharacterScene extends AbstractCharacterScene {
this.pointerClicked = false; this.pointerClicked = false;
} }
if(this.lazyloadingAttempt){ if (this.lazyloadingAttempt) {
//re-render players list //re-render players list
this.createCurrentPlayer(); this.createCurrentPlayer();
this.moveUser(); this.moveUser();

84
front/src/Phaser/Login/SelectCompanionScene.ts
View file

@ -1,18 +1,18 @@
import Image = Phaser.GameObjects.Image; import Image = Phaser.GameObjects.Image;
import Rectangle = Phaser.GameObjects.Rectangle; import Rectangle = Phaser.GameObjects.Rectangle;
import { addLoader } from "../Components/Loader"; import { addLoader } from "../Components/Loader";
import { gameManager} from "../Game/GameManager"; import { gameManager } from "../Game/GameManager";
import { ResizableScene } from "./ResizableScene"; import { ResizableScene } from "./ResizableScene";
import { EnableCameraSceneName } from "./EnableCameraScene"; import { EnableCameraSceneName } from "./EnableCameraScene";
import { localUserStore } from "../../Connexion/LocalUserStore"; import { localUserStore } from "../../Connexion/LocalUserStore";
import type { CompanionResourceDescriptionInterface } from "../Companion/CompanionTextures"; import type { CompanionResourceDescriptionInterface } from "../Companion/CompanionTextures";
import { getAllCompanionResources } from "../Companion/CompanionTexturesLoadingManager"; import { getAllCompanionResources } from "../Companion/CompanionTexturesLoadingManager";
import {touchScreenManager} from "../../Touch/TouchScreenManager"; import { touchScreenManager } from "../../Touch/TouchScreenManager";
import {PinchManager} from "../UserInput/PinchManager"; import { PinchManager } from "../UserInput/PinchManager";
import { MenuScene } from "../Menu/MenuScene"; import { MenuScene } from "../Menu/MenuScene";
import {selectCompanionSceneVisibleStore} from "../../Stores/SelectCompanionStore"; import { selectCompanionSceneVisibleStore } from "../../Stores/SelectCompanionStore";
import {waScaleManager} from "../Services/WaScaleManager"; import { waScaleManager } from "../Services/WaScaleManager";
import {isMobile} from "../../Enum/EnvironmentVariable"; import { isMobile } from "../../Enum/EnvironmentVariable";
export const SelectCompanionSceneName = "SelectCompanionScene"; export const SelectCompanionSceneName = "SelectCompanionScene";
@ -28,12 +28,12 @@ export class SelectCompanionScene extends ResizableScene {
constructor() { constructor() {
super({ super({
key: SelectCompanionSceneName key: SelectCompanionSceneName,
}); });
} }
preload() { preload() {
getAllCompanionResources(this.load).forEach(model => { getAllCompanionResources(this.load).forEach((model) => {
this.companionModels.push(model); this.companionModels.push(model);
}); });
@ -42,7 +42,6 @@ export class SelectCompanionScene extends ResizableScene {
} }
create() { create() {
selectCompanionSceneVisibleStore.set(true); selectCompanionSceneVisibleStore.set(true);
waScaleManager.saveZoom(); waScaleManager.saveZoom();
@ -53,14 +52,16 @@ export class SelectCompanionScene extends ResizableScene {
} }
// input events // input events
this.input.keyboard.on('keyup-ENTER', this.selectCompanion.bind(this)); this.input.keyboard.on("keyup-ENTER", this.selectCompanion.bind(this));
this.input.keyboard.on('keydown-RIGHT', this.moveToRight.bind(this)); this.input.keyboard.on("keydown-RIGHT", this.moveToRight.bind(this));
this.input.keyboard.on('keydown-LEFT', this.moveToLeft.bind(this)); this.input.keyboard.on("keydown-LEFT", this.moveToLeft.bind(this));
if(localUserStore.getCompanion()){ if (localUserStore.getCompanion()) {
const companionIndex = this.companionModels.findIndex((companion) => companion.name === localUserStore.getCompanion()); const companionIndex = this.companionModels.findIndex(
if(companionIndex > -1 || companionIndex < this.companions.length){ (companion) => companion.name === localUserStore.getCompanion()
);
if (companionIndex > -1 || companionIndex < this.companions.length) {
this.currentCompanion = companionIndex; this.currentCompanion = companionIndex;
this.selectedCompanion = this.companions[companionIndex]; this.selectedCompanion = this.companions[companionIndex];
} }
@ -89,26 +90,26 @@ export class SelectCompanionScene extends ResizableScene {
this.closeScene(); this.closeScene();
} }
public closeScene(){ public closeScene() {
// next scene // next scene
this.scene.stop(SelectCompanionSceneName); this.scene.stop(SelectCompanionSceneName);
waScaleManager.restoreZoom(); waScaleManager.restoreZoom();
gameManager.tryResumingGame(this, EnableCameraSceneName); gameManager.tryResumingGame(EnableCameraSceneName);
this.scene.remove(SelectCompanionSceneName); this.scene.remove(SelectCompanionSceneName);
selectCompanionSceneVisibleStore.set(false); selectCompanionSceneVisibleStore.set(false);
} }
private createCurrentCompanion(): void { private createCurrentCompanion(): void {
for (let i = 0; i < this.companionModels.length; i++) { for (let i = 0; i < this.companionModels.length; i++) {
const companionResource = this.companionModels[i] const companionResource = this.companionModels[i];
const [middleX, middleY] = this.getCompanionPosition(); const [middleX, middleY] = this.getCompanionPosition();
const companion = this.physics.add.sprite(middleX, middleY, companionResource.name, 0); const companion = this.physics.add.sprite(middleX, middleY, companionResource.name, 0);
this.setUpCompanion(companion, i); this.setUpCompanion(companion, i);
this.anims.create({ this.anims.create({
key: companionResource.name, key: companionResource.name,
frames: this.anims.generateFrameNumbers(companionResource.name, {start: 0, end: 2,}), frames: this.anims.generateFrameNumbers(companionResource.name, { start: 0, end: 2 }),
frameRate: 10, frameRate: 10,
repeat: -1 repeat: -1,
}); });
companion.setInteractive().on("pointerdown", () => { companion.setInteractive().on("pointerdown", () => {
@ -140,87 +141,84 @@ export class SelectCompanionScene extends ResizableScene {
this.selectedCompanion = companion; this.selectedCompanion = companion;
} }
private moveCompanion(){ private moveCompanion() {
for(let i = 0; i < this.companions.length; i++){ for (let i = 0; i < this.companions.length; i++) {
const companion = this.companions[i]; const companion = this.companions[i];
this.setUpCompanion(companion, i); this.setUpCompanion(companion, i);
} }
this.updateSelectedCompanion(); this.updateSelectedCompanion();
} }
public moveToRight(){ public moveToRight() {
if(this.currentCompanion === (this.companions.length - 1)){ if (this.currentCompanion === this.companions.length - 1) {
return; return;
} }
this.currentCompanion += 1; this.currentCompanion += 1;
this.moveCompanion(); this.moveCompanion();
} }
public moveToLeft(){ public moveToLeft() {
if(this.currentCompanion === 0){ if (this.currentCompanion === 0) {
return; return;
} }
this.currentCompanion -= 1; this.currentCompanion -= 1;
this.moveCompanion(); this.moveCompanion();
} }
private defineSetupCompanion(num: number){ private defineSetupCompanion(num: number) {
const deltaX = 30; const deltaX = 30;
const deltaY = 2; const deltaY = 2;
let [companionX, companionY] = this.getCompanionPosition(); let [companionX, companionY] = this.getCompanionPosition();
let companionVisible = true; let companionVisible = true;
let companionScale = 1.5; let companionScale = 1.5;
let companionOpactity = 1; let companionOpactity = 1;
if( this.currentCompanion !== num ){ if (this.currentCompanion !== num) {
companionVisible = false; companionVisible = false;
} }
if( num === (this.currentCompanion + 1) ){ if (num === this.currentCompanion + 1) {
companionY -= deltaY; companionY -= deltaY;
companionX += deltaX; companionX += deltaX;
companionScale = 0.8; companionScale = 0.8;
companionOpactity = 0.6; companionOpactity = 0.6;
companionVisible = true; companionVisible = true;
} }
if( num === (this.currentCompanion + 2) ){ if (num === this.currentCompanion + 2) {
companionY -= deltaY; companionY -= deltaY;
companionX += (deltaX * 2); companionX += deltaX * 2;
companionScale = 0.8; companionScale = 0.8;
companionOpactity = 0.6; companionOpactity = 0.6;
companionVisible = true; companionVisible = true;
} }
if( num === (this.currentCompanion - 1) ){ if (num === this.currentCompanion - 1) {
companionY -= deltaY; companionY -= deltaY;
companionX -= deltaX; companionX -= deltaX;
companionScale = 0.8; companionScale = 0.8;
companionOpactity = 0.6; companionOpactity = 0.6;
companionVisible = true; companionVisible = true;
} }
if( num === (this.currentCompanion - 2) ){ if (num === this.currentCompanion - 2) {
companionY -= deltaY; companionY -= deltaY;
companionX -= (deltaX * 2); companionX -= deltaX * 2;
companionScale = 0.8; companionScale = 0.8;
companionOpactity = 0.6; companionOpactity = 0.6;
companionVisible = true; companionVisible = true;
} }
return {companionX, companionY, companionScale, companionOpactity, companionVisible} return { companionX, companionY, companionScale, companionOpactity, companionVisible };
} }
/** /**
* Returns pixel position by on column and row number * Returns pixel position by on column and row number
*/ */
private getCompanionPosition(): [number, number] { private getCompanionPosition(): [number, number] {
return [ return [this.game.renderer.width / 2, this.game.renderer.height / 3];
this.game.renderer.width / 2,
this.game.renderer.height / 3
];
} }
private setUpCompanion(companion: Phaser.Physics.Arcade.Sprite, numero: number){ private setUpCompanion(companion: Phaser.Physics.Arcade.Sprite, numero: number) {
const { companionX, companionY, companionScale, companionOpactity, companionVisible } =
const {companionX, companionY, companionScale, companionOpactity, companionVisible} = this.defineSetupCompanion(numero); this.defineSetupCompanion(numero);
companion.setBounce(0.2); companion.setBounce(0.2);
companion.setCollideWorldBounds(true); companion.setCollideWorldBounds(true);
companion.setVisible( companionVisible ); companion.setVisible(companionVisible);
companion.setScale(companionScale, companionScale); companion.setScale(companionScale, companionScale);
companion.setAlpha(companionOpactity); companion.setAlpha(companionOpactity);
companion.setX(companionX); companion.setX(companionX);

40
front/src/Phaser/Menu/MenuScene.ts
View file

@ -8,7 +8,7 @@ import { connectionManager } from "../../Connexion/ConnectionManager";
import { GameConnexionTypes } from "../../Url/UrlManager"; import { GameConnexionTypes } from "../../Url/UrlManager";
import { WarningContainer, warningContainerHtml, warningContainerKey } from "../Components/WarningContainer"; import { WarningContainer, warningContainerHtml, warningContainerKey } from "../Components/WarningContainer";
import { worldFullWarningStream } from "../../Connexion/WorldFullWarningStream"; import { worldFullWarningStream } from "../../Connexion/WorldFullWarningStream";
import { menuIconVisible } from "../../Stores/MenuStore"; import { menuIconVisible, menuVisible } from "../../Stores/MenuStore";
import { videoConstraintStore } from "../../Stores/MediaStore"; import { videoConstraintStore } from "../../Stores/MediaStore";
import { showReportScreenStore } from "../../Stores/ShowReportScreenStore"; import { showReportScreenStore } from "../../Stores/ShowReportScreenStore";
import { HtmlUtils } from "../../WebRtc/HtmlUtils"; import { HtmlUtils } from "../../WebRtc/HtmlUtils";
@ -18,7 +18,6 @@ import { registerMenuCommandStream } from "../../Api/Events/ui/MenuItemRegisterE
import { sendMenuClickedEvent } from "../../Api/iframe/Ui/MenuItem"; import { sendMenuClickedEvent } from "../../Api/iframe/Ui/MenuItem";
import { consoleGlobalMessageManagerVisibleStore } from "../../Stores/ConsoleGlobalMessageManagerStore"; import { consoleGlobalMessageManagerVisibleStore } from "../../Stores/ConsoleGlobalMessageManagerStore";
import { get } from "svelte/store"; import { get } from "svelte/store";
import { playersStore } from "../../Stores/PlayersStore";
export const MenuSceneName = "MenuScene"; export const MenuSceneName = "MenuScene";
const gameMenuKey = "gameMenu"; const gameMenuKey = "gameMenu";
@ -93,7 +92,6 @@ export class MenuScene extends Phaser.Scene {
} }
create() { create() {
menuIconVisible.set(true);
this.menuElement = this.add.dom(closedSideMenuX, 30).createFromCache(gameMenuKey); this.menuElement = this.add.dom(closedSideMenuX, 30).createFromCache(gameMenuKey);
this.menuElement.setOrigin(0); this.menuElement.setOrigin(0);
MenuScene.revealMenusAfterInit(this.menuElement, "gameMenu"); MenuScene.revealMenusAfterInit(this.menuElement, "gameMenu");
@ -121,11 +119,7 @@ export class MenuScene extends Phaser.Scene {
showReportScreenStore.subscribe((user) => { showReportScreenStore.subscribe((user) => {
if (user !== null) { if (user !== null) {
this.closeAll(); this.closeAll();
const uuid = playersStore.getPlayerById(user.userId)?.userUuid; this.gameReportElement.open(user.userId, user.userName);
if (uuid === undefined) {
throw new Error("Could not find UUID for user with ID " + user.userId);
}
this.gameReportElement.open(uuid, user.userName);
} }
}); });
@ -154,6 +148,7 @@ export class MenuScene extends Phaser.Scene {
} }
public revealMenuIcon(): void { public revealMenuIcon(): void {
return;
//TODO fix me: add try catch because at the same time, 'this.menuButton' variable doesn't exist and there is error on 'getChildByID' function //TODO fix me: add try catch because at the same time, 'this.menuButton' variable doesn't exist and there is error on 'getChildByID' function
try { try {
(this.menuButton.getChildByID("menuIcon") as HTMLElement).hidden = false; (this.menuButton.getChildByID("menuIcon") as HTMLElement).hidden = false;
@ -163,26 +158,28 @@ export class MenuScene extends Phaser.Scene {
} }
openSideMenu() { openSideMenu() {
menuVisible.set(true);
if (this.sideMenuOpened) return; if (this.sideMenuOpened) return;
this.closeAll();
/*this.closeAll();
this.sideMenuOpened = true; this.sideMenuOpened = true;
this.menuButton.getChildByID("openMenuButton").innerHTML = "X"; this.menuButton.getChildByID('openMenuButton').innerHTML = 'X';
const connection = gameManager.getCurrentGameScene(this).connection; const connection = gameManager.getCurrentGameScene(this).connection;
if (connection && connection.isAdmin()) { if (connection && connection.isAdmin()) {
const adminSection = this.menuElement.getChildByID("adminConsoleSection") as HTMLElement; const adminSection = this.menuElement.getChildByID('adminConsoleSection') as HTMLElement;
adminSection.hidden = false; adminSection.hidden = false;
} }
//TODO bind with future metadata of card //TODO bind with future metadata of card
//if (connectionManager.getConnexionType === GameConnexionTypes.anonymous){ //if (connectionManager.getConnexionType === GameConnexionTypes.anonymous){
const adminSection = this.menuElement.getChildByID("socialLinks") as HTMLElement; const adminSection = this.menuElement.getChildByID('socialLinks') as HTMLElement;
adminSection.hidden = false; adminSection.hidden = false;
//} //}
this.tweens.add({ this.tweens.add({
targets: this.menuElement, targets: this.menuElement,
x: openedSideMenuX, x: openedSideMenuX,
duration: 500, duration: 500,
ease: "Power3", ease: 'Power3'
}); });*/
} }
private showWorldCapacityWarning() { private showWorldCapacityWarning() {
@ -200,17 +197,18 @@ export class MenuScene extends Phaser.Scene {
} }
private closeSideMenu(): void { private closeSideMenu(): void {
if (!this.sideMenuOpened) return; menuVisible.set(false);
/* if (!this.sideMenuOpened) return;
this.sideMenuOpened = false; this.sideMenuOpened = false;
this.closeAll(); this.closeAll();
this.menuButton.getChildByID("openMenuButton").innerHTML = `<img src="/static/images/menu.svg">`; this.menuButton.getChildByID('openMenuButton').innerHTML = `<img src="/static/images/menu.svg">`;
consoleGlobalMessageManagerVisibleStore.set(false); consoleGlobalMessageManagerVisibleStore.set(false);
this.tweens.add({ this.tweens.add({
targets: this.menuElement, targets: this.menuElement,
x: closedSideMenuX, x: closedSideMenuX,
duration: 500, duration: 500,
ease: "Power3", ease: 'Power3'
}); });*/
} }
private openGameSettingsMenu(): void { private openGameSettingsMenu(): void {
@ -332,18 +330,18 @@ export class MenuScene extends Phaser.Scene {
switch ((event?.target as HTMLInputElement).id) { switch ((event?.target as HTMLInputElement).id) {
case "changeNameButton": case "changeNameButton":
this.closeSideMenu(); this.closeSideMenu();
gameManager.leaveGame(this, LoginSceneName, new LoginScene()); gameManager.leaveGame(LoginSceneName, new LoginScene());
break; break;
case "sparkButton": case "sparkButton":
this.gotToCreateMapPage(); this.gotToCreateMapPage();
break; break;
case "changeSkinButton": case "changeSkinButton":
this.closeSideMenu(); this.closeSideMenu();
gameManager.leaveGame(this, SelectCharacterSceneName, new SelectCharacterScene()); gameManager.leaveGame(SelectCharacterSceneName, new SelectCharacterScene());
break; break;
case "changeCompanionButton": case "changeCompanionButton":
this.closeSideMenu(); this.closeSideMenu();
gameManager.leaveGame(this, SelectCompanionSceneName, new SelectCompanionScene()); gameManager.leaveGame(SelectCompanionSceneName, new SelectCompanionScene());
break; break;
case "closeButton": case "closeButton":
this.closeSideMenu(); this.closeSideMenu();

23
front/src/Phaser/Menu/ReportMenu.ts
View file

@ -1,7 +1,6 @@
import { MenuScene } from "./MenuScene"; import { MenuScene } from "./MenuScene";
import { gameManager } from "../Game/GameManager"; import { gameManager } from "../Game/GameManager";
import { blackListManager } from "../../WebRtc/BlackListManager"; import { blackListManager } from "../../WebRtc/BlackListManager";
import { playersStore } from "../../Stores/PlayersStore";
export const gameReportKey = "gameReport"; export const gameReportKey = "gameReport";
export const gameReportRessource = "resources/html/gameReport.html"; export const gameReportRessource = "resources/html/gameReport.html";
@ -9,7 +8,7 @@ export const gameReportRessource = "resources/html/gameReport.html";
export class ReportMenu extends Phaser.GameObjects.DOMElement { export class ReportMenu extends Phaser.GameObjects.DOMElement {
private opened: boolean = false; private opened: boolean = false;
private userUuid!: string; private userId!: number;
private userName!: string | undefined; private userName!: string | undefined;
private anonymous: boolean; private anonymous: boolean;
@ -41,13 +40,13 @@ export class ReportMenu extends Phaser.GameObjects.DOMElement {
}); });
} }
public open(userUuid: string, userName: string | undefined): void { public open(userId: number, userName: string | undefined): void {
if (this.opened) { if (this.opened) {
this.close(); this.close();
return; return;
} }
this.userUuid = userUuid; this.userId = userId;
this.userName = userName; this.userName = userName;
const mainEl = this.getChildByID("gameReport") as HTMLElement; const mainEl = this.getChildByID("gameReport") as HTMLElement;
@ -58,11 +57,11 @@ export class ReportMenu extends Phaser.GameObjects.DOMElement {
gameTitleReport.innerText = userName || ""; gameTitleReport.innerText = userName || "";
const blockButton = this.getChildByID("toggleBlockButton") as HTMLElement; const blockButton = this.getChildByID("toggleBlockButton") as HTMLElement;
blockButton.innerText = blackListManager.isBlackListed(this.userUuid) ? "Unblock this user" : "Block this user"; blockButton.innerText = blackListManager.isBlackListed(this.userId) ? "Unblock this user" : "Block this user";
this.opened = true; this.opened = true;
gameManager.getCurrentGameScene(this.scene).userInputManager.disableControls(); gameManager.getCurrentGameScene().userInputManager.disableControls();
this.scene.tweens.add({ this.scene.tweens.add({
targets: this, targets: this,
@ -73,7 +72,7 @@ export class ReportMenu extends Phaser.GameObjects.DOMElement {
} }
public close(): void { public close(): void {
gameManager.getCurrentGameScene(this.scene).userInputManager.restoreControls(); gameManager.getCurrentGameScene().userInputManager.restoreControls();
this.opened = false; this.opened = false;
const mainEl = this.getChildByID("gameReport") as HTMLElement; const mainEl = this.getChildByID("gameReport") as HTMLElement;
this.scene.tweens.add({ this.scene.tweens.add({
@ -96,9 +95,9 @@ export class ReportMenu extends Phaser.GameObjects.DOMElement {
} }
private toggleBlock(): void { private toggleBlock(): void {
!blackListManager.isBlackListed(this.userUuid) !blackListManager.isBlackListed(this.userId)
? blackListManager.blackList(this.userUuid) ? blackListManager.blackList(this.userId)
: blackListManager.cancelBlackList(this.userUuid); : blackListManager.cancelBlackList(this.userId);
this.close(); this.close();
} }
@ -112,9 +111,7 @@ export class ReportMenu extends Phaser.GameObjects.DOMElement {
gamePError.style.display = "block"; gamePError.style.display = "block";
return; return;
} }
gameManager gameManager.getCurrentGameScene().connection?.emitReportPlayerMessage(this.userId, gameTextArea.value);
.getCurrentGameScene(this.scene)
.connection?.emitReportPlayerMessage(this.userUuid, gameTextArea.value);
this.close(); this.close();
} }
} }

2
front/src/Stores/MediaStore.ts
View file

@ -170,7 +170,7 @@ function createVideoConstraintStore() {
setFrameRate: (frameRate: number) => setFrameRate: (frameRate: number) =>
update((constraints) => { update((constraints) => {
constraints.frameRate = { ideal: frameRate }; constraints.frameRate = { ideal: frameRate };
localUserStore.setVideoQualityValue(frameRate);
return constraints; return constraints;
}), }),
}; };

1
front/src/Stores/MenuStore.ts
View file

@ -1,3 +1,4 @@
import { derived, writable, Writable } from "svelte/store"; import { derived, writable, Writable } from "svelte/store";
export const menuIconVisible = writable(false); export const menuIconVisible = writable(false);
export const menuVisible = writable(false);

136
maps/tests/MenuSvelte.json Normal file
View file

@ -0,0 +1,136 @@
{ "compressionlevel":-1,
"height":20,
"infinite":false,
"layers":[
{
"data":[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 34, 34, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 34, 34, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
"height":20,
"id":2,
"name":"start",
"opacity":1,
"type":"tilelayer",
"visible":true,
"width":20,
"x":0,
"y":0
},
{
"data":[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
"height":20,
"id":4,
"name":"floor",
"opacity":1,
"type":"tilelayer",
"visible":true,
"width":20,
"x":0,
"y":0
},
{
"data":[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 23, 23, 23, 23, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 23, 23, 23, 23, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 23, 23, 23, 23, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
"height":20,
"id":3,
"name":"playSound",
"opacity":1,
"type":"tilelayer",
"visible":true,
"width":20,
"x":0,
"y":0
},
{
"data":[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 23, 23, 23, 23, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 23, 23, 23, 23, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 23, 23, 23, 23, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
"height":20,
"id":6,
"name":"playSoundLoop",
"opacity":1,
"type":"tilelayer",
"visible":true,
"width":20,
"x":0,
"y":0
},
{
"draworder":"topdown",
"id":5,
"name":"floorLayer",
"objects":[
{
"height":19.296875,
"id":2,
"name":"",
"rotation":0,
"text":
{
"text":"Play Sound",
"wrap":true
},
"type":"",
"visible":true,
"width":107.109375,
"x":258.4453125,
"y":197.018229166667
},
{
"height":19.296875,
"id":3,
"name":"",
"rotation":0,
"text":
{
"text":"Bonjour Monde",
"wrap":true
},
"type":"",
"visible":true,
"width":107.109375,
"x":-348.221354166667,
"y":257.018229166667
},
{
"height":55.296875,
"id":4,
"name":"",
"rotation":0,
"text":
{
"text":"Play Sound Loop\nexit Zone Stop Sound \n",
"wrap":true
},
"type":"",
"visible":true,
"width":176.442708333333,
"x":243.778645833333,
"y":368.3515625
}],
"opacity":1,
"type":"objectgroup",
"visible":true,
"x":0,
"y":0
}],
"nextlayerid":8,
"nextobjectid":5,
"orientation":"orthogonal",
"renderorder":"right-down",
"tiledversion":"1.6.0",
"tileheight":32,
"tilesets":[
{
"columns":11,
"firstgid":1,
"image":"tileset1.png",
"imageheight":352,
"imagewidth":352,
"margin":0,
"name":"tileset1",
"spacing":0,
"tilecount":121,
"tileheight":32,
"tilewidth":32
}],
"tilewidth":32,
"type":"map",
"version":"1.6",
"width":20
}