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

front/src/Phaser/Login/CustomizeScene.ts

@@ -111,7 +111,15 @@ export class CustomizeScene extends AbstractCharacterScene {
         this.onResize();
     }
 
-    public doMoveCursorHorizontally(index: number): void {
+    public moveCursorHorizontally(index: number): void {
+        this.moveHorizontally = index;
+    }
+
+    public moveCursorVertically(index: number): void {
+        this.moveVertically = index;
+    }
+
+    private doMoveCursorHorizontally(index: number): void {
         this.selectedLayers[this.activeRow] += index;
         if (this.selectedLayers[this.activeRow] < 0) {
             this.selectedLayers[this.activeRow] = 0
@@ -123,7 +131,7 @@ export class CustomizeScene extends AbstractCharacterScene {
         this.saveInLocalStorage();
     }
 
-    public doMoveCursorVertically(index:number): void {
+    private doMoveCursorVertically(index:number): void {
 
         this.activeRow += index;
         if (this.activeRow < 0) {

front/src/WebRtc/CoWebsiteManager.ts

@@ -1,6 +1,7 @@
 import {HtmlUtils} from "./HtmlUtils";
 import {Subject} from "rxjs";
 import {iframeListener} from "../Api/IframeListener";
+import {touchScreenManager} from "../Touch/TouchScreenManager";
 
 enum iframeStates {
     closed = 1,
@@ -20,6 +21,11 @@ const cowebsiteFocusInactiveImageId = 'cowebsite-focus-inactive';
 const cowebsiteFocusActiveImageId = 'cowebsite-focus-active';
 const animationTime = 500; //time used by the css transitions, in ms.
 
+interface TouchMoveCoordinates {
+    x: number;
+    y: number;
+}
+
 class CoWebsiteManager {
 
     private opened: iframeStates = iframeStates.closed;
@@ -35,6 +41,7 @@ class CoWebsiteManager {
     private resizing: boolean = false;
     private cowebsiteMainDom: HTMLDivElement;
     private cowebsiteAsideDom: HTMLDivElement;
+    private previousTouchMoveCoordinates: TouchMoveCoordinates|null = null; //only use on touchscreens to track touch movement
 
     get width(): number {
         return this.cowebsiteDiv.clientWidth;
@@ -65,7 +72,10 @@ class CoWebsiteManager {
         this.cowebsiteMainDom = HtmlUtils.getElementByIdOrFail<HTMLDivElement>(cowebsiteMainDomId);
         this.cowebsiteAsideDom = HtmlUtils.getElementByIdOrFail<HTMLDivElement>(cowebsiteAsideDomId);
 
-        this.initResizeListeners();
+        if (touchScreenManager.supportTouchScreen) {
+            this.initResizeListeners(true);
+        }
+        this.initResizeListeners(false);
 
         const buttonCloseFrame = HtmlUtils.getElementByIdOrFail(cowebsiteCloseButtonId);
         buttonCloseFrame.addEventListener('click', () => {
@@ -83,22 +93,43 @@ class CoWebsiteManager {
         });
     }
 
-    private initResizeListeners() {
+    private initResizeListeners(touchMode:boolean) {
-        const movecallback = (event:MouseEvent) => {
+        const movecallback = (event:MouseEvent|TouchEvent) => {
-            this.verticalMode ? this.height += event.movementY / this.getDevicePixelRatio() : this.width -= event.movementX / this.getDevicePixelRatio();
+            let x, y;
+            if (event.type === 'mousemove') {
+                x = (event as MouseEvent).movementX / this.getDevicePixelRatio();
+                y = (event as MouseEvent).movementY / this.getDevicePixelRatio();
+            } else {
+                const touchEvent = (event as TouchEvent).touches[0];
+                const last = {x: touchEvent.pageX, y: touchEvent.pageY};
+                const previous = this.previousTouchMoveCoordinates as TouchMoveCoordinates;
+                this.previousTouchMoveCoordinates = last;
+                x = last.x - previous.x;
+                y = last.y - previous.y;
+            }
+            
+            
+            this.verticalMode ? this.height += y : this.width -= x;
             this.fire();
         }
 
-        this.cowebsiteAsideDom.addEventListener('mousedown', (event) => {
+        this.cowebsiteAsideDom.addEventListener( touchMode ? 'touchstart' : 'mousedown', (event) => {
             this.resizing = true;
             this.getIframeDom().style.display = 'none';
+            if (touchMode) {
+                const touchEvent = (event as TouchEvent).touches[0];
+                this.previousTouchMoveCoordinates = {x: touchEvent.pageX, y: touchEvent.pageY};
+            }
 
-            document.addEventListener('mousemove', movecallback);
+            document.addEventListener(touchMode ? 'touchmove' : 'mousemove', movecallback);
         });
 
-        document.addEventListener('mouseup', (event) => {
+        document.addEventListener(touchMode ? 'touchend' : 'mouseup', (event) => {
             if (!this.resizing) return;
-            document.removeEventListener('mousemove', movecallback);
+            if (touchMode) {
+                this.previousTouchMoveCoordinates = null;
+            }
+            document.removeEventListener(touchMode ? 'touchmove' : 'mousemove', movecallback);
             this.getIframeDom().style.display = 'block';
             this.resizing = false;
             HtmlUtils.getElementByIdOrFail(cowebsiteOpenFullScreenImageId).style.display = 'inline';

front/style/cowebsite-mobile.scss

@@ -28,6 +28,7 @@
   
       aside {
         height: 30px;
+        min-height: 30px;
         cursor: ns-resize;
         flex-direction: column;
   

front/style/cowebsite.scss

@@ -17,6 +17,8 @@
     iframe {
       width: 100%;
       height: 100%;
+      max-width: 100vw;
+      max-height: 100vh;
     }
   }