Sektor-Browser

2026-06-04 22:56:30 +02:00
parent 4a4bccccc1
commit f543405964
17 changed files with 985 additions and 192 deletions
@@ -1,9 +1,33 @@
 {
  "frames": {
-    "SPR_SciFiMenus_Frame_Box_Large_02": {
+    "SPR_SciFiMenus_Frame_Box_Large_11": {
      "frame": {
        "x": 2,
        "y": 2,
+        "w": 998,
+        "h": 494
+      },
+      "rotated": false,
+      "trimmed": true,
+      "spriteSourceSize": {
+        "x": 13,
+        "y": 11,
+        "w": 998,
+        "h": 494
+      },
+      "sourceSize": {
+        "w": 1024,
+        "h": 512
+      },
+      "pivot": {
+        "x": 0.5,
+        "y": 0.5
+      }
+    },
+    "SPR_SciFiMenus_Frame_Box_Large_02": {
+      "frame": {
+        "x": 1004,
+        "y": 2,
        "w": 997,
        "h": 984
      },
@@ -26,8 +50,8 @@
    },
    "SPR_SciFiMenus_Frame_Box_Large_12": {
      "frame": {
-        "x": 1003,
-        "y": 2,
+        "x": 2,
+        "y": 500,
        "w": 984,
        "h": 481
      },
@@ -48,9 +72,33 @@
        "y": 0.5
      }
    },
+    "SPR_SciFiMenus_Frame_Box_Large_11_Background": {
+      "frame": {
+        "x": 2,
+        "y": 985,
+        "w": 919,
+        "h": 427
+      },
+      "rotated": false,
+      "trimmed": true,
+      "spriteSourceSize": {
+        "x": 52,
+        "y": 34,
+        "w": 919,
+        "h": 427
+      },
+      "sourceSize": {
+        "w": 1024,
+        "h": 512
+      },
+      "pivot": {
+        "x": 0.5,
+        "y": 0.5
+      }
+    },
    "SPR_SciFiMenus_Frame_Box_Large_12_Background": {
      "frame": {
-        "x": 1991,
+        "x": 2005,
        "y": 2,
        "w": 898,
        "h": 393
@@ -74,7 +122,7 @@
    },
    "SPR_SciFiMenus_Ring_Medium_13": {
      "frame": {
-        "x": 2893,
+        "x": 2907,
        "y": 2,
        "w": 826,
        "h": 853
@@ -98,7 +146,7 @@
    },
    "SPR_SciFiMenus_Frame_Box_Large_02_Background": {
      "frame": {
-        "x": 1991,
+        "x": 2005,
        "y": 399,
        "w": 825,
        "h": 895
@@ -122,7 +170,7 @@
    },
    "SPR_SciFiMenus_Background_01": {
      "frame": {
-        "x": 3723,
+        "x": 3737,
        "y": 2,
        "w": 256,
        "h": 256
@@ -146,7 +194,7 @@
    },
    "SPR_SciFiMenus_Menu_Item_Selected_20": {
      "frame": {
-        "x": 3723,
+        "x": 3737,
        "y": 262,
        "w": 256,
        "h": 256
@@ -170,7 +218,7 @@
    },
    "SPR_SciFiMenus_Menu_Item_Selected_10": {
      "frame": {
-        "x": 3723,
+        "x": 3737,
        "y": 522,
        "w": 228,
        "h": 234
@@ -192,82 +240,10 @@
        "y": 0.5
      }
    },
-    "ICON_SciFiMenus_Menu_Lock_Closed_01_Clean": {
-      "frame": {
-        "x": 3955,
-        "y": 522,
-        "w": 132,
-        "h": 164
-      },
-      "rotated": false,
-      "trimmed": true,
-      "spriteSourceSize": {
-        "x": 62,
-        "y": 45,
-        "w": 132,
-        "h": 164
-      },
-      "sourceSize": {
-        "w": 256,
-        "h": 256
-      },
-      "pivot": {
-        "x": 0.5,
-        "y": 0.5
-      }
-    },
-    "ICON_SciFi_Map_Message": {
-      "frame": {
-        "x": 3955,
-        "y": 690,
-        "w": 130,
-        "h": 88
-      },
-      "rotated": false,
-      "trimmed": true,
-      "spriteSourceSize": {
-        "x": 64,
-        "y": 84,
-        "w": 130,
-        "h": 88
-      },
-      "sourceSize": {
-        "w": 256,
-        "h": 256
-      },
-      "pivot": {
-        "x": 0.5,
-        "y": 0.5
-      }
-    },
-    "SPR_SciFiMenus_Menu_Item_Selected_19": {
-      "frame": {
-        "x": 3723,
-        "y": 760,
-        "w": 228,
-        "h": 234
-      },
-      "rotated": false,
-      "trimmed": true,
-      "spriteSourceSize": {
-        "x": 14,
-        "y": 10,
-        "w": 228,
-        "h": 234
-      },
-      "sourceSize": {
-        "w": 256,
-        "h": 256
-      },
-      "pivot": {
-        "x": 0.5,
-        "y": 0.5
-      }
-    },
    "ICON_SciFiMenus_Menu_Solo_01_Clean": {
      "frame": {
-        "x": 3955,
-        "y": 782,
+        "x": 3969,
+        "y": 522,
        "w": 125,
        "h": 194
      },
@@ -288,9 +264,33 @@
        "y": 0.5
      }
    },
+    "SPR_SciFiMenus_Menu_Item_Selected_19": {
+      "frame": {
+        "x": 3737,
+        "y": 760,
+        "w": 228,
+        "h": 234
+      },
+      "rotated": false,
+      "trimmed": true,
+      "spriteSourceSize": {
+        "x": 14,
+        "y": 10,
+        "w": 228,
+        "h": 234
+      },
+      "sourceSize": {
+        "w": 256,
+        "h": 256
+      },
+      "pivot": {
+        "x": 0.5,
+        "y": 0.5
+      }
+    },
    "SPR_SciFiMenus_Background_Hexagons_01": {
      "frame": {
-        "x": 2820,
+        "x": 2834,
        "y": 859,
        "w": 512,
        "h": 512
@@ -314,7 +314,7 @@
    },
    "ICON_Social_Discord": {
      "frame": {
-        "x": 3336,
+        "x": 3350,
        "y": 859,
        "w": 226,
        "h": 175
@@ -336,9 +336,33 @@
        "y": 0.5
      }
    },
+    "ICON_SciFiMenus_Menu_Lock_Closed_01_Clean": {
+      "frame": {
+        "x": 3580,
+        "y": 859,
+        "w": 132,
+        "h": 164
+      },
+      "rotated": false,
+      "trimmed": true,
+      "spriteSourceSize": {
+        "x": 62,
+        "y": 45,
+        "w": 132,
+        "h": 164
+      },
+      "sourceSize": {
+        "w": 256,
+        "h": 256
+      },
+      "pivot": {
+        "x": 0.5,
+        "y": 0.5
+      }
+    },
    "SPR_SciFiMenus_Menu_Item_Background_07": {
      "frame": {
-        "x": 3566,
+        "x": 3716,
        "y": 998,
        "w": 224,
        "h": 230
@@ -360,9 +384,33 @@
        "y": 0.5
      }
    },
+    "ICON_SciFi_Map_Message": {
+      "frame": {
+        "x": 3580,
+        "y": 1027,
+        "w": 130,
+        "h": 88
+      },
+      "rotated": false,
+      "trimmed": true,
+      "spriteSourceSize": {
+        "x": 64,
+        "y": 84,
+        "w": 130,
+        "h": 88
+      },
+      "sourceSize": {
+        "w": 256,
+        "h": 256
+      },
+      "pivot": {
+        "x": 0.5,
+        "y": 0.5
+      }
+    },
    "ICON_SciFiMenus_Menu_Warning_02_Clean": {
      "frame": {
-        "x": 3336,
+        "x": 3350,
        "y": 1038,
        "w": 222,
        "h": 193
@@ -384,10 +432,58 @@
        "y": 0.5
      }
    },
+    "ICON_SciFiMenus_Menu_Multiplayer_01_Clean": {
+      "frame": {
+        "x": 3576,
+        "y": 1232,
+        "w": 218,
+        "h": 141
+      },
+      "rotated": false,
+      "trimmed": true,
+      "spriteSourceSize": {
+        "x": 19,
+        "y": 57,
+        "w": 218,
+        "h": 141
+      },
+      "sourceSize": {
+        "w": 256,
+        "h": 256
+      },
+      "pivot": {
+        "x": 0.5,
+        "y": 0.5
+      }
+    },
+    "ICON_SciFiMenus_Menu_Planet_02_Clean": {
+      "frame": {
+        "x": 3350,
+        "y": 1235,
+        "w": 216,
+        "h": 149
+      },
+      "rotated": false,
+      "trimmed": true,
+      "spriteSourceSize": {
+        "x": 20,
+        "y": 54,
+        "w": 216,
+        "h": 149
+      },
+      "sourceSize": {
+        "w": 256,
+        "h": 256
+      },
+      "pivot": {
+        "x": 0.5,
+        "y": 0.5
+      }
+    },
    "ICON_SciFiMenus_Menu_Tick_01_Clean": {
      "frame": {
-        "x": 3794,
-        "y": 998,
+        "x": 3798,
+        "y": 1232,
        "w": 191,
        "h": 144
      },
@@ -407,6 +503,54 @@
        "x": 0.5,
        "y": 0.5
      }
+    },
+    "ICON_SciFiMenus_Menu_Settings_01_Clean": {
+      "frame": {
+        "x": 3570,
+        "y": 1377,
+        "w": 182,
+        "h": 199
+      },
+      "rotated": false,
+      "trimmed": true,
+      "spriteSourceSize": {
+        "x": 37,
+        "y": 28,
+        "w": 182,
+        "h": 199
+      },
+      "sourceSize": {
+        "w": 256,
+        "h": 256
+      },
+      "pivot": {
+        "x": 0.5,
+        "y": 0.5
+      }
+    },
+    "ICON_SciFiMenus_Menu_Message_01_Clean": {
+      "frame": {
+        "x": 3570,
+        "y": 1580,
+        "w": 177,
+        "h": 218
+      },
+      "rotated": false,
+      "trimmed": true,
+      "spriteSourceSize": {
+        "x": 39,
+        "y": 17,
+        "w": 177,
+        "h": 218
+      },
+      "sourceSize": {
+        "w": 256,
+        "h": 256
+      },
+      "pivot": {
+        "x": 0.5,
+        "y": 0.5
+      }
    }
  },
  "meta": {
@@ -415,8 +559,8 @@
    "image": "ui-atlas.png",
    "format": "RGBA8888",
    "size": {
-      "w": 4089,
-      "h": 1373
+      "w": 4096,
+      "h": 1800
    },
    "scale": 1
  }
@@ -1,5 +1,8 @@
 import { t, setLanguage, currentLang } from './i18n.js';
-import { Application, Assets, Sprite, NineSliceSprite, Container, TilingSprite, Text, wordWrap, fragmentGPUTemplate } from 'pixi.js';
+import { Application, Assets, Sprite, NineSliceSprite, Container, TilingSprite, Text, wordWrap, fragmentGPUTemplate, Graphics } from 'pixi.js';
+
+let globalSheet = null;
+let sectorTabsPixiContainer = null;

 async function initGame() {
    const app = new Application();
@@ -52,6 +55,8 @@ function updateTranslations() {
 }

 function buildScene(app, bgTexture, sheet) {
+    globalSheet = sheet;
+
    // --- Farb-Variablen (pixiJS) ---
    const COLOR_PANEL_BG = 0x0b192c;            // Dunkelblau für Panel & Inputs
    const COLOR_PATTERN = 0x00f0ff;             // Cyan für das Hexagon-Muster
@@ -93,6 +98,42 @@ function buildScene(app, bgTexture, sheet) {
    const uiContainer = new Container();
    app.stage.addChild(uiContainer);

+// --- Separater Container für die Lobby-Grafiken (Sektor-Browser) ---
+    const lobbyPixiContainer = new Container();
+    lobbyPixiContainer.visible = false;
+    app.stage.addChild(lobbyPixiContainer);
+
+    // 1. Der große Haupt-Hintergrund für den Sektor-Browser
+    const sectorBrowserBg = new NineSliceSprite({
+        texture: sheet.textures['SPR_SciFiMenus_Frame_Box_Large_11_Background'], // panelBgName ist SPR_SciFiMenus_Frame_Box_Large_02_Background
+        leftWidth: 500, topHeight: 250, rightWidth: 500, bottomHeight: 250
+    });
+    sectorBrowserBg.width = 1240;
+    sectorBrowserBg.height = 650;
+    sectorBrowserBg.alpha = 0.8;
+    sectorBrowserBg.tint = COLOR_PANEL_BG;
+    lobbyPixiContainer.addChild(sectorBrowserBg);
+
+    // 2. Container für die kleinen Sektor-Karten, der scrollen kann
+    let sectorPixiContainer = new Container();
+    lobbyPixiContainer.addChild(sectorPixiContainer);
+
+    // 3. Maske, damit die Karten beim Scrollen nicht über den Rahmen hinausschießen (PixiJS v8 Syntax)
+    const scrollMask = new Graphics();
+    scrollMask.rect(30, 80, 1180, 540); // Entspricht exakt der Position des HTML Scroll-Bereichs
+    scrollMask.fill(0xffffff);
+    lobbyPixiContainer.addChild(scrollMask);
+    sectorPixiContainer.mask = scrollMask;
+
+    // 4. HTML Scroll-Event an PixiJS Y-Koordinate binden!
+    const htmlSectorList = document.getElementById('sector-list-container');
+    if (htmlSectorList) {
+        htmlSectorList.addEventListener('scroll', (e) => {
+            // Wenn HTML nach unten scrollt, schieben wir den PixiJS-Container nach oben
+            sectorPixiContainer.y = -e.target.scrollTop;
+        });
+    }
+
    const panelBackground = new Sprite(sheet.textures[panelBgName]);
    panelBackground.tint = COLOR_PANEL_BG;
    panelBackground.width = 500;
@@ -594,6 +635,28 @@ function buildScene(app, bgTexture, sheet) {
        uiContainer.x = (screenWidth - (panelFrame.width * panelScale)) / 2;
        uiContainer.y = ((screenHeight - (panelFrame.height * panelScale)) / 2) + panelOffsetY;

+        let lobbyScale = 1.0;
+        // Wenn der Bildschirm schmaler als das Panel ist
+        if (screenWidth <= 1300) {
+            lobbyScale = screenWidth / 1300; 
+        }
+        // Wenn der Bildschirm in der Höhe zu klein ist (z.B. Laptops)
+        if (screenHeight <= 750) {
+            const hScale = screenHeight / 750;
+            if (hScale < lobbyScale) lobbyScale = hScale;
+        }
+
+        // Skaliert die PixiJS-Hintergründe
+        lobbyPixiContainer.scale.set(lobbyScale);
+        lobbyPixiContainer.x = (screenWidth - (1240 * lobbyScale)) / 2;
+        lobbyPixiContainer.y = (screenHeight - (650 * lobbyScale)) / 2;
+
+        // Skaliert die HTML-Texte ABSOLUT SYNCHRON dazu
+        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;

@@ -973,13 +1036,8 @@ function buildScene(app, bgTexture, sheet) {
            formElement.style.display = 'none';
        }

-        //const footerElement = document.getElementById('game-footer');
-        //if (footerElement) {
-        //    footerElement.style.display = 'none';
-        //}
-
        uiContainer.visible = false;
-        //footerBackgroundContainer.visible = false;
+        lobbyPixiContainer.visible = true;

        try {
            const lobbyBGPath = 'src/raw-assets/backgrounds/SPR_SciFiMenus_Example_Image_SpookyComputer_01.png';
@@ -998,7 +1056,7 @@ function buildScene(app, bgTexture, sheet) {
    /**
     * Blendet die Top-Bar ein, setzt den Spilernamen und aktiviert den Logout
     */
-    function buildLobbyUI() {
+    async function buildLobbyUI() {
        // User-Menü (das beim Login versteckt war) einblenden
        const userDropdown = document.getElementById('user-dropdown');
        if (userDropdown) {
@@ -1030,8 +1088,249 @@ function buildScene(app, bgTexture, sheet) {
                console.error("Fehler beim Auslesen der User-Daten:", e);
            }
        }
+
+        await loadAndRenderSectorBrowser();
    }

+    /**
+     * Läd die Sektordaten von der API und steuert die Tab-Sichtbarkeiten
+     */
+    async function loadAndRenderSectorBrowser() {
+        const token = sessionStorage.getItem('void_access_token') || localStorage.getItem('void_access_token');
+        if (!token) return;
+
+        try {
+            const response = await fetch('https://api-dev.void-genesis.de/api/sectors/list', {
+                method: 'GET',
+                headers: {
+                    'Authorization': `Bearer ${token}`,
+                    'Content-Type': 'application/json'
+                }
+            });
+
+            const data = await response.json();
+            if (!response.ok || !data.success) {
+                console.error("Fehler beim Laden der Sektoren:", data.error);
+                return;
+            }
+
+            const layer = document.getElementById('sector-browser-layer');
+            layer.style.display = 'block';
+
+            const tabMySectors = document.getElementById('tab-my-sectors');
+            const tabNewSectors = document.getElementById('tab-new-sectors');
+
+            if (sectorTabsPixiContainer) {
+                lobbyPixiContainer.removeChild(sectorTabsPixiContainer);
+                sectorTabsPixiContainer.destroy({ children: true });
+            }
+            sectorTabsPixiContainer = new Container();
+            lobbyPixiContainer.addChild(sectorTabsPixiContainer);
+
+            if (data.mySectors.length === 0) {
+                tabMySectors.style.display = 'none';
+                tabNewSectors.classList.add('active');
+                
+                // 1 HTML-Tab mittig. PixiJS-Rahmen passend zentrieren: (1240 - 180) / 2 = 530
+                const tabNewBg = createSectorTabPixi(530, 20, 0x00f0ff, 0.6); // Active Farbe
+                sectorTabsPixiContainer.addChild(tabNewBg);
+
+                renderSectorList(data.newSectors, 'new');
+            } else {
+                tabMySectors.style.display = 'inline-block';
+                tabNewSectors.style.display = 'inline-block';
+                tabMySectors.classList.add('active');
+                tabNewSectors.classList.remove('active');
+
+                // 2 HTML-Tabs mittig mit 20px Lücke. Gesamtbreite 380. Startpunkt: (1240 - 380) / 2 = 430
+                const tabMyBg = createSectorTabPixi(430, 20, 0x00f0ff, 0.6); // Active Farbe
+                const tabNewBg = createSectorTabPixi(630, 20, 0xaaaaaa, 0.4); // Inactive Farbe
+                sectorTabsPixiContainer.addChild(tabMyBg, tabNewBg);
+
+                renderSectorList(data.mySectors, 'my');
+            }
+
+            tabMySectors.onclick = () => {
+                tabMySectors.classList.add('active');
+                tabNewSectors.classList.remove('active');
+                renderSectorList(data.mySectors, 'my');
+            };
+
+            tabNewSectors.onclick = () => {
+                tabNewSectors.classList.add('active');
+                tabMySectors.classList.remove('active');
+                renderSectorList(data.newSectors, 'new');
+            };
+
+        } catch (error) {
+            console.error("Netfwerkfehler beim Sektor-Abruf:", error);
+        }
+    }
+
+    /**
+     * Rendert die HTML-Karte und die dazugehöhrigen PixiJS-Hintergrundboxen
+     */
+    function renderSectorList(sectors, type) {
+        const listContainer = document.getElementById('sector-list-container');
+        listContainer.innerHTML = '';
+
+        if (sectorPixiContainer) {
+            sectorPixiContainer.removeChildren();
+            // Scrollposition sicherheitshalber auf 0 zurücksetzen
+            sectorPixiContainer.y = 0; 
+        }
+
+        const htmlSectorList = document.getElementById('sector-list-container');
+        if (htmlSectorList) htmlSectorList.scrollTop = 0;
+        if (sectors.length === 0) {
+            listContainer.innerHTML = '<p style="text-align:center; color:var(--color-text-inactive);">Keine Sektoren in dieser Kategorie verfügbar.</p>';
+            return;
+        }
+
+        sectors.forEach((sector, index) => {
+            const cardLink = document.createElement('a');
+            cardLink.className = 'sector-card-link';
+            cardLink.href = `#`;
+
+            // --- 0. Temporäre Platzhalter für das neue UI (ersetzen wir später durch echte DB-Werte) ---
+            const ageDays = sector.age_days || Math.floor(Math.random() * 30) + 1; 
+            const totalPlayers = sector.total_players || Math.floor(Math.random() * 500) + 150;
+
+            // --- 1. HTML Layer mit absoluten Koordinaten ---
+            let bottomRowHtml = '';
+            if (type === 'my' && sector.local_username) {
+                bottomRowHtml = `<div style="position: absolute; left: 20px; bottom: 8px; font-size: 12px; color: var(--color-cyan-bright); font-style: italic;">Commander: ${sector.local_username}</div>`;
+            }
+
+            cardLink.innerHTML = `
+                <div class="sector-card-content" style="position: relative; width: 100%; height: 100%; padding: 0;">
+                    
+                    <span style="position: absolute; left: 10px; top: 15px; width: 25px; height: 27px; cursor: help;" title="Sektor-Details (Flotte: ${sector.speed_fleet}x, Öko: ${sector.speed_economy}x)"></span>
+
+                    <span style="position: absolute; left: 40px; top: 15px; width: 140px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 18px; font-weight: bold;" title="${sector.name}">
+                        ${sector.name}
+                    </span> 
+
+                    <span style="position: absolute; left: 150px; top: 18px; font-size: 12px; color: var(--color-text-placeholder);" title="Sektor-Alter in Tagen">${ageDays} Tage</span>
+                    
+                    <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: 170px; top: 54px; font-size: 13px; color: var(--color-text-placeholder);">Planeten: ${sector.planets_count}</span>
+                    
+                    ${bottomRowHtml}
+                </div>
+            `;
+
+            cardLink.onclick = (e) => {
+                e.preventDefault();
+                console.log(`Betrete Sektor: ${sector.name} (ID: ${sector.id})`);
+            };
+            
+            listContainer.appendChild(cardLink);
+
+            // --- 2. PixiJS-Hintergrund-Boxen synchron zum CSS-Grid rendern ---
+            const columns = 4;
+            const cardWidth = 270;
+            const cardHeight = 90;
+            const gapX = 25; 
+            const gapY = 20; 
+            const startX = 40; 
+            const startY = 80 + 20; 
+            
+            const col = index % columns;
+            const row = Math.floor(index / columns);
+
+            const posX = startX + col * (cardWidth + gapX);
+            const posY = startY + row * (cardHeight + gapY);
+
+            // Hintergrund (Deine Textur)
+            const bgSprite = new NineSliceSprite({
+                texture: globalSheet.textures['SPR_SciFiMenus_Frame_Box_Large_11_Background'],
+                leftWidth: 200, topHeight: 200, rightWidth: 200, bottomHeight: 200
+            });
+            bgSprite.width = cardWidth;
+            bgSprite.height = cardHeight;
+            bgSprite.position.set(posX, posY);
+            bgSprite.tint = 0x0b192c; 
+            bgSprite.alpha = 0.6;      
+            sectorPixiContainer.addChild(bgSprite);
+
+            // Rahmen (Deine Textur)
+            const frameSprite = new NineSliceSprite({
+                texture: globalSheet.textures['SPR_SciFiMenus_Frame_Box_Large_11'],
+                leftWidth: 200, topHeight: 200, rightWidth: 200, bottomHeight: 200
+            });
+            frameSprite.width = cardWidth;
+            frameSprite.height = cardHeight;
+            frameSprite.position.set(posX, posY);
+            frameSprite.alpha = 0.8;
+            sectorPixiContainer.addChild(frameSprite);
+
+            // --- 3. PixiJS Icons (Exakt auf das absolute HTML abgestimmt) ---
+
+            // Icon: Lupe/Details (Jetzt ganz links! Zentrum bei x:20 -> passend zum Tooltip left:10)
+            const iconDetails = new Sprite(globalSheet.textures['ICON_SciFiMenus_Menu_Message_01_Clean']);
+            iconDetails.anchor.set(0.5);
+            iconDetails.position.set(posX + 25, posY + 27); 
+            iconDetails.scale.set(0.08); 
+            iconDetails.tint = 0xaaaaaa;
+            sectorPixiContainer.addChild(iconDetails);
+
+            // NEU Icon: Uhr/Alter
+            const iconAge = new Sprite(globalSheet.textures['ICON_SciFiMenus_Menu_Settings_01_Clean']);
+            iconAge.anchor.set(0.5);
+            iconAge.position.set(posX + 130, posY + 26); 
+            iconAge.scale.set(0.08); // Exakt so klein wie die Lupe
+            iconAge.tint = 0xaaaaaa;
+            sectorPixiContainer.addChild(iconAge);
+
+            // Icon: Spieler (Zentrum bei x:20 -> passend zum Text left:35)
+            const iconPlayers = new Sprite(globalSheet.textures['ICON_SciFiMenus_Menu_Multiplayer_01_Clean']);
+            iconPlayers.anchor.set(0.5);
+            iconPlayers.position.set(posX + 25, posY + 62); 
+            iconPlayers.scale.set(0.08);
+            iconPlayers.tint = 0xaaaaaa;
+            sectorPixiContainer.addChild(iconPlayers);
+
+            // Icon: Planeten (Weiter nach rechts! Zentrum bei x:165 -> passend zum Text left:180)
+            const iconPlanets = new Sprite(globalSheet.textures['ICON_SciFiMenus_Menu_Planet_02_Clean']);
+            iconPlanets.anchor.set(0.5);
+            iconPlanets.position.set(posX + 155, posY + 62); 
+            iconPlanets.scale.set(0.08);
+            iconPlanets.tint = 0xaaaaaa;
+            sectorPixiContainer.addChild(iconPlanets);
+
+            // --- 4. Hover-Effekte ---
+            cardLink.addEventListener('mouseenter', () => {
+                frameSprite.alpha = 1.0;
+                bgSprite.alpha = 0.8;
+                
+                iconDetails.tint = 0x00f0ff; 
+                iconDetails.scale.set(0.09); 
+                iconDetails.rotation = 0.2; 
+                
+                iconPlayers.tint = 0xffffff;
+                iconPlanets.tint = 0xffffff;
+            });
+            
+            cardLink.addEventListener('mouseleave', () => {
+                frameSprite.alpha = 0.8;
+                bgSprite.alpha = 0.6;
+                
+                iconDetails.tint = 0xaaaaaa;
+                iconDetails.scale.set(0.08);
+                iconDetails.rotation = 0;
+                
+                iconPlayers.tint = 0xaaaaaa;
+                iconPlanets.tint = 0xaaaaaa;
+            });
+        });
+    }
+    
    /**
     * Prüft beim Start der Anwendung, ob der Nutzer bereits eingeloggt ist.
     * Nutz das Refresh-Token, um ein neues Access-Token anzufordern.
@@ -1163,6 +1462,27 @@ function buildScene(app, bgTexture, sheet) {
        }
    }

+    function createSectorTabPixi(x, y, tint, alpha) {
+        const itemContainer = new Container();
+        itemContainer.position.set(x, y);
+
+        const fill = new NineSliceSprite({
+            texture: globalSheet.textures['SPR_SciFiMenus_Menu_Item_Background_07'],
+            leftWidth: 120, topHeight: 120, rightWidth: 120, bottomHeight: 120
+        });
+        fill.width = 180; fill.height = 40; fill.tint = tint; fill.alpha = alpha;
+        itemContainer.addChild(fill);
+
+        const frame = new NineSliceSprite({
+            texture: globalSheet.textures['SPR_SciFiMenus_Menu_Item_Selected_10'],
+            leftWidth: 100, topHeight: 120, rightWidth: 140, bottomHeight: 120
+        });
+        frame.width = 180; frame.height = 40; frame.alpha = 0.8;
+        itemContainer.addChild(frame);
+
+        return itemContainer;
+    }
+
    checkAuthOnStartup();
    initDropdowns();
 }