diff --git a/back/src/Assets/Maps/Floor0/floor0.json b/back/src/Assets/Maps/Floor0/floor0.json
index 987004e6..6f1e7c09 100644
--- a/back/src/Assets/Maps/Floor0/floor0.json
+++ b/back/src/Assets/Maps/Floor0/floor0.json
@@ -15,6 +15,60 @@
  "height":34,
  "infinite":false,
  "layers":[
+        {
+         "data":[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 309, 309, 309, 309, 309, 309, 309, 309, 309, 309, 309, 309, 309, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 309, 309, 309, 309, 309, 309, 309, 309, 309, 309, 309, 309, 309, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 309, 309, 309, 309, 309, 309, 309, 309, 309, 309, 309, 309, 309, 309, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 309, 309, 309, 309, 309, 309, 309, 309, 309, 309, 309, 309, 309, 309, 309, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 309, 309, 309, 309, 309, 309, 309, 309, 309, 309, 309, 309, 309, 309, 309, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 309, 309, 309, 309, 309, 309, 309, 309, 309, 309, 309, 309, 309, 309, 309, 309, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 309, 309, 309, 309, 309, 309, 309, 309, 309, 309, 309, 309, 309, 309, 309, 309, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+         "height":34,
+         "id":23,
+         "name":"patio",
+         "opacity":1,
+         "properties":[
+                {
+                 "name":"jitsiRoom",
+                 "type":"string",
+                 "value":"tcm-patio"
+                }],
+         "type":"tilelayer",
+         "visible":true,
+         "width":46,
+         "x":0,
+         "y":0
+        }, 
+        {
+         "data":[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 309, 309, 309, 309, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 309, 309, 309, 309, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 309, 309, 309, 309, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+         "height":34,
+         "id":22,
+         "name":"chillzone-2",
+         "opacity":1,
+         "properties":[
+                {
+                 "name":"jitsiRoom",
+                 "type":"string",
+                 "value":"tcm-chillzone-2"
+                }],
+         "type":"tilelayer",
+         "visible":true,
+         "width":46,
+         "x":0,
+         "y":0
+        }, 
+        {
+         "data":[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 309, 309, 309, 309, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 309, 309, 309, 309, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 309, 309, 309, 309, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+         "height":34,
+         "id":21,
+         "name":"chillzone-1",
+         "opacity":1,
+         "properties":[
+                {
+                 "name":"jitsiRoom",
+                 "type":"string",
+                 "value":"tcm-chillzone-1"
+                }],
+         "type":"tilelayer",
+         "visible":true,
+         "width":46,
+         "x":0,
+         "y":0
+        }, 
         {
          "data":[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 309, 309, 309, 309, 0, 0, 309, 309, 309, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 309, 309, 309, 309, 0, 0, 309, 309, 309, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 309, 309, 309, 309, 309, 309, 309, 309, 309, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 309, 309, 309, 309, 309, 309, 309, 309, 309, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 309, 309, 309, 309, 309, 309, 309, 309, 309, 309, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
          "height":34,
@@ -63,6 +117,42 @@
          "x":0,
          "y":0
         }, 
+        {
+         "data":[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 309, 309, 309, 309, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 309, 309, 309, 309, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 309, 309, 309, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 309, 309, 309, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 309, 309, 309, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 309, 309, 309, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 309, 309, 309, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+         "height":34,
+         "id":18,
+         "name":"openSwile",
+         "opacity":1,
+         "properties":[
+                {
+                 "name":"openWebsite",
+                 "type":"string",
+                 "value":"https:\/\/app.swile.co\/"
+                }],
+         "type":"tilelayer",
+         "visible":true,
+         "width":46,
+         "x":0,
+         "y":0
+        }, 
+        {
+         "data":[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 309, 309, 309, 309, 309, 309, 309, 309, 309, 309, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 309, 309, 309, 309, 309, 309, 309, 309, 309, 309, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 309, 309, 309, 309, 309, 309, 309, 309, 309, 309, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 309, 309, 309, 309, 309, 309, 309, 309, 309, 309, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 309, 309, 309, 309, 309, 309, 309, 309, 309, 309, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 309, 309, 309, 309, 309, 309, 309, 309, 309, 309, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+         "height":34,
+         "id":19,
+         "name":"jitsyAmphi",
+         "opacity":1,
+         "properties":[
+                {
+                 "name":"jitsiRoom",
+                 "type":"string",
+                 "value":"tcm-amphi"
+                }],
+         "type":"tilelayer",
+         "visible":true,
+         "width":46,
+         "x":0,
+         "y":0
+        }, 
         {
          "data":[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 294, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 294, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 294, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 294, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 294, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 294, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 294, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 294, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 294, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
          "height":34,
@@ -224,7 +314,7 @@
          "x":0,
          "y":0
         }],
- "nextlayerid":18,
+ "nextlayerid":24,
  "nextobjectid":1,
  "orientation":"orthogonal",
  "renderorder":"right-down",
diff --git a/back/src/Assets/Maps/Floor1/floor1.json b/back/src/Assets/Maps/Floor1/floor1.json
index 3ba25159..70cd8abc 100644
--- a/back/src/Assets/Maps/Floor1/floor1.json
+++ b/back/src/Assets/Maps/Floor1/floor1.json
@@ -21,6 +21,60 @@
          "x":0,
          "y":0
         }, 
+        {
+         "data":[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 4861, 4861, 4861, 4861, 4861, 4861, 4861, 4861, 4861, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 4861, 4861, 4861, 4861, 4861, 4861, 4861, 4861, 4861, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 4861, 4861, 4861, 4861, 4861, 4861, 4861, 4861, 4861, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 4861, 4861, 4861, 4861, 4861, 4861, 4861, 4861, 4861, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 4861, 4861, 4861, 4861, 4861, 4861, 4861, 4861, 4861, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+         "height":18,
+         "id":14,
+         "name":"radiant_meeting_room",
+         "opacity":1,
+         "properties":[
+                {
+                 "name":"jitsiRoom",
+                 "type":"string",
+                 "value":"tcm-radiant"
+                }],
+         "type":"tilelayer",
+         "visible":true,
+         "width":46,
+         "x":0,
+         "y":0
+        }, 
+        {
+         "data":[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 4861, 4861, 4861, 4861, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 4861, 4861, 4861, 4861, 4861, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 4861, 4861, 4861, 4861, 4861, 4861, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 4861, 4861, 4861, 4861, 4861, 4861, 4861, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 4861, 4861, 4861, 4861, 4861, 4861, 4861, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 4861, 4861, 4861, 4861, 4861, 4861, 4861, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+         "height":18,
+         "id":16,
+         "name":"white-meeting-room",
+         "opacity":1,
+         "properties":[
+                {
+                 "name":"jitsiRoom",
+                 "type":"string",
+                 "value":"tcm-white-room"
+                }],
+         "type":"tilelayer",
+         "visible":true,
+         "width":46,
+         "x":0,
+         "y":0
+        }, 
+        {
+         "data":[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 4861, 4861, 4861, 4861, 4861, 4861, 4861, 4861, 4861, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 4861, 4861, 4861, 4861, 4861, 4861, 4861, 4861, 4861, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 4861, 4861, 4861, 4861, 4861, 4861, 4861, 4861, 4861, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 4861, 4861, 4861, 4861, 4861, 4861, 4861, 4861, 4861, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 4861, 4861, 4861, 4861, 4861, 4861, 4861, 4861, 4861, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 4861, 4861, 4861, 4861, 4861, 4861, 4861, 4861, 4861, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+         "height":18,
+         "id":15,
+         "name":"dire-meeting-room",
+         "opacity":1,
+         "properties":[
+                {
+                 "name":"jitsiRoom",
+                 "type":"string",
+                 "value":"tcm-dire"
+                }],
+         "type":"tilelayer",
+         "visible":true,
+         "width":46,
+         "x":0,
+         "y":0
+        }, 
         {
          "data":[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 67, 68, 69, 70, 71, 72, 73, 74, 75, 76, 77, 78, 79, 80, 81, 82, 83, 84, 85, 86, 87, 88, 89, 90, 91, 92, 93, 94, 95, 96, 97, 98, 99, 100, 101, 102, 103, 104, 105, 106, 107, 108, 109, 110, 111, 112, 133, 134, 135, 136, 137, 138, 139, 140, 141, 142, 143, 144, 145, 146, 147, 148, 149, 150, 151, 152, 153, 154, 155, 156, 157, 158, 159, 160, 161, 162, 163, 164, 165, 166, 167, 168, 169, 170, 171, 172, 173, 174, 175, 176, 177, 178, 199, 200, 201, 202, 203, 204, 205, 206, 207, 208, 209, 210, 211, 212, 213, 214, 215, 216, 217, 218, 219, 220, 221, 222, 223, 224, 225, 226, 227, 228, 229, 230, 231, 232, 233, 234, 235, 236, 237, 238, 239, 240, 241, 242, 243, 244, 265, 266, 267, 268, 269, 270, 271, 272, 273, 274, 275, 276, 277, 278, 279, 280, 281, 282, 283, 284, 285, 286, 287, 288, 289, 290, 291, 292, 293, 294, 295, 296, 297, 298, 299, 300, 301, 302, 303, 304, 305, 306, 307, 308, 309, 310, 331, 332, 333, 334, 335, 336, 337, 338, 339, 340, 341, 342, 343, 344, 345, 346, 347, 348, 349, 350, 351, 352, 353, 354, 355, 356, 357, 358, 359, 360, 361, 362, 363, 364, 365, 366, 367, 368, 369, 370, 371, 372, 373, 374, 375, 376, 397, 398, 399, 400, 401, 402, 403, 404, 405, 406, 407, 408, 409, 410, 411, 412, 413, 414, 415, 416, 417, 418, 419, 420, 421, 422, 423, 424, 425, 426, 427, 428, 429, 430, 431, 432, 433, 434, 435, 436, 437, 438, 439, 440, 441, 442, 463, 464, 465, 466, 467, 468, 469, 470, 471, 472, 473, 474, 475, 476, 477, 478, 479, 480, 481, 482, 483, 484, 485, 486, 487, 488, 489, 490, 491, 492, 493, 494, 495, 496, 497, 498, 499, 500, 501, 502, 503, 504, 505, 506, 507, 508, 529, 530, 531, 532, 533, 534, 535, 536, 537, 538, 539, 540, 541, 542, 543, 544, 545, 546, 547, 548, 549, 550, 551, 552, 553, 554, 555, 556, 557, 558, 559, 560, 561, 562, 563, 564, 565, 566, 567, 568, 569, 570, 571, 572, 573, 574, 595, 596, 597, 598, 599, 600, 601, 602, 603, 604, 605, 606, 607, 608, 609, 610, 611, 612, 613, 614, 615, 616, 617, 618, 619, 620, 621, 622, 623, 624, 625, 626, 627, 628, 629, 630, 631, 632, 633, 634, 635, 636, 637, 638, 639, 640, 661, 662, 663, 664, 665, 666, 667, 668, 669, 670, 671, 672, 673, 674, 675, 676, 677, 678, 679, 680, 681, 682, 683, 684, 685, 686, 687, 688, 689, 690, 691, 692, 693, 694, 695, 696, 697, 698, 699, 700, 701, 702, 703, 704, 705, 706, 727, 728, 729, 730, 731, 732, 733, 734, 735, 736, 737, 738, 739, 740, 741, 742, 743, 744, 745, 746, 747, 748, 749, 750, 751, 752, 753, 754, 755, 756, 757, 758, 759, 760, 761, 762, 763, 764, 765, 766, 767, 768, 769, 770, 771, 772, 793, 794, 795, 796, 797, 798, 799, 800, 801, 802, 803, 804, 805, 806, 807, 808, 809, 810, 811, 812, 813, 814, 815, 816, 817, 818, 819, 820, 821, 822, 823, 824, 825, 826, 827, 828, 829, 830, 831, 832, 833, 834, 835, 836, 837, 838, 859, 860, 861, 862, 863, 864, 865, 866, 867, 868, 869, 870, 871, 872, 873, 874, 875, 876, 877, 878, 879, 880, 881, 882, 883, 884, 885, 886, 887, 888, 889, 890, 891, 892, 893, 894, 895, 896, 897, 898, 899, 900, 901, 902, 903, 904, 925, 926, 927, 928, 929, 930, 931, 932, 933, 934, 935, 936, 937, 938, 939, 940, 941, 942, 943, 944, 945, 946, 947, 948, 949, 950, 951, 952, 953, 954, 955, 956, 957, 958, 959, 960, 961, 962, 963, 964, 965, 966, 967, 968, 969, 970, 991, 992, 993, 994, 995, 996, 997, 998, 999, 1000, 1001, 1002, 1003, 1004, 1005, 1006, 1007, 1008, 1009, 1010, 1011, 1012, 1013, 1014, 1015, 1016, 1017, 1018, 1019, 1020, 1021, 1022, 1023, 1024, 1025, 1026, 1027, 1028, 1029, 1030, 1031, 1032, 1033, 1034, 1035, 1036, 1057, 1058, 1059, 1060, 1061, 1062, 1063, 1064, 1065, 1066, 1067, 1068, 1069, 1070, 1071, 1072, 1073, 1074, 1075, 1076, 1077, 1078, 1079, 1080, 1081, 1082, 1083, 1084, 1085, 1086, 1087, 1088, 1089, 1090, 1091, 1092, 1093, 1094, 1095, 1096, 1097, 1098, 1099, 1100, 1101, 1102, 1123, 1124, 1125, 1126, 1127, 1128, 1129, 1130, 1131, 1132, 1133, 1134, 1135, 1136, 1137, 1138, 1139, 1140, 1141, 1142, 1143, 1144, 1145, 1146, 1147, 1148, 1149, 1150, 1151, 1152, 1153, 1154, 1155, 1156, 1157, 1158, 1159, 1160, 1161, 1162, 1163, 1164, 1165, 1166, 1167, 1168],
          "height":18,
@@ -134,7 +188,7 @@
          "x":0,
          "y":0
         }],
- "nextlayerid":14,
+ "nextlayerid":17,
  "nextobjectid":1,
  "orientation":"orthogonal",
  "renderorder":"right-down",
@@ -505,6 +559,29 @@
                         }]
                 }],
          "tilewidth":32
+        }, 
+        {
+         "columns":8,
+         "firstgid":4809,
+         "image":"..\/Floor0\/floortileset.png",
+         "imageheight":256,
+         "imagewidth":256,
+         "margin":0,
+         "name":"floortileset",
+         "spacing":0,
+         "tilecount":64,
+         "tileheight":32,
+         "tiles":[
+                {
+                 "id":37,
+                 "properties":[
+                        {
+                         "name":"collides",
+                         "type":"bool",
+                         "value":true
+                        }]
+                }],
+         "tilewidth":32
         }],
  "tilewidth":32,
  "type":"map",
diff --git a/back/src/Controller/IoSocketController.ts b/back/src/Controller/IoSocketController.ts
index 28dd2da2..5f1bc47f 100644
--- a/back/src/Controller/IoSocketController.ts
+++ b/back/src/Controller/IoSocketController.ts
@@ -13,7 +13,6 @@ import {MessageUserJoined} from "../Model/Websocket/MessageUserJoined";
 import {MessageUserMoved} from "../Model/Websocket/MessageUserMoved";
 import si from "systeminformation";
 import {Gauge} from "prom-client";
-import os from 'os';
 import {TokenInterface} from "../Controller/AuthenticateController";
 import {isJoinRoomMessageInterface} from "../Model/Websocket/JoinRoomMessage";
 import {isPointInterface, PointInterface} from "../Model/Websocket/PointInterface";
@@ -28,12 +27,14 @@ enum SockerIoEvent {
     USER_MOVED = "user-moved", // From server to client
     USER_LEFT = "user-left", // From server to client
     WEBRTC_SIGNAL = "webrtc-signal",
+    WEBRTC_SCREEN_SHARING_SIGNAL = "webrtc-screen-sharing-signal",
     WEBRTC_START = "webrtc-start",
     WEBRTC_DISCONNECT = "webrtc-disconect",
     MESSAGE_ERROR = "message-error",
     GROUP_CREATE_UPDATE = "group-create-update",
     GROUP_DELETE = "group-delete",
-    SET_PLAYER_DETAILS = "set-player-details"
+    SET_PLAYER_DETAILS = "set-player-details",
+    SET_SILENT = "set_silent", // Set or unset the silent mode for this user.
 }
 
 export class IoSocketController {
@@ -226,18 +227,11 @@ export class IoSocketController {
             });
 
             socket.on(SockerIoEvent.WEBRTC_SIGNAL, (data: unknown) => {
-                if (!isWebRtcSignalMessageInterface(data)) {
-                    socket.emit(SockerIoEvent.MESSAGE_ERROR, {message: 'Invalid WEBRTC_SIGNAL message.'});
-                    console.warn('Invalid WEBRTC_SIGNAL message received: ', data);
-                    return;
-                }
-                //send only at user
-                const client = this.sockets.get(data.receiverId);
-                if (client === undefined) {
-                    console.warn("While exchanging a WebRTC signal: client with id ", data.receiverId, " does not exist. This might be a race condition.");
-                    return;
-                }
-                return client.emit(SockerIoEvent.WEBRTC_SIGNAL, data);
+                this.emitVideo((socket as ExSocketInterface), data);
+            });
+
+            socket.on(SockerIoEvent.WEBRTC_SCREEN_SHARING_SIGNAL, (data: unknown) => {
+                this.emitScreenSharing((socket as ExSocketInterface), data);
             });
 
             socket.on(SockerIoEvent.DISCONNECT, () => {
@@ -281,6 +275,65 @@ export class IoSocketController {
                 Client.characterLayers = playerDetails.characterLayers;
                 answerFn(Client.userId);
             });
+
+            socket.on(SockerIoEvent.SET_SILENT, (silent: unknown) => {
+                if (typeof silent !== "boolean") {
+                    socket.emit(SockerIoEvent.MESSAGE_ERROR, {message: 'Invalid SET_SILENT message.'});
+                    console.warn('Invalid SET_SILENT message received: ', silent);
+                    return;
+                }
+
+                try {
+                    const Client = (socket as ExSocketInterface);
+
+                    // update position in the world
+                    const world = this.Worlds.get(Client.roomId);
+                    if (!world) {
+                        console.error("Could not find world with id '", Client.roomId, "'");
+                        return;
+                    }
+                    world.setSilent(Client, silent);
+                } catch (e) {
+                    console.error('An error occurred on "SET_SILENT"');
+                    console.error(e);
+                }
+            });
+        });
+    }
+
+    emitVideo(socket: ExSocketInterface, data: unknown){
+        if (!isWebRtcSignalMessageInterface(data)) {
+            socket.emit(SockerIoEvent.MESSAGE_ERROR, {message: 'Invalid WEBRTC_SIGNAL message.'});
+            console.warn('Invalid WEBRTC_SIGNAL message received: ', data);
+            return;
+        }
+        //send only at user
+        const client = this.sockets.get(data.receiverId);
+        if (client === undefined) {
+            console.warn("While exchanging a WebRTC signal: client with id ", data.receiverId, " does not exist. This might be a race condition.");
+            return;
+        }
+        return client.emit(SockerIoEvent.WEBRTC_SIGNAL, {
+            userId: socket.userId,
+            signal: data.signal
+        });
+    }
+
+    emitScreenSharing(socket: ExSocketInterface, data: unknown){
+        if (!isWebRtcSignalMessageInterface(data)) {
+            socket.emit(SockerIoEvent.MESSAGE_ERROR, {message: 'Invalid WEBRTC_SCREEN_SHARING message.'});
+            console.warn('Invalid WEBRTC_SCREEN_SHARING message received: ', data);
+            return;
+        }
+        //send only at user
+        const client = this.sockets.get(data.receiverId);
+        if (client === undefined) {
+            console.warn("While exchanging a WEBRTC_SCREEN_SHARING signal: client with id ", data.receiverId, " does not exist. This might be a race condition.");
+            return;
+        }
+        return client.emit(SockerIoEvent.WEBRTC_SCREEN_SHARING_SIGNAL, {
+            userId: socket.userId,
+            signal: data.signal
         });
     }
 
@@ -364,13 +417,15 @@ export class IoSocketController {
         if (this.Io.sockets.adapter.rooms[roomId].length < 2 /*|| this.Io.sockets.adapter.rooms[roomId].length >= 4*/) {
             return;
         }
+
+        // TODO: scanning all sockets is maybe not the most efficient
         const clients: Array<ExSocketInterface> = (Object.values(this.Io.sockets.sockets) as Array<ExSocketInterface>)
             .filter((client: ExSocketInterface) => client.webRtcRoomId && client.webRtcRoomId === roomId);
         //send start at one client to initialise offer webrtc
         //send all users in room to create PeerConnection in front
         clients.forEach((client: ExSocketInterface, index: number) => {
 
-            const clientsId = clients.reduce((tabs: Array<UserInGroupInterface>, clientId: ExSocketInterface, indexClientId: number) => {
+            const peerClients = clients.reduce((tabs: Array<UserInGroupInterface>, clientId: ExSocketInterface, indexClientId: number) => {
                 if (!clientId.userId || clientId.userId === client.userId) {
                     return tabs;
                 }
@@ -382,7 +437,7 @@ export class IoSocketController {
                 return tabs;
             }, []);
 
-            client.emit(SockerIoEvent.WEBRTC_START, {clients: clientsId, roomId: roomId});
+            client.emit(SockerIoEvent.WEBRTC_START, {clients: peerClients, roomId: roomId});
         });
     }
 
diff --git a/back/src/Model/UserInterface.ts b/back/src/Model/UserInterface.ts
index 743f8b4d..89994a31 100644
--- a/back/src/Model/UserInterface.ts
+++ b/back/src/Model/UserInterface.ts
@@ -4,5 +4,6 @@ import { PointInterface } from "./Websocket/PointInterface";
 export interface UserInterface {
     id: string,
     group?: Group,
-    position: PointInterface
-}
\ No newline at end of file
+    position: PointInterface,
+    silent: boolean
+}
diff --git a/back/src/Model/Websocket/WebRtcSignalMessage.ts b/back/src/Model/Websocket/WebRtcSignalMessage.ts
index 7edffdfa..5a0dd1af 100644
--- a/back/src/Model/Websocket/WebRtcSignalMessage.ts
+++ b/back/src/Model/Websocket/WebRtcSignalMessage.ts
@@ -1,10 +1,18 @@
 import * as tg from "generic-type-guard";
 
+export const isSignalData =
+    new tg.IsInterface().withProperties({
+        type: tg.isOptional(tg.isString)
+    }).get();
+
 export const isWebRtcSignalMessageInterface =
     new tg.IsInterface().withProperties({
-        userId: tg.isString,
         receiverId: tg.isString,
-        roomId: tg.isString,
-        signal: tg.isUnknown
+        signal: isSignalData
+    }).get();
+export const isWebRtcScreenSharingStartMessageInterface =
+    new tg.IsInterface().withProperties({
+        userId: tg.isString,
+        roomId: tg.isString
     }).get();
 export type WebRtcSignalMessageInterface = tg.GuardedType<typeof isWebRtcSignalMessageInterface>;
diff --git a/back/src/Model/World.ts b/back/src/Model/World.ts
index 6d4fc205..8855702e 100644
--- a/back/src/Model/World.ts
+++ b/back/src/Model/World.ts
@@ -55,7 +55,8 @@ export class World {
     public join(socket : Identificable, userPosition: PointInterface): void {
         this.users.set(socket.userId, {
             id: socket.userId,
-            position: userPosition
+            position: userPosition,
+            silent: false // FIXME: silent should be set at the correct value when joining a room.
         });
         // Let's call update position to trigger the join / leave room
         this.updatePosition(socket, userPosition);
@@ -84,6 +85,10 @@ export class World {
 
         user.position = userPosition;
 
+        if (user.silent) {
+            return;
+        }
+
         if (typeof user.group === 'undefined') {
             // If the user is not part of a group:
             //  should he join a group?
@@ -118,6 +123,26 @@ export class World {
         }
     }
 
+    setSilent(socket: Identificable, silent: boolean) {
+        const user = this.users.get(socket.userId);
+        if(typeof user === 'undefined') {
+            console.warn('In setSilent, could not find user with ID "'+socket.userId+'" in world.');
+            return;
+        }
+        if (user.silent === silent) {
+            return;
+        }
+
+        user.silent = silent;
+        if (silent && user.group !== undefined) {
+            this.leaveGroup(user);
+        }
+        if (!silent) {
+            // If we are back to life, let's trigger a position update to see if we can join some group.
+            this.updatePosition(socket, user.position);
+        }
+    }
+
     /**
      * Makes a user leave a group and closes and destroy the group if the group contains only one remaining person.
      *
@@ -145,6 +170,7 @@ export class World {
      * Looks for the closest user that is:
      * - close enough (distance <= minDistance)
      * - not in a group
+     * - not silent
      * OR
      * - close enough to a group (distance <= groupRadius)
      */
@@ -160,6 +186,9 @@ export class World {
             if(currentUser === user) {
                 return;
             }
+            if (currentUser.silent) {
+                return;
+            }
 
             const distance = World.computeDistance(user, currentUser); // compute distance between peers.
 
diff --git a/deeployer.libsonnet b/deeployer.libsonnet
index 09074148..d6cd232b 100644
--- a/deeployer.libsonnet
+++ b/deeployer.libsonnet
@@ -25,7 +25,11 @@
       },
       "ports": [80],
       "env": {
-        "API_URL": "api."+url
+        "API_URL": "api."+url,
+        "JITSI_URL": "meet.jit.si",
+        "TURN_SERVER": "turn:coturn.workadventu.re:443,turns:coturn.workadventu.re:443",
+        "TURN_USER": "workadventure",
+        "TURN_PASSWORD": "WorkAdventure123"
       }
     },
     "website": {
diff --git a/docker-compose.yaml b/docker-compose.yaml
index 74bbafbf..e731bbed 100644
--- a/docker-compose.yaml
+++ b/docker-compose.yaml
@@ -22,10 +22,14 @@ services:
     image: thecodingmachine/nodejs:12
     environment:
       DEBUG_MODE: "$DEBUG_MODE"
+      JITSI_URL: $JITSI_URL
       HOST: "0.0.0.0"
       NODE_ENV: development
       API_URL: api.workadventure.localhost
       STARTUP_COMMAND_1: yarn install
+      TURN_SERVER: "turn:coturn.workadventu.re:443,turns:coturn.workadventu.re:443"
+      TURN_USER: workadventure
+      TURN_PASSWORD: WorkAdventure123
     command: yarn run start
     volumes:
       - ./front:/usr/src/app
diff --git a/front/dist/index.html b/front/dist/index.html
index a680c59a..5de00b3b 100644
--- a/front/dist/index.html
+++ b/front/dist/index.html
@@ -39,7 +39,57 @@
         <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>
+                    <div class="btn-cam-action">
+                        <div id="btn-micro" class="btn-micro">
+                            <img id="microphone" src="resources/logos/microphone.svg">
+                            <img id="microphone-close" src="resources/logos/microphone-close.svg">
+                        </div>
+                        <div id="btn-video" class="btn-video">
+                            <img id="cinema" src="resources/logos/cinema.svg">
+                            <img id="cinema-close" src="resources/logos/cinema-close.svg">
+                        </div>
+                        <div id="btn-monitor" class="btn-monitor">
+                            <img id="monitor" src="resources/logos/monitor.svg">
+                            <img id="monitor-close" src="resources/logos/monitor-close.svg">
+                        </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 +104,15 @@
                     <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 class="btn-monitor">
+                    <img id="monitor" src="resources/logos/monitor.svg">
+                    <img id="monitor-close" src="resources/logos/monitor-close.svg">
+                </div>
             </div>
         </div>
+        -->
+        <div id="activeScreenSharing" class="active-screen-sharing active">
+        </div>
         <div id="webRtcSetup" class="webrtcsetup">
                 <img id="webRtcSetupNoVideo" class="background-img" src="resources/logos/cinema-close.svg">
                 <video id="myCamVideoSetup" autoplay muted></video>
diff --git a/front/dist/resources/logos/monitor-close.svg b/front/dist/resources/logos/monitor-close.svg
new file mode 100644
index 00000000..80056e2d
--- /dev/null
+++ b/front/dist/resources/logos/monitor-close.svg
@@ -0,0 +1,44 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.1.3, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 512 480" style="enable-background:new 0 0 512 480;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;}
+</style>
+<g>
+	<path class="st0" d="M411.1,384.2c-12.2,0-24.3,0-36.5,0C259.6,257.6,144.5,130.9,29.5,4.3c11.4-0.8,22.9-1.6,34.3-2.4
+		C179.6,129.3,295.3,256.8,411.1,384.2z"/>
+	<g>
+		<path class="st0" d="M352,152.5c-8.8-8.7-34.2-31.6-74.5-38.1c-32.3-5.2-58.1,2.7-70,7.3C170.9,81.5,134.3,41.3,97.8,1
+			C220.4,1,343,1,465.6,1C427.7,51.5,389.8,102,352,152.5z"/>
+		<path class="st0" d="M511.5,338.3c0,4.7-0.8,12.2-4.7,20.2c-1.2,2.4-3.4,6.3-7.1,10.5c-4,4.4-7.9,7.1-10.2,8.5
+			c-5.6,3.5-10.7,4.9-13.5,5.6c-3.8,0.9-6.7,1-10.2,1.2c-3.6,0.2-5.3,0-13.1,0c-3,0-5.4,0-7,0C414.5,307,383.2,229.8,352,152.5
+			C402.9,62.7,448.7,1,465.6,1c7.5,0,14.3,2.3,14.3,2.3c14.5,4.8,22.3,15.8,23.6,17.8c7.4,10.8,8,21.7,8,25.9
+			C511.5,144.1,511.5,241.2,511.5,338.3z"/>
+		<path class="st0" d="M312.5,192c-5.2-5.2-15.6-14.1-31.4-19.4c-12.8-4.2-24-4.3-30.9-3.8c-6.2-7.1-12.4-14.2-18.6-21.3
+			c10.3-2.4,36.5-6.8,65.1,5.3c15.3,6.5,26.1,15.5,32.7,22.2C323.7,180.8,318.1,186.4,312.5,192z"/>
+		<path class="st0" d="M329.4,175.1c38.8,69.7,77.6,139.4,116.4,209.1c-50.3-55.4-100.6-110.8-151-166.2c6.9,2.9,14.9,0.7,19.2-5.2
+			c4.6-6.2,4-15.1-1.6-20.8C318.1,186.4,323.7,180.8,329.4,175.1z"/>
+		<path class="st0" d="M445.8,384.2L445.8,384.2c-38.8-69.7-77.6-139.4-116.4-209.1c5.3,4.9,12.9,6,18.9,2.7
+			c7.8-4.2,8.3-13.4,8.3-13.8C386.4,237.4,416.1,310.8,445.8,384.2z"/>
+	</g>
+	<path class="st0" d="M162.2,150.4C108.3,213,54.4,275.7,0.5,338.3c0-97.1,0-194.3,0-291.4c0-4,0.6-15.1,8.1-26
+		C16,10.2,25.7,5.8,29.5,4.3C73.7,53,118,101.7,162.2,150.4z"/>
+	<path class="st0" d="M199.5,192c-5.3-6-10.6-12-15.8-18C122.6,228.8,61.6,283.6,0.5,338.3c0,4.1,0.6,15.5,8.6,26.7
+		c1.7,2.4,9.6,12.9,24.1,17.2c5.3,1.6,10,1.9,13.1,1.9C97.5,320.2,148.5,256.1,199.5,192z"/>
+	<path class="st0" d="M84.7,384.2c-12.7,0-25.5,0-38.2,0c58.2-56.2,116.5-112.5,174.7-168.7c8.3,9.1,16.6,18.2,24.9,27.2
+		c-2.2,1.1-5.5,3-8.4,6.4c-3.1,3.7-4.2,7.3-4.4,7.8C231.3,262.4,194.5,295.2,84.7,384.2z"/>
+	<path class="st0" d="M46.4,384.2c-15.3-15.3-30.6-30.6-45.9-45.9C52.8,277.5,105.1,216.8,157.4,156c-3.7,6.7-2.2,15.1,3.5,20
+		c5.4,4.6,13.3,5.1,19.4,1C135.7,246.1,91.1,315.1,46.4,384.2z"/>
+	<path class="st0" d="M49.6,384.3c-1.1,0-2.1,0-3.2-0.1c50.1-62.9,100.2-125.8,150.3-188.7c-3.5,6.6-2.1,14.8,3.4,19.7
+		c5.8,5.2,14.8,5.3,21,0.3C164,271.7,106.8,328,49.6,384.3z"/>
+	<path class="st0" d="M374.6,384.2c-96.6,0-193.3,0-289.9,0C16.5,308,1.3,223,28.5,194.5C57,164.7,150.6,177,233.3,256.9
+		c-3.9,11.8,2,24.8,13.3,29.6c11,4.7,24,0.4,30.2-10C309.3,312.4,342,348.3,374.6,384.2z"/>
+	<path class="st0" d="M219.7,226.7"/>
+	<path class="st0" d="M368.9,480c-74.9,0-149.8,0-224.7,0c-8.8,0-16-7.2-16-16c0-8.8,7.2-16,16-16c74.9,0,149.9,0,224.8,0.1
+		c8.3,0.7,14.7,7.6,14.7,15.9C383.7,472.3,377.2,479.3,368.9,480z"/>
+	<rect x="208.1" y="384.2" class="st0" width="31.9" height="63.9"/>
+	<rect x="272" y="384.2" class="st0" width="32" height="63.9"/>
+	<path class="st0" d="M410.3,395.5"/>
+</g>
+</svg>
diff --git a/front/dist/resources/logos/monitor.svg b/front/dist/resources/logos/monitor.svg
new file mode 100644
index 00000000..d4b586c6
--- /dev/null
+++ b/front/dist/resources/logos/monitor.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.1.3, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 512 480" style="enable-background:new 0 0 512 480;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;}
+</style>
+<path class="st0" d="M466,0H46C20.6,0,0,20.6,0,46v292c0,25.4,20.6,46,46,46h162v64h-64c-8.8,0-16,7.2-16,16s7.2,16,16,16h224
+	c8.8,0,16-7.2,16-16s-7.2-16-16-16h-64v-64h162c25.4,0,46-20.6,46-46V46C512,20.6,491.4,0,466,0z M232,264c0-13.3,10.7-24,24-24
+	c13.3,0,24,10.7,24,24s-10.7,24-24,24C242.7,288,232,277.3,232,264z M272,448h-32v-64h32V448z M312.6,214.1
+	c-6.2,6.2-16.4,6.2-22.6,0c-18.7-18.8-49.1-18.8-67.9,0c0,0,0,0,0,0c-6.4,6.1-16.5,5.8-22.6-0.6c-5.9-6.2-5.9-15.9,0-22
+	c31.2-31.2,81.9-31.2,113.1,0c0,0,0,0,0,0C318.8,197.7,318.8,207.8,312.6,214.1z M352.2,174.5c-6.2,6.2-16.4,6.3-22.6,0c0,0,0,0,0,0
+	c-40.6-40.6-106.4-40.6-147.1,0c-6.2,6.3-16.4,6.3-22.6,0c-6.3-6.2-6.3-16.4,0-22.6c53.1-53.1,139.2-53.1,192.3,0c0,0,0,0,0,0
+	C358.4,158.1,358.4,168.2,352.2,174.5C352.2,174.5,352.2,174.5,352.2,174.5L352.2,174.5z"/>
+</svg>
diff --git a/front/dist/resources/objects/layout_modes.png b/front/dist/resources/objects/layout_modes.png
new file mode 100644
index 00000000..abd9adaf
Binary files /dev/null and b/front/dist/resources/objects/layout_modes.png differ
diff --git a/front/dist/resources/style/style.css b/front/dist/resources/style/style.css
index 5f0e1cab..2dbba223 100644
--- a/front/dist/resources/style/style.css
+++ b/front/dist/resources/style/style.css
@@ -23,34 +23,12 @@ body .message-info.info{
 body .message-info.warning{
     background: #ffa500d6;
 }
-video{
-    -webkit-transform: scaleX(-1);
-    transform: scaleX(-1);
-}
-.webrtc{
-    display: none;
-    position: absolute;
-    right: 0px;
-    height: 100%;
-    width: 300px;
-}
-.webrtc.active{
-    display: block;
-}
-
-.webrtc, .activeCam{}
-.activeCam .video-container{
-    position: absolute;
-    height: 25%;
-    top: 10px;
-    margin: 5px;
-    right: -100px;
+.video-container{
+    position: relative;
     transition: all 0.2s ease;
-    border-color: black;
-    border-style: solid;
-    border-width: 0.2px;
+    background-color: #00000099;
 }
-.activeCam .video-container i{
+.video-container i{
     position: absolute;
     width: 100px;
     height: 65px;
@@ -63,10 +41,10 @@ video{
     font-size: 28px;
     color: white;
 }
-.activeCam .video-container img.active{
+.video-container img.active{
     display: block;
 }
-.activeCam .video-container img{
+.video-container img{
     position: absolute;
     display: none;
     width: 15px;
@@ -78,36 +56,36 @@ video{
     padding: 10px;
     z-index: 2;
 }
-.activeCam .video-container video{
+.video-container video{
     height: 100%;
 }
 
-.webrtc:hover .activeCam .video-container{
-    right: 10px;
-}
-.activeCam .video-container#div-myCamVideo{
+.video-container#div-myCamVideo{
     border: none;
 }
-.activeCam .video-container video#myCamVideo{
-    width: 200px;
-    height: 113px;
+
+#div-myCamVideo {
+    position: absolute;
+    right: 0;
+    bottom: 0;
 }
 
-/*CSS size for 2 - 3 elements*/
-.activeCam .video-container:nth-child(1){
-    /*this is for camera of user*/
-    top: 75%;
-}
-.activeCam .video-container:nth-child(2){
-    top: 0%;
-}
-.activeCam .video-container:nth-child(3){
-    top: 25%;
-}
-.activeCam .video-container:nth-child(4) {
-    top: 50%;
+video#myCamVideo{
+    width: 15vw;
+    -webkit-transform: scaleX(-1);
+    transform: scaleX(-1);
+    /*width: 200px;*/
+    /*height: 113px;*/
 }
 
+
+.btn-cam-action {
+    position: absolute;
+    bottom: 0px;
+    right: 0px;
+    width: 450px;
+    height: 150px;
+}
 /*btn animation*/
 .btn-cam-action div{
     cursor: pointer;
@@ -118,11 +96,17 @@ video{
     background: #666;
     box-shadow: 2px 2px 24px #444;
     border-radius: 48px;
-    transform: translateY(12vw);
+    transform: translateY(40px);
     transition-timing-function: ease-in-out;
     bottom: 20px;
 }
-.webrtc:hover .btn-cam-action div{
+.btn-cam-action div.disabled {
+    background: #d75555;
+}
+.btn-cam-action div.enabled {
+    background: #73c973;
+}
+.btn-cam-action:hover div{
     transform: translateY(0);
 }
 .btn-cam-action div:hover{
@@ -135,9 +119,13 @@ video{
     right: 44px;
 }
 .btn-video{
-    transition: all .2s;
+    transition: all .25s;
     right: 134px;
 }
+.btn-monitor{
+    transition: all .2s;
+    right: 224px;
+}
 /*.btn-call{
     transition: all .1s;
     left: 0px;
@@ -237,3 +225,182 @@ video{
 .webrtcsetup.active{
     display: block;
 }
+
+
+/* New layout */
+body {
+    margin: 0;
+    height: 100vh;
+    width: 100vw;
+}
+.main-container {
+    height: 100vh;
+    width: 100vw;
+    display: flex;
+    align-items: stretch;
+}
+
+@media (min-aspect-ratio: 1/1) {
+    .main-container {
+        flex-direction: row;
+    }
+
+    .game-overlay {
+        flex-direction: row;
+    }
+
+    .sidebar {
+        flex-direction: column;
+    }
+
+    .sidebar > div {
+        max-height: 21%;
+    }
+
+    .sidebar > div:hover {
+        max-height: 25%;
+    }
+}
+@media (max-aspect-ratio: 1/1) {
+    .main-container {
+        flex-direction: column;
+    }
+
+    .game-overlay {
+        flex-direction: column;
+    }
+
+    .sidebar {
+        flex-direction: row;
+        align-items: flex-end;
+    }
+
+    .sidebar > div {
+        max-width: 21%;
+    }
+
+    .sidebar > div:hover {
+        max-width: 25%;
+    }
+}
+
+.game {
+    flex-basis: 100%;
+    position: relative; /* Position relative is needed for the game-overlay. */
+}
+
+/* A potentially shared website could appear in an iframe in the cowebsite space. */
+.cowebsite {
+    flex-basis: 100%;
+    transition: flex-basis 0.5s;
+}
+
+/*.cowebsite:hover {
+    flex-basis: 100%;
+}*/
+
+.cowebsite iframe {
+    width: 100%;
+    height: 100%;
+}
+
+
+.game-overlay {
+    display: none;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    /* TODO: DO WE NEED FLEX HERE???? WE WANT A SIDEBAR OF EXACTLY 25% (note: flex useful for direction!!!) */
+}
+
+.game-overlay.active {
+    display: flex;
+}
+
+.game-overlay video {
+    width: 100%
+}
+
+.main-section {
+    flex: 0 0 75%;
+    display: flex;
+    justify-content: start;
+    align-items: flex-start;
+    flex-wrap: wrap;
+}
+
+.main-section > div {
+    margin: 2%;
+    flex-basis: 96%;
+    transition: margin-left 0.2s, margin-right 0.2s, margin-bottom 0.2s, margin-top 0.2s, flex-basis 0.2s;
+    cursor: pointer;
+    /*flex-shrink: 2;*/
+}
+
+.main-section > div:hover {
+    margin: 0%;
+    flex-basis: 100%;
+}
+
+.sidebar {
+    flex: 0 0 25%;
+    display: flex;
+}
+
+.sidebar > div {
+    margin: 2%;
+    transition: margin-left 0.2s, margin-right 0.2s, margin-bottom 0.2s, margin-top 0.2s, max-height 0.2s, max-width 0.2s;
+    cursor: pointer;
+}
+
+.sidebar > div:hover {
+    margin: 0%;
+}
+
+/* Let's make sure videos are vertically centered if they need to be cropped */
+.media-container {
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    overflow: hidden;
+}
+
+.chat-mode {
+    display: flex;
+    width: 100%;
+
+    flex-wrap: wrap;
+    align-items: flex-start;
+
+    padding: 1%;
+}
+
+.chat-mode > div {
+    margin: 1%;
+    max-height: 96%;
+    transition: margin-left 0.2s, margin-right 0.2s, margin-bottom 0.2s, margin-top 0.2s;
+    cursor: pointer;
+}
+
+.chat-mode > div:hover {
+    margin: 0%;
+}
+.chat-mode.one-col > div {
+    flex-basis: 98%;
+}
+
+.chat-mode.two-col > div {
+    flex-basis: 48%;
+}
+
+.chat-mode.three-col > div {
+    flex-basis: 31.333333%;
+}
+
+.chat-mode.four-col > div {
+    flex-basis: 23%;
+}
+
+.chat-mode > div:last-child {
+    flex-grow: 5;
+}
diff --git a/front/src/Connection.ts b/front/src/Connection.ts
index 04715df6..4a184c52 100644
--- a/front/src/Connection.ts
+++ b/front/src/Connection.ts
@@ -6,12 +6,12 @@ import {SetPlayerDetailsMessage} from "./Messages/SetPlayerDetailsMessage";
 const SocketIo = require('socket.io-client');
 import Socket = SocketIOClient.Socket;
 import {PlayerAnimationNames} from "./Phaser/Player/Animation";
-import {UserSimplePeer} from "./WebRtc/SimplePeer";
+import {UserSimplePeerInterface} from "./WebRtc/SimplePeer";
 import {SignalData} from "simple-peer";
 
-
 enum EventMessage{
     WEBRTC_SIGNAL = "webrtc-signal",
+    WEBRTC_SCREEN_SHARING_SIGNAL = "webrtc-screen-sharing-signal",
     WEBRTC_START = "webrtc-start",
     JOIN_ROOM = "join-room", // bi-directional
     USER_POSITION = "user-position", // bi-directional
@@ -24,6 +24,7 @@ enum EventMessage{
     SET_PLAYER_DETAILS = "set-player-details", // Send the name and character to the server (on connect), receive back the id.
 
     CONNECT_ERROR = "connect_error",
+    SET_SILENT = "set_silent", // Set or unset the silent mode for this user.
 }
 
 export interface PointInterface {
@@ -72,17 +73,20 @@ export interface GroupCreatedUpdatedMessageInterface {
 
 export interface WebRtcStartMessageInterface {
     roomId: string,
-    clients: UserSimplePeer[]
+    clients: UserSimplePeerInterface[]
 }
 
 export interface WebRtcDisconnectMessageInterface {
     userId: string
 }
 
-export interface WebRtcSignalMessageInterface {
-    userId: string,
+export interface WebRtcSignalSentMessageInterface {
     receiverId: string,
-    roomId: string,
+    signal: SignalData
+}
+
+export interface WebRtcSignalReceivedMessageInterface {
+    userId: string,
     signal: SignalData
 }
 
@@ -164,6 +168,10 @@ export class Connection implements Connection {
         this.socket.emit(EventMessage.USER_POSITION, point);
     }
 
+    public setSilent(silent: boolean): void {
+        this.socket.emit(EventMessage.SET_SILENT, silent);
+    }
+
     public onUserJoins(callback: (message: MessageUserJoined) => void): void {
         this.socket.on(EventMessage.JOIN_ROOM, callback);
     }
@@ -188,23 +196,32 @@ export class Connection implements Connection {
         this.socket.on(EventMessage.CONNECT_ERROR, callback)
     }
 
-    public sendWebrtcSignal(signal: unknown, roomId: string, userId? : string|null, receiverId? : string) {
+    public sendWebrtcSignal(signal: unknown, receiverId : string) {
         return this.socket.emit(EventMessage.WEBRTC_SIGNAL, {
-            userId: userId ? userId : this.userId,
-            receiverId: receiverId ? receiverId : this.userId,
-            roomId: roomId,
+            receiverId: receiverId,
             signal: signal
-        });
+        } as WebRtcSignalSentMessageInterface);
+    }
+
+    public sendWebrtcScreenSharingSignal(signal: unknown, receiverId : string) {
+        return this.socket.emit(EventMessage.WEBRTC_SCREEN_SHARING_SIGNAL, {
+            receiverId: receiverId,
+            signal: signal
+        } as WebRtcSignalSentMessageInterface);
     }
 
     public receiveWebrtcStart(callback: (message: WebRtcStartMessageInterface) => void) {
         this.socket.on(EventMessage.WEBRTC_START, callback);
     }
 
-    public receiveWebrtcSignal(callback: (message: WebRtcSignalMessageInterface) => void) {
+    public receiveWebrtcSignal(callback: (message: WebRtcSignalReceivedMessageInterface) => void) {
         return this.socket.on(EventMessage.WEBRTC_SIGNAL, callback);
     }
 
+    public receiveWebrtcScreenSharingSignal(callback: (message: WebRtcSignalReceivedMessageInterface) => void) {
+        return this.socket.on(EventMessage.WEBRTC_SCREEN_SHARING_SIGNAL, callback);
+    }
+
     public onServerDisconnected(callback: (reason: string) => void): void {
         this.socket.on('disconnect', (reason: string) => {
             if (reason === 'io client disconnect') {
diff --git a/front/src/Enum/EnvironmentVariable.ts b/front/src/Enum/EnvironmentVariable.ts
index e35818bc..59c8b50f 100644
--- a/front/src/Enum/EnvironmentVariable.ts
+++ b/front/src/Enum/EnvironmentVariable.ts
@@ -1,5 +1,9 @@
 const DEBUG_MODE: boolean = process.env.DEBUG_MODE == "true";
 const API_URL = (typeof(window) !== 'undefined' ? window.location.protocol : 'http:') + '//' + (process.env.API_URL || "api.workadventure.localhost");
+const TURN_SERVER: string = process.env.TURN_SERVER || "turn:numb.viagenie.ca";
+const TURN_USER: string = process.env.TURN_USER || 'g.parant@thecodingmachine.com';
+const TURN_PASSWORD: string = process.env.TURN_PASSWORD || 'itcugcOHxle9Acqi$';
+const JITSI_URL : string|undefined = (process.env.JITSI_URL === '') ? undefined : process.env.JITSI_URL;
 const RESOLUTION = 3;
 const ZOOM_LEVEL = 1/*3/4*/;
 const POSITION_DELAY = 200; // Wait 200ms between sending position events
@@ -11,5 +15,9 @@ export {
     RESOLUTION,
     ZOOM_LEVEL,
     POSITION_DELAY,
-    MAX_EXTRAPOLATION_TIME
+    MAX_EXTRAPOLATION_TIME,
+    TURN_SERVER,
+    TURN_USER,
+    TURN_PASSWORD,
+    JITSI_URL
 }
diff --git a/front/src/Phaser/Entity/RemotePlayer.ts b/front/src/Phaser/Entity/RemotePlayer.ts
index 18785331..6764ff59 100644
--- a/front/src/Phaser/Entity/RemotePlayer.ts
+++ b/front/src/Phaser/Entity/RemotePlayer.ts
@@ -7,8 +7,6 @@ import {Character} from "../Entity/Character";
  */
 export class RemotePlayer extends Character {
     userId: string;
-    previousDirection: string;
-    wasMoving: boolean;
 
     constructor(
         userId: string,
diff --git a/front/src/Phaser/Game/GameManager.ts b/front/src/Phaser/Game/GameManager.ts
index 3dcf3474..db119a13 100644
--- a/front/src/Phaser/Game/GameManager.ts
+++ b/front/src/Phaser/Game/GameManager.ts
@@ -13,8 +13,8 @@ export interface HasMovedEvent {
 }
 
 export class GameManager {
-    private playerName: string;
-    private characterLayers: string[];
+    private playerName!: string;
+    private characterLayers!: string[];
 
     public setPlayerName(name: string): void {
         this.playerName = name;
diff --git a/front/src/Phaser/Game/GameMap.ts b/front/src/Phaser/Game/GameMap.ts
new file mode 100644
index 00000000..a588a4e6
--- /dev/null
+++ b/front/src/Phaser/Game/GameMap.ts
@@ -0,0 +1,97 @@
+import {ITiledMap} from "../Map/ITiledMap";
+
+export type PropertyChangeCallback = (newValue: string | number | boolean | undefined, oldValue: string | number | boolean | undefined) => void;
+
+/**
+ * A wrapper around a ITiledMap interface to provide additional capabilities.
+ * It is used to handle layer properties.
+ */
+export class GameMap {
+    private key: number|undefined;
+    private lastProperties = new Map<string, string|boolean|number>();
+    private callbacks = new Map<string, Array<PropertyChangeCallback>>();
+
+    public constructor(private map: ITiledMap) {
+    }
+
+    /**
+     * Sets the position of the current player (in pixels)
+     * This will trigger events if properties are changing.
+     */
+    public setPosition(x: number, y: number) {
+        const xMap = Math.floor(x / this.map.tilewidth);
+        const yMap = Math.floor(y / this.map.tileheight);
+        const key = xMap + yMap * this.map.width;
+        if (key === this.key) {
+            return;
+        }
+        this.key = key;
+
+        const newProps = this.getProperties(key);
+        const oldProps = this.lastProperties;
+
+        // Let's compare the 2 maps:
+        // First new properties vs oldProperties
+        for (const [newPropName, newPropValue] of newProps.entries()) {
+            const oldPropValue = oldProps.get(newPropName);
+            if (oldPropValue !== newPropValue) {
+                this.trigger(newPropName, oldPropValue, newPropValue);
+            }
+        }
+
+        for (const [oldPropName, oldPropValue] of oldProps.entries()) {
+            if (!newProps.has(oldPropName)) {
+                // We found a property that disappeared
+                this.trigger(oldPropName, oldPropValue, undefined);
+            }
+        }
+
+        this.lastProperties = newProps;
+    }
+
+    private getProperties(key: number): Map<string, string|boolean|number> {
+        const properties = new Map<string, string|boolean|number>();
+
+        for (const layer of this.map.layers) {
+            if (layer.type !== 'tilelayer') {
+                continue;
+            }
+            const tiles = layer.data as number[];
+            if (tiles[key] == 0) {
+                continue;
+            }
+            // There is a tile in this layer, let's embed the properties
+            if (layer.properties !== undefined) {
+                for (const layerProperty of layer.properties) {
+                    if (layerProperty.value === undefined) {
+                        continue;
+                    }
+                    properties.set(layerProperty.name, layerProperty.value);
+                }
+            }
+        }
+
+        return properties;
+    }
+
+    private trigger(propName: string, oldValue: string | number | boolean | undefined, newValue: string | number | boolean | undefined) {
+        const callbacksArray = this.callbacks.get(propName);
+        if (callbacksArray !== undefined) {
+            for (const callback of callbacksArray) {
+                callback(newValue, oldValue);
+            }
+        }
+    }
+
+    /**
+     * Registers a callback called when the user moves to a tile where the property propName is different from the last tile the user was on.
+     */
+    public onPropertyChange(propName: string, callback: PropertyChangeCallback) {
+        let callbacksArray = this.callbacks.get(propName);
+        if (callbacksArray === undefined) {
+            callbacksArray = new Array<PropertyChangeCallback>();
+            this.callbacks.set(propName, callbacksArray);
+        }
+        callbacksArray.push(callback);
+    }
+}
diff --git a/front/src/Phaser/Game/GameScene.ts b/front/src/Phaser/Game/GameScene.ts
index 1a3cd9b7..a17eab22 100644
--- a/front/src/Phaser/Game/GameScene.ts
+++ b/front/src/Phaser/Game/GameScene.ts
@@ -1,34 +1,35 @@
 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, JITSI_URL, POSITION_DELAY, RESOLUTION, 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 {SimplePeer} from "../../WebRtc/SimplePeer";
+import {Queue} from 'queue-typescript';
+import {SimplePeer, UserSimplePeerInterface} 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 {CenterListener, 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;
+import {GameMap} from "./GameMap";
+import {CoWebsiteManager} from "../../WebRtc/CoWebsiteManager";
 
 
 export enum Textures {
@@ -70,34 +71,34 @@ interface DeleteGroupEventInterface {
     groupId: string
 }
 
-export class GameScene extends Phaser.Scene {
+export class GameScene extends Phaser.Scene implements CenterListener {
     GameManager : GameManager;
     Terrains : Array<Phaser.Tilemaps.Tileset>;
-    CurrentPlayer: CurrentGamerInterface;
-    MapPlayers : Phaser.Physics.Arcade.Group;
+    CurrentPlayer!: CurrentGamerInterface;
+    MapPlayers!: Phaser.Physics.Arcade.Group;
     MapPlayersByKey : Map<string, RemotePlayer> = new Map<string, RemotePlayer>();
-    Map: Phaser.Tilemaps.Tilemap;
-    Layers : Array<Phaser.Tilemaps.StaticTilemapLayer>;
-    Objects : Array<Phaser.Physics.Arcade.Sprite>;
-    mapFile: ITiledMap;
+    Map!: Phaser.Tilemaps.Tilemap;
+    Layers!: Array<Phaser.Tilemaps.StaticTilemapLayer>;
+    Objects!: Array<Phaser.Physics.Arcade.Sprite>;
+    mapFile!: ITiledMap;
     groups: Map<string, Sprite>;
-    startX: number;
-    startY: number;
-    circleTexture: CanvasTexture;
+    startX!: number;
+    startY!: number;
+    circleTexture!: CanvasTexture;
     pendingEvents: Queue<InitUserPositionEventInterface|AddPlayerEventInterface|RemovePlayerEventInterface|UserMovedEventInterface|GroupCreatedUpdatedEventInterface|DeleteGroupEventInterface> = new Queue<InitUserPositionEventInterface|AddPlayerEventInterface|RemovePlayerEventInterface|UserMovedEventInterface|GroupCreatedUpdatedEventInterface|DeleteGroupEventInterface>();
     private initPosition: PositionInterface|null = null;
     private playersPositionInterpolator = new PlayersPositionInterpolator();
-    private connection: Connection;
-    private simplePeer : SimplePeer;
-    private connectionPromise: Promise<Connection>
+    private connection!: Connection;
+    private simplePeer!: SimplePeer;
+    private connectionPromise!: Promise<Connection>
 
     MapKey: string;
     MapUrlFile: string;
     RoomId: string;
     instance: string;
 
-    currentTick: number;
-    lastSentTick: number; // The last tick at which a position was sent.
+    currentTick!: number;
+    lastSentTick!: number; // The last tick at which a position was sent.
     lastMoveEventSent: HasMovedEvent = {
         direction: '',
         moving: false,
@@ -107,6 +108,10 @@ export class GameScene extends Phaser.Scene {
 
     private PositionNextScene: Array<Array<{ key: string, hash: string }>> = new Array<Array<{ key: string, hash: string }>>();
     private startLayerName: string|undefined;
+    private presentationModeSprite!: Sprite;
+    private chatModeSprite!: Sprite;
+    private repositionCallback!: (this: Window, ev: UIEvent) => void;
+    private gameMap!: GameMap;
 
     static createFromUrl(mapUrlFile: string, instance: string, key: string|null = null): GameScene {
         const mapKey = GameScene.getMapKeyByUrl(mapUrlFile);
@@ -159,6 +164,12 @@ export class GameScene extends Phaser.Scene {
             );
         });
 
+        this.load.spritesheet(
+            'layout_modes',
+            'resources/objects/layout_modes.png',
+            {frameWidth: 32, frameHeight: 32}
+        );
+
         loadAllLayers(this.load);
 
         this.load.bitmapFont('main_font', 'resources/fonts/arcade.png', 'resources/fonts/arcade.xml');
@@ -214,10 +225,24 @@ export class GameScene extends Phaser.Scene {
 
                 this.scene.stop(this.scene.key);
                 this.scene.remove(this.scene.key);
+                window.removeEventListener('resize', this.repositionCallback);
             })
 
             // When connection is performed, let's connect SimplePeer
             this.simplePeer = new SimplePeer(this.connection);
+            const self = this;
+            this.simplePeer.registerPeerConnectionListener({
+                onConnect(user: UserSimplePeerInterface) {
+                    self.presentationModeSprite.setVisible(true);
+                    self.chatModeSprite.setVisible(true);
+                },
+                onDisconnect(userId: string) {
+                    if (self.simplePeer.getNbConnections() === 0) {
+                        self.presentationModeSprite.setVisible(false);
+                        self.chatModeSprite.setVisible(false);
+                    }
+                }
+            })
 
             this.scene.wake();
             this.scene.sleep(ReconnectingSceneName);
@@ -256,6 +281,7 @@ export class GameScene extends Phaser.Scene {
     create(): void {
         //initalise map
         this.Map = this.add.tilemap(this.MapKey);
+        this.gameMap = new GameMap(this.mapFile);
         const mapDirUrl = this.MapUrlFile.substr(0, this.MapUrlFile.lastIndexOf('/'));
         this.mapFile.tilesets.forEach((tileset: ITiledTileSet) => {
             this.Terrains.push(this.Map.addTilesetImage(tileset.name, `${mapDirUrl}/${tileset.image}`, tileset.tilewidth, tileset.tileheight, tileset.margin, tileset.spacing/*, tileset.firstgid*/));
@@ -364,6 +390,88 @@ export class GameScene extends Phaser.Scene {
                 }
             }, 500);
         }
+
+        this.presentationModeSprite = this.add.sprite(2, this.game.renderer.height - 2, 'layout_modes', 0);
+        this.presentationModeSprite.setScrollFactor(0, 0);
+        this.presentationModeSprite.setOrigin(0, 1);
+        this.presentationModeSprite.setInteractive();
+        this.presentationModeSprite.setVisible(false);
+        this.presentationModeSprite.on('pointerup', this.switchLayoutMode.bind(this));
+        this.chatModeSprite = this.add.sprite(36, this.game.renderer.height - 2, 'layout_modes', 3);
+        this.chatModeSprite.setScrollFactor(0, 0);
+        this.chatModeSprite.setOrigin(0, 1);
+        this.chatModeSprite.setInteractive();
+        this.chatModeSprite.setVisible(false);
+        this.chatModeSprite.on('pointerup', this.switchLayoutMode.bind(this));
+
+        // FIXME: change this to use the UserInputManager class for input
+        this.input.keyboard.on('keyup-' + 'M', () => {
+            this.switchLayoutMode();
+        });
+
+        this.repositionCallback = this.reposition.bind(this);
+        window.addEventListener('resize', this.repositionCallback);
+        this.reposition();
+
+        // From now, this game scene will be notified of reposition events
+        layoutManager.setListener(this);
+
+        this.gameMap.onPropertyChange('openWebsite', (newValue, oldValue) => {
+            if (newValue === undefined) {
+                CoWebsiteManager.closeCoWebsite();
+            } else {
+                CoWebsiteManager.loadCoWebsite(newValue as string);
+            }
+        });
+        let jitsiApi: any; // eslint-disable-line @typescript-eslint/no-explicit-any
+        this.gameMap.onPropertyChange('jitsiRoom', (newValue, oldValue) => {
+            if (newValue === undefined) {
+                this.connection.setSilent(false);
+                jitsiApi?.dispose();
+                CoWebsiteManager.closeCoWebsite();
+            } else {
+                CoWebsiteManager.insertCoWebsite((cowebsiteDiv => {
+                    const domain = JITSI_URL;
+                    const options = {
+                        roomName: this.instance + "-" + newValue,
+                        width: "100%",
+                        height: "100%",
+                        parentNode: cowebsiteDiv,
+                        configOverwrite: {
+                            prejoinPageEnabled: false
+                        },
+                        interfaceConfigOverwrite: {
+                            SHOW_CHROME_EXTENSION_BANNER: false,
+                            MOBILE_APP_PROMO: false
+                        }
+                    };
+                    jitsiApi = new (window as any).JitsiMeetExternalAPI(domain, options); // eslint-disable-line @typescript-eslint/no-explicit-any
+                    jitsiApi.executeCommand('displayName', gameManager.getPlayerName());
+                }));
+                this.connection.setSilent(true);
+            }
+        })
+
+        this.gameMap.onPropertyChange('silent', (newValue, oldValue) => {
+            if (newValue === undefined || newValue === false || newValue === '') {
+                this.connection.setSilent(false);
+            } else {
+                this.connection.setSilent(true);
+            }
+        });
+    }
+
+    private switchLayoutMode(): void {
+        const mode = layoutManager.getLayoutMode();
+        if (mode === LayoutMode.Presentation) {
+            layoutManager.switchLayoutMode(LayoutMode.VideoChat);
+            this.presentationModeSprite.setFrame(1);
+            this.chatModeSprite.setFrame(2);
+        } else {
+            layoutManager.switchLayoutMode(LayoutMode.Presentation);
+            this.presentationModeSprite.setFrame(0);
+            this.chatModeSprite.setFrame(3);
+        }
     }
 
     private getExitSceneUrl(layer: ITiledMapLayer): string|undefined {
@@ -470,7 +578,7 @@ export class GameScene extends Phaser.Scene {
     //todo: in a dedicated class/function?
     initCamera() {
         this.cameras.main.setBounds(0,0, this.Map.widthInPixels, this.Map.heightInPixels);
-        this.cameras.main.startFollow(this.CurrentPlayer);
+        this.updateCameraOffset();
         this.cameras.main.setZoom(ZOOM_LEVEL);
     }
 
@@ -529,6 +637,9 @@ export class GameScene extends Phaser.Scene {
 
             //listen event to share position of user
             this.CurrentPlayer.on(hasMovedEventName, this.pushPlayerPosition.bind(this))
+            this.CurrentPlayer.on(hasMovedEventName, (event: HasMovedEvent) => {
+                this.gameMap.setPosition(event.x, event.y);
+            })
         });
     }
 
@@ -625,6 +736,7 @@ export class GameScene extends Phaser.Scene {
             this.simplePeer.unregister();
             this.scene.stop();
             this.scene.remove(this.scene.key);
+            window.removeEventListener('resize', this.repositionCallback);
             this.scene.start(nextSceneKey.key, {
                 startLayerName: nextSceneKey.hash
             });
@@ -812,4 +924,34 @@ export class GameScene extends Phaser.Scene {
         const endPos = mapUrlStart.indexOf(".json");
         return mapUrlStart.substring(startPos, endPos);
     }
+
+    private reposition(): void {
+        this.presentationModeSprite.setY(this.game.renderer.height - 2);
+        this.chatModeSprite.setY(this.game.renderer.height - 2);
+
+        // Recompute camera offset if needed
+        this.updateCameraOffset();
+    }
+
+    /**
+     * Updates the offset of the character compared to the center of the screen according to the layout mananger
+     * (tries to put the character in the center of the reamining space if there is a discussion going on.
+     */
+    private updateCameraOffset(): void {
+        const array = layoutManager.findBiggestAvailableArray();
+        let xCenter = (array.xEnd - array.xStart) / 2 + array.xStart;
+        let yCenter = (array.yEnd - array.yStart) / 2 + array.yStart;
+
+        // Let's put this in Game coordinates by applying the zoom level:
+        xCenter /= ZOOM_LEVEL * RESOLUTION;
+        yCenter /= ZOOM_LEVEL * RESOLUTION;
+
+        //console.log("updateCameraOffset", array, xCenter, yCenter, this.game.renderer.width, this.game.renderer.height);
+
+        this.cameras.main.startFollow(this.CurrentPlayer, true, 1, 1,  xCenter - this.game.renderer.width / 2, yCenter - this.game.renderer.height / 2);
+    }
+
+    public onCenterChange(): void {
+        this.updateCameraOffset();
+    }
 }
diff --git a/front/src/Phaser/Login/CustomizeScene.ts b/front/src/Phaser/Login/CustomizeScene.ts
index a4c4282f..50834bd1 100644
--- a/front/src/Phaser/Login/CustomizeScene.ts
+++ b/front/src/Phaser/Login/CustomizeScene.ts
@@ -18,24 +18,24 @@ enum CustomizeTextures{
 
 export class CustomizeScene extends Phaser.Scene {
 
-    private textField: TextField;
-    private enterField: TextField;
+    private textField!: TextField;
+    private enterField!: TextField;
 
-    private arrowRight: Image;
-    private arrowLeft: Image;
+    private arrowRight!: Image;
+    private arrowLeft!: Image;
 
-    private arrowDown: Image;
-    private arrowUp: Image;
+    private arrowDown!: Image;
+    private arrowUp!: Image;
 
-    private Rectangle: Rectangle;
+    private Rectangle!: Rectangle;
 
-    private logo: Image;
+    private logo!: Image;
 
     private selectedLayers: Array<number> = [0];
     private containersRow: Array<Array<Container>> = new Array<Array<Container>>();
     private activeRow = 0;
 
-    private repositionCallback: (this: Window, ev: UIEvent) => void;
+    private repositionCallback!: (this: Window, ev: UIEvent) => void;
 
     constructor() {
         super({
diff --git a/front/src/Phaser/Login/EnableCameraScene.ts b/front/src/Phaser/Login/EnableCameraScene.ts
index 6d96459e..6fc1cd54 100644
--- a/front/src/Phaser/Login/EnableCameraScene.ts
+++ b/front/src/Phaser/Login/EnableCameraScene.ts
@@ -21,22 +21,22 @@ enum LoginTextures {
 }
 
 export class EnableCameraScene extends Phaser.Scene {
-    private textField: TextField;
-    private pressReturnField: TextField;
-    private cameraNameField: TextField;
-    private logo: Image;
-    private arrowLeft: Image;
-    private arrowRight: Image;
-    private arrowDown: Image;
-    private arrowUp: Image;
+    private textField!: TextField;
+    private pressReturnField!: TextField;
+    private cameraNameField!: TextField;
+    private logo!: Image;
+    private arrowLeft!: Image;
+    private arrowRight!: Image;
+    private arrowDown!: Image;
+    private arrowUp!: Image;
     private microphonesList: MediaDeviceInfo[] = new Array<MediaDeviceInfo>();
     private camerasList: MediaDeviceInfo[] = new Array<MediaDeviceInfo>();
     private cameraSelected: number = 0;
     private microphoneSelected: number = 0;
     private soundMeter: SoundMeter;
-    private soundMeterSprite: SoundMeterSprite;
-    private microphoneNameField: TextField;
-    private repositionCallback: (this: Window, ev: UIEvent) => void;
+    private soundMeterSprite!: SoundMeterSprite;
+    private microphoneNameField!: TextField;
+    private repositionCallback!: (this: Window, ev: UIEvent) => void;
 
     constructor() {
         super({
@@ -266,6 +266,9 @@ export class EnableCameraScene extends Phaser.Scene {
         this.soundMeter.stop();
         window.removeEventListener('resize', this.repositionCallback);
 
+        mediaManager.stopCamera();
+        mediaManager.stopMicrophone();
+
         // Do we have a start URL in the address bar? If so, let's redirect to this address
         const instanceAndMapUrl = this.findMapUrl();
         if (instanceAndMapUrl !== null) {
diff --git a/front/src/Phaser/Login/SelectCharacterScene.ts b/front/src/Phaser/Login/SelectCharacterScene.ts
index 535529ee..64285766 100644
--- a/front/src/Phaser/Login/SelectCharacterScene.ts
+++ b/front/src/Phaser/Login/SelectCharacterScene.ts
@@ -21,16 +21,16 @@ enum LoginTextures {
 
 export class SelectCharacterScene extends Phaser.Scene {
     private readonly nbCharactersPerRow = 4;
-    private textField: TextField;
-    private pressReturnField: TextField;
-    private logo: Image;
-    private customizeButton: Image;
-    private customizeButtonSelected: Image;
+    private textField!: TextField;
+    private pressReturnField!: TextField;
+    private logo!: Image;
+    private customizeButton!: Image;
+    private customizeButtonSelected!: Image;
 
-    private selectedRectangle: Rectangle;
+    private selectedRectangle!: Rectangle;
     private selectedRectangleXPos = 0; // Number of the character selected in the rows
     private selectedRectangleYPos = 0; // Number of the character selected in the columns
-    private selectedPlayer: Phaser.Physics.Arcade.Sprite|null; // null if we are selecting the "customize" option
+    private selectedPlayer!: Phaser.Physics.Arcade.Sprite|null; // null if we are selecting the "customize" option
     private players: Array<Phaser.Physics.Arcade.Sprite> = new Array<Phaser.Physics.Arcade.Sprite>();
 
     constructor() {
diff --git a/front/src/Phaser/Player/Player.ts b/front/src/Phaser/Player/Player.ts
index b9490c8d..cfd6cc6e 100644
--- a/front/src/Phaser/Player/Player.ts
+++ b/front/src/Phaser/Player/Player.ts
@@ -13,8 +13,8 @@ export interface CurrentGamerInterface extends Character{
 
 export class Player extends Character implements CurrentGamerInterface {
     userInputManager: UserInputManager;
-    previousDirection: string;
-    wasMoving: boolean;
+    previousDirection: string = PlayerAnimationNames.WalkDown;
+    wasMoving: boolean = false;
 
     constructor(
         Scene: GameScene,
diff --git a/front/src/Phaser/Reconnecting/FourOFourScene.ts b/front/src/Phaser/Reconnecting/FourOFourScene.ts
index 8c71ae65..0c91a5bc 100644
--- a/front/src/Phaser/Reconnecting/FourOFourScene.ts
+++ b/front/src/Phaser/Reconnecting/FourOFourScene.ts
@@ -10,12 +10,12 @@ enum Textures {
 }
 
 export class FourOFourScene extends Phaser.Scene {
-    private mapNotFoundField: TextField;
-    private couldNotFindField: TextField;
-    private fileNameField: Text;
-    private logo: Image;
-    private cat: Sprite;
-    private file: string;
+    private mapNotFoundField!: TextField;
+    private couldNotFindField!: TextField;
+    private fileNameField!: Text;
+    private logo!: Image;
+    private cat!: Sprite;
+    private file!: string;
 
     constructor() {
         super({
diff --git a/front/src/Phaser/Reconnecting/ReconnectingScene.ts b/front/src/Phaser/Reconnecting/ReconnectingScene.ts
index 7a377b66..07d2b858 100644
--- a/front/src/Phaser/Reconnecting/ReconnectingScene.ts
+++ b/front/src/Phaser/Reconnecting/ReconnectingScene.ts
@@ -9,9 +9,8 @@ enum ReconnectingTextures {
 }
 
 export class ReconnectingScene extends Phaser.Scene {
-    private reconnectingField: TextField;
-    private logo: Image;
-    private cat: Sprite;
+    private reconnectingField!: TextField;
+    private logo!: Image;
 
     constructor() {
         super({
diff --git a/front/src/WebRtc/CoWebsiteManager.ts b/front/src/WebRtc/CoWebsiteManager.ts
new file mode 100644
index 00000000..1793335b
--- /dev/null
+++ b/front/src/WebRtc/CoWebsiteManager.ts
@@ -0,0 +1,73 @@
+import {HtmlUtils} from "./HtmlUtils";
+
+export type CoWebsiteStateChangedCallback = () => void;
+
+export class CoWebsiteManager {
+
+    private static observers = new Array<CoWebsiteStateChangedCallback>();
+
+    public static loadCoWebsite(url: string): void {
+        const cowebsiteDiv = HtmlUtils.getElementByIdOrFail<HTMLDivElement>("cowebsite");
+        cowebsiteDiv.innerHTML = '';
+
+        const iframe = document.createElement('iframe');
+        iframe.id = 'cowebsite-iframe';
+        iframe.src = url;
+        cowebsiteDiv.appendChild(iframe);
+        //iframe.onload = () => {
+            // onload can be long to trigger. Maybe we should display the website, whatever happens, after 1 second?
+            CoWebsiteManager.fire();
+        //}
+    }
+
+    /**
+     * Just like loadCoWebsite but the div can be filled by the user.
+     */
+    public static insertCoWebsite(callback: (cowebsite: HTMLDivElement) => void): void {
+        const cowebsiteDiv = HtmlUtils.getElementByIdOrFail<HTMLDivElement>("cowebsite");
+        cowebsiteDiv.innerHTML = '';
+
+        callback(cowebsiteDiv);
+        //iframe.onload = () => {
+        // onload can be long to trigger. Maybe we should display the website, whatever happens, after 1 second?
+        CoWebsiteManager.fire();
+        //}
+    }
+
+    public static closeCoWebsite(): void {
+        const cowebsiteDiv = HtmlUtils.getElementByIdOrFail<HTMLDivElement>("cowebsite");
+        cowebsiteDiv.innerHTML = '';
+        CoWebsiteManager.fire();
+    }
+
+    public static getGameSize(): {width: number, height: number} {
+        const hasChildren = HtmlUtils.getElementByIdOrFail<HTMLDivElement>("cowebsite").children.length > 0;
+        if (hasChildren === false) {
+            return {
+                width: window.innerWidth,
+                height: window.innerHeight
+            }
+        }
+        if (window.innerWidth >= window.innerHeight) {
+            return {
+                width: window.innerWidth / 2,
+                height: window.innerHeight
+            }
+        } else {
+            return {
+                width: window.innerWidth,
+                height: window.innerHeight / 2
+            }
+        }
+    }
+
+    public static onStateChange(observer: CoWebsiteStateChangedCallback) {
+        CoWebsiteManager.observers.push(observer);
+    }
+
+    private static fire(): void {
+        for (const callback of CoWebsiteManager.observers) {
+            callback();
+        }
+    }
+}
diff --git a/front/src/WebRtc/HtmlUtils.ts b/front/src/WebRtc/HtmlUtils.ts
new file mode 100644
index 00000000..c2e6ff6d
--- /dev/null
+++ b/front/src/WebRtc/HtmlUtils.ts
@@ -0,0 +1,10 @@
+export class HtmlUtils {
+    public static getElementByIdOrFail<T extends HTMLElement>(id: string): T {
+        const elem = document.getElementById(id);
+        if (elem === null) {
+            throw new Error("Cannot find HTML element with id '"+id+"'");
+        }
+        // FIXME: does not check the type of the returned type
+        return elem as T;
+    }
+}
diff --git a/front/src/WebRtc/LayoutManager.ts b/front/src/WebRtc/LayoutManager.ts
new file mode 100644
index 00000000..02818c78
--- /dev/null
+++ b/front/src/WebRtc/LayoutManager.ts
@@ -0,0 +1,311 @@
+import {HtmlUtils} from "./HtmlUtils";
+
+export enum LayoutMode {
+    // All videos are displayed on the right side of the screen. If there is a screen sharing, it is displayed in the middle.
+    Presentation = "Presentation",
+    // Videos take the whole page.
+    VideoChat = "VideoChat",
+}
+
+export enum DivImportance {
+    // For screen sharing
+    Important = "Important",
+    // For normal video
+    Normal = "Normal",
+}
+
+/**
+ * Classes implementing this interface can be notified when the center of the screen (the player position) should be
+ * changed.
+ */
+export interface CenterListener {
+    onCenterChange(): void;
+}
+
+/**
+ * This class is in charge of the video-conference layout.
+ * It receives positioning requests for videos and does its best to place them on the screen depending on the active layout mode.
+ */
+class LayoutManager {
+    private mode: LayoutMode = LayoutMode.Presentation;
+
+    private importantDivs: Map<string, HTMLDivElement> = new Map<string, HTMLDivElement>();
+    private normalDivs: Map<string, HTMLDivElement> = new Map<string, HTMLDivElement>();
+    private listener: CenterListener|null = null;
+
+    public setListener(centerListener: CenterListener|null) {
+        this.listener = centerListener;
+    }
+
+    public add(importance: DivImportance, userId: string, html: string): void {
+        const div = document.createElement('div');
+        div.innerHTML = html;
+        div.id = "user-"+userId;
+        div.className = "media-container"
+        div.onclick = () => {
+            const parentId = div.parentElement?.id;
+            if (parentId === 'sidebar' || parentId === 'chat-mode') {
+                this.focusOn(userId);
+            } else {
+                this.removeFocusOn(userId);
+            }
+        }
+
+        if (importance === DivImportance.Important) {
+            this.importantDivs.set(userId, div);
+
+            // If this is the first video with high importance, let's switch mode automatically.
+            if (this.importantDivs.size === 1 && this.mode === LayoutMode.VideoChat) {
+                this.switchLayoutMode(LayoutMode.Presentation);
+            }
+        } else if (importance === DivImportance.Normal) {
+            this.normalDivs.set(userId, div);
+        } else {
+            throw new Error('Unexpected importance');
+        }
+
+        this.positionDiv(div, importance);
+        this.adjustVideoChatClass();
+        this.listener?.onCenterChange();
+    }
+
+    private positionDiv(elem: HTMLDivElement, importance: DivImportance): void {
+        if (this.mode === LayoutMode.VideoChat) {
+            const chatModeDiv = HtmlUtils.getElementByIdOrFail<HTMLDivElement>('chat-mode');
+            chatModeDiv.appendChild(elem);
+        } else {
+            if (importance === DivImportance.Important) {
+                const mainSectionDiv = HtmlUtils.getElementByIdOrFail<HTMLDivElement>('main-section');
+                mainSectionDiv.appendChild(elem);
+            } else if (importance === DivImportance.Normal) {
+                const sideBarDiv = HtmlUtils.getElementByIdOrFail<HTMLDivElement>('sidebar');
+                sideBarDiv.appendChild(elem);
+            }
+        }
+    }
+
+    /**
+     * Put the screen in presentation mode and move elem in presentation mode (and all other videos in normal mode)
+     */
+    private focusOn(userId: string): void {
+        const focusedDiv = this.getDivByUserId(userId);
+        for (const [importantUserId, importantDiv] of this.importantDivs.entries()) {
+            //this.positionDiv(importantDiv, DivImportance.Normal);
+            this.importantDivs.delete(importantUserId);
+            this.normalDivs.set(importantUserId, importantDiv);
+        }
+        this.normalDivs.delete(userId);
+        this.importantDivs.set(userId, focusedDiv);
+        //this.positionDiv(focusedDiv, DivImportance.Important);
+        this.switchLayoutMode(LayoutMode.Presentation);
+    }
+
+    /**
+     * Removes userId from presentation mode
+     */
+    private removeFocusOn(userId: string): void {
+        const importantDiv = this.importantDivs.get(userId);
+        if (importantDiv === undefined) {
+            throw new Error('Div with user id "'+userId+'" is not in important mode');
+        }
+        this.normalDivs.set(userId, importantDiv);
+        this.importantDivs.delete(userId);
+
+        this.positionDiv(importantDiv, DivImportance.Normal);
+    }
+
+    private getDivByUserId(userId: string): HTMLDivElement {
+        let div = this.importantDivs.get(userId);
+        if (div !== undefined) {
+            return div;
+        }
+        div = this.normalDivs.get(userId);
+        if (div !== undefined) {
+            return div;
+        }
+        throw new Error('Could not find media with user id '+userId);
+    }
+
+    /**
+     * Removes the DIV matching userId.
+     */
+    public remove(userId: string): void {
+        console.log('Removing video for userID '+userId+'.');
+        let div = this.importantDivs.get(userId);
+        if (div !== undefined) {
+            div.remove();
+            this.importantDivs.delete(userId);
+            this.adjustVideoChatClass();
+            this.listener?.onCenterChange();
+            return;
+        }
+
+        div = this.normalDivs.get(userId);
+        if (div !== undefined) {
+            div.remove();
+            this.normalDivs.delete(userId);
+            this.adjustVideoChatClass();
+            this.listener?.onCenterChange();
+            return;
+        }
+
+        console.log('Cannot remove userID '+userId+'. Already removed?');
+        //throw new Error('Could not find user ID "'+userId+'"');
+    }
+
+    private adjustVideoChatClass(): void {
+        const chatModeDiv = HtmlUtils.getElementByIdOrFail<HTMLDivElement>('chat-mode');
+        chatModeDiv.classList.remove('one-col', 'two-col', 'three-col', 'four-col');
+
+        const nbUsers = this.importantDivs.size + this.normalDivs.size;
+
+        if (nbUsers <= 1) {
+            chatModeDiv.classList.add('one-col');
+        } else if (nbUsers <= 4) {
+            chatModeDiv.classList.add('two-col');
+        } else if (nbUsers <= 9) {
+            chatModeDiv.classList.add('three-col');
+        } else {
+            chatModeDiv.classList.add('four-col');
+        }
+    }
+
+    public switchLayoutMode(layoutMode: LayoutMode) {
+        this.mode = layoutMode;
+
+        if (layoutMode === LayoutMode.Presentation) {
+            HtmlUtils.getElementByIdOrFail<HTMLDivElement>('sidebar').style.display = 'flex';
+            HtmlUtils.getElementByIdOrFail<HTMLDivElement>('main-section').style.display = 'flex';
+            HtmlUtils.getElementByIdOrFail<HTMLDivElement>('chat-mode').style.display = 'none';
+        } else {
+            HtmlUtils.getElementByIdOrFail<HTMLDivElement>('sidebar').style.display = 'none';
+            HtmlUtils.getElementByIdOrFail<HTMLDivElement>('main-section').style.display = 'none';
+            HtmlUtils.getElementByIdOrFail<HTMLDivElement>('chat-mode').style.display = 'flex';
+        }
+
+        for (const div of this.importantDivs.values()) {
+            this.positionDiv(div, DivImportance.Important);
+        }
+        for (const div of this.normalDivs.values()) {
+            this.positionDiv(div, DivImportance.Normal);
+        }
+        this.listener?.onCenterChange();
+    }
+
+    public getLayoutMode(): LayoutMode {
+        return this.mode;
+    }
+
+    /*public getGameCenter(): {x: number, y: number} {
+
+    }*/
+
+    /**
+     * Tries to find the biggest available box of remaining space (this is a space where we can center the character)
+     */
+    public findBiggestAvailableArray(): {xStart: number, yStart: number, xEnd: number, yEnd: number} {
+        if (this.mode === LayoutMode.VideoChat) {
+            const children = document.querySelectorAll<HTMLDivElement>('div.chat-mode > div');
+            const htmlChildren = Array.from(children.values());
+
+            // No chat? Let's go full center
+            if (htmlChildren.length === 0) {
+                return {
+                    xStart: 0,
+                    yStart: 0,
+                    xEnd: window.innerWidth,
+                    yEnd: window.innerHeight
+                }
+            }
+
+            const lastDiv = htmlChildren[htmlChildren.length - 1];
+            // Compute area between top right of the last div and bottom right of window
+            const area1 = (window.innerWidth - (lastDiv.offsetLeft + lastDiv.offsetWidth))
+                          * (window.innerHeight - lastDiv.offsetTop);
+
+            // Compute area between bottom of last div and bottom of the screen on whole width
+            const area2 = window.innerWidth
+                * (window.innerHeight - (lastDiv.offsetTop + lastDiv.offsetHeight));
+
+            if (area1 < 0 && area2 < 0) {
+                // If screen is full, let's not attempt something foolish and simply center character in the middle.
+                return {
+                    xStart: 0,
+                    yStart: 0,
+                    xEnd: window.innerWidth,
+                    yEnd: window.innerHeight
+                }
+            }
+            if (area1 <= area2) {
+                console.log('lastDiv', lastDiv.offsetTop, lastDiv.offsetHeight);
+                return {
+                    xStart: 0,
+                    yStart: lastDiv.offsetTop + lastDiv.offsetHeight,
+                    xEnd: window.innerWidth,
+                    yEnd: window.innerHeight
+                }
+            } else {
+                console.log('lastDiv', lastDiv.offsetTop);
+                return {
+                    xStart: lastDiv.offsetLeft + lastDiv.offsetWidth,
+                    yStart: lastDiv.offsetTop,
+                    xEnd: window.innerWidth,
+                    yEnd: window.innerHeight
+                }
+            }
+        } else {
+            // Possible destinations: at the center bottom or at the right bottom.
+            const mainSectionChildren = Array.from(document.querySelectorAll<HTMLDivElement>('div.main-section > div').values());
+            const sidebarChildren = Array.from(document.querySelectorAll<HTMLDivElement>('aside.sidebar > div').values());
+
+            // No presentation? Let's center on the screen
+            if (mainSectionChildren.length === 0) {
+                return {
+                    xStart: 0,
+                    yStart: 0,
+                    xEnd: window.innerWidth,
+                    yEnd: window.innerHeight
+                }
+            }
+
+            // At this point, we know we have at least one element in the main section.
+            const lastPresentationDiv = mainSectionChildren[mainSectionChildren.length-1];
+
+            const presentationArea = (window.innerHeight - (lastPresentationDiv.offsetTop + lastPresentationDiv.offsetHeight))
+                                     * (lastPresentationDiv.offsetLeft + lastPresentationDiv.offsetWidth);
+
+            let leftSideBar: number;
+            let bottomSideBar: number;
+            if (sidebarChildren.length === 0) {
+                leftSideBar = HtmlUtils.getElementByIdOrFail<HTMLDivElement>('sidebar').offsetLeft;
+                bottomSideBar = 0;
+            } else {
+                const lastSideBarChildren = sidebarChildren[sidebarChildren.length - 1];
+                leftSideBar = lastSideBarChildren.offsetLeft;
+                bottomSideBar = lastSideBarChildren.offsetTop + lastSideBarChildren.offsetHeight;
+            }
+            const sideBarArea = (window.innerWidth - leftSideBar)
+                * (window.innerHeight - bottomSideBar);
+
+            if (presentationArea <= sideBarArea) {
+                return {
+                    xStart: leftSideBar,
+                    yStart: bottomSideBar,
+                    xEnd: window.innerWidth,
+                    yEnd: window.innerHeight
+                }
+            } else {
+                return {
+                    xStart: 0,
+                    yStart: lastPresentationDiv.offsetTop + lastPresentationDiv.offsetHeight,
+                    xEnd: /*lastPresentationDiv.offsetLeft + lastPresentationDiv.offsetWidth*/ window.innerWidth , // To avoid flickering when a chat start, we center on the center of the screen, not the center of the main content area
+                    yEnd: window.innerHeight
+                }
+            }
+        }
+    }
+}
+
+const layoutManager = new LayoutManager();
+
+export { layoutManager };
diff --git a/front/src/WebRtc/MediaManager.ts b/front/src/WebRtc/MediaManager.ts
index e69850a2..e8cb080d 100644
--- a/front/src/WebRtc/MediaManager.ts
+++ b/front/src/WebRtc/MediaManager.ts
@@ -1,19 +1,27 @@
+import {DivImportance, layoutManager} from "./LayoutManager";
+import {HtmlUtils} from "./HtmlUtils";
+
 const videoConstraint: boolean|MediaTrackConstraints = {
     width: { ideal: 1280 },
     height: { ideal: 720 },
     facingMode: "user"
 };
 
-type UpdatedLocalStreamCallback = (media: MediaStream) => void;
+export type UpdatedLocalStreamCallback = (media: MediaStream|null) => void;
+export type StartScreenSharingCallback = (media: MediaStream) => void;
+export type StopScreenSharingCallback = (media: MediaStream) => void;
 
 // TODO: Split MediaManager in 2 classes: MediaManagerUI (in charge of HTML) and MediaManager (singleton in charge of the camera only)
 // TODO: verify that microphone event listeners are not triggered plenty of time NOW (since MediaManager is created many times!!!!)
 export class MediaManager {
     localStream: MediaStream|null = null;
+    localScreenCapture: MediaStream|null = null;
     private remoteVideo: Map<string, HTMLVideoElement> = new Map<string, HTMLVideoElement>();
     myCamVideo: HTMLVideoElement;
     cinemaClose: HTMLImageElement;
     cinema: HTMLImageElement;
+    monitorClose: HTMLImageElement;
+    monitor: HTMLImageElement;
     microphoneClose: HTMLImageElement;
     microphone: HTMLImageElement;
     webrtcInAudio: HTMLAudioElement;
@@ -22,63 +30,111 @@ export class MediaManager {
         video: videoConstraint
     };
     updatedLocalStreamCallBacks : Set<UpdatedLocalStreamCallback> = new Set<UpdatedLocalStreamCallback>();
+    startScreenSharingCallBacks : Set<StartScreenSharingCallback> = new Set<StartScreenSharingCallback>();
+    stopScreenSharingCallBacks : Set<StopScreenSharingCallback> = new Set<StopScreenSharingCallback>();
+    private microphoneBtn: HTMLDivElement;
+    private cinemaBtn: HTMLDivElement;
+    private monitorBtn: HTMLDivElement;
+
 
     constructor() {
+
         this.myCamVideo = this.getElementByIdOrFail<HTMLVideoElement>('myCamVideo');
         this.webrtcInAudio = this.getElementByIdOrFail<HTMLAudioElement>('audio-webrtc-in');
         this.webrtcInAudio.volume = 0.2;
 
+        this.microphoneBtn = this.getElementByIdOrFail<HTMLDivElement>('btn-micro');
         this.microphoneClose = this.getElementByIdOrFail<HTMLImageElement>('microphone-close');
         this.microphoneClose.style.display = "none";
         this.microphoneClose.addEventListener('click', (e: MouseEvent) => {
             e.preventDefault();
-            this.enabledMicrophone();
+            this.enableMicrophone();
             //update tracking
         });
         this.microphone = this.getElementByIdOrFail<HTMLImageElement>('microphone');
         this.microphone.addEventListener('click', (e: MouseEvent) => {
             e.preventDefault();
-            this.disabledMicrophone();
+            this.disableMicrophone();
             //update tracking
         });
 
+        this.cinemaBtn = this.getElementByIdOrFail<HTMLDivElement>('btn-video');
         this.cinemaClose = this.getElementByIdOrFail<HTMLImageElement>('cinema-close');
         this.cinemaClose.style.display = "none";
         this.cinemaClose.addEventListener('click', (e: MouseEvent) => {
             e.preventDefault();
-            this.enabledCamera();
+            this.enableCamera();
             //update tracking
         });
         this.cinema = this.getElementByIdOrFail<HTMLImageElement>('cinema');
         this.cinema.addEventListener('click', (e: MouseEvent) => {
             e.preventDefault();
-            this.disabledCamera();
+            this.disableCamera();
+            //update tracking
+        });
+
+        this.monitorBtn = this.getElementByIdOrFail<HTMLDivElement>('btn-monitor');
+        this.monitorClose = this.getElementByIdOrFail<HTMLImageElement>('monitor-close');
+        this.monitorClose.style.display = "block";
+        this.monitorClose.addEventListener('click', (e: MouseEvent) => {
+            e.preventDefault();
+            this.enableScreenSharing();
+            //update tracking
+        });
+        this.monitor = this.getElementByIdOrFail<HTMLImageElement>('monitor');
+        this.monitor.style.display = "none";
+        this.monitor.addEventListener('click', (e: MouseEvent) => {
+            e.preventDefault();
+            this.disableScreenSharing();
             //update tracking
         });
     }
 
-    onUpdateLocalStream(callback: UpdatedLocalStreamCallback): void {
+    public onUpdateLocalStream(callback: UpdatedLocalStreamCallback): void {
 
         this.updatedLocalStreamCallBacks.add(callback);
     }
 
+    public onStartScreenSharing(callback: StartScreenSharingCallback): void {
+
+        this.startScreenSharingCallBacks.add(callback);
+    }
+
+    public onStopScreenSharing(callback: StopScreenSharingCallback): void {
+
+        this.stopScreenSharingCallBacks.add(callback);
+    }
+
     removeUpdateLocalStreamEventListener(callback: UpdatedLocalStreamCallback): void {
         this.updatedLocalStreamCallBacks.delete(callback);
     }
 
-    private triggerUpdatedLocalStreamCallbacks(stream: MediaStream): void {
+    private triggerUpdatedLocalStreamCallbacks(stream: MediaStream|null): void {
         for (const callback of this.updatedLocalStreamCallBacks) {
             callback(stream);
         }
     }
 
-    activeVisio(){
-        const webRtc = this.getElementByIdOrFail('webRtc');
-        webRtc.classList.add('active');
+    private triggerStartedScreenSharingCallbacks(stream: MediaStream): void {
+        for (const callback of this.startScreenSharingCallBacks) {
+            callback(stream);
+        }
     }
 
-    enabledCamera() {
+    private triggerStoppedScreenSharingCallbacks(stream: MediaStream): void {
+        for (const callback of this.stopScreenSharingCallBacks) {
+            callback(stream);
+        }
+    }
+
+    public showGameOverlay(){
+        const gameOverlay = this.getElementByIdOrFail('game-overlay');
+        gameOverlay.classList.add('active');
+    }
+
+    private enableCamera() {
         this.cinemaClose.style.display = "none";
+        this.cinemaBtn.classList.remove("disabled");
         this.cinema.style.display = "block";
         this.constraintsMedia.video = videoConstraint;
         this.getCamera().then((stream: MediaStream) => {
@@ -86,42 +142,120 @@ export class MediaManager {
         });
     }
 
-    disabledCamera() {
+    private async disableCamera() {
         this.cinemaClose.style.display = "block";
         this.cinema.style.display = "none";
+        this.cinemaBtn.classList.add("disabled");
         this.constraintsMedia.video = false;
         this.myCamVideo.srcObject = null;
-        if (this.localStream) {
-            this.localStream.getVideoTracks().forEach((MediaStreamTrack: MediaStreamTrack) => {
-                MediaStreamTrack.stop();
-            });
-        }
-        this.getCamera().then((stream) => {
+        this.stopCamera();
+
+        if (this.constraintsMedia.audio !== false) {
+            const stream = await this.getCamera();
             this.triggerUpdatedLocalStreamCallbacks(stream);
-        });
+        } else {
+            this.triggerUpdatedLocalStreamCallbacks(null);
+        }
     }
 
-    enabledMicrophone() {
+    private enableMicrophone() {
         this.microphoneClose.style.display = "none";
         this.microphone.style.display = "block";
+        this.microphoneBtn.classList.remove("disabled");
         this.constraintsMedia.audio = true;
+
         this.getCamera().then((stream) => {
             this.triggerUpdatedLocalStreamCallbacks(stream);
         });
     }
 
-    disabledMicrophone() {
+    private async disableMicrophone() {
         this.microphoneClose.style.display = "block";
         this.microphone.style.display = "none";
+        this.microphoneBtn.classList.add("disabled");
         this.constraintsMedia.audio = false;
-        if(this.localStream) {
-            this.localStream.getAudioTracks().forEach((MediaStreamTrack: MediaStreamTrack) => {
-                MediaStreamTrack.stop();
+        this.stopMicrophone();
+
+        if (this.constraintsMedia.video !== false) {
+            const stream = await this.getCamera();
+            this.triggerUpdatedLocalStreamCallbacks(stream);
+        } else {
+            this.triggerUpdatedLocalStreamCallbacks(null);
+        }
+    }
+
+    private enableScreenSharing() {
+        this.monitorClose.style.display = "none";
+        this.monitor.style.display = "block";
+        this.monitorBtn.classList.add("enabled");
+        this.getScreenMedia().then((stream) => {
+            this.triggerStartedScreenSharingCallbacks(stream);
+        });
+    }
+
+    private disableScreenSharing() {
+        this.monitorClose.style.display = "block";
+        this.monitor.style.display = "none";
+        this.monitorBtn.classList.remove("enabled");
+        this.removeActiveScreenSharingVideo('me');
+        this.localScreenCapture?.getTracks().forEach((track: MediaStreamTrack) => {
+            track.stop();
+        });
+        if (this.localScreenCapture === null) {
+            console.warn('Weird: trying to remove a screen sharing that is not enabled');
+            return;
+        }
+        const localScreenCapture = this.localScreenCapture;
+        this.getCamera().then((stream) => {
+            this.triggerStoppedScreenSharingCallbacks(localScreenCapture);
+        });
+        this.localScreenCapture = null;
+    }
+
+    //get screen
+    getScreenMedia() : Promise<MediaStream>{
+        try {
+            return this._startScreenCapture()
+                .then((stream: MediaStream) => {
+                    this.localScreenCapture = stream;
+
+                    // If stream ends (for instance if user clicks the stop screen sharing button in the browser), let's close the view
+                    for (const track of stream.getTracks()) {
+                        track.onended = () => {
+                            this.disableScreenSharing();
+                        };
+                    }
+
+                    this.addScreenSharingActiveVideo('me', DivImportance.Normal);
+                    HtmlUtils.getElementByIdOrFail<HTMLVideoElement>('screen-sharing-me').srcObject = stream;
+
+                    return stream;
+                })
+                .catch((err: unknown) => {
+                    console.error("Error => getScreenMedia => ", err);
+                    throw err;
+                });
+        }catch (err) {
+            return new Promise((resolve, reject) => { // eslint-disable-line no-unused-vars
+                reject(err);
+            });
+        }
+    }
+
+    private _startScreenCapture() {
+        // getDisplayMedia was moved to mediaDevices in 2018. Typescript definitions are not up to date yet.
+        // See: https://github.com/w3c/mediacapture-screen-share/pull/86
+        //      https://github.com/microsoft/TypeScript/issues/31821
+        if ((navigator as any).getDisplayMedia) { // eslint-disable-line @typescript-eslint/no-explicit-any
+            return (navigator as any).getDisplayMedia({video: true}); // eslint-disable-line @typescript-eslint/no-explicit-any
+        } else if ((navigator.mediaDevices as any).getDisplayMedia) { // eslint-disable-line @typescript-eslint/no-explicit-any
+            return (navigator.mediaDevices as any).getDisplayMedia({video: true}); // eslint-disable-line @typescript-eslint/no-explicit-any
+        } else {
+            //return navigator.mediaDevices.getUserMedia(({video: {mediaSource: 'screen'}} as any));
+            return new Promise((resolve, reject) => { // eslint-disable-line no-unused-vars
+                reject("error sharing screen");
             });
         }
-        this.getCamera().then((stream) => {
-            this.triggerUpdatedLocalStreamCallbacks(stream);
-        });
     }
 
     //get camera
@@ -154,6 +288,28 @@ export class MediaManager {
         }
     }
 
+    /**
+     * Stops the camera from filming
+     */
+    public stopCamera(): void {
+        if (this.localStream) {
+            for (const track of this.localStream.getVideoTracks()) {
+                track.stop();
+            }
+        }
+    }
+
+    /**
+     * Stops the microphone from listening
+     */
+    public stopMicrophone(): void {
+        if (this.localStream) {
+            for (const track of this.localStream.getAudioTracks()) {
+                track.stop();
+            }
+        }
+    }
+
     setCamera(id: string): Promise<MediaStream> {
         let video = this.constraintsMedia.video;
         if (typeof(video) === 'boolean' || video === undefined) {
@@ -184,18 +340,41 @@ export class MediaManager {
      */
     addActiveVideo(userId : string, userName: string = ""){
         this.webrtcInAudio.play();
-        const elementRemoteVideo = this.getElementByIdOrFail("activeCam");
+
         userName = userName.toUpperCase();
         const color = this.getColorByString(userName);
-        elementRemoteVideo.insertAdjacentHTML('beforeend', `
-            <div id="div-${userId}" class="video-container" style="border-color: ${color};">
+
+        const html =  `
+            <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>
-        `);
+        `;
+
+        layoutManager.add(DivImportance.Normal, userId, html);
+
+        this.remoteVideo.set(userId, this.getElementByIdOrFail<HTMLVideoElement>(userId));
+    }
+
+    /**
+     *
+     * @param userId
+     */
+    addScreenSharingActiveVideo(userId : string, divImportance: DivImportance = DivImportance.Important){
+        //this.webrtcInAudio.play();
+
+        userId = `screen-sharing-${userId}`;
+        const html = `
+            <div id="div-${userId}" class="video-container">
+                <video id="${userId}" autoplay></video>
+            </div>
+        `;
+
+        layoutManager.add(divImportance, userId, html);
+
         this.remoteVideo.set(userId, this.getElementByIdOrFail<HTMLVideoElement>(userId));
     }
 
@@ -232,11 +411,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";
     }
 
     /**
@@ -248,11 +426,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";
     }
 
     /**
@@ -268,19 +445,27 @@ export class MediaManager {
         }
         remoteVideo.srcObject = stream;
     }
+    addStreamRemoteScreenSharing(userId : string, stream : MediaStream){
+        // In the case of screen sharing (going both ways), we may need to create the HTML element if it does not exist yet
+        const remoteVideo = this.remoteVideo.get(`screen-sharing-${userId}`);
+        if (remoteVideo === undefined) {
+            this.addScreenSharingActiveVideo(userId);
+        }
+
+        this.addStreamRemoteVideo(`screen-sharing-${userId}`, stream);
+    }
 
     /**
      *
      * @param userId
      */
     removeActiveVideo(userId : string){
-        const element = document.getElementById(`div-${userId}`);
-        if(!element){
-            return;
-        }
-        element.remove();
+        layoutManager.remove(userId);
         this.remoteVideo.delete(userId);
     }
+    removeActiveScreenSharingVideo(userId : string) {
+        this.removeActiveVideo(`screen-sharing-${userId}`)
+    }
 
     isConnecting(userId : string): void {
         const connectingSpinnerDiv = this.getSpinner(userId);
@@ -299,6 +484,7 @@ export class MediaManager {
     }
 
     isError(userId : string): void {
+        console.log("isError", `div-${userId}`);
         const element = document.getElementById(`div-${userId}`);
         if(!element){
             return;
@@ -309,6 +495,10 @@ export class MediaManager {
         }
         errorDiv.style.display = 'block';
     }
+    isErrorScreenSharing(userId : string): void {
+        this.isError(`screen-sharing-${userId}`);
+    }
+
 
     private getSpinner(userId : string): HTMLDivElement|null {
         const element = document.getElementById(`div-${userId}`);
diff --git a/front/src/WebRtc/ScreenSharingPeer.ts b/front/src/WebRtc/ScreenSharingPeer.ts
new file mode 100644
index 00000000..8857274e
--- /dev/null
+++ b/front/src/WebRtc/ScreenSharingPeer.ts
@@ -0,0 +1,128 @@
+import * as SimplePeerNamespace from "simple-peer";
+import {mediaManager} from "./MediaManager";
+import {Connection} from "../Connection";
+import {TURN_SERVER, TURN_USER, TURN_PASSWORD} from "../Enum/EnvironmentVariable";
+
+const Peer: SimplePeerNamespace.SimplePeer = require('simple-peer');
+
+/**
+ * A peer connection used to transmit video / audio signals between 2 peers.
+ */
+export class ScreenSharingPeer extends Peer {
+    /**
+     * Whether this connection is currently receiving a video stream from a remote user.
+     */
+    private isReceivingStream:boolean = false;
+
+    constructor(private userId: string, initiator: boolean, private connection: Connection) {
+        super({
+            initiator: initiator ? initiator : false,
+            reconnectTimer: 10000,
+            config: {
+                iceServers: [
+                    {
+                        urls: 'stun:stun.l.google.com:19302'
+                    },
+                    {
+                        urls: TURN_SERVER.split(','),
+                        username: TURN_USER,
+                        credential: TURN_PASSWORD
+                    },
+                ]
+            }
+        });
+
+        //start listen signal for the peer connection
+        this.on('signal', (data: unknown) => {
+            this.sendWebrtcScreenSharingSignal(data);
+        });
+
+        this.on('stream', (stream: MediaStream) => {
+            this.stream(stream);
+        });
+
+        this.on('close', () => {
+            this.destroy();
+        });
+
+        this.on('data',  (chunk: Buffer) => {
+            // We unfortunately need to rely on an event to let the other party know a stream has stopped.
+            // It seems there is no native way to detect that.
+            const message = JSON.parse(chunk.toString('utf8'));
+            if (message.streamEnded !== true) {
+                console.error('Unexpected message on screen sharing peer connection');
+            }
+            mediaManager.removeActiveScreenSharingVideo(this.userId);
+        });
+
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        this.on('error', (err: any) => {
+            console.error(`screen sharing error => ${this.userId} => ${err.code}`, err);
+            //mediaManager.isErrorScreenSharing(this.userId);
+        });
+
+        this.on('connect', () => {
+            // FIXME: we need to put the loader on the screen sharing connection
+            mediaManager.isConnected(this.userId);
+            console.info(`connect => ${this.userId}`);
+        });
+
+        this.pushScreenSharingToRemoteUser();
+    }
+
+    private sendWebrtcScreenSharingSignal(data: unknown) {
+        //console.log("sendWebrtcScreenSharingSignal", data);
+        try {
+            this.connection.sendWebrtcScreenSharingSignal(data, this.userId);
+        }catch (e) {
+            console.error(`sendWebrtcScreenSharingSignal => ${this.userId}`, e);
+        }
+    }
+
+    /**
+     * Sends received stream to screen.
+     */
+    private stream(stream?: MediaStream) {
+        //console.log(`ScreenSharingPeer::stream => ${this.userId}`, stream);
+        //console.log(`stream => ${this.userId} => `, stream);
+        if(!stream){
+            mediaManager.removeActiveScreenSharingVideo(this.userId);
+            this.isReceivingStream = false;
+        } else {
+            mediaManager.addStreamRemoteScreenSharing(this.userId, stream);
+            this.isReceivingStream = true;
+        }
+    }
+
+    public isReceivingScreenSharingStream(): boolean {
+        return this.isReceivingStream;
+    }
+
+    public destroy(error?: Error): void {
+        try {
+            mediaManager.removeActiveScreenSharingVideo(this.userId);
+            // FIXME: I don't understand why "Closing connection with" message is displayed TWICE before "Nb users in peerConnectionArray"
+            // I do understand the method closeConnection is called twice, but I don't understand how they manage to run in parallel.
+            //console.log('Closing connection with '+userId);
+            super.destroy(error);
+            //console.log('Nb users in peerConnectionArray '+this.PeerConnectionArray.size);
+        } catch (err) {
+            console.error("ScreenSharingPeer::destroy", err)
+        }
+    }
+
+    private pushScreenSharingToRemoteUser() {
+        const localScreenCapture: MediaStream | null = mediaManager.localScreenCapture;
+        if(!localScreenCapture){
+            return;
+        }
+
+        this.addStream(localScreenCapture);
+        return;
+    }
+
+    public stopPushingScreenSharingToRemoteUser(stream: MediaStream) {
+        this.removeStream(stream);
+        this.write(new Buffer(JSON.stringify({streamEnded: true})));
+    }
+}
diff --git a/front/src/WebRtc/SimplePeer.ts b/front/src/WebRtc/SimplePeer.ts
index 553c9307..f388b2ec 100644
--- a/front/src/WebRtc/SimplePeer.ts
+++ b/front/src/WebRtc/SimplePeer.ts
@@ -1,50 +1,84 @@
 import {
     Connection,
     WebRtcDisconnectMessageInterface,
-    WebRtcSignalMessageInterface,
+    WebRtcSignalReceivedMessageInterface,
     WebRtcStartMessageInterface
 } from "../Connection";
-import { mediaManager } from "./MediaManager";
+import {
+    mediaManager,
+    StartScreenSharingCallback,
+    StopScreenSharingCallback,
+    UpdatedLocalStreamCallback
+} from "./MediaManager";
 import * as SimplePeerNamespace from "simple-peer";
+import {ScreenSharingPeer} from "./ScreenSharingPeer";
+import {VideoPeer} from "./VideoPeer";
 const Peer: SimplePeerNamespace.SimplePeer = require('simple-peer');
 
-export interface UserSimplePeer{
+export interface UserSimplePeerInterface{
     userId: string;
     name?: string;
     initiator?: boolean;
 }
 
+export interface PeerConnectionListener {
+    onConnect(user: UserSimplePeerInterface): void;
+
+    onDisconnect(userId: string): void;
+}
+
 /**
  * This class manages connections to all the peers in the same group as me.
  */
 export class SimplePeer {
     private Connection: Connection;
     private WebRtcRoomId: string;
-    private Users: Array<UserSimplePeer> = new Array<UserSimplePeer>();
+    private Users: Array<UserSimplePeerInterface> = new Array<UserSimplePeerInterface>();
 
-    private PeerConnectionArray: Map<string, SimplePeerNamespace.Instance> = new Map<string, SimplePeerNamespace.Instance>();
-    private readonly updateLocalStreamCallback: (media: MediaStream) => void;
+    private PeerScreenSharingConnectionArray: Map<string, ScreenSharingPeer> = new Map<string, ScreenSharingPeer>();
+    private PeerConnectionArray: Map<string, VideoPeer> = new Map<string, VideoPeer>();
+    private readonly sendLocalVideoStreamCallback: UpdatedLocalStreamCallback;
+    private readonly sendLocalScreenSharingStreamCallback: StartScreenSharingCallback;
+    private readonly stopLocalScreenSharingStreamCallback: StopScreenSharingCallback;
+    private readonly peerConnectionListeners: Array<PeerConnectionListener> = new Array<PeerConnectionListener>();
 
     constructor(Connection: Connection, WebRtcRoomId: string = "test-webrtc") {
         this.Connection = Connection;
         this.WebRtcRoomId = WebRtcRoomId;
         // We need to go through this weird bound function pointer in order to be able to "free" this reference later.
-        this.updateLocalStreamCallback = this.updatedLocalStream.bind(this);
-        mediaManager.onUpdateLocalStream(this.updateLocalStreamCallback);
+        this.sendLocalVideoStreamCallback = this.sendLocalVideoStream.bind(this);
+        this.sendLocalScreenSharingStreamCallback = this.sendLocalScreenSharingStream.bind(this);
+        this.stopLocalScreenSharingStreamCallback = this.stopLocalScreenSharingStream.bind(this);
+        mediaManager.onUpdateLocalStream(this.sendLocalVideoStreamCallback);
+        mediaManager.onStartScreenSharing(this.sendLocalScreenSharingStreamCallback);
+        mediaManager.onStopScreenSharing(this.stopLocalScreenSharingStreamCallback);
         this.initialise();
     }
 
+    public registerPeerConnectionListener(peerConnectionListener: PeerConnectionListener) {
+        this.peerConnectionListeners.push(peerConnectionListener);
+    }
+
+    public getNbConnections(): number {
+        return this.PeerConnectionArray.size;
+    }
+
     /**
      * permit to listen when user could start visio
      */
     private initialise() {
 
         //receive signal by gemer
-        this.Connection.receiveWebrtcSignal((message: WebRtcSignalMessageInterface) => {
+        this.Connection.receiveWebrtcSignal((message: WebRtcSignalReceivedMessageInterface) => {
             this.receiveWebrtcSignal(message);
         });
 
-        mediaManager.activeVisio();
+        //receive signal by gemer
+        this.Connection.receiveWebrtcScreenSharingSignal((message: WebRtcSignalReceivedMessageInterface) => {
+            this.receiveWebrtcScreenSharingSignal(message);
+        });
+
+        mediaManager.showGameOverlay();
         mediaManager.getCamera().then(() => {
 
             //receive message start
@@ -64,7 +98,7 @@ export class SimplePeer {
     private receiveWebrtcStart(data: WebRtcStartMessageInterface) {
         this.WebRtcRoomId = data.roomId;
         this.Users = data.clients;
-        // Note: the clients array contain the list of all clients (event the ones we are already connected to in case a user joints a group)
+        // Note: the clients array contain the list of all clients (even the ones we are already connected to in case a user joints a group)
         // So we can receive a request we already had before. (which will abort at the first line of createPeerConnection)
         // TODO: refactor this to only send a message to connect to one user (rather than several users).
         // This would be symmetrical to the way we handle disconnection.
@@ -78,7 +112,8 @@ export class SimplePeer {
      * server has two people connected, start the meet
      */
     private startWebRtc() {
-        this.Users.forEach((user: UserSimplePeer) => {
+        console.warn('startWebRtc startWebRtc');
+        this.Users.forEach((user: UserSimplePeerInterface) => {
             //if it's not an initiator, peer connection will be created when gamer will receive offer signal
             if(!user.initiator){
                 return;
@@ -90,98 +125,63 @@ export class SimplePeer {
     /**
      * create peer connection to bind users
      */
-    private createPeerConnection(user : UserSimplePeer) {
-        if(this.PeerConnectionArray.has(user.userId)) {
-            return;
+    private createPeerConnection(user : UserSimplePeerInterface) : VideoPeer | null{
+        if(
+            this.PeerConnectionArray.has(user.userId)
+        ){
+            return null;
         }
 
-        //console.log("Creating connection with peer "+user.userId);
-
         let name = user.name;
         if(!name){
-            const userSearch = this.Users.find((userSearch: UserSimplePeer) => userSearch.userId === user.userId);
+            const userSearch = this.Users.find((userSearch: UserSimplePeerInterface) => userSearch.userId === user.userId);
             if(userSearch) {
                 name = userSearch.name;
             }
         }
+
         mediaManager.removeActiveVideo(user.userId);
         mediaManager.addActiveVideo(user.userId, name);
 
-        const peer : SimplePeerNamespace.Instance = new Peer({
-            initiator: user.initiator ? user.initiator : false,
-            reconnectTimer: 10000,
-            config: {
-                iceServers: [
-                    {
-                        urls: 'stun:stun.l.google.com:19302'
-                    },
-                    {
-                        urls: 'turn:numb.viagenie.ca',
-                        username: 'g.parant@thecodingmachine.com',
-                        credential: 'itcugcOHxle9Acqi$'
-                    },
-                ]
-            },
+        const peer = new VideoPeer(user.userId, user.initiator ? user.initiator : false, this.Connection);
+        // When a connection is established to a video stream, and if a screen sharing is taking place,
+        // the user sharing screen should also initiate a connection to the remote user!
+        peer.on('connect', () => {
+            if (mediaManager.localScreenCapture) {
+                this.sendLocalScreenSharingStreamToUser(user.userId);
+            }
         });
         this.PeerConnectionArray.set(user.userId, peer);
 
-        //start listen signal for the peer connection
-        peer.on('signal', (data: unknown) => {
-            this.sendWebrtcSignal(data, user.userId);
-        });
+        for (const peerConnectionListener of this.peerConnectionListeners) {
+            peerConnectionListener.onConnect(user);
+        }
+        return peer;
+    }
 
-        peer.on('stream', (stream: MediaStream) => {
-            let videoActive = false;
-            let microphoneActive = false;
-            stream.getTracks().forEach((track :  MediaStreamTrack) => {
-                if(track.kind === "audio"){
-                    microphoneActive = true;
-                }
-                if(track.kind === "video"){
-                    videoActive = true;
-                }
-            });
-            if(microphoneActive){
-                mediaManager.enabledMicrophoneByUserId(user.userId);
-            }else{
-                mediaManager.disabledMicrophoneByUserId(user.userId);
-            }
+    /**
+     * create peer connection to bind users
+     */
+    private createPeerScreenSharingConnection(user : UserSimplePeerInterface) : ScreenSharingPeer | null{
+        if(
+            this.PeerScreenSharingConnectionArray.has(user.userId)
+        ){
+            return null;
+        }
 
-            if(videoActive){
-                mediaManager.enabledVideoByUserId(user.userId);
-            }else{
-                mediaManager.disabledVideoByUserId(user.userId);
-            }
-            this.stream(user.userId, stream);
-        });
+        // We should display the screen sharing ONLY if we are not initiator
+        if (!user.initiator) {
+            mediaManager.removeActiveScreenSharingVideo(user.userId);
+            mediaManager.addScreenSharingActiveVideo(user.userId);
+        }
 
-        /*peer.on('track', (track: MediaStreamTrack, stream: MediaStream) => {
-            this.stream(user.userId, stream);
-        });*/
+        const peer = new ScreenSharingPeer(user.userId, user.initiator ? user.initiator : false, this.Connection);
+        this.PeerScreenSharingConnectionArray.set(user.userId, peer);
 
-        peer.on('close', () => {
-            this.closeConnection(user.userId);
-        });
-
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        peer.on('error', (err: any) => {
-            console.error(`error => ${user.userId} => ${err.code}`, err);
-            mediaManager.isError(user.userId);
-        });
-
-        peer.on('connect', () => {
-            mediaManager.isConnected(user.userId);
-            console.info(`connect => ${user.userId}`);
-        });
-
-        peer.on('data',  (chunk: Buffer) => {
-            const data = JSON.parse(chunk.toString('utf8'));
-            if(data.type === "stream"){
-                this.stream(user.userId, data.stream);
-            }
-        });
-
-        this.addMedia(user.userId);
+        for (const peerConnectionListener of this.peerConnectionListeners) {
+            peerConnectionListener.onConnect(user);
+        }
+        return peer;
     }
 
     /**
@@ -191,17 +191,45 @@ export class SimplePeer {
      */
     private closeConnection(userId : string) {
         try {
-            mediaManager.removeActiveVideo(userId);
+            //mediaManager.removeActiveVideo(userId);
             const peer = this.PeerConnectionArray.get(userId);
             if (peer === undefined) {
                 console.warn("Tried to close connection for user "+userId+" but could not find user")
                 return;
             }
+            peer.destroy();
+            // FIXME: I don't understand why "Closing connection with" message is displayed TWICE before "Nb users in peerConnectionArray"
+            // I do understand the method closeConnection is called twice, but I don't understand how they manage to run in parallel.
+            //console.log('Closing connection with '+userId);
+            this.PeerConnectionArray.delete(userId);
+            this.closeScreenSharingConnection(userId);
+            //console.log('Nb users in peerConnectionArray '+this.PeerConnectionArray.size);
+            for (const peerConnectionListener of this.peerConnectionListeners) {
+                peerConnectionListener.onDisconnect(userId);
+            }
+        } catch (err) {
+            console.error("closeConnection", err)
+        }
+    }
+
+    /**
+     * This is triggered twice. Once by the server, and once by a remote client disconnecting
+     *
+     * @param userId
+     */
+    private closeScreenSharingConnection(userId : string) {
+        try {
+            mediaManager.removeActiveScreenSharingVideo(userId);
+            const peer = this.PeerScreenSharingConnectionArray.get(userId);
+            if (peer === undefined) {
+                console.warn("Tried to close connection for user "+userId+" but could not find user")
+                return;
+            }
             // FIXME: I don't understand why "Closing connection with" message is displayed TWICE before "Nb users in peerConnectionArray"
             // I do understand the method closeConnection is called twice, but I don't understand how they manage to run in parallel.
             //console.log('Closing connection with '+userId);
             peer.destroy();
-            this.PeerConnectionArray.delete(userId)
+            this.PeerScreenSharingConnectionArray.delete(userId)
             //console.log('Nb users in peerConnectionArray '+this.PeerConnectionArray.size);
         } catch (err) {
             console.error("closeConnection", err)
@@ -212,30 +240,21 @@ export class SimplePeer {
         for (const userId of this.PeerConnectionArray.keys()) {
             this.closeConnection(userId);
         }
+
+        for (const userId of this.PeerScreenSharingConnectionArray.keys()) {
+            this.closeScreenSharingConnection(userId);
+        }
     }
 
     /**
      * Unregisters any held event handler.
      */
     public unregister() {
-        mediaManager.removeUpdateLocalStreamEventListener(this.updateLocalStreamCallback);
-    }
-
-    /**
-     *
-     * @param userId
-     * @param data
-     */
-    private sendWebrtcSignal(data: unknown, userId : string) {
-        try {
-            this.Connection.sendWebrtcSignal(data, this.WebRtcRoomId, null, userId);
-        }catch (e) {
-            console.error(`sendWebrtcSignal => ${userId}`, e);
-        }
+        mediaManager.removeUpdateLocalStreamEventListener(this.sendLocalVideoStreamCallback);
     }
 
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    private receiveWebrtcSignal(data: WebRtcSignalMessageInterface) {
+    private receiveWebrtcSignal(data: WebRtcSignalReceivedMessageInterface) {
         try {
             //if offer type, create peer connection
             if(data.signal.type === "offer"){
@@ -252,53 +271,126 @@ export class SimplePeer {
         }
     }
 
-    /**
-     *
-     * @param userId
-     * @param stream
-     */
-    private stream(userId : string, stream: MediaStream) {
-        if(!stream){
-            mediaManager.disabledVideoByUserId(userId);
-            mediaManager.disabledMicrophoneByUserId(userId);
-            return;
+    private receiveWebrtcScreenSharingSignal(data: WebRtcSignalReceivedMessageInterface) {
+        console.log("receiveWebrtcScreenSharingSignal", data);
+        try {
+            //if offer type, create peer connection
+            if(data.signal.type === "offer"){
+                this.createPeerScreenSharingConnection(data);
+            }
+            const peer = this.PeerScreenSharingConnectionArray.get(data.userId);
+            if (peer !== undefined) {
+                peer.signal(data.signal);
+            } else {
+                console.error('Could not find peer whose ID is "'+data.userId+'" in receiveWebrtcScreenSharingSignal');
+            }
+        } catch (e) {
+            console.error(`receiveWebrtcSignal => ${data.userId}`, e);
         }
-        mediaManager.addStreamRemoteVideo(userId, stream);
     }
 
     /**
      *
      * @param userId
      */
-    private addMedia (userId : string) {
+    private pushVideoToRemoteUser(userId : string) {
         try {
-            const localStream: MediaStream|null = mediaManager.localStream;
-            const peer = this.PeerConnectionArray.get(userId);
-            if(localStream === null) {
-                //send fake signal
-                if(peer === undefined){
-                    return;
-                }
-                peer.write(new Buffer(JSON.stringify({
-                    type: "stream",
-                    stream: null
-                })));
+            const PeerConnection = this.PeerConnectionArray.get(userId);
+            if (!PeerConnection) {
+                throw new Error('While adding media, cannot find user with ID ' + userId);
+            }
+            const localStream: MediaStream | null = mediaManager.localStream;
+            PeerConnection.write(new Buffer(JSON.stringify(mediaManager.constraintsMedia)));
+
+            if(!localStream){
                 return;
             }
-            if (peer === undefined) {
-                throw new Error('While adding media, cannot find user with ID '+userId);
-            }
+
             for (const track of localStream.getTracks()) {
-                peer.addTrack(track, localStream);
+                PeerConnection.addTrack(track, localStream);
             }
         }catch (e) {
-            console.error(`addMedia => addMedia => ${userId}`, e);
+            console.error(`pushVideoToRemoteUser => ${userId}`, e);
         }
     }
 
-    updatedLocalStream(){
-        this.Users.forEach((user: UserSimplePeer) => {
-            this.addMedia(user.userId);
-        })
+    private pushScreenSharingToRemoteUser(userId : string) {
+        const PeerConnection = this.PeerScreenSharingConnectionArray.get(userId);
+        if (!PeerConnection) {
+            throw new Error('While pushing screen sharing, cannot find user with ID ' + userId);
+        }
+        const localScreenCapture: MediaStream | null = mediaManager.localScreenCapture;
+        if(!localScreenCapture){
+            return;
+        }
+
+        for (const track of localScreenCapture.getTracks()) {
+            PeerConnection.addTrack(track, localScreenCapture);
+        }
+        return;
+    }
+
+    public sendLocalVideoStream(){
+        for (const user of this.Users) {
+            this.pushVideoToRemoteUser(user.userId);
+        }
+    }
+
+    /**
+     * Triggered locally when clicking on the screen sharing button
+     */
+    public sendLocalScreenSharingStream() {
+        if (!mediaManager.localScreenCapture) {
+            console.error('Could not find localScreenCapture to share')
+            return;
+        }
+
+        for (const user of this.Users) {
+            this.sendLocalScreenSharingStreamToUser(user.userId);
+        }
+    }
+
+    /**
+     * Triggered locally when clicking on the screen sharing button
+     */
+    public stopLocalScreenSharingStream(stream: MediaStream) {
+        for (const user of this.Users) {
+            this.stopLocalScreenSharingStreamToUser(user.userId, stream);
+        }
+    }
+
+    private sendLocalScreenSharingStreamToUser(userId: string): void {
+        // If a connection already exists with user (because it is already sharing a screen with us... let's use this connection)
+        if (this.PeerScreenSharingConnectionArray.has(userId)) {
+            this.pushScreenSharingToRemoteUser(userId);
+            return;
+        }
+
+        const screenSharingUser: UserSimplePeerInterface = {
+            userId,
+            initiator: true
+        };
+        const PeerConnectionScreenSharing = this.createPeerScreenSharingConnection(screenSharingUser);
+        if (!PeerConnectionScreenSharing) {
+            return;
+        }
+    }
+
+    private stopLocalScreenSharingStreamToUser(userId: string, stream: MediaStream): void {
+        const PeerConnectionScreenSharing = this.PeerScreenSharingConnectionArray.get(userId);
+        if (!PeerConnectionScreenSharing) {
+            throw new Error('Weird, screen sharing connection to user ' + userId + 'not found')
+        }
+
+        console.log("updatedScreenSharing => destroy", PeerConnectionScreenSharing);
+
+        // Stop sending stream and close peer connection if peer is not sending stream too
+        PeerConnectionScreenSharing.stopPushingScreenSharingToRemoteUser(stream);
+
+        if (!PeerConnectionScreenSharing.isReceivingScreenSharingStream()) {
+            PeerConnectionScreenSharing.destroy();
+
+            this.PeerScreenSharingConnectionArray.delete(userId);
+        }
     }
 }
diff --git a/front/src/WebRtc/VideoPeer.ts b/front/src/WebRtc/VideoPeer.ts
new file mode 100644
index 00000000..33422433
--- /dev/null
+++ b/front/src/WebRtc/VideoPeer.ts
@@ -0,0 +1,146 @@
+import * as SimplePeerNamespace from "simple-peer";
+import {mediaManager} from "./MediaManager";
+import {Connection} from "../Connection";
+import {TURN_PASSWORD, TURN_SERVER, TURN_USER} from "../Enum/EnvironmentVariable";
+
+const Peer: SimplePeerNamespace.SimplePeer = require('simple-peer');
+
+/**
+ * A peer connection used to transmit video / audio signals between 2 peers.
+ */
+export class VideoPeer extends Peer {
+    constructor(private userId: string, initiator: boolean, private connection: Connection) {
+        super({
+            initiator: initiator ? initiator : false,
+            reconnectTimer: 10000,
+            config: {
+                iceServers: [
+                    {
+                        urls: 'stun:stun.l.google.com:19302'
+                    },
+                    {
+                        urls: TURN_SERVER.split(','),
+                        username: TURN_USER,
+                        credential: TURN_PASSWORD
+                    },
+                ]
+            }
+        });
+
+        console.log('PEER SETUP ', {
+            initiator: initiator ? initiator : false,
+            reconnectTimer: 10000,
+            config: {
+                iceServers: [
+                    {
+                        urls: 'stun:stun.l.google.com:19302'
+                    },
+                    {
+                        urls: TURN_SERVER,
+                        username: TURN_USER,
+                        credential: TURN_PASSWORD
+                    },
+                ]
+            }
+        })
+
+        //start listen signal for the peer connection
+        this.on('signal', (data: unknown) => {
+            this.sendWebrtcSignal(data);
+        });
+
+        this.on('stream', (stream: MediaStream) => {
+            this.stream(stream);
+        });
+
+        /*peer.on('track', (track: MediaStreamTrack, stream: MediaStream) => {
+        });*/
+
+        this.on('close', () => {
+            this.destroy();
+        });
+
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        this.on('error', (err: any) => {
+            console.error(`error => ${this.userId} => ${err.code}`, err);
+            mediaManager.isError(userId);
+        });
+
+        this.on('connect', () => {
+            mediaManager.isConnected(this.userId);
+            console.info(`connect => ${this.userId}`);
+        });
+
+        this.on('data',  (chunk: Buffer) => {
+            const constraint = JSON.parse(chunk.toString('utf8'));
+            console.log("data", constraint);
+            if (constraint.audio) {
+                mediaManager.enabledMicrophoneByUserId(this.userId);
+            } else {
+                mediaManager.disabledMicrophoneByUserId(this.userId);
+            }
+
+            if (constraint.video || constraint.screen) {
+                mediaManager.enabledVideoByUserId(this.userId);
+            } else {
+                this.stream(undefined);
+                mediaManager.disabledVideoByUserId(this.userId);
+            }
+        });
+
+        this.pushVideoToRemoteUser();
+    }
+
+    private sendWebrtcSignal(data: unknown) {
+        try {
+            this.connection.sendWebrtcSignal(data, this.userId);
+        }catch (e) {
+            console.error(`sendWebrtcSignal => ${this.userId}`, e);
+        }
+    }
+
+    /**
+     * Sends received stream to screen.
+     */
+    private stream(stream?: MediaStream) {
+        //console.log(`VideoPeer::stream => ${this.userId}`, stream);
+        if(!stream){
+            mediaManager.disabledVideoByUserId(this.userId);
+            mediaManager.disabledMicrophoneByUserId(this.userId);
+        } else {
+            mediaManager.addStreamRemoteVideo(this.userId, stream);
+        }
+    }
+
+    /**
+     * This is triggered twice. Once by the server, and once by a remote client disconnecting
+     */
+    public destroy(error?: Error): void {
+        try {
+            mediaManager.removeActiveVideo(this.userId);
+            // FIXME: I don't understand why "Closing connection with" message is displayed TWICE before "Nb users in peerConnectionArray"
+            // I do understand the method closeConnection is called twice, but I don't understand how they manage to run in parallel.
+            //console.log('Closing connection with '+userId);
+            super.destroy(error);
+        } catch (err) {
+            console.error("VideoPeer::destroy", err)
+        }
+    }
+
+    private pushVideoToRemoteUser() {
+        try {
+            const localStream: MediaStream | null = mediaManager.localStream;
+            this.write(new Buffer(JSON.stringify(mediaManager.constraintsMedia)));
+
+            if(!localStream){
+                return;
+            }
+
+            for (const track of localStream.getTracks()) {
+                this.addTrack(track, localStream);
+            }
+        }catch (e) {
+            console.error(`pushVideoToRemoteUser => ${this.userId}`, e);
+        }
+    }
+}
diff --git a/front/src/index.ts b/front/src/index.ts
index 7634351f..5c198f9f 100644
--- a/front/src/index.ts
+++ b/front/src/index.ts
@@ -1,19 +1,31 @@
 import 'phaser';
 import GameConfig = Phaser.Types.Core.GameConfig;
-import {DEBUG_MODE, RESOLUTION} from "./Enum/EnvironmentVariable";
+import {DEBUG_MODE, JITSI_URL, RESOLUTION} from "./Enum/EnvironmentVariable";
 import {cypressAsserter} from "./Cypress/CypressAsserter";
 import {LoginScene} from "./Phaser/Login/LoginScene";
 import {ReconnectingScene} from "./Phaser/Reconnecting/ReconnectingScene";
-import {gameManager} from "./Phaser/Game/GameManager";
 import {SelectCharacterScene} from "./Phaser/Login/SelectCharacterScene";
 import {EnableCameraScene} from "./Phaser/Login/EnableCameraScene";
 import {FourOFourScene} from "./Phaser/Reconnecting/FourOFourScene";
 import {CustomizeScene} from "./Phaser/Login/CustomizeScene";
+import {HtmlUtils} from "./WebRtc/HtmlUtils";
+import {CoWebsiteManager} from "./WebRtc/CoWebsiteManager";
+
+//CoWebsiteManager.loadCoWebsite('https://thecodingmachine.com');
+
+// Load Jitsi if the environment variable is set.
+if (JITSI_URL) {
+    const jitsiScript = document.createElement('script');
+    jitsiScript.src = 'https://' + JITSI_URL + '/external_api.js';
+    document.head.appendChild(jitsiScript);
+}
+
+const {width, height} = CoWebsiteManager.getGameSize();
 
 const config: GameConfig = {
-    title: "Office game",
-    width: window.innerWidth / RESOLUTION,
-    height: window.innerHeight / RESOLUTION,
+    title: "WorkAdventure",
+    width: width / RESOLUTION,
+    height: height / RESOLUTION,
     parent: "game",
     scene: [LoginScene, SelectCharacterScene, EnableCameraScene, ReconnectingScene, FourOFourScene, CustomizeScene],
     zoom: RESOLUTION,
@@ -30,5 +42,12 @@ cypressAsserter.gameStarted();
 const game = new Phaser.Game(config);
 
 window.addEventListener('resize', function (event) {
-    game.scale.resize(window.innerWidth / RESOLUTION, window.innerHeight / RESOLUTION);
+    const {width, height} = CoWebsiteManager.getGameSize();
+
+    game.scale.resize(width / RESOLUTION, height / RESOLUTION);
+});
+CoWebsiteManager.onStateChange(() => {
+    const {width, height} = CoWebsiteManager.getGameSize();
+
+    game.scale.resize(width / RESOLUTION, height / RESOLUTION);
 });
diff --git a/front/tsconfig.json b/front/tsconfig.json
index 1661efa2..64d71e42 100644
--- a/front/tsconfig.json
+++ b/front/tsconfig.json
@@ -3,19 +3,18 @@
     "outDir": "./dist/",
     "sourceMap": true,
     "moduleResolution": "node",
-    "noImplicitAny": true,
     "module": "CommonJS",
-    "target": "es5",
+    "target": "es6",
     "downlevelIteration": true,
     "jsx": "react",
     "allowJs": true,
 
-    "strict": false,                           /* Enable all strict type-checking options. */
+    "strict": true,                           /* Enable all strict type-checking options. */
      "noImplicitAny": true,                 /* Raise error on expressions and declarations with an implied 'any' type. */
      "strictNullChecks": true,              /* Enable strict null checks. */
      "strictFunctionTypes": true,           /* Enable strict checking of function types. */
      "strictBindCallApply": true,           /* Enable strict 'bind', 'call', and 'apply' methods on functions. */
-     "strictPropertyInitialization": false,  /* Enable strict checking of property initialization in classes. */
+     "strictPropertyInitialization": true,  /* Enable strict checking of property initialization in classes. */
      "noImplicitThis": true,                /* Raise error on 'this' expressions with an implied 'any' type. */
      "alwaysStrict": true,                  /* Parse in strict mode and emit "use strict" for each source file. */
 
diff --git a/front/webpack.config.js b/front/webpack.config.js
index 61424eeb..3083fd25 100644
--- a/front/webpack.config.js
+++ b/front/webpack.config.js
@@ -42,7 +42,7 @@ module.exports = {
         new webpack.ProvidePlugin({
             Phaser: 'phaser'
         }),
-        new webpack.EnvironmentPlugin(['API_URL', 'DEBUG_MODE'])
+        new webpack.EnvironmentPlugin(['API_URL', 'DEBUG_MODE', 'TURN_SERVER', 'TURN_USER', 'TURN_PASSWORD', 'JITSI_URL'])
     ],
 
 };
diff --git a/website/dist/create-map.html b/website/dist/create-map.html
index 6df98e52..6eb1a266 100644
--- a/website/dist/create-map.html
+++ b/website/dist/create-map.html
@@ -150,10 +150,32 @@
                     <li>You can of course use the &quot;#&quot; notation in an exit scene URL (so an exit scene URL will point to a given entry scene URL)</li>
                 </ul>
 
+                <h3 id="opening-a-website-when-walking-on-the-map" class="pixel-title">Opening a website when walking on the map</h3>
+                <p>On your map, you can define special zones. When a player will pass over these zones, a website will open
+                (as an iframe on the right side of the screen)</p>
+                <p>In order to create a zone that opens websites:</p>
+                <ul>
+                    <li>You must create a specific layer.</li>
+                    <li>In layer properties, you MUST add a &quot;openWebsite&quot; property (of type "string"). The value of the property is the URL of the website to open (the URL must start with "https://")</li>
+                </ul>
 
+                <h3 id="opening-a-jitsi-meet-when-walking-on-the-map" class="pixel-title">Opening a Jitsi meet when walking on the map</h3>
+                <p>On your map, you can define special zones (meeting rooms) that will trigger the opening of a Jitsi meet. When a player will pass over these zones, a Jitsi meet will open
+                    (as an iframe on the right side of the screen)</p>
+                <p>In order to create Jitsi meet zones:</p>
+                <ul>
+                    <li>You must create a specific layer.</li>
+                    <li>In layer properties, you MUST add a boolean &quot;jitsiRoom&quot; property (of type "string"). The value of the property is the name of the room in Jitsi. Note: the name of the room will be prepended with the name of the instance of the map (so that different instances of the map have different rooms)</li>
+                </ul>
 
-
-
+                <h3 id="making-a-silent-zone" class="pixel-title">Making a "silent" zone</h3>
+                <p>On your map, you can define special silent zones where nobody is allowed to talk.
+                In these zones, users will not speak to each others, even if they are next to each others.</p>
+                <p>In order to create a silent zone:</p>
+                <ul>
+                    <li>You must create a specific layer.</li>
+                    <li>In layer properties, you MUST add a boolean &quot;silent&quot; property. If the silent property is checked, the users are entering the silent zone when they walk on any tile of the layer.</li>
+                </ul>
 
                 <h3 id="pushing-the-map" class="pixel-title">Pushing the map</h3>
                 <p>When your changes are ready, you need to &quot;commit&quot; and &quot;push&quot; (i.e. "upload") the changes back to GitHub.