From 7755c28cfaf89c26e9f3dd80ce7f36be4ffe5c7e Mon Sep 17 00:00:00 2001
From: Kalle <38327916+Sendouc@users.noreply.github.com>
Date: Sun, 28 Apr 2024 10:59:45 +0300
Subject: [PATCH] Scrollable bracket

---
 .../components/Bracket/bracket.css            | 11 +++++
 .../components/Bracket/index.tsx              | 44 +++++++++++++++++--
 2 files changed, 51 insertions(+), 4 deletions(-)

diff --git a/app/features/tournament-bracket/components/Bracket/bracket.css b/app/features/tournament-bracket/components/Bracket/bracket.css
index 637d69580..c4fe901e4 100644
--- a/app/features/tournament-bracket/components/Bracket/bracket.css
+++ b/app/features/tournament-bracket/components/Bracket/bracket.css
@@ -8,6 +8,17 @@
   padding-block-end: var(--s-6);
 }
 
+.scrolling-bracket {
+  padding: var(--s-4) var(--s-6);
+  max-width: 100%;
+  max-height: min(1000px, 70vh);
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+  border: 2px solid var(--border);
+  border-radius: var(--rounded-sm);
+  overflow: scroll;
+}
+
 .bracket__match__header {
   position: absolute;
   display: flex;
diff --git a/app/features/tournament-bracket/components/Bracket/index.tsx b/app/features/tournament-bracket/components/Bracket/index.tsx
index 1a9634bac..979ecfd29 100644
--- a/app/features/tournament-bracket/components/Bracket/index.tsx
+++ b/app/features/tournament-bracket/components/Bracket/index.tsx
@@ -3,6 +3,8 @@ import type { Bracket as BracketType } from "../../core/Bracket";
 import { EliminationBracketSide } from "./Elimination";
 import { RoundRobinBracket } from "./RoundRobin";
 import { SwissBracket } from "./Swiss";
+import * as React from "react";
+import { useDraggable } from "react-use-draggable-scroll";
 
 export function Bracket({
   bracket,
@@ -31,7 +33,7 @@ export function Bracket({
 
   if (bracket.type === "single_elimination") {
     return (
-      <BracketContainer>
+      <BracketContainer scrollable>
         <EliminationBracketSide
           type="single"
           bracket={bracket}
@@ -42,7 +44,7 @@ export function Bracket({
   }
 
   return (
-    <BracketContainer>
+    <BracketContainer scrollable>
       <EliminationBracketSide
         type="winners"
         bracket={bracket}
@@ -57,9 +59,43 @@ export function Bracket({
   );
 }
 
-function BracketContainer({ children }: { children: React.ReactNode }) {
+function BracketContainer({
+  children,
+  scrollable = false,
+}: {
+  children: React.ReactNode;
+  scrollable?: boolean;
+}) {
+  if (!scrollable) {
+    return (
+      <div className="bracket" data-testid="brackets-viewer">
+        {children}
+      </div>
+    );
+  }
+
+  return <ScrollableBracketContainer>{children}</ScrollableBracketContainer>;
+}
+
+function ScrollableBracketContainer({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const ref = React.useRef<HTMLDivElement>(
+    null,
+  ) as React.MutableRefObject<HTMLDivElement>;
+  const { events } = useDraggable(ref, {
+    applyRubberBandEffect: true,
+  });
+
   return (
-    <div className="bracket" data-testid="brackets-viewer">
+    <div
+      className="bracket scrolling-bracket"
+      data-testid="brackets-viewer"
+      ref={ref}
+      {...events}
+    >
       {children}
     </div>
   );