From 18f9171506e13d6b07f9c8f95b698029b994e6fa Mon Sep 17 00:00:00 2001 From: = Date: Wed, 18 Sep 2024 21:07:28 -0300 Subject: [PATCH 01/10] brackets start, 2.5 hours wasted --- better-app/app/roundDetails.css | 81 ------------------ better-app/app/roundDetails/page.tsx | 120 ++++++++++++--------------- 2 files changed, 52 insertions(+), 149 deletions(-) delete mode 100644 better-app/app/roundDetails.css diff --git a/better-app/app/roundDetails.css b/better-app/app/roundDetails.css deleted file mode 100644 index a87c137..0000000 --- a/better-app/app/roundDetails.css +++ /dev/null @@ -1,81 +0,0 @@ -/* General Styling */ -.round-details-container { - background-color: #000; - color: #fff; - padding: 20px; -} - -.round-details-header { - text-align: center; -} - -.round-title-container { - margin: 0 auto; - text-align: left; - max-width: 800px; -} - -.round-title { - font-size: 28px; - font-weight: bold; -} - -/* Competitor Rectangle Styling */ -.competitor-rectangle { - background-color: #000; - border: 2px solid #fff; - width: 80px; - height: 40px; - margin: 5px 0; - cursor: pointer; - transition: border-color 0.3s ease, background-color 0.3s ease; -} - -.competitor-rectangle.selected { - border-color: yellow; -} - -.competitor-rectangle:hover { - border-color: #ffcc00; -} - -/* Inactive Competitor Rectangle Styling */ -.competitor-rectangle.inactive { - background-color: #2a2a2a; - cursor: default; -} - -.competitor-rectangle.inactive:hover { - border-color: #fff; -} - -/* Gold Rectangle (Final Column) */ -.final-rectangle { - background-color: #2a2a2a; - border: 2px solid #b8860b; - width: 80px; - height: 40px; - margin: 5px 0; -} - -/* Grid Layout for Bracket */ -.bracket-grid { - display: grid; - grid-template-columns: repeat(4, 1fr); /* 4 equal columns */ - gap: 50px; /* Space between columns */ - margin-top: 20px; -} - -.column { - display: flex; - flex-direction: column; - justify-content: space-between; /* Ensure even spacing */ - height: 500px; /* Control the total height of each column */ -} - -.final-column { - display: flex; - flex-direction: column; - justify-content: center; /* Center the final rectangle */ - align-items: center; -} diff --git a/better-app/app/roundDetails/page.tsx b/better-app/app/roundDetails/page.tsx index 18989b8..e443125 100644 --- a/better-app/app/roundDetails/page.tsx +++ b/better-app/app/roundDetails/page.tsx @@ -1,80 +1,64 @@ 'use client'; -import React, { useState } from 'react'; -import '../roundDetails.css'; // Import for styling +import React, { useState, useEffect } from 'react'; +import { Bracket, IRoundProps, Seed, SeedItem, SeedTeam, IRenderSeedProps } from 'react-brackets'; -const RoundDetails = () => { - const CompetitorRectangle = ({ isInactive = false, isFinal = false }: { isInactive?: boolean, isFinal?: boolean }) => { - const [isSelected, setIsSelected] = useState(false); - - const handleSelect = () => { - setIsSelected(true); - setTimeout(() => setIsSelected(false), 500); - }; - - return ( -
- {/* No text inside the rectangle */} -
- ); - }; +const rounds: IRoundProps[] = [ + { + title: 'Round 1', + seeds: [ + { + id: 1, + date: new Date().toDateString(), + teams: [{ name: 'Team A' }, { name: 'Team B' }], + }, + { + id: 2, + date: new Date().toDateString(), + teams: [{ name: 'Team C' }, { name: 'Team D' }], + }, + ], + }, + // Add more rounds as needed +]; +const CustomSeed = ({seed}: IRenderSeedProps) => { return ( -
-
-
-

Round 1: Creative Writing

- -
- {/* First Stage */} -
- - -
- - - -
- - - -
-
+ + +
+ {seed.teams[0]?.name || 'TBD'} + {seed.teams[1]?.name || 'TBD'} +
+ + + ); +}; - {/* Second Stage */} -
-
- - -
+const RoundDetails = () => { + const [width, setWidth] = useState(0); + const [height, setHeight] = useState(0); - - -
-
+ useEffect(() => { + const handleResize = () => { + setWidth(window.innerWidth * 0.9); + setHeight(window.innerHeight * 0.8); + }; - {/* Final Stage */} -
-
-
- - -
-
-
+ handleResize(); // Call once to set initial size + window.addEventListener('resize', handleResize); + return () => window.removeEventListener('resize', handleResize); + }, []); - {/* Winner Column (Final Rectangle) */} -
- -
-
-
-
+ return ( +
+

Bracket Example

+
+ +
); }; From 692f73b5c52f4052927eac99f98598213a6eb5f4 Mon Sep 17 00:00:00 2001 From: = Date: Thu, 19 Sep 2024 12:21:49 -0300 Subject: [PATCH 02/10] basic bracket --- better-app/app/roundDetails/page.tsx | 110 +++++++++++++++++---------- 1 file changed, 71 insertions(+), 39 deletions(-) diff --git a/better-app/app/roundDetails/page.tsx b/better-app/app/roundDetails/page.tsx index e443125..d3f01b1 100644 --- a/better-app/app/roundDetails/page.tsx +++ b/better-app/app/roundDetails/page.tsx @@ -1,9 +1,22 @@ 'use client'; -import React, { useState, useEffect } from 'react'; -import { Bracket, IRoundProps, Seed, SeedItem, SeedTeam, IRenderSeedProps } from 'react-brackets'; +import React from 'react'; +import { Bracket, RoundProps, Seed, SeedItem, SeedTeam, RenderSeedProps } from 'react-brackets'; -const rounds: IRoundProps[] = [ +const CustomSeed = ({ seed, breakpoint }: RenderSeedProps) => { + return ( + + +
+ {seed.teams[0]?.name || 'TBD'} + {seed.teams[1]?.name || 'TBD'} +
+ + + ); +}; + +const roundsLeft: RoundProps[] = [ { title: 'Round 1', seeds: [ @@ -17,50 +30,69 @@ const rounds: IRoundProps[] = [ date: new Date().toDateString(), teams: [{ name: 'Team C' }, { name: 'Team D' }], }, + { + id: 3, + date: new Date().toDateString(), + teams: [{ name: 'Team E' }, { name: 'Team F' }], + }, + { + id: 4, + date: new Date().toDateString(), + teams: [{ name: 'Team G' }, { name: 'Team H' }], + }, + ], + }, + { + title: 'Round 2', + seeds: [ + { + id: 5, + date: new Date().toDateString(), + teams: [{ name: 'Winner A-B' }, { name: 'Winner C-D' }], + }, + { + id: 6, + date: new Date().toDateString(), + teams: [{ name: 'Winner E-F' }, { name: 'Winner G-H' }], + }, + ], + }, + { + title: 'Finals', + seeds: [ + { + id: 7, + date: new Date().toDateString(), + teams: [{ name: 'Winner A-D' }, { name: 'Winner E-H' }], + }, ], }, - // Add more rounds as needed ]; -const CustomSeed = ({seed}: IRenderSeedProps) => { +const RoundDetailsPage = () => { return ( - - -
- {seed.teams[0]?.name || 'TBD'} - {seed.teams[1]?.name || 'TBD'} -
- - - ); -}; - -const RoundDetails = () => { - const [width, setWidth] = useState(0); - const [height, setHeight] = useState(0); - - useEffect(() => { - const handleResize = () => { - setWidth(window.innerWidth * 0.9); - setHeight(window.innerHeight * 0.8); - }; +
+

Tournament Bracket

+
+ +
- handleResize(); // Call once to set initial size - window.addEventListener('resize', handleResize); - return () => window.removeEventListener('resize', handleResize); - }, []); +
); }; -export default RoundDetails; +export default RoundDetailsPage; From 69352efeee13558a53077f85999b412e52ca1769 Mon Sep 17 00:00:00 2001 From: = Date: Thu, 19 Sep 2024 17:10:02 -0300 Subject: [PATCH 03/10] 75% --- better-app/app/BracketStyles.css | 0 better-app/app/drawer.css | 95 +++++++++++++ better-app/app/roundDetails/page.tsx | 200 ++++++++++++++++++--------- 3 files changed, 230 insertions(+), 65 deletions(-) create mode 100644 better-app/app/BracketStyles.css create mode 100644 better-app/app/drawer.css diff --git a/better-app/app/BracketStyles.css b/better-app/app/BracketStyles.css new file mode 100644 index 0000000..e69de29 diff --git a/better-app/app/drawer.css b/better-app/app/drawer.css new file mode 100644 index 0000000..318a3ea --- /dev/null +++ b/better-app/app/drawer.css @@ -0,0 +1,95 @@ +/* drawer.css */ +.drawer { + position: fixed; + top: 0; + right: 0; + height: 100%; + width: 300px; + background-color: black; + color: white; + border-left: 1px solid white; + box-shadow: -2px 0 5px rgba(0, 0, 0, 0.5); + transform: translateX(100%); + transition: transform 0.3s ease-in-out; + z-index: 1000; + padding: 20px; + overflow-y: auto; + } + + .drawer-open { + transform: translateX(0); + } + + .drawer-closing { + transform: translateX(100%); + } + + .drawer-close-button { + color: white; + background-color: transparent; + border: none; + font-size: 18px; + cursor: pointer; + position: absolute; + top: 20px; + left: 20px; + } + + .drawer-content { + margin-top: 60px; + } + + /* Table and Bracket Layout */ + .bracket-table-container { + display: flex; + justify-content: center; /* Align in center horizontally */ + align-items: flex-start; + flex-direction: column; + margin-top: 20px; + } + + /* Table Styling */ + .competitor-table { + width: 400px; /* Narrower table */ + border-collapse: collapse; + margin-top: 20px; + } + + .competitor-table th, + .competitor-table td { + border: 1px solid white; + text-align: center; + padding: 10px; + } + + .competitor-table th { + color: white; + font-weight: bold; + } + + .competitor-table td { + color: white; + } + + .status-button { + height: 18px; + width: 18px; + border: 2px solid; /* Stroke only */ + border-radius: 50%; + display: inline-block; + } + + .status-green { + border-color: #77dd77; /* Pastel green stroke */ + } + + .status-red { + border-color: #ff6961; /* Pastel red stroke */ + } + + /* Alignment for table under columns */ + .competitor-table th, + .competitor-table td { + vertical-align: middle; /* Center content vertically */ + } + \ No newline at end of file diff --git a/better-app/app/roundDetails/page.tsx b/better-app/app/roundDetails/page.tsx index d3f01b1..585c340 100644 --- a/better-app/app/roundDetails/page.tsx +++ b/better-app/app/roundDetails/page.tsx @@ -1,98 +1,168 @@ 'use client'; -import React from 'react'; -import { Bracket, RoundProps, Seed, SeedItem, SeedTeam, RenderSeedProps } from 'react-brackets'; +import React, { useState, useEffect, useRef } from 'react'; +import { Bracket, IRoundProps, Seed, SeedItem, SeedTeam, IRenderSeedProps } from 'react-brackets'; +import { useRouter } from 'next/navigation'; +import '../drawer.css'; // Assuming drawer.css is in the same directory + +const CustomSeed = ({ seed, breakpoint }: IRenderSeedProps) => { + const router = useRouter(); + + const isRoundOne = typeof seed.id === 'number' && seed.id <= 4; -const CustomSeed = ({ seed, breakpoint }: RenderSeedProps) => { return ( - - -
- {seed.teams[0]?.name || 'TBD'} - {seed.teams[1]?.name || 'TBD'} + isRoundOne && router.push(`/some-link/${seed.id}`)} + > + ) => { + if (isRoundOne) { + e.currentTarget.style.backgroundColor = '#1a1a1a'; + e.currentTarget.style.borderColor = '#cccc00'; // Darker yellow + } + }} + onMouseLeave={(e: React.MouseEvent) => { + if (isRoundOne) { + e.currentTarget.style.backgroundColor = 'black'; + e.currentTarget.style.borderColor = 'white'; + } + }} + > +
+ + {isRoundOne ? (seed.teams[0]?.name || 'NO TEAM') : ''} + + + {isRoundOne ? (seed.teams[1]?.name || 'NO TEAM') : ''} +
); }; -const roundsLeft: RoundProps[] = [ +const rounds: IRoundProps[] = [ { title: 'Round 1', seeds: [ - { - id: 1, - date: new Date().toDateString(), - teams: [{ name: 'Team A' }, { name: 'Team B' }], - }, - { - id: 2, - date: new Date().toDateString(), - teams: [{ name: 'Team C' }, { name: 'Team D' }], - }, - { - id: 3, - date: new Date().toDateString(), - teams: [{ name: 'Team E' }, { name: 'Team F' }], - }, - { - id: 4, - date: new Date().toDateString(), - teams: [{ name: 'Team G' }, { name: 'Team H' }], - }, + { id: 1, date: new Date().toDateString(), teams: [{ name: 'Team A' }, { name: 'Team B' }] }, + { id: 2, date: new Date().toDateString(), teams: [{ name: 'Team C' }, { name: 'Team D' }] }, + { id: 3, date: new Date().toDateString(), teams: [{ name: 'Team E' }, { name: 'Team F' }] }, + { id: 4, date: new Date().toDateString(), teams: [{ name: 'Team G' }, { name: 'Team H' }] }, ], }, { title: 'Round 2', seeds: [ - { - id: 5, - date: new Date().toDateString(), - teams: [{ name: 'Winner A-B' }, { name: 'Winner C-D' }], - }, - { - id: 6, - date: new Date().toDateString(), - teams: [{ name: 'Winner E-F' }, { name: 'Winner G-H' }], - }, + { id: 5, date: new Date().toDateString(), teams: [{ name: '' }, { name: '' }] }, + { id: 6, date: new Date().toDateString(), teams: [{ name: '' }, { name: '' }] }, ], }, { title: 'Finals', - seeds: [ - { - id: 7, - date: new Date().toDateString(), - teams: [{ name: 'Winner A-D' }, { name: 'Winner E-H' }], - }, - ], + seeds: [{ id: 7, date: new Date().toDateString(), teams: [{ name: '' }, { name: '' }] }], }, ]; -const RoundDetailsPage = () => { +const BracketWithCustomSeed = () => { + const [selectedTeam, setSelectedTeam] = useState(null); + const drawerRef = useRef(null); + + const competitors = [ + { name: 'Team A', status: 'active' }, + { name: 'Team B', status: 'active' }, + { name: 'Team C', status: 'active' }, + { name: 'Team D', status: 'active' }, + { name: 'Team E', status: 'active' }, + { name: 'Team F', status: 'active' }, + { name: 'Team G', status: 'active' }, + { name: 'Team H', status: 'active' }, + ]; + + useEffect(() => { + const handleClickOutside = (event: MouseEvent) => { + if (drawerRef.current && !drawerRef.current.contains(event.target as Node)) { + setSelectedTeam(null); + } + }; + + document.addEventListener('mousedown', handleClickOutside); + return () => { + document.removeEventListener('mousedown', handleClickOutside); + }; + }, []); + return ( -
-

Tournament Bracket

-
- +
+
+ ( +
{title}
+ )} + swipeableProps={{ enableMouseEvents: false }} + />
- + {selectedTeam && ( +
+ +
+

{selectedTeam}

+

{selectedTeam} has been consistently performing well.

+
+
+ )}
); }; -export default RoundDetailsPage; +export default BracketWithCustomSeed; From b525647ad8c6dd44e78293f42ff75968f633c5f5 Mon Sep 17 00:00:00 2001 From: = Date: Thu, 19 Sep 2024 21:05:55 -0300 Subject: [PATCH 04/10] progress on styling --- better-app/app/BracketStyles.css | 33 ++++++++++ better-app/app/roundDetails/page.tsx | 98 +++++++++++++++------------- 2 files changed, 85 insertions(+), 46 deletions(-) diff --git a/better-app/app/BracketStyles.css b/better-app/app/BracketStyles.css index e69de29..5acd95f 100644 --- a/better-app/app/BracketStyles.css +++ b/better-app/app/BracketStyles.css @@ -0,0 +1,33 @@ +/* Competitor table */ +.competitor-table { + width: 100%; + border-collapse: collapse; + margin-top: 20px; + } + + .competitor-table th { + text-align: left; + padding-bottom: 10px; + color: #fff; + font-size: 18px; + border-bottom: 2px solid #444; /* Darker gray for subtle header separator */ + } + + .competitor-table td { + padding: 12px 8px; /* More spacious feel with padding */ + text-align: left; + color: #fff; + font-size: 16px; + border-bottom: 1px solid #444; /* Subtle light gray row divider */ + transition: background-color 0.3s ease; + } + + .competitor-table tr:hover { + background-color: #1a1a1a; + box-shadow: none; /* Removed the boxy shadow */ + } + + .competitor-table tr { + border: none; /* Remove row borders */ + } + \ No newline at end of file diff --git a/better-app/app/roundDetails/page.tsx b/better-app/app/roundDetails/page.tsx index 585c340..bb9a780 100644 --- a/better-app/app/roundDetails/page.tsx +++ b/better-app/app/roundDetails/page.tsx @@ -4,6 +4,7 @@ import React, { useState, useEffect, useRef } from 'react'; import { Bracket, IRoundProps, Seed, SeedItem, SeedTeam, IRenderSeedProps } from 'react-brackets'; import { useRouter } from 'next/navigation'; import '../drawer.css'; // Assuming drawer.css is in the same directory +import '../bracketStyles.css'; // Adjust path according to your project structure const CustomSeed = ({ seed, breakpoint }: IRenderSeedProps) => { const router = useRouter(); @@ -19,19 +20,17 @@ const CustomSeed = ({ seed, breakpoint }: IRenderSeedProps) => { ) => { if (isRoundOne) { e.currentTarget.style.backgroundColor = '#1a1a1a'; - e.currentTarget.style.borderColor = '#cccc00'; // Darker yellow } }} onMouseLeave={(e: React.MouseEvent) => { if (isRoundOne) { e.currentTarget.style.backgroundColor = 'black'; - e.currentTarget.style.borderColor = 'white'; } }} > @@ -100,57 +99,64 @@ const BracketWithCustomSeed = () => { }, []); return ( -
-
+
+
{/* Reduced marginBottom by 10% from 60px */} ( -
{title}
+
{title}
// Reduced marginBottom by 10% from 30px )} swipeableProps={{ enableMouseEvents: false }} />
- {/* Competitors Table */} - - - - - - - - - {competitors.map((competitor) => ( - { - e.preventDefault(); - setSelectedTeam(competitor.name); - }} - style={{ - transition: 'all 0.3s ease', - cursor: 'pointer', - }} - onMouseEnter={(e) => { - e.currentTarget.style.backgroundColor = '#1a1a1a'; - e.currentTarget.style.boxShadow = '0 0 0 1px #cccc00'; - }} - onMouseLeave={(e) => { - e.currentTarget.style.backgroundColor = ''; - e.currentTarget.style.boxShadow = ''; - }} - > - - - - ))} - -
CompetitorStatus
{competitor.name} - -
+ {/* Competitors List */} +
{/* Reduced maxWidth by 10% from 550px, padding by 10% from 0 30px */} +

Competitors

{/* Reduced marginBottom by 10% from 25px */} + {competitors.map((competitor, index) => ( +
setSelectedTeam(competitor.name)} + style={{ + display: 'flex', + justifyContent: 'space-between', + alignItems: 'center', + padding: '14.4px 7.2px', // Reduced by 10% from 16px 8px + marginBottom: '10.8px', // Reduced by 10% from 12px + borderBottom: index < competitors.length - 1 ? '0.675px solid white' : 'none', // Reduced by 10% from 0.75px + cursor: 'pointer', + transition: 'all 0.3s ease', + }} + onMouseEnter={(e) => { + e.currentTarget.style.backgroundColor = '#1a1a1a'; + e.currentTarget.style.paddingLeft = '14.4px'; // Reduced by 10% from 16px + e.currentTarget.style.paddingRight = '14.4px'; // Reduced by 10% from 16px + }} + onMouseLeave={(e) => { + e.currentTarget.style.backgroundColor = ''; + e.currentTarget.style.paddingLeft = '7.2px'; // Reduced by 10% from 8px + e.currentTarget.style.paddingRight = '7.2px'; // Reduced by 10% from 8px + }} + > + {competitor.name} + + {competitor.status === 'active' ? 'Active' : 'Eliminated'} + +
+ ))} +
{selectedTeam && (
From 3451e9fefb6cf11402f937bb685505508802d270 Mon Sep 17 00:00:00 2001 From: = Date: Thu, 19 Sep 2024 22:02:59 -0300 Subject: [PATCH 05/10] fucking manalis --- better-app/app/roundDetails/page.tsx | 43 ++++++++++++++++------------ 1 file changed, 25 insertions(+), 18 deletions(-) diff --git a/better-app/app/roundDetails/page.tsx b/better-app/app/roundDetails/page.tsx index bb9a780..e79f5aa 100644 --- a/better-app/app/roundDetails/page.tsx +++ b/better-app/app/roundDetails/page.tsx @@ -49,7 +49,6 @@ const CustomSeed = ({ seed, breakpoint }: IRenderSeedProps) => { const rounds: IRoundProps[] = [ { - title: 'Round 1', seeds: [ { id: 1, date: new Date().toDateString(), teams: [{ name: 'Team A' }, { name: 'Team B' }] }, { id: 2, date: new Date().toDateString(), teams: [{ name: 'Team C' }, { name: 'Team D' }] }, @@ -58,14 +57,12 @@ const rounds: IRoundProps[] = [ ], }, { - title: 'Round 2', seeds: [ { id: 5, date: new Date().toDateString(), teams: [{ name: '' }, { name: '' }] }, { id: 6, date: new Date().toDateString(), teams: [{ name: '' }, { name: '' }] }, ], }, { - title: 'Finals', seeds: [{ id: 7, date: new Date().toDateString(), teams: [{ name: '' }, { name: '' }] }], }, ]; @@ -102,27 +99,37 @@ const BracketWithCustomSeed = () => {
-
{/* Reduced marginBottom by 10% from 60px */} +
( -
{title}
// Reduced marginBottom by 10% from 30px +
{title}
)} swipeableProps={{ enableMouseEvents: false }} />
+ {/* Subtle divider */} +
+ {/* Competitors List */} -
{/* Reduced maxWidth by 10% from 550px, padding by 10% from 0 30px */} -

Competitors

{/* Reduced marginBottom by 10% from 25px */} +
+

Competitors

{competitors.map((competitor, index) => (
{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', - padding: '14.4px 7.2px', // Reduced by 10% from 16px 8px - marginBottom: '10.8px', // Reduced by 10% from 12px - borderBottom: index < competitors.length - 1 ? '0.675px solid white' : 'none', // Reduced by 10% from 0.75px + padding: '14.4px 7.2px', + marginBottom: '10.8px', + borderBottom: index < competitors.length - 1 ? '0.675px solid white' : 'none', cursor: 'pointer', transition: 'all 0.3s ease', }} onMouseEnter={(e) => { e.currentTarget.style.backgroundColor = '#1a1a1a'; - e.currentTarget.style.paddingLeft = '14.4px'; // Reduced by 10% from 16px - e.currentTarget.style.paddingRight = '14.4px'; // Reduced by 10% from 16px + e.currentTarget.style.paddingLeft = '14.4px'; + e.currentTarget.style.paddingRight = '14.4px'; }} onMouseLeave={(e) => { e.currentTarget.style.backgroundColor = ''; - e.currentTarget.style.paddingLeft = '7.2px'; // Reduced by 10% from 8px - e.currentTarget.style.paddingRight = '7.2px'; // Reduced by 10% from 8px + e.currentTarget.style.paddingLeft = '7.2px'; + e.currentTarget.style.paddingRight = '7.2px'; }} > {competitor.name} From 4fe7e50dd362173e2eb5748007ca3725b278fdd2 Mon Sep 17 00:00:00 2001 From: = Date: Fri, 20 Sep 2024 14:30:48 -0300 Subject: [PATCH 06/10] brackets --- better-app/app/BracketStyles.css | 33 - better-app/app/roundDetails/page.tsx | 298 +++++---- better-app/package-lock.json | 871 ++++++++++++++++++++++++++- better-app/package.json | 11 +- 4 files changed, 1028 insertions(+), 185 deletions(-) delete mode 100644 better-app/app/BracketStyles.css diff --git a/better-app/app/BracketStyles.css b/better-app/app/BracketStyles.css deleted file mode 100644 index 5acd95f..0000000 --- a/better-app/app/BracketStyles.css +++ /dev/null @@ -1,33 +0,0 @@ -/* Competitor table */ -.competitor-table { - width: 100%; - border-collapse: collapse; - margin-top: 20px; - } - - .competitor-table th { - text-align: left; - padding-bottom: 10px; - color: #fff; - font-size: 18px; - border-bottom: 2px solid #444; /* Darker gray for subtle header separator */ - } - - .competitor-table td { - padding: 12px 8px; /* More spacious feel with padding */ - text-align: left; - color: #fff; - font-size: 16px; - border-bottom: 1px solid #444; /* Subtle light gray row divider */ - transition: background-color 0.3s ease; - } - - .competitor-table tr:hover { - background-color: #1a1a1a; - box-shadow: none; /* Removed the boxy shadow */ - } - - .competitor-table tr { - border: none; /* Remove row borders */ - } - \ No newline at end of file diff --git a/better-app/app/roundDetails/page.tsx b/better-app/app/roundDetails/page.tsx index e79f5aa..ebaf194 100644 --- a/better-app/app/roundDetails/page.tsx +++ b/better-app/app/roundDetails/page.tsx @@ -1,46 +1,25 @@ 'use client'; -import React, { useState, useEffect, useRef } from 'react'; +import React, { useState } from 'react'; import { Bracket, IRoundProps, Seed, SeedItem, SeedTeam, IRenderSeedProps } from 'react-brackets'; -import { useRouter } from 'next/navigation'; import '../drawer.css'; // Assuming drawer.css is in the same directory -import '../bracketStyles.css'; // Adjust path according to your project structure const CustomSeed = ({ seed, breakpoint }: IRenderSeedProps) => { - const router = useRouter(); - - const isRoundOne = typeof seed.id === 'number' && seed.id <= 4; - return ( isRoundOne && router.push(`/some-link/${seed.id}`)} + style={{ cursor: 'default' }} > ) => { - if (isRoundOne) { - e.currentTarget.style.backgroundColor = '#1a1a1a'; - } - }} - onMouseLeave={(e: React.MouseEvent) => { - if (isRoundOne) { - e.currentTarget.style.backgroundColor = 'black'; - } + fontSize: '14px', // Reduced font size }} >
- - {isRoundOne ? (seed.teams[0]?.name || 'NO TEAM') : ''} - - - {isRoundOne ? (seed.teams[1]?.name || 'NO TEAM') : ''} - + {seed.teams[0]?.name || 'NO TEAM'} + {seed.teams[1]?.name || 'NO TEAM'}
@@ -49,133 +28,190 @@ const CustomSeed = ({ seed, breakpoint }: IRenderSeedProps) => { const rounds: IRoundProps[] = [ { + title: 'Round 1', seeds: [ - { id: 1, date: new Date().toDateString(), teams: [{ name: 'Team A' }, { name: 'Team B' }] }, - { id: 2, date: new Date().toDateString(), teams: [{ name: 'Team C' }, { name: 'Team D' }] }, - { id: 3, date: new Date().toDateString(), teams: [{ name: 'Team E' }, { name: 'Team F' }] }, - { id: 4, date: new Date().toDateString(), teams: [{ name: 'Team G' }, { name: 'Team H' }] }, + { + id: 1, + teams: [{ name: 'Manali Niggums' }, { name: 'Frah Frah Got' }], + }, + { + id: 2, + teams: [{ name: 'Team C' }, { name: 'Team D' }], + }, + { + id: 3, + teams: [{ name: 'Team E' }, { name: 'Team F' }], + }, + { + id: 4, + teams: [{ name: 'Team G' }, { name: 'Team H' }], + }, ], }, { + title: 'Round 2', seeds: [ - { id: 5, date: new Date().toDateString(), teams: [{ name: '' }, { name: '' }] }, - { id: 6, date: new Date().toDateString(), teams: [{ name: '' }, { name: '' }] }, + { + id: 5, + teams: [{ name: 'TBD' }, { name: 'TBD' }], + }, + { + id: 6, + teams: [{ name: 'TBD' }, { name: 'TBD' }], + }, ], }, { - seeds: [{ id: 7, date: new Date().toDateString(), teams: [{ name: '' }, { name: '' }] }], + title: 'Final', + seeds: [ + { + id: 7, + teams: [{ name: 'TBD' }, { name: 'TBD' }], + }, + ], }, ]; -const BracketWithCustomSeed = () => { - const [selectedTeam, setSelectedTeam] = useState(null); - const drawerRef = useRef(null); - - const competitors = [ - { name: 'Team A', status: 'active' }, - { name: 'Team B', status: 'active' }, - { name: 'Team C', status: 'active' }, - { name: 'Team D', status: 'active' }, - { name: 'Team E', status: 'active' }, - { name: 'Team F', status: 'active' }, - { name: 'Team G', status: 'active' }, - { name: 'Team H', status: 'active' }, - ]; - - useEffect(() => { - const handleClickOutside = (event: MouseEvent) => { - if (drawerRef.current && !drawerRef.current.contains(event.target as Node)) { - setSelectedTeam(null); - } - }; +const competitors = [ + { name: 'Team A', status: 'active' }, + { name: 'Team B', status: 'active' }, + { name: 'Team C', status: 'active' }, + { name: 'Team D', status: 'active' }, + { name: 'Team E', status: 'active' }, + { name: 'Team F', status: 'active' }, + { name: 'Team G', status: 'active' }, + { name: 'Team H', status: 'active' }, +]; - document.addEventListener('mousedown', handleClickOutside); - return () => { - document.removeEventListener('mousedown', handleClickOutside); - }; - }, []); +const BracketWithToggle = () => { + const [showBracket, setShowBracket] = useState(true); return ( -
-
- ( -
{title}
- )} - swipeableProps={{ enableMouseEvents: false }} - /> +
+
+ +
- {/* Subtle divider */} -
- - {/* Competitors List */} -
-

Competitors

- {competitors.map((competitor, index) => ( -
setSelectedTeam(competitor.name)} - style={{ - display: 'flex', - justifyContent: 'space-between', - alignItems: 'center', - padding: '14.4px 7.2px', - marginBottom: '10.8px', - borderBottom: index < competitors.length - 1 ? '0.675px solid white' : 'none', - cursor: 'pointer', - transition: 'all 0.3s ease', - }} - onMouseEnter={(e) => { - e.currentTarget.style.backgroundColor = '#1a1a1a'; - e.currentTarget.style.paddingLeft = '14.4px'; - e.currentTarget.style.paddingRight = '14.4px'; - }} - onMouseLeave={(e) => { - e.currentTarget.style.backgroundColor = ''; - e.currentTarget.style.paddingLeft = '7.2px'; - e.currentTarget.style.paddingRight = '7.2px'; + {showBracket ? ( +
+
- {competitor.name} - - {competitor.status === 'active' ? 'Active' : 'Eliminated'} - -
- ))} -
- - {selectedTeam && ( -
- -
-

{selectedTeam}

-

{selectedTeam} has been consistently performing well.

+ ( +
+ {title} +
+ )} + swipeableProps={{ + enableMouseEvents: true, + animateHeight: true, + index: 0, // Start from Round 1 + }} + />
+ ) : ( +
+

Competitors

+ {competitors.map((competitor, index) => ( +
+ {competitor.name} + + {competitor.status === 'active' ? 'Active' : 'Eliminated'} + +
+ ))} +
)}
); }; -export default BracketWithCustomSeed; +export default BracketWithToggle; diff --git a/better-app/package-lock.json b/better-app/package-lock.json index 4e50e9e..d26eb41 100644 --- a/better-app/package-lock.json +++ b/better-app/package-lock.json @@ -10,6 +10,7 @@ "dependencies": { "next": "14.2.11", "react": "^18", + "react-brackets": "^0.4.7", "react-dom": "^18" }, "devDependencies": { @@ -35,6 +36,465 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/@ampproject/remapping": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.3.0.tgz", + "integrity": "sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==", + "license": "Apache-2.0", + "peer": true, + "dependencies": { + "@jridgewell/gen-mapping": "^0.3.5", + "@jridgewell/trace-mapping": "^0.3.24" + }, + "engines": { + "node": ">=6.0.0" + } + }, + "node_modules/@babel/code-frame": { + "version": "7.24.7", + "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.24.7.tgz", + "integrity": "sha512-BcYH1CVJBO9tvyIZ2jVeXgSIMvGZ2FDRvDdOIVQyuklNKSsx+eppDEBq/g47Ayw+RqNFE+URvOShmf+f/qwAlA==", + "license": "MIT", + "dependencies": { + "@babel/highlight": "^7.24.7", + "picocolors": "^1.0.0" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/compat-data": { + "version": "7.25.4", + "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.25.4.tgz", + "integrity": "sha512-+LGRog6RAsCJrrrg/IO6LGmpphNe5DiK30dGjCoxxeGv49B10/3XYGxPsAwrDlMFcFEvdAUavDT8r9k/hSyQqQ==", + "license": "MIT", + "peer": true, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/core": { + "version": "7.25.2", + "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.25.2.tgz", + "integrity": "sha512-BBt3opiCOxUr9euZ5/ro/Xv8/V7yJ5bjYMqG/C1YAo8MIKAnumZalCN+msbci3Pigy4lIQfPUpfMM27HMGaYEA==", + "license": "MIT", + "peer": true, + "dependencies": { + "@ampproject/remapping": "^2.2.0", + "@babel/code-frame": "^7.24.7", + "@babel/generator": "^7.25.0", + "@babel/helper-compilation-targets": "^7.25.2", + "@babel/helper-module-transforms": "^7.25.2", + "@babel/helpers": "^7.25.0", + "@babel/parser": "^7.25.0", + "@babel/template": "^7.25.0", + "@babel/traverse": "^7.25.2", + "@babel/types": "^7.25.2", + "convert-source-map": "^2.0.0", + "debug": "^4.1.0", + "gensync": "^1.0.0-beta.2", + "json5": "^2.2.3", + "semver": "^6.3.1" + }, + "engines": { + "node": ">=6.9.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/babel" + } + }, + "node_modules/@babel/core/node_modules/json5": { + "version": "2.2.3", + "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz", + "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==", + "license": "MIT", + "peer": true, + "bin": { + "json5": "lib/cli.js" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/@babel/core/node_modules/semver": { + "version": "6.3.1", + "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz", + "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==", + "license": "ISC", + "peer": true, + "bin": { + "semver": "bin/semver.js" + } + }, + "node_modules/@babel/generator": { + "version": "7.25.6", + "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.25.6.tgz", + "integrity": "sha512-VPC82gr1seXOpkjAAKoLhP50vx4vGNlF4msF64dSFq1P8RfB+QAuJWGHPXXPc8QyfVWwwB/TNNU4+ayZmHNbZw==", + "license": "MIT", + "dependencies": { + "@babel/types": "^7.25.6", + "@jridgewell/gen-mapping": "^0.3.5", + "@jridgewell/trace-mapping": "^0.3.25", + "jsesc": "^2.5.1" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/helper-annotate-as-pure": { + "version": "7.24.7", + "resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.24.7.tgz", + "integrity": "sha512-BaDeOonYvhdKw+JoMVkAixAAJzG2jVPIwWoKBPdYuY9b452e2rPuI9QPYh3KpofZ3pW2akOmwZLOiOsHMiqRAg==", + "license": "MIT", + "dependencies": { + "@babel/types": "^7.24.7" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/helper-compilation-targets": { + "version": "7.25.2", + "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.25.2.tgz", + "integrity": "sha512-U2U5LsSaZ7TAt3cfaymQ8WHh0pxvdHoEk6HVpaexxixjyEquMh0L0YNJNM6CTGKMXV1iksi0iZkGw4AcFkPaaw==", + "license": "MIT", + "peer": true, + "dependencies": { + "@babel/compat-data": "^7.25.2", + "@babel/helper-validator-option": "^7.24.8", + "browserslist": "^4.23.1", + "lru-cache": "^5.1.1", + "semver": "^6.3.1" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/helper-compilation-targets/node_modules/lru-cache": { + "version": "5.1.1", + "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz", + "integrity": "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==", + "license": "ISC", + "peer": true, + "dependencies": { + "yallist": "^3.0.2" + } + }, + "node_modules/@babel/helper-compilation-targets/node_modules/semver": { + "version": "6.3.1", + "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz", + "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==", + "license": "ISC", + "peer": true, + "bin": { + "semver": "bin/semver.js" + } + }, + "node_modules/@babel/helper-module-imports": { + "version": "7.24.7", + "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.24.7.tgz", + "integrity": "sha512-8AyH3C+74cgCVVXow/myrynrAGv+nTVg5vKu2nZph9x7RcRwzmh0VFallJuFTZ9mx6u4eSdXZfcOzSqTUm0HCA==", + "license": "MIT", + "dependencies": { + "@babel/traverse": "^7.24.7", + "@babel/types": "^7.24.7" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/helper-module-transforms": { + "version": "7.25.2", + "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.25.2.tgz", + "integrity": "sha512-BjyRAbix6j/wv83ftcVJmBt72QtHI56C7JXZoG2xATiLpmoC7dpd8WnkikExHDVPpi/3qCmO6WY1EaXOluiecQ==", + "license": "MIT", + "peer": true, + "dependencies": { + "@babel/helper-module-imports": "^7.24.7", + "@babel/helper-simple-access": "^7.24.7", + "@babel/helper-validator-identifier": "^7.24.7", + "@babel/traverse": "^7.25.2" + }, + "engines": { + "node": ">=6.9.0" + }, + "peerDependencies": { + "@babel/core": "^7.0.0" + } + }, + "node_modules/@babel/helper-plugin-utils": { + "version": "7.24.8", + "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.24.8.tgz", + "integrity": "sha512-FFWx5142D8h2Mgr/iPVGH5G7w6jDn4jUSpZTyDnQO0Yn7Ks2Kuz6Pci8H6MPCoUJegd/UZQ3tAvfLCxQSnWWwg==", + "license": "MIT", + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/helper-simple-access": { + "version": "7.24.7", + "resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.24.7.tgz", + "integrity": "sha512-zBAIvbCMh5Ts+b86r/CjU+4XGYIs+R1j951gxI3KmmxBMhCg4oQMsv6ZXQ64XOm/cvzfU1FmoCyt6+owc5QMYg==", + "license": "MIT", + "peer": true, + "dependencies": { + "@babel/traverse": "^7.24.7", + "@babel/types": "^7.24.7" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/helper-string-parser": { + "version": "7.24.8", + "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.24.8.tgz", + "integrity": "sha512-pO9KhhRcuUyGnJWwyEgnRJTSIZHiT+vMD0kPeD+so0l7mxkMT19g3pjY9GTnHySck/hDzq+dtW/4VgnMkippsQ==", + "license": "MIT", + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/helper-validator-identifier": { + "version": "7.24.7", + "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.24.7.tgz", + "integrity": "sha512-rR+PBcQ1SMQDDyF6X0wxtG8QyLCgUB0eRAGguqRLfkCA87l7yAP7ehq8SNj96OOGTO8OBV70KhuFYcIkHXOg0w==", + "license": "MIT", + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/helper-validator-option": { + "version": "7.24.8", + "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.24.8.tgz", + "integrity": "sha512-xb8t9tD1MHLungh/AIoWYN+gVHaB9kwlu8gffXGSt3FFEIT7RjS+xWbc2vUD1UTZdIpKj/ab3rdqJ7ufngyi2Q==", + "license": "MIT", + "peer": true, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/helpers": { + "version": "7.25.6", + "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.25.6.tgz", + "integrity": "sha512-Xg0tn4HcfTijTwfDwYlvVCl43V6h4KyVVX2aEm4qdO/PC6L2YvzLHFdmxhoeSA3eslcE6+ZVXHgWwopXYLNq4Q==", + "license": "MIT", + "peer": true, + "dependencies": { + "@babel/template": "^7.25.0", + "@babel/types": "^7.25.6" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/highlight": { + "version": "7.24.7", + "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.24.7.tgz", + "integrity": "sha512-EStJpq4OuY8xYfhGVXngigBJRWxftKX9ksiGDnmlY3o7B/V7KIAc9X4oiK87uPJSc/vs5L869bem5fhZa8caZw==", + "license": "MIT", + "dependencies": { + "@babel/helper-validator-identifier": "^7.24.7", + "chalk": "^2.4.2", + "js-tokens": "^4.0.0", + "picocolors": "^1.0.0" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/highlight/node_modules/ansi-styles": { + "version": "3.2.1", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz", + "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==", + "license": "MIT", + "dependencies": { + "color-convert": "^1.9.0" + }, + "engines": { + "node": ">=4" + } + }, + "node_modules/@babel/highlight/node_modules/chalk": { + "version": "2.4.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz", + "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==", + "license": "MIT", + "dependencies": { + "ansi-styles": "^3.2.1", + "escape-string-regexp": "^1.0.5", + "supports-color": "^5.3.0" + }, + "engines": { + "node": ">=4" + } + }, + "node_modules/@babel/highlight/node_modules/color-convert": { + "version": "1.9.3", + "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz", + "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==", + "license": "MIT", + "dependencies": { + "color-name": "1.1.3" + } + }, + "node_modules/@babel/highlight/node_modules/color-name": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz", + "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==", + "license": "MIT" + }, + "node_modules/@babel/highlight/node_modules/escape-string-regexp": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz", + "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==", + "license": "MIT", + "engines": { + "node": ">=0.8.0" + } + }, + "node_modules/@babel/highlight/node_modules/has-flag": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz", + "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==", + "license": "MIT", + "engines": { + "node": ">=4" + } + }, + "node_modules/@babel/highlight/node_modules/supports-color": { + "version": "5.5.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz", + "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==", + "license": "MIT", + "dependencies": { + "has-flag": "^3.0.0" + }, + "engines": { + "node": ">=4" + } + }, + "node_modules/@babel/parser": { + "version": "7.25.6", + "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.25.6.tgz", + "integrity": "sha512-trGdfBdbD0l1ZPmcJ83eNxB9rbEax4ALFTF7fN386TMYbeCQbyme5cOEXQhbGXKebwGaB/J52w1mrklMcbgy6Q==", + "license": "MIT", + "dependencies": { + "@babel/types": "^7.25.6" + }, + "bin": { + "parser": "bin/babel-parser.js" + }, + "engines": { + "node": ">=6.0.0" + } + }, + "node_modules/@babel/plugin-syntax-jsx": { + "version": "7.24.7", + "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.24.7.tgz", + "integrity": "sha512-6ddciUPe/mpMnOKv/U+RSd2vvVy+Yw/JfBB0ZHYjEZt9NLHmCUylNYlsbqCCS1Bffjlb0fCwC9Vqz+sBz6PsiQ==", + "license": "MIT", + "dependencies": { + "@babel/helper-plugin-utils": "^7.24.7" + }, + "engines": { + "node": ">=6.9.0" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, + "node_modules/@babel/runtime": { + "version": "7.0.0", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.0.0.tgz", + "integrity": "sha512-7hGhzlcmg01CvH1EHdSPVXYX1aJ8KCEyz6I9xYIi/asDtzBPMyMhVibhM/K6g/5qnKBwjZtp10bNZIEFTRW1MA==", + "license": "MIT", + "dependencies": { + "regenerator-runtime": "^0.12.0" + } + }, + "node_modules/@babel/template": { + "version": "7.25.0", + "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.25.0.tgz", + "integrity": "sha512-aOOgh1/5XzKvg1jvVz7AVrx2piJ2XBi227DHmbY6y+bM9H2FlN+IfecYu4Xl0cNiiVejlsCri89LUsbj8vJD9Q==", + "license": "MIT", + "dependencies": { + "@babel/code-frame": "^7.24.7", + "@babel/parser": "^7.25.0", + "@babel/types": "^7.25.0" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/traverse": { + "version": "7.25.6", + "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.25.6.tgz", + "integrity": "sha512-9Vrcx5ZW6UwK5tvqsj0nGpp/XzqthkT0dqIc9g1AdtygFToNtTF67XzYS//dm+SAK9cp3B9R4ZO/46p63SCjlQ==", + "license": "MIT", + "dependencies": { + "@babel/code-frame": "^7.24.7", + "@babel/generator": "^7.25.6", + "@babel/parser": "^7.25.6", + "@babel/template": "^7.25.0", + "@babel/types": "^7.25.6", + "debug": "^4.3.1", + "globals": "^11.1.0" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/traverse/node_modules/globals": { + "version": "11.12.0", + "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz", + "integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==", + "license": "MIT", + "engines": { + "node": ">=4" + } + }, + "node_modules/@babel/types": { + "version": "7.25.6", + "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.25.6.tgz", + "integrity": "sha512-/l42B1qxpG6RdfYf343Uw1vmDjeNhneUXtzhojE7pDgfpEypmRhI6j1kr17XCVv4Cgl9HdAiQY2x0GwKm7rWCw==", + "license": "MIT", + "dependencies": { + "@babel/helper-string-parser": "^7.24.8", + "@babel/helper-validator-identifier": "^7.24.7", + "to-fast-properties": "^2.0.0" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@emotion/is-prop-valid": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.3.0.tgz", + "integrity": "sha512-SHetuSLvJDzuNbOdtPVbq6yMMMlLoW5Q94uDqJZqy50gcmAjxFkVqmzqSGEFq9gT2iMuIeKV1PXVWmvUhuZLlQ==", + "license": "MIT", + "dependencies": { + "@emotion/memoize": "^0.9.0" + } + }, + "node_modules/@emotion/memoize": { + "version": "0.9.0", + "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.9.0.tgz", + "integrity": "sha512-30FAj7/EoJ5mwVPOWhAyCX+FPfMDrVecJAM+Iw9NRoSl4BBAQeqj4cApHHUXOVvIPgLVDsCFoz/hGD+5QQD1GQ==", + "license": "MIT" + }, + "node_modules/@emotion/stylis": { + "version": "0.8.5", + "resolved": "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.8.5.tgz", + "integrity": "sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ==", + "license": "MIT" + }, + "node_modules/@emotion/unitless": { + "version": "0.7.5", + "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz", + "integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==", + "license": "MIT" + }, "node_modules/@eslint-community/eslint-utils": { "version": "4.4.0", "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz", @@ -174,7 +634,6 @@ "version": "0.3.5", "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.5.tgz", "integrity": "sha512-IzL8ZoEDIBRWEzlCcRhOaCupYyN5gdIK+Q6fbFdPDg6HqX6jpkItn7DFIpW9LQzXG6Df9sA7+OKnq0qlz/GaQg==", - "dev": true, "dependencies": { "@jridgewell/set-array": "^1.2.1", "@jridgewell/sourcemap-codec": "^1.4.10", @@ -188,7 +647,6 @@ "version": "3.1.2", "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz", "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==", - "dev": true, "engines": { "node": ">=6.0.0" } @@ -197,7 +655,6 @@ "version": "1.2.1", "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.2.1.tgz", "integrity": "sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==", - "dev": true, "engines": { "node": ">=6.0.0" } @@ -205,14 +662,12 @@ "node_modules/@jridgewell/sourcemap-codec": { "version": "1.5.0", "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz", - "integrity": "sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==", - "dev": true + "integrity": "sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==" }, "node_modules/@jridgewell/trace-mapping": { "version": "0.3.25", "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz", "integrity": "sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==", - "dev": true, "dependencies": { "@jridgewell/resolve-uri": "^3.1.0", "@jridgewell/sourcemap-codec": "^1.4.14" @@ -1018,6 +1473,22 @@ "node": ">= 0.4" } }, + "node_modules/babel-plugin-styled-components": { + "version": "2.1.4", + "resolved": "https://registry.npmjs.org/babel-plugin-styled-components/-/babel-plugin-styled-components-2.1.4.tgz", + "integrity": "sha512-Xgp9g+A/cG47sUyRwwYxGM4bR/jDRg5N6it/8+HxCnbT5XNKSKDT9xm4oag/osgqjC2It/vH0yXsomOG6k558g==", + "license": "MIT", + "dependencies": { + "@babel/helper-annotate-as-pure": "^7.22.5", + "@babel/helper-module-imports": "^7.22.5", + "@babel/plugin-syntax-jsx": "^7.22.5", + "lodash": "^4.17.21", + "picomatch": "^2.3.1" + }, + "peerDependencies": { + "styled-components": ">= 2" + } + }, "node_modules/balanced-match": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz", @@ -1058,6 +1529,39 @@ "node": ">=8" } }, + "node_modules/browserslist": { + "version": "4.23.3", + "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.23.3.tgz", + "integrity": "sha512-btwCFJVjI4YWDNfau8RhZ+B1Q/VLoUITrm3RlP6y1tYGWIOa+InuYiRGXUBXo8nA1qKmHMyLB/iVQg5TT4eFoA==", + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/browserslist" + }, + { + "type": "tidelift", + "url": "https://tidelift.com/funding/github/npm/browserslist" + }, + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], + "license": "MIT", + "peer": true, + "dependencies": { + "caniuse-lite": "^1.0.30001646", + "electron-to-chromium": "^1.5.4", + "node-releases": "^2.0.18", + "update-browserslist-db": "^1.1.0" + }, + "bin": { + "browserslist": "cli.js" + }, + "engines": { + "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7" + } + }, "node_modules/busboy": { "version": "1.6.0", "resolved": "https://registry.npmjs.org/busboy/-/busboy-1.6.0.tgz", @@ -1106,6 +1610,15 @@ "node": ">= 6" } }, + "node_modules/camelize": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.1.tgz", + "integrity": "sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ==", + "license": "MIT", + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, "node_modules/caniuse-lite": { "version": "1.0.30001660", "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001660.tgz", @@ -1215,6 +1728,13 @@ "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==", "dev": true }, + "node_modules/convert-source-map": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz", + "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==", + "license": "MIT", + "peer": true + }, "node_modules/cross-spawn": { "version": "7.0.3", "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz", @@ -1229,6 +1749,26 @@ "node": ">= 8" } }, + "node_modules/css-color-keywords": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz", + "integrity": "sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg==", + "license": "ISC", + "engines": { + "node": ">=4" + } + }, + "node_modules/css-to-react-native": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.2.0.tgz", + "integrity": "sha512-e8RKaLXMOFii+02mOlqwjbD00KSEKqblnpO9e++1aXS1fPQOpS1YoqdVHBqPjHNoxeF2mimzVqawm2KCbEdtHQ==", + "license": "MIT", + "dependencies": { + "camelize": "^1.0.0", + "css-color-keywords": "^1.0.0", + "postcss-value-parser": "^4.0.2" + } + }, "node_modules/cssesc": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz", @@ -1308,7 +1848,6 @@ "version": "4.3.7", "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.7.tgz", "integrity": "sha512-Er2nc/H7RrMXZBFCEim6TCmMk02Z8vLC2Rbi1KEBggpo0fS6l0S1nnapwmIi3yW/+GOJap1Krg4w0Hg80oCqgQ==", - "dev": true, "dependencies": { "ms": "^2.1.3" }, @@ -1435,6 +1974,13 @@ "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==", "dev": true }, + "node_modules/electron-to-chromium": { + "version": "1.5.26", + "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.26.tgz", + "integrity": "sha512-Z+OMe9M/V6Ep9n/52+b7lkvYEps26z4Yz3vjWL1V61W0q+VLF1pOHhMY17sa4roz4AWmULSI8E6SAojZA5L0YQ==", + "license": "ISC", + "peer": true + }, "node_modules/emoji-regex": { "version": "9.2.2", "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz", @@ -1632,6 +2178,16 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/escalade": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.2.0.tgz", + "integrity": "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==", + "license": "MIT", + "peer": true, + "engines": { + "node": ">=6" + } + }, "node_modules/escape-string-regexp": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz", @@ -2264,6 +2820,16 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/gensync": { + "version": "1.0.0-beta.2", + "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz", + "integrity": "sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==", + "license": "MIT", + "peer": true, + "engines": { + "node": ">=6.9.0" + } + }, "node_modules/get-intrinsic": { "version": "1.2.4", "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.4.tgz", @@ -2525,6 +3091,15 @@ "node": ">= 0.4" } }, + "node_modules/hoist-non-react-statics": { + "version": "3.3.2", + "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz", + "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==", + "license": "BSD-3-Clause", + "dependencies": { + "react-is": "^16.7.0" + } + }, "node_modules/ignore": { "version": "5.3.2", "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz", @@ -3054,6 +3629,18 @@ "js-yaml": "bin/js-yaml.js" } }, + "node_modules/jsesc": { + "version": "2.5.2", + "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-2.5.2.tgz", + "integrity": "sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==", + "license": "MIT", + "bin": { + "jsesc": "bin/jsesc" + }, + "engines": { + "node": ">=4" + } + }, "node_modules/json-buffer": { "version": "3.0.1", "resolved": "https://registry.npmjs.org/json-buffer/-/json-buffer-3.0.1.tgz", @@ -3099,6 +3686,12 @@ "node": ">=4.0" } }, + "node_modules/keycode": { + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/keycode/-/keycode-2.2.1.tgz", + "integrity": "sha512-Rdgz9Hl9Iv4QKi8b0OlCRQEzp4AgVxyCtz5S/+VIHezDmrDhkp2N2TqBWOLz0/gbeREXOOiI9/4b8BY9uw2vFg==", + "license": "MIT" + }, "node_modules/keyv": { "version": "4.5.4", "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz", @@ -3169,6 +3762,12 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/lodash": { + "version": "4.17.21", + "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz", + "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==", + "license": "MIT" + }, "node_modules/lodash.merge": { "version": "4.6.2", "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz", @@ -3247,8 +3846,7 @@ "node_modules/ms": { "version": "2.1.3", "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz", - "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==", - "dev": true + "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==" }, "node_modules/mz": { "version": "2.7.0", @@ -3360,6 +3958,13 @@ "node": "^10 || ^12 || >=14" } }, + "node_modules/node-releases": { + "version": "2.0.18", + "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.18.tgz", + "integrity": "sha512-d9VeXT4SJ7ZeOqGX6R5EM022wpL+eWPooLI+5UpWn2jCT1aosUQEhQP214x33Wkwx3JQMvIm+tIoVOdodFS40g==", + "license": "MIT", + "peer": true + }, "node_modules/normalize-path": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz", @@ -3373,7 +3978,6 @@ "version": "4.1.1", "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==", - "dev": true, "engines": { "node": ">=0.10.0" } @@ -3640,7 +4244,6 @@ "version": "2.3.1", "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz", "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==", - "dev": true, "engines": { "node": ">=8.6" }, @@ -3827,8 +4430,7 @@ "node_modules/postcss-value-parser": { "version": "4.2.0", "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz", - "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==", - "dev": true + "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==" }, "node_modules/prelude-ls": { "version": "1.2.1", @@ -3843,7 +4445,6 @@ "version": "15.8.1", "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz", "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==", - "dev": true, "dependencies": { "loose-envify": "^1.4.0", "object-assign": "^4.1.1", @@ -3890,6 +4491,43 @@ "node": ">=0.10.0" } }, + "node_modules/react-brackets": { + "version": "0.4.7", + "resolved": "https://registry.npmjs.org/react-brackets/-/react-brackets-0.4.7.tgz", + "integrity": "sha512-5NynHxC32gEe9vuLQJvD2JEtHXg2gI0R6MWVD+uSYhQCAlEdwlKbFWNdrP5MIt1buyxrs2F/tr1EIW6+eBCocw==", + "license": "MIT", + "dependencies": { + "react-swipeable-views": "^0.13.9", + "styled-components": "^5.1.1" + }, + "engines": { + "node": ">=10" + }, + "peerDependencies": { + "react": "^17.0.0", + "react-swipeable-views": "^0.13.9", + "styled-components": "^5.1.1" + } + }, + "node_modules/react-brackets/node_modules/react-swipeable-views": { + "version": "0.13.9", + "resolved": "https://registry.npmjs.org/react-swipeable-views/-/react-swipeable-views-0.13.9.tgz", + "integrity": "sha512-WXC2FKYvZ9QdJ31v9LjEJEl1bA7E4AcaloTkbW0uU0dYf5uvv4aOpiyxubvOkVl1a5L2UAHmKSif4TmJ9usrSg==", + "license": "MIT", + "dependencies": { + "@babel/runtime": "7.0.0", + "prop-types": "^15.5.4", + "react-swipeable-views-core": "^0.13.7", + "react-swipeable-views-utils": "^0.13.9", + "warning": "^4.0.1" + }, + "engines": { + "node": ">=6.0.0" + }, + "peerDependencies": { + "react": "^15.3.0 || ^16.0.0" + } + }, "node_modules/react-dom": { "version": "18.3.1", "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz", @@ -3905,8 +4543,84 @@ "node_modules/react-is": { "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", - "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==", - "dev": true + "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" + }, + "node_modules/react-swipeable-views-core": { + "version": "0.13.7", + "resolved": "https://registry.npmjs.org/react-swipeable-views-core/-/react-swipeable-views-core-0.13.7.tgz", + "integrity": "sha512-ekn9oDYfBt0oqJSGGwLEhKvn+QaqMGTy//9dURTLf+vp7W5j6GvmKryYdnwJCDITaPFI2hujXV4CH9krhvaE5w==", + "license": "MIT", + "dependencies": { + "@babel/runtime": "7.0.0", + "warning": "^4.0.1" + }, + "engines": { + "node": ">=6.0.0" + } + }, + "node_modules/react-swipeable-views-utils": { + "version": "0.13.9", + "resolved": "https://registry.npmjs.org/react-swipeable-views-utils/-/react-swipeable-views-utils-0.13.9.tgz", + "integrity": "sha512-QLGxRKrbJCbWz94vkWLzb1Daaa2Y/TZKmsNKQ6WSNrS+chrlfZ3z9tqZ7YUJlW6pRWp3QZdLSY3UE3cN0TXXmw==", + "license": "MIT", + "dependencies": { + "@babel/runtime": "7.0.0", + "keycode": "^2.1.7", + "prop-types": "^15.6.0", + "react-event-listener": "^0.6.0", + "react-swipeable-views-core": "^0.13.7", + "shallow-equal": "^1.2.1" + }, + "engines": { + "node": ">=6.0.0" + } + }, + "node_modules/react-swipeable-views-utils/node_modules/react": { + "version": "16.14.0", + "resolved": "https://registry.npmjs.org/react/-/react-16.14.0.tgz", + "integrity": "sha512-0X2CImDkJGApiAlcf0ODKIneSwBPhqJawOa5wCtKbu7ZECrmS26NvtSILynQ66cgkT/RJ4LidJOc3bUESwmU8g==", + "license": "MIT", + "peer": true, + "dependencies": { + "loose-envify": "^1.1.0", + "object-assign": "^4.1.1", + "prop-types": "^15.6.2" + }, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/react-swipeable-views-utils/node_modules/react-event-listener": { + "version": "0.6.6", + "resolved": "https://registry.npmjs.org/react-event-listener/-/react-event-listener-0.6.6.tgz", + "integrity": "sha512-+hCNqfy7o9wvO6UgjqFmBzARJS7qrNoda0VqzvOuioEpoEXKutiKuv92dSz6kP7rYLmyHPyYNLesi5t/aH1gfw==", + "license": "MIT", + "dependencies": { + "@babel/runtime": "^7.2.0", + "prop-types": "^15.6.0", + "warning": "^4.0.1" + }, + "peerDependencies": { + "react": "^16.3.0" + } + }, + "node_modules/react-swipeable-views-utils/node_modules/react-event-listener/node_modules/@babel/runtime": { + "version": "7.25.6", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.25.6.tgz", + "integrity": "sha512-VBj9MYyDb9tuLq7yzqjgzt6Q+IBQLrGZfdjOekyEirZPHxXWoTSGUTMrpsfi58Up73d13NfYLv8HT9vmznjzhQ==", + "license": "MIT", + "dependencies": { + "regenerator-runtime": "^0.14.0" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/react-swipeable-views-utils/node_modules/regenerator-runtime": { + "version": "0.14.1", + "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz", + "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==", + "license": "MIT" }, "node_modules/read-cache": { "version": "1.0.0", @@ -3950,6 +4664,12 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/regenerator-runtime": { + "version": "0.12.1", + "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.12.1.tgz", + "integrity": "sha512-odxIc1/vDlo4iZcfXqRYFj0vpXFNoGdKMAUieAlFYO6m/nl5e9KR/beGf41z4a1FI+aQgtjhuaSlDxQ0hmkrHg==", + "license": "MIT" + }, "node_modules/regexp.prototype.flags": { "version": "1.5.2", "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.5.2.tgz", @@ -4160,6 +4880,18 @@ "node": ">= 0.4" } }, + "node_modules/shallow-equal": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/shallow-equal/-/shallow-equal-1.2.1.tgz", + "integrity": "sha512-S4vJDjHHMBaiZuT9NPb616CSmLf618jawtv3sufLl6ivK8WocjAo58cXwbRV1cgqxH0Qbv+iUt6m05eqEa2IRA==", + "license": "MIT" + }, + "node_modules/shallowequal": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz", + "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==", + "license": "MIT" + }, "node_modules/shebang-command": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz", @@ -4454,6 +5186,57 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/styled-components": { + "version": "5.3.11", + "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-5.3.11.tgz", + "integrity": "sha512-uuzIIfnVkagcVHv9nE0VPlHPSCmXIUGKfJ42LNjxCCTDTL5sgnJ8Z7GZBq0EnLYGln77tPpEpExt2+qa+cZqSw==", + "license": "MIT", + "dependencies": { + "@babel/helper-module-imports": "^7.0.0", + "@babel/traverse": "^7.4.5", + "@emotion/is-prop-valid": "^1.1.0", + "@emotion/stylis": "^0.8.4", + "@emotion/unitless": "^0.7.4", + "babel-plugin-styled-components": ">= 1.12.0", + "css-to-react-native": "^3.0.0", + "hoist-non-react-statics": "^3.0.0", + "shallowequal": "^1.1.0", + "supports-color": "^5.5.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/styled-components" + }, + "peerDependencies": { + "react": ">= 16.8.0", + "react-dom": ">= 16.8.0", + "react-is": ">= 16.8.0" + } + }, + "node_modules/styled-components/node_modules/has-flag": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz", + "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==", + "license": "MIT", + "engines": { + "node": ">=4" + } + }, + "node_modules/styled-components/node_modules/supports-color": { + "version": "5.5.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz", + "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==", + "license": "MIT", + "dependencies": { + "has-flag": "^3.0.0" + }, + "engines": { + "node": ">=4" + } + }, "node_modules/styled-jsx": { "version": "5.1.1", "resolved": "https://registry.npmjs.org/styled-jsx/-/styled-jsx-5.1.1.tgz", @@ -4595,6 +5378,15 @@ "node": ">=0.8" } }, + "node_modules/to-fast-properties": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz", + "integrity": "sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==", + "license": "MIT", + "engines": { + "node": ">=4" + } + }, "node_modules/to-regex-range": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz", @@ -4773,6 +5565,37 @@ "integrity": "sha512-ve2KP6f/JnbPBFyobGHuerC9g1FYGn/F8n1LWTwNxCEzd6IfqTwUQcNXgEtmmQ6DlRrC1hrSrBnCZPokRrDHjw==", "dev": true }, + "node_modules/update-browserslist-db": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.1.0.tgz", + "integrity": "sha512-EdRAaAyk2cUE1wOf2DkEhzxqOQvFOoRJFNS6NeyJ01Gp2beMRpBAINjM2iDXE3KCuKhwnvHIQCJm6ThL2Z+HzQ==", + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/browserslist" + }, + { + "type": "tidelift", + "url": "https://tidelift.com/funding/github/npm/browserslist" + }, + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], + "license": "MIT", + "peer": true, + "dependencies": { + "escalade": "^3.1.2", + "picocolors": "^1.0.1" + }, + "bin": { + "update-browserslist-db": "cli.js" + }, + "peerDependencies": { + "browserslist": ">= 4.21.0" + } + }, "node_modules/uri-js": { "version": "4.4.1", "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz", @@ -4788,6 +5611,15 @@ "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==", "dev": true }, + "node_modules/warning": { + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz", + "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==", + "license": "MIT", + "dependencies": { + "loose-envify": "^1.0.0" + } + }, "node_modules/which": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz", @@ -4991,6 +5823,13 @@ "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==", "dev": true }, + "node_modules/yallist": { + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz", + "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==", + "license": "ISC", + "peer": true + }, "node_modules/yaml": { "version": "2.5.1", "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.5.1.tgz", diff --git a/better-app/package.json b/better-app/package.json index 1dc3585..7daf501 100644 --- a/better-app/package.json +++ b/better-app/package.json @@ -9,18 +9,19 @@ "lint": "next lint" }, "dependencies": { + "next": "14.2.11", "react": "^18", - "react-dom": "^18", - "next": "14.2.11" + "react-brackets": "^0.4.7", + "react-dom": "^18" }, "devDependencies": { - "typescript": "^5", "@types/node": "^20", "@types/react": "^18", "@types/react-dom": "^18", + "eslint": "^8", + "eslint-config-next": "14.2.11", "postcss": "^8", "tailwindcss": "^3.4.1", - "eslint": "^8", - "eslint-config-next": "14.2.11" + "typescript": "^5" } } From eca35e2ec2134e51102edf918636160f4583b237 Mon Sep 17 00:00:00 2001 From: = Date: Sun, 22 Sep 2024 19:15:56 -0300 Subject: [PATCH 07/10] added competitor / match metadata flows --- better-app/app/assets/betterlogo.svg | 6 + better-app/app/data/competitorsData.json | 138 +++++++ better-app/app/data/matchData.json | 44 +++ better-app/app/data/temp | 270 +++++++++++++ better-app/app/drawer.css | 31 +- better-app/app/favicon.ico | Bin 25931 -> 0 bytes better-app/app/feed.css | 282 +++++++------ better-app/app/layout.tsx | 54 ++- better-app/app/page.tsx | 104 +---- better-app/app/roundDetails/page.tsx | 481 ++++++++++++++++++----- better-app/app/rounds/page.tsx | 198 ++++++++-- 11 files changed, 1240 insertions(+), 368 deletions(-) create mode 100644 better-app/app/assets/betterlogo.svg create mode 100644 better-app/app/data/competitorsData.json create mode 100644 better-app/app/data/matchData.json create mode 100644 better-app/app/data/temp delete mode 100644 better-app/app/favicon.ico diff --git a/better-app/app/assets/betterlogo.svg b/better-app/app/assets/betterlogo.svg new file mode 100644 index 0000000..5fbea75 --- /dev/null +++ b/better-app/app/assets/betterlogo.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/better-app/app/data/competitorsData.json b/better-app/app/data/competitorsData.json new file mode 100644 index 0000000..14cf11d --- /dev/null +++ b/better-app/app/data/competitorsData.json @@ -0,0 +1,138 @@ +[ + { + "id": 1, + "name": "Manali Niggums", + "profile": "A brief profile about Manali Niggums.", + "socials": { + "twitter": "https://twitter.com/manaliniggums", + "github": "https://github.com/manaliniggums" + }, + "competitions": [ + { + "competitionName": "Current Competition", + "year": 2023, + "status": "Active", + "submissions": ["Solution A", "Solution B"] + } + ] + }, + { + "id": 2, + "name": "Frah Frah Got", + "profile": "A brief profile about Frah Frah Got.", + "socials": { + "twitter": "https://twitter.com/frahfrahgot", + "github": "https://github.com/frahfrahgot" + }, + "competitions": [ + { + "competitionName": "Current Competition", + "year": 2023, + "status": "Active", + "submissions": ["Solution C"] + } + ] + }, + { + "id": 3, + "name": "Team C", + "profile": "A brief profile about Team C.", + "socials": { + "twitter": "https://twitter.com/teamC", + "github": "https://github.com/teamC" + }, + "competitions": [ + { + "competitionName": "Current Competition", + "year": 2023, + "status": "Active", + "submissions": ["Submission 1"] + } + ] + }, + { + "id": 4, + "name": "Team D", + "profile": "A brief profile about Team D.", + "socials": { + "twitter": "https://twitter.com/teamD", + "github": "https://github.com/teamD" + }, + "competitions": [ + { + "competitionName": "Current Competition", + "year": 2023, + "status": "Active", + "submissions": ["Submission 2"] + } + ] + }, + { + "id": 5, + "name": "Team E", + "profile": "A brief profile about Team E.", + "socials": { + "twitter": "https://twitter.com/teamE", + "github": "https://github.com/teamE" + }, + "competitions": [ + { + "competitionName": "Current Competition", + "year": 2023, + "status": "Active", + "submissions": ["Submission 3"] + } + ] + }, + { + "id": 6, + "name": "Team F", + "profile": "A brief profile about Team F.", + "socials": { + "twitter": "https://twitter.com/teamF", + "github": "https://github.com/teamF" + }, + "competitions": [ + { + "competitionName": "Current Competition", + "year": 2023, + "status": "Active", + "submissions": ["Submission 4"] + } + ] + }, + { + "id": 7, + "name": "Team G", + "profile": "A brief profile about Team G.", + "socials": { + "twitter": "https://twitter.com/teamG", + "github": "https://github.com/teamG" + }, + "competitions": [ + { + "competitionName": "Current Competition", + "year": 2023, + "status": "Active", + "submissions": ["Submission 5"] + } + ] + }, + { + "id": 8, + "name": "Team H", + "profile": "A brief profile about Team H.", + "socials": { + "twitter": "https://twitter.com/teamH", + "github": "https://github.com/teamH" + }, + "competitions": [ + { + "competitionName": "Current Competition", + "year": 2023, + "status": "Active", + "submissions": ["Submission 6"] + } + ] + } +] diff --git a/better-app/app/data/matchData.json b/better-app/app/data/matchData.json new file mode 100644 index 0000000..5db398f --- /dev/null +++ b/better-app/app/data/matchData.json @@ -0,0 +1,44 @@ +[ + { + "id": 1, + "round": "Round 1", + "teams": ["Manali Niggums", "Frah Frah Got"], + "startTime": "2023-09-01T10:00:00Z", + "endTime": "2023-09-01T11:00:00Z", + "prompt": "Solve the puzzle in the fastest time.", + "rules": "No external help allowed.", + "submissions": [ + { + "team": "Manali Niggums", + "submission": "Solution A", + "userProfiles": ["User1", "User2"] + }, + { + "team": "Frah Frah Got", + "submission": "Solution B", + "userProfiles": ["User3", "User4"] + } + ] + }, + { + "id": 2, + "round": "Round 2", + "teams": ["Team C", "Team D"], + "startTime": "2023-09-01T12:00:00Z", + "endTime": "2023-09-01T13:00:00Z", + "prompt": "Design the best logo.", + "rules": "Use only vector graphics.", + "submissions": [ + { + "team": "Team C", + "submission": "Logo Design C", + "userProfiles": ["User5", "User6"] + }, + { + "team": "Team D", + "submission": "Logo Design D", + "userProfiles": ["User7", "User8"] + } + ] + } +] \ No newline at end of file diff --git a/better-app/app/data/temp b/better-app/app/data/temp new file mode 100644 index 0000000..cd122b3 --- /dev/null +++ b/better-app/app/data/temp @@ -0,0 +1,270 @@ +'use client'; + +import React, { useState } from 'react'; +import { useRouter } from 'next/navigation'; +import Link from 'next/link'; +import '../buttons.css'; +import '../feed.css'; +import '../globals.css'; + +const RoundsPage: React.FunctionComponent = () => { + const [activeTab, setActiveTab] = useState('Active'); + const router = useRouter(); // Use router for programmatic navigation + + const cardStyle = { + color: '#FFFFFF', + border: '2px solid #777', // Increased border thickness and lightened color + padding: '20px', // Increased padding + borderRadius: '8px', // Increased border radius + transition: 'all 0.3s ease', + cursor: 'pointer', + backgroundColor: 'rgba(255, 255, 255, 0.05)', // Slight background color + }; + + return ( +
+
+
+
+ {/* Apply Button */} + { + e.currentTarget.style.backgroundColor = '#666'; + e.currentTarget.style.transform = 'scale(1.05)'; + }} + onMouseLeave={(e) => { + e.currentTarget.style.backgroundColor = '#444'; + e.currentTarget.style.transform = 'scale(1)'; + }}> + Apply + + + {/* Sponsor Button */} + { + e.currentTarget.style.backgroundColor = '#666'; + e.currentTarget.style.transform = 'scale(1.05)'; + }} + onMouseLeave={(e) => { + e.currentTarget.style.backgroundColor = '#444'; + e.currentTarget.style.transform = 'scale(1)'; + }}> + Sponsor + +
+
+ + {/* Feed Header Section */} +
+

Rounds

+
+ + {/* Tabs Section */} +
+ {/* Tab Navigation for Active / Archived */} + + + {/* Active Content */} + {activeTab === 'Active' && ( +
+ {/* In Progress Section */} +

In Progress

+
router.push('/roundDetails')} + onMouseEnter={(e) => { + e.currentTarget.style.boxShadow = '0px 6px 15px rgba(255, 255, 255, 0.4)'; + e.currentTarget.style.transform = 'translateY(-5px)'; + }} + onMouseLeave={(e) => { + e.currentTarget.style.boxShadow = 'none'; + e.currentTarget.style.transform = 'translateY(0)'; + }} + > +
+

Inaugural Tournament

+

Six emerging writers compete for cash and exposure in a three-round tournament:

+
    +
  • Best Listicle
    • +
  • Best Book Review
    • +
  • Best Short Story
    • +
+

Each round lasts one week. Two writers are eliminated in each round.

+
+

Start Date: 2024-07-28

+

End Date: 2024-08-28

+
+
+
+ + {/* Subtle Divider */} +
+ + {/* Open to Entries Section */} +

Open to Entries

+
{ + e.currentTarget.style.boxShadow = '0px 6px 15px rgba(255, 255, 255, 0.4)'; + e.currentTarget.style.transform = 'translateY(-5px)'; + }} + onMouseLeave={(e) => { + e.currentTarget.style.boxShadow = 'none'; + e.currentTarget.style.transform = 'translateY(0)'; + }} + > +
+

Explanations Tournament

+

Compete in three rounds of explanatory writing:

+
    +
  • Telescope Explanations: One sentence, one paragraph, one page
    • +
  • Visual Diagram Explanations
    • +
  • Verbal Explanations
    • +
+

Showcase your ability to explain complex concepts clearly and concisely.

+
+

Start Date: 2024-09-01

+

End Date: 2024-10-01

+
+
+ {/* Apply Button in Card */} + { + e.currentTarget.style.backgroundColor = '#666'; + e.currentTarget.style.transform = 'scale(1.05)'; + }} + onMouseLeave={(e) => { + e.currentTarget.style.backgroundColor = '#444'; + e.currentTarget.style.transform = 'scale(1)'; + }}> + Apply + + + {/* Sponsor Button in Card */} + { + e.currentTarget.style.backgroundColor = '#666'; + e.currentTarget.style.transform = 'scale(1.05)'; + }} + onMouseLeave={(e) => { + e.currentTarget.style.backgroundColor = '#444'; + e.currentTarget.style.transform = 'scale(1)'; + }}> + Sponsor + +
+
+
+
+ )} + + {/* Archived Content */} + {activeTab === 'Archived' && ( +
+
+ )} +
+
+ ); +}; + +export default RoundsPage; diff --git a/better-app/app/drawer.css b/better-app/app/drawer.css index 318a3ea..9960c79 100644 --- a/better-app/app/drawer.css +++ b/better-app/app/drawer.css @@ -42,7 +42,7 @@ /* Table and Bracket Layout */ .bracket-table-container { display: flex; - justify-content: center; /* Align in center horizontally */ + justify-content: center; align-items: flex-start; flex-direction: column; margin-top: 20px; @@ -50,7 +50,7 @@ /* Table Styling */ .competitor-table { - width: 400px; /* Narrower table */ + width: 400px; border-collapse: collapse; margin-top: 20px; } @@ -74,22 +74,37 @@ .status-button { height: 18px; width: 18px; - border: 2px solid; /* Stroke only */ + border: 2px solid; border-radius: 50%; display: inline-block; } .status-green { - border-color: #77dd77; /* Pastel green stroke */ + border-color: #77dd77; } .status-red { - border-color: #ff6961; /* Pastel red stroke */ + border-color: #ff6961; } - /* Alignment for table under columns */ .competitor-table th, .competitor-table td { - vertical-align: middle; /* Center content vertically */ + vertical-align: middle; } - \ No newline at end of file + + .seed-item { + cursor: pointer; + transition: box-shadow 0.3s ease; + } + + .seed-item:hover { + box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3); + } + + .drawer:hover { + transform: translateX(0); + } + + .drawer:not(:hover) { + transform: translateX(100%); + } \ No newline at end of file diff --git a/better-app/app/favicon.ico b/better-app/app/favicon.ico deleted file mode 100644 index 718d6fea4835ec2d246af9800eddb7ffb276240c..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 25931 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 LrJugUA?W`A8`#=m diff --git a/better-app/app/feed.css b/better-app/app/feed.css index 742e9e1..c7a6e30 100644 --- a/better-app/app/feed.css +++ b/better-app/app/feed.css @@ -1,145 +1,141 @@ -/* app/feed.css */ - /* Feed Card */ .feed-card { - background-color: #000000; - padding: 20px; - border-radius: 0px; - border: 1px solid #FFFFFF; - margin-bottom: 20px; - cursor: pointer; - transition: background-color 0.01s ease-in-out; - text-align: left; -} - -/* Ensure that all elements inside the feed card inherit color and remove text decoration */ -.feed-card * { - text-decoration: none; - color: inherit; -} - -.feed-card:hover { - background-color: #2a2828; -} - -/* Header inside feed card */ -.feed-card h3 { - margin: 0; - padding: 2px 0; - font-weight: 590; /* Adjust the font weight to your preference (300, 400, etc.) */ -} - -/* Paragraph inside feed card */ -.feed-card p { - margin: 0; - padding: 5px 0; -} - -/* Additional hover effect */ -.feed-card:hover { - background-color: #2a2828; /* Slightly darker on hover */ -} - -/* Card Header */ -.card-header { - display: flex; - align-items: center; - justify-content: space-between; - margin-bottom: 10px; -} - -/* Status Badge */ -.status-badge { - background-color: #F4D9B6; /* Light tan */ - padding: 5px 10px; - border-radius: 10px; - font-size: 14px; - font-weight: bold; -} - -/* List inside feed card */ -ul { - list-style: none; - padding-left: 0; - margin-bottom: 10px; -} - -li { - margin-left: 10px; -} - -/* Footer section of feed card */ -.card-footer { - display: flex; - justify-content: space-between; - font-size: 14px; - color: #888; -} - -/* Anchor tag styling within feed card */ -.feed-card a { - text-decoration: none; /* Remove underline */ - color: inherit; /* Inherit the current color */ -} - -/* Button styling */ -.view-more-button { - border: 1px solid #000; - background-color: transparent; - padding: 5px 10px; - border-radius: 20px; - font-size: 12px; - cursor: pointer; - transition: background-color 0.05; -} - -/* Hover effect for button */ -.view-more-button:hover { - background-color: #f5f5f5; -} - -/* Active Pill Styles */ -.active-pill { - position: absolute; - top: 10px; - left: 10px; - background-color: #F4D9B6; - padding: 3px 10px; - border-radius: 20px; - font-size: 12px; - font-weight: normal; - color: #000; -} - -/* Card Content Adjustments */ -.card-content { - margin-top: 0; - padding-left: 10px; /* Add padding to move text to the right */ -} - -/* Button inside the feed card */ -.feed-card-button { - align-self: flex-end; /* Ensure button stays aligned at the bottom */ - margin-top: 10px; - padding: 6px 12px; - background-color: white; - border: 1px solid black; - border-radius: 12px; - cursor: pointer; - transition: background-color 0.3s; -} - -/* Hover effect for feed card button */ -.feed-card-button:hover { - background-color: #F5F5F5; -} - -/* Date container inside feed card */ -.date-container { - display: flex; /* Align the dates side by side */ - gap: 15px; /* Adjust the space between the two dates */ - justify-content: flex-start; /* Align them to the left */ - font-size: 14px; /* Adjust font size */ - color: #000000; /* Color of the text */ - padding-top: 20px; /* Add padding to push the dates down */ -} + background-color: #000000; + padding: 20px; + border-radius: 0px; + border: 1px solid #FFFFFF; + margin-bottom: 20px; + cursor: pointer; + transition: box-shadow 0.3s ease-in-out; /* Changed transition to affect only box-shadow */ + text-align: left; + } + + /* Ensure that all elements inside the feed card inherit color and remove text decoration */ + .feed-card * { + text-decoration: none; + color: inherit; + } + + /* Remove background color change on hover, only apply box-shadow */ + .feed-card:hover { + box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3); /* Subtle shadow on hover */ + background-color: #000000; /* Keep background the same */ + } + + /* Header inside feed card */ + .feed-card h3 { + margin: 0; + padding: 2px 0; + font-weight: 590; /* Adjust the font weight to your preference (300, 400, etc.) */ + } + + /* Paragraph inside feed card */ + .feed-card p { + margin: 0; + padding: 5px 0; + } + + /* Card Header */ + .card-header { + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: 10px; + } + + /* Status Badge */ + .status-badge { + background-color: #F4D9B6; /* Light tan */ + padding: 5px 10px; + border-radius: 10px; + font-size: 14px; + font-weight: bold; + } + + /* List inside feed card */ + ul { + list-style: none; + padding-left: 0; + margin-bottom: 10px; + } + + li { + margin-left: 10px; + } + + /* Footer section of feed card */ + .card-footer { + display: flex; + justify-content: space-between; + font-size: 14px; + color: #888; + } + + /* Anchor tag styling within feed card */ + .feed-card a { + text-decoration: none; /* Remove underline */ + color: inherit; /* Inherit the current color */ + } + + /* Button styling */ + .view-more-button { + border: 1px solid #000; + background-color: transparent; + padding: 5px 10px; + border-radius: 20px; + font-size: 12px; + cursor: pointer; + transition: background-color 0.05s; + } + + /* Hover effect for button */ + .view-more-button:hover { + background-color: #f5f5f5; + } + + /* Active Pill Styles */ + .active-pill { + position: absolute; + top: 10px; + left: 10px; + background-color: #F4D9B6; + padding: 3px 10px; + border-radius: 20px; + font-size: 12px; + font-weight: normal; + color: #000; + } + + /* Card Content Adjustments */ + .card-content { + margin-top: 0; + padding-left: 10px; /* Add padding to move text to the right */ + } + + /* Button inside the feed card */ + .feed-card-button { + align-self: flex-end; /* Ensure button stays aligned at the bottom */ + margin-top: 10px; + padding: 6px 12px; + background-color: white; + border: 1px solid black; + border-radius: 12px; + cursor: pointer; + transition: background-color 0.3s; + } + + /* Hover effect for feed card button */ + .feed-card-button:hover { + background-color: #F5F5F5; + } + + /* Date container inside feed card */ + .date-container { + display: flex; /* Align the dates side by side */ + gap: 15px; /* Adjust the space between the two dates */ + justify-content: flex-start; /* Align them to the left */ + font-size: 14px; /* Adjust font size */ + color: #000000; /* Color of the text */ + padding-top: 20px; /* Add padding to push the dates down */ + } + \ No newline at end of file diff --git a/better-app/app/layout.tsx b/better-app/app/layout.tsx index bc942e1..e8d8e84 100644 --- a/better-app/app/layout.tsx +++ b/better-app/app/layout.tsx @@ -1,6 +1,8 @@ import type { Metadata } from "next"; import localFont from "next/font/local"; import Head from "next/head"; +import Link from "next/link"; +import Image from "next/image"; import "./globals.css"; const geistSans = localFont({ @@ -15,15 +17,18 @@ const geistMono = localFont({ }); export const metadata: Metadata = { - title: "Create Next App", - description: "Generated by create next app", + title: "Get Better", + description: "A platform using competition to make things better.", + icons: { + icon: '/assets/betterlogo.svg', + }, }; export default function RootLayout({ children, -}: Readonly<{ +}: { children: React.ReactNode; -}>) { +}) { return ( @@ -34,9 +39,46 @@ export default function RootLayout({ - {children} + {/* Global Navbar */} + + + {/* Page Content */} +
{children}
); -} +} \ No newline at end of file diff --git a/better-app/app/page.tsx b/better-app/app/page.tsx index 433c8aa..f107179 100644 --- a/better-app/app/page.tsx +++ b/better-app/app/page.tsx @@ -1,101 +1,19 @@ -import Image from "next/image"; +import Link from "next/link"; export default function Home() { return ( -
-
- Next.js logo -
    -
  1. - Get started by editing{" "} - - app/page.tsx - - . -
    2. -
  2. Save and see your changes instantly.
    3. -
- -
- - Vercel logomark - Deploy now - - - Read our docs - +
+
+

Welcome to the Tournament App

+
+ + View Rounds + + + Round Details +
-
); } diff --git a/better-app/app/roundDetails/page.tsx b/better-app/app/roundDetails/page.tsx index ebaf194..027ed9e 100644 --- a/better-app/app/roundDetails/page.tsx +++ b/better-app/app/roundDetails/page.tsx @@ -1,21 +1,40 @@ 'use client'; -import React, { useState } from 'react'; -import { Bracket, IRoundProps, Seed, SeedItem, SeedTeam, IRenderSeedProps } from 'react-brackets'; -import '../drawer.css'; // Assuming drawer.css is in the same directory +import React, { useState, useRef, useEffect } from 'react'; +import { + Bracket, + IRoundProps, + Seed, + SeedItem, + SeedTeam, + IRenderSeedProps, +} from 'react-brackets'; +import matchData from '../data/matchData.json'; +import competitorsData from '../data/competitorsData.json'; -const CustomSeed = ({ seed, breakpoint }: IRenderSeedProps) => { +import '../drawer.css'; // Make sure to import the drawer styles + +const CustomSeed = ({ + seed, + breakpoint, + onSeedClick, +}: IRenderSeedProps & { onSeedClick: (matchId: number) => void }) => { return ( - + ) => { + e.currentTarget.style.backgroundColor = '#2a2828'; + }} + onMouseLeave={(e: React.MouseEvent) => { + e.currentTarget.style.backgroundColor = 'black'; }} + onClick={() => onSeedClick(seed.matchId)} >
{seed.teams[0]?.name || 'NO TEAM'} @@ -30,65 +49,84 @@ const rounds: IRoundProps[] = [ { title: 'Round 1', seeds: [ - { - id: 1, - teams: [{ name: 'Manali Niggums' }, { name: 'Frah Frah Got' }], - }, - { - id: 2, - teams: [{ name: 'Team C' }, { name: 'Team D' }], - }, - { - id: 3, - teams: [{ name: 'Team E' }, { name: 'Team F' }], - }, - { - id: 4, - teams: [{ name: 'Team G' }, { name: 'Team H' }], - }, + { id: 1, matchId: 1, teams: [{ name: 'Manali Niggums' }, { name: 'Frah Frah Got' }] }, + { id: 2, matchId: 2, teams: [{ name: 'Team C' }, { name: 'Team D' }] }, + { id: 3, matchId: 3, teams: [{ name: 'Team E' }, { name: 'Team F' }] }, + { id: 4, matchId: 4, teams: [{ name: 'Team G' }, { name: 'Team H' }] }, ], }, { title: 'Round 2', seeds: [ - { - id: 5, - teams: [{ name: 'TBD' }, { name: 'TBD' }], - }, - { - id: 6, - teams: [{ name: 'TBD' }, { name: 'TBD' }], - }, + { id: 5, matchId: 5, teams: [{ name: 'TBD' }, { name: 'TBD' }] }, + { id: 6, matchId: 6, teams: [{ name: 'TBD' }, { name: 'TBD' }] }, ], }, { title: 'Final', - seeds: [ - { - id: 7, - teams: [{ name: 'TBD' }, { name: 'TBD' }], - }, - ], + seeds: [{ id: 7, matchId: 7, teams: [{ name: 'TBD' }, { name: 'TBD' }] }], }, ]; -const competitors = [ - { name: 'Team A', status: 'active' }, - { name: 'Team B', status: 'active' }, - { name: 'Team C', status: 'active' }, - { name: 'Team D', status: 'active' }, - { name: 'Team E', status: 'active' }, - { name: 'Team F', status: 'active' }, - { name: 'Team G', status: 'active' }, - { name: 'Team H', status: 'active' }, -]; +// Update the competitors list to include all competitors +const competitors = competitorsData.map((competitor) => ({ + id: competitor.id, + name: competitor.name, + status: + competitor.competitions.find( + (comp) => comp.competitionName === 'Current Competition' + )?.status || 'Inactive', +})); const BracketWithToggle = () => { const [showBracket, setShowBracket] = useState(true); + const [selectedMatchId, setSelectedMatchId] = useState(null); + const [selectedCompetitorId, setSelectedCompetitorId] = useState(null); + const [isDrawerOpen, setIsDrawerOpen] = useState(false); + const drawerRef = useRef(null); + + const selectedMatch = matchData.find((match) => match.id === selectedMatchId); + const selectedCompetitor = competitorsData.find( + (competitor) => competitor.id === selectedCompetitorId + ); + + useEffect(() => { + const handleClickOutside = (event: MouseEvent) => { + if ( + drawerRef.current && + !drawerRef.current.contains(event.target as Node) + ) { + closeDrawer(); + } + }; + document.addEventListener('mousedown', handleClickOutside); + return () => { + document.removeEventListener('mousedown', handleClickOutside); + }; + }, []); + + const openCompetitorDrawer = (competitorId: number) => { + setSelectedCompetitorId(competitorId); + setSelectedMatchId(null); // Reset match selection + setIsDrawerOpen(true); + }; + + const openMatchDrawer = (matchId: number) => { + setSelectedMatchId(matchId); + setSelectedCompetitorId(null); // Reset competitor selection + setIsDrawerOpen(true); + }; + + const closeDrawer = () => { + setIsDrawerOpen(false); + setTimeout(() => { + setSelectedMatchId(null); + setSelectedCompetitorId(null); + }, 300); + }; return (
{ minHeight: '100vh', fontFamily: "'Open Sans', sans-serif", fontSize: '14.4px', - paddingLeft: '60px', // Adjusted to shift inward for a slightly center-left alignment + paddingLeft: '60px', }} > -
- - + setShowBracket(true)} + style={{ + padding: '10px 15px', + textDecoration: 'none', + color: showBracket ? '#FFFFFF' : '#888', + borderBottom: showBracket ? '3px solid #FFF' : 'none', + fontWeight: showBracket ? 'bold' : 'normal', + transition: 'color 0.3s', + }} + onMouseEnter={(e) => { + e.currentTarget.style.color = '#FFFFFF'; + }} + onMouseLeave={(e) => { + e.currentTarget.style.color = showBracket ? '#FFFFFF' : '#888'; + }} + > + View Bracket + + setShowBracket(false)} + style={{ + padding: '10px 15px', + textDecoration: 'none', + color: !showBracket ? '#FFFFFF' : '#888', + borderBottom: !showBracket ? '3px solid #FFF' : 'none', + fontWeight: !showBracket ? 'bold' : 'normal', + transition: 'color 0.3s', + }} + onMouseEnter={(e) => { + e.currentTarget.style.color = '#FFFFFF'; + }} + onMouseLeave={(e) => { + e.currentTarget.style.color = !showBracket ? '#FFFFFF' : '#888'; + }} + > + View Competitors + +
{showBracket ? ( @@ -146,22 +209,27 @@ const BracketWithToggle = () => {
( + openMatchDrawer(matchId)} + /> + )} roundTitleComponent={(title: React.ReactNode) => (
{title} @@ -170,7 +238,7 @@ const BracketWithToggle = () => { swipeableProps={{ enableMouseEvents: true, animateHeight: true, - index: 0, // Start from Round 1 + index: 0, }} />
@@ -182,34 +250,265 @@ const BracketWithToggle = () => { width: '100%', maxWidth: '495px', textAlign: 'left', - marginLeft: '40px', // Slight inward shift for table alignment + marginLeft: '40px', }} > -

Competitors

+

+ Competitors +

{competitors.map((competitor, index) => (
openCompetitorDrawer(competitor.id)} + onMouseEnter={(e) => { + e.currentTarget.style.backgroundColor = '#2a2828'; + }} + onMouseLeave={(e) => { + e.currentTarget.style.backgroundColor = 'transparent'; }} > {competitor.name} - {competitor.status === 'active' ? 'Active' : 'Eliminated'} + {competitor.status}
))}
)} + + {isDrawerOpen && ( +
+ +
+ {selectedMatch && ( + <> +

+ Match Between {selectedMatch.teams[0]} vs {selectedMatch.teams[1]} +

+ {/* Buttons for Match Page */} +
+ + +
+ {/* Match Details */} +

+ Start Time:{' '} + {new Date(selectedMatch.startTime).toLocaleString()} +

+

+ End Time:{' '} + {new Date(selectedMatch.endTime).toLocaleString()} +

+

+ Prompt: {selectedMatch.prompt} +

+

+ Rules: {selectedMatch.rules} +

+

Submissions:

+ {selectedMatch.submissions.map((submission, index) => ( +
+

{submission.team}

+

+ Submission: {submission.submission} +

+

+ User Profiles:{' '} + {submission.userProfiles.join(', ')} +

+
+ ))} + + )} + {selectedCompetitor && ( + <> +

{selectedCompetitor.name}

+ {/* Button for Competitor Page */} +
+ +
+

{selectedCompetitor.profile}

+
+ {/* Placeholder Social Icons */} + + Twitter + + + GitHub + +
+

Competitions

+ {selectedCompetitor.competitions + .sort((a, b) => + a.competitionName === 'Current Competition' ? -1 : 1 + ) + .map((competition, index) => ( +
+

+ {competition.competitionName} ({competition.year}) +

+

+ Status: {competition.status} +

+

+ Submissions: +

+
    + {competition.submissions.map((submission, idx) => ( +
  • {submission}
    • + ))} +
+
+ ))} + + )} +
+
+ )}
); }; diff --git a/better-app/app/rounds/page.tsx b/better-app/app/rounds/page.tsx index 93287f1..6394812 100644 --- a/better-app/app/rounds/page.tsx +++ b/better-app/app/rounds/page.tsx @@ -2,24 +2,59 @@ import React, { useState } from 'react'; import { useRouter } from 'next/navigation'; +import Link from 'next/link'; import '../buttons.css'; import '../feed.css'; import '../globals.css'; -const RoundsPage: React.FunctionComponent = () => { +const CompetitionsPage: React.FunctionComponent = () => { const [activeTab, setActiveTab] = useState('Active'); const router = useRouter(); // Use router for programmatic navigation + const cardStyle = { + color: '#FFFFFF', + border: '1px solid #555', + padding: '15px', + borderRadius: '5px', + transition: 'all 0.3s ease', + cursor: 'pointer', + position: 'relative' as const, + }; + + const buttonStyle = { + color: 'white', + textDecoration: 'none', + padding: '8px 16px', // Reduced padding + backgroundColor: 'black', + border: '2px solid white', + cursor: 'pointer', + transition: 'all 0.3s ease', + fontSize: '12px', // Reduced font size + fontWeight: 'bold', + fontFamily: 'Arial, sans-serif', + }; + + const arrowStyle = { + position: 'absolute' as const, + right: '15px', + top: '15px', + fontSize: '1.2em', + opacity: 0.7, + transition: 'opacity 0.3s ease', + }; + return (
-
+
+ {/* Apply and Sponsor buttons removed from here */} +
{/* Feed Header Section */} @@ -28,7 +63,7 @@ const RoundsPage: React.FunctionComponent = () => { maxWidth: '700px', margin: '0 auto', }}> -

Rounds

+

Competitions

{/* Tabs Section */} @@ -36,12 +71,11 @@ const RoundsPage: React.FunctionComponent = () => { maxWidth: '700px', margin: '0 auto', }}> - - {/* Tab Navigation for Active / Archived */} + {/* Tab Navigation for Active / Completed */} {/* Active Content */} {activeTab === 'Active' && (
- {/* Feed Card */} -
router.push('/roundDetails')}> {/* Use onClick for navigation */} - {/* Card Content */} + {/* In Progress Section */} +

In Progress

+
router.push('/roundDetails')} + onMouseEnter={(e) => { + e.currentTarget.style.border = '1px solid #FFFFFF'; + const arrow = e.currentTarget.querySelector('.arrow') as HTMLElement; + if (arrow) arrow.style.opacity = '1'; + }} + onMouseLeave={(e) => { + e.currentTarget.style.border = '1px solid #555'; + const arrow = e.currentTarget.querySelector('.arrow') as HTMLElement; + if (arrow) arrow.style.opacity = '0.7'; + }} + >

Inaugural Tournament

Six emerging writers compete for cash and exposure in a three-round tournament:

@@ -100,17 +152,109 @@ const RoundsPage: React.FunctionComponent = () => {
  • Best Short Story

    • Each round lasts one week. Two writers are eliminated in each round.

    -
    +

    Start Date: 2024-07-28

    End Date: 2024-08-28

    +
    + { + e.currentTarget.style.backgroundColor = 'white'; + e.currentTarget.style.color = 'black'; + }} + onMouseLeave={(e) => { + e.currentTarget.style.backgroundColor = 'black'; + e.currentTarget.style.color = 'white'; + }}> + Vote + +
    +
    + → +
    + + {/* Subtle Divider */} +
    + + {/* Open to Entries Section */} +

    Open to Applicants

    +
    { + e.currentTarget.style.border = '1px solid #FFFFFF'; + const arrow = e.currentTarget.querySelector('.arrow') as HTMLElement; + if (arrow) arrow.style.opacity = '1'; + }} + onMouseLeave={(e) => { + e.currentTarget.style.border = '1px solid #555'; + const arrow = e.currentTarget.querySelector('.arrow') as HTMLElement; + if (arrow) arrow.style.opacity = '0.7'; + }} + > +
    +

    Explanations Tournament

    +

    Compete in three of explanatory writing:

    +
      +
    • Telescope Explanations: One sentence, one paragraph, one page
      • +
    • Visual Diagram Explanations
      • +
    • Verbal Explanations
      • +
    +

    Showcase your ability to explain complex concepts clearly and concisely.

    +
    +

    Start Date: 2024-09-01

    +

    End Date: 2024-10-01

    +
    +
    + { + e.currentTarget.style.backgroundColor = 'white'; + e.currentTarget.style.color = 'black'; + }} + onMouseLeave={(e) => { + e.currentTarget.style.backgroundColor = 'black'; + e.currentTarget.style.color = 'white'; + }}> + Apply + + { + e.currentTarget.style.backgroundColor = 'white'; + e.currentTarget.style.color = 'black'; + }} + onMouseLeave={(e) => { + e.currentTarget.style.backgroundColor = 'black'; + e.currentTarget.style.color = 'white'; + }}> + Sponsor + +
    + →
    )} - {/* Archived Content */} - {activeTab === 'Archived' && ( + {/* Completed Content */} + {activeTab === 'Completed' && (
    )} @@ -119,4 +263,4 @@ const RoundsPage: React.FunctionComponent = () => { ); }; -export default RoundsPage; +export default CompetitionsPage; From c08715647aa5518780dc7acaed13c594173e541a Mon Sep 17 00:00:00 2001 From: = Date: Sun, 22 Sep 2024 23:11:49 -0300 Subject: [PATCH 08/10] voting flow, other enhancements --- better-app/app/roundDetails/page.tsx | 234 +++++++++++++++++---------- 1 file changed, 148 insertions(+), 86 deletions(-) diff --git a/better-app/app/roundDetails/page.tsx b/better-app/app/roundDetails/page.tsx index 027ed9e..353818d 100644 --- a/better-app/app/roundDetails/page.tsx +++ b/better-app/app/roundDetails/page.tsx @@ -1,6 +1,6 @@ 'use client'; -import React, { useState, useRef, useEffect } from 'react'; +import React, { useState, useRef, useEffect, useCallback, useMemo } from 'react'; import { Bracket, IRoundProps, @@ -12,7 +12,7 @@ import { import matchData from '../data/matchData.json'; import competitorsData from '../data/competitorsData.json'; -import '../drawer.css'; // Make sure to import the drawer styles +import '../drawer.css'; // Ensure the drawer styles are imported const CustomSeed = ({ seed, @@ -68,14 +68,14 @@ const rounds: IRoundProps[] = [ }, ]; -// Update the competitors list to include all competitors const competitors = competitorsData.map((competitor) => ({ id: competitor.id, name: competitor.name, - status: - competitor.competitions.find( - (comp) => comp.competitionName === 'Current Competition' - )?.status || 'Inactive', + status: competitor.competitions?.find( + (comp) => comp.competitionName === 'Current Competition' + )?.status || 'Inactive', + profile: competitor.profile || '', + socials: competitor.socials || {}, })); const BracketWithToggle = () => { @@ -83,19 +83,24 @@ const BracketWithToggle = () => { const [selectedMatchId, setSelectedMatchId] = useState(null); const [selectedCompetitorId, setSelectedCompetitorId] = useState(null); const [isDrawerOpen, setIsDrawerOpen] = useState(false); + const [selectedTeam, setSelectedTeam] = useState(null); + const [voteConfirmed, setVoteConfirmed] = useState(false); + const [successMessage, setSuccessMessage] = useState(false); const drawerRef = useRef(null); - const selectedMatch = matchData.find((match) => match.id === selectedMatchId); - const selectedCompetitor = competitorsData.find( - (competitor) => competitor.id === selectedCompetitorId + // Memoize selected match and competitor to prevent unnecessary re-renders + const selectedMatch = useMemo( + () => matchData.find((match) => match.id === selectedMatchId), + [selectedMatchId] + ); + const selectedCompetitor = useMemo( + () => competitors.find((competitor) => competitor.id === selectedCompetitorId), + [selectedCompetitorId] ); useEffect(() => { const handleClickOutside = (event: MouseEvent) => { - if ( - drawerRef.current && - !drawerRef.current.contains(event.target as Node) - ) { + if (drawerRef.current && !drawerRef.current.contains(event.target as Node)) { closeDrawer(); } }; @@ -105,24 +110,51 @@ const BracketWithToggle = () => { }; }, []); - const openCompetitorDrawer = (competitorId: number) => { + // Open drawer for a competitor + const openCompetitorDrawer = useCallback((competitorId: number) => { setSelectedCompetitorId(competitorId); setSelectedMatchId(null); // Reset match selection setIsDrawerOpen(true); - }; + }, []); - const openMatchDrawer = (matchId: number) => { + // Open drawer for a match + const openMatchDrawer = useCallback((matchId: number) => { setSelectedMatchId(matchId); setSelectedCompetitorId(null); // Reset competitor selection setIsDrawerOpen(true); - }; + }, []); - const closeDrawer = () => { + // Close the drawer and reset states + const closeDrawer = useCallback(() => { setIsDrawerOpen(false); + // Use a delay to reset state after the drawer has fully closed setTimeout(() => { setSelectedMatchId(null); setSelectedCompetitorId(null); - }, 300); + setSelectedTeam(null); // Reset team selection on close + setVoteConfirmed(false); // Reset confirmation on drawer close + }, 300); // Ensure smooth transition + }, []); + + // Handle voting logic + const handleVoteClick = useCallback( + (teamName: string) => { + if (!voteConfirmed) { + setSelectedTeam(teamName); + } + }, + [voteConfirmed] + ); + + // Confirm vote + const confirmVote = () => { + if (selectedTeam) { + setVoteConfirmed(true); // Lock in the vote + setSuccessMessage(true); // Show success message + + // Fade out success message after 3 seconds + setTimeout(() => setSuccessMessage(false), 3000); + } }; return ( @@ -138,20 +170,9 @@ const BracketWithToggle = () => { paddingLeft: '60px', }} > -
    -