vue tournament bracket
Vue 3 migration
Vue-Komponente zum Rendern von Single-Elimination-Turnier-Klammern. Kompatibel mit Vue 3. Für Vue 2-Unterstützung installieren Sie die 2.*-Version des Pakets.
Basierend auf: https://codepen.io/sdudnyk/pen/bWbqMb.
Das Rendering basiert auf Flex , siehe Browserunterstützung.
Beispiele aus dem wirklichen Leben finden Sie hier: martialmatch.com.
Komponente installieren über:
npm install vue-tournament-bracket
Beispiel:
< 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 > So repräsentieren Sie das Play-off um den dritten Platz:
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 } ,
}
]
}
] ; 
Es gibt einen Slot mit kompletten Match-Requisiten. Verwenden Sie ihn auf folgende Weise:
< bracket :rounds =" rounds " >
< template #player =" { player } " >
{{ player.name }}
template >
< template #player-extension-bottom =" { match } " >
Extra info: {{ match.title }}
template >
bracket >Kann beispielsweise nützlich sein, um Tooltips usw. anzuzeigen.
Für das Spielobjekt sind player1 und player2 -Objekte erforderlich. Sie können auch Ihre eigene hinzufügen und diese beispielsweise im players-extension-bottom Slot wiederverwenden.
Folgende Eigenschaften sind verboten und werden durch undefined ersetzt:
gameshasParent Weitere Informationen finden Sie unter matchProperties in GamePlayers .
Version 2.1 führt die Option ein, einen Klammerbaum aus einer flachen Baumstruktur zu erstellen, bei der der untergeordnete Knoten auf seinen übergeordneten Knoten zeigt. Die Struktur ist etwas einfach, erfordert jedoch zwei zusätzliche Eigenschaften für jedes Spielobjekt: id , next . Dies könnte bei der Generierung von Double-Elimination-Brackets mit Repechages hilfreich sein. Beispiel:
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 },
},
];
Klammer mit flatTree Requisiten initialisieren:
< bracket :flat-tree =" rounds " >Es generiert folgende Klammer:
Das Player-Objekt erfordert: id Eigenschaft, winner ist optional, der Rest liegt bei Ihnen – das Rendering ist über den Bereichsslot anpassbar.
id wird zum Hervorheben verwendetwinner wendet die Farbe für den Spieler entsprechend an, kann auch null sein – die Farbe des Spielers ist grau Wenden Sie Ihren benutzerdefinierten Stil an, indem Sie das CSS Bracket Komponente überschreiben. Alle verwendeten Stile finden Sie in BracketNode.vue.
Die erforderliche Node.js-Version ist 14.0.0 (eslint).
Checkout-Repository und:
npm install
npm run serve
Öffnen Sie dann den Browser und testen Sie Ihre Änderungen mit App.vue Hauptkomponente für Entwicklungszwecke.
Sehen Sie sich package.json an, um die verfügbaren Befehle zu entdecken.
npm test
npm run eslint
npm run build
git commit
npm version
git push
npm publish --access=public
MIT
