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

Improving layout

Browse source 
Fixing left-right switch on all cameras (except current player camera)
This commit is contained in:
David Négrier 2020-08-16 23:19:04 +02:00
parent 0041e088a4
commit 88c099fc13
4 changed files with 63 additions and 45 deletions
Download patch file Download diff file Expand all files Collapse all files

41
front/src/Phaser/Game/GameScene.ts
View file

@ -1,34 +1,33 @@
import {GameManager, gameManager, HasMovedEvent} from "./GameManager";
import {
Connection,
GroupCreatedUpdatedMessageInterface, MessageUserJoined,
GroupCreatedUpdatedMessageInterface,
MessageUserJoined,
MessageUserMovedInterface,
MessageUserPositionInterface, PointInterface, PositionInterface
MessageUserPositionInterface,
PointInterface,
PositionInterface
} from "../../Connection";
import {CurrentGamerInterface, hasMovedEventName, Player} from "../Player/Player";
import { DEBUG_MODE, ZOOM_LEVEL, POSITION_DELAY } from "../../Enum/EnvironmentVariable";
import {
ITiledMap,
ITiledMapLayer,
ITiledMapLayerProperty,
ITiledTileSet
} from "../Map/ITiledMap";
import {DEBUG_MODE, POSITION_DELAY, ZOOM_LEVEL} from "../../Enum/EnvironmentVariable";
import {ITiledMap, ITiledMapLayer, ITiledMapLayerProperty, ITiledTileSet} from "../Map/ITiledMap";
import {PLAYER_RESOURCES, PlayerResourceDescriptionInterface} from "../Entity/Character";
import Texture = Phaser.Textures.Texture;
import Sprite = Phaser.GameObjects.Sprite;
import CanvasTexture = Phaser.Textures.CanvasTexture;
import {AddPlayerInterface} from "./AddPlayerInterface";
import {PlayerAnimationNames} from "../Player/Animation";
import {PlayerMovement} from "./PlayerMovement";
import {PlayersPositionInterpolator} from "./PlayersPositionInterpolator";
import {RemotePlayer} from "../Entity/RemotePlayer";
import GameObject = Phaser.GameObjects.GameObject;
import { Queue } from 'queue-typescript';
import {Queue} from 'queue-typescript';
import {SimplePeer} from "../../WebRtc/SimplePeer";
import {ReconnectingSceneName} from "../Reconnecting/ReconnectingScene";
import FILE_LOAD_ERROR = Phaser.Loader.Events.FILE_LOAD_ERROR;
import {FourOFourSceneName} from "../Reconnecting/FourOFourScene";
import {LAYERS, loadAllLayers} from "../Entity/body_character";
import {loadAllLayers} from "../Entity/body_character";
import {layoutManager, LayoutMode} from "../../WebRtc/LayoutManager";
import Texture = Phaser.Textures.Texture;
import Sprite = Phaser.GameObjects.Sprite;
import CanvasTexture = Phaser.Textures.CanvasTexture;
import GameObject = Phaser.GameObjects.GameObject;
import FILE_LOAD_ERROR = Phaser.Loader.Events.FILE_LOAD_ERROR;
export enum Textures {
@ -364,6 +363,16 @@ export class GameScene extends Phaser.Scene {
}
}, 500);
}
// FIXME: change this to use the class for input
this.input.keyboard.on('keyup-' + 'M', function () {
const mode = layoutManager.getLayoutMode();
if (mode === LayoutMode.Presentation) {
layoutManager.switchLayoutMode(LayoutMode.VideoChat);
} else {
layoutManager.switchLayoutMode(LayoutMode.Presentation);
}
});
}
private getExitSceneUrl(layer: ITiledMapLayer): string|undefined {

6
front/src/WebRtc/LayoutManager.ts
View file

@ -103,7 +103,7 @@ class LayoutManager {
}
}
private switchLayoutMode(layoutMode: LayoutMode) {
public switchLayoutMode(layoutMode: LayoutMode) {
this.mode = layoutMode;
if (layoutMode === LayoutMode.Presentation) {
@ -123,6 +123,10 @@ class LayoutManager {
this.positionDiv(div, DivImportance.Normal);
}
}
public getLayoutMode(): LayoutMode {
return this.mode;
}
}
const layoutManager = new LayoutManager();

16
front/src/WebRtc/MediaManager.ts
View file

@ -204,7 +204,7 @@ export class MediaManager {
<div id="div-${userId}" class="video-container">
<div class="connecting-spinner"></div>
<div class="rtc-error" style="display: none"></div>
<i style="background-color: ${color};">${userName}</i>
<i id="name-${userId}" style="background-color: ${color};">${userName}</i>
<img id="microphone-${userId}" src="resources/logos/microphone-close.svg">
<video id="${userId}" autoplay></video>
</div>
@ -248,11 +248,10 @@ export class MediaManager {
if (element) {
element.style.opacity = "0";
}
element = document.getElementById(`div-${userId}`);
if (!element) {
return;
element = document.getElementById(`name-${userId}`);
if (element) {
element.style.display = "block";
}
element.style.borderStyle = "solid";
}
/**
@ -264,11 +263,10 @@ export class MediaManager {
if(element){
element.style.opacity = "1";
}
element = document.getElementById(`div-${userId}`);
if(!element){
return;
element = document.getElementById(`name-${userId}`);
if(element){
element.style.display = "none";
}
element.style.borderStyle = "none";
}
/**