Improving layout

Fixing left-right switch on all cameras (except current player camera)

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;
 }

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 {

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();

front/src/WebRtc/MediaManager.ts

@@ -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";
     }
 
     /**