<template>
    <v-container v-for="(g, gi) in groups">
        <h1 class="text-h5 my-2" style="border-bottom:1px solid grey">{{ g }}</h1>
        <v-row>
            <v-col v-for="(v, i) in items.filter(t=>t.group == g).sort((a, b)=>(a.order||0) - (b.order||0) )" :key="i" cols="12" xs="6" sm="6" md="4" xl="4">
                <v-card :to="`/playground/game/${v.id}`" :class="'hover-effect' + (v.locked ? ' locked' : '')">
                    <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: [],
            groups: [],
            gameData: []
        }
    },
    
    async created(){
        this.gameData = (await this.$api.user.getGameData()).data
        this.items = (await this.$api.game.search()).data.data;
        this.items.forEach(i=>{
            if (this.groups.indexOf(i.group) == -1){
                this.groups.push(i.group);
            }
            i.locked = (i.activationTriggers||[]).filter(at=>!this.gameData.find(gd=>gd.id == at)).length
        })
        this.groups.sort();
    },
}
</script>