Improving layout
Fixing left-right switch on all cameras (except current player camera)
This commit is contained in:
parent
0041e088a4
commit
88c099fc13
45
front/dist/resources/style/style.css
vendored
45
front/dist/resources/style/style.css
vendored
@ -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;
|
||||
}
|
||||
|
@ -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 {
|
||||
|
@ -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();
|
||||
|
@ -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";
|
||||
}
|
||||
|
||||
/**
|
||||
|
Loading…
Reference in New Issue
Block a user