From 50a0e3911a11886bd977c1d0588ec8a3035c360a Mon Sep 17 00:00:00 2001
From: duckietm <troop@mailtjes.com>
Date: Wed, 18 Mar 2026 13:53:14 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=86=99=20Fix=20screen=20offset=20being=20?=
 =?UTF-8?q?stale=20after=20resize?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/MainView.tsx             |  1 +
 src/components/hotel-view/HotelView.tsx | 45 +++++++++++++++----------
 src/components/room/RoomView.tsx        |  3 +-
 src/hooks/rooms/useRoom.ts              | 19 +++++++----
 4 files changed, 42 insertions(+), 26 deletions(-)

diff --git a/src/components/MainView.tsx b/src/components/MainView.tsx
index 3fef0cc..817bf2a 100644
--- a/src/components/MainView.tsx
+++ b/src/components/MainView.tsx
@@ -85,6 +85,7 @@ export const MainView: FC<{}> = props =>
             <AnimatePresence>
                 { landingViewVisible &&
                     <motion.div
+						className="w-full h-full"
                         initial={ { opacity: 0 }}
                         animate={ { opacity: 1 }}
                         exit={ { opacity: 0 }}>
diff --git a/src/components/hotel-view/HotelView.tsx b/src/components/hotel-view/HotelView.tsx
index efd3774..e0a2605 100644
--- a/src/components/hotel-view/HotelView.tsx
+++ b/src/components/hotel-view/HotelView.tsx
@@ -83,27 +83,36 @@ export const HotelView: FC<{}> = props =>
 
         if(!container) return;
 
-        const viewportWidth  = window.innerWidth;
-        const viewportHeight = window.innerHeight - 55;
-
-        const lobbyEl = container.querySelector<HTMLElement>('.nitro-hotel-view-lobby');
-
-        if(lobbyEl)
+        const centerView = () =>
         {
-            const containerRect = container.getBoundingClientRect();
-            const lobbyRect     = lobbyEl.getBoundingClientRect();
+            const viewportWidth  = window.innerWidth;
+            const viewportHeight = window.innerHeight - 55;
 
-            const lobbyCenterX = (lobbyRect.left - containerRect.left) + container.scrollLeft + lobbyRect.width  / 2;
-            const lobbyCenterY = (lobbyRect.top  - containerRect.top)  + container.scrollTop  + lobbyRect.height / 2;
+            const lobbyEl = container.querySelector<HTMLElement>('.nitro-hotel-view-lobby');
 
-            container.scrollLeft = Math.max(0, lobbyCenterX - viewportWidth  / 2);
-            container.scrollTop  = Math.max(0, lobbyCenterY - viewportHeight / 2);
-        }
-        else
-        {
-            container.scrollLeft = Math.max(0, (2600 - viewportWidth)  / 2);
-            container.scrollTop  = Math.max(0, (1425 - viewportHeight) / 2);
-        }
+            if(lobbyEl)
+            {
+                const containerRect = container.getBoundingClientRect();
+                const lobbyRect     = lobbyEl.getBoundingClientRect();
+
+                const lobbyCenterX = (lobbyRect.left - containerRect.left) + container.scrollLeft + lobbyRect.width  / 2;
+                const lobbyCenterY = (lobbyRect.top  - containerRect.top)  + container.scrollTop  + lobbyRect.height / 2;
+
+                container.scrollLeft = Math.max(0, lobbyCenterX - viewportWidth  / 2);
+                container.scrollTop  = Math.max(0, lobbyCenterY - viewportHeight / 2);
+            }
+            else
+            {
+                container.scrollLeft = Math.max(0, (2600 - viewportWidth)  / 2);
+                container.scrollTop  = Math.max(0, (1425 - viewportHeight) / 2);
+            }
+        };
+
+        centerView();
+
+        window.addEventListener('resize', centerView);
+
+        return () => window.removeEventListener('resize', centerView);
     }, []);
 
     const handleMouseDown = (e: React.MouseEvent<HTMLDivElement>) =>
diff --git a/src/components/room/RoomView.tsx b/src/components/room/RoomView.tsx
index afec584..e2a8764 100644
--- a/src/components/room/RoomView.tsx
+++ b/src/components/room/RoomView.tsx
@@ -43,10 +43,11 @@ export const RoomView: FC<{}> = (props) =>
         <AnimatePresence>
             {
 				<motion.div
+                    className="w-full h-full"
                     initial={ { opacity: 0 }}
                     animate={ { opacity: 1 }}
                     exit={ { opacity: 0 }}>
-                    <div ref={ elementRef } className="w-100 h-100">
+                    <div ref={ elementRef } className="w-full h-full">
                         { roomSession instanceof RoomSession &&
                             <>
                                 <RoomWidgetsView />
diff --git a/src/hooks/rooms/useRoom.ts b/src/hooks/rooms/useRoom.ts
index 743ce87..157ab03 100644
--- a/src/hooks/rooms/useRoom.ts
+++ b/src/hooks/rooms/useRoom.ts
@@ -1,7 +1,7 @@
 import { ColorConverter, GetRenderer, GetRoomEngine, GetStage, IRoomSession, NitroAdjustmentFilter, NitroSprite, NitroTexture, RoomBackgroundColorEvent, RoomEngineEvent, RoomEngineObjectEvent, RoomGeometry, RoomId, RoomObjectCategory, RoomObjectHSLColorEnabledEvent, RoomObjectOperationType, RoomSessionEvent, RoomVariableEnum, Vector3d } from '@nitrots/nitro-renderer';
 import { useEffect, useState } from 'react';
 import { useBetween } from 'use-between';
-import { CanManipulateFurniture, DispatchUiEvent, GetRoomSession, InitializeRoomInstanceRenderingCanvas, IsFurnitureSelectionDisabled, ProcessRoomObjectOperation, RoomWidgetUpdateBackgroundColorPreviewEvent, RoomWidgetUpdateRoomObjectEvent, SetActiveRoomId, StartRoomSession } from '../../api';
+import { CanManipulateFurniture, DispatchUiEvent, GetRoomSession, IsFurnitureSelectionDisabled, ProcessRoomObjectOperation, RoomWidgetUpdateBackgroundColorPreviewEvent, RoomWidgetUpdateRoomObjectEvent, SetActiveRoomId, StartRoomSession } from '../../api';
 import { useNitroEvent, useUiEvent } from '../events';
 
 const useRoomState = () =>
@@ -253,15 +253,20 @@ const useRoomState = () =>
 
         const resize = (event: UIEvent) =>
         {
-            const width = Math.floor(window.innerWidth);
-            const height = Math.floor(window.innerHeight);
+            const newWidth = Math.floor(window.innerWidth);
+            const newHeight = Math.floor(window.innerHeight);
 
-            renderer.resize(width, height, window.devicePixelRatio);
+            const offsetX = canvas.screenOffsetX - (newWidth - canvas.width) / 2;
+            const offsetY = canvas.screenOffsetY - (newHeight - canvas.height) / 2;
 
-            background.width = width;
-            background.height = height;
+            renderer.resize(newWidth, newHeight, window.devicePixelRatio);
 
-            InitializeRoomInstanceRenderingCanvas(width, height, 1);
+            background.width = newWidth;
+            background.height = newHeight;
+
+            canvas.initialize(newWidth, newHeight);
+            canvas.screenOffsetX = ~~offsetX;
+            canvas.screenOffsetY = ~~offsetY;
         };
 
         window.addEventListener('resize', resize);