<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>


<div id="app">
    <h1>Rock Paper Scissor Game</h1>
    <div class="score-wrapper">
        <div class="tavle"> Computer: {{ computerScore }}</div>
            <br>
        <div class="tavle"> User: {{ userScore }}</div>
    </div>


    <br>
    <br>
<div class="choice">
    <div>
        Computer weapon: {{ computerWeapon }}
        </div>
            <br>
        <div> User weapon: {{ userWeapon }}</div>
</div>
    <br>
    <!-- <select v-model="userWeapon">
        <option value="scissor">Scissor</option>
        <option value="rock">Rock</option>
        <option value="paper">Paper</option>
    </select>-->
    <br>
    <div>
        <button :class="{active : userWeapon === 'rock'}" @click="setUserWeapon('rock')">Rock</button>
        <button :class="{active : userWeapon === 'scissor'}" @click="setUserWeapon('scissor')">Scissor</button>
        <button :class="{active : userWeapon === 'paper'}" @click="setUserWeapon('paper')">Paper</button>
    </div>
    <br>
    <button class="play"
    @click="declareWinner">
        Spil
</button>
    <br>
    <br>
    <div class="go">
    {{ log }}
    </div>

</div>

<style>
    button {
        width: 100px;
        cursor: pointer;
        padding: 2px;
        background-color: navy;
        color: white;
    }
    .active{
        background-color: orange;
    }
    .play {
        width: 150px;
        height: 70px;
        font-size: 20px;
        cursor: pointer;
        padding: 2px;
        background-color: navy;
        color: white;
        border-radius: 10px;
        box-shadow: 0px 10px 10px #888888;
    }
    .tavle{
        width: 150px;
        color:white;
        background-color: #999999;
        padding: 2px;
        text-align: center;
    }
    .score-wrapper{
        display: flex;
        width: 356px;
        justify-content: space-between;

    }
    .choice{
        background-color: rgb(76, 219, 83);
        color: white;
        width: 350px;
        padding: 5px;
    }
    .go {
        background-color: #666666;
        width: 350px;
        color: white;
        padding:10px;
    }
</style>

<script>
    var app = new Vue({
    el: "#app",
    data () {
      return {
        userScore: 0,
        computerScore: 0,
        computerWeapon: null,
        userWeapon: null,
        log: 'Tryk på "Spil" for at spille'
      };
    },
    methods: {
        computerDecision: function () {
            var number = Math.floor(Math.random() * 3);
            switch(number){
                case 0:
                    this.computerWeapon = "rock";
                    break
                case 1:
                    this.computerWeapon =  "scissor";
                    break
                case 2:
                    this.computerWeapon =  "paper";
                    break
            }
        },
        setUserWeapon: function (weapon){
            this.userWeapon = weapon
        },
        declareWinner: function () {
            this.computerDecision()
            console.log(this.computerWeapon)
            if (this.userWeapon === this.computerWeapon){
                this.log = "Tiebreak!"
            } else if (this.userWeapon==="rock" && this.computerWeapon === "scissor" ||
                this.userWeapon === "paper" && this.computerWeapon==="rock" || this.userWeapon==="scissor" && this.computerWeapon === "paper") {
                this.log = "User won!"
                this.userScore++;
            }
            else if (!this.userWeapon){
                this.log = "Fejl, husk at vælge dit Våben!"
            }
            else {
                this.log = "Computer won!"
                this.computerScore++;
            }
        }
    }
});
</script>