<commit_before><template>

    <div class="page--groupRanking">

        <card-title v-if="group != null">Classement de <em>{{ group.name }}</em>&nbsp;:</card-title>

        <ranked-player v-for="rankedPlayer in groupRanking.ranking" :ranked-player="rankedPlayer"></ranked-player>
    </div>

    <div v-if="group">
        <link-btn  v-link="{ name: 'groupRanking', params: { groupId:  group.id, groupName: group.name }, query: { page: groupRanking.page - 1 } }">
            Page précédente
        </link-btn>

        <link-btn v-link="{ name: 'groupRanking', params: { groupId: group.id, groupName: group.name }, query: { page: groupRanking.page + 1 } }">
            Page suivante
        </link-btn>
    </div>

</template>

<script type="text/babel">
    import RankedPlayer from './RankedPlayer'
    import store from '../state/configureStore'
    import { fetchGroup } from '../state/actions/groups'
    import { fetchGroupRanking } from '../state/actions/ranking'

    export default {
        components: {
            RankedPlayer,
        },
        data() {
            return {
                group: this.$select('group'),
                groupRanking: this.$select('groupRanking'),
            }
        },
        route: {
            data: ({ to: { params: { groupId }, query: { page = 1 } } }) => {
                store.dispatch(fetchGroup(groupId))
                store.dispatch(fetchGroupRanking(groupId, parseInt(page)))
            },
        },
    }

</script>

<style scoped>
</style><commit_msg>feat: refine styles for general ranking<commit_after><template>

    <div class="page--groupRanking">

        <card-title v-if="group != null && group.id != 'general'">Classement de <em>{{ group.name }}</em>&nbsp;</card-title>
        <card-title v-else>Classement général</em>&nbsp;</card-title>

        <ranked-player v-for="rankedPlayer in groupRanking.ranking" :ranked-player="rankedPlayer"></ranked-player>

        <div v-if="group" class="pageSelectors">
            <link-btn class="pageSelector"  v-link="{ name: 'groupRanking', params: { groupId:  group.id, groupName: group.name }, query: { page: groupRanking.page - 1 } }">
                Page précédente
            </link-btn>

            <link-btn class="pageSelector" v-link="{ name: 'groupRanking', params: { groupId: group.id, groupName: group.name }, query: { page: groupRanking.page + 1 } }">
                Page suivante
            </link-btn>
        </div>
    </div>

</template>

<script type="text/babel">
    import RankedPlayer from './RankedPlayer'
    import store from '../state/configureStore'
    import { fetchGroup } from '../state/actions/groups'
    import { fetchGroupRanking } from '../state/actions/ranking'

    export default {
        components: {
            RankedPlayer,
        },
        data() {
            return {
                group: this.$select('group'),
                groupRanking: this.$select('groupRanking'),
            }
        },
        route: {
            data: ({ to: { params: { groupId }, query: { page = 1 } } }) => {
                store.dispatch(fetchGroup(groupId))
                store.dispatch(fetchGroupRanking(groupId, parseInt(page)))
            },
        },
    }

</script>

<style scoped>

    .pageSelectors {
        text-align: center;
    }

    .pageSelector {
        margin: 15px 1px;
    }

</style>
{'fraction_non_alphanumeric': 0.15621301775147928, 'fraction_numerical': 0.0026627218934911242, 'mean_word_length': 2.127659574468085, 'pattern_counts': {'":': 0, '<': 46, '<?xml version=': 0, '>': 48, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3100920', 'n_tokens_mistral': 1037, 'n_tokens_neox': 992, 'n_words': 209}