'use strict';
/*
console.log(document.querySelector('.message')); //p<class-"massage".....>
console.log(document.querySelector('.message').textContent);//Start guessing...
//textContent in tag

//What is the Dom (Document Object Model) 
//<p class="message">Start guessing...</p>
document.querySelector('.message').textContent ='Correct!!'; //immediately change textContent
document.querySelector('.number').textContent =13;
document.querySelector('.score').textContent=20;

document.querySelector('.guess').value;//input.guess의 value값을 보여줌
document.querySelector('.guess').value=23;
*/

const maxNum=30
let secretNumber = Math.trunc(Math.random()*maxNum)+1;
document.querySelector('.between').textContent=`(Between 1 and ${maxNum})`
//Math.random : 0 ~ 1 까지 random 숫자
//Math.trunc(Math.random()*20 :0~19까지의 정수 (20 포함xx)
//Math.trunc(Math.random()*20)+1 : 1~20
let score=20;
let highScore=0;
const displayMessage = function(message){
    document.querySelector('.message').textContent =message;
}
document.querySelector('.check').addEventListener("click",function(){
    //event가 발생하면 실행!! document 가 실행된다고 function이 실행되는것은 아님
    //숫자를 비교하기 위해 number로 !!
    const guess =Number(document.querySelector('.guess').value);
  
    console.log(guess)

    //when there is no input 
    if(!guess){//input.guess의 의 value값이 없을때 
        //guess의 들어있는 값은 zero이여서 guess = false
        //!guess 는 !false > true
      //  document.querySelector('.message').textContent //="No number!";
      displayMessage('No number!!');
        //if의 ()안에 있는 문장이 true이면 실행 
        
        // when player wins
    }else if(guess === secretNumber){ //same number
       // document.querySelector('.message').textContent //="Correct!";
       displayMessage('No number!!');
        document.querySelector('.number').textContent = secretNumber;
//css 스타일 변경 
//html의 변경할 부분.style.style property = ''(String)
        document.querySelector('body').style.backgroundColor='#ECD662';

        document.querySelector('.number').style.width='30rem';
        if(score>highScore){
            highScore=score;
            document.querySelector('.highscore').textContent = highScore;
        }
        //when guess is too high
        /* Duplicate code 
    }else if(guess>secretNumber){
        if(score>1){
            document.querySelector('.message').textContent
        ='too high!!'
        score --;
        document.querySelector('.score').textContent =score;
        }else{
            document.querySelector('.message').textContent
            ='you lost game!!'
            score --;
            document.querySelector('.score').textContent =score;
        }
        
        //when guess is too low
    }else if(guess<secretNumber){
        if(score>1){
        document.querySelector('.message').textContent
        ='too low!!'
        score --;
        document.querySelector('.score').textContent =score;
        }else {
            document.querySelector('.message').textContent
            ='you lost game!!'
            score --;
            document.querySelector('.score').textContent =score;
        }

    }
    */
   //Refactoring
   //when guess is wrong
} else if(guess !== secretNumber){
    if(score>1){
    //    document.querySelector('.message').textContent
 //   =guess > secretNumber ? 'too high!!' : 'too low!!';

 displayMessage(guess > secretNumber ? 'too high!!' : 'too low!!')
    score --;
    document.querySelector('.score').textContent =score;
    }else{
        document.querySelector('.message').textContent
        ='you lost game!!'
        score --;
        document.querySelector('.score').textContent =score;
    }//end else
}//end  else if(guess !== secretNumber)

})
document.querySelector('.again').addEventListener("click",function(){

    score = 20; //let score =20; 다시 생성할 필용 없음
    secretNumber = Math.trunc(Math.random()*20)+1; // random number다시 생성
   // document.querySelector('.message').textContent //="Start guessing..";
   displayMessage("Start guessing..")
    document.querySelector('.score').textContent =score;
    document.querySelector('.number').textContent='?'//다시 안보이게
    //input이므로 value
    document.querySelector('.guess').value='';//empty value setting
    document.querySelector('body').style.backgroundColor='#222';
    document.querySelector('.number').style.width='15rem';
})