feat(client): polished toolbar, live online count via SSE
- 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
This commit is contained in:
1 parent
e1ecb190bc
commit
67b67798b9
32 files changed
+799
-102
No files matched your search
@@ -0,0 +1,33 @@
|
||||
"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 })}</>;
|
||||
}
|
||||
Reference in new issue
Block a user