Improving layout

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

View File

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

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 {

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

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