<template>
    <div class="place">
        <div class="player">
            <div class="health">{{ hp1 }} hp</div>
            <div class="block"></div>
        </div>
        <div class="player">
            <div class="health">{{ hp2 }} hp</div>
            <div class="block"></div>
        </div>
        <button v-on:click="fight">Fight</button>
    </div>
</template>

<script>
    export default {
        name: "MainPage",
        data() {
            return {
                hp1: 100,
                hp2: 100
            }
        },
        methods: {
            fight() {
                if ((this.hp1 -= Math.floor(Math.random() * (26 - 5)) + 5) <= 0) {
                    alert("Blue Win!");
                    // this.hp1 = 100;
                    // this.hp2 = 100;
                    // this.$emit('updateScore', 2);
                    return;
                }
                if ((this.hp2 -= Math.floor(Math.random() * (26 - 5)) + 5) <= 0) {
                    alert("Yellow Win!");
                    // this.hp1 = 100;
                    // this.hp2 = 100;
                    // this.$emit('updateScore', 1);
                }
            },
        }
    }
</script>

<style scoped>
    button {
        width: 60%;
        height: 35px;
    }
    .place {
        display: flex;
        flex-wrap: wrap;
        width: 15%;
        justify-content: center;
        align-items: center;
    }
    .player {
        background-color: yellow;
        color: darkorange;
        padding: 10px;
        margin: 8px;
        font-size: 23px;
        border: 1px solid black;
    }
    .player:nth-child(2) {
        background-color: lightblue;
    }
</style>