Sektor Browser mobile optimieung

2026-06-06 17:00:15 +02:00
parent 06f862c68a
commit 18f99e896c
6 changed files with 98 additions and 34 deletions
@@ -77,30 +77,64 @@ export function setupResize(refs) {
        uiContainer.x = (screenWidth - (panelFrame.width * panelScale)) / 2;
        uiContainer.y = ((screenHeight - (panelFrame.height * panelScale)) / 2) + panelOffsetY;

-        let lobbyScale = 1.0;
-        if (screenWidth <= 1300) {
-            lobbyScale = screenWidth / 1300; 
-        }
-        if (screenHeight <= 750) {
-            const hScale = screenHeight / 750;
-            if (hScale < lobbyScale) lobbyScale = hScale;
-        }
+        const isMobilePortrait = screenWidth <= 800 && screenHeight > screenWidth;
+        const isLandscapeMobile = screenHeight <= 500;

-        lobbyPixiContainer.scale.set(lobbyScale);
-        lobbyPixiContainer.x = (screenWidth - (1240 * lobbyScale)) / 2;
-        lobbyPixiContainer.y = (screenHeight - (650 * lobbyScale)) / 2;
-
-        const sectorHtmlLayer = document.getElementById('sector-browser-layer');
-        if (sectorHtmlLayer) {
-            sectorHtmlLayer.style.transform = `translate(-50%, -50%) scale(${lobbyScale})`;
-        }
+        const targetPanelWidth = isMobilePortrait ? 650 : 1240;

        const htmlFooter = document.getElementById('game-footer');
        const footerHeight = (htmlFooter && htmlFooter.style.display !== 'none') ? htmlFooter.offsetHeight : 0;
+        const actualFooterHeight = Math.max(footerHeight, isLandscapeMobile ? 30 : 40);

-        const targetFooterHeight = Math.max(footerHeight, 40);
-        footerBackground.height = targetFooterHeight;
-        footerPattern.height = targetFooterHeight;
+        const visualWidth = screenWidth - (isMobilePortrait ? 20 : 60);
+        const visualHeight = screenHeight - actualFooterHeight - 80;
+
+        const lobbyScale = Math.min(1.0, visualWidth / targetPanelWidth);
+
+        let targetPanelHeight = visualHeight / lobbyScale; 
+        targetPanelHeight = Math.max(350, targetPanelHeight);
+
+        if (!isMobilePortrait && !isLandscapeMobile) {
+            targetPanelHeight = Math.min(800, targetPanelHeight);
+        }
+
+        let targetMaskHeight = targetPanelHeight - 110;
+
+        let lobbyOffsetY = 0;
+        if (isMobilePortrait) {
+            lobbyOffsetY = -25;
+        }
+
+        if (lobbyPixiContainer.bgSprite && lobbyPixiContainer.scrollMask) {
+            lobbyPixiContainer.bgSprite.width = targetPanelWidth;
+            lobbyPixiContainer.bgSprite.height = targetPanelHeight;
+            lobbyPixiContainer.scrollMask.clear();
+            lobbyPixiContainer.scrollMask.rect(30, 80, targetPanelWidth - 60, targetMaskHeight);
+            lobbyPixiContainer.scrollMask.fill(0xffffff);
+        }
+
+        lobbyPixiContainer.scale.set(lobbyScale);
+        lobbyPixiContainer.x = (screenWidth - (targetPanelWidth * lobbyScale)) / 2;
+        lobbyPixiContainer.y = ((screenHeight - (targetPanelHeight * lobbyScale)) / 2) + lobbyOffsetY;
+
+        const sectorHtmlLayer = document.getElementById('sector-browser-layer');
+        if (sectorHtmlLayer) {
+            sectorHtmlLayer.style.width = `${targetPanelWidth}px`;
+            sectorHtmlLayer.style.height = `${targetPanelHeight}px`;
+
+            sectorHtmlLayer.style.left = `${lobbyPixiContainer.x}px`;
+            sectorHtmlLayer.style.top = `${lobbyPixiContainer.y}px`;
+            sectorHtmlLayer.style.transformOrigin = '0 0';
+            sectorHtmlLayer.style.transform = `scale(${lobbyScale})`;
+        }
+
+        const sectorListContainer = document.getElementById('sector-list-container');
+        if (sectorListContainer) {
+            sectorListContainer.style.height = `${targetMaskHeight}px`; 
+        }
+
+        footerBackground.height = actualFooterHeight;
+        footerPattern.height = actualFooterHeight;

        footerBackground.width = screenWidth;
        footerPattern.width = screenWidth;
@@ -120,4 +154,14 @@ export function triggerResize() {
    if (manuelResizeCallback) {
        manuelResizeCallback();
    }
-}
+}
+
+/**
+ * Wenn der Nutzer das Gerät dreht, laden wir die Seite nach einer kurzen Vertögerung neu
+ * um sicherzustellen dass HTML und Canvas perfekr synchronisieren.
+ */
+window.addEventListener('orientationchange', () => {
+    setTimeout(() => {
+        window.location.reload();
+    }, 300); // 300ms warten, bis der Browser die neuen Maße gerendert hat
+});