From 88c099fc1390ab9d2c9354caf9accb13f3c641fe Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?David=20N=C3=A9grier?= Date: Sun, 16 Aug 2020 23:19:04 +0200 Subject: [PATCH] Improving layout Fixing left-right switch on all cameras (except current player camera) --- front/dist/resources/style/style.css | 45 ++++++++++++++++------------ front/src/Phaser/Game/GameScene.ts | 41 +++++++++++++++---------- front/src/WebRtc/LayoutManager.ts | 6 +++- front/src/WebRtc/MediaManager.ts | 16 +++++----- 4 files changed, 63 insertions(+), 45 deletions(-) diff --git a/front/dist/resources/style/style.css b/front/dist/resources/style/style.css index 9fe4c9ea..8f188cca 100644 --- a/front/dist/resources/style/style.css +++ b/front/dist/resources/style/style.css @@ -23,10 +23,6 @@ body .message-info.info{ body .message-info.warning{ background: #ffa500d6; } -video{ - -webkit-transform: scaleX(-1); - transform: scaleX(-1); -} /*.webrtc{ display: none; position: absolute; @@ -99,10 +95,13 @@ video{ video#myCamVideo{ width: 15vw; + -webkit-transform: scaleX(-1); + transform: scaleX(-1); /*width: 200px;*/ /*height: 113px;*/ } + /*btn animation*/ .btn-cam-action div{ cursor: pointer; @@ -113,7 +112,7 @@ video#myCamVideo{ background: #666; box-shadow: 2px 2px 24px #444; border-radius: 48px; - transform: translateY(12vw); + transform: translateY(12vh); transition-timing-function: ease-in-out; bottom: 20px; } @@ -249,28 +248,37 @@ body { @media (min-aspect-ratio: 1/1) { .main-container { - flex-direction: row + flex-direction: row; } .game-overlay { - flex-direction: row + flex-direction: row; } .sidebar { - flex-direction: column + flex-direction: column; + } + + .sidebar > div { + height: 15%; } } @media (max-aspect-ratio: 1/1) { .main-container { - flex-direction: column + flex-direction: column; } .game-overlay { - flex-direction: column + flex-direction: column; } .sidebar { - flex-direction: row + flex-direction: row; + align-items: flex-end; + } + + .sidebar > div { + width: 15%; } } @@ -319,7 +327,7 @@ body { flex-wrap: wrap; } -.main-section div { +.main-section > div { margin: 5%; flex-basis: 90%; /*flex-shrink: 2;*/ @@ -331,8 +339,7 @@ body { } .sidebar > div { - height: 15%; - margin: 5%; + margin: 2%; } .chat-mode { @@ -348,22 +355,22 @@ body { margin: 1%; } -.chat-mode.one-col div { +.chat-mode.one-col > div { flex-basis: 98%; } -.chat-mode.two-col div { +.chat-mode.two-col > div { flex-basis: 48%; } -.chat-mode.three-col div { +.chat-mode.three-col > div { flex-basis: 31.333333%; } -.chat-mode.four-col div { +.chat-mode.four-col > div { flex-basis: 23%; } -.chat-mode div:last-child { +.chat-mode > div:last-child { flex-grow: 5; } diff --git a/front/src/Phaser/Game/GameScene.ts b/front/src/Phaser/Game/GameScene.ts index 487f3fb1..6505ad11 100644 --- a/front/src/Phaser/Game/GameScene.ts +++ b/front/src/Phaser/Game/GameScene.ts @@ -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 { diff --git a/front/src/WebRtc/LayoutManager.ts b/front/src/WebRtc/LayoutManager.ts index 670e05bd..7e99d496 100644 --- a/front/src/WebRtc/LayoutManager.ts +++ b/front/src/WebRtc/LayoutManager.ts @@ -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(); diff --git a/front/src/WebRtc/MediaManager.ts b/front/src/WebRtc/MediaManager.ts index fb7c34f1..9804317b 100644 --- a/front/src/WebRtc/MediaManager.ts +++ b/front/src/WebRtc/MediaManager.ts @@ -204,7 +204,7 @@ export class MediaManager {
- ${userName} + ${userName}
@@ -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"; } /**