Double Elimination bracket layout bug #69
Description
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": []
}
]
}