_Bastler/partey_workadventure
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

emojimenu, audiomanager

Browse Source
This commit is contained in:
_Bastler 2021-09-14 08:56:37 +02:00
parent cf69b3259a
commit 148540dafe
6 changed files with 59 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
front/src/Components/App.svelte
View File

@ -1,6 +1,7 @@
<script lang="typescript"> <script lang="typescript">
import MenuIcon from "./Menu/MenuIcon.svelte"; import MenuIcon from "./Menu/MenuIcon.svelte";
import {menuIconVisiblilityStore, menuVisiblilityStore} from "../Stores/MenuStore"; import {menuIconVisiblilityStore, menuVisiblilityStore} from "../Stores/MenuStore";
import {emoteMenuVisiblilityStore} from "../Stores/EmoteStore";
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";
@ -112,7 +113,7 @@
<Menu></Menu> <Menu></Menu>
</div> </div>
{/if} {/if}
{#if $gameOverlayVisibilityStore} {#if $emoteMenuVisiblilityStore}
<div> <div>
<EmoteMenu></EmoteMenu> <EmoteMenu></EmoteMenu>
</div> </div>

74
front/src/Components/AudioManager/AudioManager.svelte
View File

@ -5,9 +5,9 @@
audioManagerFileStore, audioManagerFileStore,
audioManagerVolumeStore, audioManagerVolumeStore,
} from "../../Stores/AudioManagerStore"; } from "../../Stores/AudioManagerStore";
import {get} from "svelte/store"; import { get } from "svelte/store";
import type {Unsubscriber} from "svelte/store"; import type { Unsubscriber } from "svelte/store";
import {onDestroy,onMount} from "svelte"; import { onDestroy, onMount } from "svelte";
let HTMLAudioPlayer: HTMLAudioElement; let HTMLAudioPlayer: HTMLAudioElement;
let audioPlayerVolumeIcon: HTMLElement; let audioPlayerVolumeIcon: HTMLElement;
@ -15,51 +15,45 @@
let unsubscriberFileStore: Unsubscriber | null = null; let unsubscriberFileStore: Unsubscriber | null = null;
let unsubscriberVolumeStore: Unsubscriber | null = null; let unsubscriberVolumeStore: Unsubscriber | null = null;
let volume: number=1; let volume: number = 1;
let decreaseWhileTalking: boolean=true; let decreaseWhileTalking: boolean = true;
onMount(() => { onMount(() => {
volume = localUserStore.getAudioPlayerVolume(); volume = localUserStore.getAudioPlayerVolume();
audioManagerVolumeStore.setMuted(localUserStore.getAudioPlayerMuted()); audioManagerVolumeStore.setMuted(localUserStore.getAudioPlayerMuted());
setVolume(); changeVolume();
unsubscriberFileStore = audioManagerFileStore.subscribe(() =>{ unsubscriberFileStore = audioManagerFileStore.subscribe(() => {
HTMLAudioPlayer.pause(); HTMLAudioPlayer.pause();
HTMLAudioPlayer.loop=get(audioManagerVolumeStore).loop; HTMLAudioPlayer.loop = get(audioManagerVolumeStore).loop;
HTMLAudioPlayer.volume=get(audioManagerVolumeStore).volume; HTMLAudioPlayer.volume = get(audioManagerVolumeStore).volume;
HTMLAudioPlayer.muted=get(audioManagerVolumeStore).muted; HTMLAudioPlayer.muted = get(audioManagerVolumeStore).muted;
HTMLAudioPlayer.play(); HTMLAudioPlayer.play();
}); });
unsubscriberVolumeStore=audioManagerVolumeStore.subscribe((audioManager: audioManagerVolume) => { unsubscriberVolumeStore = audioManagerVolumeStore.subscribe((audioManager: audioManagerVolume) => {
const reduceVolume=audioManager.talking&&audioManager.decreaseWhileTalking; const reduceVolume = audioManager.talking && audioManager.decreaseWhileTalking;
if(reduceVolume&&!audioManager.volumeReduced) { if (reduceVolume && !audioManager.volumeReduced) {
audioManager.volume*=0.5; audioManager.volume *= 0.5;
} else if(!reduceVolume&&audioManager.volumeReduced) { } else if (!reduceVolume && audioManager.volumeReduced) {
audioManager.volume*=2.0; audioManager.volume *= 2.0;
} }
audioManager.volumeReduced=reduceVolume; audioManager.volumeReduced = reduceVolume;
HTMLAudioPlayer.volume=audioManager.volume; HTMLAudioPlayer.volume = audioManager.volume;
HTMLAudioPlayer.muted=audioManager.muted; HTMLAudioPlayer.muted = audioManager.muted;
HTMLAudioPlayer.loop=audioManager.loop; HTMLAudioPlayer.loop = audioManager.loop;
}) })
}) })
onDestroy(() => { onDestroy(() => {
if(unsubscriberFileStore) { if (unsubscriberFileStore) {
unsubscriberFileStore(); unsubscriberFileStore();
} }
if(unsubscriberVolumeStore) { if (unsubscriberVolumeStore) {
unsubscriberVolumeStore(); unsubscriberVolumeStore();
} }
}) })
function onMute() { function changeVolume() {
audioManagerVolumeStore.setMuted(!get(audioManagerVolumeStore).muted);
localUserStore.setAudioPlayerMuted(get(audioManagerVolumeStore).muted);
setVolume();
}
function setVolume() {
if (get(audioManagerVolumeStore).muted) { if (get(audioManagerVolumeStore).muted) {
audioPlayerVolumeIcon.classList.add('muted'); audioPlayerVolumeIcon.classList.add('muted');
audioPlayerVol.value = "0"; audioPlayerVol.value = "0";
@ -76,9 +70,22 @@
audioPlayerVolumeIcon.classList.remove('mid'); audioPlayerVolumeIcon.classList.remove('mid');
} }
} }
audioManagerVolumeStore.setVolume(volume) }
localUserStore.setAudioPlayerVolume(get(audioManagerVolumeStore).volume);
function onMute() {
const muted = !get(audioManagerVolumeStore).muted;
audioManagerVolumeStore.setMuted(muted);
localUserStore.setAudioPlayerMuted(muted);
changeVolume();
}
function setVolume() {
volume = parseFloat(audioPlayerVol.value);
audioManagerVolumeStore.setVolume(volume);
localUserStore.setAudioPlayerVolume(volume);
audioManagerVolumeStore.setMuted(false);
localUserStore.setAudioPlayerMuted(false);
changeVolume();
} }
function setDecrease() { function setDecrease() {
@ -109,8 +116,7 @@
</g> </g>
</svg> </svg>
</span> </span>
<input type="range" min="0" max="1" step="0.025" bind:value={volume} bind:this={audioPlayerVol} <input type="range" min="0" max="1" step="0.025" bind:this={audioPlayerVol} on:change={setVolume}>
on:change={setVolume}>
</div> </div>
<div class="audio-manager-reduce-conversation"> <div class="audio-manager-reduce-conversation">
<label> <label>
@ -136,7 +142,7 @@
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
background-color: rgb(0,0,0,0.5); background-color: rgb(0, 0, 0, 0.5);
display: grid; display: grid;
grid-template-rows: 50% 50%; grid-template-rows: 50% 50%;
color: whitesmoke; color: whitesmoke;

2
front/src/Components/EmoteMenu/EmoteMenu.svelte
View File

@ -17,7 +17,7 @@
styleProperties: { styleProperties: {
'--font': 'Press Start 2P' '--font': 'Press Start 2P'
}, },
showSearch : false autoFocusSearch : false
}); });
picker.on("emoji", (selection) => { picker.on("emoji", (selection) => {

4
front/src/Phaser/Game/GameManager.ts
View File

@ -10,6 +10,7 @@ import { requestedCameraState, requestedMicrophoneState } from "../../Stores/Med
import { helpCameraSettingsVisibleStore } from "../../Stores/HelpCameraSettingsStore"; import { helpCameraSettingsVisibleStore } from "../../Stores/HelpCameraSettingsStore";
import Axios from "axios"; import Axios from "axios";
import { menuIconVisiblilityStore } from "../../Stores/MenuStore"; import { menuIconVisiblilityStore } from "../../Stores/MenuStore";
import { emoteMenuVisiblilityStore } from "../../Stores/EmoteStore";
/** /**
* This class should be responsible for any scene starting/stopping * This class should be responsible for any scene starting/stopping
@ -117,6 +118,7 @@ export class GameManager {
public gameSceneIsCreated(scene: GameScene) { public gameSceneIsCreated(scene: GameScene) {
this.currentGameSceneName = scene.scene.key; this.currentGameSceneName = scene.scene.key;
menuIconVisiblilityStore.set(true); menuIconVisiblilityStore.set(true);
emoteMenuVisiblilityStore.set(true);
} }
/** /**
@ -129,6 +131,7 @@ export class GameManager {
gameScene.cleanupClosingScene(); gameScene.cleanupClosingScene();
gameScene.createSuccessorGameScene(false, false); gameScene.createSuccessorGameScene(false, false);
menuIconVisiblilityStore.set(false); menuIconVisiblilityStore.set(false);
emoteMenuVisiblilityStore.set(false);
if (!this.scenePlugin.get(targetSceneName)) { if (!this.scenePlugin.get(targetSceneName)) {
this.scenePlugin.add(targetSceneName, sceneClass, false); this.scenePlugin.add(targetSceneName, sceneClass, false);
} }
@ -142,6 +145,7 @@ export class GameManager {
if (this.currentGameSceneName) { if (this.currentGameSceneName) {
this.scenePlugin.start(this.currentGameSceneName); this.scenePlugin.start(this.currentGameSceneName);
menuIconVisiblilityStore.set(true); menuIconVisiblilityStore.set(true);
emoteMenuVisiblilityStore.set(true);
} else { } else {
this.scenePlugin.run(fallbackSceneName); this.scenePlugin.run(fallbackSceneName);
} }

11
front/src/Phaser/Game/GameScene.ts
View File

@ -174,6 +174,7 @@ export class GameScene extends DirtyScene {
private peerStoreUnsubscribe!: () => void; private peerStoreUnsubscribe!: () => void;
private chatVisibilityUnsubscribe!: () => void; private chatVisibilityUnsubscribe!: () => void;
private emoteUnsubscribe!: () => void; private emoteUnsubscribe!: () => void;
private emoteMenuUnsubscribe!: () => void;
private biggestAvailableAreaStoreUnsubscribe!: () => void; private biggestAvailableAreaStoreUnsubscribe!: () => void;
MapUrlFile: string; MapUrlFile: string;
roomUrl: string; roomUrl: string;
@ -624,6 +625,15 @@ export class GameScene extends DirtyScene {
emoteStore.set(null); emoteStore.set(null);
} }
}); });
this.emoteMenuUnsubscribe = emoteMenuStore.subscribe((emoteMenu) => {
if (emoteMenu) {
this.userInputManager.disableControls();
} else {
this.userInputManager.restoreControls();
}
})
Promise.all([ this.connectionAnswerPromise as Promise<unknown>, ...scriptPromises ]).then(() => { Promise.all([ this.connectionAnswerPromise as Promise<unknown>, ...scriptPromises ]).then(() => {
this.scene.wake(); this.scene.wake();
}); });
@ -1349,6 +1359,7 @@ export class GameScene extends DirtyScene {
this.peerStoreUnsubscribe(); this.peerStoreUnsubscribe();
this.chatVisibilityUnsubscribe(); this.chatVisibilityUnsubscribe();
this.emoteUnsubscribe(); this.emoteUnsubscribe();
this.emoteMenuUnsubscribe();
this.biggestAvailableAreaStoreUnsubscribe(); this.biggestAvailableAreaStoreUnsubscribe();
iframeListener.unregisterAnswerer("getState"); iframeListener.unregisterAnswerer("getState");
iframeListener.unregisterAnswerer("loadTileset"); iframeListener.unregisterAnswerer("loadTileset");

1
front/src/Stores/EmoteStore.ts
View File

@ -14,5 +14,6 @@ function createEmoteMenuStore() {
}; };
} }
export const emoteMenuVisiblilityStore = writable(false);
export const emoteStore = writable<string | null>(null); export const emoteStore = writable<string | null>(null);
export const emoteMenuStore = createEmoteMenuStore(); export const emoteMenuStore = createEmoteMenuStore();