vue tournament bracket

vue-турнир-брекет

Компонент Vue для рендеринга турнирных сеток с выбыванием. Совместим с Vue 3. Для поддержки Vue 2 установите версию пакета 2.*.

На основе: https://codepen.io/sdudnyk/pen/bWbqMb.

Рендеринг основан на flex , см. поддержку браузера.

Пример из реальной жизни можно найти здесь: Martialmatch.com.

Установка и использование компонентов

Установите компонент через:

 npm install vue-tournament-bracket

Пример:

 < template >
    < bracket :rounds =" rounds " >
        < template slot =" player " slot-scope =" {{ player }} " >
            {{ player.name }}
        </ template >
    </ bracket >
< template >

< script >
    import Bracket from "vue-tournament-bracket" ;

    const rounds = [
        //Semi finals
        {
            games : [
                {

                    player1 : { id : "1" , name : "Competitor 1" , winner : false } ,
                    player2 : { id : "4" , name : "Competitor 4" , winner : true } ,
                } ,
                {

                    player1 : { id : "5" , name : "Competitor 5" , winner : false } ,
                    player2 : { id : "8" , name : "Competitor 8" , winner : true } ,
                }
            ]
        } ,
        //Final
        {
            games : [
                {

                    player1 : { id : "4" , name : "Competitor 4" , winner : false } ,
                    player2 : { id : "8" , name : "Competitor 8" , winner : true } ,
                }
            ]
        }
    ] ;

    export default {
        components : {
            Bracket
        } ,
        data ( ) {
            return {
                rounds : rounds
            }
        }
    }
</ script > 

Плей-офф за третье место

Вот как можно представить плей-офф за третье место:

 const rounds = [
        //Semi finals
        {
            games : [
                {

                    player1 : { id : "1" , name : "Competitor 1" , winner : false } ,
                    player2 : { id : "4" , name : "Competitor 4" , winner : true } ,
                } ,
                {

                    player1 : { id : "5" , name : "Competitor 5" , winner : false } ,
                    player2 : { id : "8" , name : "Competitor 8" , winner : true } ,
                }
            ]
        } ,
        //Third place play off
        {
            games : [
                {

                    player1 : { id : "1" , name : "Competitor 1" , winner : false } ,
                    player2 : { id : "5" , name : "Competitor 5" , winner : true } ,
                }
            ]
        } ,
        //Final
        {
            games : [
                {

                    player1 : { id : "4" , name : "Competitor 4" , winner : false } ,
                    player2 : { id : "8" , name : "Competitor 8" , winner : true } ,
                }
            ]
        }
    ] ; 

Нижний слот

Существует слот с реквизитом целого матча, используйте его следующим образом:

 < bracket :rounds =" rounds " >
    < template #player =" { player } " >
        {{ player.name }}
    </ template >
    < template #player-extension-bottom =" { match } " >
        Extra info: {{ match.title }}
    </ template >
</ bracket >

Может быть полезно, например, для отображения всплывающих подсказок и т. д.

Игровой объект

Для игрового объекта требуются объекты player1 и player2 . Вы также можете добавить свой собственный и, например, повторно использовать его в players-extension-bottom .

Следующие свойства запрещены и будут заменены на undefined :

• games
• hasParent

Подробности смотрите в matchProperties в GamePlayers .

Альтернативный ввод — плоское дерево

В версии 2.1 появилась возможность построить брекет-дерево из плоской древовидной структуры, где дочерний узел указывает на свой родительский узел. Структура немного проста, но требует двух дополнительных свойств для каждого игрового объекта: id , next . Это может быть полезно для создания групп двойного исключения с утешительными играми. Пример:

 const rounds = [
        //Repechage 1 of 3
        {
            id: 1,
            next: 5, //Will be connected to game with id 5
            player1: { id: "4", name: "Competitor 4", winner: true },
            player2: { id: "5", name: "Competitor 5", winner: false },
        },
        {
            id: 2,
            next: 6,
            player1: { id: "7", name: "Competitor 7", winner: false },
            player2: { id: "8", name: "Competitor 8", winner: true },
        },

        //Repechage 2 of 3
        {
            id: 5,
            next: 7,
            player1: { id: "1", name: "Competitor 1", winner: false },
            player2: { id: "4", name: "Competitor 4", winner: true },
        },
        {
            id: 6,
            next: 7,
            player1: { id: "3", name: "Competitor 3", winner: false },
            player2: { id: "8", name: "Competitor 8", winner: true },
        },
        
        //Repechage 3 of 3 - 3rd place match
        {
            id: 7,
            player1: { id: "4", name: "Competitor 4", winner: false },
            player2: { id: "8", name: "Competitor 8", winner: true },
        },
    ];

Инициализируйте скобку с помощью реквизита flatTree :

 < bracket :flat-tree =" rounds " >

Он генерирует следующую скобку:

Объект игрока

Объекту игрока требуется: свойство id , winner не является обязательным, остальное зависит от вас — рендеринг настраивается через слот с заданной областью.

• id используется для выделения
• Свойство winner соответствующим образом применяет цвет для игрока, также может быть null — цвет игрока будет серым

Стиль

Примените свой собственный стиль, переопределив CSS компонента Bracket . См. BracketNode.vue для всех используемых стилей.

Разработка

Требуемая версия Node.js — 14.0.0 (eslint).

Репозиторий оформления заказа и:

 npm install
npm run serve

Затем откройте браузер и проверьте свои изменения, используя основной компонент App.vue в целях разработки.

См. package.json чтобы узнать о доступных командах.

Выпуск

 npm test
npm run eslint
npm run build
git commit
npm version <version>
git push
npm publish --access=public

Лицензия

Массачусетский технологический институт