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

/**
 * @file Outdated schema modal component warning about incompatible save data.
 * @copyright nhcarrigan
 * @license Naomi's Public License
 * @author Naomi Carrigan
 */
import { type JSX, useState } from "react";
import { useGame } from "../../context/gameContext.js";

interface OutdatedSchemaModalProperties {
  readonly onDismiss: ()=> void;
}

/**
 * Renders the outdated schema modal prompting the user to reset or continue.
 * @param props - The modal properties.
 * @param props.onDismiss - Callback to dismiss the modal without resetting.
 * @returns The JSX element.
 */
const OutdatedSchemaModal = ({
  onDismiss,
}: OutdatedSchemaModalProperties): JSX.Element => {
  const { resetProgress } = useGame();
  const [ isResetting, setIsResetting ] = useState(false);

  async function handleReset(): Promise<void> {
    setIsResetting(true);
    await resetProgress();
    setIsResetting(false);
  }

  function handleResetClick(): void {
    void handleReset();
  }

  return (
    <div className="modal-overlay">
      <div className="modal offline-modal">
        <h2>{"⚠️ Outdated Save Data"}</h2>
        <p>
          {"Your save data is from an older version of Elysium and may cause"
            + " bugs or unexpected behaviour. Cloud saves are "}
          <strong>{"disabled"}</strong>
          {" until you reset your progress."}
        </p>
        <p>{"Resetting will start you fresh — all progress will be lost."}</p>
        <div className="outdated-modal-actions">
          <button
            className="outdated-modal-reset-button"
            disabled={isResetting}
            onClick={handleResetClick}
            type="button"
          >
            {isResetting
              ? "Resetting…"
              : "Reset Progress"}
          </button>
          <button
            className="modal-close-button"
            onClick={onDismiss}
            type="button"
          >
            {"Proceed with Bugs"}
          </button>
        </div>
      </div>
    </div>
  );
};

export { OutdatedSchemaModal };