<template>
    <v-container>
        <v-row>
            <v-col v-for="(v, i) in items" :key="i" cols="12" xs="6" sm="6" md="4" xl="4">
                <v-card :to="`/playground/game/${v.id}`" class="hover-effect">
                    <v-img :src="`/asset/thumb/${v.thumb}.webp`" cover content-class="d-flex flex-column justify-end" gradient="to bottom, rgba(0,0,0,0), rgba(0,0,0,.5)">
                        <v-card-title class="text-white text-h6" v-text="v.name"></v-card-title>
                        <div class="text-white text-caption mx-4" v-text="v.description"></div>
                    </v-img>
                </v-card>
            </v-col>
        </v-row>
    </v-container>
</template>

<script>

export default {
    data(){
        return {
            items: []
        }
    },
    
    async created(){
        this.items = (await this.$api.game.search()).data.data
    },
}
</script>