chore: initial commit for phase06

2026-02-21 23:46:01 +03:00
parent 0941a9ba46
commit 5709d8bc10
16 changed files with 1667 additions and 15 deletions
@@ -1,13 +1,81 @@
-import { Users } from 'lucide-react';
+import { useParams } from 'react-router';
+import { useQuery } from '@tanstack/react-query';
+import { Users, RefreshCw } from 'lucide-react';
+import { api } from '@/lib/api';
+import { Button } from '@/components/ui/button';
 import { Card, CardContent } from '@/components/ui/card';

+interface Player {
+  name: string;
+  steamid?: string;
+}
+
+interface PlayerListResponse {
+  players: Player[];
+  maxPlayers: number;
+}
+
 export function PlayersPage() {
+  const { orgId, serverId } = useParams();
+
+  const { data, isLoading, refetch } = useQuery({
+    queryKey: ['players', orgId, serverId],
+    queryFn: () =>
+      api.get<PlayerListResponse>(
+        `/organizations/${orgId}/servers/${serverId}/players`,
+      ),
+    refetchInterval: 30000,
+  });
+
+  const players = data?.players ?? [];
+  const maxPlayers = data?.maxPlayers ?? 0;
+
  return (
-    <Card>
-      <CardContent className="flex flex-col items-center justify-center py-12">
-        <Users className="mb-4 h-12 w-12 text-muted-foreground/50" />
-        <p className="text-muted-foreground">Active player tracking coming soon</p>
-      </CardContent>
-    </Card>
+    <div className="space-y-4">
+      <div className="flex items-center justify-between">
+        <div>
+          <h2 className="text-lg font-semibold">Active Players</h2>
+          <p className="text-sm text-muted-foreground">
+            {players.length} / {maxPlayers} players online
+          </p>
+        </div>
+        <Button variant="outline" size="sm" onClick={() => refetch()} disabled={isLoading}>
+          <RefreshCw className={`h-4 w-4 ${isLoading ? 'animate-spin' : ''}`} />
+          Refresh
+        </Button>
+      </div>
+
+      {players.length === 0 ? (
+        <Card>
+          <CardContent className="flex flex-col items-center justify-center py-12">
+            <Users className="mb-4 h-12 w-12 text-muted-foreground/50" />
+            <p className="text-muted-foreground">No players online</p>
+            <p className="mt-1 text-xs text-muted-foreground">
+              Player tracking requires RCON to be enabled on the server
+            </p>
+          </CardContent>
+        </Card>
+      ) : (
+        <Card>
+          <CardContent className="p-0">
+            <div className="divide-y">
+              {players.map((player, i) => (
+                <div key={i} className="flex items-center gap-3 px-4 py-3">
+                  <div className="flex h-8 w-8 items-center justify-center rounded-full bg-primary/10 text-sm font-medium text-primary">
+                    {player.name.charAt(0).toUpperCase()}
+                  </div>
+                  <div>
+                    <p className="font-medium">{player.name}</p>
+                    {player.steamid && (
+                      <p className="text-xs text-muted-foreground">{player.steamid}</p>
+                    )}
+                  </div>
+                </div>
+              ))}
+            </div>
+          </CardContent>
+        </Card>
+      )}
+    </div>
  );
 }