<template>
  <div class="add container">
    <Alert v-if="alert" v-bind:message="alert" />
    <h1 class="page-header">Join game</h1>
    <form v-on:submit="CreateGame">
        <div class="well">
                <label>Generate a game code</label>

        </div>
        <button type="submit" class="btn btn-primary">Join</button>
    </form>
  </div>
</template>

<script>
    import Alert from './Alert'
    export default {
    name: 'add',
    data () {
        return {
        alert:''
        }
    },
    methods: {
        CreateGame(e){
                let requestData = {Action: "CreateGame",}
                console.log(requestData);
                this.$http.post('http://localhost:8080', requestData)
                    .then(function(response){
                      console.log(response.body.Code);
                        //this.$router.push({path: '/lobby', query: {alert: 'Created new game'}});
                    });
            e.preventDefault();
        }
    },
    components: {
        Alert
    }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>