- 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
34 lines
883 B
TypeScript
34 lines
883 B
TypeScript
"use client";
|
|
|
|
import { useTranslations } from "next-intl";
|
|
import { useEffect, useState } from "react";
|
|
import { useEventSource } from "@/lib/use-event-source";
|
|
|
|
/**
|
|
* Live online user counter. Subscribes to the SSE online-count stream so the
|
|
* displayed count updates in real-time (multicast) instead of only reflecting
|
|
* the server-rendered value at page load.
|
|
*/
|
|
export function LiveOnlineCount({
|
|
initial,
|
|
hotelName,
|
|
}: {
|
|
initial: number;
|
|
hotelName: string;
|
|
}) {
|
|
const t = useTranslations("header");
|
|
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 <>{t("online", { count, hotel: hotelName })}</>;
|
|
}
|