
<template>
    <h1 v-if="gameData">{{ gameData.File.Name }}</h1>
    <div v-if="gameData">
        {{ gameData.File.name }}
        <br>
        <GameStep v-for="step in gameData.File.Steps" :name="step.Items.Name.Value" /> 
    </div>
    <p v-if="serverData">{{ serverData.data }}</p>
    <button @click="fetchData">Fetch</button>

</template>
<script>
import GameStep from './Step.vue';
export default {
    components: {
        GameStep,
    },
    data() {
        return {
            serverData: null,
            gameData:null,
            gameValue: null,
        }
    },
    mounted() {
        this.fetchGame();
    },
    methods : {
        async fetchData() {
            const response = await fetch("http://localhost:3333/time/");
            this.serverData = await response.json();
        },
        async fetchGame() {
            const response = await fetch("http://localhost:3333/game/");
            this.gameData = await response.json();
        },
    }
};
</script>
<style></style>
