Merge branch 'develop' of github.com:thecodingmachine/workadventure into outline

# Conflicts: # front/src/Phaser/Game/GameScene.ts # front/src/Phaser/Player/Player.ts # front/src/index.ts # front/yarn.lock
2020-08-17 22:51:37 +02:00
parent 2d818ec79d e1989c1c21
commit 6b970adc6c
304 changed files with 2395 additions and 797 deletions
@@ -179,7 +179,7 @@ export class IoSocketController {
                    //add function to refresh position user in real time.
                    //this.refreshUserPosition(Client);

-                    const messageUserJoined = new MessageUserJoined(Client.userId, Client.name, Client.character, Client.position);
+                    const messageUserJoined = new MessageUserJoined(Client.userId, Client.name, Client.characterLayers, Client.position);

                    socket.to(roomId).emit(SockerIoEvent.JOIN_ROOM, messageUserJoined);

@@ -190,7 +190,7 @@ export class IoSocketController {
                            console.warn('Something went wrong. The World contains a user "'+user.id+"' but this user does not exist in the sockets list!");
                            return null;
                        }
-                        return new MessageUserPosition(user.id, player.name, player.character, player.position);
+                        return new MessageUserPosition(user.id, player.name, player.characterLayers, player.position);
                    }).filter((item: MessageUserPosition|null) => item !== null);

                    const listOfItems: {[itemId: string]: unknown} = {};
@@ -289,7 +289,7 @@ export class IoSocketController {
                }
                const Client = (socket as ExSocketInterface);
                Client.name = playerDetails.name;
-                Client.character = playerDetails.character;
+                Client.characterLayers = playerDetails.characterLayers;
                answerFn(Client.userId);
            });

@@ -9,6 +9,6 @@ export interface ExSocketInterface extends Socket, Identificable {
    webRtcRoomId: string;
    userId: string;
    name: string;
-    character: string;
+    characterLayers: string[];
    position: PointInterface;
 }
@@ -1,6 +1,6 @@
 import {PointInterface} from "_Model/Websocket/PointInterface";

 export class MessageUserJoined {
-    constructor(public userId: string, public name: string, public character: string, public position: PointInterface) {
+    constructor(public userId: string, public name: string, public characterLayers: string[], public position: PointInterface) {
    }
 }
@@ -6,6 +6,6 @@ export class Point implements PointInterface{
 }

 export class MessageUserPosition {
-    constructor(public userId: string, public name: string, public character: string, public position: PointInterface) {
+    constructor(public userId: string, public name: string, public characterLayers: string[], public position: PointInterface) {
    }
 }
@@ -3,6 +3,6 @@ import * as tg from "generic-type-guard";
 export const isSetPlayerDetailsMessage =
    new tg.IsInterface().withProperties({
        name: tg.isString,
-        character: tg.isString
+        characterLayers: tg.isArray(tg.isString)
    }).get();
 export type SetPlayerDetailsMessage = tg.GuardedType<typeof isSetPlayerDetailsMessage>;
@@ -39,7 +39,53 @@
        <title>WorkAdventure</title>
    </head>
    <body id="body" style="margin: 0">
-        <div id="webRtc" class="webrtc">
+        <div class="main-container">
+            <div id="game" class="game" style="/*background: red;*/">
+                <div id="game-overlay" class="game-overlay" style="/*background: violet*/;">
+                    <div id="main-section" class="main-section">
+                        <!--<div style="background: lightpink;">a</div>
+                        <div style="background: lightpink;">a</div> -->
+                    </div>
+                    <aside id="sidebar" class="sidebar">
+                        <!--<div style="background: lightgreen;">a</div>
+                        <div style="background: green;">b</div>
+                        <div style="background: darkgreen;">c</div>
+                        <div style="background: darkgreen;">d</div>-->
+                    </aside>
+                    <div id="chat-mode" class="chat-mode three-col" style="display: none;">
+                        <!--<div style="background: lightgreen;">a</div>
+                        <div style="background: green;">b</div>
+                        <div style="background: darkgreen;">c</div>
+                        <div style="background: darkolivegreen;">d</div>
+                        <div style="background: darkolivegreen;">d</div>
+                        <div style="background: darkgreen;">c</div>
+                        <div style="background: green;">b</div>
+                        <div style="background: lightgreen;">last elem for game</div>-->
+                    </div>
+
+
+                    <div id="activeCam" class="activeCam">
+                        <div id="div-myCamVideo" class="video-container">
+                            <video id="myCamVideo" autoplay muted></video>
+                        </div>
+                        <div class="btn-cam-action">
+                            <div class="btn-micro">
+                                <img id="microphone" src="resources/logos/microphone.svg">
+                                <img id="microphone-close" src="resources/logos/microphone-close.svg">
+                            </div>
+                            <div class="btn-video">
+                                <img id="cinema" src="resources/logos/cinema.svg">
+                                <img id="cinema-close" src="resources/logos/cinema-close.svg">
+                            </div>
+                        </div>
+                    </div>
+
+                </div>
+            </div>
+            <div id="cowebsite" class="cowebsite"></div>
+        </div>
+<!--
+    <div id="webRtc" class="webrtc">
            <div id="activeCam" class="activeCam">
                <div id="div-myCamVideo" class="video-container">
                    <video id="myCamVideo" autoplay muted></video>
@@ -54,11 +100,9 @@
                    <img id="cinema" src="resources/logos/cinema.svg">
                    <img id="cinema-close" src="resources/logos/cinema-close.svg">
                </div>
-                <!--<div class="btn-call">
-                    <img src="resources/logos/phone.svg">
-                </div>-->
            </div>
        </div>
+        -->
        <div id="webRtcSetup" class="webrtcsetup">
                <img id="webRtcSetupNoVideo" class="background-img" src="resources/logos/cinema-close.svg">
                <video id="myCamVideoSetup" autoplay muted></video>
--- a/Show More
+++ b/Show More