be-components 0.7.3 → 0.7.4

package/src/Competition/components/CompetitionPlay.tsx

@@ -0,0 +1,936 @@
+import { ActivityIndicator, FlatList, Image, ImageBackground, ScrollView, TouchableOpacity, View } from "react-native"
+import type { AthleteProps, CodeRequestProps, CompanyProps, CompetitionMatchMarketProps, CompetitionMatchProps, CompetitionPayoutTypeProps, CompetitionPlayerProps, CompetitionProps, CompetitionResultTypeProps, CompetitionSeasonProps, CompetitionTypeProps, LeagueProps, MarketProps, MyPlayerProps, PlayerBalanceProps, PlayerPickProps, PlayerReferralProps, PromoProps, PublicPlayerProps, RewardOptionProps, TeamProps } from "../../types";
+import Colors from '../../constants/colors';
+import React, { useEffect, useState } from "react"
+import TeamEventCard from './TeamEventCard';
+import NavOutPrompt from './NavOutPrompt';
+import AthleteMarketCard from './AthleteMarketCard';
+import MatchMarketCard from './MatchMarketCard';
+import CompetitionInfoCard from './CompetitionInfoCard';
+import CompetitionLeaderboard from './CompetitionLeaderboard';
+import LeaderPicks from './LeaderPicks';
+import WagerPickForm from './WagerPickForm';
+import EnterCompetitionPrompt from './EnterCompetitionPrompt';
+import SeasonInfoModal from './SeasonInfoModal';
+import CompetitionTypeCard from './CompetitionTypeCard';
+
+import type { EventProps, MatchProps, TournamentProps } from "../../types";
+import { CompetitionApi, CompetitionHelpers, CompetitionMatchApi, CompetitionPlayerApi, PlayerPicksApi } from "../api";
+import { AuthenticateApi } from "../../Authenticator/api";
+import moment from "moment-mini";
+import { view_styles } from "../../constants/styles";
+import LinearGradient from "react-native-linear-gradient";
+import { Icons, Text } from "../../Components";
+import LinearDiagnal from "../../Components/LinearDiagnal";
+import SpringView from "../../Components/Spring";
+import type { BEEventProps } from "../../Observer/api/types";
+
+type CompetitionPlayProps = {
+    player_id?:string,
+    competition_id:string,
+    company?:CompanyProps,
+    onEvent?:(event:BEEventProps) => void,
+    height:number,
+    width:number,
+    source?:string,
+    onGoBack?:() => void,
+    hide_player?:boolean,
+    onRequestAuthentication: () => void,
+    back_allowed?:boolean
+    onChangeCompetition?: (competition_id:string) => void
+}
+const CompetitionPlay = ( { player_id, company, source, back_allowed, onGoBack, competition_id, width, height, hide_player, onChangeCompetition, onRequestAuthentication }:CompetitionPlayProps ) => {
+
+    const [ loading, setLoading ] = useState(false);
+    const [ code_details ] = useState<{ 
+        promo?:PromoProps, 
+        code_request?: CodeRequestProps, 
+        player_referral?:PlayerReferralProps, 
+        referrer?:PublicPlayerProps, 
+        reward_option?:RewardOptionProps 
+    }>({});
+    const [ my_data, setMyData ] = useState<{
+        player?:MyPlayerProps,
+        player_balance?:PlayerBalanceProps,
+        player_picks:PlayerPickProps[]
+    }>({
+        player_picks: []
+    })
+    const [ competition_data, setCompetitionData ] = useState<{
+        loading:boolean,
+        competition?:CompetitionProps,
+        tournaments:TournamentProps[],
+        matches:MatchProps[],
+        events:EventProps[],
+        athletes:AthleteProps[],
+        teams:TeamProps[],
+        markets:MarketProps[],
+        leagues:LeagueProps[],
+        competition_payout_types:CompetitionPayoutTypeProps[],
+        competition_players:CompetitionPlayerProps[],
+        competition_matches:CompetitionMatchProps[],
+        competition_match_markets:CompetitionMatchMarketProps[],
+        competition_types:CompetitionTypeProps[],
+        competition_result_types:CompetitionResultTypeProps[],
+        competition_type?:CompetitionTypeProps,
+        competition_result_type?:CompetitionResultTypeProps,
+        competition_season?:CompetitionSeasonProps,
+
+    }>({
+        loading:false,
+        tournaments:[], 
+        events:[],
+        athletes: [],
+        teams: [],
+        matches: [],
+        leagues: [],
+        markets:[],
+        competition_types:[],
+        competition_result_types:[],
+        competition_payout_types:[],
+        competition_matches:[],
+        competition_players:[],
+        competition_match_markets:[],
+
+    })
+    const [ profile_visible, setProfileVisible ] = useState(false);
+    const [ show_rules, setShowRules ] = useState(false);
+    const [ nav_out_prompt, setNavOutPrompt ] = useState<{
+        visible:boolean,
+        title?:string,
+        hide_accept?:boolean,
+        url?:string,
+        image_url?:string,
+        body?:string,
+        accept_title?: string,
+        cancel_title?:string
+    }>({
+        visible: false
+    });
+    const [ show_season, setShowSeason ] = useState(false);
+    const [ show_enter_prompt, setShowEnterPrompt ] = useState(false);
+    const [ complete_loaded, setCompleteLoaded ] = useState(false);
+    const [ show_completed, setShowCompleted ] = useState(false);
+    const [ expanded_markets, setExpandedMarkets ] = useState<string[]>([]);
+    const [ draft_player_pick, setDraftPlayerPick ] = useState<{draft_pick?:PlayerPickProps, event_title?:string, event_start?:string}>({});
+    const [ viewing_leader, setViewingLeader ] = useState<PublicPlayerProps | undefined>(undefined);
+    const [ show_full_leaderboard, setShowFullLeaderboard ] = useState(false);
+    const [ pick_loading, setPickLoading ] = useState<undefined|string>(undefined)
+
+    const { 
+        competition,
+        leagues,
+        markets,
+        events,
+        athletes,
+        tournaments,
+        matches,
+        competition_players,
+        competition_result_type,
+        competition_payout_types,
+        competition_season,
+        competition_types,
+        competition_result_types,
+        competition_type,
+        competition_matches,
+        competition_match_markets 
+    } = competition_data;
+    
+    const { 
+        player,
+        player_balance,
+        player_picks
+    } = my_data;
+
+    const events_array = Object.values(events)
+
+    const authenticated_competition_player = competition_players.find(cp => cp.player_id == player?.player_id);
+
+    const can_leave = competition?.entered && moment().isBefore(moment(competition.scheduled_datetime)) && player_picks.length == 0 && !loading
+    const ip_unique_team_events = [ ... new Set(competition_matches.filter(cm => cm.event_type == 'team' && cm.status == 'inprogress').map(cm => cm.event_id)) ]
+    const ip_team_event_ids = events_array.filter(e => ip_unique_team_events.includes(e.event_id)).sort((a,b) => moment(a.scheduled_datetime).unix() - moment(b.scheduled_datetime).unix()).map(e => e.event_id)
+
+    const closed_unique_team_events = [ ... new Set(competition_matches.filter(cm => cm.event_type == 'team' && cm.status == 'closed').map(cm => cm.event_id)) ]
+    const closed_team_event_ids = events_array.filter(e => closed_unique_team_events.includes(e.event_id)).sort((a,b) => moment(a.scheduled_datetime).unix() - moment(b.scheduled_datetime).unix()).map(e => e.event_id)
+
+
+    const unique_tournaments = [ ... new Set(Object.values(matches).map(m => m.tournament_id))]
+
+    useEffect(() => {
+        if(!competition_id){ return }
+        getCompetitionFromServer(competition_id)
+    },[ competition_id, player_id ])
+
+    useEffect(() => {
+        if(!competition_id){ return }
+        if(!player_id){ setMyData({ player_picks: [] }) }
+        else { getPlayerData(competition_id, player_id, 0) }
+    },[player_id])
+
+    const getPlayerData = async(competition_id:string, player_id:string, offset:number) => {
+        const pps = await PlayerPicksApi.getPlayerPicksByCompetition(competition_id, player_id, offset)
+        const player_balance = await CompetitionApi.getMyBalance();
+        const me = await CompetitionApi.getMyDetails();
+        setMyData({ player:me, player_balance, player_picks:pps })
+    }
+
+    useEffect(() => {
+        if(!player){ return }
+        if(!competition_type || !competition){ return }
+        if(competition_type.type == 'pick'){
+            //Need to determine if we need to show complete label!
+            if(player_picks.length == competition.max_pick_count){
+                handleEndCompetition()
+            }
+        }
+    },[player_picks.length])
+
+    const handleEndCompetition = async() => {
+        if(!competition){ return }
+        if(competition?.status == 'closed'){ return }
+        if(source == 'bettoredge'){
+            return setNavOutPrompt({
+                visible: true,
+                title:'Your picks are set!',
+                image_url: competition.image?.url ?? company?.company_image?.url,
+                body: 'Way to go!  All your pick are locked.  Feel free to edit your picks up until the start time of each contest',
+                hide_accept: true,
+                cancel_title: 'CLOSE'
+            })
+        }
+        let company_short_name = 'be'
+        if(company){ company_short_name = company.short_name }
+        let url = `https://share.mybe.app/c/${company_short_name}?type=c&id=${competition.competition_id}&utm_source=widget`
+        try {
+            const player_token = await AuthenticateApi.getShortToken()
+            url += `&token=${player_token.token}`
+        } catch (e) {
+            console.log(e)
+        }
+
+
+        setNavOutPrompt({
+            visible: true,
+            url,
+            title:'Your picks are set!',
+            image_url: competition.image?.url ?? company?.company_image?.url,
+            body: 'Want even more ways to win?  Checkout BettorEdge where you can play more competitions like this, track results and even bet real money on the games!',
+            accept_title: 'Take Me There!',
+            cancel_title: 'No Thanks'
+        })
+    }
+
+    const handleProfile = async(status:string) => {
+        if(!player || !competition){ return }
+        if(source == 'bettoredge'){ return }
+        let company_short_name = 'be'
+        if(company){ company_short_name = company.short_name }
+        let url = `https://share.mybe.app/c/${company_short_name}?type=c&id=${competition.competition_id}&utm_source=widget`
+        try {
+            const player_token = await AuthenticateApi.getShortToken()
+            url += `&token=${player_token.token}`
+        } catch (e) {
+            console.log(e)
+        }
+        if(status != 'verified'){
+            setNavOutPrompt({
+                title: 'Verify me on BettorEdge!',
+                url,
+                image_url: player.profile_pic,
+                body: 'In order to use real-money, you must verify that you are of legal age with our partner BettorEdge',
+                accept_title: 'Verify at BettorEdge',
+                visible:true
+            })
+        } else {
+            setNavOutPrompt({
+                title: 'Manage my profile at BettorEdge',
+                url,
+                image_url: player.profile_pic,
+                body: 'See your competition performance and history at BettorEdge.',
+                accept_title: 'Manage Profile',
+                visible:true
+            })
+            
+        }
+        
+    }
+
+    //This will snag all the data we need to launch the competition
+    const getCompetitionFromServer = async(competition_id:string) => {
+        setCompetitionData({ ...competition_data, loading:true });
+        const { competition_types, competition_result_types, competition_payout_types } = await CompetitionApi.getCompetitionOptions();
+        const ls = await CompetitionApi.getLeagues()
+        const cms_response = await CompetitionApi.getCompetitionMatchesByCompetitionId(competition_id)
+
+
+
+        //Lets get the additional data needed!
+        let athletes: AthleteProps[] = []
+        let teams: TeamProps[] = []
+        let events:EventProps[] = []
+        let tournaments:TournamentProps[] = []
+        let matches: MatchProps[] = []
+        const markets = await CompetitionApi.getMarkets();
+        let athlete_ids = cms_response.competition_matches.filter(cm => cm.side_type_override == 'athlete' && cm.side_id_override).map(cm => cm.side_id_override ?? '');
+        let team_ids = cms_response.competition_matches.filter(cm => cm.side_type_override == 'team' && cm.side_id_override).map(cm => cm.side_id_override ?? '');
+        const event_ids = cms_response.competition_matches.filter(cm => cm.event_type == 'team').map(cm => cm.event_id)
+        event_ids.map(eid => {
+            let side_id_cm = cms_response.competition_matches.find(cm => cm.event_type == 'team' && cm.event_id == eid && cm.side_id_override)
+            if(side_id_cm){ expanded_markets.push(eid) }
+        })
+        setExpandedMarkets(expanded_markets)
+        const match_ids = cms_response.competition_matches.filter(cm => cm.event_type == 'match').map(cm => cm.event_id)
+        if(event_ids.length > 0){ events = await CompetitionMatchApi.getEventsByEventIds(event_ids) }
+        if(match_ids.length > 0){ matches = await CompetitionMatchApi.getMatchesByMatchIds(match_ids) }
+        if(matches.length > 0){
+            let tournament_ids = matches.map(m => m.tournament_id)
+            tournaments = await CompetitionMatchApi.getTournamentsByTournamentIds(tournament_ids)
+            let new_athlete_ids:string[] = []
+            let new_team_ids: string[] = []
+            matches.filter(m => m.participant_type == 'athlete').map(m => m.participants.map(p => new_athlete_ids.push(p)))
+            matches.filter(m => m.participant_type == 'team').map(m => m.participants.map(p => new_team_ids.push(p)))
+            athlete_ids = athlete_ids.concat(new_athlete_ids);
+            team_ids = team_ids.concat(new_team_ids)
+        }
+        if(athlete_ids.length > 0){ athletes = await CompetitionMatchApi.getAthletesByIds(athlete_ids) }
+        if(team_ids.length > 0){ teams = await CompetitionMatchApi.getTeamsByIds(team_ids) }
+        const cps = await CompetitionPlayerApi.getCompetitionPlayersByCompetition(competition_id, 0, 'active')
+        const c = await CompetitionApi.getCompetitionById(competition_id)
+        setCompetitionData({
+            loading:false,
+            competition: c,
+            competition_matches: cms_response.competition_matches,
+            competition_match_markets: cms_response.competition_match_markets,
+            events,
+            athletes,
+            teams,
+            tournaments,
+            leagues: ls,
+            competition_types:competition_types,
+            competition_result_types:competition_result_types,
+            matches,
+            competition_payout_types,
+            competition_players: cps,
+            competition_type: competition_types.find(ct => ct.competition_type_id == c.competition_type_id),
+            competition_result_type:competition_result_types.find(crt => crt.competition_result_type_id == c.competition_result_type_id),
+            markets
+        })
+        setLoading(false);
+    }
+
+    const handleEnterPrompt = () => {
+        if(!player_id){ return onRequestAuthentication(); }
+        return setShowEnterPrompt(true);
+    }
+
+    const handleEnterCompetition = async(promo_balance?:boolean) => {
+        if(loading){ return }
+        setShowEnterPrompt(false);
+        setLoading(true);
+        
+        const response = await CompetitionPlayerApi.joinCompetition({ 
+            ...CompetitionHelpers.getCompetitionPlayer(competition_id), 
+            promo_balance 
+        })
+        setCompetitionData({
+            ...competition_data,
+            competition: response.competition,
+            competition_players: competition_players.filter(cp => cp.competition_player_id != response.competition_player.competition_player_id).concat(response.competition_player)
+        })
+        setLoading(false);
+    }
+
+    const handleLeaveCompetition = async() => {
+        if(!authenticated_competition_player){ return }
+        setLoading(true);
+        const response = await CompetitionPlayerApi.leaveCompetition(authenticated_competition_player)
+        setCompetitionData({
+            ...competition_data,
+            competition: response.competition,
+            competition_players: competition_players.filter(cp => cp.competition_player_id != response.competition_player.competition_player_id).concat(response.competition_player)
+        })
+        setLoading(false)
+    }
+
+    const handleShowComplete = async() => {
+        setShowCompleted(!show_completed)
+        if(!complete_loaded){
+            await CompetitionMatchApi.getCompetitionMatchesByCompetitionId(competition_id, 'closed')
+            setCompleteLoaded(true)
+        }
+    }
+
+    const handlePick = async(pp:PlayerPickProps, event_title:string, event_start:string) => {
+        if(!competition){ return }
+        if(!player_id){
+            return onRequestAuthentication()
+        }
+        if(!authenticated_competition_player){ return setShowEnterPrompt(true); }
+        if(!competition_type){ return alert('Unable to process pick') }
+        
+        setPickLoading(pp.competition_match_id)
+        //If the pick needs to be removed
+        if(pp.player_pick_id && pp.player_pick_id != ''){
+            const rem_pp = await PlayerPicksApi.removePlayerPick(pp.player_pick_id)
+            setMyData({
+                ...my_data,
+                player_picks: player_picks.filter(ps => ps.player_pick_id != rem_pp.player_pick.player_pick_id)
+            })
+            setPickLoading(undefined)
+            return
+        }
+ 
+        //If this is a new pick
+        //First check to see if they already have one on the market / event combo
+        let existing_pick = player_picks.find(p => p.competition_match_id == pp.competition_match_id && p.market_id == pp.market_id)
+        if(existing_pick){
+            setPickLoading(undefined)
+            return alert('Can only pick one side of each market.  Remove the other side before selecting this one.')
+        }
+
+        if(competition_type.type == 'pick'){
+            if(player_picks.length >= competition.max_pick_count){ 
+                setPickLoading(undefined)
+                return alert('Already reached maximum picks') 
+
+            }
+            const new_pp = await PlayerPicksApi.createPlayerPick(pp)
+            setMyData({
+                ...my_data,
+                player_picks: player_picks.filter(ps => ps.player_pick_id != new_pp.player_pick.player_pick_id).concat(new_pp.player_pick)
+            })
+            setPickLoading(undefined)
+        }
+        if(competition_type.type == 'wager'){
+            setPickLoading(undefined)
+            setDraftPlayerPick({ draft_pick: pp, event_start, event_title })
+        }
+    }
+
+    const handleWagerSubmit = async(pp:PlayerPickProps) => {
+        setPickLoading(pp.competition_match_id)
+        const new_pp = await PlayerPicksApi.createPlayerPick(pp)
+        setMyData({
+            ...my_data,
+            player_picks: player_picks.filter(ps => ps.player_pick_id != new_pp.player_pick.player_pick_id).concat(new_pp.player_pick)
+        })
+        setDraftPlayerPick({})
+        setPickLoading(undefined)
+    }
+
+    const renderAthleteEvents = (data: { item:CompetitionMatchProps, index:number }) => {
+        const event = events.find(e => e.event_id == data.item.event_id);
+        if(!event || !competition || !competition_type){ return <></> }
+        const athlete = athletes.find(a => a.athlete_id == data.item.side_id_override);
+        if(!athlete){ return <></> }
+        const match_markets = competition_match_markets.filter(cmm => cmm.competition_match_id == data.item.competition_match_id)
+        const event_picks = player_picks.filter(pp => pp.competition_match_id == data.item.competition_match_id)
+        const isLoading = pick_loading == data.item.competition_match_id ? true : false
+        if(match_markets.length != 2){ return <></> }
+        return (
+            <View style={{ minWidth:150, flex:1, flexGrow:1, margin:5, borderWidth:1, borderColor:Colors.shades.shade600, borderRadius:8, backgroundColor:Colors.shades.white, ...view_styles.float }}>
+                <AthleteMarketCard
+                    event={event}
+                    athlete={athlete}
+                    competition={competition}
+                    competition_type={competition_type}
+                    markets={markets}
+                    competition_match={data.item}
+                    mode='play'
+                    orientation="vertical"
+                    onPick={(pp, event_title, event_start) => handlePick(pp, event_title, event_start)}
+                    competition_match_markets={match_markets}
+                    player_picks={event_picks}
+                    loading={isLoading}
+                />
+            </View>
+        )
+    }
+
+    const renderEvents = (data:{ item:CompetitionMatchProps, index:number }) => {
+        const event = events.find(e => e.event_id == data.item.event_id);
+        if(!event || !competition || !competition_type){ return <></> }
+        const match_markets = competition_match_markets.filter(cmm => cmm.competition_match_id == data.item.competition_match_id);
+        const event_picks = player_picks.filter(pp => pp.competition_match_id == data.item.competition_match_id);
+        const isLoading = pick_loading == data.item.competition_match_id ? true : false
+        return (
+            <View style={{ flex:1, flexGrow:1, margin:5 }}>
+                <TeamEventCard
+                    event={event}
+                    markets={markets}
+                    competition={competition}
+                    competition_type={competition_type}
+                    player_picks={event_picks}
+                    mode='play'
+                    loading={isLoading}
+                    onPick={(pp, event_title, event_start) => handlePick(pp, event_title, event_start)}
+                    competition_match={data.item}
+                    competition_match_markets={match_markets}
+                />
+            </View>
+        )
+    }
+
+    const renderNonPrimaryMarkets = (data:{ item:string, index: number, event_id:string, event_type:string }) => {
+        const market = markets.find(m => m.market_id == data.item);
+        if(!market){ return <></> }
+
+        const athlete_non_primary_matches = competition_matches.filter(cm => cm.market_id_override == data.item && cm.side_type_override == 'athlete' && cm.event_id == data.event_id && cm.event_type == data.event_type);
+
+        return (
+            <View>
+                <LinearDiagnal label_size={12} label={market.description} left_color={Colors.brand.midnight} right_color={Colors.brand.midnightTopGradient}/>
+                <View style={{ flexDirection:'row', flexWrap:'wrap', justifyContent:'center', paddingTop:10, paddingBottom:10 }}>
+                    {athlete_non_primary_matches.map((cm,i) => {
+                        return renderAthleteEvents({ item: cm, index:i })
+                    })}
+                </View>
+            </View>
+        )
+    }
+    
+    const renderMatchEvents = (data: { item: CompetitionMatchProps, index:number }) => {
+        const match = matches.find(m => m.match_id == data.item.event_id);
+        if(!match || !competition || !competition_type){ return <></> }
+        const away_athlete = athletes.find(a => a.athlete_id == match.participants[0])
+        const home_athlete = athletes.find(a => a.athlete_id == match.participants[1])
+        const match_markets = competition_match_markets.filter(cmm => cmm.competition_match_id == data.item.competition_match_id)
+        const event_picks = player_picks.filter(pp => pp.competition_match_id == data.item.competition_match_id)
+        const isLoading = pick_loading == data.item.competition_match_id ? true : false
+
+        return (
+            <View style={{ minWidth:200, flex:1, flexGrow:1, margin:5, borderWidth:1, borderColor:Colors.shades.shade600, borderRadius:8, backgroundColor:Colors.shades.white, ...view_styles.float }}>
+                <MatchMarketCard
+                    competition={competition}
+                    competition_type={competition_type}
+                    match={match}
+                    away_athlete={away_athlete}
+                    home_athlete={home_athlete}
+                    markets={markets}
+                    competition_match={data.item}
+                    competition_match_markets={match_markets}
+                    player_picks={event_picks}
+                    loading={isLoading}
+                    onPick={(pp, event_title, event_start) => handlePick(pp, event_title, event_start)}
+                    mode='play'
+                />
+            </View>
+        )
+    }
+
+
+    const renderTournaments = (data: {item:string, index:number}) => {
+        const tournament = tournaments.find(t => t.tournament_id == data.item)
+        if(!tournament){ return <></> } 
+        const tournament_matches = Object.values(matches).filter(m => m.tournament_id == data.item).sort((a,b) => moment(a.scheduled_datetime).unix() - moment(b.scheduled_datetime).unix())
+        if(tournament_matches.length == 0){ return <></> }
+
+        //Now lets get all the competition_matches that include these match ids
+        const match_matches = competition_matches.filter(cm => cm.event_type == 'match' && tournament_matches.map(tm => tm.match_id.toString()).includes(cm.event_id).toString())
+
+        const league = leagues.find(l => l.league_id == tournament.league_id);
+        //const expanded = expanded_markets.includes(data.item) ? true : false
+        return (
+            <LinearGradient start={{x: 0, y: 0}} end={{x: 1, y: 0}}  colors={[Colors.shades.white, '#F8F8F8']} style={{ minWidth:350, flex:1, flexGrow:1, margin:10, borderWidth:1, borderColor:Colors.shades.shade100, borderRadius:8, ...view_styles.float }}>
+                <View style={{ padding:10, flexDirection:'row', borderBottomWidth:1, borderColor:Colors.shades.shade600 }}>
+                    {league ?
+                    <Text size={14} color={Colors.brand.midnight} weight='bold'>{league.league_name}: </Text>
+                    :<></>}
+                    <Text style={{ flex:1 }} size={14} color={Colors.brand.midnight} weight='bold'>{tournament.tournament_name}</Text>
+                    <Text size={14} color={Colors.brand.midnight} weight='regular'>{tournament.scheduled_datetime == 'scheduled' ? moment(tournament.scheduled_datetime).format('MM/DD @ hh:mm a'): tournament.time_detail}</Text>
+                </View>
+                
+                <LinearDiagnal label_size={12} label="Matches" left_color={Colors.brand.midnight} right_color={Colors.brand.midnightTopGradient}/>
+                <View style={{ flexDirection:'row', flexWrap:'wrap', justifyContent:'center', paddingTop:10, paddingBottom:10 }}>
+                    {match_matches.map((cm, i) => {
+                        return renderMatchEvents({ item: cm, index: i })
+                    })}
+                </View>
+            </LinearGradient>
+        )
+    }
+
+    const renderTeamEvents = (data: {item:string, index:number}) => {
+        const event = events.find(e => e.event_id == data.item)//[data.item]
+        if(!event){ return <></> } 
+        const league = leagues.find(l => l.league_id == event.league_id);
+        const team_primary_matches = competition_matches.filter(cm => cm.event_type == 'team' && cm.event_id == data.item && !cm.market_id_override);
+        const non_primary_markets = [ ... new Set(competition_matches.filter(cm => cm.event_type == 'team' && cm.event_id == data.item && cm.market_id_override).map(cm => cm.market_id_override ?? ''))]
+        const expanded = expanded_markets.includes(data.item) ? true : false
+        return (
+            <LinearGradient start={{x: 0, y: 0}} end={{x: 1, y: 0}}  colors={[Colors.shades.white, '#F8F8F8']} style={{ minWidth:350, flex:1, flexGrow:1, margin:10, borderWidth:1, borderColor:Colors.shades.shade100, borderRadius:8, ...view_styles.float }}>
+                <View style={{ padding:10, flexDirection:'row', borderBottomWidth:1, borderColor:Colors.shades.shade600 }}>
+                    {league ?
+                    <Text size={14} color={Colors.brand.midnight} weight='bold'>{league.league_name}: </Text>
+                    :<></>}
+                    <Text style={{ flex:1 }} size={14} color={Colors.brand.midnight} weight='bold'>{event.event_title}</Text>
+                    <Text size={14} color={Colors.brand.midnight} weight='regular'>{event.time_detail == 'scheduled' ? moment(event.scheduled_datetime).format('MM/DD @ hh:mm a'): event.time_detail}</Text>
+                </View>
+                
+                <LinearDiagnal label_size={12} label="Primary Markets" left_color={Colors.brand.midnight} right_color={Colors.brand.midnightTopGradient}/>
+                {team_primary_matches.map((cm, i) => {
+                    return renderEvents({ item: cm, index: i })
+                })}
+                {non_primary_markets.length > 0 ?
+                <View style={{ borderBottomRightRadius:8, borderBottomLeftRadius:8 }}>
+                    {expanded ?
+                    <View>
+                        {non_primary_markets.map((id, i) => {
+                            return renderNonPrimaryMarkets({ item:id, index:i, event_id: data.item, event_type: 'team' })
+                        })}
+                    </View>
+                    :<></>}
+                     <TouchableOpacity style={{ flexDirection:'row', alignItems:'center', padding:15, borderTopWidth:1, borderColor:Colors.shades.shade600 }} onPress={() => expanded ? setExpandedMarkets(expanded_markets.filter(m => m != data.item)): setExpandedMarkets(expanded_markets.concat(data.item))}>
+                        <Text style={{ flex:1 }} size={14} color={Colors.brand.midnight} weight='semibold'>{expanded?'Hide Markets':`${non_primary_markets.length} More Markets` }</Text>
+                        <Icons.ChevronIcon direction={expanded?'up':'down'} color={Colors.brand.midnight} size={8}/>
+                    </TouchableOpacity>
+                </View>
+                :<></>}
+            </LinearGradient>
+        )
+    }
+
+
+    if(loading || !competition || !competition_type || !competition_result_type){
+        return (
+            <View style={{ flex:1, backgroundColor:Colors.shades.white }}>
+                {company ?
+                <View style={{ flexDirection:'row', alignItems:'center', padding:15, backgroundColor:company?.brand_primary ?? Colors.shades.shade100 }}>
+                    {back_allowed ?
+                    <TouchableOpacity style={{ paddingRight:20 }} onPress={() => onGoBack ? onGoBack() : console.log('')}>
+                        <Icons.ChevronIcon direction="left" size={14} color={company?.brand_secondary ?? Colors.brand.midnight} />
+                    </TouchableOpacity>
+                    :<></>}
+                    <Text style={{ flex:1 }} size={14} color={company?.brand_secondary ?? Colors.brand.midnight} weight='bold' textAlign="center">Brought to you by {company?company.company_name:'BettorEdge'}</Text>
+                </View>
+                :<></>}
+                <ActivityIndicator style={{ padding:20 }} size='large' color={Colors.brand.midnight} />
+            </View>
+        )
+    }
+
+
+    return (
+        <View style={{ flex:1, backgroundColor:Colors.shades.shade100 }}>
+            <ScrollView style={{ flex:1  }}>
+                {company ?
+                <View style={{ flexDirection:'row', alignItems:'center', padding:15, backgroundColor:company?.brand_primary ?? Colors.shades.shade100 }}>
+                    {back_allowed ?
+                    <TouchableOpacity style={{ paddingRight:20 }} onPress={() => onGoBack ? onGoBack() : console.log('')}>
+                        <Icons.ChevronIcon direction="left" size={14} color={company?.brand_secondary ?? Colors.brand.midnight} />
+                    </TouchableOpacity>
+                    :<></>}
+                    <Text style={{ flex:1 }} size={14} color={company?.brand_secondary ?? Colors.brand.midnight} weight='bold' textAlign="center">Brought to you by {company?company.company_name:'BettorEdge'}</Text>
+                </View>
+                :<></>}
+                <View nativeID="cometition_header" style={{ minWidth:300, backgroundColor:Colors.brand.midnight }}>
+                    <CompetitionInfoCard
+                        player={player}
+                        competition={competition}
+                        competition_type={competition_type}
+                        onEnter={() => handleEnterPrompt()}
+                        can_leave={can_leave}
+                        onViewRules={() => setShowRules(true)}
+                        onViewPrize={() => {
+                            setNavOutPrompt({
+                                visible: true,
+                                cancel_title: 'CLOSE',
+                                title: 'Competition Additional Prize!',
+                                body: competition.prize_override,
+                                image_url: competition.prize_image?.url,
+                                hide_accept: true
+                            })
+                        }}
+                        onLeave={() => handleLeaveCompetition()}
+                        onViewEvents={() => console.log('VIEW!')}
+
+                    />
+                </View>
+                {competition_season ?
+                <TouchableOpacity style={{ backgroundColor:Colors.incentive.gold, padding:10  }} onPress={() => setShowSeason(true)}>
+                    <Text size={18} color={Colors.shades.white} weight='bold'>Competition Season</Text>
+                    <View nativeID="competition_leaderboard" style={{ marginTop:5, flexDirection:'row', alignItems:'center'}}>
+                        <View style={{ padding:5 }}>
+                            <Image
+                                source={{ uri: competition_season.image?.url }}
+                                style={{ height:50, width:75, borderRadius:8 }}
+                                resizeMode="cover"
+                            />
+                        </View>
+                        <View style={{ flex:1 }}>
+                            <Text size={14} color={Colors.shades.white} weight='semibold'>{competition_season.season_name}</Text>
+                            <Text style={{ marginTop:3 }} size={14} color={Colors.shades.white} weight='regular'>{competition_season.season_description}</Text>
+                        </View>
+                        <View style={{ padding:5 }}>
+                            <Icons.ChevronIcon direction="right" color={Colors.shades.white} size={16}/>
+                        </View>
+                    </View>
+                </TouchableOpacity>
+                :<></>}
+                <View nativeID="competition_leaderboard" style={{ minWidth:300, padding:10 }}>
+                    <Text size={18} color={Colors.brand.midnight} weight='bold'>Competition Leaderboard</Text>
+                    <View style={{ marginTop:10 }}>
+                        <CompetitionLeaderboard 
+                            competition={competition}
+                            competition_type={competition_type}
+                            height={height}
+                            onLeaderSelect={(player) => setViewingLeader(player)}
+                            view_mode="short"
+                            onSeeFull={() => setShowFullLeaderboard(true)}
+                            viewer_id={player?.player_id}
+                        />    
+                    </View>
+                </View>
+                <View nativeID="competition_picks" style={{ backgroundColor:Colors.shades.white, marginTop:5 }}>
+                    {competition?.status != 'closed' ?
+                    <View nativeID="upcoming_picks">
+                        <View style={{flexDirection:'row', alignItems:'center', justifyContent:'space-between', marginBottom:15}} >
+                            <ImageBackground style={{ flex:1, flexDirection:'row', alignItems:'center', width:width }} resizeMode="cover" source={{ uri: 'https://res.cloudinary.com/hoabts6mc/image/upload/v1691609143/diagnal_header_l4kw7u.png' }}>
+                                    <View style={{ flex:1, flexDirection:'row', alignItems:'center', padding:10 }}>
+                                        <Text size={18} color={Colors.shades.white} weight='bold'>Upcoming Events</Text>
+                                        <View style={{marginLeft:8, borderRadius:100, height:24, width:24, backgroundColor:Colors.highlights.highlight200, justifyContent:'center', alignItems:'center'}}>
+                                            <Text size={12} color={Colors.shades.white} weight='bold' textAlign='center'>{player_picks.filter(pp => pp.status == 'inprogress').length}</Text>
+                                        </View>
+                                    </View>
+                                    {authenticated_competition_player ?
+                                    <SpringView 
+                                        slide="horizontal"
+                                        from={200}
+                                        to={0}
+                                        style={{ flex:1, flexDirection:'row', borderTopLeftRadius:22, borderBottomLeftRadius:22, padding:10, alignItems:'center', backgroundColor:Colors.utility.success, ...view_styles.float }}
+                                        >
+                                            { competition_type?.type == 'wager' ?
+                                            <Text style={{ flex:1 }} size={14} color={Colors.shades.white} weight='semibold' textAlign="right">{authenticated_competition_player.wager_based_balance.toFixed(2)} Remaining</Text>
+                                            :
+                                            <Text style={{ flex:1 }} size={14} color={Colors.shades.white} weight='semibold' textAlign="right">{competition.max_pick_count - player_picks.length} Picks Remaining</Text>
+                                            }
+                                    </SpringView>
+                                    :<></>}
+                            </ImageBackground>
+                        </View>
+                        <FlatList
+                            data={ip_team_event_ids}
+                            renderItem={renderTeamEvents}
+                            keyExtractor={(item) => item}
+                        />
+                        <FlatList
+                            data={unique_tournaments}
+                            renderItem={renderTournaments}
+                            keyExtractor={(item) => item}
+                        />
+                    </View>
+                    :<></>}
+                    <View nativeID="closed_picks">
+                        <TouchableOpacity style={{ padding:10, marginBottom:15, flexDirection:'row', alignItems:'center', justifyContent:'space-between', backgroundColor:Colors.brand.midnight, marginTop:15 }} onPress={() => handleShowComplete()}>
+                            <View style={{flexDirection:'row', alignItems:'center'}}>
+                                <Text  size={18} color={Colors.shades.white} weight='bold'>Completed</Text>
+                                <View style={{marginLeft:8, borderRadius:100, height:24, width:24, backgroundColor:Colors.highlights.highlight200, justifyContent:'center', alignItems:'center'}}>
+                                    <Text size={12} color={Colors.shades.white} weight='bold' textAlign='center'>{player_picks.filter(p => p.status === 'closed').length}</Text>
+                                </View>
+                            </View>
+                            <Icons.ChevronIcon color={Colors.shades.white} direction={show_completed?'up':'down'} size={14} />
+                        </TouchableOpacity>
+                        {show_completed ?
+                        <View>
+                             <FlatList
+                                data={closed_team_event_ids}
+                                renderItem={renderTeamEvents}
+                                keyExtractor={(item) => item}
+                            />
+                        </View>
+                        :<></>}
+                    </View>
+                </View>
+            </ScrollView>
+            {player && !hide_player ?
+            <View style={{ flexDirection:'row', padding:10, backgroundColor:Colors.shades.shade100, borderBottomLeftRadius:22, borderBottomRightRadius:22 }}>
+                <TouchableOpacity style={{ flex:1, flexDirection:'row', alignItems:'center' }} onPress={() => setProfileVisible(!profile_visible)}>
+                    <View>
+                        <Image
+                            source={{ uri: player.profile_pic && player.profile_pic != '' ? player.profile_pic : 'https://res.cloudinary.com/hoabts6mc/image/upload/v1689262384/default-avatar_bbkn2t.png' }}
+                            style={{  height:40, width:40, borderRadius:100 }}
+                            resizeMode='cover'
+                        />
+                    </View>
+                    <View style={{ flex:1, flexDirection:'row', marginLeft:10 }}>
+                        <View>
+                            <Text size={12} color={Colors.brand.midnight} weight='regular'>Playing as</Text>
+                            <Text style={{ marginTop:3 }} size={12} color={Colors.brand.midnight} weight='bold'>{player.username}</Text>
+                        </View>
+                    </View>
+                </TouchableOpacity>
+                {player_balance ?
+                <View>
+                    <Text size={12} color={Colors.brand.midnight} textAlign="right">{competition.market_type == 'FOR_MONEY' ? 'USD' : 'Edge Coins'}</Text>
+                    <Text style={{ marginTop:3 }} size={14} color={Colors.brand.midnight} weight='bold' textAlign="right">{competition.market_type == 'FOR_MONEY' ? `$${player_balance.balance.toFixed(2)}`:`E${player_balance.free_market_balance.toFixed(2)}`}</Text>
+                </View>
+                :<></>}
+            </View>
+            :<></>}
+            {show_full_leaderboard ?
+            <View 
+                style={{ flex:1, position:'absolute', top:0, right:0, left:0, bottom:0, backgroundColor:Colors.shades.black_faded }}>
+                    <SpringView
+                        slide='vertical'
+                        to={0}
+                        from={1000}
+                    >
+                        <CompetitionLeaderboard
+                            competition={competition}
+                            competition_type={competition_type}
+                            height={height}
+                            onSeeFull={() => setShowFullLeaderboard(false)}
+                            view_mode="full"
+                            onLeaderSelect={(player) => setViewingLeader(player)}
+                            viewer_id={player?.player_id}
+                        />
+                    </SpringView>
+                </View>
+            :<></>}
+            {viewing_leader ? 
+            <View 
+            style={{ flex:1, position:'absolute', top:0, right:0, left:0, bottom:0, backgroundColor:Colors.shades.black_faded }}>
+                <SpringView
+                    slide='vertical'
+                    to={0}
+                    style={{ flex:1 }}
+                    from={1000}
+                >
+                    <LeaderPicks
+                        height={height}
+                        markets={markets}
+                        competition_type={competition_type}
+                        competition_matches={competition_matches}
+                        competition_match_markets={competition_match_markets}
+                        events={events}
+                        matches={matches}
+                        tournaments={tournaments}
+                        athletes={athletes}
+                        teams={[]}
+                        competition={competition}
+                        leader={viewing_leader}
+                        onClose={() => setViewingLeader(undefined)}
+                    />
+                </SpringView>
+            </View>
+            :<></>}
+            {draft_player_pick?.draft_pick ?
+            <View 
+                style={{ position:'absolute', top:0, right:0, left:0, bottom:0, backgroundColor:Colors.shades.black_faded, justifyContent:'flex-end', alignItems:'center' }}>
+            <SpringView
+                slide='vertical'
+                to={0}
+                from={200}
+            >
+                <WagerPickForm
+                    event_start={draft_player_pick.event_start ?? ''}
+                    event_title={draft_player_pick.event_title ?? ''}
+                    width={width}
+                    balance={authenticated_competition_player?.wager_based_balance ?? 0}
+                    loading={pick_loading}
+                    player_pick={draft_player_pick.draft_pick}
+                    onCancel={() => setDraftPlayerPick({})}
+                    onSubmit={(pp) => handleWagerSubmit(pp)}
+                />
+                </SpringView>
+            </View>
+            :<></>}
+            {show_season && competition_season && competition.competition_season_id ?
+            <View 
+            style={{ position:'absolute', top:0, right:0, left:0, bottom:0, backgroundColor:Colors.shades.black_faded, justifyContent:'flex-end', alignItems:'center' }}>
+            <SpringView
+                slide='vertical'
+                to={0}
+                from={1000}
+            >
+                <SeasonInfoModal
+                    competition_season={competition_season}
+                    competition_types={competition_types}
+                    competition_result_types={competition_result_types}
+                    width={width}
+                    height={height}
+                    onSelectCompetition={(competition) => {
+                        setShowSeason(false);
+                        if(onChangeCompetition){ return onChangeCompetition(competition.competition_id) }
+                    }}
+                    onClose={() => setShowSeason(false)}
+                />
+                </SpringView>
+            </View>
+            :<></>}
+            {show_enter_prompt ? 
+            <View 
+            style={{ position:'absolute', top:0, right:0, left:0, bottom:0, backgroundColor:Colors.shades.black_faded, justifyContent:'flex-end', alignItems:'center' }}>
+            <SpringView
+                slide='vertical'
+                to={0}
+                from={200}
+            >
+                <EnterCompetitionPrompt
+                    player={player}
+                    width={width}
+                    competition={competition}
+                    competition_type={competition_type}
+                    competition_result_type={competition_result_type}
+                    onVerify={() => handleProfile('unverified')}
+                    onCancel={() => setShowEnterPrompt(false)}
+                    onEnter={(promo_balance) => handleEnterCompetition(promo_balance)}
+                />
+                </SpringView>
+            </View>
+            :<></>}
+            {show_rules ? 
+            <View 
+            style={{ position:'absolute', top:0, right:0, left:0, bottom:0, padding:10, backgroundColor:Colors.shades.black_faded, justifyContent:'center', alignItems:'center' }}>
+            <SpringView
+                slide='vertical'
+                to={0}
+                from={1000}
+            >
+                <CompetitionTypeCard
+                    visible={show_rules ? true : false}
+                    init_view="type"
+                    onClose={() => setShowRules(false)}
+                    competition={competition}
+                    competition_type={competition_type}
+                    competition_result_type={competition_result_type}
+                    competition_payout_types={competition_payout_types}
+
+
+                />
+                </SpringView>
+            </View>
+            :<></>}
+            {nav_out_prompt.visible ?
+            <View 
+            style={{ flex:1, position:'absolute', top:0, right:0, left:0, bottom:0, backgroundColor:Colors.shades.black_faded, justifyContent:'center', alignItems:'center' }}>
+                <SpringView
+                    slide='vertical'
+                    to={0}
+                    from={1000}
+                >
+                    <NavOutPrompt
+                        accept_title={nav_out_prompt.accept_title}
+                        body={nav_out_prompt.body ?? ''}
+                        cancel_title={nav_out_prompt.cancel_title}
+                        code_details={code_details}
+                        title={nav_out_prompt.title ?? ''}
+                        max_width={width* 0.8}
+                        hide_accept={nav_out_prompt.hide_accept}
+                        image_url={nav_out_prompt.image_url}
+                        onCancel={() => setNavOutPrompt({ visible: false })}
+                        onAccept={() => {
+                            if(nav_out_prompt.url){
+                                window.open(nav_out_prompt.url, '_blank')
+                            }
+                            setNavOutPrompt({ visible: false })
+                        }}
+                    />
+                </SpringView>
+            </View>
+            :<></>}
+        </View>
+    )
+}
+
+export default CompetitionPlay