Hotfix: Keep buttons on foreground

It's massively useful. In the long run we should make it configurable
and save it in local storage.

back/Dockerfile

@@ -1,11 +1,11 @@
 # protobuf build
-FROM node:14.15.4-buster-slim@sha256:cbae886186467bbfd274b82a234a1cdfbbd31201c2a6ee63a6893eefcf3c6e76 as builder
+FROM node:14-buster-slim as builder
 WORKDIR /usr/src
 COPY messages .
 RUN yarn install && yarn proto
 
 # typescript build
-FROM node:14.15.4-buster-slim@sha256:cbae886186467bbfd274b82a234a1cdfbbd31201c2a6ee63a6893eefcf3c6e76 as builder2
+FROM node:14-buster-slim as builder2
 WORKDIR /usr/src
 COPY back/yarn.lock back/package.json ./
 RUN yarn install
@@ -15,7 +15,7 @@ ENV NODE_ENV=production
 RUN yarn run tsc
 
 # final production image
-FROM node:14.15.4-buster-slim@sha256:cbae886186467bbfd274b82a234a1cdfbbd31201c2a6ee63a6893eefcf3c6e76
+FROM node:14-buster-slim
 WORKDIR /usr/src
 COPY back/yarn.lock back/package.json ./
 COPY --from=builder2 /usr/src/dist /usr/src/dist

front/Dockerfile

@@ -1,16 +1,38 @@
-FROM thecodingmachine/workadventure-back-base:latest as builder
-WORKDIR /var/www/messages
-COPY --chown=docker:docker messages .
+# protobuf build
+FROM node:14-buster-slim as builder
+WORKDIR /usr/src
+COPY messages .
 RUN yarn install && yarn proto
 
-# we are rebuilding on each deploy to cope with the API_URL environment URL
-FROM thecodingmachine/nodejs:14-apache
-
-COPY --chown=docker:docker front .
-COPY --from=builder --chown=docker:docker /var/www/messages/generated /var/www/html/src/Messages/generated
+# webpack build
+FROM node:14-buster-slim as builder2
+WORKDIR /usr/src
+COPY front/yarn.lock front/package.json ./
 RUN yarn install
 
+COPY front .
+COPY --from=builder /usr/src/generated src/Messages/generated
 ENV NODE_ENV=production
-ENV STARTUP_COMMAND_0="./templater.sh"
-ENV STARTUP_COMMAND_1="yarn run build"
-ENV APACHE_DOCUMENT_ROOT=dist/
+
+ARG ADMIN_URL=admin.$BASE_DOMAIN
+ARG API_URL=pusher.$BASE_DOMAIN
+ARG BASE_DOMAIN=workadventure.localhost
+ARG JITSI_PRIVATE_MODE
+ARG JITSI_URL
+ARG START_ROOM_URL
+ARG STUN_SERVER
+ARG TURN_PASSWORD
+ARG TURN_SERVER
+ARG TURN_USER
+ARG UPLOADER_URL=uploader.$BASE_DOMAIN
+
+RUN ./templater.sh
+RUN API_URL=$API_URL UPLOADER_URL=$UPLOADER_URL ADMIN_URL=$ADMIN_URL START_ROOM_URL=$START_ROOM_URL \
+    JITSI_URL=$JITSI_URL JITSI_PRIVATE_MODE=$JITSI_PRIVATE_MODE \
+    STUN_SERVER=$STUN_SERVER TURN_SERVER=$TURN_SERVER TURN_USER=$TURN_USER TURN_PASSWORD=$TURN_PASSWORD \
+    yarn run build
+
+# final production image
+FROM nginx:mainline-alpine
+COPY front/nginx-vhost.conf /etc/nginx/conf.d/default.conf
+COPY --from=builder2 /usr/src/dist /usr/share/nginx/html

front/dist/resources/html/gameMenu.html

@@ -1,4 +1,7 @@
 <style>
+    #gameMenu {
+        pointer-events: auto;
+    }
     #gameMenu button {
         background-color: black;
         color: white;

front/dist/resources/html/gameMenuIcon.html

@@ -1,4 +1,7 @@
 <style>
+    #menuIcon {
+        pointer-events: auto;
+    }
     #menuIcon button {
         background-color: black;
         color: white;
@@ -21,4 +24,4 @@
             <img src="/static/images/menu.svg">
         </button>
     </section>
-</main>
+</main>

front/dist/resources/html/gameQualityMenu.html

@@ -6,6 +6,7 @@
         height: 257px;
         margin: 20px auto 0;
         width: 298px;
+        pointer-events: auto;
     }
     #gameQuality .cautiousText {
         font-size: 50%;

front/dist/resources/html/gameReport.html

@@ -5,6 +5,7 @@
         border-radius: 6px;
         margin: 2px auto 0;
         width: 298px;
+        pointer-events: auto;
     }
     #gameReport h1 {
         background-image: linear-gradient(top, #f1f3f3, #d4dae0);

front/dist/resources/html/gameShare.html

@@ -6,6 +6,7 @@
         margin: 20px auto 0;
         width: 298px;
         height: 150px;
+        pointer-events: auto;
     }
     #gameShare h1 {
         background-image: linear-gradient(top, #f1f3f3, #d4dae0);

front/dist/resources/html/helpCameraSettings.html

@@ -6,6 +6,7 @@
         margin: 10px auto 0;
         width: 400px;
         height: 370px;
+        pointer-events: auto;
     }
     #helpCameraSettings h1 {
         background-image: linear-gradient(top, #f1f3f3, #d4dae0);

front/dist/resources/style/style.css

@@ -151,6 +151,7 @@ video#myCamVideo{
 
 
 .btn-cam-action {
+    z-index: 1;
     position: absolute;
     bottom: 0px;
     right: 0px;
@@ -580,12 +581,10 @@ input[type=range]:focus::-ms-fill-upper {
 }
 
 .chat-mode {
-    display: grid;
+    display: inline-grid;
     width: 100%;
-
-    align-items: flex-start;
-
     padding: 1%;
+    align-items: flex-start;
 }
 
 .chat-mode > div {
@@ -598,20 +597,21 @@ input[type=range]:focus::-ms-fill-upper {
 .chat-mode > div:hover {
     margin: 0%;
 }
+
 .chat-mode.one-col {
-    grid-template-columns: repeat(1, 1fr);
+    grid-template-columns: auto;
 }
 
 .chat-mode.two-col {
-    grid-template-columns: repeat(2, 1fr);
+    grid-template-columns: auto auto;
 }
 
 .chat-mode.three-col {
-    grid-template-columns: repeat(3, 1fr);
+    grid-template-columns: auto auto auto;
 }
 
 .chat-mode.four-col {
-    grid-template-columns: repeat(4, 1fr);
+    grid-template-columns: auto auto auto auto;
 }
 
 /*CONSOLE*/

front/nginx-vhost.conf

@@ -0,0 +1,14 @@
+server {
+    listen       8000;
+    listen  [::]:8000;
+    server_name  localhost;
+
+    location / {
+        root   /usr/share/nginx/html;
+        index  index.html index.htm;
+    }
+
+    location ~ ^/[@_]/ {
+        try_files $uri $uri/ /index.html;
+    }
+}

front/src/Phaser/Entity/PlayerTextures.ts

@@ -71,7 +71,29 @@ export const COLOR_RESOURCES: BodyResourceDescriptionListInterface = {
     "color_30": {name: "color_30", img: "resources/customisation/character_color/character_color29.png"},
     "color_31": {name: "color_31", img: "resources/customisation/character_color/character_color30.png"},
     "color_32": {name: "color_32", img: "resources/customisation/character_color/character_color31.png"},
-    "color_33": {name: "color_33", img: "resources/customisation/character_color/character_color32.png"}
+    "color_33": {name: "color_33", img: "resources/customisation/character_color/character_color32.png"},
+    "bodies_001": {name:"bodies_001",img: "resources/customisation/character_color/bodies_001.png"},
+    "bodies_002": {name:"bodies_002",img: "resources/customisation/character_color/bodies_002.png"},
+    "bodies_003": {name:"bodies_003",img: "resources/customisation/character_color/bodies_003.png"},
+    "bodies_004": {name:"bodies_004",img: "resources/customisation/character_color/bodies_004.png"},
+    "bodies_005": {name:"bodies_005",img: "resources/customisation/character_color/bodies_005.png"},
+    "bodies_006": {name:"bodies_006",img: "resources/customisation/character_color/bodies_006.png"},
+    "bodies_007": {name:"bodies_007",img: "resources/customisation/character_color/bodies_007.png"},
+    "bodies_008": {name:"bodies_008",img: "resources/customisation/character_color/bodies_008.png"},
+    "bodies_009": {name:"bodies_009",img: "resources/customisation/character_color/bodies_009.png"},
+    "bodies_010": {name:"bodies_010",img: "resources/customisation/character_color/bodies_010.png"},
+    "bodies_011": {name:"bodies_011",img: "resources/customisation/character_color/bodies_011.png"},
+    "bodies_012": {name:"bodies_012",img: "resources/customisation/character_color/bodies_012.png"},
+    "bodies_013": {name:"bodies_013",img: "resources/customisation/character_color/bodies_013.png"},
+    "bodies_014": {name:"bodies_014",img: "resources/customisation/character_color/bodies_014.png"},
+    "bodies_015": {name:"bodies_015",img: "resources/customisation/character_color/bodies_015.png"},
+    "bodies_016": {name:"bodies_016",img: "resources/customisation/character_color/bodies_016.png"},
+    "bodies_017": {name:"bodies_017",img: "resources/customisation/character_color/bodies_017.png"},
+    "old_01": {name:"old_01",img: "resources/customisation/character_color/old_01.png"},
+    "old_02": {name:"old_02",img: "resources/customisation/character_color/old_02.png"},
+    "old_03": {name:"old_03",img: "resources/customisation/character_color/old_03.png"},
+    "old_04": {name:"old_04",img: "resources/customisation/character_color/old_04.png"},
+    "old_05": {name:"old_05",img: "resources/customisation/character_color/old_05.png"}
 };
 
 export const EYES_RESOURCES: BodyResourceDescriptionListInterface = {
@@ -187,6 +209,7 @@ export const HAIR_RESOURCES: BodyResourceDescriptionListInterface = {
 
 
 export const CLOTHES_RESOURCES: BodyResourceDescriptionListInterface = {
+    "clothes_0": {name:"clothes_0", img: "resources/customisation/character_clothes/naked.png"},
     "clothes_1": {name:"clothes_1", img: "resources/customisation/character_clothes/character_clothes0.png"},
     "clothes_2": {name:"clothes_2", img: "resources/customisation/character_clothes/character_clothes1.png"},
     "clothes_3": {name:"clothes_3", img: "resources/customisation/character_clothes/character_clothes2.png"},
@@ -257,10 +280,17 @@ export const CLOTHES_RESOURCES: BodyResourceDescriptionListInterface = {
     "clothes_68": {name:"clothes_68",img: "resources/customisation/character_clothes/character_clothes67.png"},
     "clothes_69": {name:"clothes_69",img: "resources/customisation/character_clothes/character_clothes68.png"},
     "clothes_70": {name:"clothes_70",img: "resources/customisation/character_clothes/character_clothes69.png"},
+    "clothes_red_stripes": {name:"clothes_red_stripes",img: "resources/customisation/character_clothes/red_stripes.png"},
     "clothes_pride_shirt": {name:"clothes_pride_shirt",img: "resources/customisation/character_clothes/pride_shirt.png"},
     "clothes_black_hoodie": {name:"clothes_black_hoodie",img: "resources/customisation/character_clothes/black_hoodie.png"},
     "clothes_white_hoodie": {name:"clothes_white_hoodie",img: "resources/customisation/character_clothes/white_hoodie.png"},
-    "clothes_engelbert": {name:"clothes_engelbert",img: "resources/customisation/character_clothes/engelbert.png"}
+    "clothes_engelbert": {name:"clothes_engelbert",img: "resources/customisation/character_clothes/engelbert.png"},
+    "clothes_vest_yellow": {name:"clothes_vest_yellow",img: "resources/customisation/character_clothes/vest_yellow.png"},
+    "clothes_vest_orange": {name:"clothes_vest_orange",img: "resources/customisation/character_clothes/vest_orange.png"},
+    "clothes_vest_red": {name:"clothes_vest_red",img: "resources/customisation/character_clothes/vest_red.png"},
+    "clothes_vest_purple": {name:"clothes_vest_purple",img: "resources/customisation/character_clothes/vest_purple.png"},
+    "clothes_vest_blue": {name:"clothes_vest_blue",img: "resources/customisation/character_clothes/vest_blue.png"},
+    "clothes_vest_green": {name:"clothes_vest_green",img: "resources/customisation/character_clothes/vest_green.png"}
 };
 
 export const HATS_RESOURCES: BodyResourceDescriptionListInterface = {
@@ -290,7 +320,12 @@ export const HATS_RESOURCES: BodyResourceDescriptionListInterface = {
     "hats_24": {name: "hats_24", img: "resources/customisation/character_hats/character_hats24.png"},
     "hats_25": {name: "hats_25", img: "resources/customisation/character_hats/character_hats25.png"},
     "hats_26": {name: "hats_26", img: "resources/customisation/character_hats/character_hats26.png"},
-    "tinfoil_hat1": {name: "tinfoil_hat1", img: "resources/customisation/character_hats/tinfoil_hat1.png"}
+    "tinfoil_hat1": {name: "tinfoil_hat1", img: "resources/customisation/character_hats/tinfoil_hat1.png"},
+    "purple_hat": {name: "purple_hat", img: "resources/customisation/character_hats/purple_hat.png"},
+    "diving_mask1": {name: "diving_mask1", img: "resources/customisation/character_hats/diving_mask1.png"},
+    "accessory_mask": {name: "accessory_mask", img: "resources/customisation/character_accessories/mask.png"},
+    "sign-dont-talk": {name: "sign-dont-talk", img: "resources/customisation/character_accessories/sign-dont-talk.png"},
+    "sign-talk": {name: "sign-talk", img: "resources/customisation/character_accessories/sign-talk.png"}
 };
 
 export const ACCESSORIES_RESOURCES: BodyResourceDescriptionListInterface = {
@@ -327,7 +362,14 @@ export const ACCESSORIES_RESOURCES: BodyResourceDescriptionListInterface = {
     "accessory_31": {name: "accessory_31", img: "resources/customisation/character_accessories/character_accessories31.png"},
     "accessory_32": {name: "accessory_32", img: "resources/customisation/character_accessories/character_accessories32.png"},
     "accessory_mate_bottle": {name: "accessory_mate_bottle", img: "resources/customisation/character_accessories/mate_bottle1.png"},
-    "accessory_mask": {name: "accessory_mask", img: "resources/customisation/character_accessories/mask.png"}
+    "accessory_mask": {name: "accessory_mask", img: "resources/customisation/character_accessories/mask.png"},
+    "accessory_wings_01": {name: "accessory_wings_01", img: "resources/customisation/character_accessories/wings_01.png"},
+    "accessory_wings_02": {name: "accessory_wings_02", img: "resources/customisation/character_accessories/wings_02.png"},
+    "accessory_wheelchair": {name: "accessory_wheelchair", img: "resources/customisation/character_accessories/wheelchair.png"},
+    "accessory_backpack": {name: "accessory_backpack", img: "resources/customisation/character_accessories/backpack.png"},
+    "accessory_ring": {name: "accessory_ring", img: "resources/customisation/character_accessories/ring.png"},
+    "accessory_sign-dont-talk": {name: "accessory_sign-dont-talk", img: "resources/customisation/character_accessories/sign-dont-talk.png"},
+    "accessory_sign_talk": {name: "accessory_sign-talk", img: "resources/customisation/character_accessories/sign-talk.png"}
 };
 
 export const LAYERS: BodyResourceDescriptionListInterface[] = [
@@ -341,4 +383,4 @@ export const LAYERS: BodyResourceDescriptionListInterface[] = [
 
 export const OBJECTS: BodyResourceDescriptionInterface[] = [
     {name:'teleportation', img:'resources/objects/teleportation.png'},
-];
+];

front/src/WebRtc/LayoutManager.ts

@@ -24,7 +24,6 @@ export interface CenterListener {
 }
 
 export const ON_ACTION_TRIGGER_BUTTON = 'onaction';
-
 export const TRIGGER_WEBSITE_PROPERTIES = 'openWebsiteTrigger';
 export const TRIGGER_JITSI_PROPERTIES = 'jitsiTrigger';
 
@@ -195,7 +194,7 @@ class LayoutManager {
         } else {
             HtmlUtils.getElementByIdOrFail<HTMLDivElement>('sidebar').style.display = 'none';
             HtmlUtils.getElementByIdOrFail<HTMLDivElement>('main-section').style.display = 'none';
-            HtmlUtils.getElementByIdOrFail<HTMLDivElement>('chat-mode').style.display = 'grid';
+            HtmlUtils.getElementByIdOrFail<HTMLDivElement>('chat-mode').style.display = 'inline-grid';
         }
 
         for (const div of this.importantDivs.values()) {

front/src/WebRtc/MediaManager.ts

@@ -11,7 +11,7 @@ let valueVideo = 20;
 if(localValueVideo){
     valueVideo = parseInt(localValueVideo);
 }
-let videoConstraint: boolean|MediaTrackConstraints = {
+let videoConstraint: MediaTrackConstraints = {
     width: { min: 640, ideal: 1280, max: 1920 },
     height: { min: 400, ideal: 720 },
     frameRate: { ideal: valueVideo },
@@ -19,6 +19,12 @@ let videoConstraint: boolean|MediaTrackConstraints = {
     resizeMode: 'crop-and-scale',
     aspectRatio: 1.777777778
 };
+const audioConstraint: MediaTrackConstraints = {
+    // TODO: Make these values configurable in the game settings menu and store them in local storage
+    autoGainControl: false,
+    echoCancellation: true,
+    noiseSuppression: true
+};
 
 export type UpdatedLocalStreamCallback = (media: MediaStream|null) => void;
 export type StartScreenSharingCallback = (media: MediaStream) => void;
@@ -41,7 +47,7 @@ export class MediaManager {
     webrtcInAudio: HTMLAudioElement;
     private webrtcOutAudio: HTMLAudioElement;
     constraintsMedia : MediaStreamConstraints = {
-        audio: true,
+        audio: audioConstraint,
         video: videoConstraint
     };
     updatedLocalStreamCallBacks : Set<UpdatedLocalStreamCallback> = new Set<UpdatedLocalStreamCallback>();
@@ -239,7 +245,7 @@ export class MediaManager {
     }
 
     public enableMicrophone() {
-        this.constraintsMedia.audio = true;
+        this.constraintsMedia.audio = audioConstraint;
 
         this.getCamera().then((stream) => {
             //TODO show error message tooltip upper of camera button

pusher/Dockerfile

@@ -1,11 +1,11 @@
 # protobuf build
-FROM node:14.15.4-buster-slim@sha256:cbae886186467bbfd274b82a234a1cdfbbd31201c2a6ee63a6893eefcf3c6e76 as builder
+FROM node:14-buster-slim as builder
 WORKDIR /usr/src
 COPY messages .
 RUN yarn install && yarn proto
 
 # typescript build
-FROM node:14.15.4-buster-slim@sha256:cbae886186467bbfd274b82a234a1cdfbbd31201c2a6ee63a6893eefcf3c6e76 as builder2
+FROM node:14-buster-slim as builder2
 WORKDIR /usr/src
 COPY pusher/yarn.lock pusher/package.json ./
 RUN yarn install
@@ -15,7 +15,7 @@ ENV NODE_ENV=production
 RUN yarn run tsc
 
 # final production image
-FROM node:14.15.4-buster-slim@sha256:cbae886186467bbfd274b82a234a1cdfbbd31201c2a6ee63a6893eefcf3c6e76
+FROM node:14-buster-slim
 WORKDIR /usr/src
 COPY pusher/yarn.lock pusher/package.json ./
 COPY --from=builder2 /usr/src/dist /usr/src/dist