Dice 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 gameSeed = getGameSeed(input);
      const raw = seedrandom(gameSeed)();
      const calculated = Math.floor(raw * 10000).toString();
      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",
        };
      })();

      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 className="verifier-result-card">
              <div className="verifier-result-card-label">Raw value</div>
              <div className="verifier-result-card-value">{String(raw)}</div>
            </div>
          </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>
        </div>
        <button
          type="submit"
          className="verifier-button"
        >
          Verify
        </button>
      </form>
      {error && (
        <div className="verifier-error">{error}</div>
      )}
      {result}
    </main>
  );
}