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:
Thorsten
2026-09-01 07:59:10 +02:00
parent 9d378a1eb0
commit ec53ed3aba
4 changed files with 24 additions and 4 deletions
+5 -1
View File
@@ -19,6 +19,7 @@ export default function GameSession() {
const [joinCode, setJoinCode] = useState("");
const [selectedCharacterId, setSelectedCharacterId] = useState("");
const [joinError, setJoinError] = useState<string | null>(null);
const [isTyping, setIsTyping] = useState(false);
async function loadGame() {
if (!gameId) return;
@@ -69,12 +70,14 @@ export default function GameSession() {
const { send } = useGameSocket(
game?.is_participant ? gameId : undefined,
(incoming) => {
setIsTyping(false);
setMessages((prev) => {
const next = [...prev, incoming];
return showingFull ? next : next.slice(-5);
});
},
(detail) => {
setIsTyping(false);
const text =
detail === "connection_lost"
? "Verbindung zum Server verloren. Bitte lade die Seite neu."
@@ -94,6 +97,7 @@ export default function GameSession() {
return showingFull ? next : next.slice(-5);
});
},
() => setIsTyping(true),
);
async function handleSend(content: string) {
@@ -173,7 +177,7 @@ export default function GameSession() {
</div>
<div className="flex flex-1 flex-col overflow-hidden rounded-lg border border-slate-800 bg-slate-900">
<TranscriptPane messages={messages} />
<TranscriptPane messages={messages} typing={isTyping} />
<SendMessageForm onSend={handleSend} />
</div>
</div>