be-components 0.7.3 → 0.7.5

package/lib/module/Competition/components/CompetitionPlay.js

@@ -0,0 +1,1260 @@
+import { ActivityIndicator, FlatList, Image, ImageBackground, ScrollView, TouchableOpacity, View } from "react-native";
+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 { 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";
+const CompetitionPlay = ({
+  player_id,
+  company,
+  source,
+  back_allowed,
+  onGoBack,
+  competition_id,
+  width,
+  height,
+  hide_player,
+  onChangeCompetition,
+  onRequestAuthentication
+}) => {
+  const [loading, setLoading] = useState(false);
+  const [code_details] = useState({});
+  const [my_data, setMyData] = useState({
+    player_picks: []
+  });
+  const [competition_data, setCompetitionData] = useState({
+    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: 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([]);
+  const [draft_player_pick, setDraftPlayerPick] = useState({});
+  const [viewing_leader, setViewingLeader] = useState(undefined);
+  const [show_full_leaderboard, setShowFullLeaderboard] = useState(false);
+  const [pick_loading, setPickLoading] = useState(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, player_id, offset) => {
+    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 => {
+    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 => {
+    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 = [];
+    let teams = [];
+    let events = [];
+    let tournaments = [];
+    let matches = [];
+    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 = [];
+      let new_team_ids = [];
+      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 => {
+    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, event_title, event_start) => {
+    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 => {
+    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 => {
+    const event = events.find(e => e.event_id == data.item.event_id);
+    if (!event || !competition || !competition_type) {
+      return /*#__PURE__*/React.createElement(React.Fragment, null);
+    }
+    const athlete = athletes.find(a => a.athlete_id == data.item.side_id_override);
+    if (!athlete) {
+      return /*#__PURE__*/React.createElement(React.Fragment, null);
+    }
+    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 /*#__PURE__*/React.createElement(React.Fragment, null);
+    }
+    return /*#__PURE__*/React.createElement(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
+      }
+    }, /*#__PURE__*/React.createElement(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
+    }));
+  };
+  const renderEvents = data => {
+    const event = events.find(e => e.event_id == data.item.event_id);
+    if (!event || !competition || !competition_type) {
+      return /*#__PURE__*/React.createElement(React.Fragment, null);
+    }
+    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 /*#__PURE__*/React.createElement(View, {
+      style: {
+        flex: 1,
+        flexGrow: 1,
+        margin: 5
+      }
+    }, /*#__PURE__*/React.createElement(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
+    }));
+  };
+  const renderNonPrimaryMarkets = data => {
+    const market = markets.find(m => m.market_id == data.item);
+    if (!market) {
+      return /*#__PURE__*/React.createElement(React.Fragment, null);
+    }
+    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 /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(LinearDiagnal, {
+      label_size: 12,
+      label: market.description,
+      left_color: Colors.brand.midnight,
+      right_color: Colors.brand.midnightTopGradient
+    }), /*#__PURE__*/React.createElement(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
+      });
+    })));
+  };
+  const renderMatchEvents = data => {
+    const match = matches.find(m => m.match_id == data.item.event_id);
+    if (!match || !competition || !competition_type) {
+      return /*#__PURE__*/React.createElement(React.Fragment, null);
+    }
+    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 /*#__PURE__*/React.createElement(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
+      }
+    }, /*#__PURE__*/React.createElement(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"
+    }));
+  };
+  const renderTournaments = data => {
+    const tournament = tournaments.find(t => t.tournament_id == data.item);
+    if (!tournament) {
+      return /*#__PURE__*/React.createElement(React.Fragment, null);
+    }
+    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 /*#__PURE__*/React.createElement(React.Fragment, null);
+    }
+
+    //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 /*#__PURE__*/React.createElement(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
+      }
+    }, /*#__PURE__*/React.createElement(View, {
+      style: {
+        padding: 10,
+        flexDirection: 'row',
+        borderBottomWidth: 1,
+        borderColor: Colors.shades.shade600
+      }
+    }, league ? /*#__PURE__*/React.createElement(Text, {
+      size: 14,
+      color: Colors.brand.midnight,
+      weight: "bold"
+    }, league.league_name, ": ") : /*#__PURE__*/React.createElement(React.Fragment, null), /*#__PURE__*/React.createElement(Text, {
+      style: {
+        flex: 1
+      },
+      size: 14,
+      color: Colors.brand.midnight,
+      weight: "bold"
+    }, tournament.tournament_name), /*#__PURE__*/React.createElement(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)), /*#__PURE__*/React.createElement(LinearDiagnal, {
+      label_size: 12,
+      label: "Matches",
+      left_color: Colors.brand.midnight,
+      right_color: Colors.brand.midnightTopGradient
+    }), /*#__PURE__*/React.createElement(View, {
+      style: {
+        flexDirection: 'row',
+        flexWrap: 'wrap',
+        justifyContent: 'center',
+        paddingTop: 10,
+        paddingBottom: 10
+      }
+    }, match_matches.map((cm, i) => {
+      return renderMatchEvents({
+        item: cm,
+        index: i
+      });
+    })));
+  };
+  const renderTeamEvents = data => {
+    const event = events.find(e => e.event_id == data.item); //[data.item]
+    if (!event) {
+      return /*#__PURE__*/React.createElement(React.Fragment, null);
+    }
+    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 /*#__PURE__*/React.createElement(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
+      }
+    }, /*#__PURE__*/React.createElement(View, {
+      style: {
+        padding: 10,
+        flexDirection: 'row',
+        borderBottomWidth: 1,
+        borderColor: Colors.shades.shade600
+      }
+    }, league ? /*#__PURE__*/React.createElement(Text, {
+      size: 14,
+      color: Colors.brand.midnight,
+      weight: "bold"
+    }, league.league_name, ": ") : /*#__PURE__*/React.createElement(React.Fragment, null), /*#__PURE__*/React.createElement(Text, {
+      style: {
+        flex: 1
+      },
+      size: 14,
+      color: Colors.brand.midnight,
+      weight: "bold"
+    }, event.event_title), /*#__PURE__*/React.createElement(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)), /*#__PURE__*/React.createElement(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 ? /*#__PURE__*/React.createElement(View, {
+      style: {
+        borderBottomRightRadius: 8,
+        borderBottomLeftRadius: 8
+      }
+    }, expanded ? /*#__PURE__*/React.createElement(View, null, non_primary_markets.map((id, i) => {
+      return renderNonPrimaryMarkets({
+        item: id,
+        index: i,
+        event_id: data.item,
+        event_type: 'team'
+      });
+    })) : /*#__PURE__*/React.createElement(React.Fragment, null), /*#__PURE__*/React.createElement(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))
+    }, /*#__PURE__*/React.createElement(Text, {
+      style: {
+        flex: 1
+      },
+      size: 14,
+      color: Colors.brand.midnight,
+      weight: "semibold"
+    }, expanded ? 'Hide Markets' : `${non_primary_markets.length} More Markets`), /*#__PURE__*/React.createElement(Icons.ChevronIcon, {
+      direction: expanded ? 'up' : 'down',
+      color: Colors.brand.midnight,
+      size: 8
+    }))) : /*#__PURE__*/React.createElement(React.Fragment, null));
+  };
+  if (loading || !competition || !competition_type || !competition_result_type) {
+    return /*#__PURE__*/React.createElement(View, {
+      style: {
+        flex: 1,
+        backgroundColor: Colors.shades.white
+      }
+    }, company ? /*#__PURE__*/React.createElement(View, {
+      style: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        padding: 15,
+        backgroundColor: company?.brand_primary ?? Colors.shades.shade100
+      }
+    }, back_allowed ? /*#__PURE__*/React.createElement(TouchableOpacity, {
+      style: {
+        paddingRight: 20
+      },
+      onPress: () => onGoBack ? onGoBack() : console.log('')
+    }, /*#__PURE__*/React.createElement(Icons.ChevronIcon, {
+      direction: "left",
+      size: 14,
+      color: company?.brand_secondary ?? Colors.brand.midnight
+    })) : /*#__PURE__*/React.createElement(React.Fragment, null), /*#__PURE__*/React.createElement(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')) : /*#__PURE__*/React.createElement(React.Fragment, null), /*#__PURE__*/React.createElement(ActivityIndicator, {
+      style: {
+        padding: 20
+      },
+      size: "large",
+      color: Colors.brand.midnight
+    }));
+  }
+  return /*#__PURE__*/React.createElement(View, {
+    style: {
+      flex: 1,
+      backgroundColor: Colors.shades.shade100
+    }
+  }, /*#__PURE__*/React.createElement(ScrollView, {
+    style: {
+      flex: 1
+    }
+  }, company ? /*#__PURE__*/React.createElement(View, {
+    style: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      padding: 15,
+      backgroundColor: company?.brand_primary ?? Colors.shades.shade100
+    }
+  }, back_allowed ? /*#__PURE__*/React.createElement(TouchableOpacity, {
+    style: {
+      paddingRight: 20
+    },
+    onPress: () => onGoBack ? onGoBack() : console.log('')
+  }, /*#__PURE__*/React.createElement(Icons.ChevronIcon, {
+    direction: "left",
+    size: 14,
+    color: company?.brand_secondary ?? Colors.brand.midnight
+  })) : /*#__PURE__*/React.createElement(React.Fragment, null), /*#__PURE__*/React.createElement(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')) : /*#__PURE__*/React.createElement(React.Fragment, null), /*#__PURE__*/React.createElement(View, {
+    nativeID: "cometition_header",
+    style: {
+      minWidth: 300,
+      backgroundColor: Colors.brand.midnight
+    }
+  }, /*#__PURE__*/React.createElement(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!')
+  })), competition_season ? /*#__PURE__*/React.createElement(TouchableOpacity, {
+    style: {
+      backgroundColor: Colors.incentive.gold,
+      padding: 10
+    },
+    onPress: () => setShowSeason(true)
+  }, /*#__PURE__*/React.createElement(Text, {
+    size: 18,
+    color: Colors.shades.white,
+    weight: "bold"
+  }, "Competition Season"), /*#__PURE__*/React.createElement(View, {
+    nativeID: "competition_leaderboard",
+    style: {
+      marginTop: 5,
+      flexDirection: 'row',
+      alignItems: 'center'
+    }
+  }, /*#__PURE__*/React.createElement(View, {
+    style: {
+      padding: 5
+    }
+  }, /*#__PURE__*/React.createElement(Image, {
+    source: {
+      uri: competition_season.image?.url
+    },
+    style: {
+      height: 50,
+      width: 75,
+      borderRadius: 8
+    },
+    resizeMode: "cover"
+  })), /*#__PURE__*/React.createElement(View, {
+    style: {
+      flex: 1
+    }
+  }, /*#__PURE__*/React.createElement(Text, {
+    size: 14,
+    color: Colors.shades.white,
+    weight: "semibold"
+  }, competition_season.season_name), /*#__PURE__*/React.createElement(Text, {
+    style: {
+      marginTop: 3
+    },
+    size: 14,
+    color: Colors.shades.white,
+    weight: "regular"
+  }, competition_season.season_description)), /*#__PURE__*/React.createElement(View, {
+    style: {
+      padding: 5
+    }
+  }, /*#__PURE__*/React.createElement(Icons.ChevronIcon, {
+    direction: "right",
+    color: Colors.shades.white,
+    size: 16
+  })))) : /*#__PURE__*/React.createElement(React.Fragment, null), /*#__PURE__*/React.createElement(View, {
+    nativeID: "competition_leaderboard",
+    style: {
+      minWidth: 300,
+      padding: 10
+    }
+  }, /*#__PURE__*/React.createElement(Text, {
+    size: 18,
+    color: Colors.brand.midnight,
+    weight: "bold"
+  }, "Competition Leaderboard"), /*#__PURE__*/React.createElement(View, {
+    style: {
+      marginTop: 10
+    }
+  }, /*#__PURE__*/React.createElement(CompetitionLeaderboard, {
+    competition: competition,
+    competition_type: competition_type,
+    height: height,
+    onLeaderSelect: player => setViewingLeader(player),
+    view_mode: "short",
+    onSeeFull: () => setShowFullLeaderboard(true),
+    viewer_id: player?.player_id
+  }))), /*#__PURE__*/React.createElement(View, {
+    nativeID: "competition_picks",
+    style: {
+      backgroundColor: Colors.shades.white,
+      marginTop: 5
+    }
+  }, competition?.status != 'closed' ? /*#__PURE__*/React.createElement(View, {
+    nativeID: "upcoming_picks"
+  }, /*#__PURE__*/React.createElement(View, {
+    style: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      marginBottom: 15
+    }
+  }, /*#__PURE__*/React.createElement(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'
+    }
+  }, /*#__PURE__*/React.createElement(View, {
+    style: {
+      flex: 1,
+      flexDirection: 'row',
+      alignItems: 'center',
+      padding: 10
+    }
+  }, /*#__PURE__*/React.createElement(Text, {
+    size: 18,
+    color: Colors.shades.white,
+    weight: "bold"
+  }, "Upcoming Events"), /*#__PURE__*/React.createElement(View, {
+    style: {
+      marginLeft: 8,
+      borderRadius: 100,
+      height: 24,
+      width: 24,
+      backgroundColor: Colors.highlights.highlight200,
+      justifyContent: 'center',
+      alignItems: 'center'
+    }
+  }, /*#__PURE__*/React.createElement(Text, {
+    size: 12,
+    color: Colors.shades.white,
+    weight: "bold",
+    textAlign: "center"
+  }, player_picks.filter(pp => pp.status == 'inprogress').length))), authenticated_competition_player ? /*#__PURE__*/React.createElement(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' ? /*#__PURE__*/React.createElement(Text, {
+    style: {
+      flex: 1
+    },
+    size: 14,
+    color: Colors.shades.white,
+    weight: "semibold",
+    textAlign: "right"
+  }, authenticated_competition_player.wager_based_balance.toFixed(2), " Remaining") : /*#__PURE__*/React.createElement(Text, {
+    style: {
+      flex: 1
+    },
+    size: 14,
+    color: Colors.shades.white,
+    weight: "semibold",
+    textAlign: "right"
+  }, competition.max_pick_count - player_picks.length, " Picks Remaining")) : /*#__PURE__*/React.createElement(React.Fragment, null))), /*#__PURE__*/React.createElement(FlatList, {
+    data: ip_team_event_ids,
+    renderItem: renderTeamEvents,
+    keyExtractor: item => item
+  }), /*#__PURE__*/React.createElement(FlatList, {
+    data: unique_tournaments,
+    renderItem: renderTournaments,
+    keyExtractor: item => item
+  })) : /*#__PURE__*/React.createElement(React.Fragment, null), /*#__PURE__*/React.createElement(View, {
+    nativeID: "closed_picks"
+  }, /*#__PURE__*/React.createElement(TouchableOpacity, {
+    style: {
+      padding: 10,
+      marginBottom: 15,
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      backgroundColor: Colors.brand.midnight,
+      marginTop: 15
+    },
+    onPress: () => handleShowComplete()
+  }, /*#__PURE__*/React.createElement(View, {
+    style: {
+      flexDirection: 'row',
+      alignItems: 'center'
+    }
+  }, /*#__PURE__*/React.createElement(Text, {
+    size: 18,
+    color: Colors.shades.white,
+    weight: "bold"
+  }, "Completed"), /*#__PURE__*/React.createElement(View, {
+    style: {
+      marginLeft: 8,
+      borderRadius: 100,
+      height: 24,
+      width: 24,
+      backgroundColor: Colors.highlights.highlight200,
+      justifyContent: 'center',
+      alignItems: 'center'
+    }
+  }, /*#__PURE__*/React.createElement(Text, {
+    size: 12,
+    color: Colors.shades.white,
+    weight: "bold",
+    textAlign: "center"
+  }, player_picks.filter(p => p.status === 'closed').length))), /*#__PURE__*/React.createElement(Icons.ChevronIcon, {
+    color: Colors.shades.white,
+    direction: show_completed ? 'up' : 'down',
+    size: 14
+  })), show_completed ? /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(FlatList, {
+    data: closed_team_event_ids,
+    renderItem: renderTeamEvents,
+    keyExtractor: item => item
+  })) : /*#__PURE__*/React.createElement(React.Fragment, null)))), player && !hide_player ? /*#__PURE__*/React.createElement(View, {
+    style: {
+      flexDirection: 'row',
+      padding: 10,
+      backgroundColor: Colors.shades.shade100,
+      borderBottomLeftRadius: 22,
+      borderBottomRightRadius: 22
+    }
+  }, /*#__PURE__*/React.createElement(TouchableOpacity, {
+    style: {
+      flex: 1,
+      flexDirection: 'row',
+      alignItems: 'center'
+    },
+    onPress: () => setProfileVisible(!profile_visible)
+  }, /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(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"
+  })), /*#__PURE__*/React.createElement(View, {
+    style: {
+      flex: 1,
+      flexDirection: 'row',
+      marginLeft: 10
+    }
+  }, /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(Text, {
+    size: 12,
+    color: Colors.brand.midnight,
+    weight: "regular"
+  }, "Playing as"), /*#__PURE__*/React.createElement(Text, {
+    style: {
+      marginTop: 3
+    },
+    size: 12,
+    color: Colors.brand.midnight,
+    weight: "bold"
+  }, player.username)))), player_balance ? /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(Text, {
+    size: 12,
+    color: Colors.brand.midnight,
+    textAlign: "right"
+  }, competition.market_type == 'FOR_MONEY' ? 'USD' : 'Edge Coins'), /*#__PURE__*/React.createElement(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)}`)) : /*#__PURE__*/React.createElement(React.Fragment, null)) : /*#__PURE__*/React.createElement(React.Fragment, null), show_full_leaderboard ? /*#__PURE__*/React.createElement(View, {
+    style: {
+      flex: 1,
+      position: 'absolute',
+      top: 0,
+      right: 0,
+      left: 0,
+      bottom: 0,
+      backgroundColor: Colors.shades.black_faded
+    }
+  }, /*#__PURE__*/React.createElement(SpringView, {
+    slide: "vertical",
+    to: 0,
+    from: 1000
+  }, /*#__PURE__*/React.createElement(CompetitionLeaderboard, {
+    competition: competition,
+    competition_type: competition_type,
+    height: height,
+    onSeeFull: () => setShowFullLeaderboard(false),
+    view_mode: "full",
+    onLeaderSelect: player => setViewingLeader(player),
+    viewer_id: player?.player_id
+  }))) : /*#__PURE__*/React.createElement(React.Fragment, null), viewing_leader ? /*#__PURE__*/React.createElement(View, {
+    style: {
+      flex: 1,
+      position: 'absolute',
+      top: 0,
+      right: 0,
+      left: 0,
+      bottom: 0,
+      backgroundColor: Colors.shades.black_faded
+    }
+  }, /*#__PURE__*/React.createElement(SpringView, {
+    slide: "vertical",
+    to: 0,
+    style: {
+      flex: 1
+    },
+    from: 1000
+  }, /*#__PURE__*/React.createElement(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)
+  }))) : /*#__PURE__*/React.createElement(React.Fragment, null), draft_player_pick?.draft_pick ? /*#__PURE__*/React.createElement(View, {
+    style: {
+      position: 'absolute',
+      top: 0,
+      right: 0,
+      left: 0,
+      bottom: 0,
+      backgroundColor: Colors.shades.black_faded,
+      justifyContent: 'flex-end',
+      alignItems: 'center'
+    }
+  }, /*#__PURE__*/React.createElement(SpringView, {
+    slide: "vertical",
+    to: 0,
+    from: 200
+  }, /*#__PURE__*/React.createElement(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)
+  }))) : /*#__PURE__*/React.createElement(React.Fragment, null), show_season && competition_season && competition.competition_season_id ? /*#__PURE__*/React.createElement(View, {
+    style: {
+      position: 'absolute',
+      top: 0,
+      right: 0,
+      left: 0,
+      bottom: 0,
+      backgroundColor: Colors.shades.black_faded,
+      justifyContent: 'flex-end',
+      alignItems: 'center'
+    }
+  }, /*#__PURE__*/React.createElement(SpringView, {
+    slide: "vertical",
+    to: 0,
+    from: 1000
+  }, /*#__PURE__*/React.createElement(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)
+  }))) : /*#__PURE__*/React.createElement(React.Fragment, null), show_enter_prompt ? /*#__PURE__*/React.createElement(View, {
+    style: {
+      position: 'absolute',
+      top: 0,
+      right: 0,
+      left: 0,
+      bottom: 0,
+      backgroundColor: Colors.shades.black_faded,
+      justifyContent: 'flex-end',
+      alignItems: 'center'
+    }
+  }, /*#__PURE__*/React.createElement(SpringView, {
+    slide: "vertical",
+    to: 0,
+    from: 200
+  }, /*#__PURE__*/React.createElement(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)
+  }))) : /*#__PURE__*/React.createElement(React.Fragment, null), show_rules ? /*#__PURE__*/React.createElement(View, {
+    style: {
+      position: 'absolute',
+      top: 0,
+      right: 0,
+      left: 0,
+      bottom: 0,
+      padding: 10,
+      backgroundColor: Colors.shades.black_faded,
+      justifyContent: 'center',
+      alignItems: 'center'
+    }
+  }, /*#__PURE__*/React.createElement(SpringView, {
+    slide: "vertical",
+    to: 0,
+    from: 1000
+  }, /*#__PURE__*/React.createElement(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
+  }))) : /*#__PURE__*/React.createElement(React.Fragment, null), nav_out_prompt.visible ? /*#__PURE__*/React.createElement(View, {
+    style: {
+      flex: 1,
+      position: 'absolute',
+      top: 0,
+      right: 0,
+      left: 0,
+      bottom: 0,
+      backgroundColor: Colors.shades.black_faded,
+      justifyContent: 'center',
+      alignItems: 'center'
+    }
+  }, /*#__PURE__*/React.createElement(SpringView, {
+    slide: "vertical",
+    to: 0,
+    from: 1000
+  }, /*#__PURE__*/React.createElement(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
+      });
+    }
+  }))) : /*#__PURE__*/React.createElement(React.Fragment, null));
+};
+export default CompetitionPlay;
+//# sourceMappingURL=CompetitionPlay.js.map