Add DM typing indicator to the game chat
The server broadcasts a "typing" event to the whole room right when it starts the DM turn, and broadcasts turn failures to everyone too (previously only the sender saw them, which would've left other players' indicators stuck forever). The frontend shows a pulsing "Dungeon Master schreibt …" line that clears once the real reply or an error arrives. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
@@ -9,12 +9,18 @@ function senderLabel(message: Message): string {
|
||||
return message.player_name ?? "Spieler";
|
||||
}
|
||||
|
||||
export default function TranscriptPane({ messages }: { messages: Message[] }) {
|
||||
export default function TranscriptPane({
|
||||
messages,
|
||||
typing,
|
||||
}: {
|
||||
messages: Message[];
|
||||
typing?: boolean;
|
||||
}) {
|
||||
const bottomRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
bottomRef.current?.scrollIntoView({ block: "end" });
|
||||
}, [messages]);
|
||||
}, [messages, typing]);
|
||||
|
||||
return (
|
||||
<div className="flex h-full flex-col gap-3 overflow-y-auto p-4">
|
||||
@@ -34,6 +40,11 @@ export default function TranscriptPane({ messages }: { messages: Message[] }) {
|
||||
<span className="whitespace-pre-wrap">{m.content}</span>
|
||||
</div>
|
||||
))}
|
||||
{typing && (
|
||||
<div className="text-slate-100">
|
||||
<span className="animate-pulse font-semibold text-amber-400">Dungeon Master schreibt …</span>
|
||||
</div>
|
||||
)}
|
||||
<div ref={bottomRef} />
|
||||
</div>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user