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,32 @@
|
||||
"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} />;
|
||||
}
|
||||
Reference in new issue
Block a user