Sektor-Browser

2026-06-04 22:56:30 +02:00
parent 4a4bccccc1
commit f543405964
17 changed files with 985 additions and 192 deletions
@@ -0,0 +1,62 @@
+import pool from '../db.js';
+
+/**
+ * Liefert alle Sektoren für das Frontend.
+ * Unterteilt in "Meine Sektoren" (wo der User schon spielt)
+ * und "Alle Sektoren" (die generell verfügbar sind)
+ */
+export const getSectorsList = async(req, res) => {
+    const accountId = req.user.accountId;
+    const client = await pool.connect();
+
+    try {
+        // "Meine Sektoren" abfragen
+        const mySectorsResult = await client.query(`
+            SELECT
+                s.id, s.name, s.status, s.speed_fleet, s.speed_economy,
+                las.local_username,
+                las.created_at as joined_at,
+                las.updated_at as last_played
+            FROM sectors s
+            JOIN lobby_accounts_sectors las ON s.id = las.sector_id
+            WHERE las.lobby_account_id = $1
+            ORDER BY las.updated_at DESC
+        `, [accountId]);
+
+        // "Neue Sektoren"
+        const newSectorsResult = await client.query(`
+            SELECT
+                id, name, status, speed_fleet, speed_economy
+            FROM sectors
+            WHERE status != 'offline'
+            AND id NOT IN (
+                SELECT sector_id
+                FROM lobby_accounts_sectors
+                WHERE lobby_account_id = $1
+            )
+            ORDER BY created_at ASC
+        `, [accountId]);
+
+            // Daten platzhalter
+            const mapSectorData = (sector) => ({
+                ...sector,
+                online_players: Math.floor(Math.random() * 150) + 10,
+                planets_count: 1337
+            });
+
+
+        return res.status(200).json({
+            success: true,
+            mySectors: mySectorsResult.rows.map(mapSectorData),
+            newSectors: newSectorsResult.rows.map(mapSectorData)
+        });
+
+    } catch (error) {
+        console.error('[SectorController] Fehler beim Abrufen der Sektoren:', error);
+        return res.status(500).json({
+            error: 'ERR_INTERNAL_SERVER'
+        });
+    } finally {
+        client.release();
+    }
+};
@@ -0,0 +1,30 @@
+import jwt from 'jsonwebtoken';
+
+/**
+ * Middleware zum Schützen privater API-Routen.
+ * Prüft, ob ein gültiges Access_Token im Aithorization-Headder mitgesendet wurde.
+ */
+export const requireAuth = (req, res, next) => {
+    // Der Standard für Tokens ist der Header: "Authorization: Bearer <token>"
+    const authHeader = req.headers.authorization;
+
+    if (!authHeader || !authHeader.startsWith('Bearer ')) {
+        return res.status(401).json({
+            error: 'ERR_UNAUTHORIZED_NO_TOKEN'
+        });
+    }
+
+    const token = authHeader.split(' ')[1];
+
+    try {
+        const decoded = jwt.verify(token, process.env.JWT_ACCESS_SECRET);
+
+        req.user = decoded;
+
+        next();
+    } catch (error) {
+        return res.status(401).json({
+            error: 'ERR_UNAUTHORIZED_INVALID_TOKEN'
+        });
+    }
+};
@@ -0,0 +1,9 @@
+import express from 'express';
+import * as sectorController from '../controllers/sector.controller.js';
+import { requireAuth } from '../middlewares/auth.middleware.js';
+
+const router = express.Router();
+
+router.get('/list', requireAuth, sectorController.getSectorsList);
+
+export default router;
@@ -7,40 +7,72 @@ import pool from '../db.js';

 const createTablesQuery = `

+-- ------------------------------------------------------------------------------
+-- DROP TABLES
+-- WICHTIG: Die Reihenfolge beim Löschen ist entscheidend!
+-- Tabellen mit Fremdschlüsseln (Foreign Keys) müssen zuerst gelöscht werden.
+-- ------------------------------------------------------------------------------
 DROP TABLE IF EXISTS refresh_tokens;
 DROP TABLE IF EXISTS auth_otps;
-DROP TABLE IF EXISTS lobby_accounts;
+DROP TABLE IF EXISTS lobby_accounts_sectors; -- Zuerst die Brückentabelle löschen
+DROP TABLE IF EXISTS sectors;                -- Dann die Sektoren-Tabelle
+DROP TABLE IF EXISTS lobby_accounts;         -- Zuletzt die Haupt-Nutzer-Tabelle

 -- ------------------------------------------------------------------------------
 -- TABLE: lobby_accounts
-- Base user data for the entire Void-Genesis universe.
+-- Basis-Nutzerdaten für das gesamte Void-Genesis Universum.
 -- ------------------------------------------------------------------------------
 CREATE TABLE IF NOT EXISTS lobby_accounts (
    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
    username VARCHAR(50) UNIQUE NOT NULL,
    email VARCHAR(255) UNIQUE NOT NULL,
    password_hash VARCHAR(255) NOT NULL,
-    
-    -- Status flags and balances (English naming)
    is_email_verified BOOLEAN DEFAULT false,
    res_premium INT DEFAULT 0,
    is_admin BOOLEAN DEFAULT false,
-    
-    -- Timestamps for record keeping
    created_at TIMESTAMPTZ DEFAULT NOW(),
    updated_at TIMESTAMPTZ DEFAULT NOW()
 );

+-- ------------------------------------------------------------------------------
+-- TABLE: sectors
+-- Beinhaltet die globalen Metadaten zu allen verfügbaren Spiel-Sektoren.
+-- Hier definieren wir, welche Server existieren und welche Eigenschaften sie haben.
+-- ------------------------------------------------------------------------------
+CREATE TABLE IF NOT EXISTS sectors (
+    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
+    name VARCHAR(50) UNIQUE NOT NULL,
+    status VARCHAR(20) DEFAULT 'offline',
+    speed_fleet INT DEFAULT 1,
+    speed_economy INT DEFAULT 1,
+    created_at TIMESTAMPTZ DEFAULT NOW(),
+    updated_at TIMESTAMPTZ DEFAULT NOW()
+);
+
+-- ------------------------------------------------------------------------------
+-- TABLE: lobby_accounts_sectors (Brückentabelle)
+-- Verknüpft einen Lobby-Account mit einem Sektor.
+-- Existiert hier ein Eintrag, bedeutet das: Der Nutzer hat in diesem Sektor einen Spielstand.
+-- ------------------------------------------------------------------------------
+CREATE TABLE IF NOT EXISTS lobby_accounts_sectors (
+    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
+    lobby_account_id UUID REFERENCES lobby_accounts(id) ON DELETE CASCADE,
+    sector_id UUID REFERENCES sectors(id) ON DELETE CASCADE,
+    local_username VARCHAR(50) UNIQUE NOT NULL,
+    res_premium INT DEFAULT 0,
+    created_at TIMESTAMPTZ DEFAULT NOW(),
+    updated_at TIMESTAMPTZ DEFAULT NOW(),
+    UNIQUE(lobby_account_id, sector_id)
+);
+
 -- ------------------------------------------------------------------------------
 -- TABLE: auth_otps
-- Stores temporary 6-digit codes for registration or password resets.
+-- Speichert temporäre 6-stellige Codes für Registrierung oder Passwort-Reset.
 -- ------------------------------------------------------------------------------
 CREATE TABLE IF NOT EXISTS auth_otps (
    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
    account_id UUID REFERENCES lobby_accounts(id) ON DELETE CASCADE,
    otp_code VARCHAR(6) NOT NULL,
-    
-    -- Defines the purpose of the OTP (e.g., 'register', 'password_reset')
    type VARCHAR(20) NOT NULL,
    expires_at TIMESTAMPTZ NOT NULL,
    created_at TIMESTAMPTZ DEFAULT NOW()
@@ -48,7 +80,7 @@ CREATE TABLE IF NOT EXISTS auth_otps (

 -- ------------------------------------------------------------------------------
 -- TABLE: refresh_tokens
-- Stores long-lived tokens for the "Keep me logged in" and single-session feature.
+-- Speichert langlebige Tokens für die "Angemeldet bleiben"-Funktion.
 -- ------------------------------------------------------------------------------
 CREATE TABLE IF NOT EXISTS refresh_tokens (
    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
@@ -60,8 +92,8 @@ CREATE TABLE IF NOT EXISTS refresh_tokens (

 -- ------------------------------------------------------------------------------
 -- TRIGGER: Auto-update 'updated_at' timestamp
+-- Diese Funktion setzt das 'updated_at' Feld bei jeder Änderung auf die aktuelle Zeit.
 -- ------------------------------------------------------------------------------
-- This function sets the 'updated_at' field to the current time whenever a row is modified.
 CREATE OR REPLACE FUNCTION update_modified_column()
 RETURNS TRIGGER AS $$
 BEGIN
@@ -70,15 +102,32 @@ BEGIN
 END;
 $$ language 'plpgsql';

-- We only create the trigger if it doesn't exist to avoid errors on multiple runs.
+-- Wir wenden den Trigger nur an, wenn er noch nicht existiert.
 DO $$ 
 BEGIN
+  -- Trigger für lobby_accounts
  IF NOT EXISTS (SELECT 1 FROM pg_trigger WHERE tgname = 'update_lobby_accounts_modtime') THEN
    CREATE TRIGGER update_lobby_accounts_modtime
        BEFORE UPDATE ON lobby_accounts
        FOR EACH ROW
        EXECUTE FUNCTION update_modified_column();
  END IF;
+  
+  -- Trigger für sectors
+  IF NOT EXISTS (SELECT 1 FROM pg_trigger WHERE tgname = 'update_sectors_modtime') THEN
+    CREATE TRIGGER update_sectors_modtime
+        BEFORE UPDATE ON sectors
+        FOR EACH ROW
+        EXECUTE FUNCTION update_modified_column();
+  END IF;
+
+  -- Trigger für lobby_accounts_sectors (WICHTIG für unsere "Zuletzt gespielt" Funktion)
+  IF NOT EXISTS (SELECT 1 FROM pg_trigger WHERE tgname = 'update_lobby_accounts_sectors_modtime') THEN
+    CREATE TRIGGER update_lobby_accounts_sectors_modtime
+        BEFORE UPDATE ON lobby_accounts_sectors
+        FOR EACH ROW
+        EXECUTE FUNCTION update_modified_column();
+  END IF;
 END $$;
 `;

@@ -95,6 +144,32 @@ async function initDatabase() {
        // Wir senden den kompletten SQL-String an die Datenbank
        await client.query(createTablesQuery);
        console.log('✅ Tabellen wurden erfolgreich erstellt (oder existierten bereits).');
+        
+const sectorCheck = await client.query('SELECT count(*) FROM sectors');
+        if (parseInt(sectorCheck.rows[0].count) === 0) {
+            console.log('🌱 Füge 24 Test-Sektoren ein...');
+            
+            const greekAlphabet = [
+                'Alpha', 'Beta', 'Gamma', 'Delta', 'Epsilon', 'Zeta', 
+                'Eta', 'Theta', 'Iota', 'Kappa', 'Lambda', 'Mu', 
+                'Nu', 'Xi', 'Omicron', 'Pi', 'Rho', 'Sigma', 
+                'Tau', 'Upsilon', 'Phi', 'Chi', 'Psi', 'Omega'
+            ];
+
+            // Wir generieren für jeden Namen ein dynamisches INSERT
+            const insertPromises = greekAlphabet.map((name, index) => {
+                // Wir variieren die Geschwindigkeiten leicht für optische Vielfalt
+                const speed = (index % 4) + 1; 
+                return client.query(`
+                    INSERT INTO sectors (name, status, speed_fleet, speed_economy) 
+                    VALUES ($1, 'online', $2, $2)
+                `, [name, speed]);
+            });
+
+            await Promise.all(insertPromises);
+            console.log('✅ 24 Test-Sektoren erfolgreich eingefügt.');
+        }
+        
    } catch (error) {
        console.error('❌ Fehler beim Erstellen der Tabellen:', error);
    } finally {
@@ -7,6 +7,7 @@ import cors from 'cors';
 import pool from './db.js';

 import authRoutes from './routes/auth.routes.js';
+import sectorRoutes from './routes/sector.routes.js';

 const app = express();
 const PORT = process.env.PORT || 3000;
@@ -16,6 +17,7 @@ app.use(cors());
 app.use(express.json());

 app.use('/api/auth', authRoutes);
+app.use('/api/sectors', sectorRoutes);

 // Unsere bestehende Health-Route
 app.get('/api/health', (req, res) => {
@@ -342,7 +342,7 @@ export const refreshAccessToken = async (refreshToken) => {
                id: account.id,
                username: account.username,
                email: account.email,
-                res_premium: res_premium
+                res_premium: account.res_premium
            }
        };
    } catch (error) {
@@ -9,16 +9,14 @@
 <body>

  <div id="game-wrapper">
-    
    <div id="pixi-container"></div>
-
    <div id="ui-layer">
-        
      <form id="register-form" autocomplete="off">
        
        <div id="tab-container">
          <button type="button" class="tab-btn active" id="tab-login" data-i18n="tab_login">Login</button>
-          <button type="button" class="tab-btn" id="tab-register" data-i18n="tab_register">Registrieren</button>        </div>
+          <button type="button" class="tab-btn" id="tab-register" data-i18n="tab_register">Registrieren</button>
+        </div>

        <p id="otp-instruction" data-i18n="txt_otp_instruction">
          Bitte gib den 6-stelligen Code aus deiner E-Mail ein.
@@ -62,13 +60,21 @@
      </form>
    </div>

+    <div id="sector-browser-layer" style="display: none;">
+      
+      <div id="sector-tab-container">
+        <button type="button" class="tab-btn active" id="tab-my-sectors">Meine Sektoren</button>
+        <button type="button" class="tab-btn" id="tab-new-sectors">Neue Sektoren</button>
+      </div>
+
+      <div id="sector-list-container"></div>
+
+    </div>
+
    <div id="lobby-ui">
      <div id="top-bar">
-          
        <div class="top-bar-left"></div>
-
        <div class="top-bar-right">
-            
          <div class="custom-dropdown" id="user-dropdown" style="display: none;">
            <div class="dropdown-toggle" id="user-toggle">
              <span id="lobby-username">Commander</span>
@@ -93,7 +99,6 @@
              <li class="dropdown-item logout-item" id="btn-logout">Logout</li>
            </ul>
          </div>
-
          <div class="custom-dropdown" id="lang-dropdown">
            <div class="dropdown-toggle" id="lang-toggle">
              <span class="flag-icon" id="current-flag">🇩🇪</span> 
@@ -109,10 +114,10 @@
              </li>
            </ul>
          </div>
+        </div>
+      </div>
+    </div>

-          </div>
-        </div>
-      </div>
    <footer id="game-footer">
      <div class="footer-left">v 0.0.3.0-dev</div>
      <div class="footer-center">&copy; 2026 Void-Genesis</div>
@@ -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,6 +1088,247 @@ 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;
+            });
+        });
    }
    
    /**
@@ -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();
 }
@@ -611,3 +611,149 @@ body, html {
    }
 }

+/* Haupt-Container für die Sektor-Auswahl */
+#sector-browser-layer {
+    position: absolute;
+    width: 1240px;  /* Breit genug für 4 Karten nebeneinander */
+    height: 650px;
+    left: 50%;
+    top: 50%;
+    /* Der Scale wird jetzt dynamisch von JS gesteuert! */
+    transform: translate(-50%, -50%); 
+    pointer-events: auto; 
+}
+
+/* Positionierung der Sektor-Tabs */
+#sector-tab-container {
+    position: absolute;
+    top: 20px;
+    width: 100%;
+    height: 40px;
+    
+    /* Flexbox übernimmt das automatische Zentrieren */
+    display: flex;
+    justify-content: center;
+    gap: 20px; 
+}
+
+/* Wir überschreiben die festen Koordinaten vom Login-Screen */
+#sector-tab-container .tab-btn {
+    position: relative; 
+    left: 0 !important;
+    top: 0 !important;
+}
+
+#tab-my-sectors { left: 45px; }
+#tab-new-sectors { left: 235px; }
+
+/* Grid-Bereich für die Sektor-Karten (Scrollbar bei Überlauf) */
+#sector-list-container {
+    position: absolute;
+    top: 80px;
+    width: 100%;
+    height: 540px;
+    overflow-y: auto;
+    overflow-x: hidden; /* NEU: Verhindert horizontales Scrollen strikt */
+    
+    /* KORREKTUR: Von 45px auf 40px reduziert, damit wir bei exakt 1235px landen */
+    padding: 20px 40px; 
+    box-sizing: border-box;
+    
+    display: grid;
+    grid-template-columns: repeat(4, 270px); 
+    gap: 20px 25px; 
+    justify-content: flex-start;
+}
+
+/* Styling der einzelnen Sektor-Karte als vollwertiger Link */
+.sector-card-link {
+    display: block;
+    width: 270px;
+    height: 90px;
+    text-decoration: none;
+    color: var(--color-text-main);
+    position: relative;
+    cursor: pointer;
+    box-sizing: border-box;
+}
+
+/* Flex-Layout für den Inhalt der Karte */
+.sector-card-content {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    padding: 15px 25px;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+}
+
+/* Zeile 1: Name, Lupe und Status */
+.sector-row-top {
+    display: flex;
+    align-items: center;
+    gap: 15px;
+    font-size: 18px;
+    font-weight: bold;
+    letter-spacing: 1px;
+}
+
+/* Das Unicode-Lupen-Symbol mit speziellem Hover-Effekt */
+.sector-details-icon {
+    font-size: 14px;
+    color: var(--color-text-inactive);
+    transition: transform 0.2s ease, color 0.2s ease;
+}
+
+/* Bei Hover rotiert und leuchtet die Lupe leicht auf */
+.sector-card-link:hover .sector-details-icon {
+    color: var(--color-cyan-bright);
+    transform: scale(1.2) rotate(10deg);
+}
+
+/* Status-Anzeige (Online / Wartung) */
+.sector-status {
+    margin-left: auto; /* Schiebt den Status ganz nach rechts */
+    font-size: 14px;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+}
+.status-online {
+    color: var(--color-green-bright);
+    text-shadow: 0 0 8px rgba(0, 255, 0, 0.6);
+}
+.status-maintenance {
+    color: var(--color-error);
+    text-shadow: 0 0 8px rgba(255, 68, 68, 0.6);
+}
+
+/* Zeile 2: Spieleranzahl & Planetenanzahl */
+.sector-row-mid {
+    display: flex;
+    gap: 30px;
+    font-size: 13px;
+    color: var(--color-text-placeholder);
+    margin-top: 5px;
+}
+
+/* Zeile 3: Lokaler Username (falls vorhanden) */
+.sector-row-bottom {
+    font-size: 12px;
+    color: var(--color-cyan-bright);
+    margin-top: 4px;
+    font-style: italic;
+}
+
+/* Custom Scrollbar für die Sektor-Liste im Sci-Fi Look */
+#sector-list-container::-webkit-scrollbar {
+    width: 6px;
+    height: 6px; /* NEU: Falls je wieder ein x-Scrollbar auftaucht, ist er wenigstens nur 6px hoch */
+}
+#sector-list-container::-webkit-scrollbar-track {
+    background: rgba(11, 25, 44, 0.3);
+}
+#sector-list-container::-webkit-scrollbar-thumb {
+    background: var(--color-cyan-dark);
+    border-radius: 3px;
+}