- Verbunden mit {serverLabel ?? 'CS2-Server'}
+
+
+ {serverLabel ?? 'CS2-Server'}
+
Map: {prettyMap}
@@ -173,7 +175,11 @@ export default function TelemetryBanner({
) : (
<>
-
Verbindung getrennt
+
+
+ Verbindung getrennt
+
+
Map: {prettyMap}
Phase: {prettyPhase}
@@ -235,25 +241,27 @@ export default function TelemetryBanner({
/>
)}
- {/* „X“ Disconnect ganz rechts */}
-
+
+
Verlassen
+
+ )}
diff --git a/src/app/components/TelemetrySocket.tsx b/src/app/components/TelemetrySocket.tsx
index f2bbc71..56969a2 100644
--- a/src/app/components/TelemetrySocket.tsx
+++ b/src/app/components/TelemetrySocket.tsx
@@ -37,6 +37,10 @@ function parseServerLabel(uri: string | null | undefined): string {
}
}
+function quoteArg(s: string) {
+ return `"${String(s ?? '').replace(/"/g, '\\"')}"`
+}
+
function labelForMap(key?: string | null): string {
if (!key) return '—'
const k = String(key).toLowerCase()
@@ -62,6 +66,11 @@ export default function TelemetrySocket() {
const { data: session } = useSession()
const mySteamId = (session?.user as any)?.steamId ?? null
+ const myName =
+ (session?.user as any)?.name ??
+ (session?.user as any)?.steamName ??
+ (session?.user as any)?.displayName ??
+ null
// overlay control
const hideOverlay = useReadyOverlayStore((s) => s.hide)
@@ -248,7 +257,7 @@ export default function TelemetrySocket() {
try { window.location.href = connectUri } catch {}
}
- const handleDisconnect = () => {
+ const handleDisconnect = async () => {
// Auto-Reconnect stoppen
aliveRef.current = false;
if (retryRef.current) {
@@ -256,16 +265,33 @@ export default function TelemetrySocket() {
retryRef.current = null;
}
- // WebSocket sauber schließen
+ // WebSocket zu
try { wsRef.current?.close(1000, 'user requested disconnect') } catch {}
wsRef.current = null;
- // Lokalen Zustand zurücksetzen (wir bleiben im "disconnected"-Banner)
+ // ❗ NICHT: setPhase('unknown'), setMapKeyForUi(null), setServerName(null)
+ // Nur "Online"-Set leeren, damit variant = 'disconnected'
setTelemetrySet(new Set());
- setServerName(null);
- setMapKeyForUi(null);
- setPhase('unknown' as any);
- setScore({ a: null, b: null });
+ // Score darf bleiben; falls du willst, kannst du ihn optional leeren:
+ // setScore({ a: null, b: null });
+
+ // Kick an Server schicken
+ try {
+ const who = myName || mySteamId;
+ if (who) {
+ const cmd = `kick ${quoteArg(String(who))}`;
+ await fetch('/api/cs2/server/send-command', {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ cache: 'no-store',
+ body: JSON.stringify({ command: cmd }),
+ });
+ }
+ } catch (err) {
+ if (process.env.NODE_ENV !== 'production') {
+ console.warn('[TelemetrySocket] kick command failed:', err);
+ }
+ }
};
const variant: 'connected' | 'disconnected' = iAmOnline ? 'connected' : 'disconnected'
diff --git a/src/app/radar/GameSocket.tsx b/src/app/components/radar/GameSocket.tsx
similarity index 52%
rename from src/app/radar/GameSocket.tsx
rename to src/app/components/radar/GameSocket.tsx
index 961cf22..596f8f1 100644
--- a/src/app/radar/GameSocket.tsx
+++ b/src/app/components/radar/GameSocket.tsx
@@ -15,6 +15,80 @@ type GameSocketProps = {
onBomb?: (b:any) => void
}
+// HINZUFÜGEN: oben im Modul – kleine Helfer
+function pickVec3Loose(src: any) {
+ // akzeptiert {x,y,z}, [x,y,z], "x, y, z"
+ if (!src) return null
+ if (Array.isArray(src)) {
+ const [x, y, z] = src
+ const nx = Number(x), ny = Number(y), nz = Number(z)
+ if ([nx, ny].every(Number.isFinite)) return { x: nx, y: ny, z: Number.isFinite(nz) ? nz : 0 }
+ return null
+ }
+ if (typeof src === 'string') {
+ const parts = src.split(',').map(s => Number(s.trim()))
+ if (parts.length >= 2 && parts.slice(0,2).every(Number.isFinite)) {
+ return { x: parts[0], y: parts[1], z: Number.isFinite(parts[2]) ? parts[2] : 0 }
+ }
+ return null
+ }
+ const nx = Number(src?.x), ny = Number(src?.y), nz = Number(src?.z)
+ if ([nx, ny].every(Number.isFinite)) return { x: nx, y: ny, z: Number.isFinite(nz) ? nz : 0 }
+ return null
+}
+
+function extractBombPayload(msg: any): any | null {
+ // 1) Wenn msg.bomb / msg.c4 schon da ist → ggf. Position aus bekannten Feldern ergänzen
+ const base = msg?.bomb ?? msg?.c4 ?? null
+
+ // mögliche Felder, wo Positionsinfos oft landen
+ const posCandidates = [
+ base?.pos, base?.position, base?.location, base?.coordinates, base?.origin,
+ msg?.bomb_pos, msg?.bomb_position, msg?.bombLocation, msg?.bomblocation,
+ msg?.pos, msg?.position, msg?.location, msg?.coordinates, msg?.origin,
+ msg?.world?.bomb, msg?.objectives?.bomb
+ ]
+
+ let P = null
+ for (const p of posCandidates) { P = pickVec3Loose(p); if (P) break }
+
+ // Status aus explizitem Feld oder vom Event-Type ableiten
+ const t = String(msg?.type ?? '').toLowerCase()
+ let status: 'carried'|'dropped'|'planted'|'defusing'|'defused'|'unknown' = 'unknown'
+ const s = String(base?.status ?? base?.state ?? '').toLowerCase()
+ if (s.includes('plant')) status = 'planted'
+ else if (s.includes('drop')) status = 'dropped'
+ else if (s.includes('carry')) status = 'carried'
+ else if (s.includes('defus')) status = 'defusing'
+ else if (s.includes('defus') && s.includes('ed')) status = 'defused'
+
+ if (t === 'bomb_planted') status = 'planted'
+ else if (t === 'bomb_dropped') status = 'dropped'
+ else if (t === 'bomb_pickup') status = 'carried'
+ else if (t === 'bomb_begindefuse') status = 'defusing'
+ else if (t === 'bomb_abortdefuse') status = 'planted'
+ else if (t === 'bomb_defused') status = 'defused'
+
+ // Wir wollen nur liefern, wenn NICHT getragen
+ const notCarried = status !== 'carried'
+
+ if (!base && !P && !t.startsWith('bomb_')) return null
+ if (!notCarried && !t.startsWith('bomb_')) return null
+
+ const payload = {
+ // Lass LiveRadar.normalizeBomb entscheiden – wir geben „bomb“ aus
+ bomb: {
+ ...(base || {}),
+ ...(P ? { x: P.x, y: P.y, z: P.z } : {}),
+ status
+ },
+ // original message für evtl. weitere Felder
+ type: msg?.type
+ }
+ return payload
+}
+
+
export default function GameSocket(props: GameSocketProps) {
const { url, onStatus, onMap, onPlayerUpdate, onPlayersAll, onGrenades, onRoundStart, onRoundEnd, onBomb } = props
const wsRef = useRef
(null)
@@ -35,31 +109,43 @@ export default function GameSocket(props: GameSocketProps) {
const g = msg.grenades ?? msg.projectiles ?? msg.nades ?? msg.grenadeProjectiles;
if (g) onGrenades?.(g);
+ // 1) Bisher: direkt durchreichen
if (msg.bomb) onBomb?.(msg.bomb);
+
+ // 2) NEU: Falls keine msg.bomb vorhanden, aber Position/Status auffindbar → synthetische Bomb-Payload senden
+ if (!msg.bomb) {
+ const synth = extractBombPayload(msg);
+ if (synth) onBomb?.(synth);
+ }
+
onPlayersAll?.(msg);
return;
}
// --- non-tick messages (hello, map, bomb_* events, etc.) ---
-
- // Map kann als String ODER als Objekt kommen
if (typeof msg.map === 'string') {
onMap?.(msg.map.toLowerCase());
} else if (msg.map && typeof msg.map.name === 'string') {
onMap?.(msg.map.name.toLowerCase());
}
- // komplette Snapshot-Payload
if (msg.allplayers) onPlayersAll?.(msg);
if (msg.player || msg.steamId || msg.position || msg.pos) onPlayerUpdate?.(msg);
- // Granaten über alle bekannten Keys (einmalig) weiterreichen
const g2 = msg.grenades ?? msg.projectiles ?? msg.nades ?? msg.grenadeProjectiles;
if (g2) onGrenades?.(g2);
// Bombe: generische Events + direkte bomb/c4-Payload
const t = String(msg.type || '').toLowerCase();
- if (msg.bomb || msg.c4 || t.startsWith('bomb_')) onBomb?.(msg);
+
+ if (msg.bomb || msg.c4) {
+ onBomb?.(msg); // unverändert weiterreichen
+ } else if (t.startsWith('bomb_')) {
+ // NEU: Event ohne bomb-Objekt → mit Position/Status anreichern
+ const enriched = extractBombPayload(msg);
+ if (enriched) onBomb?.(enriched);
+ else onBomb?.(msg); // Fallback: Event trotzdem melden
+ }
};
diff --git a/src/app/components/radar/LiveRadar.tsx b/src/app/components/radar/LiveRadar.tsx
new file mode 100644
index 0000000..a053973
--- /dev/null
+++ b/src/app/components/radar/LiveRadar.tsx
@@ -0,0 +1,260 @@
+'use client'
+
+import { useEffect, useMemo, useState } from 'react';
+import { useSession } from 'next-auth/react';
+import GameSocket from './GameSocket';
+import TeamSidebar from './TeamSidebar';
+import StaticEffects from './StaticEffects';
+import RadarHeader from './RadarHeader';
+import RadarCanvas from './RadarCanvas';
+
+import { useAvatarDirectoryStore } from '@/app/lib/useAvatarDirectoryStore';
+import { useTelemetryStore } from '@/app/lib/useTelemetryStore';
+
+import { useBombBeep } from './hooks/useBombBeep';
+import { useOverview } from './hooks/useOverview';
+import { useRadarState } from './hooks/useRadarState';
+
+import { Grenade } from './lib/types';
+import { UI } from './lib/ui';
+import { teamOfGrenade } from './lib/grenades';
+import { BombState } from './lib/types';
+
+const teamIdT = undefined as string | undefined;
+const teamIdCT = undefined as string | undefined;
+
+function makeWsUrl(host?: string, port?: string, path?: string, scheme?: string) {
+ const h = (host ?? '').trim() || '127.0.0.1';
+ const p = (port ?? '').trim() || '8081';
+ const pa = (path ?? '').trim() || '/telemetry';
+ const sch = (scheme ?? '').toLowerCase();
+ const pageHttps = typeof window !== 'undefined' && window.location.protocol === 'https:';
+ const useWss = sch === 'wss' || (sch !== 'ws' && (p === '443' || pageHttps));
+ const proto = useWss ? 'wss' : 'ws';
+ const portPart = (p === '80' || p === '443') ? '' : `:${p}`;
+ return `${proto}://${h}${portPart}${pa}`;
+}
+const gameUrl = makeWsUrl(
+ process.env.NEXT_PUBLIC_CS2_GAME_WS_HOST,
+ process.env.NEXT_PUBLIC_CS2_GAME_WS_PORT,
+ process.env.NEXT_PUBLIC_CS2_GAME_WS_PATH,
+ process.env.NEXT_PUBLIC_CS2_GAME_WS_SCHEME
+);
+
+export default function LiveRadar() {
+ // Session / User
+ const { data: session, status } = useSession();
+ const isAuthed = status === 'authenticated';
+ const mySteamId: string | null = useMemo(() => {
+ const u: any = session?.user;
+ const cands = [u?.steamId, u?.steamid, u?.steam_id, u?.id];
+ const first = cands.find(Boolean);
+ return first ? String(first) : null;
+ }, [session?.user]);
+
+ // Avatar store
+ const ensureTeamsLoaded = useAvatarDirectoryStore(s => s.ensureTeamsLoaded);
+ const avatarVersion = useAvatarDirectoryStore(s => s.version);
+ const avatarById = useAvatarDirectoryStore(s => s.byId);
+
+ // Radar state (alles zentrale Zeug)
+ const {
+ radarWsStatus, setGameWsStatus,
+ activeMapKey, setActiveMapKey,
+ players, playersRef, hoveredPlayerId, setHoveredPlayerId,
+ grenades, trails, deathMarkers,
+ bomb, roundPhase, roundEndsAtRef, bombEndsAtRef, defuseRef,
+ score, myTeam,
+ upsertPlayer, handlePlayersAll, handleGrenades, handleBomb,
+ clearRoundArtifacts, scheduleFlush,
+ } = useRadarState(mySteamId);
+
+ // Avatare toggle (persist)
+ const [useAvatars, setUseAvatars] = useState(false);
+ useEffect(() => { try { setUseAvatars(localStorage.getItem('radar.useAvatars') === '1'); } catch {} }, []);
+ useEffect(() => { try { localStorage.setItem('radar.useAvatars', useAvatars ? '1' : '0'); } catch {} }, [useAvatars]);
+
+ // Teams preload
+ useEffect(() => {
+ const ids = [teamIdT, teamIdCT].filter(Boolean) as string[];
+ if (ids.length) ensureTeamsLoaded(ids);
+ }, [ensureTeamsLoaded]);
+
+ // Map-Key aus Telemetry übernehmen
+ const mapKeyFromTelemetry = useTelemetryStore(s => s.mapKey);
+ useEffect(() => { if (mapKeyFromTelemetry) setActiveMapKey(mapKeyFromTelemetry); }, [mapKeyFromTelemetry, setActiveMapKey]);
+
+ // overview + mapping
+ const { overview, imgSize, setImgSize, currentSrc, srcIdx, setSrcIdx, worldToPx, unitsToPx } =
+ useOverview(activeMapKey, players.map(p=>({x:p.x,y:p.y})));
+ void overview; void srcIdx; // kept if you want to expose choice UI later
+
+ // Bomb beep state
+ const { beepState } = useBombBeep(bomb);
+ const bombSecLeft = bombEndsAtRef.current == null ? null : Math.max(0, Math.ceil((bombEndsAtRef.current - Date.now())/1000));
+ const bombFinal10 = bombSecLeft != null && bombSecLeft <= 10;
+
+ // helper: grenade filter by team
+ const teamOfPlayer = (sid?: string | null): 'T' | 'CT' | string | null => {
+ if (!sid) return null;
+ return playersRef.current.get(sid)?.team ?? null;
+ };
+ const shouldShowGrenade = (g: Grenade): boolean => {
+ if (myTeam !== 'T' && myTeam !== 'CT') return true;
+ const gt = teamOfGrenade(g, teamOfPlayer);
+ return gt === myTeam;
+ };
+
+ if (!isAuthed) {
+ return (
+
+
+
Live Radar
+
Bitte einloggen, um das Live-Radar zu sehen.
+
+
+ {/* Header */}
+
+
+ {/* Unsichtbare WS-Clients */}
+
setActiveMapKey(String(k).toLowerCase())}
+ onPlayerUpdate={(p)=> { upsertPlayer(p); scheduleFlush() }}
+ onPlayersAll={(m)=> { handlePlayersAll(m); scheduleFlush() }}
+ onGrenades={(g)=> { handleGrenades(g); scheduleFlush() }}
+ onRoundStart={() => { clearRoundArtifacts(true) }}
+ onRoundEnd={() => {
+ for (const [id, p] of playersRef.current) playersRef.current.set(id, { ...p, hasBomb: false });
+ if (bomb?.status === 'planted') { /* visual cleanup handled in state */ }
+ clearRoundArtifacts(true);
+ }}
+ onBomb={handleBomb((raw:any) => {
+ // lokal: normalizeBomb (aus alter Datei) – du kannst es ebenfalls auslagern, falls gewünscht
+ const pickVec3 = (src:any) => {
+ const p = src?.pos ?? src?.position ?? src?.location ?? src?.coordinates;
+ if (Array.isArray(p)) return { x: +p[0]||0, y: +p[1]||0, z: +p[2]||0 };
+ if (typeof p === 'string') {
+ const [x, y, z] = p.split(',').map(s=>Number(s.trim()));
+ return { x:x||0, y:y||0, z:z||0 };
+ }
+ return { x: +src?.x||0, y: +src?.y||0, z: +src?.z||0 };
+ };
+ if (!raw) return null;
+ const payload = raw.bomb ?? raw.c4 ?? raw;
+ const pos = pickVec3(payload);
+ const t = String(raw?.type ?? '').toLowerCase();
+ if (t === 'bomb_beginplant' || t === 'bomb_abortplant') return null;
+
+ let status: BombState['status'] = 'unknown';
+ const s = String(payload?.status ?? payload?.state ?? '').toLowerCase();
+ if (s.includes('planted')) status = 'planted';
+ else if (s.includes('drop')) status = 'dropped';
+ else if (s.includes('carry')) status = 'carried';
+ else if (s.includes('defus')) status = 'defusing';
+ if (payload?.planted) status = 'planted';
+ if (payload?.dropped) status = 'dropped';
+ if (payload?.carried) status = 'carried';
+ if (payload?.defusing) status = 'defusing';
+ if (payload?.defused) status = 'defused';
+
+ if (t === 'bomb_planted') status = 'planted';
+ if (t === 'bomb_dropped') status = 'dropped';
+ if (t === 'bomb_pickup') status = 'carried';
+ if (t === 'bomb_begindefuse') status = 'defusing';
+ if (t === 'bomb_abortdefuse') status = 'planted';
+ if (t === 'bomb_defused') status = 'defused';
+
+ const x = Number.isFinite(pos.x) ? pos.x : NaN;
+ const y = Number.isFinite(pos.y) ? pos.y : NaN;
+ const z = Number.isFinite(pos.z) ? pos.z : NaN;
+ return { x, y, z, status, changedAt: Date.now() };
+ })}
+ />
+
+ {/* Inhalt */}
+
+ {/* Left: T */}
+ {myTeam !== 'CT' && (
+ p.team === 'T' && (!myTeam || p.team === myTeam))
+ .map(p => ({
+ id: p.id, name: p.name, hp: p.hp, armor: p.armor, helmet: p.helmet,
+ defuse: p.defuse, hasBomb: p.hasBomb, alive: p.alive,
+ activeWeapon: p.activeWeapon || null,
+ weapons: p.weapons || null,
+ grenades: p.nades || null,
+ }))
+ }
+ // @ts-ignore
+ showAvatars={useAvatars}
+ // @ts-ignore
+ avatarsById={avatarById}
+ onHoverPlayer={setHoveredPlayerId}
+ />
+ )}
+
+ {/* Center: Radar */}
+ setImgSize({ w: img.naturalWidth, h: img.naturalHeight })}
+ onImgError={() => {}}
+ imgSize={imgSize}
+ worldToPx={worldToPx}
+ unitsToPx={unitsToPx}
+ players={players}
+ grenades={grenades}
+ trails={trails}
+ deathMarkers={deathMarkers}
+ useAvatars={useAvatars}
+ avatarById={avatarById}
+ hoveredPlayerId={hoveredPlayerId}
+ setHoveredPlayerId={setHoveredPlayerId}
+ myTeam={myTeam}
+ beepState={beepState}
+ bombFinal10={bombFinal10}
+ bomb={bomb}
+ shouldShowGrenade={shouldShowGrenade}
+ />
+
+ {/* Right: CT */}
+ {myTeam !== 'T' && (
+ p.team === 'CT' && (!myTeam || p.team === myTeam))
+ .map(p => ({
+ id: p.id, name: p.name, hp: p.hp, armor: p.armor, helmet: p.helmet,
+ defuse: p.defuse, hasBomb: p.hasBomb, alive: p.alive,
+ activeWeapon: p.activeWeapon || null,
+ weapons: p.weapons || null,
+ grenades: p.nades || null,
+ }))
+ }
+ // @ts-ignore
+ showAvatars={useAvatars}
+ // @ts-ignore
+ avatarsById={avatarById}
+ onHoverPlayer={setHoveredPlayerId}
+ />
+ )}
+
+
+
+ Keine Map erkannt.
+
+
+ {/* Topbar */}
+
+
+ {currentSrc ? (
+
+
onImgLoad(e.currentTarget)}
+ onError={onImgError}
+ />
+
+ {imgSize && (
+
+ )}
+
+ ) : (
+
Keine Radar-Grafik gefunden.
+ )}
+
+ {/* Global styles kept here for animations */}
+
+
+
Live Radar
+
+
+
+
+
+
+