g-loot / react-tournament-brackets

React component library for displaying bracket leaderboards
https://sleepy-kare-d8538d.netlify.app/?path=/story/components-bracket--bracket
GNU Lesser General Public License v2.1
219 stars 69 forks source link

Double Elimination bracket layout bug #69

Open zpxp opened 4 months ago

zpxp commented 4 months ago

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": []
        }
    ]
}
indrateja97 commented 3 months ago

Hey @zpxp, were you able to find a solution for this bug?