be-components 1.0.1 → 1.0.3

package/src/Bracket/components/BracketCompetitionCard.tsx

@@ -0,0 +1,351 @@
+import React, { useEffect, useState } from 'react';
+import { View, ActivityIndicator, Image, TouchableOpacity, FlatList, StyleSheet } from 'react-native';
+import type { BracketCompetitionProps, BracketCompetitionScoringRuleProps, BracketProps, BracketRoundProps, CompetitionPlayerBracketProps, CompetitionResultTypeProps, MyPlayerProps, PlayerBalanceProps, PlayerBracketProps, PublicPlayerProps } from '../../types';
+import { BracketApi, BracketComeptitionApi, BracketCompetitionHelpers } from '../api';
+import Colors from '../../constants/colors';
+import { Button, Icons, Spring, Text } from '../../Components';
+import moment from 'moment-mini';
+import CompetitionLeaderboard from './CompetitionLeaderboard';
+import JoinCompetitionCard from './JoinCompetitionCard';
+import { view_styles } from '../../constants/styles';
+
+type BracketCompetitionCardProps = {
+    visible: boolean,
+    player?:MyPlayerProps,
+    player_balance?:PlayerBalanceProps,
+    bracket_competition_id?:string,
+    height:number
+    onNotEnoughBalance:(data:{ bracket_competition:BracketCompetitionProps }) => void,
+    onViewBracket:(bracket_id:string) => void,
+    onUpdateMyData: (data: {bracket_id:string, player_brackets:PlayerBracketProps[], competition_player_brackets:CompetitionPlayerBracketProps[]}) => void,
+    onShareCompetition:(bracket_competition_id:string) => void,
+    onEnterCompetition: (resp: {competition_player_bracket:CompetitionPlayerBracketProps, bracket_competition:BracketCompetitionProps}) => void,
+    onLeaveCompetition: (resp: {competition_player_bracket:CompetitionPlayerBracketProps, bracket_competition:BracketCompetitionProps}) => void,
+    competition_result_types:CompetitionResultTypeProps[],
+    my_comp_player_brackets:CompetitionPlayerBracketProps[],
+    my_player_brackets:PlayerBracketProps[],
+    onClose:() => void
+}
+
+const BracketCompetitionCard = ({ visible, player_balance, player, height, my_comp_player_brackets, competition_result_types, my_player_brackets, bracket_competition_id, onNotEnoughBalance, onUpdateMyData, onViewBracket, onClose, onLeaveCompetition, onShareCompetition, onEnterCompetition }:BracketCompetitionCardProps) => {
+    const [ action_loading, setActionLoading ] = useState(false);
+    const [ joining_bracket, setJoiningBracket ] = useState<PlayerBracketProps | undefined>(undefined);
+    const [ show_rules, setShowRules ] = useState(false);
+    const [ show_bracket, setShowBracket ] = useState(true);
+    const [ show_leaderboard, setShowLeaderboard ] = useState(false);
+    const [ show_info, setShowInfo ] = useState(true);
+    const [ show_leaders, setShowLeaders ] = useState(true);
+    const [ card_data, setData ] = useState<{
+        bracket_competition?:BracketCompetitionProps,
+        bracket?:BracketProps,
+        bracket_rounds:BracketRoundProps[],
+        competition_player_brackets:CompetitionPlayerBracketProps[],
+        bracket_competition_scoring_rules:BracketCompetitionScoringRuleProps[],
+        player_brackets:PlayerBracketProps[],
+        players:PublicPlayerProps[],
+        loaded:boolean
+    }>({
+        loaded:false,
+        bracket_rounds: [],
+        competition_player_brackets: [],
+        bracket_competition_scoring_rules:[],
+        player_brackets: [],
+        players: []
+    })
+
+    const { loaded, bracket_competition, bracket, bracket_rounds, competition_player_brackets, bracket_competition_scoring_rules } = card_data;
+    const result_type = competition_result_types.find(crt => crt.competition_result_type_id == bracket_competition?.competition_result_type_id);
+
+    useEffect(() => {
+        if(!bracket_competition_id){ return }
+        getCompetitionData(bracket_competition_id)
+    },[bracket_competition_id])
+
+    const getCompetitionData = async(id:string) => {
+        const resp = await BracketComeptitionApi.getBracketCompetitionById(id);
+        if(player){
+            const my_cpbs = resp.competition_player_brackets.filter(cpb => cpb.player_id == player.player_id)
+            const my_pbs = resp.player_brackets.filter(pbs => pbs.player_id == player.player_id)
+            onUpdateMyData({ player_brackets: my_pbs, competition_player_brackets: my_cpbs, bracket_id: resp.bracket_competition.bracket_id })
+        }
+        const br_resp = await BracketApi.getBracketById(resp.bracket_competition.bracket_id);
+        const player_ids = resp.competition_player_brackets.map(pb => pb.player_id);
+        const ps = await BracketApi.getPlayersByPlayerIds(player_ids);
+        setData({
+            ...card_data,
+            bracket_competition: resp.bracket_competition,
+            bracket_competition_scoring_rules: resp.bracket_competition_scoring_rules,
+            competition_player_brackets:resp.competition_player_brackets,
+            player_brackets: resp.player_brackets,
+            players: ps,
+            bracket: br_resp.bracket,
+            bracket_rounds: br_resp.bracket_rounds,
+            loaded: true
+        })
+    }
+
+    const can_leave = BracketCompetitionHelpers.canLeave(bracket_competition);
+
+    const handleEnter = async(cpb:CompetitionPlayerBracketProps) => {
+        setActionLoading(true);
+        const resp = await BracketComeptitionApi.joinBracketCompetition(cpb);
+        setData({
+            ...card_data,
+            bracket_competition: resp.bracket_competition,
+            competition_player_brackets: competition_player_brackets.filter(cpb => cpb.competition_player_bracket_id != resp.competition_player_bracket.competition_player_bracket_id).concat(resp.competition_player_bracket)
+        })
+        onEnterCompetition(resp);
+        setJoiningBracket(undefined)
+        setActionLoading(false);
+    }
+
+    const handleLeave = async(cpb_id:string) => {
+        setActionLoading(true);
+        const resp = await BracketComeptitionApi.leaveBracketCompetition(cpb_id)
+        setData({
+            ...card_data,
+            bracket_competition: resp.bracket_competition,
+            competition_player_brackets: competition_player_brackets.filter(cpb => cpb.competition_player_bracket_id != resp.competition_player_bracket.competition_player_bracket_id)
+        })
+        onLeaveCompetition(resp);
+        setActionLoading(false);
+    }
+
+    const renderPlayerBrackets = (data: { item: PlayerBracketProps, index:number }) => {
+        const cpb = my_comp_player_brackets.find(mcpb => mcpb.player_bracket_id == data.item.player_bracket_id);
+        return (
+            <View style={{ flexDirection:'row', padding:5 }}>
+                <TouchableOpacity style={{ flex:1 }} onPress={() => onViewBracket(data.item.bracket_id)}>
+                    <Text size={14} color={Colors.brand.midnight} weight='bold'>{data.item.bracket_name}</Text>
+                    <Text style={{ marginTop:3 }} size={12} color={Colors.brand.midnight} weight='regular'>{(data.item.completion_pct*100).toFixed(2)}% Complete</Text>
+                </TouchableOpacity>
+                {!cpb ?
+                <Button
+                    title='Join'
+                    loading={action_loading}
+                    backgroundColor={Colors.utility.success}
+                    title_color={Colors.shades.white}
+                    onPress={() => setJoiningBracket(data.item)}
+                />
+                :cpb && can_leave ?
+                <Button
+                    title='Leave'
+                    disabled={action_loading}
+                    style={{ opacity: action_loading?0.5:1 }}
+                    loading={action_loading}
+                    backgroundColor={Colors.utility.error}
+                    title_color={Colors.shades.white}
+                    onPress={() => handleLeave(cpb.competition_player_bracket_id)}
+                />
+                :<></>}
+            </View>
+        )
+    }
+
+    const renderRules = (data: { item:BracketCompetitionScoringRuleProps, index:number }) => {
+        if(!bracket){ return <></> }
+        const bracket_round = bracket_rounds.find(br => br.round_number == data.item.round_number);
+        if(!bracket_round){ return <></> }
+        return (
+            <View style={{ flexDirection:'row', padding:10 }}>
+                <Text style={{ flex:1 }} size={14} color={Colors.brand.midnight} weight='bold'>{bracket_round.round_name}</Text>
+                <Text size={14} color={Colors.brand.midnight} weight='bold'>{data.item.win_points} Points</Text>
+            </View>
+        )
+    }
+
+    if(!visible){ return <></> }
+
+    if(!loaded || !bracket_competition || !bracket){
+        return (
+            <View>
+                <ActivityIndicator style={{ padding:20, alignSelf:'center' }} size='large' color={Colors.brand.midnight} />
+            </View>
+        )
+    }
+
+    let payout = BracketCompetitionHelpers.getPayout(bracket_competition);
+    
+    return (
+        <View style={{ flex:1, backgroundColor:Colors.shades.shade100 }}>
+            <View style={{ borderBottomWidth:1, borderColor:Colors.shades.shade600, backgroundColor:Colors.shades.white }}>
+                <View style={{ padding:20, flexDirection:'row', alignItems:'center' }}>
+                    <TouchableOpacity style={{ flex:1, flexDirection:'row', alignItems:'center' }} onPress={() => onClose()}>
+                        <View style={{ padding:10 }}>
+                            <Icons.ChevronIcon size={12} color={Colors.brand.midnight} direction='left' />
+                        </View>
+                        <View>
+                            <Image
+                                source={{ uri: bracket_competition.image?.url }}
+                                style={{ height:50, width:50, borderRadius:4 }}
+                                resizeMode='cover'
+                            />
+                        </View>
+                        <View style={{ flex:1, marginLeft:10 }}>
+                            <Text weight='bold' size={14} color={Colors.brand.midnight}>{bracket_competition.competition_name}</Text>
+                            <Text style={{ marginTop:4 }} size={12} color={Colors.brand.slate}>{bracket_competition.competition_description}</Text>
+                        </View>
+                    </TouchableOpacity>
+                    <TouchableOpacity style={{ padding:10 }} onPress={() => onShareCompetition(bracket_competition.bracket_competition_id)}>
+                        <Icons.ShareIcon color={Colors.brand.electric} size={12} />
+                    </TouchableOpacity>
+                </View>
+            </View>
+            <View style={local_styles.header}>
+                <TouchableOpacity style={local_styles.section_header} onPress={() => setShowBracket(!show_bracket)}>
+                    <View>
+                    <Image
+                        source={{ uri: 'https://res.cloudinary.com/hoabts6mc/image/upload/v1677259366/Bracket_image_h0fkku.webp' }}
+                        style={{ width:50, height:35, borderRadius:4 }}
+                        resizeMode='cover'
+                    />
+                    </View>
+                    <View style={{ flex:1, marginLeft:10 }}>
+                        <Text size={16} color={Colors.brand.midnight} weight='bold'>{bracket.bracket_name}</Text>
+                        <Text style={{ marginTop:3 }} size={14} color={Colors.brand.slate} weight='regular'>Bracket starts {moment(bracket.scheduled_datetime).format('MMM DD YYYY hh:mm a')}</Text>
+                    </View>
+                    <Icons.ChevronIcon size={10} direction={show_bracket ? 'up' : 'down'} color={Colors.brand.midnight} />
+                </TouchableOpacity>
+                {show_bracket ?
+                <View style={{ padding:20 }}>
+                    {my_player_brackets.length > 0 ?
+                    <View style={{ borderWidth:1, borderColor:Colors.shades.shade600, borderRadius:8 }}>
+                         <View style={{ borderBottomWidth:1, borderBottomColor:Colors.shades.shade600, padding:10 }}>
+                            <Text size={16} color={Colors.brand.slate} weight='regular'>MY ELIGIBLE BRACKETS</Text>
+                        </View>
+                        <View style={{ padding:10 }}>
+                            <FlatList
+                                data={my_player_brackets}
+                                renderItem={renderPlayerBrackets}
+                                keyExtractor={(item) => item.player_bracket_id.toString()}
+                            />
+                        </View>
+                    </View>
+                    :<></>}
+                    <View style={{ margin:10, marginBottom:0 }}>
+                        <Button
+                            title='Fill Out Bracket'
+                            padding={15}
+                            title_color={Colors.shades.white}
+                            backgroundColor={Colors.brand.electric}
+                            onPress={() => onViewBracket(bracket.bracket_id)}
+                        />
+                    </View>
+                </View>
+                :<></>}
+            </View>
+            <View style={local_styles.header}>
+                <TouchableOpacity style={local_styles.section_header} onPress={() => setShowInfo(!show_info)}>
+                    <View style={{ flex:1 }}>
+                        <Text size={16} color={Colors.brand.midnight} weight='bold'>COMPETITION DETAILS</Text>
+                        <Text style={{ marginTop:3 }} size={14} color={Colors.brand.slate} weight='regular'>Detailed Information on this competition</Text>
+                    </View>
+                    <Icons.ChevronIcon size={10} direction={show_info ? 'up' : 'down'} color={Colors.brand.midnight} />
+                </TouchableOpacity>
+                {show_info ?
+                <View style={{ padding:10, margin:10, borderWidth:1, borderRadius:8, borderColor:Colors.shades.shade600 }}>
+                    <View style={{ flexDirection:'row', alignItems:'center', padding:5 }}>
+                        <Text style={{ flex:1 }} size={14} weight='bold' color={Colors.brand.midnight}>Ticket Price</Text>
+                        <Text size={14} color={Colors.brand.midnight} weight='bold'>${bracket_competition.buy_in.toFixed(2)}</Text>
+                    </View>
+                    <View style={{ flexDirection:'row', alignItems:'center', padding:5 }}>
+                        <Text style={{ flex:1 }} size={14} weight='bold' color={Colors.brand.midnight}>Current Payout</Text>
+                        <Text size={14} color={Colors.brand.midnight} weight='bold'>${payout.toFixed(2)}</Text>
+                    </View>
+                    {result_type ?
+                    <View style={{ flexDirection:'row', alignItems:'center', padding:5 }}>
+                        <Text style={{ flex:1 }} size={14} weight='bold' color={Colors.brand.midnight}>Payout Type</Text>
+                        <Text size={14} color={Colors.brand.midnight} weight='bold'>{result_type.label}</Text>
+                    </View>
+                    :<></>}
+                    <View style={{ flexDirection:'row', alignItems:'center', padding:5 }}>
+                        <Text style={{ flex:1 }} size={14} weight='bold' color={Colors.brand.midnight}>Entries</Text>
+                        <Text size={14} color={Colors.brand.midnight} weight='bold'>{bracket_competition.tickets_sold} / {bracket_competition.max_brackets}</Text>
+                    </View>
+                </View>
+                :<></>}
+            </View>
+            <View style={local_styles.header}>
+                <TouchableOpacity style={local_styles.section_header} onPress={() => setShowRules(!show_rules)}>
+                    <View style={{ flex:1 }}>
+                        <Text size={16} color={Colors.brand.midnight} weight='bold'>SCORING RULES</Text>
+                        <Text style={{ marginTop:3 }} size={14} color={Colors.brand.slate} weight='regular'>Rules on how picks are scored within each bracket round</Text>
+                    </View>
+                    <Icons.ChevronIcon size={10} direction={show_rules ? 'up' : 'down'} color={Colors.brand.midnight} />
+                </TouchableOpacity>
+                {show_rules ?
+                <View style={{ padding:10, marginBottom:15, backgroundColor:Colors.shades.shade600, borderRadius:8, marginLeft:10, marginRight:10 }}>
+                    <FlatList
+                        data={bracket_competition_scoring_rules.sort((a,b) => a.round_number - b.round_number)}
+                        renderItem={renderRules}
+                        keyExtractor={(item) => item.bracket_competition_scoring_rule_id.toString()}
+                    />
+                </View>
+                :<></>}
+            </View>
+            <View style={local_styles.header}>
+                <TouchableOpacity style={local_styles.section_header} onPress={() => setShowLeaders(!show_leaders)}>
+                    <View style={{ flex:1 }}>
+                        <Text size={16} color={Colors.brand.midnight} weight='bold'>LEADERBOARD</Text>
+                        <Text style={{ marginTop:3 }} size={14} color={Colors.brand.slate} weight='regular'>Leaderboard showing points and the current payouts.</Text>
+                    </View>
+                    <Icons.ChevronIcon size={10} direction={show_leaders ? 'up' : 'down'} color={Colors.brand.midnight} />
+                </TouchableOpacity>
+                {show_leaders ?
+                <View style={{ padding:10 }}>
+                    <CompetitionLeaderboard
+                        my_competition_player_brackets={my_comp_player_brackets}
+                        my_player_brackets={my_player_brackets}
+                        bracket_competition_id={bracket_competition.bracket_competition_id}
+                        view_mode='short'
+                        show_champions={BracketCompetitionHelpers.showChampions(bracket_competition)}
+                        onViewFull={() => setShowLeaderboard(true)}
+                    />
+                </View>
+                :<></>}
+            </View>
+            {show_leaderboard ?
+            <View style={{ position: 'absolute', left:0, right:0, bottom:0 }}>
+                <Spring
+                    to={0}
+                    from={500}
+                    slide='vertical'
+                >
+                    <View style={{ flex:1, height, backgroundColor:Colors.shades.white }}>
+                        <CompetitionLeaderboard
+                            bracket_competition_id={bracket_competition.bracket_competition_id}
+                            view_mode='full'
+                            show_champions={BracketCompetitionHelpers.showChampions(bracket_competition)}
+                            onClose={() => setShowLeaderboard(false)}
+                            my_competition_player_brackets={my_comp_player_brackets}
+                            my_player_brackets={my_player_brackets}
+                        />
+                    </View>
+                </Spring>
+            </View>
+            :<></>}
+            {joining_bracket ?
+            <View style={{ position:'absolute', top:0, bottom:0, left:0, right:0, backgroundColor:Colors.shades.black_faded_heavy, justifyContent:'center', alignItems:'center' }}>
+                <JoinCompetitionCard
+                    player={player}
+                    loading={action_loading}
+                    player_balance={player_balance}
+                    bracket_competition={bracket_competition}
+                    player_bracket={joining_bracket}
+                    onClose={() => setJoiningBracket(undefined)}
+                    onNotEnoughBalance={onNotEnoughBalance}
+                    onEnterCompetition={(cpb) => handleEnter(cpb)}
+                />
+            </View>
+            :<></>}
+        </View>
+    )
+}
+
+
+const local_styles = StyleSheet.create({
+    header: { margin:10, backgroundColor:Colors.shades.white, borderRadius:8, ...view_styles.float },
+    section_header: { padding:10, paddingLeft:20, paddingRight:20, flexDirection:'row', alignItems:'center' }
+})
+
+export default BracketCompetitionCard

package/src/Bracket/components/BracketCompetitionSelector.tsx

@@ -0,0 +1,123 @@
+import React, { useEffect, useState } from 'react';
+import { FlatList, TouchableOpacity, View, Image } from 'react-native';
+import type { BracketCompetitionProps, BracketProps, LeagueProps } from '../../types';
+import { Icons, Text } from '../../Components';
+import { BracketComeptitionApi } from '../api';
+import Colors from '../../constants/colors';
+import moment from 'moment-mini';
+
+type BracketCompetitionSelectorProps = {
+    visible:boolean,
+    leagues:LeagueProps[],
+    brackets:BracketProps[],
+    onClose:() => void,
+    onCompetitionSelect:(bracket_competition:BracketCompetitionProps) => void
+}
+const BracketCompetitionSelector = ({ visible, leagues, brackets, onClose, onCompetitionSelect }:BracketCompetitionSelectorProps) => {
+    const [ card_data, setData ] = useState<{
+        loading:boolean,
+        shown_brackets:string[]
+        bracket_competitions:BracketCompetitionProps[]
+    }>({
+        loading:false,
+        shown_brackets: [],
+        bracket_competitions: []
+    })
+    const { loading, bracket_competitions, shown_brackets } = card_data;
+
+    const unique_bracket_ids = [ ...new Set(bracket_competitions.map(bc => bc.bracket_id)) ]
+
+    useEffect(() => {
+        if(!visible){ return }
+        getData();
+    },[visible])
+
+    const getData = async() => {
+        const comps = await BracketComeptitionApi.getBracketCompetitions();
+        setData({
+            ...card_data,
+            bracket_competitions: comps
+        })
+    }
+
+    const renderCompetitions = (data: { item:BracketCompetitionProps, index:number } ) => {
+        return (
+            <TouchableOpacity style={{ padding:10, flexDirection:'row', alignItems:'center', borderBottomWidth:1, borderColor:Colors.shades.shade600 }}
+            onPress={() => onCompetitionSelect(data.item)}>
+                <View>
+                    <Image
+                        source={{ uri: data.item.image?.url }}
+                        style={{ height:40, width:40, borderRadius:4 }}
+                        resizeMode='cover'
+                    />
+                </View>
+                <View style={{ flex:1, marginLeft:5 }}>
+                    <Text size={14} color={Colors.brand.midnight} weight='bold'>{data.item.competition_name}</Text>
+                    <Text style={{ marginTop:3 }} size={12} color={Colors.brand.slate} weight='regular'>{data.item.competition_description}</Text>
+                </View>
+                <Icons.ChevronIcon size={10} color={Colors.brand.midnight} direction='right' />
+            </TouchableOpacity>
+        )
+    }
+
+    const renderBrackets = (data: { item:string, index:number }) => {
+        const bracket = brackets.find(b => b.bracket_id == data.item);
+        if(!bracket){ return <></> }
+        const league = leagues.find(l => l.league_id == bracket.league_id);
+        const comps = bracket_competitions.filter(bc => bc.bracket_id == data.item);
+        const selected = shown_brackets.includes(data.item)
+        const started = moment().isAfter(moment(bracket.scheduled_datetime)) ? true : false;
+        return (
+            <View>
+                <TouchableOpacity style={{ flexDirection:'row', alignItems:'center', padding:10, backgroundColor:Colors.shades.shade100 }}
+                onPress={() => selected ? setData({ ...card_data, shown_brackets: shown_brackets.filter(b => b != data.item) }) : setData({ ...card_data, shown_brackets: shown_brackets.concat(data.item) })}>
+                    <View>
+                        <Image
+                            source={{ uri: league?.league_image }}
+                            style={{ height:40, width:40, borderRadius:4 }}
+                            resizeMode='cover'
+                        />
+                    </View>
+                    <View style={{ flex:1, marginLeft:5 }}>
+                        <Text size={14} color={Colors.brand.midnight} weight='bold'>{bracket.bracket_name}</Text>
+                        <Text style={{ marginTop:3 }} size={12} color={Colors.brand.slate}>{started? 'In Progress' : `Starts at ${moment(bracket.scheduled_datetime).format('MMM DD YYYY hh:mm a')}`}</Text>
+                    </View>
+                    <View style={{ justifyContent:'center', alignItems:'center', padding:5, paddingRight:15 }}>
+                        <Text size={14} color={Colors.brand.midnight} weight='bold'>{comps.length}</Text>
+                        <Text style={{ marginTop:3 }} size={12} color={Colors.brand.slate} weight='regular'>COMPETITIONS</Text>
+                    </View>
+                    <Icons.ChevronIcon direction={selected?'up':'down'} size={10} color={Colors.brand.midnight} />
+                </TouchableOpacity>
+                {selected ?
+                <View style={{ padding:10 }}>
+                    <FlatList
+                        data={comps}
+                        renderItem={renderCompetitions}
+                        keyExtractor={(item) => item.bracket_competition_id.toString()}
+                    />
+                </View>
+                :<></>}
+            </View>
+        )
+    }
+
+    if(!visible || loading){ return <></> }
+    return (
+        <View>
+            <TouchableOpacity style={{ flexDirection:'row', alignItems:'center', padding:20, borderBottomWidth:1, borderColor:Colors.shades.shade100 }} onPress={() => onClose()}>
+                <Icons.ChevronIcon direction='left' size={12} color={Colors.brand.midnight} />
+                <View style={{ flex:1, marginLeft:20 }}>
+                    <Text size={18} color={Colors.brand.midnight} weight='bold'>Bracket Competitions</Text>
+                    <Text style={{ marginTop:4 }} size={14} color={Colors.brand.slate} weight='regular'>Select a competition below to see more details</Text>
+                </View>
+            </TouchableOpacity>
+            <FlatList
+                data={unique_bracket_ids}
+                renderItem={renderBrackets}
+                keyExtractor={(item) => item.toString()}
+            />
+        </View>
+    )
+}
+
+export default BracketCompetitionSelector

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

@@ -0,0 +1,75 @@
+import React from 'react';
+import { FlatList, TouchableOpacity, View } from "react-native";
+import type { BracketGroupProps, BracketRoundProps } from '../../../types';
+import { Button, Checkbox, Text } from '../../../Components';
+import Colors from '../../../constants/colors';
+
+type BracketNavigatorProps = {
+    bracket_rounds:BracketRoundProps[],
+    bracket_groups:BracketGroupProps[],
+    selected_round?:BracketRoundProps,
+    selected_group?:BracketGroupProps,
+    onSelectRound:(r:BracketRoundProps) => void,
+    onSelectGroup:(g:BracketGroupProps) => void,
+    onClose: () => void
+}
+
+const BracketNavigator = ({ bracket_rounds, bracket_groups, selected_round, selected_group, onSelectGroup, onSelectRound, onClose }:BracketNavigatorProps) => {
+
+    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>
+        )
+    }
+
+    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>
+        )
+    }
+
+    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>
+                </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>
+    )
+}
+
+export default BracketNavigator

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

@@ -0,0 +1,86 @@
+import React from 'react';
+import { View } from "react-native"
+import Colors from "../../../constants/colors"
+import type { AthleteProps, BracketRoundProps, PlayerBracketPickProps, RoundEventProps, TeamProps } from '../../../types';
+import RoundEventCard from './RoundEvent';
+import { view_styles } from '../../../constants/styles';
+import { Text } from '../../../Components';
+
+type BracketRoundSectionProps = {
+    player_bracket_id?:string,
+    round_event_loading?:string,
+    player_bracket_picks: PlayerBracketPickProps[],
+    bracket_round:BracketRoundProps,
+    round_events:RoundEventProps[],
+    teams:TeamProps[],
+    athletes:AthleteProps[],
+    hide_titles?:boolean,
+    width:number,
+    orientation:'left'|'right',
+    active_bracket_group_id?:string,
+    onPick: (player_bracket_pick:PlayerBracketPickProps) => void,
+    bracket_size: { width:number, height:number },
+    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) => {
+
+    if(active_bracket_group_id){
+        round_events = round_events.filter(re => re.bracket_group_id == active_bracket_group_id)
+    }
+
+    const renderRoundEvents = (data: { item:RoundEventProps, index:number}) => {
+        const player_bracket_pick = player_bracket_picks.find(pbr => pbr.round_event_id == data.item.round_event_id);
+        const away_placeholder_pick = player_bracket_picks.find(pbr => pbr.round_event_id == data.item.away_placeholder);
+        const home_placeholder_pick = player_bracket_picks.find(pbr => pbr.round_event_id == data.item.home_placeholder);
+        const away_placeholder_team = teams.find(t => t.team_id == away_placeholder_pick?.pick_side_id)
+        const home_placeholder_team = teams.find(t => t.team_id == home_placeholder_pick?.pick_side_id)
+
+        const home_team = teams.find(t => t.team_id == data.item.home_side_id);
+        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 style={{ margin:2, flex:1, flexGrow:1, justifyContent:'center' }}>
+                <View style={{ margin:1, ...view_styles.float }}>
+                    <RoundEventCard
+                        round_event={data.item}
+                        loading={loading}
+                        round_events={round_events}
+                        away_team={away_team}
+                        home_team={home_team}
+                        away_placeholder_team={away_placeholder_team}
+                        home_placeholder_team={home_placeholder_team}
+                        player_bracket_pick={player_bracket_pick}
+                        width={width}
+                        no_pick={bracket_round.carry_through ? true : false}
+                        away_placeholder_pick={away_placeholder_pick}
+                        home_placeholder_pick={home_placeholder_pick}
+                        onPick={(player_bracket_pick) => {
+                            if(bracket_round.carry_through){ return alert('Event is not eligible for picks') }
+                            onPick(player_bracket_pick)
+                        }}
+                    />
+                </View>
+            </View>
+        )
+    }
+
+
+    return (
+        <View style={{ }}>
+            {!hide_titles ?
+            <View style={{ padding:10 }}>
+                <Text size={14} color={Colors.brand.midnight} weight='bold' textAlign="center">{bracket_round.round_name}</Text>
+            </View>
+            :<></>}
+            <View nativeID="round_events" style={{ flex:1 }}>
+                {round_events.filter(re => re.bracket_round_id == bracket_round.bracket_round_id).sort((a,b) => a.event_number - b.event_number).map((re, i) => {
+                    return renderRoundEvents({ item: re, index:i })
+                })}
+            </View>
+        </View>
+    )
+}
+
+export default BracketRoundSection