duckietm/Nitro-V3
1
0
Fork 0
mirror of https://github.com/duckietm/Nitro-V3.git synced 2026-06-19 23:16:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

🆙 Fix screen offset being stale after resize

Browse Source
This commit is contained in:
duckietm
2026-03-18 13:53:14 +01:00
parent c703029c34
commit 50a0e3911a
4 changed files with 42 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/MainView.tsx
+1
View File
@@ -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 }}>
src/components/hotel-view/HotelView.tsx
+27 -18
View File
@@ -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>) =>
src/components/room/RoomView.tsx
+2 -1
View File
@@ -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 />