chore: restrukturierung der microservices in dev/lobby und dev/sector-dev (monorepo)

2026-06-08 22:08:44 +02:00
parent 87f4d935c4
commit c1eb570b43
90 changed files with 10481 additions and 2 deletions
@@ -0,0 +1,104 @@
+@import url('./src/css/variables.css');
+@import url('./src/css/layout.css');
+@import url('./src/css/auth.css');
+@import url('./src/css/lobby.css');
+@import url('./src/css/onboarding.css');
+
+@media (max-width: 600px) {
+    /* --- 1. Login/Registrierungs-Formular skalieren --- */
+    #register-form {
+        transform: translate(-50%, -50%) scale(0.7);
+    }
+
+    /* --- 2. Top-Bar in der Lobby optimieren --- */
+    #top-bar {
+        padding: 0 10px; 
+    }
+    
+    .top-bar-left .lobby-logo {
+        font-size: 16px; 
+    }
+
+    #user-info {
+        gap: 10px; 
+    }
+
+    #lobby-username {
+        font-size: 14px;
+        max-width: 80px;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
+    #btn-logout {
+        padding: 5px 10px;
+        font-size: 12px;
+    }
+
+    /* --- 3. Footer aufräumen --- */
+    #game-footer {
+        flex-direction: column;
+        height: auto;
+        padding: 10px 0;
+        gap: 8px;
+        background: rgba(0, 0, 0, 0.7); 
+    }
+
+    .footer-left, .footer-center, .footer-right {
+        text-align: center;
+        width: 100%;
+    }
+
+    #discord-link {
+        left: 125px;
+        top: 520px;
+    }
+}
+
+@media (max-height: 1050px) and (min-width: 601px) {
+    #register-form {
+        /* Wir schieben das HTML-Formular aus der exakten Mitte um 80px nach unten. 
+           So hat das Logo (das in PixiJS darüber liegt) genug Luft zum Atmen. */
+        top: calc(50% + 80px);
+    } 
+}
+
+@media (max-height: 500px) {
+    /* --- Formular noch kleiner machen, damit es vertikal passt --- */
+    #register-form {
+        /* scale(0.5) macht das Formular klein genug für Handys im Querformat */
+        transform: translate(-50%, -50%) scale(0.4);
+        top: 50%;
+    }
+
+    /* --- Discord-Button wie im normalen Handy-Modus nach unten klappen --- */
+    #discord-link {
+        left: -420px;
+        top: 350px;
+    }
+
+    /* --- Footer extrem flach machen --- */
+    /* Im Querformat haben wir in der Breite Platz, aber in der Höhe nicht. 
+       Daher ordnen wir den Text wieder als Reihe (row) an. */
+    #game-footer {
+        flex-direction: row;
+        height: 30px;
+        padding: 0 20px;
+        background: rgba(0, 0, 0, 0.7);
+    }
+
+    .footer-left, .footer-center, .footer-right {
+        text-align: center;
+        width: 33%;
+        font-size: 10px; /* Schrift minimal verkleinern */
+    }
+}
+
+@media (max-width: 800px) and (orientation: portrait) {
+    #sector-list-container {
+        /* Erzwingt 2 Spalten auf dem Handy */
+        grid-template-columns: repeat(2, 270px) !important;
+        justify-content: center !important;
+    }
+}