From 75a4b918297eb2f0026cbbbf344f565b8eb299f7 Mon Sep 17 00:00:00 2001
From: ykoeth <yann.koeth@gmail.com>
Date: Fri, 10 Feb 2023 16:42:23 +0100
Subject: [PATCH] Fix follow offset during conference

---
 core/client/helpers.js            | 30 +++++++++++++++++++++++++++++-
 core/client/lemverse.js           | 16 ++--------------
 core/client/scenes/scene-world.js |  5 ++++-
 3 files changed, 35 insertions(+), 16 deletions(-)

diff --git a/core/client/helpers.js b/core/client/helpers.js
index c5c448e2..c7808db6 100644
--- a/core/client/helpers.js
+++ b/core/client/helpers.js
@@ -98,6 +98,33 @@ const getSimulationSize = () => {
   };
 };
 
+const getResizableMeetWidth = () => {
+  const { WorldScene } = game.scene.keys;
+  if (WorldScene.viewportMode !== viewportModes.fullscreen && Session.get('screenMode') !== 'unlocked') {
+    return document.querySelector('.resizableMeet').clientWidth;
+  }
+  return 0;
+};
+
+const updateFollowOffset = () => {
+  if (!levelManager.map) return;
+  const { WorldScene, UIScene } = game.scene.keys;
+  const parentWidth = getSimulationSize().width;
+  const elementWidth = getResizableMeetWidth();
+  const width = parentWidth - elementWidth;
+  document.querySelector('.simulation').style.setProperty('--game-modules-adaptative-size', `${width}px`);
+
+  const offset = (Session.get('screenSide') === 'right') ? -elementWidth / 2 : elementWidth / 2;
+  const zoomFactor = 1 / WorldScene.cameras.main.zoom;
+
+  WorldScene.cameras.main.followOffset.x = offset * zoomFactor;
+  UIScene.cameras.main.followOffset.x = offset * zoomFactor;
+
+  const boundX = (Session.get('screenSide') === 'right') ? 0 : -elementWidth * zoomFactor;
+  UIScene.cameras.main.setBounds(boundX, 0, levelManager.map.widthInPixels + elementWidth * zoomFactor, levelManager.map.heightInPixels);
+  WorldScene.cameras.main.setBounds(boundX, 0, levelManager.map.widthInPixels + elementWidth * zoomFactor, levelManager.map.heightInPixels);
+};
+
 updateViewport = (scene, mode) => {
   if (typeof mode !== 'string') mode = scene.viewportMode;
 
@@ -112,7 +139,7 @@ updateViewport = (scene, mode) => {
   scene.cameras.main.setViewport(0, 0, width, height);
 
   scene.viewportMode = mode;
-
+  updateFollowOffset();
   const event = new CustomEvent(eventTypes.onViewportUpdated);
   window.dispatchEvent(event);
 };
@@ -351,6 +378,7 @@ export {
   setReaction,
   textDirectionToVector,
   toggleUIInputs,
+  updateFollowOffset,
   vectorToTextDirection,
 
   moduleType,
diff --git a/core/client/lemverse.js b/core/client/lemverse.js
index 77a0f1b7..4f3991c6 100644
--- a/core/client/lemverse.js
+++ b/core/client/lemverse.js
@@ -2,7 +2,7 @@ import hotkeys from 'hotkeys-js';
 import Phaser from 'phaser';
 import audioManager from './audio-manager';
 import meetingRoom from './meeting-room';
-import { setReaction } from './helpers';
+import { setReaction, updateFollowOffset } from './helpers';
 import URLOpener from './url-opener';
 import { guestAllowed, permissionTypes } from '../lib/misc';
 import initSentryClient from './sentry';
@@ -87,19 +87,7 @@ Template.lemverse.onCreated(function () {
   });
 
   window.addEventListener(eventTypes.onElementResized, event => {
-    const { WorldScene, UIScene } = game.scene.keys;
-    if (WorldScene.viewportMode !== viewportModes.fullscreen && Session.get('screenMode') !== 'unlocked') {
-      const parentElement = this.firstNode.querySelector('.simulation');
-      const parentWidth = parentElement.getBoundingClientRect().width;
-      const elementWidth = event.detail.borderBoxSize[0].inlineSize;
-      const width = parentWidth - elementWidth;
-      this.firstNode.style.setProperty('--game-modules-adaptative-size', `${width}px`);
-
-      const offset = (Session.get('screenSide') === 'right') ? -elementWidth / 2 : elementWidth / 2;
-
-      WorldScene.cameras.main.followOffset.x = offset;
-      UIScene.cameras.main.followOffset.x = offset;
-    }
+    updateFollowOffset();
   });
 
   window.addEventListener(eventTypes.onZoneLeft, event => {
diff --git a/core/client/scenes/scene-world.js b/core/client/scenes/scene-world.js
index 2ae58800..c37cc8ae 100644
--- a/core/client/scenes/scene-world.js
+++ b/core/client/scenes/scene-world.js
@@ -4,7 +4,7 @@ import Phaser from 'phaser';
 import networkManager from '../network-manager';
 import URLOpener from '../url-opener';
 
-import { clamp, isMobile } from '../helpers';
+import { clamp, isMobile, updateFollowOffset } from '../helpers';
 
 const fixedUpdateInterval = 200;
 const zoomConfig = Meteor.settings.public.zoom;
@@ -70,9 +70,12 @@ WorldScene = new Phaser.Class({
       document.activeElement.blur();
     });
 
+    const throttledUpdateFollowOffset = throttle(() => updateFollowOffset(), 100);
+
     // Notes: tilesets with extrusion are required to avoid potential black lines between tiles (see https://github.com/sporadic-labs/tile-extruder)
     this.input.on('wheel', (_pointer, _gameObjects, _deltaX, deltaY) => {
       this.zoomDelta(deltaY);
+      throttledUpdateFollowOffset();
     });
 
     if (isMobile()) {