<template>
    <div id="app">
        <HelloWorld />
        <Sockets/>
        <div id="game">
            <label for="messages"> Choose a message:</label>
            <select v-model="message" name="message" id="messages">
                <option value="WAITING">J'attends</option>
                <option value="READY">Prêt à jouer !</option>
                <option value="BET">Pari plus haut</option>
                <option value="MENTEUR">Menteur !</option>
            </select>
            <button v-on:click="sendMessage(message)">Envoyer</button>
        </div>
    </div>
</template>

<script>

    import Vue from 'vue'
    import 'es6-promise/auto' // Needed for Promise polyfill
    import VueSocketIO from 'vue-socket.io'
    import Vuex, {mapGetters, mapMutations} from 'vuex';
    import HelloWorld from "./components/HelloWorld";
    import Sockets from "./Sockets";
    import {store} from './vuex-store'

    Vue.use(Vuex);

    Vue.use(new VueSocketIO({
        debug: true,
        connection: 'http://localhost:9042',
        vuex: {
            store,
            actionPrefix: 'SOCKET_',
            mutationPrefix: 'SOCKET_'
        },
        options: {path: "/socket.io/"} //Optional options
    }));


    export default {
        name: "App",
        store: store,
        components: {
            HelloWorld,
            Sockets
        },
        data: function () {
            return {
                message: "WAITING"
            }
        },
        computed: {
            ...mapGetters(['isConnected', 'name', 'socketMessage'])
        },
        methods: {
            sendMessage: function (message) {
                console.log("User wants to send", message);
                this.$socket.emit("message", message);
            },
            ...mapMutations(['setName']),
            // ...mapActions(['setNumberToRemoteValue']),
        }
    };

</script>

<style>
    #app {
        font-family: Avenir, Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-align: center;
        color: #2c3e50;
        margin-top: 60px;
    }

    #game {
        margin-top: 20px;
    }
</style>
