scrabble-game/ui/src/game/ChatScreen.svelte

<script lang="ts">
  import { onMount } from 'svelte';
  import Chat from './Chat.svelte';
  import { gateway } from '../lib/gateway';
  import { app, handleError, clearChatUnread } from '../lib/app.svelte';
  import { canSendChat, sentThisTurn } from '../lib/chatlimit';
  import type { ChatMessage, StateView } from '../lib/model';

  // The Chat tab body, hosted by CommsHub (which supplies the nav bar + tab bar). The
  // hub lays it out as a non-scrolling column, so the soft keyboard simply resizes the
  // viewport with the input pinned to the bottom. It loads the game state (for the
  // turn-based chat/nudge toggle) and the message list, and clears the unread while open.
  let { id }: { id: string } = $props();

  let view = $state<StateView | null>(null);
  let messages = $state<ChatMessage[]>([]);
  let busy = $state(false);
  let tick = $state(0);

  const myId = $derived(app.session?.userId ?? '');
  const isMyTurn = $derived(
    !!view && (view.game.status === 'active' || view.game.status === 'open') && view.game.toMove === view.seat,
  );
  // At most one chat message per turn: "already wrote this turn" is derived from the
  // message list against the move-driven turn start (lastActivityUnix), so it resets when
  // the turn advances. canSend hides the field once the limit is reached (and always on
  // the opponent's turn).
  const canSend = $derived(canSendChat(isMyTurn, view ? sentThisTurn(messages, myId, view.game.lastActivityUnix) : 0));
  // While the auto-match game still has no opponent, chat and nudge are both disabled.
  const waiting = $derived(!!view && view.game.status === 'open');
  const nudgeCooldownSecs = 3600;
  // The nudge is one-per-hour-per-game and clears once the player chats (engagement); the
  // backend stays authoritative, so a move-based reset is left to it.
  const nudgeOnCooldown = $derived.by(() => {
    void tick;
    let lastNudge = 0;
    let lastChat = 0;
    for (const m of messages) {
      if (m.senderId !== myId) continue;
      if (m.kind === 'nudge') lastNudge = Math.max(lastNudge, m.createdAtUnix);
      else lastChat = Math.max(lastChat, m.createdAtUnix);
    }
    if (lastNudge === 0 || Date.now() / 1000 - lastNudge >= nudgeCooldownSecs) return false;
    return lastChat <= lastNudge;
  });

  async function refresh() {
    try {
      messages = await gateway.chatList(id);
      clearChatUnread(id);
    } catch {
      /* best-effort */
    }
  }
  // loadState (re)reads the game state that drives the chat/nudge toggle and the per-turn
  // limit. The initial load surfaces an error; live reloads are best-effort.
  async function loadState(initial = false) {
    try {
      view = await gateway.gameState(id, false);
    } catch (e) {
      if (initial) handleError(e);
    }
  }
  onMount(async () => {
    await loadState(true);
    await refresh();
  });

  // Live: refresh the message list on a chat / nudge for this game, and reload the state on
  // a turn / game-state change so the chat/nudge toggle and the per-turn limit (keyed on the
  // turn start) follow the live game.
  $effect(() => {
    const e = app.lastEvent;
    if (!e) return;
    if ((e.kind === 'chat_message' && e.message.gameId === id) || (e.kind === 'nudge' && e.gameId === id)) {
      void refresh();
    }
    if (
      (e.kind === 'your_turn' || e.kind === 'opponent_moved' || e.kind === 'game_over' || e.kind === 'opponent_joined') &&
      e.gameId === id
    ) {
      void loadState();
    }
  });
  // Re-evaluate the nudge cooldown on a timer so the control re-enables on time.
  $effect(() => {
    const h = setInterval(() => (tick += 1), 20000);
    return () => clearInterval(h);
  });

  async function sendChat(text: string) {
    busy = true;
    try {
      messages = [...messages, await gateway.chatPost(id, text)];
    } catch (e) {
      handleError(e);
    } finally {
      busy = false;
    }
  }
  async function nudge() {
    busy = true;
    try {
      messages = [...messages, await gateway.nudge(id)];
    } catch (e) {
      handleError(e);
    } finally {
      busy = false;
    }
  }
</script>

<Chat {messages} {myId} {busy} myTurn={isMyTurn} {canSend} {waiting} {nudgeOnCooldown} onsend={sendChat} onnudge={nudge} />