import * as React from "react";
import "./styles.css";
import { PasswordForm } from "./PasswordForm";

export default function App() {
  const [password, setPassword] = React.useState("");
  return (
    <div className="App">
      <p>password</p>
      <PasswordForm
        password={password}
        onChange={(e) => setPassword(e.target.value)}
      />
      <p>{password.length}characters</p>
    </div>
  );
}

import * as React from "react";
import "./styles.css";
import { Guess } from "./Guess";
import { random } from "./random";

const max = 50;
const initialCount = 5;

export default function App() {
  const [prediction, setPrediction] = React.useState(0);
  const [answer, setAnswer] = React.useState(random(max));
  const [message, setMessage] = React.useState("");
  const [count, setCount] = React.useState(initialCount);
  const [isWinner, setIsWinner] = React.useState<boolean | undefined>(
    undefined
  );

  const judge = (num: number) => {
    if (count === 0 || isWinner !== undefined) {
      setMessage(
        `You already ${
          isWinner ? "won" : "lost"
        }. To replay, please click the "replay" button below.`
      );
      return;
    }

    setCount(count - 1);

    if (num === answer) {
      setMessage("correct!");
      setIsWinner(true);
    } else if (count === 1) {
      setMessage(`You lose! The answer is ${answer}`);
      setIsWinner(false);
    } else if (num > answer) {
      setMessage(`The answer is less than ${num}`);
    } else if (num < answer) {
      setMessage(`The answer is more than ${num}`);
    }
  };

  const replay = () => {
    setAnswer(random(max));
    setCount(initialCount);
    setMessage("");
    setIsWinner(undefined);
  };

  return (
    <div className="App">
      <Guess
        prediction={prediction}
        onSubmit={(value) => {
          setPrediction(value);
          judge(value);
        }}
        max={max}
        min={0}
      />
      <p hidden={message === ''}>{message}</p>
      <p>You can challenge predict {count} times.</p>
      <button children={'replay'} onClick={replay} />
    </div>
  );
}