be-components 4.6.1 → 4.6.3

package/src/Bracket/components/BracketPlay/BracketNavigator.tsx

@@ -1,10 +1,14 @@
 import React from 'react';
-import { FlatList, TouchableOpacity, View } from "react-native";
+import { FlatList, Modal } from "react-native";
 import type { BracketGroupProps, BracketRoundProps } from '../../../types';
-import { Button, Checkbox, Text } from '../../../Components';
-import Colors from '../../../constants/colors';
+import { Checkbox } from '../../../Components';
+import { Button, Text, View } from '../../../Components/Themed';
+import { useColors } from '../../../constants/useColors';
 
 type BracketNavigatorProps = {
+    visible:boolean,
+    view_mode?:'desktop'|'mobile',
+    insets?:{ top:number, bottom:number, left:number, right:number },
     bracket_rounds:BracketRoundProps[],
     bracket_groups:BracketGroupProps[],
     selected_round?:BracketRoundProps,
@@ -14,61 +18,100 @@ type BracketNavigatorProps = {
     onClose: () => void
 }
 
-const BracketNavigator = ({ bracket_rounds, bracket_groups, selected_round, selected_group, onSelectGroup, onSelectRound, onClose }:BracketNavigatorProps) => {
-
+const nav_sections = [ 'groups', 'rounds' ];
+const BracketNavigator = ({ visible, view_mode, insets, bracket_rounds, bracket_groups, selected_round, selected_group, onSelectGroup, onSelectRound, onClose }:BracketNavigatorProps) => {
+    const Colors = useColors();
     const renderRounds = (data : { item:BracketRoundProps, index:number }) => {
         const selected = selected_round?.bracket_round_id == data.item.bracket_round_id ? true : false
         return (
-            <TouchableOpacity style={{ flexDirection:'row', alignItems:'center', width:120, padding:10 }} onPress={() => onSelectRound(data.item)}>
-                <Checkbox size={20} fill_style={{ borderRadius:100 }} style={{ borderRadius:100, marginRight:5 }} checked={selected} disabled onSelect={() => console.log('')}/>
-                <Text size={14} weight={selected?'bold':'regular'} color={Colors.brand.midnight}>{data.item.round_name}</Text>
-            </TouchableOpacity>
+            <Button style={{ flexDirection:'row', borderRadius:0, alignItems:'center', padding:16,  borderBottomWidth:1, borderColor:Colors.borders.light }} onPress={() => onSelectRound(data.item)}>
+                <Checkbox size={20} fill_style={{ borderRadius:100 }} style={{ borderRadius:100, marginRight:15 }} color={Colors.text.action} checked={selected} disabled onSelect={() => console.log('')}/>
+                <Text size={14} theme={selected?'h1':'description'}>{data.item.round_name}</Text>
+            </Button>
         )
     }
 
     const renderGroups = (data : { item:BracketGroupProps, index:number }) => {
         const selected = selected_group?.bracket_group_id == data.item.bracket_group_id ? true : false
         return (
-            <TouchableOpacity style={{ flexDirection:'row', alignItems:'center', width:120, padding:10 }} onPress={() => onSelectGroup(data.item)}>
-                <Checkbox size={20} fill_style={{ borderRadius:100 }} style={{ borderRadius:100, marginRight:5 }} checked={selected} disabled onSelect={() => console.log('')}/>
-                <Text size={14} weight={selected?'bold':'regular'} color={Colors.brand.midnight}>{data.item.group_name}</Text>
-            </TouchableOpacity>
+            <Button style={{ flexDirection:'row', alignItems:'center', borderRadius:0, padding:16, borderBottomWidth:1, borderColor:Colors.borders.light }} onPress={() => onSelectGroup(data.item)}>
+                <Checkbox size={20} fill_style={{ borderRadius:100 }} style={{ borderRadius:100, marginRight:15 }} color={Colors.text.action} checked={selected} disabled onSelect={() => console.log('')}/>
+                <Text size={14} theme={selected?'h1':'description'}>{data.item.group_name}</Text>
+            </Button>
         )
     }
 
+    const renderSections = (data:{item:string, index:number}) => {
+        switch(data.item){
+            case 'groups':
+                return (
+                    <View style={{ marginTop:5 }}>
+                        <View type='header' style={{ padding:10 }}>
+                            <Text theme='h1'>Groups</Text>
+                            <Text theme='description' style={{ marginTop:4 }}>Select bracket group filter below</Text>
+                        </View>
+                        <FlatList
+                            data={bracket_groups}
+                            renderItem={renderGroups}
+                            keyExtractor={(item) => item.bracket_group_id.toString()}
+                        />
+                    </View>
+                )
+            case 'rounds':
+                return (
+                    <View style={{ marginTop:5 }}>
+                        <View type='header' style={{ padding:10 }}>
+                            <Text theme='h1'>Rounds</Text>
+                            <Text theme='description' style={{ marginTop:4 }}>Select round filter below</Text>
+                        </View>
+                        <FlatList
+                            data={bracket_rounds}
+                            renderItem={renderRounds}
+                            keyExtractor={(item) => item.bracket_round_id.toString()}
+                        />                            
+                    </View>
+                )
+            default: return <></>
+        }
+    }
+
     return (
-        <View style={{ minWidth:200 }}>
-            <View style={{ padding:10, flexDirection:'row', alignItems:'center', backgroundColor:Colors.shades.shade100, borderTopRightRadius:8, borderTopLeftRadius:8 }}>
-                <Text style={{ flex:1 }} size={14} color={Colors.brand.midnight} weight='bold'>Bracket Filters</Text>
-                <Button
-                    title='X'
-                    title_color={Colors.utility.error}
-                    padding={10}
-                    backgroundColor='transparent'
-                    onPress={() => onClose()}
-                />
-            </View>
-            <View style={{ borderBottomWidth:1, borderColor:Colors.shades.shade600, padding:10 }}>
-                <View style={{ padding:5 }}>
-                    <Text size={14} color={Colors.brand.midnight} weight='bold'>Groups</Text>
+        <Modal
+            visible={visible}
+            style={{ flex:1 }}
+            transparent
+            animationType={view_mode == 'desktop' ? 'fade' : 'slide'}
+            >
+            <View type='blur' style={view_mode == 'desktop' ? { flex:1, justifyContent:'center', alignItems:'center' } : { flex:1, justifyContent:'flex-end', paddingBottom:(insets?.bottom ?? 0) }}>
+                <View float style={view_mode == 'desktop' ? {  width:500 }:{ margin:10, maxHeight:650 }}>
+                    <View type='header' style={{ padding:10, flexDirection:'row', alignItems:'center', borderTopRightRadius:8, borderTopLeftRadius:8 }}>
+                        <Text style={{ flex:1 }} size={14} theme='h1'>Bracket Filters</Text>
+                        <Button
+                            title='X'
+                            type='close'
+                            style={{ padding:10 }}
+                            backgroundColor='transparent'
+                            onPress={() => onClose()}
+                        />
+                    </View>
+                    <FlatList
+                            key='nav_sections'
+                            keyExtractor={(item) => item}
+                            renderItem={renderSections}
+                            data={nav_sections}
+                        />                       
+                    <View type='footer' style={{ flexDirection:'row', alignItems:'center', padding:10, borderBottomRightRadius:8, borderBottomLeftRadius:8 }}>
+                        <Button
+                            type='close'
+                            title='CLOSE'
+                            style={{ flex:1 }}
+                            onPress={() => onClose()}
+                        />
+                    </View>
                 </View>
-                <FlatList
-                    data={bracket_groups}
-                    renderItem={renderGroups}
-                    keyExtractor={(item) => item.bracket_group_id.toString()}
-                />
-            </View>
-            <View style={{ borderBottomWidth:1, borderColor:Colors.shades.shade600, padding:10 }}>
-                <View style={{ padding:5 }}>
-                    <Text size={14} color={Colors.brand.midnight} weight='bold'>Rounds</Text>
                 </View>
-                <FlatList
-                    data={bracket_rounds}
-                    renderItem={renderRounds}
-                    keyExtractor={(item) => item.bracket_round_id.toString()}
-                />
-            </View>
-        </View>
+        </Modal>
+        
     )
 }
 

package/src/Bracket/components/BracketPlay/BracketRound.tsx

@@ -1,27 +1,34 @@
 import React from 'react';
-import type { AthleteProps, BracketRoundProps, PlayerBracketPickProps, RoundEventProps, TeamProps } from '../../../types';
+import type { AthleteProps, BracketProps, BracketRoundProps, PlayerBracketPickProps, RoundEventProps, TeamProps } from '../../../types';
 import RoundEventCard from './RoundEvent';
 import { view_styles } from '../../../constants/styles';
-import { Text, View } from '../../../Components/Themed';
+import { Button, Text, View } from '../../../Components/Themed';
+import { Checkbox } from '../../../Components';
+import { useColors } from '../../../constants/useColors';
 
 type BracketRoundSectionProps = {
     player_bracket_id?:string,
     round_event_loading?:string,
     player_bracket_picks: PlayerBracketPickProps[],
     bracket_round:BracketRoundProps,
+    selected?:boolean,
+    bracket?:BracketProps,
     round_events:RoundEventProps[],
     teams:TeamProps[],
     athletes:AthleteProps[],
     hide_titles?:boolean,
     width:number,
     orientation:'left'|'right',
+    onSelectRound:(bracket_round:BracketRoundProps) => void,
+    onSelectContest?:(contest_type:string, contest_id:string) => void
     active_bracket_group_id?:string,
     onPick: (player_bracket_pick:PlayerBracketPickProps) => void,
     left_bar?:boolean,
     right_bar?:boolean
 }
 
-const BracketRoundSection = ({ bracket_round, round_event_loading, teams, round_events, width, hide_titles, player_bracket_picks, active_bracket_group_id, onPick }:BracketRoundSectionProps) => {
+const BracketRoundSection = ({ bracket_round, selected, bracket, round_event_loading, teams, round_events, width, hide_titles, player_bracket_picks, active_bracket_group_id, onSelectContest, onSelectRound, onPick }:BracketRoundSectionProps) => {
+    const Colors = useColors();
     if(active_bracket_group_id){
         round_events = round_events.filter(re => re.bracket_group_id == active_bracket_group_id)
     }
@@ -37,13 +44,14 @@ const BracketRoundSection = ({ bracket_round, round_event_loading, teams, round_
         const away_team = teams.find(t => t.team_id == data.item.away_side_id);
         const loading = round_event_loading == data.item.round_event_id ? true : false
         return (
-            <View key={`${data.item.bracket_id}_${data.item.round_event_id}`} transparent style={{ margin:2, flex:1, flexGrow:1, justifyContent:'center' }}>
+            <View key={`${data.item.bracket_id}_${data.item.round_event_id}`} transparent style={{ margin:4, marginTop:13, flex:1, flexGrow:1, justifyContent:'center' }}>
                 <View transparent style={{ margin:1, ...view_styles.float }}>
                     <RoundEventCard
                         round_event={data.item}
                         loading={loading}
                         round_events={round_events}
                         away_team={away_team}
+                        bracket={bracket}
                         home_team={home_team}
                         away_placeholder_team={away_placeholder_team}
                         home_placeholder_team={home_placeholder_team}
@@ -56,6 +64,7 @@ const BracketRoundSection = ({ bracket_round, round_event_loading, teams, round_
                             if(bracket_round.carry_through){ return alert('Event is not eligible for picks') }
                             onPick(player_bracket_pick)
                         }}
+                        onSelectContest={onSelectContest}
                     />
                 </View>
             </View>
@@ -66,8 +75,11 @@ const BracketRoundSection = ({ bracket_round, round_event_loading, teams, round_
     return (
         <View key={`${bracket_round.bracket_id}_${bracket_round.bracket_round_id}`} transparent style={{ }}>
             {!hide_titles ?
-            <View transparent style={{ padding:10 }}>
-                <Text size={14} theme='h1' textAlign="center">{bracket_round.round_name}</Text>
+            <View transparent style={{ borderBottomWidth:selected?2:1, borderColor:selected?Colors.text.action:Colors.borders.light, margin:3 }}>
+                <Button type='text' style={{ flexDirection:'row', alignItems:'center', padding:10 }} onPress={() => onSelectRound(bracket_round)}>
+                    <Checkbox checked={selected} color={Colors.text.action} disabled size={18} style={{ borderRadius:100 }} fill_style={{ borderRadius:100 }} onSelect={() => console.log('')} />
+                    <Text style={{ marginLeft:10 }} size={14} theme='h1' textAlign="center">{bracket_round.round_name}</Text>
+                </Button>
             </View>
             :<></>}
             <View transparent nativeID="round_events" style={{ flex:1 }}>

package/src/Bracket/components/BracketPlay/RoundEvent.tsx

@@ -1,9 +1,10 @@
 import React from 'react';
 import { Image, ActivityIndicator } from "react-native"
-import type { AthleteProps, EventProps, PlayerBracketPickProps, RoundEventProps, TeamProps } from "../../../types"
+import type { AthleteProps, BracketProps, EventProps, PlayerBracketPickProps, RoundEventProps, TeamProps } from "../../../types"
 import { BracketCompetitionHelpers } from '../../api';
 import { useColors } from '../../../constants/useColors';
 import { Button, Text, View } from '../../../Components/Themed';
+import { Icons } from '../../../Components';
 
 
 type RoundEventCardProps = {
@@ -16,16 +17,18 @@ type RoundEventCardProps = {
     away_placeholder_team?:TeamProps,
     home_placeholder_team?:TeamProps,
     away_athlete?:AthleteProps,
+    bracket?:BracketProps,
     home_athlete?:AthleteProps,
     loading?:boolean,
     width:number,
     no_pick?:boolean,
     away_placeholder_pick?:PlayerBracketPickProps,
     home_placeholder_pick?:PlayerBracketPickProps,
-    onPick:(player_bracket_pick:PlayerBracketPickProps) => void
+    onPick:(player_bracket_pick:PlayerBracketPickProps) => void,
+    onSelectContest?:(contest_type:string, contest_id:string) => void
 }
 
-const RoundEventCard = ({ event, loading, away_team, away_placeholder_team, home_placeholder_team, home_team, width, no_pick, round_event, player_bracket_pick, away_placeholder_pick, home_placeholder_pick, onPick }:RoundEventCardProps) => {
+const RoundEventCard = ({ event, loading, bracket, away_team, away_placeholder_team, home_placeholder_team, home_team, width, no_pick, round_event, player_bracket_pick, away_placeholder_pick, home_placeholder_pick, onPick, onSelectContest }:RoundEventCardProps) => {
     //AWAY PLACEHOLDER
     const round_width = width//width > 600 ? undefined : width / 2
     const Colors = useColors();
@@ -53,7 +56,7 @@ const RoundEventCard = ({ event, loading, away_team, away_placeholder_team, home
 
     const handleSelectHome = () => {
         //Okay! Lets get the side_id
-        if(loading){ return }
+        if(loading){ return console.log('HEY WAS LOGIN!!!') }
         let side:'home' = 'home'
         let side_id:string|undefined = undefined
         let side_type:string = 'team'
@@ -148,7 +151,7 @@ const RoundEventCard = ({ event, loading, away_team, away_placeholder_team, home
                             <Text size={10} theme='h2' color={away_placeholder_pick.result_ind=='win'?Colors.text.success:Colors.text.error}>{away_placeholder_team.market_name} {away_placeholder_team.name}</Text>
                         </View>
                         :<></>}
-                        <View style={{ flexDirection:'row', alignItems:'center', padding:8, borderTopRightRadius:!away_placeholder_pick?8:0, borderTopLeftRadius:!away_placeholder_pick?8:0 }}>
+                        <View style={{ flexDirection:'row', alignItems:'center', padding:12, borderTopRightRadius:!round_event?.away_side_id || !round_event.away_placeholder?8:0, borderTopLeftRadius:!round_event?.away_side_id || !round_event.away_placeholder?8:0 }}>
                             <View transparent style={{ flex:1, marginRight:10, marginLeft:0 }}>
                                 {round_event.away_side_id && away_team ?
                                 <View style={{ flexGrow:1, flexDirection:'row', alignItems:'center' }}>
@@ -157,7 +160,7 @@ const RoundEventCard = ({ event, loading, away_team, away_placeholder_team, home
                                         style={{ height:20, width:20, marginRight:2 }}
                                         resizeMode="cover"
                                     />
-                                    <Text style={{ paddingRight: 5, borderRightWidth:1, borderColor:Colors.borders.light }} size={10} theme='description'>{round_event.away_seed}</Text>
+                                    <Text style={{ paddingRight: 5, borderRightWidth:1, borderColor:Colors.borders.light }} size={10} theme='description'>{!bracket?.hide_seeds?round_event.away_seed:''}</Text>
                                     <Text style={{ flex:1 }} size={10} color={getPickColor('away', player_bracket_pick)} theme='h2'>{away_team.market_name} {away_team.name}</Text>                                
                                 </View>
                                 :
@@ -169,7 +172,7 @@ const RoundEventCard = ({ event, loading, away_team, away_placeholder_team, home
                                             style={{ height:20, width:20, marginRight:2 }}
                                             resizeMode="cover"
                                         />
-                                        <Text style={{ paddingRight: 5, borderRightWidth:1, borderColor:Colors.borders.light }} size={10} theme='description'>{away_placeholder_pick.pick_seed}</Text>
+                                        <Text style={{ paddingRight: 5, borderRightWidth:1, borderColor:Colors.borders.light }} size={10} theme='description'>{!bracket?.hide_seeds?away_placeholder_pick.pick_seed:''}</Text>
                                         <Text style={{ flex:1 }} size={10} theme='h1'>{away_placeholder_team.market_name} {away_placeholder_team.name}</Text>
                                     </View>
                                     :
@@ -182,7 +185,9 @@ const RoundEventCard = ({ event, loading, away_team, away_placeholder_team, home
                                 {round_event.event_id ?
                                     <Text style={{ margin:5}} size={10} theme='h2'>{getScore(away_team?.team_id)}</Text>
                                 :<></>}
-                                {renderButton('away')}
+                                <View transparent style={{ marginLeft:5 }}>
+                                    {renderButton('away')}
+                                </View>
                             </View>
                         </View>
                     </View>
@@ -190,7 +195,7 @@ const RoundEventCard = ({ event, loading, away_team, away_placeholder_team, home
             case 'home':
                 return (
                     <View transparent>
-                        <View style={{ flexDirection:'row', alignItems:'center', padding:8, borderBottomRightRadius:!home_placeholder_pick?8:0, borderBottomLeftRadius:!home_placeholder_pick?8:0 }}>
+                        <View style={{ flexDirection:'row', alignItems:'center', padding:12, borderBottomRightRadius:!round_event?.home_side_id || !round_event.home_placeholder?8:0, borderBottomLeftRadius:!round_event?.home_side_id || !round_event.home_placeholder?8:0  }}>
 
                             <View transparent style={{ flex:1, marginRight:10 }}>
                                 {round_event.home_side_id && home_team ?
@@ -200,7 +205,7 @@ const RoundEventCard = ({ event, loading, away_team, away_placeholder_team, home
                                         style={{ height:20, width:20, marginRight:2 }}
                                         resizeMode="cover"
                                     />
-                                    <Text style={{ paddingRight: 5, borderRightWidth:1, borderColor:Colors.borders.light }} size={10} theme='description'>{round_event.home_seed}</Text>
+                                    <Text style={{ paddingRight: 5, borderRightWidth:1, borderColor:Colors.borders.light }} size={10} theme='description'>{!bracket?.hide_seeds?round_event.home_seed:''}</Text>
                                     <Text style={{ flex:1 }} size={10} color={getPickColor('home', player_bracket_pick)} theme='h2'>{home_team.market_name} {home_team.name}</Text>
                                 </View>
                                 :
@@ -212,7 +217,7 @@ const RoundEventCard = ({ event, loading, away_team, away_placeholder_team, home
                                             style={{ height:20, width:20, marginRight:2 }}
                                             resizeMode="cover"
                                         />
-                                        <Text style={{ paddingRight: 5, borderRightWidth:1, borderColor:Colors.borders.light }} size={10} theme='action'>{home_placeholder_pick.pick_seed}</Text>
+                                        <Text style={{ paddingRight: 5, borderRightWidth:1, borderColor:Colors.borders.light }} size={10} theme='action'>{!bracket?.hide_seeds?home_placeholder_pick.pick_seed:''}</Text>
                                         <Text style={{ flex:1 }} size={10} theme='h2'>{home_placeholder_team.market_name} {home_placeholder_team.name}</Text>
                                     </View>
                                     :
@@ -225,7 +230,9 @@ const RoundEventCard = ({ event, loading, away_team, away_placeholder_team, home
                                 {round_event.event_id ?
                                     <Text style={{ margin:5}} size={10} theme='h2'>{getScore(home_team?.team_id)}</Text>
                                 :<></>}
-                                {renderButton('home')}
+                                <View transparent style={{ marginLeft:5 }}>
+                                    {renderButton('home')}
+                                </View>
                             </View>
                         </View>
                         {round_event?.home_side_id && home_placeholder_pick && home_placeholder_team?
@@ -240,22 +247,31 @@ const RoundEventCard = ({ event, loading, away_team, away_placeholder_team, home
 
 
     return (
-        <View float type='header' style={{ minWidth:125, width:round_width  }}>
-            <Button transparent style={{ padding:0, borderBottomWidth:1, borderColor:Colors.borders.light}} onPress={() => handleSelectAway()}>
-                {renderSide('away')}
+        <View transparent float style={{ flexDirection:'row', borderRadius:8 }}>
+            {round_event.event_id && onSelectContest ?
+            <Button style={{ padding:10, justifyContent:'center', alignItems:'center', borderRightWidth:1, borderColor:Colors.borders.light, borderRadius:0, borderTopLeftRadius:8, borderBottomLeftRadius:8 }}
+            onPress={() => onSelectContest('team', round_event?.event_id??'')}>
+                <Icons.AlertIcon size={16} color={Colors.text.action} />
             </Button>
-            <Button transparent style={{ padding:0 }} onPress={() => handleSelectHome()}>
-                {renderSide('home')}
-            </Button>
-            {loading ?
-            <View style={{ position:'absolute', top:0, left:0, right:0, bottom:0, justifyContent:'center', alignItems:'center' }}>
-                <ActivityIndicator
-                    size='large'
-                    color={Colors.text.h1}
-                />
-            </View>
             :<></>}
+            <View transparent style={{ flex:1, minWidth:125, width:round_width  }}>
+                <Button transparent style={{ padding:0, borderBottomWidth:1, borderColor:Colors.borders.light}} onPress={() => handleSelectAway()}>
+                    {renderSide('away')}
+                </Button>
+                <Button transparent style={{ padding:0 }} onPress={() => handleSelectHome()}>
+                    {renderSide('home')}
+                </Button>
+                {loading ?
+                <View type='blur' style={{ position:'absolute', top:0, left:0, right:0, bottom:0, borderRadius:8, justifyContent:'center', alignItems:'center' }}>
+                    <ActivityIndicator
+                        size='large'
+                        color={Colors.text.h1}
+                    />
+                </View>
+                :<></>}
+            </View>
         </View>
+        
     )
 }
 

package/src/Bracket/components/BracketPlay/index.tsx

@@ -5,20 +5,26 @@ import { BracketApi, BracketComeptitionApi, BracketCompetitionHelpers } from '..
 import BracketRoundSection from './BracketRound';
 import { Button, Text, View } from '../../../Components/Themed';
 import { useColors } from '../../../constants/useColors';
+import BracketNavigator from './BracketNavigator';
+import { Icons } from '../../../Components';
 
 type BracketPlayProps = {
     player?:MyPlayerProps
+    view_mode?:'desktop'|'mobile',
+    insets?:{ top:number, bottom:number, left:number, right:number },
     player_bracket_id?:string,
     bracket_id?:string,
     width:number,
     onRequestAuthenticate: () => void,
+    onSelectContest?:(contest_type:string, contest_id:string) => void
     onChangePlayerBracket: (bracket_id:string) => void,
     onPlayerBracketUpdate: (pb:PlayerBracketProps, cpbs:CompetitionPlayerBracketProps[]) => void,
 }
 
-const BracketPlay = ({ player, width, bracket_id, player_bracket_id, onPlayerBracketUpdate, onChangePlayerBracket, onRequestAuthenticate }:BracketPlayProps) => {
+const BracketPlay = ({ player, view_mode, width, bracket_id, onSelectContest, player_bracket_id, insets, onPlayerBracketUpdate, onChangePlayerBracket, onRequestAuthenticate }:BracketPlayProps) => {
     const Colors = useColors();
     const [ round_event_loading, setRoundEventLoading ] = useState<string|undefined>(undefined);
+    const [ show_filter, setShowFilter ] = useState(false);
     const [ play_data, setPlayData ] = useState<{
         play_loading:boolean,
         player_bracket?:PlayerBracketProps,
@@ -48,7 +54,7 @@ const BracketPlay = ({ player, width, bracket_id, player_bracket_id, onPlayerBra
         events: []
     })
     const { play_loading, player_bracket, player_bracket_picks } = play_data;
-    const { loading, bracket_rounds, round_events, bracket, teams, athletes, selected_round } = bracket_data;
+    const { loading, bracket_groups, selected_group, bracket_rounds, round_events, bracket, teams, athletes, selected_round } = bracket_data;
 
     const champion_team = player_bracket?.champion_id_type == 'team' ? teams.find(t => t.team_id == player_bracket?.champion_id) : undefined
     const champion_athlete = player_bracket?.champion_id_type == 'athlete' ? athletes.find(a => a.athlete_id == player_bracket?.champion_id) : undefined
@@ -143,16 +149,21 @@ const BracketPlay = ({ player, width, bracket_id, player_bracket_id, onPlayerBra
     }
 
     const renderBracketRounds = (data: { item:BracketRoundProps, index:number }) => {
+        const selected = selected_round?.bracket_round_id == data.item.bracket_round_id ? true : false
         return (
                 <BracketRoundSection 
                     round_event_loading={round_event_loading}
                     bracket_round={data.item}
                     round_events={round_events}
+                    selected={selected}
+                    bracket={bracket}
                     teams={teams}
+                    onSelectContest={onSelectContest}
                     athletes={athletes}
                     player_bracket_picks={player_bracket_picks}
                     width={round_width}
                     orientation='right'
+                    onSelectRound={(br) => setData({ ...bracket_data, selected_round: selected_round?.bracket_round_id == br.bracket_round_id ? undefined: br })}
                     onPick={(pick) => handlePick(pick)}
                 
                 />
@@ -167,9 +178,34 @@ const BracketPlay = ({ player, width, bracket_id, player_bracket_id, onPlayerBra
         )
     }
     return (
-        <View transparent style={{ flex:1 }}>
+        <View style={{ flex:1 }}>
+            <BracketNavigator
+                visible={show_filter}
+                view_mode={view_mode}
+                insets={insets}
+                bracket_groups={bracket_groups}
+                bracket_rounds={bracket_rounds}
+                selected_group={selected_group}
+                selected_round={selected_round}
+                onSelectGroup={(g) => {
+                    setData({ ...bracket_data, selected_group: selected_group?.bracket_group_id == g.bracket_group_id ? undefined : g })
+                    setShowFilter(false)
+                }}
+                onSelectRound={(r) => {
+                    setData({ ...bracket_data, selected_round: selected_round?.bracket_round_id == r.bracket_round_id ? undefined : r })
+                    setShowFilter(false)
+                }}
+                onClose={() => setShowFilter(false)}
+            /> 
             {player_bracket ?
             <View float style={{ padding:10, borderRadius:0, flexDirection:'row', alignItems:'center' }}>
+                <Button
+                    title='Change'
+                    style={{ padding:10, marginRight:10}}
+                    type='info'
+                    title_color={Colors.text.action}
+                    onPress={() => onChangePlayerBracket(bracket.bracket_id)}
+                />
                 {champion_team ?
                 <View transparent style={{ justifyContent:'center', alignItems:'center', marginRight:10 }}>
                     <Image
@@ -193,12 +229,10 @@ const BracketPlay = ({ player, width, bracket_id, player_bracket_id, onPlayerBra
                     <Text size={14} theme='h1'>{player_bracket.bracket_name}</Text>
                     <Text style={{ marginTop:3 }} size={12} theme='description'>{(player_bracket.completion_pct*100).toFixed(2)}% Complete</Text>
                 </View>
-                <Button
-                    title='Change'
-                    style={{ padding:10 }}
-                    type='info'
-                    onPress={() => onChangePlayerBracket(bracket.bracket_id)}
-                />
+                <Button float style={{ padding:10, justifyContent:'center', alignItems:'center' }} onPress={() => setShowFilter(!show_filter)}>
+                    <Icons.FilterIcon size={16} color={Colors.text.action}/>
+                    <Text style={{ marginTop:3 }} theme='action'>FILTER</Text>
+                </Button>
             </View>
             :
             <View style={{ flexDirection:'row', alignItems:'center', padding:10 }}>
@@ -215,7 +249,6 @@ const BracketPlay = ({ player, width, bracket_id, player_bracket_id, onPlayerBra
             </View>
             }
 
-            
             <ScrollView>
                 <ScrollView horizontal style={{ flexDirection:'row', padding:10 }}>
                     {visible_rounds.sort((a,b) => a.round_number - b.round_number).map((br,i) => {
@@ -223,6 +256,7 @@ const BracketPlay = ({ player, width, bracket_id, player_bracket_id, onPlayerBra
                     })}
                 </ScrollView>
             </ScrollView>
+           
         </View>
     )
 }