openhands
67b67798b9
- Redesign in-game client toolbar with refined glass styling and buttons - Live online count + emulator status streamed over SSE multicast - Who's-online tooltip throttled to reduce repeated requests - Fix show button so it always returns the hidden toolbar - Use theme CSS variables instead of hardcoded colors - Add toolbar translations across all 25 locales
33 lines
885 B
TypeScript
33 lines
885 B
TypeScript
"use client";
|
|
|
|
import { useEffect, useState } from "react";
|
|
import { AnimatedCounter } from "@/components/animated-counter";
|
|
import { useEventSource } from "@/lib/use-event-source";
|
|
|
|
/**
|
|
* Live animated online-count number. Subscribes to the SSE online-count stream
|
|
* so the stat updates in real-time (multicast) instead of only the initial SSR
|
|
* value, while keeping the entrance counter animation.
|
|
*/
|
|
export function LiveOnlineCounter({
|
|
initial,
|
|
suffix = "",
|
|
}: {
|
|
initial: number;
|
|
suffix?: string;
|
|
}) {
|
|
const [count, setCount] = useState(initial);
|
|
|
|
const { data: onlineStream } = useEventSource<{ count: number }>(
|
|
"/api/online/count/stream",
|
|
{ enabled: true },
|
|
);
|
|
useEffect(() => {
|
|
if (onlineStream && typeof onlineStream.count === "number") {
|
|
setCount(onlineStream.count);
|
|
}
|
|
}, [onlineStream]);
|
|
|
|
return <AnimatedCounter value={count} suffix={suffix} />;
|
|
}
|