Untitled

<html>
<head>
   <title>21 lucifers</title>
</head>
<body>
    <h1> The Lucifer Game </h1>
    <div id="setup">

        How many Lucifers do you want?<br>
        <input type="text" id="numberOfLucifers"><br>
        Player 1 name <br>
        <input type="text" id="player1Field"><br>
        Player 2 name <br>
        <input type="text" id="player2Field"><br>
        <button id="start" >start</button>
    </div>
    <div id="playground" style="visibility: hidden;">
        <h4>aantal lucifers:</h4>
        <h1 id="numberOfLucifersLeftHeader"></h1>
        <hr>
        <h4 id="turnText">... is aan de beurt</h4>
        <input type="text" id="amountToTakeField">
            <button id="takeButton" >Pak!</button>
    </div>
    <script>

    var numberOfLucifers;
    var player1;
    var player2;
    var playerTurn = 1;

    document.getElementById("takeButton").onclick = playRound;
    document.getElementById("start").onclick = setup;
    document.getElementById("amountToTakeField").onkeyup = disableButtonOnBadInput;

    function isNumberBetween1and3(value){
        var isCorrect = true;
        if(isPositiveNumber(value) == false){
            isCorrect = false;
        }else if(value > 3){
            isCorrect = false;
        }else if(value < 1){
            isCorrect = false;
        }
        return isCorrect;
    }

    function amountInField(){
        var amountField =  document.getElementById("amountToTakeField");
        var result = Math.floor(Number( amountField.value ));
        return result;
    }

    function takeLucifers(amount) {
        var numberLeft = numberOfLucifers - amount;

        return numberLeft;
    }

    function writeNumberOfLucifers(amount){
        document.getElementById("numberOfLucifersLeftHeader").innerHTML = amount;
    }

    function toggleTurn(){
        playerTurn *= -1;
    }

    function activePlayer(){
        if (playerTurn > 0){
             return player1;
        }else if (playerTurn < 0){
             return player2;
        }
    }

    function showPlayground(){
        document.getElementById("setup").style.visibility = "hidden";
        document.getElementById("playground").style.visibility = "visible";
    }

    function showSetupScreen(){
        document.getElementById("setup").style.visibility = "visible";
        document.getElementById("playground").style.visibility = "hidden";
    }

    function writeActivePlayerName(){
        document.getElementById("turnText").innerHTML = "It's " + activePlayer() + "'s turn.";
    }

    function isPositiveNumber(value){
        var isValidNumber = true;
        if(isNaN(value)){
            isValidNumber = false;
        }else if(value < 1){
            isValidNumber = false;
        }
        return isValidNumber;
    }

    function isValidString(input){
        var isValid = true;
        if(!input){
            isValid = false;
        }
        return isValid;
    }

    function showWinner(){
        alert(activePlayer() + ' has won!');
    }

    function gameEnded(lucifersLeft){
        var gameEnded = false;
        if(lucifersLeft == 0){
            gameEnded = true;
        }
        return gameEnded;
    }

    function playerTookTooManyLuficers(lucifersLeft){
        var isTooMuch = false;
        if(lucifersLeft < 0){
            isTooMuch = true;
        }
        return isTooMuch;
    }

    function showPlayerTookToManyError(){
        alert(activePlayer() + ' took too many. Try Again!');
    }

    function isValidSetupFormInput(amount, name1, name2){
        var isValidForm = true;
        if(isPositiveNumber(amount) == false){
            isValidForm = false;
        }
        if(isValidString(name1) == false){
            isValidForm = false;
        }
        if(isValidString(name2) == false){
            isValidForm = false;
        }
        return isValidForm;
    }

    function showSetupFormErrors(value, name1, name2){
        if(isPositiveNumber(value) == false){
            alert('Not a valid number of lucifers');
        }
        if(isValidString(name1) == false){
            alert('Please enter player 1');
        }
        if(isValidString(name2) == false){
            alert('Please enter player 2');
        }
    }


    function showCheatingError(){
        alert('Only enter 1 , 2 or 3!');
    }


    function disableButtonOnBadInput() {
        if(isNumberBetween1and3(amountInField()) == false){
            document.getElementById("takeButton").disabled = true;
        }else{
            document.getElementById("takeButton").disabled = false;
        }
    }


    function setup(){
        numberOfLucifers = document.getElementById("numberOfLucifers").value;
        player1 = document.getElementById("player1Field").value;
        player2 = document.getElementById("player2Field").value;

        if(isValidSetupFormInput(numberOfLucifers, player1, player2) ){
            showPlayground();
            writeNumberOfLucifers(numberOfLucifers);
            writeActivePlayerName();
        }else{
            showSetupFormErrors(numberOfLucifers, player1, player2);
        }
    }


    function playRound(){
        var input = amountInField();
        if(isNumberBetween1and3(input)){
            var lucifersLeft = takeLucifers(input);
            if(gameEnded(lucifersLeft)){
                showWinner();
                showSetupScreen();
            }else if(playerTookTooManyLuficers(lucifersLeft)){
                showPlayerTookToManyError();
            }else{
                numberOfLucifers = lucifersLeft;
                writeNumberOfLucifers(numberOfLucifers);
                toggleTurn();
                writeActivePlayerName();
            }
        }else{
            showCheatingError();
        }
    }

  </script>
</body>
</html>