vue3-tournament
v1.0.13
Published
Tournament brackets generator using Vue 3.
Downloads
21
Readme
Vue 3 Tournament
Tournament brackets generator using Vue 3.
base on vue-tournament-bracket
Installation and component usage
Install component via:
npm install vue3-tournament
Example:
<template>
<TournamentBracket
:rounds="rounds"
@onMatchClick="onMatchClick"
@onParticipantClick="onParticipantClick"
/>
</template>
<script lang="ts">
import { TournamentBracket } from "vue3-tournament"
import type IRound from "vue3-tournament/interface/IRound"
import "vue3-tournament/style.css"
const onMatchClick = (matchId: string | number): void => {
alert(`click: ${matchId}`)
}
const onParticipantClick = (participant: any, match: any): void => {
console.log("participant", participant) // team or feedIn
console.log("match", match)
}
const rounds = ref<IRound[]>([
//Quarter
{
matchs: [
{
id: "match1",
winner: "1",
team1: { id: "1", name: "Competitor 1", score: 2 },
team2: { id: "2", name: "Competitor 2", score: 1 },
},
{
id: "match2",
winner: "4",
team1: { id: "3", name: "Competitor 3", score: 0 },
team2: { id: "4", name: "Competitor 4", score: 2 },
},
{
id: "match3",
winner: "5",
team1: { id: "5", name: "Competitor 5", score: 2 },
team2: { id: "6", name: "Competitor 6", score: 1 },
},
{
id: "match4",
winner: "8",
team1: { id: "7", name: "Competitor 7", score: 0 },
team2: { id: "8", name: "Competitor 8", score: 2 },
},
],
},
//Semi
{
matchs: [
{
id: "match5",
winner: "4",
team1: { id: "1", name: "Competitor 1", score: 1 },
team2: { id: "4", name: "Competitor 4", score: 2 },
},
{
id: "match6",
winner: "8",
team1: { id: "5", name: "Competitor 5", score: 1 },
team2: { id: "8", name: "Competitor 8", score: 2 },
},
],
},
//Final
{
matchs: [
{
id: "any_match_id",
winner: "8",
team1: { id: "4", name: "Competitor 4", score: 1 },
team2: { id: "8", name: "Competitor 8", score: 3 },
},
],
},
])
</script>
FeedIn
You can use feed-in to display seeded round
[
{
"matchs": [
{
"id": "match1",
"winner": "1",
"team1": {
"id": "1",
"name": "Competitor 1",
"score": 2
},
"team2": {
"id": "2",
"name": "Competitor 2",
"score": 1
}
},
{
"id": "match2",
"feedIn": {
"id": "3",
"name": "Competitor 3"
}
}
]
},
{
"matchs": [
{
"id": "match3",
"winner": "3",
"team1": {
"id": "1",
"name": "Competitor 1",
"score": 1
},
"team2": {
"id": "3",
"name": "Competitor 3",
"score": 2
}
},
{
"id": "match4",
"feedIn": {
"id": "4",
"name": "Competitor 4"
}
}
]
},
{
"matchs": [
{
"id": "any_match_id",
"winner": "4",
"team1": {
"id": "3",
"name": "Competitor 3",
"score": 1
},
"team2": {
"id": "4",
"name": "Competitor 4",
"score": 3
}
}
]
}
]