be-components 1.0.0 → 1.0.2

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

@@ -0,0 +1,243 @@
+import React, { useEffect, useState } from 'react';
+import { View, ActivityIndicator, TouchableOpacity, ScrollView, Image } from "react-native";
+import type { AthleteProps, BracketGroupProps, BracketProps, BracketRoundProps, CompetitionPlayerBracketProps, EventProps, PlayerBracketPickProps, PlayerBracketProps, RoundEventProps, TeamProps } from '../../../types';
+import { BracketApi, BracketComeptitionApi } from '../../api';
+import { Button, Icons, Text } from '../../../Components';
+import Colors from '../../../constants/colors';
+import BracketRoundSection from './BracketRound';
+import BracketNavigator from './BracketNavigator';
+import { view_styles } from '../../../constants/styles';
+
+type BracketPlayProps = {
+    visible: boolean,
+    room_size:{ width:number, height:number },
+    player_bracket_id?:string,
+    bracket_id?:string,
+    player_id?:string,
+    onRequestAuthenticate: () => void,
+    onChangePlayerBracket: (bracket_id:string) => void,
+    onClose: () => void
+    onPlayerBracketUpdate: (pb:PlayerBracketProps, cpbs:CompetitionPlayerBracketProps[]) => void,
+}
+const MIN_ROUND_WIDTH = 175
+const MAX_ROUND_WIDTH = 200;
+const BracketPlay = ({ visible, player_id, room_size, bracket_id, player_bracket_id, onClose, onPlayerBracketUpdate, onChangePlayerBracket, onRequestAuthenticate }:BracketPlayProps) => {
+    const [ show_filter, setShowFilter ] = useState(true);
+    const [ play_data, setPlayData ] = useState<{
+        loading:boolean,
+        player_bracket?:PlayerBracketProps,
+        player_bracket_picks:PlayerBracketPickProps[]
+    }>({
+        loading:false,
+        player_bracket_picks: []
+    });
+    const [ bracket_data, setData ] = useState<{
+        loaded:boolean,
+        bracket?:BracketProps,
+        bracket_groups:BracketGroupProps[],
+        bracket_rounds:BracketRoundProps[],
+        round_events:RoundEventProps[],
+        teams:TeamProps[],
+        athletes:AthleteProps[],
+        selected_group?:BracketGroupProps,
+        selected_round?:BracketRoundProps,
+        events:EventProps[]
+    }>({
+        loaded: false, 
+        bracket_groups: [],
+        bracket_rounds: [],
+        round_events: [],
+        teams: [],
+        athletes: [],
+        events: []
+    })
+    const { player_bracket, player_bracket_picks } = play_data;
+    const { bracket_groups, bracket_rounds, round_events, bracket, teams, athletes, selected_group, 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
+
+    let visible_rounds = bracket_rounds
+    if(selected_round){
+        let next_round = bracket_rounds.findIndex(r => r.bracket_round_id == selected_round.bracket_round_id);
+        visible_rounds = bracket_rounds.filter((_, i) => i == next_round || i == next_round + 1)
+    }
+
+    let round_width = (room_size.width / 2) - 15
+    if(round_width < MIN_ROUND_WIDTH){ round_width = MIN_ROUND_WIDTH }
+    if(round_width > MAX_ROUND_WIDTH){ round_width = MAX_ROUND_WIDTH }
+    useEffect(() => {
+        if(!bracket_id || !visible){ return }
+        getData(bracket_id)
+    },[visible, bracket_id])
+
+    useEffect(() => {
+        if(!player_bracket_id){ return }
+        getPlayData(player_bracket_id);
+    },[player_bracket_id])
+
+    const getPlayData = async(id:string) => {
+        const resp = await BracketComeptitionApi.getPlayerBracketById(id)
+        setPlayData({
+            ...play_data,
+            loading:false,
+            player_bracket_picks: resp.player_bracket_picks,
+            player_bracket:resp.player_bracket
+        })
+    }
+
+    const handlePick = async(pick:PlayerBracketPickProps) => {
+        if(!player_id){ return onRequestAuthenticate() }
+        if(!bracket_id){ return }
+        let new_pick:PlayerBracketPickProps = { ...pick, bracket_id: bracket_id }
+        if(!player_bracket){
+            const new_pb = await BracketComeptitionApi.createPlayerBracket({
+                player_bracket_id: '',
+                player_id: '',
+                bracket_name: `My Bracket ${Math.random()}`,
+                create_datetime: '', last_update_datetime: '',
+                bracket_id: bracket_id,
+                completion_pct: 0,
+                completion_status: 'inprogress',
+                status: 'active'
+            })
+            new_pick.player_bracket_id = new_pb.player_bracket_id
+        } else {
+            new_pick.player_bracket_id = player_bracket.player_bracket_id
+        }
+        const resp = await BracketComeptitionApi.savePick(new_pick);
+        setPlayData({
+            ...play_data,
+            player_bracket: resp.player_bracket,
+            player_bracket_picks: player_bracket_picks.filter(pbp => !resp.player_bracket_picks.find(npb => npb.player_bracket_pick_id == pbp.player_bracket_pick_id)).concat(resp.player_bracket_picks.filter(pb => pb.status != 'deleted'))
+        })
+        onPlayerBracketUpdate(resp.player_bracket, resp.competition_player_brackets)
+    }
+    const getData = async(id:string) => {
+        const b = await BracketApi.getBracketById(id);
+        let team_ids:string[] = []
+        let athlete_ids:string[] = []
+        
+        b.round_events.map(re => {
+            if(re.away_side_type == 'team' && re.away_side_id){ team_ids.push(re.away_side_id) }
+            if(re.home_side_type == 'team' && re.home_side_id){ team_ids.push(re.home_side_id) }
+            if(re.away_side_type == 'athlete' && re.away_side_id){ athlete_ids.push(re.away_side_id) }
+            if(re.home_side_type == 'athlete' && re.home_side_id){ athlete_ids.push(re.home_side_id) }
+        })
+        let ts = await BracketApi.getTeamsByIds(team_ids);
+        let aths = await BracketApi.getAthletesByIds(athlete_ids);
+
+        setData({
+            ...bracket_data,
+            bracket: b.bracket,
+            bracket_groups: b.bracket_groups,
+            bracket_rounds: b.bracket_rounds,
+            round_events: b.round_events,
+            teams: ts,
+            athletes: aths
+        })
+    }
+
+    const renderBracketRounds = (data: { item:BracketRoundProps, index:number }) => {
+        return (
+            <BracketRoundSection 
+                bracket_round={data.item}
+                round_events={round_events}
+                teams={teams}
+                athletes={athletes}
+                player_bracket_picks={player_bracket_picks}
+                width={round_width}
+                orientation='right'
+                onPick={(pick) => handlePick(pick)}
+                bracket_size={room_size}
+            
+            />
+        )
+    }
+
+
+    if(!visible){ return <></> }
+
+    if(!bracket){
+        return (
+            <View>
+                <ActivityIndicator size='large' style={{ padding:20, alignSelf:'center' }} color={Colors.brand.midnight} />
+            </View>
+        )
+    }
+    return (
+        <View style={{ flex:1 }}>
+            <View style={{ zIndex:10, flexDirection:'row', alignItems:'center', padding:20, borderBottomWidth:1, borderColor:Colors.shades.shade100 }}>
+                <TouchableOpacity style={{ flex:1, flexDirection:'row', alignItems: 'center' }} onPress={() => onClose()}>
+                    <Icons.ChevronIcon direction='left' size={12} color={Colors.brand.midnight} />
+                    <View style={{ flex:1, marginLeft:20, marginRight:10 }}>
+                        <Text size={18} color={Colors.brand.midnight} weight='bold'>{bracket.bracket_name}</Text>
+                    </View>
+                </TouchableOpacity>
+                <View style={{ zIndex:10 }}>
+                    <Button
+                        title='Filter'
+                        backgroundColor={Colors.brand.electric}
+                        title_color={Colors.shades.white}
+                        onPress={() => setShowFilter(true)}
+                    />
+                    {show_filter ?
+                    <View style={{ position:'absolute', top:5, right:5, backgroundColor:Colors.shades.white, borderRadius:8, ...view_styles.float }}>
+                        <BracketNavigator
+                            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 })}
+                            onSelectRound={(r) => setData({ ...bracket_data, selected_round: selected_round?.bracket_round_id == r.bracket_round_id ? undefined : r })}
+                            onClose={() => setShowFilter(false)}
+                        />
+                    </View>
+                    :<></>}
+                </View>
+            </View>
+            {player_bracket ?
+            <View style={{ padding:20, flexDirection:'row', alignItems:'center', backgroundColor:Colors.shades.shade100 }}>
+                {champion_team ?
+                <View style={{ justifyContent:'center', alignItems:'center', marginRight:10 }}>
+                    <Image
+                        source={{ uri: champion_team.image?.url }}
+                        style={{ height:20, width:20, borderRadius:4 }}
+                        resizeMode='cover'
+                    />
+                    <Text style={{ marginTop:2 }} size={12} color={Colors.brand.midnight} weight='bold' textAlign='center'>{champion_team.abbr}</Text>
+                </View>
+                :champion_athlete ?
+                <View style={{ justifyContent:'center', alignItems:'center', marginRight:10 }}>
+                    <Image
+                        source={{ uri: champion_athlete.image?.url }}
+                        style={{ height:20, width:20, borderRadius:4 }}
+                        resizeMode='cover'
+                    />
+                    <Text style={{ marginTop:2 }} size={12} color={Colors.brand.midnight} weight='bold' textAlign='center'>{champion_athlete.abbr_name}</Text>
+                </View>
+                :<></>}
+                <View style={{ flex:1 }}>
+                    <Text size={14} color={Colors.brand.midnight} weight='bold'>{player_bracket.bracket_name}</Text>
+                    <Text style={{ marginTop:3 }} size={12} color={Colors.brand.midnight} weight='regular'>{(player_bracket.completion_pct*100).toFixed(2)}% Complete</Text>
+                </View>
+                <Button
+                    title='Change'
+                    backgroundColor={Colors.brand.electric}
+                    title_color={Colors.shades.white}
+                    onPress={() => onChangePlayerBracket(bracket.bracket_id)}
+                />
+            </View>
+            :<></>}
+            <ScrollView style={{ flex:1, backgroundColor:Colors.shades.shade100 }}>
+                <View style={{ flex:1, flexDirection:'row', padding:10, overflow:'scroll' }}>
+                    {visible_rounds.sort((a,b) => a.round_number - b.round_number).map((br,i) => {
+                        return renderBracketRounds({ item:br, index:i })
+                    })}
+                </View>
+            </ScrollView>
+        </View>
+    )
+}
+
+export default BracketPlay

package/src/Bracket/components/BracketSelector.tsx

@@ -0,0 +1,87 @@
+import React from 'react';
+import { TouchableOpacity, FlatList, View, Image } from "react-native"
+import type { BracketProps, LeagueProps } from '../../types';
+import Colors from '../../constants/colors';
+import { Button, Icons, Text } from '../../Components';
+import moment from 'moment-mini';
+
+type BracketSelectorProps = {
+    visible: boolean,
+    brackets: BracketProps[],
+    leagues:LeagueProps[],
+    onSelectBracket:(bracket:BracketProps) => void,
+    onClose:() => void
+}
+
+const BracketSelector = ({ visible, leagues, brackets, onSelectBracket, onClose }:BracketSelectorProps) => {
+
+    const unique_league_ids = [ ...new Set(brackets.map(b => b.league_id)) ]
+
+
+    const renderBrackets = (data: { item:BracketProps, index:number }) => {
+        const started = moment().isAfter(moment(data.item.scheduled_datetime)) ? true : false;
+        return (
+            <TouchableOpacity style={{ flexDirection:'row', alignItems:'center', padding:20, borderBottomColor:Colors.shades.shade600, borderBottomWidth:1 }} onPress={() => onSelectBracket(data.item)}>
+                <View style={{ flex:1 }}>
+                    <Text size={14} color={Colors.brand.midnight} weight='bold'>{data.item.bracket_name}</Text>
+                    <Text style={{ marginTop:3 }} size={12} color={Colors.brand.slate} weight='regular'>{started?'In Progress':`Starts at ${moment(data.item.scheduled_datetime).format('MMM DD YYYY hh:mm a')}`}</Text>
+                </View>
+                <Button
+                    title='VIEW'
+                    title_color={Colors.shades.white}
+                    backgroundColor={Colors.brand.electric}
+                    disabled
+                    onPress={() => console.log('')}
+                />
+            </TouchableOpacity>
+        )
+    }
+
+    const renderLeagues = ( data : { item:string, index:number }) => {
+        const league = leagues.find(l => l.league_id == data.item);
+        const league_brackets = brackets.filter(b => b.league_id == data.item);
+        if(!league){ return <></> }
+        return (
+            <View>
+                <View style={{ flexDirection:'row', alignItems:'center', padding:10, backgroundColor:Colors.shades.shade100 }}>
+                    <View>
+                        <Image
+                            source={{ uri: league.league_image }}
+                            style={{ height:30, width:30, borderRadius:4 }}
+                            resizeMode='cover'
+                        />
+                    </View>
+                    <View style={{ flex:1, marginLeft:10 }}>
+                        <Text size={14} color={Colors.brand.midnight} weight='bold'>{league.league_name}</Text>
+                        <Text style={{ marginTop:3 }} size={12} color={Colors.brand.slate}>{league_brackets.length} Brackets</Text>
+                    </View>
+                </View>
+                <FlatList
+                    data={league_brackets}
+                    renderItem={renderBrackets}
+                    keyExtractor={(item) => item.bracket_id.toString()}
+                />
+            </View>
+        )
+    }
+
+    if(!visible){ 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'>Active Brackets</Text>
+                    <Text style={{ marginTop:4 }} size={14} color={Colors.brand.slate} weight='regular'>Select a bracket below to make or edit picks</Text>
+                </View>
+            </TouchableOpacity>
+            <FlatList
+                data={unique_league_ids}
+                renderItem={renderLeagues}
+                keyExtractor={(item) => item.toString()}
+            />
+        </View>
+    )
+}
+
+export default BracketSelector

package/src/Bracket/components/CompetitionLeaderboard.tsx

@@ -0,0 +1,165 @@
+import React, { useEffect, useState } from 'react';
+import { FlatList, View, TouchableOpacity, Image } from 'react-native';
+import type { AthleteProps, CompetitionPlayerBracketProps, PlayerBracketProps, PublicPlayerProps, TeamProps } from '../../types';
+import { BracketApi, BracketComeptitionApi } from '../api';
+import Colors from '../../constants/colors';
+import { Button, Text } from '../../Components';
+import { CompetitionHelpers } from '../../Competition/api';
+
+type CompetitionLeaderboardProps = {
+    bracket_competition_id:string,
+    my_competition_player_brackets:CompetitionPlayerBracketProps[],
+    my_player_brackets:PlayerBracketProps[],
+    view_mode: 'short'|'full',
+    show_champions?:boolean,
+    onViewFull?: () => void,
+    onClose?:() => void
+}
+
+const CompetitionLeaderboard = ({ bracket_competition_id, my_competition_player_brackets, my_player_brackets, view_mode, show_champions, onViewFull, onClose }:CompetitionLeaderboardProps) => {
+    const [ leaders_data, setData ] = useState<{
+        loading:boolean,
+        offset:number,
+        teams:TeamProps[],
+        athletes:AthleteProps[],
+        competition_player_brackets:CompetitionPlayerBracketProps[],
+        player_brackets:PlayerBracketProps[],
+        players:PublicPlayerProps[]
+    }>({
+        loading:false,
+        offset:0,
+        teams:[],
+        athletes:[],
+        competition_player_brackets: [],
+        player_brackets:[],
+        players:[]
+    })
+    const {  competition_player_brackets, players, player_brackets, teams, athletes } = leaders_data;
+
+    let visible_leaders = competition_player_brackets.sort((a,b) => a.place - b.place);
+    if(view_mode == 'short'){ visible_leaders = competition_player_brackets.slice(0, 3) }
+
+    useEffect(() => {
+        if(!bracket_competition_id){ return }
+        getLeaders(bracket_competition_id, 0)
+    },[bracket_competition_id])
+
+    const getLeaders = async(id:string, page:number) => {
+        setData({ ...leaders_data, loading: true })
+        const resp = await BracketComeptitionApi.getCompetitionPlayerBracketsByCompetitionId(id, page);
+        
+        const ps = await BracketApi.getPlayersByPlayerIds(resp.competition_player_brackets.map(cpb => cpb.player_id).concat(my_competition_player_brackets[0]?.player_id ?? '0'));
+        const team_ids = resp.player_brackets.filter(pb => pb.champion_id_type == 'team').map(pb => pb.champion_id ?? '');
+        const athlete_ids = resp.player_brackets.filter(pb => pb.champion_id_type == 'athlete').map(pb => pb.champion_id ?? '');
+        const ts = await BracketApi.getTeamsByIds(team_ids);
+        const aths = await BracketApi.getAthletesByIds(athlete_ids);
+        setData({ 
+            ...leaders_data,
+            loading:false,
+            competition_player_brackets: resp.competition_player_brackets,
+            player_brackets: resp.player_brackets.filter(pb => !my_player_brackets.find(mpb => mpb.player_bracket_id == pb.player_bracket_id)).concat(my_player_brackets),
+            teams:ts,
+            athletes: aths,
+            players: ps
+        })
+    }
+
+    const renderLeaders = (data: { item:CompetitionPlayerBracketProps, index:number }) => {
+        const player = players.find(p => p.player_id == data.item.player_id);
+        const player_bracket = player_brackets.find(pb => pb.player_bracket_id == data.item.player_bracket_id);
+        if(!player || !player_bracket){ return <></> }
+        let champ_team = undefined, champ_athlete = undefined
+        if(show_champions && player_bracket.champion_id_type == 'team'){ champ_team = teams.find(t => t.team_id == player_bracket.champion_id) }
+        if(show_champions && player_bracket.champion_id_type == 'athlete'){ champ_athlete = athletes.find(t => t.athlete_id == player_bracket.champion_id) }
+        return (
+            <TouchableOpacity style={{ flexDirection:'row', alignItems:'center', borderRadius:22, borderTopLeftRadius:4, borderBottomLeftRadius:4, margin:3, backgroundColor:Colors.shades.white, padding:4 }}>
+                 <View style={{ padding:5 }}>
+                    <Text size={14} color={Colors.brand.midnight} weight='bold'>{CompetitionHelpers.formatPlace(data.item.place)}</Text>
+                </View>
+                <View>
+                    <Image
+                        source={{ uri: player.profile_pic }}
+                        style={{ height:40, width:40, borderRadius:100 }}
+                        resizeMode='cover'
+                    />
+                </View>
+                <View style={{ flex:1, marginLeft:5, marginRight:5 }}>
+                    <Text size={14} weight='bold' color={Colors.brand.midnight}>{player_bracket.bracket_name}</Text>
+                    <Text style={{ marginTop:3 }} size={12} weight='regular' color={Colors.brand.slate}>{data.item.points_scored} Points ({data.item.possible_points} Possible)</Text>
+                </View>
+                {champ_team ?
+                <View style={{ padding:5 }}>
+                    <Image
+                        source={{ uri: champ_team.image?.url }}
+                        style={{ height:25, width:25, borderRadius:4 }}
+                        resizeMode='cover'
+                    />
+                </View>
+                :champ_athlete ?
+                <View style={{ padding:5 }}>
+                    <Image
+                        source={{ uri: champ_athlete.image?.url }}
+                        style={{ height:25, width:25, borderRadius:4 }}
+                        resizeMode='cover'
+                    />
+                </View>
+                :<></>}
+                <View style={{ padding:5 }}>
+                    <Text size={14} color={Colors.brand.midnight} weight='semibold'>${data.item.winnings.toFixed(2)}</Text>
+                </View>
+            </TouchableOpacity>
+        )
+    }
+
+    return (
+        <View style={{ flex:1 }}>
+            <View style={{ flex:1 }}>
+            {my_competition_player_brackets.length > 0 ?
+            <View style={{ backgroundColor:Colors.brand.midnight, padding:10, borderTopRightRadius:8, borderTopLeftRadius:8 }}>
+                <View style={{ marginBottom:5 }}>
+                    <Text size={14} color={Colors.shades.white}>MY RESULTS</Text>
+                </View>
+                <FlatList
+                    data={my_competition_player_brackets}
+                    renderItem={renderLeaders}
+                    keyExtractor={(item) => item.competition_player_bracket_id.toString()}
+                />
+            </View>
+            :<></>}
+            <View style={{ padding:10, backgroundColor:Colors.shades.shade100, borderRadius:8 }}>
+                <View style={{ marginBottom:5 }}>
+                    <Text size={14} color={Colors.brand.midnight}>RESULTS</Text>
+                </View>
+                <FlatList
+                    data={visible_leaders}
+                    renderItem={renderLeaders}
+                    keyExtractor={(item) => item.competition_player_bracket_id.toString()}
+                />
+            </View>
+            {view_mode == 'short' && onViewFull ?
+            <View style={{ padding:10 }}>
+                <Button
+                    title='View Full Leaderboard'
+                    title_color={Colors.brand.electric}
+                    backgroundColor='transparent'
+                    onPress={() => onViewFull()}
+                />
+            </View>
+            :<></>}
+            </View>
+            {onClose ?
+            <View style={{ padding:10 }}>
+                <Button
+                    title='Close'
+                    style={{ padding:15 }}
+                    title_color={Colors.shades.white}
+                    backgroundColor={Colors.utility.error}
+                    onPress={() => onClose()}
+                />
+            </View>
+            :<></>}
+        </View>
+    )
+}
+
+export default CompetitionLeaderboard

package/src/Bracket/components/JoinCompetitionCard.tsx

@@ -0,0 +1,66 @@
+import React from 'react';
+import { View, Image } from "react-native";
+import { Button, Text } from '../../Components';
+import type { BracketCompetitionProps, CompetitionPlayerBracketProps, PlayerBracketProps } from '../../types';
+import { BracketCompetitionHelpers } from '../api';
+import Colors from '../../constants/colors';
+
+type JoinCompetitionCardProps = {
+    player_bracket:PlayerBracketProps,
+    bracket_competition:BracketCompetitionProps,
+    onEnterCompetition:(cpb:CompetitionPlayerBracketProps) => void,
+    onClose:() => void
+}
+
+const JoinCompetitionCard = ({ player_bracket, bracket_competition, onEnterCompetition, onClose }:JoinCompetitionCardProps) => {
+    
+    const buy_in_label = BracketCompetitionHelpers.getBuyInTitle(bracket_competition)
+
+    const handleEnter = () => {
+        const cpb = BracketCompetitionHelpers.generateCompetitionPlayerBracket(bracket_competition.bracket_competition_id, player_bracket.player_bracket_id)
+        onEnterCompetition(cpb)
+    }
+
+    return (
+        <View style={{ minWidth:300, backgroundColor:Colors.shades.white, borderRadius:8 }}>
+            <View style={{ borderTopRightRadius:8, borderTopLeftRadius:8, backgroundColor:Colors.shades.shade100, padding:15 }}>
+                <Text size={16} color={Colors.brand.midnight} weight='bold'>{bracket_competition.competition_name}</Text>
+            </View>
+            <View style={{ justifyContent:'center', alignItems:'center' }}>
+                <Image
+                    source={{ uri: bracket_competition.image?.url }}
+                    style={{ height:240, width:240 }}
+                    resizeMode='cover'
+                />
+            </View>
+            <View style={{ flexDirection:'row', alignItems:'center', padding:10 }}>
+                <View style={{ flex:1 }}>
+                    <Text size={14} color={Colors.brand.midnight} weight='bold'>{player_bracket.bracket_name}</Text>
+                    <Text style={{ marginTop:3 }} size={12} color={Colors.brand.slate} weight='regular'>{(player_bracket.completion_pct*100).toFixed(2)}% Complete</Text>
+                </View>
+            </View>
+            <View style={{ flexDirection:'row', alignItems:'center', padding:10, backgroundColor:Colors.shades.shade100, borderBottomRightRadius:8, borderBottomLeftRadius:8 }}>
+                <Button
+                    title='Close'
+                    style={{ flex:1, marginRight:5 }}
+                    padding={15}
+                    title_color={Colors.brand.electric}
+                    borderWidth={1}
+                    borderColor={Colors.brand.electric}
+                    onPress={() => onClose()}
+                />
+                <Button
+                    title={buy_in_label}
+                    style={{ flex:2 }}
+                    padding={15}
+                    title_color={Colors.shades.white}
+                    backgroundColor={Colors.utility.success}
+                    onPress={() => handleEnter()}
+
+                />
+            </View>
+        </View>
+    )
+}
+
+export default JoinCompetitionCard