be-components 4.9.9 → 5.0.1

package/lib/typescript/src/MarketMaker/api/index.d.ts

@@ -137,7 +137,7 @@ declare const MarketMaketHelpers: {
     calcPotentialWinnings: (amt: number, odds: number) => number;
     calcProbabilityFromOdds: (odds: number) => number;
     getAvailableSideIds: (my_orders: OrderProps[], available_orders: BestAvailableOrderProps[], prices: ExternalPriceProps[], market: MarketProps) => {
-        side_type: "team" | "athlete" | "event" | "exotic" | "h2h";
+        side_type: "athlete" | "team" | "event" | "exotic" | "h2h";
         unique_side_ids: string[];
         default_side_id: string;
     };

package/lib/typescript/src/SocialComponents/Contacts/useContacts.d.ts

@@ -9,6 +9,7 @@ declare const useContacts: ({ referral_code }: UseContactProps) => {
     permission_checked: boolean;
     permission: Contacts.PermissionResponse | undefined;
     contact_loading: boolean;
+    getContacts: () => Promise<Contacts.ContactResponse | undefined>;
     checkPermissions: () => Promise<Contacts.PermissionResponse | undefined>;
     checkAvailable: () => Promise<boolean>;
     requestPermissions: () => Promise<Contacts.PermissionResponse | undefined>;

package/lib/typescript/src/SocialComponents/Contacts/useContacts.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useContacts.d.ts","sourceRoot":"","sources":["../../../../../src/SocialComponents/Contacts/useContacts.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,QAAQ,MAAM,eAAe,CAAC;AAC1C,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAC;AAGrD,KAAK,eAAe,GAAG;IACnB,aAAa,CAAC,EAAC,MAAM,CAAA;CACxB,CAAA;AAED,QAAA,MAAM,WAAW,sBAAsB,eAAe;;;;;;4BA4CjB,OAAO,CAAC,QAAQ,CAAC,kBAAkB,GAAG,SAAS,CAAC;0BAdlD,OAAO,CAAC,OAAO,CAAC;8BA4BZ,OAAO,CAAC,QAAQ,CAAC,kBAAkB,GAAG,SAAS,CAAC;sBAaxD,OAAO,CAAC;QAAE,MAAM,EAAC,iBAAiB,CAAC;QAAC,MAAM,EAAC,MAAM,CAAA;KAAE,GAAG,SAAS,CAAC;CAwC9F,CAAA;AAED,OAAO,EAAE,WAAW,EAAE,CAAA"}
+{"version":3,"file":"useContacts.d.ts","sourceRoot":"","sources":["../../../../../src/SocialComponents/Contacts/useContacts.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,QAAQ,MAAM,eAAe,CAAC;AAC1C,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAC;AAGrD,KAAK,eAAe,GAAG;IACnB,aAAa,CAAC,EAAC,MAAM,CAAA;CACxB,CAAA;AAED,QAAA,MAAM,WAAW,sBAAsB,eAAe;;;;;;uBAuEtB,OAAO,CAAC,QAAQ,CAAC,eAAe,GAAG,SAAS,CAAC;4BA3BxC,OAAO,CAAC,QAAQ,CAAC,kBAAkB,GAAG,SAAS,CAAC;0BAdlD,OAAO,CAAC,OAAO,CAAC;8BA4BZ,OAAO,CAAC,QAAQ,CAAC,kBAAkB,GAAG,SAAS,CAAC;sBAuBxD,OAAO,CAAC;QAAE,MAAM,EAAC,iBAAiB,CAAC;QAAC,MAAM,EAAC,MAAM,CAAA;KAAE,GAAG,SAAS,CAAC;CAwC9F,CAAA;AAED,OAAO,EAAE,WAAW,EAAE,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "be-components",
-  "version": "4.9.9",
+  "version": "5.0.1",
   "description": "Components for BettorEdge Apps",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",
@@ -27,6 +27,7 @@
   ],
   "scripts": {
     "example": "yarn workspace be-components-example",
+    "web-build": "yarn workspace be-components-example expo export -p web",
     "test": "jest",
     "typecheck": "tsc --noEmit",
     "lint": "eslint \"**/*.{js,ts,tsx}\"",
@@ -69,6 +70,7 @@
     "eslint": "^8.51.0",
     "eslint-config-prettier": "^9.0.0",
     "eslint-plugin-prettier": "^5.0.1",
+    "html-webpack-plugin": "^5.6.3",
     "jest": "^29.7.0",
     "prettier": "^3.0.3",
     "react": "18.3.1",
@@ -170,7 +172,7 @@
     "axios": "^1.6.8",
     "buffer": "^6.0.3",
     "draft-js": "^0.11.7",
-    "expo": "latest",
+    "expo": "^52.0.38",
     "expo-asset": "^11.0.1",
     "expo-av": "^15.0.2",
     "expo-camera": "^16.0.9",
@@ -192,6 +194,7 @@
     "moment-mini": "^2.29.4",
     "react-datetime-picker": "^6.0.1",
     "react-device-detect": "^2.2.3",
+    "react-dom": "18.3.1",
     "react-native-base64": "^0.2.1",
     "react-native-svg": "15.8.0",
     "react-native-uuid": "^2.0.3",

package/src/Authenticator/index.tsx

@@ -85,9 +85,9 @@ const Authenticator = ({ show_referral, auth_strategy_id, onFocusPosition, defau
             case 'header':
                 if(!company){ return <></> }
                 return (
-                    <View type='header' style={{ padding:20, flexDirection:'row', alignItems:'center', borderTopRightRadius:40, borderTopLeftRadius:40, borderBottomWidth:1, borderColor:C.borders.light }}>
+                    <View type='header' style={{ padding:20, flexDirection:'row', alignItems:'center', borderTopRightRadius:8, borderTopLeftRadius:8, borderBottomWidth:1, borderColor:C.borders.light }}>
                         <View transparent style={{ flex:1, marginRight:10 }}>
-                            <Text size={28} weight='bold' color={C.text.h1}>{active_view == 'login' ? 'Log In!': 'Welcome!'}</Text>
+                            <Text size={28} theme='h1' color={C.text.h1}>{active_view == 'login' ? 'Log In!': 'Welcome!'}</Text>
                             <Text theme='h2'>{active_view == 'login' ? 'Continue to login with':'Complete the form below to participate with'} {company?.company_name ?? 'Bettoredge'}</Text>
                         </View>
                         <View float style={{ borderRadius:100, padding:10, backgroundColor:C.text.white }}>
@@ -96,7 +96,7 @@ const Authenticator = ({ show_referral, auth_strategy_id, onFocusPosition, defau
                                 style={{ width: 50, height: 50, borderRadius:8 }}
                                 resizeMode='cover'
                             />
-                        </View>         
+                        </View>   
                     </View>
                 )
             case 'strategy':
@@ -143,7 +143,7 @@ const Authenticator = ({ show_referral, auth_strategy_id, onFocusPosition, defau
                     renderItem={renderSections}
                 />
             </View>
-            <View type='footer' style={{ padding:10, flexDirection:'row', alignItems:'center' }}>
+            <View type='footer' style={{ padding:10, flexDirection:'row', alignItems:'center', borderBottomRightRadius:8, borderBottomLeftRadius:8 }}>
                 <Button
                     title='CLOSE'
                     title_color={C.text.error}

package/src/Bracket/api/index.ts

@@ -1,5 +1,5 @@
 import axios from "axios"
-import type { AthleteProps, BracketCompetitionProps, BracketCompetitionScoringRuleProps, BracketGroupProps, BracketProps, BracketRoundProps, CompetitionPayoutTypeProps, CompetitionPlayerBracketProps, CompetitionResultTypeProps, CompetitionTypeProps, EventProps, LeagueProps, MyPlayerProps, PlayerBalanceProps, PlayerBracketPickProps, PlayerBracketProps, PublicPlayerProps, RoundEventProps, TeamProps } from "../../types";
+import type { AthleteProps, BracketCompetitionProps, BracketCompetitionScoringRuleProps, BracketGroupProps, BracketPickStatProps, BracketProps, BracketRoundProps, CompetitionPayoutTypeProps, CompetitionPlayerBracketProps, CompetitionResultTypeProps, CompetitionTypeProps, EventProps, LeagueProps, MyPlayerProps, PlayerBalanceProps, PlayerBracketPickProps, PlayerBracketProps, PublicPlayerProps, RoundEventProps, TeamProps } from "../../types";
 import { APIOverrides } from "../../ApiOverrides";
 import moment from "moment-mini";
 export { BracketApi, BracketComeptitionApi, BracketCompetitionHelpers }
@@ -84,6 +84,15 @@ const BracketComeptitionApi = {
             return []
         }
     },
+    getBracketPickStatsByBracket: async(bracket_id:string):Promise<BracketPickStatProps[]> => {
+        try {
+            const resp = await axios.get(`${TP_SVC_API}/v1/brackets/bracket/stats/${bracket_id}`)
+            return resp.data.bracket_pick_stats
+        } catch (e) {
+            console.log(e);
+            return []
+        }
+    },
     createBracketCompetition: async(bracket_competition:BracketCompetitionProps, bracket_competition_scoring_rules:BracketCompetitionScoringRuleProps[]):Promise<{bracket_competition:BracketCompetitionProps, bracket_competition_scoring_rules:BracketCompetitionScoringRuleProps[]}> => {
         const resp = await axios.post(`${TP_SVC_API}/v1/brackets/competition/create`, { bracket_competition, bracket_competition_scoring_rules })
         return resp.data
@@ -136,6 +145,7 @@ const BracketComeptitionApi = {
     },
     getBracketCompetitionById: async(bracket_competition_id:string):Promise<undefined|{bracket_competition:BracketCompetitionProps, competition_player_brackets:CompetitionPlayerBracketProps[], player_brackets:PlayerBracketProps[], bracket_competition_scoring_rules:BracketCompetitionScoringRuleProps[]}> => {
         try {
+
             const resp = await axios.get(`${TP_SVC_API}/v1/brackets/competition/${bracket_competition_id}`)
             return resp.data
         } catch (e) {
@@ -217,14 +227,13 @@ const BracketCompetitionHelpers = {
         if(moment().isBefore(moment(bc.scheduled_datetime))){ return true }
         return false
     },
-    calcRoundWidth: (width:number, round_number:number, margin:number) => {
-        const min_width = 200;
+    calcRoundWidth: (width:number, round_number:number, margin:number, compact?:boolean) => {
+        const min_width = compact ? 100 : 200;
         const max_width = 500;
         if(round_number == 0){ return min_width }
         //Check how many we can do in the fitted screen
         let total_cards = Math.floor(width / min_width);
         if(total_cards <= 2){
-            console.log('in here!!')
             return (width / 2) - (margin * 4)
         }
         let total_margin = margin * round_number
@@ -234,6 +243,58 @@ const BracketCompetitionHelpers = {
         return initial_test
 
     },
+    calcFullBracketSize: ( round_width:number, rounds:number, margin:number ) => {
+        let full_length = (round_width * rounds * 2) + (margin * 2 * rounds) + 100 //Double since the groups are horizontal
+        return full_length
+    },
+    getNonGroupGames: (round_events:RoundEventProps[], bracket_groups:BracketGroupProps[], player_bracket_picks:PlayerBracketPickProps[]):NonGroupEventProps[] => {
+        let non_group_events:NonGroupEventProps[] = []
+        let non_group_games = round_events.filter(re => re.bracket_group_id == '0')
+        if(non_group_games.length == 0){ return [] }
+        let championship_game = round_events.sort((a,b) => b.event_number - a.event_number)[0]
+        if(championship_game){
+            const champ_pick = player_bracket_picks.find(pbp => pbp.round_event_id == championship_game.round_event_id && pbp.status != 'deleted')
+            const away_champ_pick = player_bracket_picks.find(pbp => pbp.round_event_id == championship_game.away_placeholder && pbp.status != 'deleted')
+            const home_champ_pick = player_bracket_picks.find(pbp => pbp.round_event_id == championship_game.home_placeholder && pbp.status != 'deleted')
+    
+            non_group_events.push({
+                round_event_id: championship_game.round_event_id,
+                event_number: championship_game.event_number,
+                round_event: championship_game,
+                championship: true,
+                away_placeholder_pick: away_champ_pick,
+                home_placeholder_pick: home_champ_pick,
+                player_bracket_pick: champ_pick
+            })
+        }
+        //Find the side of the bracket the game needs to be on
+        non_group_games.map(ngg => {
+            if(championship_game?.round_event_id == ngg.round_event_id){ return }
+            let away_placeholder_game = round_events.find(re => re.round_event_id == ngg.away_placeholder);
+            let away_group = bracket_groups.find(bg => bg.bracket_group_id == away_placeholder_game?.bracket_group_id)
+            //let home_placeholder_game = round_events.find(re => re.round_event_id == ngg.home_placeholder);
+            //let home_group = bracket_groups.find(bg => bg.bracket_group_id == home_placeholder_game?.bracket_group_id)
+            let orientation:'left'|'right' = 'left'
+            if(away_group?.orientation != 'left'){ orientation = 'right' }
+            let pbp = player_bracket_picks.find(pbp => pbp.round_event_id == ngg.round_event_id && pbp.status != 'deleted')
+            const away_ff_pick = player_bracket_picks.find(pbp => pbp.round_event_id == ngg.away_placeholder && pbp.status != 'deleted')
+            const home_ff_pick = player_bracket_picks.find(pbp => pbp.round_event_id == ngg.home_placeholder && pbp.status != 'deleted')
+    
+            non_group_events.push({
+                round_event_id: ngg.round_event_id,
+                championship: false,
+                orientation,
+                player_bracket_pick: pbp,
+                round_event: ngg,
+                away_placeholder_pick: away_ff_pick,
+                home_placeholder_pick: home_ff_pick,
+                event_number: ngg.event_number
+            })
+    
+        })
+    
+        return non_group_events
+    },
     getToggleOptions: () => {
         let options = [
             { key: 'my_brackets', label:'My Brackets' },
@@ -249,6 +310,7 @@ const BracketCompetitionHelpers = {
     },
     canMakePick: (bracket?:BracketProps) => {
         if(!bracket){ return false }
+        if(!bracket.picks_allowed){ return false }
         if(moment().isAfter(moment(bracket.scheduled_datetime))){ return false }
         return true
     },
@@ -364,6 +426,24 @@ const BracketCompetitionHelpers = {
         if(!init_failed){ return rules }
         return BracketCompetitionHelpers.getDefaultScoringRules(bracket_competition_id, bracket_rounds);
     },
+    getPlayerBracketStatus: (bracket_rounds:BracketRoundProps[], bracket_groups:BracketGroupProps[], round_events:RoundEventProps[], player_bracket_picks:PlayerBracketPickProps[]) => {
+        let round_statuses:{ bracket_round_id:string, status: 'complete'|'incomplete' }[] = []
+        let group_statuses:{ bracket_group_id:string, status: 'complete'|'incomplete' }[] = []
+        bracket_rounds.map(r => {
+            if(r.carry_through){ return round_statuses.push({ bracket_round_id:r.bracket_round_id, status: 'complete' }) }
+            let round_evs = round_events.filter(re => re.bracket_round_id == r.bracket_round_id);
+            let round_picks = player_bracket_picks.filter(pbp => round_evs.map(ev => ev.round_event_id.toString()).includes(pbp.round_event_id.toString()));
+            if(round_picks.length == round_evs.length){ return round_statuses.push({ bracket_round_id: r.bracket_round_id, status:'complete' }) }
+            return round_statuses.push({ bracket_round_id: r.bracket_round_id, status:'incomplete' })
+        });
+        bracket_groups.map(r => {
+            let group_evs = round_events.filter(re => !re.no_pick && re.bracket_group_id == r.bracket_group_id);
+            let group_picks = player_bracket_picks.filter(pbp => group_evs.map(ev => ev.round_event_id.toString()).includes(pbp.round_event_id.toString()));
+            if(group_picks.length == group_evs.length){ return group_statuses.push({ bracket_group_id: r.bracket_group_id, status:'complete' }) }
+            return group_statuses.push({ bracket_group_id: r.bracket_group_id, status:'incomplete' })
+        });
+        return { round_statuses, group_statuses }
+    },
     getDefaultScoringRules : (bracket_competition_id:string, bracket_rounds:BracketRoundProps[]):BracketCompetitionScoringRuleProps[] => {
         let rules:BracketCompetitionScoringRuleProps[] = []
         let next_points = 1;
@@ -436,54 +516,6 @@ const BracketCompetitionHelpers = {
     
         return { round_status, group_status }
     },
-    getNonGroupGames : (round_events:RoundEventProps[], bracket_groups:BracketGroupProps[], player_bracket_picks:PlayerBracketPickProps[]):NonGroupEventProps[] => {
-        let non_group_events:NonGroupEventProps[] = []
-        let non_group_games = round_events.filter(re => re.bracket_group_id == '0')
-        if(non_group_games.length == 0){ return [] }
-        let championship_game = round_events.sort((a,b) => b.event_number - a.event_number)[0]
-        if(championship_game){
-            const champ_pick = player_bracket_picks.find(pbp => pbp.round_event_id == championship_game.round_event_id && pbp.status != 'deleted')
-            const away_champ_pick = player_bracket_picks.find(pbp => pbp.round_event_id == championship_game.away_placeholder && pbp.status != 'deleted')
-            const home_champ_pick = player_bracket_picks.find(pbp => pbp.round_event_id == championship_game.home_placeholder && pbp.status != 'deleted')
-    
-            non_group_events.push({
-                round_event_id: championship_game.round_event_id,
-                event_number: championship_game.event_number,
-                round_event: championship_game,
-                championship: true,
-                away_placeholder_pick: away_champ_pick,
-                home_placeholder_pick: home_champ_pick,
-                player_bracket_pick: champ_pick
-            })
-        }
-        //Find the side of the bracket the game needs to be on
-        non_group_games.map(ngg => {
-            if(championship_game?.round_event_id == ngg.round_event_id){ return }
-            let away_placeholder_game = round_events.find(re => re.round_event_id == ngg.away_placeholder);
-            let away_group = bracket_groups.find(bg => bg.bracket_group_id == away_placeholder_game?.bracket_group_id)
-            //let home_placeholder_game = round_events.find(re => re.round_event_id == ngg.home_placeholder);
-            //let home_group = bracket_groups.find(bg => bg.bracket_group_id == home_placeholder_game?.bracket_group_id)
-            let orientation:'left'|'right' = 'left'
-            if(away_group?.orientation != 'left'){ orientation = 'right' }
-            let pbp = player_bracket_picks.find(pbp => pbp.round_event_id == ngg.round_event_id && pbp.status != 'deleted')
-            const away_ff_pick = player_bracket_picks.find(pbp => pbp.round_event_id == ngg.away_placeholder && pbp.status != 'deleted')
-            const home_ff_pick = player_bracket_picks.find(pbp => pbp.round_event_id == ngg.home_placeholder && pbp.status != 'deleted')
-    
-            non_group_events.push({
-                round_event_id: ngg.round_event_id,
-                championship: false,
-                orientation,
-                player_bracket_pick: pbp,
-                round_event: ngg,
-                away_placeholder_pick: away_ff_pick,
-                home_placeholder_pick: home_ff_pick,
-                event_number: ngg.event_number
-            })
-    
-        })
-    
-        return non_group_events
-    },
     generateCompetitionPlayerBracket : (bracket_competition_id:string, player_bracket_id:string, promo_balance?:boolean):CompetitionPlayerBracketProps => {
         return {
             competition_player_bracket_id: '',

package/src/Bracket/components/BracketCompetitionActions.tsx

@@ -26,6 +26,7 @@ type BracketCompetitionActionProps = {
     player_bracket?:PlayerBracketProps,
     onFocusPosition?:(data:{ x:number, y:number, height:number, width:number }) => void,
     player_brackets:PlayerBracketProps[],
+    restrict_competition?:boolean,
     competition_player_brackets:CompetitionPlayerBracketProps[],
     onExpand?:() => void,
     onRequestAuthenticate:() => void,
@@ -36,7 +37,7 @@ type BracketCompetitionActionProps = {
 }
 
 const sections = ['active_competition', 'leaderboard', 'actions', 'competitions'];
-const BracketCompetitionActions = ({ competition_id, hide_image, image_height, onShowLeaderboard, onCreateNewCompetition, onManage, image_width, player, player_brackets, insets, onRequestAuthenticate, onSelectCompetition, onFoundCompetition, onFocusPosition, onEnterCompetition, onLeaveCompetition, competition_result_types, player_balance, view_mode, bracket_id, player_bracket, competition_player_brackets }:BracketCompetitionActionProps) => {
+const BracketCompetitionActions = ({ competition_id, hide_image, image_height, restrict_competition, onShowLeaderboard, onCreateNewCompetition, onManage, image_width, player, player_brackets, insets, onRequestAuthenticate, onSelectCompetition, onFoundCompetition, onFocusPosition, onEnterCompetition, onLeaveCompetition, competition_result_types, player_balance, view_mode, bracket_id, player_bracket, competition_player_brackets }:BracketCompetitionActionProps) => {
     const Colors = useColors();
     const [ search_data, setSearchData ] = useState<{
         visible:boolean,
@@ -209,7 +210,7 @@ const BracketCompetitionActions = ({ competition_id, hide_image, image_height, o
                                     style={{ padding:0, justifyContent:'flex-end' }}
                                     onPress={() => onShowLeaderboard(player_brackets, entered_cpbs)}
                                 >
-                                    <Text theme='h1' color={Colors.text.action} size={14}>View Leadboard</Text>
+                                    <Text theme='h1' color={Colors.text.action} size={14}>View Leaderboard</Text>
                                 </Button>
                             </View>
                             {active_competition?.prize_override ?
@@ -277,6 +278,7 @@ const BracketCompetitionActions = ({ competition_id, hide_image, image_height, o
                     </View>
                 )
             case 'competitions':
+                if(restrict_competition){ return <></> }
                 return (
                 <View transparent>
                     <View type='header' style={{ flexDirection:'row', alignItems:'center', padding:18 }}>

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

@@ -3,7 +3,7 @@ import type { AthleteProps, BracketProps, BracketRoundProps, PlayerBracketPickPr
 import RoundEventCard from './RoundEvent';
 import { view_styles } from '../../../constants/styles';
 import { Button, Text, View } from '../../../Components/Themed';
-import { Checkbox } from '../../../Components';
+import { Checkbox, Icons } from '../../../Components';
 import { useColors } from '../../../constants/useColors';
 
 type BracketRoundSectionProps = {
@@ -14,7 +14,9 @@ type BracketRoundSectionProps = {
     selected?:boolean,
     bracket?:BracketProps,
     round_events:RoundEventProps[],
+    compact?:boolean,
     teams:TeamProps[],
+    pick_status?:'complete'|'incomplete'
     athletes:AthleteProps[],
     hide_titles?:boolean,
     width:number,
@@ -27,7 +29,7 @@ type BracketRoundSectionProps = {
     right_bar?:boolean
 }
 
-const BracketRoundSection = ({ bracket_round, selected, bracket, round_event_loading, teams, round_events, width, hide_titles, player_bracket_picks, active_bracket_group_id, onSelectContest, onSelectRound, onPick }:BracketRoundSectionProps) => {
+const BracketRoundSection = ({ bracket_round, compact, orientation, selected, pick_status, bracket, round_event_loading, teams, round_events, width, hide_titles, player_bracket_picks, active_bracket_group_id, onSelectContest, onSelectRound, onPick }:BracketRoundSectionProps) => {
     const Colors = useColors();
     if(active_bracket_group_id){
         round_events = round_events.filter(re => re.bracket_group_id == active_bracket_group_id)
@@ -52,6 +54,8 @@ const BracketRoundSection = ({ bracket_round, selected, bracket, round_event_loa
                         round_events={round_events}
                         away_team={away_team}
                         bracket={bracket}
+                        compact={compact}
+                        orientation={orientation}
                         home_team={home_team}
                         away_placeholder_team={away_placeholder_team}
                         home_placeholder_team={home_placeholder_team}
@@ -73,12 +77,19 @@ const BracketRoundSection = ({ bracket_round, selected, bracket, round_event_loa
 
 
     return (
-        <View key={`${bracket_round.bracket_id}_${bracket_round.bracket_round_id}`} transparent style={{ }}>
+        <View key={`${bracket_round.bracket_id}_${bracket_round.bracket_round_id}`} transparent style={{ minWidth: width }}>
             {!hide_titles ?
             <View transparent style={{ borderBottomWidth:selected?2:1, borderColor:selected?Colors.text.action:Colors.borders.light, margin:3 }}>
                 <Button type='text' style={{ flexDirection:'row', alignItems:'center', padding:10 }} onPress={() => onSelectRound(bracket_round)}>
-                    <Checkbox checked={selected} color={Colors.text.action} disabled size={18} style={{ borderRadius:100 }} fill_style={{ borderRadius:100 }} onSelect={() => console.log('')} />
-                    <Text style={{ marginLeft:10 }} size={14} theme='h1' textAlign="center">{bracket_round.round_name}</Text>
+                    <View style={{ flexDirection:'row', alignItems:'center', flex:1 }}>
+                        <Checkbox checked={selected} color={Colors.text.action} disabled size={18} style={{ borderRadius:100 }} fill_style={{ borderRadius:100 }} onSelect={() => console.log('')} />
+                        <Text style={{ marginLeft:10 }} size={14} theme='h1' textAlign="center">{bracket_round.round_name}</Text>
+                    </View>
+                    {pick_status == 'complete' ?
+                    <Icons.CheckCirlceIcon color={Colors.text.success} size={14} />
+                    :
+                    <Icons.AlertIcon color={Colors.text.warning} size={14} />
+                    }
                 </Button>
             </View>
             :<></>}

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

@@ -19,6 +19,8 @@ type RoundEventCardProps = {
     away_athlete?:AthleteProps,
     bracket?:BracketProps,
     home_athlete?:AthleteProps,
+    compact?:boolean,
+    orientation?:'left'|'right',
     loading?:boolean,
     width:number,
     no_pick?:boolean,
@@ -28,7 +30,7 @@ type RoundEventCardProps = {
     onSelectContest?:(round_event:RoundEventProps, player_bracket_pick?:PlayerBracketPickProps, away_placeholder_pick?:PlayerBracketPickProps, home_placeholder_pick?:PlayerBracketPickProps) => void
 }
 
-const RoundEventCard = ({ event, loading, bracket, away_team, away_placeholder_team, home_placeholder_team, home_team, width, no_pick, round_event, player_bracket_pick, away_placeholder_pick, home_placeholder_pick, onPick, onSelectContest }:RoundEventCardProps) => {
+const RoundEventCard = ({ event, loading, orientation, compact, bracket, away_team, away_placeholder_team, home_placeholder_team, home_team, width, no_pick, round_event, player_bracket_pick, away_placeholder_pick, home_placeholder_pick, onPick, onSelectContest }:RoundEventCardProps) => {
     //AWAY PLACEHOLDER
     const round_width = width//width > 600 ? undefined : width / 2
     const Colors = useColors();
@@ -135,13 +137,133 @@ const RoundEventCard = ({ event, loading, bracket, away_team, away_placeholder_t
         else { return event.home_team_score }
     }
 
+    const renderLeftSide = (side:'away'|'home') => {
+        switch(side){
+            case 'away':
+                return (
+                    <View transparent>
+                        {round_event?.away_side_id && away_placeholder_pick && away_placeholder_team ?
+                        <View transparent style={{ padding:7, borderTopRightRadius:8, borderTopLeftRadius:8, borderBottomWidth:1, borderBottomColor:Colors.borders.light }}>
+                            <Text size={10} theme='h2' color={away_placeholder_pick.result_ind=='win'?Colors.text.success:Colors.text.error}>{away_placeholder_team.market_name} {away_placeholder_team.name}</Text>
+                        </View>
+                        :<></>}
+                        <View style={{ flexDirection:'row', alignItems:'center', padding:12, borderTopRightRadius:!round_event?.away_side_id || !round_event.away_placeholder?8:0, borderTopLeftRadius:!round_event?.away_side_id || !round_event.away_placeholder?8:0 }}>
+                            <View transparent style={{ flexDirection:'row', alignItems:'center', borderRightWidth:1, borderRightColor:Colors.borders.light }}>
+                                <View transparent style={{ marginLeft:5 }}>
+                                    {renderButton('away')}
+                                </View>
+                                {round_event.event_id ?
+                                    <Text style={{ margin:5}} size={10} theme='h2'>{getScore(away_team?.team_id)}</Text>
+                                :<></>}
+                            </View>
+                            <View transparent style={{ flex:1, marginLeft:10, marginRight:0 }}>
+                                {round_event.away_side_id && away_team ?
+                                <View style={{ flexGrow:1, flexDirection:'row', alignItems:'center' }}>
+                                    <Image
+                                        source={{ uri: away_team.image?.url }}
+                                        style={{ height:20, width:20, marginLeft:2 }}
+                                        resizeMode="cover"
+                                    />
+                                    <Text style={{ paddingRight: 5, borderRightWidth:1, borderColor:Colors.borders.light }} size={10} theme='description'>{!bracket?.hide_seeds?round_event.away_seed:''}</Text>
+                                    {compact ?
+                                    <Text style={{ flex:1 }} size={10} color={getPickColor('away', player_bracket_pick)} theme='h2'>{away_team.abbr}</Text>                                
+                                    :
+                                    <Text style={{ flex:1 }} size={10} color={getPickColor('away', player_bracket_pick)} theme='h2'>{away_team.market_name} {away_team.name}</Text>   
+                                    }                             
+                                </View>
+                                :
+                                <View transparent>
+                                    {away_placeholder_pick && away_placeholder_team ?
+                                    <View transparent style={{ flexGrow:1, flexDirection:'row', alignItems:'center' }}>
+                                        <Image
+                                            source={{ uri: away_placeholder_team.image?.url }}
+                                            style={{ height:20, width:20, marginLeft:2 }}
+                                            resizeMode="cover"
+                                        />
+                                        <Text style={{ paddingRight: 5, borderRightWidth:1, borderColor:Colors.borders.light }} size={10} theme='description'>{!bracket?.hide_seeds?away_placeholder_pick.pick_seed:''}</Text>
+                                        {compact ?
+                                        <Text style={{ flex:1 }} size={10} theme='h1'>{away_placeholder_team.abbr}</Text>
+                                        :
+                                        <Text style={{ flex:1 }} size={10} theme='h1'>{away_placeholder_team.market_name} {away_placeholder_team.name}</Text>
+                                        }
+                                    </View>
+                                    :
+                                    <Text color='transparent'>select</Text>
+                                    }
+                                </View>
+                                }
+                            </View>
+                            
+                        </View>
+                    </View>
+                )
+            case 'home':
+                return (
+                    <View transparent>
+                        <View style={{ flexDirection:'row', alignItems:'center', padding:12, borderBottomRightRadius:!round_event?.home_side_id || !round_event.home_placeholder?8:0, borderBottomLeftRadius:!round_event?.home_side_id || !round_event.home_placeholder?8:0  }}>
+                        <View transparent style={{ flexDirection:'row', alignItems:'center', borderRightWidth:1, borderRightColor:Colors.borders.light }}>
+                            <View transparent style={{ marginLeft:5 }}>
+                                    {renderButton('home')}
+                                </View>
+                                {round_event.event_id ?
+                                    <Text style={{ margin:5}} size={10} theme='h2'>{getScore(home_team?.team_id)}</Text>
+                                :<></>} 
+                            </View>
+                            <View transparent style={{ flex:1, marginLeft:10 }}>
+                                {round_event.home_side_id && home_team ?
+                                <View transparent style={{ flexGrow:1, flexDirection:'row', alignItems:'center' }}>
+                                    <Image
+                                        source={{ uri: home_team.image?.url }}
+                                        style={{ height:20, width:20, marginLeft:2 }}
+                                        resizeMode="cover"
+                                    />
+                                    <Text style={{ paddingRight: 5, borderRightWidth:1, borderColor:Colors.borders.light }} size={10} theme='description'>{!bracket?.hide_seeds?round_event.home_seed:''}</Text>
+                                    {compact ?
+                                    <Text style={{ flex:1 }} size={10} color={getPickColor('home', player_bracket_pick)} theme='h2'>{home_team.abbr}</Text>
+                                    :
+                                    <Text style={{ flex:1 }} size={10} color={getPickColor('home', player_bracket_pick)} theme='h2'>{home_team.market_name} {home_team.name}</Text>
+                                    }
+                                </View>
+                                :
+                                <View transparent>
+                                    {home_placeholder_pick && home_placeholder_team ?
+                                    <View style={{ flexGrow:1, flexDirection:'row', alignItems:'center' }}>
+                                        <Image
+                                            source={{ uri: home_placeholder_team.image?.url }}
+                                            style={{ height:20, width:20, marginLeft:2 }}
+                                            resizeMode="cover"
+                                        />
+                                        <Text style={{ paddingRight: 5, borderRightWidth:1, borderColor:Colors.borders.light }} size={10} theme='action'>{!bracket?.hide_seeds?home_placeholder_pick.pick_seed:''}</Text>
+                                        {compact ?
+                                        <Text style={{ flex:1 }} size={10} theme='h2'>{home_placeholder_team.abbr}</Text>
+                                        :
+                                        <Text style={{ flex:1 }} size={10} theme='h2'>{home_placeholder_team.market_name} {home_placeholder_team.name}</Text>
+                                    }
+                                    </View>
+                                    :
+                                    <Text color='transparent'>select</Text>
+                                    }
+                                </View>
+                                }
+                            </View>
+                        </View>
+                        {round_event?.home_side_id && home_placeholder_pick && home_placeholder_team?
+                        <View transparent style={{ padding:7, borderBottomRightRadius:4, borderBottomLeftRadius:4, borderTopWidth:1, borderTopColor:Colors.borders.light }}>
+                            <Text size={10} theme='h2' color={home_placeholder_pick.result_ind=='win'?Colors.text.success:Colors.text.error}>{home_placeholder_team.market_name} {home_placeholder_team.name}</Text>
+                        </View>
+                        :<></>}
+                    </View>
+                )
+        }
+    }
+
     /*
     let winning_side:string | undefined = undefined
     if(round_event.status == 'closed'){
         winning_side = round_event.winning_side_id == round_event.away_side_id ? 'away' : 'home'
     }
     */
-    const renderSide = (side:'away'|'home') => {
+    const renderRightSide = (side:'away'|'home') => {
         switch(side){
             case 'away':
                 return (
@@ -161,7 +283,11 @@ const RoundEventCard = ({ event, loading, bracket, away_team, away_placeholder_t
                                         resizeMode="cover"
                                     />
                                     <Text style={{ paddingRight: 5, borderRightWidth:1, borderColor:Colors.borders.light }} size={10} theme='description'>{!bracket?.hide_seeds?round_event.away_seed:''}</Text>
+                                    {compact ?
+                                    <Text style={{ flex:1 }} size={10} color={getPickColor('away', player_bracket_pick)} theme='h2'>{away_team.abbr}</Text>
+                                    :
                                     <Text style={{ flex:1 }} size={10} color={getPickColor('away', player_bracket_pick)} theme='h2'>{away_team.market_name} {away_team.name}</Text>                                
+                                    }
                                 </View>
                                 :
                                 <View transparent>
@@ -173,7 +299,11 @@ const RoundEventCard = ({ event, loading, bracket, away_team, away_placeholder_t
                                             resizeMode="cover"
                                         />
                                         <Text style={{ paddingRight: 5, borderRightWidth:1, borderColor:Colors.borders.light }} size={10} theme='description'>{!bracket?.hide_seeds?away_placeholder_pick.pick_seed:''}</Text>
+                                        {compact ?
+                                        <Text style={{ flex:1 }} size={10} theme='h1'>{away_placeholder_team.abbr}</Text>
+                                        :
                                         <Text style={{ flex:1 }} size={10} theme='h1'>{away_placeholder_team.market_name} {away_placeholder_team.name}</Text>
+                                        }
                                     </View>
                                     :
                                     <Text color='transparent'>select</Text>
@@ -206,7 +336,11 @@ const RoundEventCard = ({ event, loading, bracket, away_team, away_placeholder_t
                                         resizeMode="cover"
                                     />
                                     <Text style={{ paddingRight: 5, borderRightWidth:1, borderColor:Colors.borders.light }} size={10} theme='description'>{!bracket?.hide_seeds?round_event.home_seed:''}</Text>
+                                    {compact ?
+                                    <Text style={{ flex:1 }} size={10} color={getPickColor('home', player_bracket_pick)} theme='h2'>{home_team.abbr}</Text>
+                                    :
                                     <Text style={{ flex:1 }} size={10} color={getPickColor('home', player_bracket_pick)} theme='h2'>{home_team.market_name} {home_team.name}</Text>
+                                    }
                                 </View>
                                 :
                                 <View transparent>
@@ -218,7 +352,11 @@ const RoundEventCard = ({ event, loading, bracket, away_team, away_placeholder_t
                                             resizeMode="cover"
                                         />
                                         <Text style={{ paddingRight: 5, borderRightWidth:1, borderColor:Colors.borders.light }} size={10} theme='action'>{!bracket?.hide_seeds?home_placeholder_pick.pick_seed:''}</Text>
+                                        {compact ?
+                                        <Text style={{ flex:1 }} size={10} theme='h2'>{home_placeholder_team.abbr}</Text>
+                                        :
                                         <Text style={{ flex:1 }} size={10} theme='h2'>{home_placeholder_team.market_name} {home_placeholder_team.name}</Text>
+                                        }
                                     </View>
                                     :
                                     <Text color='transparent'>select</Text>
@@ -248,7 +386,7 @@ const RoundEventCard = ({ event, loading, bracket, away_team, away_placeholder_t
 
     return (
         <View transparent float style={{ flexDirection:'row', borderRadius:8, minWidth:125, width:round_width }}>
-            {onSelectContest ?
+            {!compact && orientation != 'left' && onSelectContest ?
             <Button style={{ padding:10, justifyContent:'center', alignItems:'center', borderRightWidth:1, borderColor:Colors.borders.light, borderRadius:0, borderTopLeftRadius:8, borderBottomLeftRadius:8 }}
             onPress={() => onSelectContest(round_event, player_bracket_pick, away_placeholder_pick, home_placeholder_pick)}>
                 <Icons.AlertIcon size={16} color={Colors.text.action} />
@@ -256,10 +394,10 @@ const RoundEventCard = ({ event, loading, bracket, away_team, away_placeholder_t
             :<></>}
             <View transparent style={{ flex:1  }}>
                 <Button transparent style={{ padding:0, borderBottomWidth:1, borderColor:Colors.borders.light}} onPress={() => handleSelectAway()}>
-                    {renderSide('away')}
+                    {orientation == 'left' ? renderLeftSide('away') : renderRightSide('away')}
                 </Button>
                 <Button transparent style={{ padding:0 }} onPress={() => handleSelectHome()}>
-                    {renderSide('home')}
+                    {orientation == 'left' ? renderLeftSide('home') : renderRightSide('home')}
                 </Button>
                 {loading ?
                 <View type='blur' style={{ position:'absolute', top:0, left:0, right:0, bottom:0, borderRadius:8, justifyContent:'center', alignItems:'center' }}>
@@ -270,6 +408,12 @@ const RoundEventCard = ({ event, loading, bracket, away_team, away_placeholder_t
                 </View>
                 :<></>}
             </View>
+            {!compact && orientation == 'left' && onSelectContest ?
+            <Button style={{ padding:10, justifyContent:'center', alignItems:'center', borderLeftWidth:1, borderColor:Colors.borders.light, borderRadius:0, borderTopRightRadius:8, borderBottomRightRadius:8 }}
+            onPress={() => onSelectContest(round_event, player_bracket_pick, away_placeholder_pick, home_placeholder_pick)}>
+                <Icons.AlertIcon size={16} color={Colors.text.action} />
+            </Button>
+            :<></>}
         </View>
         
     )