gomoku/src/view/button-renderer.tsx

import { Html } from '@elysiajs/html';
import { PlayerConnection } from '../player-connection';
import { GameServer } from '../game-server';

export function broadcastButtons(server: GameServer) {
  server.connections.forEach((conn: PlayerConnection) =>
    broadcastButtonsToPlayer(server, conn),
  );
}

export function broadcastButtonsToPlayer(
  server: GameServer,
  conn: PlayerConnection,
) {
  const buttons: JSX.Element[] = [];
  let title: string | undefined;

  if (server.gomoku.status == 'playing' && server.getPlayerColor(conn)) {
    if (server.takebackRequesterId) {
      if (server.takebackRequesterId === conn.id) {
        title = 'You requested a takeback';
        buttons.push(
          <button
            id="cancel-takeback-request-button"
            class="decline-button"
            ws-send="click"
          >
            <svg class="icon" alt="Cancel">
              <use href="/icons/decline.svg"></use>
            </svg>
          </button>,
        );
      } else {
        title = 'Your opponent requests a takeback';
        buttons.push(
          <button
            id="accept-takeback-button"
            class="accept-button"
            ws-send="click"
          >
            <svg class="icon" alt="Accept">
              <use href="/icons/accept.svg"></use>
            </svg>
          </button>,
        );
        buttons.push(
          <button
            id="decline-takeback-button"
            class="decline-button"
            ws-send="click"
          >
            <svg class="icon" alt="Decline">
              <use href="/icons/decline.svg"></use>
            </svg>
          </button>,
        );
      }
    } else if (server.drawRequesterId) {
      if (server.drawRequesterId === conn.id) {
        title = 'You requested a draw';
        buttons.push(
          <button
            id="cancel-draw-request-button"
            class="decline-button"
            ws-send="click"
          >
            <svg class="icon" alt="Cancel">
              <use href="/icons/decline.svg"></use>
            </svg>
          </button>,
        );
      } else {
        title = 'Your opponent offers a draw';
        buttons.push(
          <button id="accept-draw-button" class="accept-button" ws-send="click">
            <svg class="icon" alt="Accept">
              <use href="/icons/accept.svg"></use>
            </svg>
          </button>,
        );
        buttons.push(
          <button
            id="decline-draw-button"
            class="decline-button"
            ws-send="click"
          >
            <svg class="icon" alt="Decline">
              <use href="/icons/decline.svg"></use>
            </svg>
          </button>,
        );
      }
    } else {
      buttons.push(
        <button id="resign-button" ws-send="click">
          <svg class="icon" alt="Resign">
            <use href="/icons/resign.svg"></use>
          </svg>
        </button>,
      );
      buttons.push(
        <button id="takeback-button" ws-send="click">
          <svg class="icon" alt="Takeback">
            <use href="/icons/undo.svg"></use>
          </svg>
        </button>,
      );
      buttons.push(
        <button id="draw-button" ws-send="click">
          <svg class="icon" alt="Draw">
            <use href="/icons/draw.svg"></use>
          </svg>
        </button>,
      );
    }
  } else if (server.gomoku.status === 'finished') {
    if (server.rematchRequesterId) {
      if (server.rematchRequesterId === conn.id) {
        title = 'You requested a rematch';
        buttons.push(
          <button
            id="cancel-rematch-request-button"
            class="decline-button"
            ws-send="click"
          >
            <svg class="icon" alt="Cancel">
              <use href="/icons/decline.svg"></use>
            </svg>
          </button>,
        );
      } else {
        title = 'Your opponent requests a rematch';
        buttons.push(
          <button
            id="accept-rematch-button"
            class="accept-button"
            ws-send="click"
          >
            <svg class="icon" alt="Accept">
              <use href="/icons/accept.svg"></use>
            </svg>
          </button>,
        );
        buttons.push(
          <button
            id="decline-rematch-button"
            class="decline-button"
            ws-send="click"
          >
            <svg class="icon" alt="Decline">
              <use href="/icons/decline.svg"></use>
            </svg>
          </button>,
        );
      }
    } else {
      buttons.push(
        <button id="rematch-button" ws-send="click">
          <svg class="icon" alt="Rematch">
            <use href="/icons/rotate-right.svg"></use>
          </svg>
        </button>,
      );
    }
  } else if (server.gomoku.status === 'waiting') {
    buttons.push(
      <button id="copy-link-button" onclick="copyGameLink()">
        <svg class="icon" alt="Copy">
          <use href="/icons/clipboard-copy.svg"></use>
        </svg>
        <span id="copy-link-text">Copy Link</span>
      </button>,
    );
  }

  conn.ws.send(
    <div id="button-box">
      <div id="button-box-title">{title}</div>
      <div id="button-box-buttons">{buttons}</div>
    </div>,
  );
  console.log(`Sent buttons for game ${server.id} to player ${conn.id}`);
}