import { useState } from "react";

// component ini akan refresh setiap kali state berubah
// selepas refreh, value state maintain
const GuessGame = () => {
    let no = Math.floor(Math.random() * 100);
    console.log(no);
    const [answer, setAnswer]    = useState(no); // jawapan sebenar
    const [guess_no, setGuessNo] = useState(0); // tekaan
    const [message, setMessage]  = useState(''); // message
    const [bil_tekaan, setBilTekaan]  = useState(0); // message

    // baca value yg player key-in
    const getNumber = (e) => {
        let guess_no = e.target.value;
        setGuessNo(guess_no);
    }

    // run bila klik 'go' btn
    const checkAnswer = () => {
        if (answer == guess_no) {
            setMessage(`Berjaya selepas ${bil_tekaan} cubaan`);
        } else if (answer > guess_no) {
            setBilTekaan(bil_tekaan + 1);
            setMessage('Teka lebih tinggi');
        } else {
            setBilTekaan(bil_tekaan + 1);
            setMessage('Teka lebih rendah');
        }
    }

    return ( 
        <>
            {/* Answer : {answer} */}
            <input type="text" onBlur={getNumber} />
            <button onClick={checkAnswer}>Go</button>
            <br />
            Message: { message }
        </>
     );
}
 
export default GuessGame;