diff --git a/dev/lobby-frontend/src/core/pixi-app.js b/dev/lobby-frontend/src/core/pixi-app.js
index bfae7bc..92a4e68 100644
--- a/dev/lobby-frontend/src/core/pixi-app.js
+++ b/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;
- 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();
}
-}
\ No newline at end of file
+}
+
+/**
+ * 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
+});
\ No newline at end of file
diff --git a/dev/lobby-frontend/src/css/layout.css b/dev/lobby-frontend/src/css/layout.css
index c67f0fb..6c37cc5 100644
--- a/dev/lobby-frontend/src/css/layout.css
+++ b/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;
diff --git a/dev/lobby-frontend/src/css/lobby.css b/dev/lobby-frontend/src/css/lobby.css
index 2352746..b350542 100644
--- a/dev/lobby-frontend/src/css/lobby.css
+++ b/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;
}
diff --git a/dev/lobby-frontend/src/main.js b/dev/lobby-frontend/src/main.js
index 23ec99e..8caa9b3 100644
--- a/dev/lobby-frontend/src/main.js
+++ b/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 tabNewBg = createSectorTabPixi(globalSheet, 630, 20, 0xaaaaaa, 0.4);
+ const leftTabX = centerPos - 190;
+ 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) {
${sector.status === 'online' ? 'online' : 'wartung'}
- Online: ${sector.online_players}/${totalPlayers}
+ Online: ${sector.online_players}/${totalPlayers}
Planeten: ${sector.planets_count}
${bottomRowHtml}
@@ -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;
diff --git a/dev/lobby-frontend/src/scenes/lobby-scene.js b/dev/lobby-frontend/src/scenes/lobby-scene.js
index 5c65ea4..e8b877a 100644
--- a/dev/lobby-frontend/src/scenes/lobby-scene.js
+++ b/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,
- topHeight: 250,
- rightWidth: 500,
- bottomHeight: 250
+ leftWidth: 100,
+ topHeight: 100,
+ rightWidth: 100,
+ 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;
}
diff --git a/dev/lobby-frontend/style.css b/dev/lobby-frontend/style.css
index da46ef2..30f1a49 100644
--- a/dev/lobby-frontend/style.css
+++ b/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;
+ }
+}
\ No newline at end of file