Wizualiztor demo

jordus100 · May 28, 2024 · 9a0e27e · 9a0e27e
1 parent 7187570
commit 9a0e27e
Showing 1 changed file with 27 additions and 5 deletions.
diff --git a/src/elements/Ladder/Ladder.js b/src/elements/Ladder/Ladder.js
@@ -1,5 +1,25 @@
 import { useEffect, useState } from "react"
-import { Bracket } from 'react-brackets';
+import { Bracket, RoundProps, Seed, SeedItem, SeedTeam, RenderSeedProps } from 'react-brackets';
+
+const CustomSeed = ({seed, breakpoint, roundIndex, seedIndex}) => {
+    const getColor = (winner, team) => {
+        if (winner === -1) return 'gray';
+        if (winner === team.name) return 'green';
+        return 'red';
+    }
+    console.log("seed");
+    console.log(seed);
+    return (
+      <Seed mobileBreakpoint={breakpoint} style={{ fontSize: 12 }}>
+        <SeedItem>
+          <div>
+            <SeedTeam style={{ color: getColor(seed.winner, seed.teams[0]) }}>{seed.teams[0]?.name || '...'}</SeedTeam>
+            <SeedTeam style={{ color: getColor(seed.winner, seed.teams[1]) }}>{seed.teams[1]?.name || '...'}</SeedTeam>
+          </div>
+        </SeedItem>
+      </Seed>
+    );
+  };
 
 const buildRounds = function (json) {
     console.log("before")
@@ -15,7 +35,7 @@ const buildRounds = function (json) {
         temp.push({
             id: i,
             date: new Date().toDateString(),
-            teams: [{ name: 'Its a me' }, { name: 'Mario ' + i }],
+            teams: [{}, {}],
         });
     };
     temp = temp.concat(result);
@@ -24,7 +44,7 @@ const buildRounds = function (json) {
         temp.push({
             id: i + maxPosition + 1,
             date: new Date().toDateString(),
-            teams: [{ name: 'Its a me' }, { name: 'Luigi ' + i }],
+            teams: [{}, {}],
         });
     }
 
@@ -43,7 +63,6 @@ const buildRounds = function (json) {
     let cursor = -1;
     for (let i = result.length - 1; i >= 0 ; i--) {
         if (Number.isInteger(Math.log2(i + 2))) {
-
             temp.push([]);
             cursor++;
         }
@@ -129,6 +148,9 @@ export default function Ladder({status}){
     }, [status]);
 
     return (<>
-        <Bracket rounds={rounds} rtl={false} mobileBreakpoint={100} />
+        <Bracket rounds={rounds} 
+            rtl={false} 
+            mobileBreakpoint={100} 
+            renderSeedComponent={CustomSeed}/>
     </>)
 }