Sektor Browser mobile optimieung

dev/lobby-frontend/src/core/pixi-app.js

@@ -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;
+        const isMobilePortrait = screenWidth <= 800 && screenHeight > screenWidth;
-        if (screenWidth <= 1300) {
+        const isLandscapeMobile = screenHeight <= 500;
-            lobbyScale = screenWidth / 1300; 
-        }
-        if (screenHeight <= 750) {
-            const hScale = screenHeight / 750;
-            if (hScale < lobbyScale) lobbyScale = hScale;
-        }
 
-        lobbyPixiContainer.scale.set(lobbyScale);
+        const targetPanelWidth = isMobilePortrait ? 650 : 1240;
-        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 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);
+        const visualWidth = screenWidth - (isMobilePortrait ? 20 : 60);
-        footerBackground.height = targetFooterHeight;
+        const visualHeight = screenHeight - actualFooterHeight - 80;
-        footerPattern.height = targetFooterHeight;
+
+        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;
@@ -121,3 +155,13 @@ export function triggerResize() {
         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
+});

dev/lobby-frontend/src/css/layout.css

@@ -11,11 +11,10 @@ body, html {
     overflow: hidden;
     background-color: var(--color-bg-page); 
     font-family: var(--font-main);
-    
-    /* NEU: Verbietet mobilen Browsern das eigenmächtige Vergrößern der Schrift */
     -webkit-text-size-adjust: 100%;
     text-size-adjust: 100%;
-}
+    position: fixed;
+    overscroll-behavior: none;}
 
 #game-wrapper {
     position: relative;

dev/lobby-frontend/src/css/lobby.css

@@ -194,7 +194,10 @@
     box-sizing: border-box;
     display: grid;
     grid-template-columns: repeat(4, 270px); 
-    gap: 20px 25px; 
+    grid-auto-rows: 90px;
+    row-gap: 20px;
+    column-gap: 25px;
+    align-content: start;
     justify-content: flex-start;
 }
 

dev/lobby-frontend/src/main.js

@@ -388,11 +388,15 @@ async function loadAndRenderSectorBrowser() {
         sectorTabsPixiContainer = new Container();
         lobbyPixiContainer.addChild(sectorTabsPixiContainer);
 
+        const isMobilePortrait = window.innerWidth <= 800 && window.innerHeight > window.innerWidth;
+        const centerPos = isMobilePortrait ? 325 : 620;
+
         if (data.mySectors.length === 0) {
             tabMySectors.style.display = 'none';
             tabNewSectors.classList.add('active');
             
-            const tabNewBg = createSectorTabPixi(globalSheet, 530, 20, 0x00f0ff, 0.6);
+            const singleTabX = centerPos - 90;
+            const tabNewBg = createSectorTabPixi(globalSheet, singleTabX, 20, 0x00f0ff, 0.6);
             sectorTabsPixiContainer.addChild(tabNewBg);
             renderSectorList(data.newSectors, 'new');
         } else {
@@ -401,8 +405,11 @@ async function loadAndRenderSectorBrowser() {
             tabMySectors.classList.add('active');
             tabNewSectors.classList.remove('active');
 
-            const tabMyBg = createSectorTabPixi(globalSheet, 430, 20, 0x00f0ff, 0.6);
+            const leftTabX = centerPos - 190;
-            const tabNewBg = createSectorTabPixi(globalSheet, 630, 20, 0xaaaaaa, 0.4);
+            const rightTabX = centerPos + 10;
+
+            const tabMyBg = createSectorTabPixi(globalSheet, leftTabX, 20, 0x00f0ff, 0.6);
+            const tabNewBg = createSectorTabPixi(globalSheet, rightTabX, 20, 0xaaaaaa, 0.4);
             sectorTabsPixiContainer.addChild(tabMyBg, tabNewBg);
 
             renderSectorList(data.mySectors, 'my');
@@ -469,7 +476,7 @@ function renderSectorList(sectors, type) {
                 <span class="sector-status ${sector.status === 'online' ? 'status-online' : 'status-maintenance'}" style="position: absolute; right: 20px; top: 17px;">
                     ${sector.status === 'online' ? 'online' : 'wartung'}
                 </span>
-                <span style="position: absolute; left: 35px; top: 54px; font-size: 13px; color: var(--color-text-placeholder);">Online: ${sector.online_players}/${totalPlayers}</span>
+                <span style="position: absolute; left: 40px; top: 54px; font-size: 13px; color: var(--color-text-placeholder);">Online: ${sector.online_players}/${totalPlayers}</span>
                 <span style="position: absolute; left: 170px; top: 54px; font-size: 13px; color: var(--color-text-placeholder);">Planeten: ${sector.planets_count}</span>
                 ${bottomRowHtml}
             </div>
@@ -482,12 +489,13 @@ function renderSectorList(sectors, type) {
         
         listContainer.appendChild(cardLink);
 
-        const columns = 4;
+        const isMobilePortrait = window.innerWidth <= 800 && window.innerHeight > window.innerWidth;
+        const columns = isMobilePortrait ? 2 : 4;
         const cardWidth = 270;
         const cardHeight = 90;
         const gapX = 25; 
         const gapY = 20; 
-        const startX = 40; 
+        const startX = isMobilePortrait ? 42 : 40; 
         const startY = 80 + 20; 
 
         const col = index % columns;

dev/lobby-frontend/src/scenes/lobby-scene.js

@@ -7,10 +7,10 @@ import { LOGIN_COLORS } from "./login-scene";
 export function buildLobbyBase(lobbyPixiContainer, sheet) {
     const sectorBrowserBg = new NineSliceSprite({
         texture: sheet.textures['SPR_SciFiMenus_Frame_Box_Large_11_Background'],
-        leftWidth: 500,
+        leftWidth: 100,
-        topHeight: 250,
+        topHeight: 100,
-        rightWidth: 500,
+        rightWidth: 100,
-        bottomHeight: 250
+        bottomHeight: 100
     });
     sectorBrowserBg.width = 1240,
     sectorBrowserBg.height = 650;
@@ -27,6 +27,9 @@ export function buildLobbyBase(lobbyPixiContainer, sheet) {
     lobbyPixiContainer.addChild(scrollMask);
     sectorPixiContainer.mask = scrollMask;
 
+    lobbyPixiContainer.bgSprite = sectorBrowserBg;
+    lobbyPixiContainer.scrollMask = scrollMask;
+
     return sectorPixiContainer;
 }
 

dev/lobby-frontend/style.css

@@ -94,3 +94,10 @@
         font-size: 10px; /* Schrift minimal verkleinern */
     }
 }
+
+@media (max-width: 800px)and (orientation: portrait) {
+    #sector-list-container {
+        grid-template-columns: repeat(2, 270px) !important;
+        justify-content: center !important;
+    }
+}