Novacell/void-genesis
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Sektor Browser mobile optimieung

Browse Source
This commit is contained in:
Novacell
2026-06-06 17:00:15 +02:00
parent 06f862c68a
commit 18f99e896c
6 changed files with 98 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dev/lobby-frontend/src/core/pixi-app.js
+63 -19
View File
@@ -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;
@@ -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
+2 -3
View File
@@ -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
+4 -1
View File
@@ -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
+14 -6
View File
@@ -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) {
<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 -4
View File
@@ -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;
}
dev/lobby-frontend/style.css
+7
View File
@@ -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;
}
}