be-components 0.7.3 → 0.7.4

package/src/Competition/components/CompetitionCard.tsx

@@ -0,0 +1,82 @@
+import React from 'react';
+import { Image, TouchableOpacity, View } from "react-native"
+import type { CompetitionProps, CompetitionResultTypeProps, CompetitionTypeProps } from "../../types";
+import { CompetitionHelpers } from "../api";
+import Colors from "../../constants/colors";
+import { Icons, Text } from '../../Components';
+import moment from 'moment-mini';
+
+type CompetitionCardProps = {
+    competition:CompetitionProps,
+    competition_type:CompetitionTypeProps,
+    competition_result_type:CompetitionResultTypeProps,
+    backup_image_url?:string,
+    onSelect: (competition:CompetitionProps) => void
+}
+
+const CompetitionCard = ({ competition, competition_type, competition_result_type, onSelect, backup_image_url }: CompetitionCardProps) => {
+
+    if(!competition || !competition_type){ return<></> }
+
+    const comp_colors = CompetitionHelpers.getCompColors(competition_type.type)
+    const cl = competition.market_type == 'FOR_MONEY' ? '$' : 'E'
+    return (
+        <TouchableOpacity style={{ flex:1, borderRadius:8, borderWidth:1, borderColor:Colors.shades.shade600, flexShrink:0 }} onPress={() => onSelect(competition)}>
+            {competition.prize_override ?
+                <View nativeID="prize_details" style={{ padding:5, flexDirection:'row', alignItems:'center', borderTopRightRadius:8, borderTopLeftRadius:8, backgroundColor:Colors.incentive.gold }}>
+                    {competition.prize_image ?
+                    <View nativeID="prize_image" style={{ marginRight:15 }}>
+                        <Image
+                            source={{ uri: competition.prize_image.url }}
+                            style={{ height:40, width:40, borderRadius:8 }}
+                            resizeMode="center"
+                        />
+                    </View>
+                    :<></>}
+                    <Text size={12} color={Colors.shades.white} weight="bold">{competition.prize_override}</Text>
+                </View>
+            :<></>}
+            <View nativeID="comp_info">
+                <View style={{flexDirection:'row', alignItems:'center', padding:10, borderBottomWidth:1, borderBottomColor:Colors.shades.shade600 }}>
+                    <View nativeID="comp_image" style={{ marginRight:5 }}>
+                        <Image 
+                            style={{height:35, width:35, borderRadius:4}} 
+                            source={{ uri: competition.image?.url ?? backup_image_url ?? 'https://res.cloudinary.com/hoabts6mc/image/upload/v1649737982/be_logo_isfksg.webp' }} 
+                            />
+                    </View>
+                    <View nativeID="comp_name_desc" style={{ flex:1, marginLeft:5 }}>
+                        <Text size={12} color={Colors.brand.midnight} weight='semibold'>{competition.competition_name}</Text>
+                        {competition.competition_description ?
+                        <Text size={12} color={Colors.brand.midnight} weight='regular' style={{ marginTop:2 }}>{competition.competition_description}</Text>
+                        :
+                        <Text size={12} color={Colors.brand.midnight} weight='regular' style={{ marginTop:2 }}>Begins: {moment(competition.scheduled_datetime).format('MMM DD - hh:mm a')}</Text>
+                        }
+                    </View>
+                    <Icons.ChevronIcon direction="right" size={10} color={Colors.brand.midnight}/>
+                </View>
+                <View nativeID="comp_amounts" style={{ flexDirection:'row', padding:10 }}>
+                    <View style={{ flex:1, flexDirection:'row' }}>
+                        <View style={{ backgroundColor:comp_colors.backgroundColor, borderWidth:1, borderColor:comp_colors.borderColor, borderRadius:8, padding:5 }}>
+                            <Text size={10} color={comp_colors.borderColor} weight='semibold'>{competition.buy_in == 0?'FREE ENTRY':`${cl}${competition.buy_in}`}</Text>
+                        </View>
+                        {competition_type ?
+                        <View style={{ marginLeft: 5, backgroundColor:comp_colors.backgroundColor, borderWidth:1, borderColor:comp_colors.borderColor, borderRadius:8, padding:5 }}>
+                            <Text size={10} color={comp_colors.borderColor} weight='semibold'>{competition_type.type_label}</Text>
+                        </View>
+                        :<></>}
+                        {competition_result_type ?
+                        <View style={{ marginLeft: 5, backgroundColor:comp_colors.backgroundColor, borderWidth:1, borderColor:comp_colors.borderColor, borderRadius:8, padding:5 }}>
+                            <Text size={10} color={comp_colors.borderColor} weight='semibold'>{competition_result_type.label}</Text>
+                        </View>
+                        :<></>}
+                    </View>
+                    <View style={{ borderWidth:1, borderColor:Colors.shades.shade600, borderRadius:8, padding:5, marginLeft:5 }}>
+                        <Text size={10} color={Colors.brand.midnight} weight='semibold'>Available Tickets: {competition.available_tickets - competition.tickets_sold}</Text>
+                    </View>
+                </View>
+            </View>
+        </TouchableOpacity>
+    )
+}
+
+export default CompetitionCard

package/src/Competition/components/CompetitionInfoCard.tsx

@@ -0,0 +1,149 @@
+import React from 'react';
+import { Image, TouchableOpacity, View } from "react-native"
+import type { CompetitionProps, CompetitionTypeProps, MyPlayerProps } from "../../types"
+import moment from 'moment-mini';
+import { Button, Icons, Text } from '../../Components';
+import { CompetitionApi, CompetitionHelpers } from '../api';
+import Colors from '../../constants/colors';
+import { BELinkApi } from '../../Observer';
+
+type CompetitionInfoCardProps = {
+    competition:CompetitionProps,
+    competition_type:CompetitionTypeProps,
+    onViewEvents: () => void,
+    player?:MyPlayerProps,
+    onEnter: (competition_id:string) => void,
+    onLeave:() => void,
+    onViewPrize?:() => void,
+    onViewRules: () => void,
+    can_leave?:boolean
+}
+const CompetitionInfoCard = ({ player, competition, competition_type, onViewEvents, onEnter, onLeave, can_leave, onViewRules }:CompetitionInfoCardProps) => {
+
+
+
+    const handleShare = async() => {
+        let redirect_url = `https://app.bettoredge.com/competition/play/${competition.competition_id}`
+        if(player){ 
+            const { player_referral } = await CompetitionApi.getMyReferralCode() 
+            redirect_url += `?refer=${player_referral.referral_code}`
+        }
+        const { url } = await BELinkApi.generateShortLink({
+            generator:'player',
+            link_type: 'user_generated_link',
+            link_sub_type:'competition_link',
+            type_id: competition.competition_id,
+            status: 'active',
+            redirect_url
+        })
+        BELinkApi.share(competition.competition_name, undefined, url)
+    }
+
+
+    const can_enter = moment().isBefore(moment(competition.scheduled_datetime))
+    const cl = competition.market_type == 'FOR_MONEY' ? '$' : 'E'
+
+    let potential_winnings = competition.ticket_revenue
+    if(competition.promo_payout){
+        potential_winnings += competition.promo_payout
+    }
+    if(competition.guaranteed_payout){
+        if(potential_winnings < competition.guaranteed_payout){ potential_winnings = competition.guaranteed_payout }
+    }
+
+    return (
+        <View>
+            <View nativeID="competition_info">
+                <View style={{ padding:10 }}>
+                    <Text size={16} color={Colors.shades.white} weight='bold' textAlign="center">{competition.competition_name}</Text>
+                    {competition_type ?
+                    <View style={{ flexDirection:'row', justifyContent:'center', padding:10}}>
+                        
+                        <View style={{ padding:10, marginRight:4, justifyContent:'center', backgroundColor: CompetitionHelpers.getCompTypeColor(competition_type), borderRadius:4 }}>
+                            <Text size={12} color={Colors.shades.white} weight='semibold'>{competition_type.type_label}</Text>
+                        </View>
+                        <View style={{ flexDirection:'row', alignItems:'center', padding:10, marginLeft:4, backgroundColor: Colors.shades.white, borderRadius:4 }}>
+                            <Text style={{ marginRight:5 }} size={12} color={Colors.brand.midnight} weight='semibold'>{competition.invite_only?'Private':'Public'}</Text>
+                            {competition.invite_only ?
+                            <Icons.EyeOffIcon color={Colors.brand.midnight} size={14}/>
+                            :
+                            <Icons.EyeOnIcon color={Colors.brand.midnight} size={14}/>
+                            }
+                        </View>
+                        <TouchableOpacity 
+                            style={{ flexDirection:'row', alignItems:'center', padding:10, marginLeft:8, backgroundColor: Colors.incentive.gold, borderRadius:4 }}
+                            onPress={() => onViewRules ? onViewRules(): console.log('')}>
+                            {competition.prize_image ? 
+                            <Image
+                                source={{ uri: competition.prize_image.url }}
+                                style={{ height:20, width:20, marginRight:10 }}
+                                resizeMode="center"
+                            />
+                            :<></>}
+                            <Text size={12} color={Colors.shades.white} weight='semibold'>VIEW RULES</Text>
+                        </TouchableOpacity>
+                    </View>
+                    :<></>}
+                    <View style={{ flexDirection:'row', padding:10, justifyContent:'center' }}>
+                        <View style={{ padding:10, borderRightWidth:1, borderColor:Colors.shades.shade600 }}>
+                            <Text color={Colors.shades.white} size={16} weight='bold' textAlign="center">{cl}{potential_winnings.toFixed(2)}</Text>
+                            <Text style={{ marginTop:3 }} color={Colors.shades.white} size={12} textAlign="center">POT</Text>
+                        </View>
+                        <View style={{ padding:10, borderRightWidth:1, borderColor:Colors.shades.shade600 }}>
+                            <Text color={Colors.shades.white} size={16} weight='bold' textAlign="center">{competition.tickets_sold} / {competition.available_tickets}</Text>
+                            <Text style={{ marginTop:3 }} color={Colors.shades.white} size={12} textAlign="center">ENTRIES</Text>
+                        </View>
+                        {competition_type?.type == 'pick' ?
+                        <View style={{ padding:10 }}>
+                            <Text color={Colors.shades.white} size={16} weight='bold' textAlign="center">{competition.max_pick_count}</Text>
+                            <Text style={{ marginTop:3 }} color={Colors.shades.white} size={12} textAlign="center">PICKS</Text>
+                        </View>
+                        :competition_type?.type == 'wager' ?
+                        <View style={{ padding:10 }}>
+                            <Text color={Colors.shades.white} size={16} weight='bold' textAlign="center">{competition.initial_balance}</Text>
+                            <Text style={{ marginTop:3 }} color={Colors.shades.white} size={12} textAlign="center">INIT. BALANCE</Text>
+                        </View>
+                    :<></>}
+                    </View>
+                </View>
+            </View>
+            <View nativeID="competition_actions" style={{ flexDirection:'row', padding:10 }}>
+                <TouchableOpacity 
+                    style={{ padding:10, borderRadius:22, borderWidth:1, borderColor:Colors.shades.white, marginRight:10, justifyContent:'center', alignItems:'center' }}
+                    onPress={() => handleShare()}>
+                    <Icons.ShareIcon size={14} color={Colors.shades.white}/>
+                </TouchableOpacity>
+                <Button
+                    title={competition.entered?can_leave?'Leave':'My Picks':'Preview Events'}
+                    padding={10}
+                    style={{ flex:1, marginRight:3 }}
+                    title_color={can_leave?Colors.utility.error:Colors.shades.white}
+                    onPress={() => {
+                        if(can_leave && onLeave){ return onLeave() }
+                        return onViewEvents()
+                    }}
+                    borderRadius={22}
+                    borderWidth={1}
+                    backgroundColor="transparent"
+                    borderColor={can_leave?Colors.utility.error:Colors.shades.white}
+                />
+                <Button
+                    title={competition.entered || !can_enter ? 'In Progress' : 'Enter Competition'}
+                    padding={10}
+                    disabled={competition.entered || !can_enter}
+                    style={{ flex:1, marginLeft:3 }}
+                    title_color={Colors.shades.white}
+                    onPress={() => {
+                        if(competition.entered){ return }
+                        return onEnter(competition.competition_id)
+                    }}
+                    borderRadius={22}
+                    backgroundColor={ competition.entered ? Colors.accents.accent100 : Colors.utility.success}
+                    borderWidth={1}
+                />
+            </View>
+        </View>
+    )
+}
+
+export default CompetitionInfoCard

package/src/Competition/components/CompetitionLeaderboard.tsx

@@ -0,0 +1,183 @@
+import React, { useEffect, useState } from "react"
+import { FlatList, Image, ScrollView, TouchableOpacity, View, ActivityIndicator } from "react-native"
+import type { CompetitionProps, CompetitionRecordProps, CompetitionResultProps, CompetitionTypeProps, PublicPlayerProps } from "../../types"
+import { CompetitionApi, CompetitionResultApi } from "../api"
+import { Button, Icons, Text } from "../../Components"
+import Colors from "../../constants/colors"
+
+type CompetitionLeaderboardProps = {
+    competition:CompetitionProps,
+    competition_type:CompetitionTypeProps,
+    viewer_id?:string,
+    height: number,
+    view_mode: 'short'|'full',
+    onSeeFull: () => void,
+    onLeaderSelect:(player:PublicPlayerProps) => void
+}
+
+const CompetitionLeaderboard = ({ competition, competition_type, height, viewer_id, view_mode, onSeeFull, onLeaderSelect }:CompetitionLeaderboardProps) => {
+
+    const [ data, setData ] = useState<{
+        loading:boolean,
+        competition_results:CompetitionResultProps[],
+        competition_records:CompetitionRecordProps[],
+        players:PublicPlayerProps[],
+        offset:number
+    }>({
+        loading:false,
+        competition_results:[],
+        competition_records:[],
+        players:[],
+        offset:0
+    })
+
+    const { loading, competition_results, competition_records, players } = data
+
+    let results = [ ...competition_results ];
+    
+    if(view_mode == 'short'){ results = results.filter((r,i) => r ? i < 3 : i < 3) }
+
+    let viewer = players.find(p => p.player_id == viewer_id);
+    let viewer_result = competition_results.find(r => r.player_id == viewer_id);
+    let viewer_record = competition_records.find(r => r.player_id == viewer_id);
+
+    const cl = competition?.market_type == 'FOR_MONEY' ? '$' : 'E'
+
+    useEffect(() => {
+        if(!competition){ return }
+        getLeaderboardFromServer(competition.competition_id, 0)
+    },[competition])
+
+    const getLeaderboardFromServer = async(competition_id:string, offset:number) => {
+        setData({ ...data, loading:true })
+        const result_response = await CompetitionResultApi.getResultsByCompetition(competition_id, offset)
+        let player_ids = result_response.competition_results.map(cr => cr.player_id)
+        let players:PublicPlayerProps[] = []
+        if(player_ids.length > 0){ players = await CompetitionApi.getPlayersByPlayerIds(player_ids) }
+        setData({
+            ...data,
+            players,
+            competition_records: result_response.competition_records,
+            competition_results: result_response.competition_results,
+            offset,
+
+        })
+    }
+
+    const renderResults = (data: {item:CompetitionResultProps, index:number}) => {
+        let player:PublicPlayerProps | undefined = players.find(p => p.player_id == data.item.player_id)
+        let record = competition_records.find(r => r.player_id == data.item.player_id)
+        if(!player || !record){ return <></> }
+        //let roi = 0
+        //if(record.completed_stakes > 0){
+        //    roi = record.earnings / record.completed_stakes
+        //}
+        const is_pacer = competition.pacer_id == data.item.player_id ? true : false
+        return (
+            <TouchableOpacity 
+                onPress={() => onLeaderSelect(player)}
+                style={{ flexDirection:'row', margin:5, alignItems:'center', borderRadius:22, backgroundColor:is_pacer?Colors.highlights.highlight400Faded:Colors.shades.white, padding:8, paddingLeft:15, paddingRight:15}}>
+                {is_pacer ?
+                <View nativeID="pacer" style={{}}>
+                    <Icons.PacerCarIcon size={28}/>
+                </View>
+                :
+                <View nativeID="place" style={{ padding:5 }}>
+                    <Text size={12} color={Colors.brand.midnight} weight="bold">{data.item.place}</Text>
+                </View>
+                }
+                <View nativeID="image" style={{ paddingLeft:10, paddingRight:10 }}>
+                    <Image
+                        source={{ uri: player.profile_pic }}
+                        style={{ height:30, width:30, borderRadius:100 }}
+                        resizeMode="cover"
+                    />
+                </View>
+                <View nativeID="details" style={{ flex:1 }}>
+                    <Text size={12} color={Colors.brand.midnight} weight='semibold'>{player.username}</Text>
+                    {competition_type?.type == 'wager' ?
+                    <Text style={{ marginTop:3 }} size={12} color={Colors.brand.midnight} weight='regular'>{record.earnings.toFixed(2)} Earned ({record.remaining_stakes.toFixed(2)} at risk)</Text>
+                    :
+                    <Text style={{ marginTop:3 }} size={12} color={Colors.brand.midnight} weight='regular'>{record.wins} - {record.losses} - {record.draws} ({record.remaining_picks} Remaining)</Text>
+                    }
+                </View>
+                <View nativeID="winnings">
+                    <Text size={12} color={Colors.brand.slate} weight='regular'>{cl}{data.item.winnings.toFixed(2)}</Text>
+                </View>
+            </TouchableOpacity>
+        )
+    }
+    return (
+        <View style={{ flex:1, height, backgroundColor:Colors.shades.shade100  }}>
+            {view_mode == 'full' && viewer_record && viewer_result && viewer ?
+            <View>
+                {competition ?
+                <Text style={{ padding:20 }} size={18} color={Colors.brand.midnight} weight='bold' textAlign="center">{competition.competition_name}</Text>
+                :<></>}
+                 <View style={{ backgroundColor:Colors.brand.midnight, padding:10, marginBottom:10 }}>
+                    <Text size={18} color={Colors.shades.white} weight='bold' textAlign="center">Your Position</Text>
+                    <TouchableOpacity style={{ flexDirection:'row', marginTop:15, marginBottom:10, alignItems:'center', borderRadius:22, backgroundColor:Colors.shades.white, padding:8, paddingLeft:15, paddingRight:15}}>
+                        <View nativeID="place" style={{ padding:5 }}>
+                            <Text size={12} color={Colors.brand.midnight} weight="bold">{viewer_result.place}</Text>
+                        </View>
+                        <View nativeID="image" style={{ paddingLeft:10, paddingRight:10 }}>
+                            <Image
+                                source={{ uri: viewer.profile_pic }}
+                                style={{ height:30, width:30, borderRadius:100 }}
+                                resizeMode="cover"
+                            />
+                        </View>
+                        <View nativeID="details" style={{ flex:1 }}>
+                            <Text size={12} color={Colors.brand.midnight} weight='semibold'>{viewer.username}</Text>
+                            {competition_type?.type == 'wager' ?
+                                <Text style={{ marginTop:3 }} size={12} color={Colors.brand.midnight} weight='regular'>{viewer_record.earnings.toFixed(2)} Earned ({viewer_record.remaining_stakes.toFixed(2)} at risk)</Text>
+                                :
+                                <Text style={{ marginTop:3 }} size={12} color={Colors.brand.midnight} weight='regular'>{viewer_record.wins} - {viewer_record.losses} - {viewer_record.draws} ({viewer_record.remaining_picks} Remaining)</Text>
+                            }
+                        </View>
+                        <View nativeID="winnings">
+                            <Text size={12} color={Colors.brand.slate} weight='regular'>{cl}{viewer_result.winnings.toFixed(2)}</Text>
+                        </View>
+                    </TouchableOpacity>
+                </View>
+            </View>
+            :<></>}
+            <ScrollView>
+                {loading ?
+                <ActivityIndicator style={{ alignSelf:'center', padding:10 }} size='large' color={Colors.brand.midnight} /> 
+                :<></>}
+                <FlatList
+                    data={results}
+                    renderItem={renderResults}
+                    keyExtractor={(item, index) => item.competition_result_id ? item.competition_result_id.toString() : index.toString()}
+                />
+                
+            </ScrollView>
+            {view_mode == 'short' ?
+                <Button
+                    style={{ backgroundColor:undefined }}
+                    title='See Full Leaderboard'
+                    title_color={Colors.brand.electric}
+                    title_size={14}
+                    title_weight="regular"
+                    onPress={() => onSeeFull()}
+                />
+            :
+                <Button
+                    style={{ margin:10 }}
+                    title='Close'
+                    title_color={Colors.brand.electric}
+                    borderWidth={1}
+                    borderRadius={22}
+                    padding={15}
+                    borderColor={Colors.brand.electric}
+                    title_size={14}
+                    title_weight="regular"
+                    onPress={() => onSeeFull()}
+                />
+            }
+        </View>
+    )
+}
+
+export default CompetitionLeaderboard