react-tournament-brackets icon indicating copy to clipboard operation
react-tournament-brackets copied to clipboard

Double Elimination bracket layout bug

Open zpxp opened this issue 10 months ago • 1 comments

image

See image. layout for final in upper bracket is in the wrong position

import {
	DoubleEliminationBracket,
	Match,
	SVGViewer,
	createTheme
} from "@g-loot/react-tournament-brackets";
import "./styles.css";

export default function App() {
	return <SingleElimination />;
}

export const SingleElimination = () => (
	<DoubleEliminationBracket
		theme={GlootTheme}
		matches={simpleSmallBracket}
		matchComponent={Match}
		svgWrapper={({ children, ...props }) => (
			<SVGViewer
				width={10000}
				height={500000}
				background="rgb(11, 13, 19)"
				SVGBackground="rgb(11, 13, 19)"
				{...props}
			>
				{children}
			</SVGViewer>
		)}
		onMatchClick={(match) => console.log(match)}
		onPartyClick={(match) => console.log(match)}
	/>
);

const GlootTheme = createTheme({
	textColor: { main: "#000000", highlighted: "#F4F2FE", dark: "#707582" },
	matchBackground: { wonColor: "#2D2D59", lostColor: "#1B1D2D" },
	score: {
		background: {
			wonColor: `#10131C`,
			lostColor: "#10131C"
		},
		text: { highlightedWonColor: "#7BF59D", highlightedLostColor: "#FB7E94" }
	},
	border: {
		color: "#292B43",
		highlightedColor: "RGBA(152,82,242,0.4)"
	},
	roundHeader: { backgroundColor: "#3B3F73", fontColor: "#F4F2FE" },
	connectorColor: "#3B3F73",
	connectorColorHighlight: "RGBA(152,82,242,0.4)",
	svgBackground: "#0F121C"
});

export const simpleSmallBracket = {
	"upper": [
		{
			"id": 1,
			"name": "1",
			"nextMatchId": 50000,
			"nextLooserMatchId": 501,
			"tournamentRoundText": "1",
			"state": "SCHEDULED",
			"participants": []
		},
		{
			"id": 2,
			"name": "2",
			"nextMatchId": 1,
			"tournamentRoundText": "2",
			"state": "RUNNING",
			"participants": [
				{
					"id": "60f8d51a-1dff-428c-a490-1fa0aeea222f",
					"isWinner": false,
					"status": "SCHEDULED",
					"name": "testuser0"
				},
				{
					"id": "fd061925-f4db-4d40-8b49-4ae0f5bd7f77",
					"isWinner": false,
					"status": "SCHEDULED",
					"name": "testuser1"
				}
			],
			"nextLooserMatchId": 502
		},
		{
			"id": 3,
			"name": "3",
			"nextMatchId": 1,
			"tournamentRoundText": "2",
			"state": "SCHEDULED",
			"participants": [
				{
					"id": "85738d91-638d-443e-9322-076b6491bb6a",
					"isWinner": false,
					"status": "SCHEDULED",
					"name": "$asd&"
				},
				{
					"id": "16d1e6ff-d944-4146-b3a7-01e3b29f15c9",
					"isWinner": false,
					"status": "SCHEDULED",
					"name": "testuser2"
				}
			],
			"nextLooserMatchId": 503
		},
		{
			"id": 4,
			"name": "4",
			"nextMatchId": 2,
			"tournamentRoundText": "3",
			"state": "DONE",
			"participants": [
				{
					"id": "b7e8ba28-8f35-44dc-ae78-47d4e32077ae",
					"resultText": "LOST",
					"isWinner": false,
					"status": "DONE",
					"name": "testuser3"
				},
				{
					"id": "60f8d51a-1dff-428c-a490-1fa0aeea222f",
					"resultText": "WON",
					"isWinner": true,
					"status": "DONE",
					"name": "testuser0"
				}
			],
			"nextLooserMatchId": 504
		},
		{
			"id": 5,
			"name": "5",
			"nextMatchId": 2,
			"tournamentRoundText": "3",
			"startTime": "2024-04-16T04:22:36.9686208Z",
			"state": "DONE",
			"participants": [
				{
					"id": "fd061925-f4db-4d40-8b49-4ae0f5bd7f77",
					"resultText": "WON",
					"isWinner": true,
					"status": "DONE",
					"name": "testuser1"
				},
				{
					"id": "00000000-0000-0000-0000-000000000000",
					"isWinner": false,
					"name": "BYE"
				}
			],
			"nextLooserMatchId": 504
		},
		{
			"id": 6,
			"name": "6",
			"nextMatchId": 3,
			"tournamentRoundText": "3",
			"startTime": "2024-04-16T04:22:36.9686298Z",
			"state": "DONE",
			"participants": [
				{
					"id": "16d1e6ff-d944-4146-b3a7-01e3b29f15c9",
					"resultText": "WON",
					"isWinner": true,
					"status": "DONE",
					"name": "testuser2"
				},
				{
					"id": "00000000-0000-0000-0000-000000000000",
					"isWinner": false,
					"name": "BYE"
				}
			],
			"nextLooserMatchId": 505
		},
		{
			"id": 7,
			"name": "7",
			"nextMatchId": 3,
			"tournamentRoundText": "3",
			"startTime": "2024-04-16T04:22:36.9686311Z",
			"state": "DONE",
			"participants": [
				{
					"id": "85738d91-638d-443e-9322-076b6491bb6a",
					"resultText": "WON",
					"isWinner": true,
					"status": "DONE",
					"name": "$asd&"
				},
				{
					"id": "00000000-0000-0000-0000-000000000000",
					"isWinner": false,
					"name": "BYE"
				}
			],
			"nextLooserMatchId": 505
		}
	],
	"lower": [
		{
			"id": 50000,
			"name": "Final",
			"tournamentRoundText": "Final",
			"state": "SCHEDULED",
			"participants": []
		},
		{
			"id": 501,
			"name": "1",
			"nextMatchId": 50000,
			"tournamentRoundText": "1",
			"state": "SCHEDULED",
			"participants": []
		},
		{
			"id": 502,
			"name": "2",
			"nextMatchId": 501,
			"tournamentRoundText": "2",
			"state": "SCHEDULED",
			"participants": []
		},
		{
			"id": 503,
			"name": "3",
			"nextMatchId": 501,
			"tournamentRoundText": "2",
			"state": "SCHEDULED",
			"participants": []
		},
		{
			"id": 504,
			"name": "4",
			"nextMatchId": 502,
			"tournamentRoundText": "3",
			"state": "SCHEDULED",
			"participants": []
		},
		{
			"id": 505,
			"name": "5",
			"nextMatchId": 503,
			"tournamentRoundText": "3",
			"state": "SCHEDULED",
			"participants": []
		}
	]
}

zpxp avatar Apr 16 '24 04:04 zpxp