Blackjack-Verifizierung

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 cards = Number(input.cards);
      const gameSeed = getGameSeed(input);
      const ranks = [2, 3, 4, 5, 6, 7, 8, 9, 10, "J", "Q", "K", "A"];
      const suits = ["(Clubs)", "(Diamonds)", "(Hearts)", "(Spades)"];
      const steps: unknown[] = [];

      for (let index = 1; index <= cards; index++) {
        const cardSeed = `${gameSeed}:${index}`;
        const raw = seedrandom(cardSeed)();
        const id = Math.round(raw * 51);
        const card = `${ranks[id % ranks.length]} ${suits[Math.floor(id / ranks.length)]}`;
        steps.push({ title: "Card", seed: cardSeed, raw, card });
      }

      const calculated = (steps as { card: string }[]).map((step) => step.card).join(", ");
      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 = { cards };

      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">Cards</span>
            <input
              className="verifier-input"
              name="cards"
              type="number"
              min={1}
              max={10}
              step={1}
              value={input.cards}
              onChange={(event: ChangeEvent<HTMLInputElement>) => {
                setInput((current) => ({ ...current, cards: event.target.value }));
              }}
            />
          </label>
        </div>
        <button
          type="submit"
          className="verifier-button"
        >
          Verify
        </button>
      </form>
      {error && (
        <div className="verifier-error">{error}</div>
      )}
      {result}
    </main>
  );
}