vue tournament bracket

vue-بطولة-قوس

مكون Vue لعرض أقواس دورة الإقصاء الفردية. متوافق مع Vue 3. لدعم Vue 2، قم بتثبيت الإصدار 2.* من الحزمة.

بناءً على: https://codepen.io/sdudnyk/pen/bWbqMb.

يعتمد العرض على المرن ، راجع دعم المتصفح.

يمكن العثور على مثال واقعي هنا: 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 - سيكون لون اللاعب رماديًا

التصميم

قم بتطبيق النمط المخصص الخاص بك عن طريق تجاوز مكون Bracket CSS. راجع 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

رخصة

معهد ماساتشوستس للتكنولوجيا