Next

.gitignore

@@ -49,6 +49,7 @@ Thumbs.db
 .env
 /src/app/build-meta.ts
 /plans
+/rules
 
 # Test fixtures (large data files)
 /scripts/fixtures/

src/app/app.html

@@ -104,6 +104,28 @@
                             </div>
                             <span>Options</span>
                         </button>
+                        <hr class="divider home-actions-divider" />
+                        @if (lobbyService.hasLobby()) {
+                        <button type="button" class="home-panel-action" (click)="closeHomeActionsPanel(); manageLobby()">
+                            <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+                                <path d="M1.5 6.5C1.5 3.462 3.962 1 7 1s5.5 2.462 5.5 5.5S10.038 12 7 12 1.5 9.538 1.5 6.5Zm13 0c0 1.5-.441 2.898-1.2 4.07A5.5 5.5 0 1 0 13.3 2.43a7.466 7.466 0 0 1 1.2 4.07ZM0 18a4 4 0 0 1 4-4h6a4 4 0 0 1 4 4v4a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1v-4Zm16 0v5h7a1 1 0 0 0 1-1v-4a4 4 0 0 0-4-4h-5.528A5.98 5.98 0 0 1 16 18Z" />
+                            </svg>
+                            <span>Manage Lobby</span>
+                        </button>
+                        <button type="button" class="home-panel-action" (click)="closeHomeActionsPanel(); leaveLobby()">
+                            <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+                                <path d="M5 2h9v2H5v16h9v2H5a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2Zm12.6 5.6L22 12l-4.4 4.4-1.4-1.4 2-2H9v-2h9.2l-2-2 1.4-1.4Z" />
+                            </svg>
+                            <span>Leave Lobby</span>
+                        </button>
+                        } @else {
+                        <button type="button" class="home-panel-action" (click)="closeHomeActionsPanel(); joinLobby()">
+                            <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+                                <path d="M13 5 20 12l-7 7-1.4-1.4 4.6-4.6H4v-2h12.2l-4.6-4.6L13 5Z" />
+                            </svg>
+                            <span>Join Lobby</span>
+                        </button>
+                        }
                     </div>
                 </aside>
                 }
@@ -173,6 +195,14 @@
                     </button>
                 </div>
                 }
+                <div class="lobby-footer-actions screen-only">
+                    @if (lobbyService.hasLobby()) {
+                    <button type="button" class="lobby-footer-link" (click)="manageLobby()">Manage Lobby</button>
+                    <button type="button" class="lobby-footer-link" (click)="leaveLobby()">Leave Lobby</button>
+                    } @else {
+                    <button type="button" class="lobby-footer-link" (click)="joinLobby()">Join Lobby</button>
+                    }
+                </div>
                 <div class="build-info screen-only" (click)="showBetaDialog();">{{ buildInfo }}</div>
                 <div class="footer-legal-links">
                     <a class="footer-link" href="/privacy.html" target="_blank" rel="noopener noreferrer">Privacy Policy</a>
@@ -192,4 +222,4 @@
     </div>
 </main>
 <app-toasts></app-toasts>
-<router-outlet></router-outlet>
+<router-outlet></router-outlet>

src/app/app.scss

@@ -112,6 +112,32 @@
     cursor: pointer;
 }
 
+.lobby-footer-actions {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 12px;
+}
+
+.lobby-footer-link {
+    appearance: none;
+    border: 0;
+    background: none;
+    padding: 0;
+    color: var(--text-color-secondary);
+    font: inherit;
+    font-size: 0.8em;
+    text-decoration: underline;
+    text-underline-offset: 2px;
+    cursor: pointer;
+    transition: color 0.2s;
+
+    &:hover,
+    &:focus-visible {
+        color: var(--text-color);
+    }
+}
+
 .footer-legal-links {
     display: flex;
     flex-wrap: wrap;
@@ -407,6 +433,11 @@ svg-viewer {
     gap: 6px;
 }
 
+.home-actions-divider {
+    margin-top: 8px;
+    margin-bottom: 8px;
+}
+
 .home-panel-action {
     position: relative;
     width: 100%;

src/app/app.spec.ts

@@ -23,6 +23,7 @@ import { SavedSearchesService } from './services/saved-searches.service';
 import { LoggerService } from './services/logger.service';
 import { GameSystem } from './models/common.model';
 import { AppUpdateService } from './services/app-update.service';
+import { LobbyService } from './services/lobby.service';
 
 describe('App', () => {
   const reloadHashStorageKey = 'mekbay:sw-update-reload-hash';
@@ -48,6 +49,7 @@ describe('App', () => {
   let urlServiceMock: any;
   let savedSearchesServiceMock: any;
   let loggerServiceMock: any;
+  let lobbyServiceMock: any;
 
   beforeEach(async () => {
     versionUpdates = new Subject();
@@ -132,6 +134,12 @@ describe('App', () => {
       error: jasmine.createSpy('error'),
       handleError: jasmine.createSpy('handleError'),
     };
+    lobbyServiceMock = {
+      hasLobby: jasmine.createSpy('hasLobby').and.returnValue(false),
+      promptAndJoin: jasmine.createSpy('promptAndJoin').and.resolveTo(undefined),
+      showLobbyDialog: jasmine.createSpy('showLobbyDialog').and.resolveTo(undefined),
+      confirmAndLeave: jasmine.createSpy('confirmAndLeave').and.resolveTo(false),
+    };
 
     await TestBed.configureTestingModule({
       imports: [App],
@@ -155,6 +163,7 @@ describe('App', () => {
         { provide: UrlService, useValue: urlServiceMock },
         { provide: SavedSearchesService, useValue: savedSearchesServiceMock },
         { provide: LoggerService, useValue: loggerServiceMock },
+        { provide: LobbyService, useValue: lobbyServiceMock },
       ]
     }).compileComponents();
   });
@@ -173,6 +182,19 @@ describe('App', () => {
     expect(app).toBeTruthy();
   });
 
+  it('delegates join, manage, and leave lobby actions', () => {
+    fixture = TestBed.createComponent(App);
+    const app = fixture.componentInstance;
+
+    app.joinLobby();
+    app.manageLobby();
+    app.leaveLobby();
+
+    expect(lobbyServiceMock.promptAndJoin).toHaveBeenCalled();
+    expect(lobbyServiceMock.showLobbyDialog).toHaveBeenCalled();
+    expect(lobbyServiceMock.confirmAndLeave).toHaveBeenCalled();
+  });
+
   it('does not check for service worker updates immediately after full app startup', () => {
     swUpdateMock.isEnabled = true;
 

src/app/app.ts

@@ -36,6 +36,7 @@ import { AccountAuthService } from './services/account-auth.service';
 import { AccountProtectionService } from './services/account-protection.service';
 import { AppUpdateService } from './services/app-update.service';
 import { LoadingSpinnerComponent } from './components/loading-spinner/loading-spinner.component';
+import { LobbyService } from './services/lobby.service';
 
 import { GameSystem } from './models/common.model';
 import { Router, RouterOutlet } from '@angular/router';
@@ -77,6 +78,7 @@ export class App {
     forceBuilderService = inject(ForceBuilderService);
     protected layoutService = inject(LayoutService);
     protected appUpdateService = inject(AppUpdateService);
+    protected lobbyService = inject(LobbyService);
     private wsService = inject(WsService);
     private dialogService = inject(DialogsService);
     private toastService = inject(ToastService);
@@ -583,6 +585,18 @@ export class App {
         void this.forceBuilderService.showForceGeneratorDialog();
     }
 
+    joinLobby(): void {
+        void this.lobbyService.promptAndJoin();
+    }
+
+    manageLobby(): void {
+        void this.lobbyService.showLobbyDialog();
+    }
+
+    leaveLobby(): void {
+        void this.lobbyService.confirmAndLeave();
+    }
+
     openHomeActionsPanel(): void {
         this.homeActionsPanelOpen.set(true);
     }
@@ -637,4 +651,4 @@ export class App {
             'ignore'
         );
     }
-}
+}

src/app/components/alpha-strike-card/alpha-strike-card.component.ts

@@ -707,7 +707,8 @@ export class AlphaStrikeCardComponent {
                 inputType: 'number',
                 minimumValue: - (isArmor ? state.armor() + state.pendingArmor() : state.internal() + state.pendingInternal()),
                 maximumValue: isArmor ? unit.getUnit().as.Arm : unit.getUnit().as.Str,
-                defaultValue: 0
+                defaultValue: 0,
+                centerInput: true,
             } as InputDialogData
         });
 

src/app/components/alpha-strike-viewer/alpha-strike-viewer.component.scss

@@ -43,6 +43,10 @@
     background: var(--text-color);
     opacity: 0.3;
 
+    &:last-child {
+        display: none;
+    }
+
     @media print {
         display: none;
     }

src/app/components/c3-network-dialog/c3-network-dialog.component.html

@@ -116,7 +116,7 @@ <h2>Network Configuration</h2>
                 <feDropShadow dx="0" dy="0" stdDeviation="4" flood-color="rgba(255,0,0,0.8)" />
             </filter>
             <filter id="pin-hover-glow" x="-100%" y="-100%" width="300%" height="300%">
-                <feDropShadow dx="0" dy="0" stdDeviation="6" flood-color="rgb(154, 154, 255)" />
+                <feDropShadow dx="0" dy="0" stdDeviation="6" flood-color="rgb(174, 174, 253)" />
             </filter>
             <filter id="pin-hover-glow-danger" x="-100%" y="-100%" width="300%" height="300%">
                 <feDropShadow dx="0" dy="0" stdDeviation="6" flood-color="rgba(255,0,0,1)" />