Mines Verification

import { useEffect, useState, type ChangeEvent, type FormEvent } from "react";
import "./styles.css";
import seedrandom from "seedrandom";
import CryptoJS from "crypto-js";
import { initialInput } from "./verifier-initial-input";

type Input = typeof initialInput;

const sha256 = async (value: string) =>
  CryptoJS.SHA256(value).toString(CryptoJS.enc.Hex);

const getGameSeed = (row: Input) =>
  `${row.serverSeed}:${row.clientSeed}:${row.nonce}`;

export default function App() {
  const [input, setInput] = useState<Input>({ ...initialInput });
  const [result, setResult] = useState<React.ReactNode>(null);
  const [error, setError] = useState<string | null>(null);

  const verify = async () => {
    try {
      setError(null);
      if (typeof seedrandom !== "function") {
        throw new Error("seedrandom failed to load");
      }
      const size = Number(input.size);
      const mines = Number(input.mines);
      const gameSeed = getGameSeed(input);
      const grid = Array.from({ length: size }, () => Array(size).fill(0));
      const possibilities = Array.from({ length: size ** 2 }, (_, index) => index);
      const rng = seedrandom(gameSeed);
      const steps: unknown[] = [];

      for (let index = 0; index < mines; index++) {
        const raw = rng();
        const possibilityIndex = Math.floor(raw * possibilities.length);
        const tileId = possibilities[possibilityIndex];
        const x = tileId % size;
        const y = Math.floor(tileId / size);
        grid[y][x] = 1;
        possibilities.splice(possibilityIndex, 1);
        steps.push({ title: "Mine", raw, x, y, cellNumber: tileId + 1 });
      }

      const calculated = JSON.stringify(grid);
      const expectedHash = await sha256(input.serverSeed);
      const hashBanner = (() => {
        if (!input.serverSeedHash) {
          return {
            message: "Server seed hash not provided",
            className: "verifier-result-banner",
          };
        }
        if (expectedHash === input.serverSeedHash) {
          return {
            message: "Server seed hash matches",
            className: "verifier-result-banner verifier-result-banner-success",
          };
        }
        return {
          message: "Server seed hash does not match",
          className: "verifier-result-banner verifier-result-banner-error",
        };
      })();
      const metadata = { size, mines, grid };

      setResult(
        <section className="verifier-result">
          <div className={hashBanner.className}>{hashBanner.message}</div>
          <div className="verifier-result-grid">
            <div className="verifier-result-card">
              <div className="verifier-result-card-label">Result</div>
              <div className="verifier-result-card-value">{calculated}</div>
            </div>
            <div className="verifier-result-card">
              <div className="verifier-result-card-label">Game seed</div>
              <div className="verifier-result-card-value">{gameSeed}</div>
            </div>
            <div className="verifier-result-card">
              <div className="verifier-result-card-label">Expected server seed hash</div>
              <div className="verifier-result-card-value">{expectedHash}</div>
            </div>
            <div className="verifier-result-card">
              <div className="verifier-result-card-label">Provided server seed hash</div>
              <div className="verifier-result-card-value">
                {input.serverSeedHash || "Not provided"}
              </div>
            </div>
          </div>
          <div className="verifier-result-card">
            <div className="verifier-result-card-label">Steps</div>
            <pre className="verifier-pre">
              {JSON.stringify(steps, null, 2)}
            </pre>
          </div>
          <div className="verifier-result-card">
            <div className="verifier-result-card-label">Metadata</div>
            <pre className="verifier-pre">
              {JSON.stringify(metadata, null, 2)}
            </pre>
          </div>
        </section>,
      );
    } catch (verifyError) {
      setError(verifyError instanceof Error ? verifyError.message : String(verifyError));
      setResult(null);
    }
  };

  useEffect(() => {
    void verify();
  }, []);

  const onSubmit = (event: FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    void verify();
  };

  return (
    <main className="verifier">
      <form
        className="verifier-form"
        onSubmit={onSubmit}
      >
        <div className="verifier-form-grid">
          <label className="verifier-field">
            <span className="verifier-label">Server seed</span>
            <input
              className="verifier-input"
              name="serverSeed"
              value={input.serverSeed}
              onChange={(event: ChangeEvent<HTMLInputElement>) => {
                setInput((current) => ({ ...current, serverSeed: event.target.value }));
              }}
            />
          </label>
          <label className="verifier-field">
            <span className="verifier-label">Server seed hash</span>
            <input
              className="verifier-input"
              name="serverSeedHash"
              value={input.serverSeedHash}
              onChange={(event: ChangeEvent<HTMLInputElement>) => {
                setInput((current) => ({ ...current, serverSeedHash: event.target.value }));
              }}
            />
          </label>
          <label className="verifier-field">
            <span className="verifier-label">Client seed</span>
            <input
              className="verifier-input"
              name="clientSeed"
              value={input.clientSeed}
              onChange={(event: ChangeEvent<HTMLInputElement>) => {
                setInput((current) => ({ ...current, clientSeed: event.target.value }));
              }}
            />
          </label>
          <label className="verifier-field">
            <span className="verifier-label">Nonce</span>
            <input
              className="verifier-input"
              name="nonce"
              type="number"
              min={0}
              value={input.nonce}
              onChange={(event: ChangeEvent<HTMLInputElement>) => {
                setInput((current) => ({ ...current, nonce: event.target.value }));
              }}
            />
          </label>
          <label className="verifier-field">
            <span className="verifier-label">Grid size</span>
            <input
              className="verifier-input"
              name="size"
              type="number"
              min={3}
              max={10}
              step={1}
              value={input.size}
              onChange={(event: ChangeEvent<HTMLInputElement>) => {
                setInput((current) => ({ ...current, size: event.target.value }));
              }}
            />
          </label>
          <label className="verifier-field">
            <span className="verifier-label">Mines</span>
            <input
              className="verifier-input"
              name="mines"
              type="number"
              min={1}
              max={25}
              step={1}
              value={input.mines}
              onChange={(event: ChangeEvent<HTMLInputElement>) => {
                setInput((current) => ({ ...current, mines: event.target.value }));
              }}
            />
          </label>
        </div>
        <button
          type="submit"
          className="verifier-button"
        >
          Verify
        </button>
      </form>
      {error && (
        <div className="verifier-error">{error}</div>
      )}
      {result}
    </main>
  );
}