<template>
    <div id="app">
<!--        <div class="score">{{ scoreYellow }}</div>-->
        <MainPage />
<!--        <div class="score">{{ scoreBlue }}</div>-->
    </div>
</template>

<script>

    import MainPage from "@/components/MainPage";
    export default {
        name: 'app',
        components: {
            MainPage
        },
        data() {
            return {
                scoreYellow: 0,
                scoreBlue: 0
            }
        },
        // methods: {
        //     update(winner) {
        //         if (winner === 1) {
        //             this.scoreYellow++;
        //             if (this.scoreYellow === 10) {
        //                 alert("Yellow WINNER");
        //                 this.scoreBlue = 0;
        //                 this.scoreYellow = 0;
        //             }
        //         }
        //         else {
        //             this.scoreBlue++;
        //             if (this.scoreBlue === 10) {
        //                 alert("BLUE WINNER");
        //                 this.scoreBlue = 0;
        //                 this.scoreYellow = 0;
        //             }
        //         }
        //     }
        // }
    }
</script>

<style>
    * {
        padding: 0;
        margin: 0;
    }
    body {
        background-color: #cccccc;
    }
    #app {
        display: flex;
        justify-content: space-around;
        align-items: center;
    }
    /*.score {*/
    /*    font-size: 25px;*/
    /*}*/

</style>