better-ish design. this looks shit

src/app/pages/room-listing/room-listing.component.html

@@ -1,10 +1,19 @@
 <app-page-title></app-page-title>
+<p *ngIf="rooms.length > 0">
+    There's currently
+    {{'player' | plural: playerCount()}}
+    online across
+    {{'room' | plural: rooms.length}}.
+</p>
+<p *ngIf="rooms.length <= 0">Nobody's online right now. Come play!</p>
 
-<app-container *ngFor="let version of getGameVersions()">
-    <app-container-title>Rooms for {{version | game}}</app-container-title>
-    <div class="flex flex-col gap-y-1.5">
-        <app-dark-container *ngFor="let room of getRoomsForGame(version)">
-            <app-room [room]="room" [showGame]="false"></app-room>
-        </app-dark-container>
-    </div>
-</app-container>
+<div class="flex flex-col gap-y-2.5">
+    <app-container *ngFor="let version of getGameVersions()">
+        <app-container-title>Rooms for {{version | game}}</app-container-title>
+        <div class="flex flex-col gap-y-1.5">
+            <app-dark-container *ngFor="let room of getRoomsForGame(version)">
+                <app-room [room]="room" [showGame]="false"></app-room>
+            </app-dark-container>
+        </div>
+    </app-container>
+</div>

src/app/pages/room-listing/room-listing.component.ts

@@ -1,14 +1,15 @@
 import { Component } from '@angular/core';
 import {PageTitleComponent} from "../../components/ui/text/page-title.component";
 import {RoomComponent} from "../../components/items/room.component";
-import {NgForOf} from "@angular/common";
+import {NgForOf, NgIf} from "@angular/common";
 import {Room} from "../../api/types/rooms/room";
 import {ClientService} from "../../api/client.service";
 import {GameVersion} from "../../api/types/game-version";
 import {ContainerComponent} from "../../components/ui/container.component";
 import {ContainerTitleComponent} from "../../components/ui/text/container-title.component";
 import {GamePipe} from "../../pipes/game.pipe";
 import {DarkContainerComponent} from "../../components/ui/dark-container.component";
+import {PluralPipe} from "../../pipes/plural.pipe";
 
 @Component({
   selector: 'app-room-listing',
@@ -21,6 +22,8 @@ import {DarkContainerComponent} from "../../components/ui/dark-container.compone
     ContainerTitleComponent,
     GamePipe,
     DarkContainerComponent,
+    PluralPipe,
+    NgIf,
   ],
   templateUrl: './room-listing.component.html'
 })
@@ -33,6 +36,17 @@ export class RoomListingComponent {
     })
   }
 
+  playerCount(): number {
+    if(!this.rooms) return -1;
+    let players: number = 0;
+
+    for (let room of this.rooms) {
+      players += room.playerIds.length;
+    }
+
+    return players;
+  }
+
   // moronic hack to iterate through the values of an enum
   // i hate javascript i hate javascript i hate javascript i hate javascript
   // i hate javascript i hate javascript i hate javascript i hate javascript