elysium/apps/web/src/components/game/offlineModal.tsx

/**
 * @file Offline modal component showing gold earned while away.
 * @copyright nhcarrigan
 * @license Naomi's Public License
 * @author Naomi Carrigan
 */
import { useGame } from "../../context/gameContext.js";
import type { JSX } from "react";

/**
 * Renders the offline earnings modal if the player earned resources offline.
 * @returns The JSX element or null if no offline earnings.
 */
const OfflineModal = (): JSX.Element | null => {
  const { offlineGold, offlineEssence, dismissOfflineGold, formatNumber }
    = useGame();

  if (offlineGold <= 0 && offlineEssence <= 0) {
    return null;
  }

  return (
    <div className="modal-overlay">
      <div className="modal">
        <h2>{"Welcome back!"}</h2>
        <p>
          {"Your adventurers kept working whilst you were away and earned:"}
        </p>
        {offlineGold > 0
          && <p>
            <strong>
              {"🪙 "}
              {formatNumber(offlineGold)}
              {" gold"}
            </strong>
          </p>
        }
        {offlineEssence > 0
          && <p>
            <strong>
              {"✨ "}
              {formatNumber(offlineEssence)}
              {" essence"}
            </strong>
          </p>
        }
        <p className="modal-note">
          {"Offline progress is calculated up to 8 hours."}
        </p>
        <button
          className="modal-close-button"
          onClick={dismissOfflineGold}
          type="button"
        >
          {"Collect!"}
        </button>
      </div>
    </div>
  );
};

export { OfflineModal };