be-components 5.4.4 → 5.4.6

package/src/GolfScoreboard/index.tsx

@@ -1,33 +1,52 @@
 import React, { useEffect, useState } from 'react';
-import { Text, View } from "../Components/Themed"
-import type { AthleteProps, GolfCourseProps, GolfLeaderProps, LeagueProps, TournamentProps } from '../types';
+import { Button, Text, View } from "../Components/Themed"
+import type { AthleteProps, BestAvailableOrderProps, GolfCourseProps, GolfHoleProps, GolfLeaderProps, GolfTournamentStatisticsProps, LeagueProps, MarketProps, OrderProps, TournamentProps } from '../types';
 import { GolfApi, GolfHelpers } from './api';
 import { FlatList, Image } from 'react-native';
 import { useColors } from '../constants/useColors';
 import moment from 'moment-mini';
 import { AthleteImage } from '../Components/Jerseys';
+import { Icons, Toggle } from '../Components';
+import SearchBox from '../Components/SearchBox';
+import LeaderBetSelector from './components/LeaderBetSelector';
 
 type GolfScoreboardProps = {
-    tournament_id:string
+    tournament_id:string,
+    markets:MarketProps[],
+    best_available:BestAvailableOrderProps[],
+    onOrder:(order:OrderProps) => void
 }
 
-const scorecard_sections = ['course','leaderboard'];
-const GolfScoreboard = ({ tournament_id }:GolfScoreboardProps) => {
+const scorecard_sections = ['course', 'toggle','search','leaderboard', 'holes'];
+const GolfScoreboard = ({ tournament_id, markets, best_available, onOrder }:GolfScoreboardProps) => {
     const Colors = useColors();
-
+    const [ active_tab, setActiveTab ] = useState<'scorecard'|'holes'>('scorecard');
+    const [ search, setSearch ] = useState<string>('');
+    const [ hole_details, setHoleDetails ] = useState<number | undefined>(undefined);
     const [ scorecard_state, setScorecard ] = useState<{
         loading:boolean,
         tournament?:TournamentProps,
         league?:LeagueProps,
         athletes:AthleteProps[],
         golf_leaders:GolfLeaderProps[],
-        golf_course?:GolfCourseProps
+        golf_course?:GolfCourseProps,
+        golf_statistics?:GolfTournamentStatisticsProps,
+        active_round?:number
     }>({
         loading:false,
         golf_leaders:[],
         athletes:[]
     });
-    const { loading, athletes, golf_leaders, golf_course, league } = scorecard_state;
+    const { loading, tournament, athletes, golf_leaders, golf_course, league, active_round, golf_statistics } = scorecard_state;
+    const [ active_leader, setActiveLeader ] = useState<string|undefined>(undefined);
+    const golf_leader = golf_leaders.find(l => l.athlete_id == active_leader);
+    const golf_athlete = athletes.find(a => a.athlete_id == active_leader);
+
+    let visible_leaders = [ ...golf_leaders ];
+    if(search){
+        let vis_athletes = athletes.filter(a => `${a.first_name} ${a.last_name}`.toLowerCase().includes(search.toLowerCase())).map(a => a.athlete_id);
+        visible_leaders = visible_leaders.filter(l => vis_athletes.includes(l.athlete_id));
+    }
 
     useEffect(() => {
         GolfApi.setEnvironment();
@@ -38,6 +57,7 @@ const GolfScoreboard = ({ tournament_id }:GolfScoreboardProps) => {
         setScorecard({ ...scorecard_state, loading:true });
         const golf_data = await GolfApi.getScoreboard(tournament_id);
         const tourney = await GolfApi.getTournamentById(tournament_id);
+        const golf_stats = await GolfApi.getGolfStats(tournament_id);
         const lg = await GolfApi.getLeagueById(tourney?.league_id ?? '9');
         if(!golf_data){ return alert('Unable to process') }
         setScorecard({
@@ -46,6 +66,8 @@ const GolfScoreboard = ({ tournament_id }:GolfScoreboardProps) => {
             league: lg,
             golf_course: golf_data.golf_course,
             golf_leaders: golf_data.golf_leaders,
+            golf_statistics: golf_stats,
+            active_round: golf_data.active_round,
             athletes:golf_data.athletes,
             loading: false
         })
@@ -58,11 +80,7 @@ const GolfScoreboard = ({ tournament_id }:GolfScoreboardProps) => {
         return (
             <View style={{ borderBottomWidth:1, borderColor:Colors.borders.light }}>
                 <View transparent type='row' style={{ padding:5 }}>
-                    {data.item.place != 999 ?
-                    <View transparent style={{ padding:10 }}>
-                        <Text theme='h2'>{GolfHelpers.formatPlace(data.item.place)}</Text>
-                    </View>
-                    :<></>}
+
                     <View float style={{ borderRadius:100, padding:2, marginLeft:5 }}>
                         <AthleteImage
                             athlete={athlete}
@@ -78,18 +96,83 @@ const GolfScoreboard = ({ tournament_id }:GolfScoreboardProps) => {
                         <Text textAlign='right' theme='h2' color={data.item.score < 0 ? Colors.text.error : Colors.text.h1}>{data.item.score_label}</Text>
                         {data.item.tee_time && current_round?.thru == 0 ?
                         <Text textAlign='right' theme='description' style={{ marginTop:2 }}>{moment(data.item.tee_time).format('HH:mm a')}</Text>
+                        :current_round && current_round?.thru > 0 ?
+                        <Text textAlign='right' theme='description' style={{ marginTop:2 }}>Thru {current_round.thru}</Text>
                         :<></>}
                     </View>
-                    {current_round ?
-                    <View style={{ padding:5 }}>
-                        <Text>{current_round.thru > 0 ? current_round.thru : ''}</Text>
-                    </View>
+                    {current_round && current_round.thru < 18 ?
+                    <Button
+                        title='BET'
+                        type='success'
+                        style={{ padding:10, marginLeft:10 }}
+                        onPress={() => setActiveLeader(data.item.athlete_id)}
+                    />
                     :<></>}
                 </View>
             </View>
         )
     }
 
+    const renderGolfers = (data:{ item:GolfLeaderProps, index:number }) => {
+        const athlete = athletes.find(a => a.athlete_id == data.item.athlete_id);
+        if(!athlete){ return <></> }
+        return (
+            <View float style={{ margin:4, width:120 }}>
+                <View type='header' style={{ borderTopRightRadius:8, borderTopLeftRadius:8, padding:5 }}>
+                    <Text theme='h1'>{data.item.score_label}</Text>
+                </View>
+                <View transparent style={{ padding:10, flex:1 }}>
+                    <AthleteImage
+                        athlete={athlete}
+                        size={24}
+                    />
+                    <Text style={{ marginTop:5 }} theme='h2' textAlign='center'>{athlete.first_name} {athlete.last_name}</Text>
+                </View>
+                <View type='footer' style={{ borderBottomLeftRadius:8, borderBottomRightRadius:8, padding:5 }}>
+                    <Button
+                        title='BET'
+                        type='success'
+                        style={{ padding:10 }}
+                        onPress={() => setActiveLeader(data.item.athlete_id)}
+                    />
+                </View>
+            </View>
+        )
+    }
+
+    const renderHoles = (data:{ item: GolfHoleProps, index:number }) => {
+        let golfers = GolfHelpers.getGolfersOnHole(golf_leaders, data.item.number, active_round);
+        let hole_stat = GolfHelpers.getHoleStats(data.item.number, golf_statistics, active_round);
+        const expanded = data.item.number == hole_details ? true : false
+        return (
+            <View>
+                <View type='header' style={{ flexDirection:'row', alignItems:'center', padding:10, borderBottomWidth:1, borderColor:Colors.borders.light }}>
+                    <View transparent style={{ flex:1 }}>
+                        <Text theme='h1'>Hole: {data.item.number}{data.item.name ? ` - ${data.item.name}`: ''} - Par {data.item.par}</Text>
+                        {hole_stat ?
+                        <Text theme='description' style={{ marginTop:3 }}>Stroke Avg {'\u2022'} {hole_stat.strokes_avg}{hole_stat?.previous_round ? hole_stat.previous_round: ''}</Text>
+                        :<></>}
+                    </View>
+                    <Button float style={{ padding:5, flexDirection:'row', alignItems:'center', borderRadius:4 }} onPress={() => expanded ? setHoleDetails(undefined) : setHoleDetails(data.item.number)}>
+                        <Icons.GolferIcon size={18} color={Colors.text.action}/>
+                        <Text theme='action' size={18} style={{ marginLeft:5 }}>{golfers.length}</Text>
+                    </Button>
+                </View>
+                {expanded ?
+                <View style={{ padding:10 }}>
+                    <FlatList
+                        key={'hole_golfer_list'}
+                        data={golfers}
+                        horizontal
+                        renderItem={renderGolfers}
+                        keyExtractor={(item) => `${data.item.number}_${item.athlete_id.toString()}`}
+                    />
+                </View>
+                :<></>}
+            </View>
+        )
+    }
+
     const renderSections = (data:{ item:string, index:number }) => {
         switch(data.item){
             case 'course':
@@ -109,15 +192,51 @@ const GolfScoreboard = ({ tournament_id }:GolfScoreboardProps) => {
                         </View>
                     </View>
                 )
+            case 'toggle':
+                return (
+                    <View style={{ padding:10 }}>
+                        <Toggle
+                            options={[
+                                { key: 'scorecard', label: 'Leaderboard' },
+                                { key: 'holes', label: 'Holes' }
+                            ]}
+                            selected_option={active_tab}
+                            onSelectOption={(key) => setActiveTab(key as 'scorecard'|'holes')}
+                        />
+                    </View>
+                )
+            case 'search':
+                return (
+                    <View style={{ padding:10 }}>
+                        <SearchBox
+                            hide_search_button
+                            onChange={(text) => setSearch(text)}
+                        />
+                    </View>
+                )
             case 'leaderboard':
+                if(active_tab != 'scorecard'){ return <></> }
                 return (
                     <FlatList
-                        data={golf_leaders.sort((a,b) => a.place - b.place)}
+                        data={visible_leaders.sort((a,b) => a.place - b.place)}
                         keyExtractor={(item) => item.athlete_id.toString()}
+                        windowSize={15}
+                        maxToRenderPerBatch={15}
                         renderItem={renderLeaders}
                         key='leader_list'
                     />
                 )
+            case 'holes':
+                if(!golf_course){ return <></> }
+                if(active_tab != 'holes'){ return <></> }
+                return (
+                    <FlatList
+                        data={golf_course.holes.sort((a,b) => b.number - a.number)}
+                        key={'hole_list'}
+                        renderItem={renderHoles}
+                        keyExtractor={(item) => item.number.toString()}
+                    />
+                )
             default: return <></>
         }
     }
@@ -133,6 +252,21 @@ const GolfScoreboard = ({ tournament_id }:GolfScoreboardProps) => {
                     renderItem={renderSections}
                 />
             </View>
+            {tournament && golf_leader && golf_course && active_round && golf_athlete ?
+            <LeaderBetSelector
+                golf_leader={golf_leader}
+                golf_course={golf_course}
+                markets={markets}
+                best_available_orders={best_available}
+                latest_trades={[]}
+                tournament={tournament}
+                active_round={active_round}
+                athlete={golf_athlete}
+                golf_statistics={golf_statistics}
+                onClose={() => setActiveLeader(undefined)}
+                onOrder={onOrder}
+            />
+            :<></>}
         </View>
     )
 }

package/src/types.d.ts

@@ -100,6 +100,35 @@ export interface GolfRoundStatistics {
     hole_statistics: GolfHoleStatistics[]
 }
 
+export interface GolfHoleStatistics {
+    round_number:number,
+    hole_number:number
+    par:number,
+    strokes: number,
+    players:number,
+    eagles:number,
+    birdies:number,
+    pars:number,
+    bogeys: number,
+    previous_round?:number,
+    double_bogeys:number,
+    holes_in_one: number,
+    other_scores:number,
+    strokes_avg:number,
+    avg_diff:number
+}
+
+export interface GolfTournamentStatisticsProps {
+    tournament_id:string,
+    round_statistics: GolfRoundStatistics[]
+}
+
+export interface GolfRoundStatistics {
+    tournament_id:string,
+    round_number: number,
+    hole_statistics: GolfHoleStatistics[]
+}
+
 export interface GolfHoleStatistics {
     round_number:number,
     hole_number:number
@@ -1353,6 +1382,7 @@ export interface MarketProps {
     suggested?:boolean,
     var_1_required?:boolean;
     show_side_option?:boolean;
+    length_variable?:number,
     resolver?:string;
     create_datetime: any;
     last_update_datetime: any;